/* ========== MOBILE RESPONSIVENESS ========== */

/* Mobile Menu - Hamburger Background */
@media (max-width: 991px) {
    .header-1,
    #header-sticky,
    .custom-header-main {
        background-color: #0B1C39 !important;
    }
    
    .sidebar__toggle i,
    .header__hamburger i {
        color: #FFFFFF !important;
    }
    
    /* Mobile menu text */
    .mean-container .mean-nav ul li a {
        color: #FFFFFF !important;
    }
    
    .mean-container .mean-nav {
        background-color: #0B1C39 !important;
    }
    
    /* Hero buttons stack vertically on mobile */
    .hero-button {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    .hero-button .theme-btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    .hero-button .button-text {
        margin-top: 10px !important;
    }
    
    /* Hero headline adjusts padding */
    .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    
    .hero-content p {
        font-size: 15px !important;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 26px !important;
    }
}


/* ========== ABOUT SECTION ICON STYLING ========== */

/* Icon Background Circles - Blue */
.about-icon-items .icon-items .icon {
    background-color: #3D4FFF !important;
    border-radius: 50% !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icon SVG/Image - White */
.about-icon-items .icon-items .icon img {
    filter: brightness(0) invert(1) !important;
    width: 40px !important;
    height: 40px !important;
}

/* ========== CTA BUTTON HOVER EFFECTS ========== */

/* Primary Button Hover - Shadow Pulse */
.theme-btn {
    transition: all 0.3s ease !important;
}

.theme-btn:hover {
    box-shadow: 0 8px 25px rgba(61, 79, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Video Play Button - Pulse Animation */
.video-btn,
.video-buttton {
    background-color: #3D4FFF !important;
    transition: all 0.3s ease !important;
}

.video-btn:hover,
.video-buttton:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 0 20px rgba(61, 79, 255, 0.5) !important;
}

/* Play icon white */
.video-btn i,
.video-buttton i {
    color: #FFFFFF !important;
}





/* ========== BRAND/TRUST SECTION ========== */

/* Background */
.brand-section {
    background-color: #f8f9fa !important;
    padding: 50px 0 !important;
}

/* Title styling */
.brand-wrapper h6 {
    color: #1A1A1A !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin-bottom: 30px !important;
}

/* Logo container */
.brand-slider .swiper-wrapper {
    align-items: center !important;
}

/* Individual logos - consistent size */
.brand-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 20px !important;
}

.brand-image img {
    max-height: 40px !important;
    width: auto !important;
    /* filter: grayscale(100%) !important; */
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

.brand-image img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* ========== AUTHOR/SIGNATURE BLOCK ========== */

.about-author {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
    margin-top: 30px !important;
}

.author-image {
    display: flex !important;
    align-items: center !important;
}

.author-image img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.author-image .content {
    margin-left: 15px !important;
}

.author-image .content h6 {
    color: #1A1A1A !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}

.author-image .content p {
    color: #6B7280 !important;
    font-size: 14px !important;
}

/* ========== SERVICE SECTION STYLING ========== */

/* Service cards */
.service-box-items {
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 30px !important;
    transition: all 0.3s ease !important;
}

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

/* Service icon */
/* .service-box-items .icon {
    background-color: #3D4FFF !important;
    border-radius: 10px !important;
    padding: 15px !important;
    display: inline-flex !important;
    margin-bottom: 20px !important;
} */

/* .service-box-items .icon img {
    filter: brightness(0) invert(1) !important;
    width: 40px !important;
    height: 40px !important;
} */

/* Service title */
.service-box-items .content h4 a {
    color: #1A1A1A !important;
    font-weight: 600 !important;
}

/* Read More button */
.theme-btn-2 {
    color: #3D4FFF !important;
    font-weight: 500 !important;
}

.theme-btn-2:hover {
    color: #2a3cd4 !important;
}

/* Arrow buttons */
.array-button button {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #1A1A1A !important;
    transition: all 0.3s ease !important;
}

.array-button button:hover,
.array-button button.array-next {
    background-color: #3D4FFF !important;
    border-color: #3D4FFF !important;
    color: #FFFFFF !important;
}











/* ========== SERVICE CARDS SECTION FIXES ========== */

/* Service Section Title */
.service-section .section-title span {
    color: #3D4FFF !important;
    font-weight: 500 !important;
}

/* Service Cards - Equal Height & Spacing */
.service-box-items {
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 30px !important;
    height: 100% !important;
    min-height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
}

/* Card Hover Effect */
.service-box-items:hover {
    box-shadow: 0 15px 40px rgba(61, 79, 255, 0.15) !important;
    transform: translateY(-8px) !important;
}

/* Service Icon - Centered, Same Size */
/* .service-box-items .icon {
    background-color: #3D4FFF !important;
    border-radius: 12px !important;
    padding: 18px !important;
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
} */

/* .service-box-items .icon img {
    filter: brightness(0) invert(1) !important;
    width: 35px !important;
    height: 35px !important;
} */

/* Service Card Content */
.service-box-items .content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.service-box-items .content h4 {
    margin-bottom: 15px !important;
}

.service-box-items .content h4 a {
    color: #1A1A1A !important;
    font-weight: 600 !important;
    font-size: 20px !important;
}

.service-box-items .content p {
    color: #6B7280 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    flex: 1 !important;
}

/* Read More Button - Fixed Styling */
.service-box-items .theme-btn-2 {
    background-color: #3D4FFF !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    margin-top: auto !important;
    transition: all 0.3s ease !important;
    text-transform: capitalize !important;
}

.service-box-items .theme-btn-2:hover {
    background-color: #2f42e6 !important;
    color: #FFFFFF !important;
}

.service-box-items .theme-btn-2 i {
    color: #FFFFFF !important;
}

/* Pagination Dot Indicator */
.swiper-dot-2 .dot-3,
.service-slider .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background-color: #E5E7EB !important;
    border: 2px solid #3D4FFF !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

.swiper-dot-2 .dot-3:hover,
.service-slider .swiper-pagination-bullet-active {
    background-color: #3D4FFF !important;
    transform: scale(1.2) !important;
}

/* Arrow Buttons */
.array-button {
    display: flex !important;
    gap: 10px !important;
}

.array-button button {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #1A1A1A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.array-button button:hover,
.array-button button.array-next {
    background-color: #3D4FFF !important;
    border-color: #3D4FFF !important;
    color: #FFFFFF !important;
}

/* Service Text Link */
.service-text h6 {
    color: #1A1A1A !important;
}

.service-text h6 a {
    color: #3D4FFF !important;
    font-weight: 600 !important;
}

.service-text h6 a:hover {
    color: #2f42e6 !important;
    text-decoration: underline !important;
}















/* Service Icon - Darker Background for Better Visibility */
.service-box-items .icon {
    background-color: #2a3cd4 !important;
    border-radius: 12px !important;
    padding: 18px !important;
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 8px 20px rgba(42, 60, 212, 0.3) !important;
}

/* Remove any overlay/blob effects */
.service-box-items .icon::before,
.service-box-items .icon::after {
    display: none !important;
}

/* Make icon images white and visible */
.service-box-items .icon img,
.service-box-items .icon svg {
    filter: brightness(0) invert(1) !important;
    width: 35px !important;
    height: 35px !important;
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
}

/* Remove decorative shapes behind icons */
.service-box-items .icon .shape,
.service-box-items .icon .bg-shape,
.service-box-items::before,
.service-box-items::after {
    display: none !important;
    opacity: 0 !important;
}






















/* ========== NAVIGATION HOVER EFFECTS ========== */

/* Main menu links - Gold hover/active */
.main-menu nav ul li a {
    transition: all 0.3s ease !important;
}

.main-menu nav ul li a:hover,
.main-menu nav ul li.active > a {
    color: #FFD700 !important;
}

/* Gold underline on hover */
.main-menu nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #FFD700;
    transition: width 0.3s ease;
}

.main-menu nav ul li a:hover::after,
.main-menu nav ul li.active > a::after {
    width: 100%;
}

/* Social icons hover - Gold */
.header-top-section .social-icon a:hover,
.header-top-section .social-icon a:hover i {
    color: #FFD700 !important;
}

/* Top bar social icons */
.top-right .social-icon a {
    transition: all 0.3s ease !important;
}

.top-right .social-icon a:hover {
    color: #FFD700 !important;
    transform: translateY(-2px);
}
































/* ============================================
   PROJECT SLIDER DOTS ALIGNMENT FIX
============================================ */

/* Center the pagination container */
.project-section .swiper-dot-2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 30px !important;
    text-align: center !important;
}

/* Style the dot container */
.project-section .swiper-dot-2 .dot-3 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Individual dots styling */
.project-section .swiper-dot-2 .dot-3 .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: #E5E7EB !important;
    border: 7px solid #3D4FFF !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    transition: all 0.3s ease !important;
}

/* Active dot styling */
.project-section .swiper-dot-2 .dot-3 .swiper-pagination-bullet-active {
    background: #3D4FFF !important;
    width: 30px !important;
    border-radius: 10px !important;
}

/* Swiper pagination general fix */
.swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: 20px !important;
}

.swiper-pagination-bullets {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ============================================
   PROJECT SLIDER DOTS - REMOVE DOTTED BORDER
============================================ */

/* Remove the dotted border from pagination container */
.project-section .swiper-dot-2,
.project-section .dot-3,
.swiper-dot-2,
.dot-3 {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Fix the swiper pagination wrapper */
.swiper-pagination-bullets.swiper-pagination-horizontal {
    border: none !important;
    outline: none !important;
}

/* Style the dots properly */
.project-section .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #CBD5E1 !important;
    border: none !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    margin: 0 6px !important;
    transition: all 0.3s ease !important;
}

/* Active dot */
.project-section .swiper-pagination-bullet-active {
    background: #3D4FFF !important;
    width: 24px !important;
    border-radius: 12px !important;
}

/* Remove any focus outlines */
.swiper-pagination-bullet:focus,
.swiper-pagination-bullet:active {
    outline: none !important;
    border: none !important;
}






























/* ============================================
   PROJECT SLIDER DOTS - SIMPLE DOTS ONLY
============================================ */

.project-section .swiper-dot-2,
.project-section .dot-3,
.swiper-dot-2,
.dot-3 {
    all: unset !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 15px 0 !important;
}

.project-section .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #CBD5E1 !important;
    border-radius: 50% !important;
    border: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.project-section .swiper-pagination-bullet-active {
    background: #3D4FFF !important;
}






/* ============================================
   PROJECT SLIDER DOTS - COMPLETE OVERRIDE
============================================ */

/* Override the blue box container */
.swiper-dot-2 {
    border: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    background: transparent !important;
    margin: 0 auto !important;
    margin-top: 30px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Override dot-3 container */
.dot-3 {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Override individual dots */
.swiper-dot-2 .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #CBD5E1 !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 1 !important;
}

/* Override active dot */
.swiper-dot-2 .swiper-pagination-bullet-active {
    background: #3D4FFF !important;
    width: 24px !important;
    border-radius: 10px !important;
}

/* Remove the ::before pseudo-element causing issues */
.swiper-dot-2 .swiper-pagination-bullet::before,
.swiper-dot-2 .swiper-pagination-bullet-active::before {
    display: none !important;
    content: none !important;
    border: none !important;
}









/* ============================================
   PROJECT SECTION SLIDER DOTS ONLY
============================================ */

/* Target ONLY project section pagination */
.project-section .swiper-dot-2 {
    border: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.project-section .dot-3 {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.project-section .swiper-dot-2 .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #CBD5E1 !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 1 !important;
}

.project-section .swiper-dot-2 .swiper-pagination-bullet-active {
    background: #3D4FFF !important;
    width: 24px !important;
    border-radius: 10px !important;
}

.project-section .swiper-dot-2 .swiper-pagination-bullet::before,
.project-section .swiper-dot-2 .swiper-pagination-bullet-active::before {
    display: none !important;
    content: none !important;
}









/* ============================================
   PROJECT SLIDER - FIX BLUE BOX & CENTER DOTS
============================================ */

/* Remove the blue box hover effect */
/* .project-section .swiper-dot-2,
.project-section .dot-3 {
    all: unset !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 30px 0 !important;
    background: transparent !important;
} */

/* Hide any pseudo elements causing the blue box */
/* .project-section .swiper-dot-2::before,
.project-section .swiper-dot-2::after,
.project-section .dot-3::before,
.project-section .dot-3::after {
    display: none !important;
    content: none !important;
    background: none !important;
} */

/* Dots styling */
/* .project-section .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #CBD5E1 !important;
    border-radius: 50% !important;
    border: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
} */

/* Active dot */
/* .project-section .swiper-pagination-bullet-active {
    background: #3D4FFF !important;
    width: 24px !important;
    border-radius: 10px !important;
} */

/* Remove any hover box effects */
/* .project-section .swiper-pagination-bullet:hover,
.project-section .swiper-pagination-bullet:focus,
.project-section .swiper-pagination-bullet:active {
    background: #3D4FFF !important;
    outline: none !important;
    box-shadow: none !important;
} */




























/* ============================================
   FOOTER CONTACT INFO - ICON & TEXT SIDE BY SIDE
============================================ */

/* .footer-section .contact-info-area .contact-info-items {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
}

.footer-section .contact-info-area .contact-info-items .icon {
    flex-shrink: 0 !important;
}

.footer-section .contact-info-area .contact-info-items .content {
    flex: 1 !important;
}

.footer-section .contact-info-area .contact-info-items .content p {
    margin: 0 0 5px 0 !important;
}

.footer-section .contact-info-area .contact-info-items .content h3 {
    margin: 0 !important;
}
```

---

This will make the icon and text appear side by side like this:
```
[ICON]  Call Us 7/24
        +44 07879 820227

[ICON]  Make a Quote
        Krupsparktech@gmail.com

[ICON]  Location
        29 Prospect Street Heywood Manchester OL10 2BB */




        /* ============================================
   FOOTER CONTACT INFO - ICON & TEXT SIDE BY SIDE
============================================ */

.contact-info-area {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

.contact-info-area .contact-info-items {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    text-align: left !important;
}

.contact-info-area .contact-info-items .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 70px !important;
    height: 70px !important;
}

.contact-info-area .contact-info-items .content {
    display: block !important;
    text-align: left !important;
}

.contact-info-area .contact-info-items .content p {
    margin: 0 0 5px 0 !important;
    text-align: left !important;
}

.contact-info-area .contact-info-items .content h3 {
    margin: 0 !important;
    text-align: left !important;
    font-size: 18px !important;
}




/* ============================================
   FOOTER CONTACT - ICON & TEXT SAME ROW
============================================ */

.contact-info-area .contact-info-items {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
}

.contact-info-area .contact-info-items .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

.contact-info-area .contact-info-items .icon svg,
.contact-info-area .contact-info-items .icon i {
    margin-bottom: 0 !important;
}

.contact-info-area .contact-info-items .content {
    display: block !important;
}

.contact-info-area .contact-info-items .content p,
.contact-info-area .contact-info-items .content h3 {
    margin: 0 !important;
    text-align: left !important;
}

.contact-info-area .contact-info-items .content h3 {
    font-size: 16px !important;
}

/* ============================================
   FOOTER CONTACT INFO - FORCE HORIZONTAL LAYOUT
============================================ */

/* Make the contact area horizontal on desktop */
.footer-section .contact-info-area {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 30px !important;
}

/* Each contact item - icon and text side by side */
.footer-section .contact-info-area .contact-info-items {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    flex: 1 !important;
    min-width: 250px !important;
}

/* Icon container */
.footer-section .contact-info-area .contact-info-items .icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
}

/* Content next to icon */
.footer-section .contact-info-area .contact-info-items .content {
    flex: 1 !important;
}

.footer-section .contact-info-area .contact-info-items .content p {
    margin: 0 0 5px 0 !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 14px !important;
}

.footer-section .contact-info-area .contact-info-items .content h3 {
    margin: 0 !important;
    font-size: 16px !important;
    color: #fff !important;
    word-break: break-word !important;
}

/* Mobile responsive - stack vertically on small screens */
@media (max-width: 768px) {
    .footer-section .contact-info-area {
        flex-direction: column !important;
    }
    
    .footer-section .contact-info-area .contact-info-items {
        width: 100% !important;
    }
}







































/* ============================================
   PRICING SECTION - RIBBON TAG STYLING
============================================ */

/* Pricing card container */
.pricing-items {
    position: relative !important;
    overflow: hidden !important;
}

/* Tag container - positioned top right */
.pricing-items .tag {
    position: absolute !important;
    top: 25px !important;
    right: -5px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove default ::before */
.pricing-items .tag::before {
    display: none !important;
}

/* The label text */
.pricing-items .tag h6 {
    position: relative !important;
    background: #3D4FFF !important;
    color: #fff !important;
    padding: 12px 20px 12px 25px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    line-height: 1 !important;
}

/* Arrow on the left side of label */
.pricing-items .tag h6::before {
    content: '' !important;
    position: absolute !important;
    left: -15px !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 19px solid transparent !important;
    border-bottom: 19px solid transparent !important;
    border-right: 15px solid #3D4FFF !important;
}

/* Active/highlighted card - Orange ribbon */
.pricing-items.active .tag h6 {
    background: #FF8C00 !important;
}

.pricing-items.active .tag h6::before {
    border-right-color: #FF8C00 !important;
}

/* Ensure enough top padding in header */
.pricing-items .pricing-header {
    padding-top: 70px !important;
}
















/* ============================================
   REMOVE CUSTOM MOUSE CURSOR EFFECT
============================================ */

.mouse-cursor,
.cursor-outer,
.cursor-inner,
.mouse-cursor.cursor-outer,
.mouse-cursor.cursor-inner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}