/* General Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Define colors based on the image */
    --color-dark: #000000;
    --color-light: #ffffff;
    --color-highlight: #00c4ff; /* Light teal/cyan */
    --color-cta: #00c4ff; /* Bright green CTA button */
    --font-family: 'Poppins', sans-serif;
}

h1 , h2, h3, h4, h5 ,h6{
    font-family: 'lazy_dog', sans-serif;
    text-transform: uppercase;
    letter-spacing: 6px;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-dark);
    /* Removed padding: 0 40px; as Bootstrap containers handle spacing */
    background-color: var(--color-light);
    overflow-x: hidden;
}

/* --- JS Scroll Effect Style --- */
/* This class is added by the script.js when the user scrolls down */
.main-header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, box-shadow 0.3s;
    position: sticky; /* Make the header stick to the top */
    top: 0;
    z-index: 1000;
    background-color: #000;
}

/* --- Header & Navigation --- */

.main-header {
    /* Keeping display: flex; for logo and nav/cta alignment */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px; /* Re-added padding for non-Bootstrap-container usage */
    background-color: #000;
}

.logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.logo span {
    font-weight: 400; 
}

.logo img{
    width:220px;
}

.main-nav{
display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-end;
        padding-top: 10px;
}

.main-nav a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    margin-left: 30px;
    font-size: 14px;
    opacity: 0.8;
}

.main-nav a:hover {
    opacity: 1;
}

.cta-button2 {
    background-color: var(--color-cta);
    color: var(--color-dark);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.cta-button i {
    margin-left: 8px;
    font-size: 12px;
}

/* --- Hero Section --- */

.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px 40px 0; /* Adjusted padding to match body style */
    max-width: 1400px; 
    margin: 0 auto;
}

.hero-content {
    flex: 1;
    max-width: 50%;
    padding-top: 50px;
}

.agency-tag {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.hero-content h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.1;
}

.hero-content .highlight {
    color: var(--color-highlight);
    font-weight: 700;
}

/* Action Buttons */
.actions {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}

.primary-action {
    background-color: var(--color-dark);
    color: var(--color-light);
    font-weight: 500;
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.secondary-action {
    text-decoration: none;
    color: var(--color-dark);
    font-weight: 500;
    margin-left: 30px;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 15px 0;
}

.secondary-action i {
    margin-left: 10px;
}

/* Brands Section */
.brands-section {
    padding-top: 50px;
}

.brands-section p {
   font-size: 60px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    margin-bottom: 40px;
    color: #00c4ff !important;
    -webkit-text-stroke: #000 3px;
   
}

.brand-logos {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn:hover{
    background: #000;
    color: #00c4ff;
    border: 1px solid #00c4ff;
}

/* Styles for the placeholder logos to visually approximate the original */
.logo-placeholder {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}
.logo-1 { width: 50px; }
.logo-2 { width: 70px; opacity: 1; font-weight: 700; font-size: 18px; }
.logo-3 { width: 90px; font-style: italic; font-weight: 600; font-size: 16px; opacity: 0.9; }
.logo-4 { width: 110px; border: 1px solid #ddd; border-radius: 3px; font-size: 12px; font-weight: 500; padding: 5px; letter-spacing: 0.5px;}
.logo-5 { width: 90px; font-weight: 900; font-size: 20px; letter-spacing: -1px; opacity: 0.9; }


/* --- Hero Visual (Video & Frame) --- */

.hero-visual {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Container for the video and the frame */
.video-in-phone-container {
   position: relative;
    width: 350px;
    height: 453px;
    z-index: 10;
}

/* The Frame Image (The Mask) - Your adjusted values for better fit */
.phone-frame-mask {
    position: absolute;
    top: -39px;
    left: -120px;
    width: 162%;
    height: 115%;
    object-fit: contain;
    pointer-events: none;
    z-index: 20;
}

/* The Looping Video Element (Iframe) */
#phoneVideo {
    position: absolute;
    top: 9px;
    left: 20px;
    width: calc(81% - 40px);
    height: calc(111% - 60px);
    border-radius: 30px;
    z-index: 15;
    filter: sepia(50%) hue-rotate(240deg) brightness(80%) saturate(150%);
}


/* Social Icons Sidebar */
.social-icons {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background-color: var(--color-light); 
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.social-icons a {
    color: var(--color-dark);
    font-size: 16px;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.social-icons a:last-child {
    border-bottom: none;
}


.chat-bubble i {
    font-size: 16px;
    margin-top: 5px;
}

/* Decorative Teal Shapes (Approximation with pseudo-elements) */
.hero-visual::before, 
.hero-visual::after {
    content: '';
    position: absolute;
    border: 3px solid var(--color-highlight);
    z-index: 5;
    opacity: 0.8;
}

/* Top-Left Curve */
.hero-visual::before {
    width: 100px;
    height: 100px;
    top: 100px;
    left: 100px;
    border-radius: 0 50px 0 50px; 
    border-bottom: none;
    border-right: none;
    transform: rotate(-45deg);
}

/* Bottom-Right Curve */
.hero-visual::after {
    width: 150px;
    height: 150px;
    bottom: 100px;
    right: 150px;
    border-radius: 50%;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}


.about-area{
    background-color: #101114;
    padding: 80px 0px !important;
}
.z-index-one {
    z-index: 1 !important;
}

.pt-120 {
    padding-top: 40px;
    padding-bottom: 100px;
}

.section-title h2 {
   color: #00c4ff;
    /* text-shadow: 0 0 .25em #1da9cc; */
    /* font-family: ArameMono-Bold; */
    font-size: 41px;
    line-height: 1.12;
    /* -webkit-text-stroke: #ffffff 1px; */
    font-weight: 900;
}

.section-title p{
    margin-top: 10px;
        color: #fff;
}

a {
    color: rgb(0 196 255);
    text-decoration: underline;
    text-decoration: none;
}

.about-wrap img {
    /* display: block !important; */
}

.w-100 {
    width: 60% !important;
    align-items: center;
    text-align: center;
}

.about-img-wrap{
    text-align: center;
}

.section-title p {
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.9;
}

/* --- Responsive Adjustments (Bootstrap-style breakpoints) --- */

@media (max-width: 992px) {
    /* Tablet and Mobile adjustments */
    
    body {
        padding: 0 20px; /* Reduced outer padding on smaller screens */
    }

    .main-header {
        padding: 20px 0;
    }
    
    .hero-section {
        flex-direction: column; /* Stacks content and visual vertically */
        padding: 30px 0 0;
    }
    
    .hero-content {
        max-width: 100%; /* Full width for content on mobile */
        padding-top: 20px;
    }
    
    .hero-content h1 {
        font-size: 40px; /* Smaller font size for H1 */
        margin-bottom: 20px;
    }

    .actions {
        margin-bottom: 40px;
        flex-direction: column; /* Stack buttons vertically */
        align-items: flex-start;
    }
    
    .primary-action {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .secondary-action {
        margin-left: 0;
        padding: 10px 0;
    }

    /* Brands section needs adjustment for the new row/col structure in the HTML */
    .brands-section {
        padding-top: 20px;
    }
    
    .brand-logos {
        flex-wrap: wrap; /* Allow logos to wrap */
        gap: 20px;
        justify-content: space-around;
    }
    
    .hero-visual {
        max-width: 100%;
        padding-bottom: 50px;
        margin-top: 40px;
    }

    /* Shrink the phone view slightly on mobile */
    .video-in-phone-container {
        width: 280px;
        height: 520px;
    }

    /* Adjust frame mask to compensate for smaller container */
    .phone-frame-mask {
        top: -53px;
        left: -43px;
        width: 140%;
    }

    #phoneVideo {
        top: 25px; 
        left: 17px;
        width: calc(100% - 34px); 
        height: calc(100% - 50px);
        border-radius: 25px;
    }

    /* Hide decorative shapes on mobile for cleaner view */
    .hero-visual::before, 
    .hero-visual::after {
        display: none;
    }

    /* Reposition chat bubble */
    .chat-bubble {
        bottom: 0;
        right: 0;
        width: 80px;
        height: 80px;
        font-size: 8px;
        padding: 10px;
    }
}

/* --- Brands Section (Slider Implementation) --- */

.brands-container {
    max-width: 1400px;
    margin: 0 auto;
}

.brands-section p {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.7;
}

/* 1. Container that hides the overflow (the Bootstrap column already helps, but this defines the area) */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* 2. The Track that moves (twice the width of the container) */
.slider-track {
    display: flex;
    gap: 30px; /* Gap between logos */
    animation: scrollLogos 25s linear infinite; /* Animation definition */
    width: fit-content; /* Allows the track to be wider than the container */
}

/* Stop animation on hover for accessibility */
.slider-track:hover {
    animation-play-state: paused;
}


/* Styles for the placeholder logos (Keeping your original styling) */
.logo-placeholder {
   height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    flex-shrink: 0;
    padding: 0px;
    margin: 0px 24px;
}
.logo-1 { width: 50px; }
.logo-2 { width: 70px; opacity: 1; font-weight: 700; font-size: 18px; }
.logo-3 { width: 90px; font-style: italic; font-weight: 600; font-size: 16px; opacity: 0.9; }
.logo-4 { width: 110px; border: 1px solid #ddd; border-radius: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0.5px;}
.logo-5 { width: 90px; font-weight: 900; font-size: 20px; letter-spacing: -1px; opacity: 0.9; }

/* 3. Keyframe Animation */
@keyframes scrollLogos {
    from {
        transform: translateX(0);
    }
    to {
        /* Move exactly the width of one set of logos */
        transform: translateX(-50%);
    }
}


/* --- Responsive Adjustments (Ensuring the slider works on mobile) --- */

@media (max-width: 992px) {
    /* ... (Keep existing responsive styles) ... */
    
    .slider-track {
        animation-duration: 15s; /* Faster scroll on mobile */
    }
}











/* --- Only keep the visual styling for the cards --- */
.service-card {
    border: 1px solid #000;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background-color: white;
    margin:0px 20px; 
        height: 620px !important;

}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: black;
    color: white;
    border-radius: 0.5rem;
}

.service-icon i {
    font-size: 1.5rem;
}

.service-features li i {
    color: #000;
}

.learn-more-btn {
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    border-color: #000;
}


/* --- Services Carousel Customization --- */

/* 1. Core Sizing and Flex setup for the sliding track */
#servicesCarousel .carousel-inner {
    display: flex; /* Makes all cards line up horizontally */
    transition: transform 0.5s ease-in-out; /* Smooth scrolling animation */
    
    /* FIX: Negative margin to accommodate the internal padding/spacing of the cards */
    margin-left: -15px; 
    margin-right: -15px;
}

/* 2. Define the card width for desktop (3 cards visible at a time) */
#servicesCarousel .carousel-inner > .col-lg-4 {
    flex: 0 0 33.333333%; /* 100% / 3 cards = 33.333% width */
    max-width: 33.333333%;
    
    /* FIX: Add back the gutter/spacing using padding */
    padding-left: 15px; 
    padding-right: 15px;
}

/* 3. Responsive adjustment for mobile (1 card visible) */
@media (max-width: 991.98px) {
    #servicesCarousel .carousel-inner > .col-md-6 {
        flex: 0 0 100%; 
        max-width: 100%;
        margin-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* --- Dot Indicator Styling --- */
.carousel-custom-indicators .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-custom-indicators .dot.active {
    background-color: #000;
}

/* Styling for the custom next button arrow */
.custom-next-btn {
    position: relative;
    width: 48px;
    height: 48px;
    background-color: black;
    border-radius: 50%;
    opacity: 1; /* Ensure it's not faded */
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Style for the arrow icon inside the button */
.custom-next-btn .carousel-control-next-icon {
    background-image: none; /* Override default Bootstrap arrow */
    width: 20px;
    height: 20px;
    /* You would replace this with an actual arrow icon or use a font icon */
}

.slides-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.services-container{
    overflow: hidden;
}








.rounded-pill{
 display: none !important;
}

.d-none{
  display: none !important;
}

.our-packages {
    padding: 60px 0;
    background: no-repeat #101114;
    position: relative;
    margin-top: 0;
    background-position: center center !important;
    background-size: cover !important;
}

.grid-item, .location-card, .portfolio, .project-area.background-dark-medium, .project-item-two .project-img, main, section {
    overflow: hidden;
}

.counter, .counter h2, .sec-title.centered, .text-center {
    text-align: center !important;
}

.our-packages h3 {
    color: #02b4d7;
    
    font-size: 48px;
}

.counter-states-box a:hover, .cta-slider-area-home-two .cta-slider-wrap h2, .darkmode .submenu .submenu__list li a, .global-form input, .main_menu ul li a, .neon-blue, .our-packages .package-item:hover *, .our-packages h4, .sec-title.light h2, .testimonial_area_four.black .testimonial_slider_one .item .client_info h5 {
    color: #fff;
}

.blog-masonry.blog-masonry-two::before, .cid-tjiNK3Tu4m .mbr-fallback-image.disabled, .custom-tab-content .custom-tab-slide, .d-none, .faq-area.inner-section-gap.mb-120 p, .has-main, .homeblog .hover .content h5, .menu .menu__header, .moretext, .packages-arrows-control, .portfolio.p-main-wraper .title, .solution-section .owl-nav, .testimonial-benefits-item:last-child:before, figure.effect-bubba h2, header.mobile-header {
    display: none;
}

.justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .slider-control .prev {
    margin-right: 30px;
}

.slider-control .prev {
    -webkit-transition: .4s;
    transition: .4s;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.our-packages .package-item {
    border-radius: 5px;
    margin: 0px 0 15px;
    transition: .5s;
    background: radial-gradient(50% 50.06% at 50% 50.06%, #0b1a3e 0, #080d27 100%);
}

.package-header {
    padding: 46px 0 22px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    background: linear-gradient(288.17deg, #4eeefd 2.3%, #0b1a3e33 47.15%, #1c2bf9 100%);
    border-top-left-radius: 31px;
    border-top-right-radius: 26px;
}

.package-item .icon {
    position: absolute;
    left: 36%;
    right: 0;
    top: 26px;
    background: #0b1a3e;
    padding: 17px 23px;
    border-radius: 50%;
    z-index: 2;
    border: 2px solid #48d7f0;
    width: 103px;
    height: 103px;
}

.package-item .package-header h4 {
    color: #fff;
    font-size: 19px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    position: relative;
    width: 50%;
    margin: 17px auto 0;
    background: #0b1a3e;
    border: 2px solid #01f6fc;
    padding: 13px 0;
    border-radius: 25px;
    line-height: 26.5px;
    box-shadow: 6.44px 6.44px 9.2px 0 #0000009e;
    font-family: 'Poppins';
}

.package-item .package-header h5 {
    font-size: 26px;
    font-weight: 700;
    line-height: 64px;
    color: #01f6fc;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    font-family: 'Poppins';
}

.package-header h6 {
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-family: 'Poppins';
    letter-spacing: 1px;
    margin-top: 20px;
}

.package-item .package-body h6:before, .package-item .package-body-data ul li:before {
    content: url(..SMM/Images/tickmarker.png);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.package-body {
    padding: 0 24px;
}
.package-item .package-body-data, .price_content .saas_price_item ul {
    max-height: 245px;
    min-height: 260px;
    overflow-y: scroll;
    margin: 20px 0 10px;
    scrollbar-color: rgb(65, 65, 65) #02b4d7 ;
}


.package-item .package-body-data ul li:before {
    padding-right: 13px;
    color: var(--c1);
    position: absolute;
    left: 0;
    top: 4px;
}

.package-item .package-body-data ul, .testimonial-benefits-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.package-item .package-body-data ul li
 {
    font-size: 16px;
    line-height: 26px;
    position: relative;
    padding-left: 28px;
    color: #fff;
}

.package-footer {padding: 3px 20px 10px;}

.package-item .package-footer a {color: #fff;text-decoration: none;padding: 14px 24px;display: inline-block;border-radius: 10px;width: 100%;text-align: center;margin: 0 1% 10px;position: relative;overflow: hidden;background: #fff0;font-size: 16px;line-height: 20px;background: #02b4d7;font-weight: 700;text-transform: capitalize;}

.package-item .package-footer p {
    font-size: 14px;
    color: #fff;
    text-align: center;
}

.package-item .package-body-data ul li:before {content: url(../SMM/Images/tickmarker.png);font-family: "Font Awesome 5 Free";font-weight: 900;}

.package-item .package-body-data, .price_content .saas_price_item ul {
    max-height: 245px;
    min-height: 260px;
    overflow-y: scroll;
    margin: 20px 0 10px;
}
 .package-body-data::-webkit-scrollbar {width: 2px;background-color: #02b4d7;}

 .package-body-data::-webkit-scrollbar-thumb {background-color: #000;border: 2px solid #555;}.package-button-list ul li button.nav-link {background: #fff0;padding: 6px 20px;color: #fff;transition: .7s;position: relative;}

 .price_content .saas_price_item ul::-webkit-scrollbar {width: 2px;background-color: #02b4d7;}.price_content .saas_price_item ul::-webkit-scrollbar-thumb {background-color: #000;border: 2px solid #555;}

 .section-title h3{
        font-size: 60px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    margin-bottom: 40px;
    color: #00c4ff !important;
    /* -webkit-text-stroke: #ffffff 1px; */
 }






 /* Custom styles to match the image */
        .social-content-section {
            padding: 3rem 0;
            background-color: white; /* Assuming a white background */
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: bold;
            line-height: 1.2;
        }

        .section-subtitle {
            font-size: 2.5rem;
            font-weight: bold;
            color: #00bcd4; /* A light teal/cyan color */
            margin-top: -0.5rem; /* Pull subtitle up closer to title */
            margin-bottom: 2rem;
        }

        .content-card {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem; /* Slightly rounded corners for the overall card area */
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .content-card img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the area */
            display: block;
            border-radius: 0.5rem; /* Apply border radius to the image itself */
        }

        .card-image-wrapper {
            position: relative;
            /* Aspect ratio approximate to the image's vertical look (e.g., 9:16) */
            padding-bottom: 177.77%; /* (16/9) * 100% */
            height: 0;
            overflow: hidden;
            border-radius: 0.5rem;
        }

        .card-image-wrapper img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.4); /* Semi-transparent background */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* Custom ring effect */
            border: 3px solid #00bcd4; /* Teal/Cyan ring */
        }

        .play-button::after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 8px 0 8px 12px;
            border-color: transparent transparent transparent #00bcd4; /* Teal/Cyan play icon */
            margin-left: 3px; /* Adjust triangle position */
        }

        .card-title-text {
            text-align: left;
            margin-top: 0.5rem;
            font-weight: 500;
        }

        /* Adjust columns for small screens */
        @media (max-width: 767.98px) {
            .col-6 {
                margin-bottom: 1.5rem;
            }
        }






        .social-shepherd-section {
            padding: 4rem 0;
        }

        .section-heading {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 2rem;
            color: var(--color-dark);
        }

        .feature-card {
            border-radius: 1rem;
            padding: 2.5rem;
            min-height: 300px; /* Ensure a consistent height for visual balance */
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Styles for the Black Cards */
        .card-dark {
            background-color: var(--color-dark);
            color: #fff;
        }

        .card-dark .card-title {
            color: #fff;
            font-weight: bold;
            font-size: 1.5rem;
            letter-spacing: 1px;
        }

        /* Styles for the Light Cards (Mint/Teal) */
        .card-light-mint {
            background-color: var(--color-highlight);
            color: var(--text-dark);
        }

        .card-light-mint .card-title {
            color: var(--text-dark);
            font-weight: bold;
            font-size: 1.5rem;
            letter-spacing: 1px;
        }

        /* Styles for the White Cards */
        .card-light-white {
            background-color: var(--text-light);
            color: var(--text-dark);
                box-shadow: 0px 1px 3px #00c4ff;
        }

        .card-light-white .card-title {
            color: var(--text-dark);
            font-weight: bold;
            font-size: 1.5rem;
            letter-spacing: 1px;
        }

        /* Checkmark Icon Styling */
        .check-icon-container {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--text-light);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .card-dark .check-icon-container {
             background-color: var(--light-card-color); /* Light mint background for icon on dark cards */
        }

        .check-icon {
            /* Using a simple Unicode checkmark icon for visual representation */
            color: var(--icon-color);
            font-size: 1.2rem;
            font-weight: 900;
            line-height: 1; /* Ensure vertical alignment */
        }

        /* Content position after icon */
        .card-content {
            margin-top: 2rem; /* Space below the icon container */
        }

        .card-content p {
            font-size: 0.95rem;
            opacity: 0.8; /* Slight fade for body text */
            line-height: 1.4;
        }

        /* Call to Action Button */
        .cta-button {
            display: inline-flex;
            align-items: center;
            background-color: var(--dark-card-color);
            color: var(--text-light);
            padding: 0.8rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.3s;
            margin-top: 2rem;
        }

        .cta-button:hover {
            background-color: #333;
            color: var(--text-light);
        }

        .cta-button .arrow {
            margin-left: 0.75rem;
            font-size: 1.2rem;
            line-height: 1;
        }

        .portfolio {
    padding: 80px 0;
        background: #0f1013;
}


.inner-portfolio-container {
    padding: 50px 0;
    max-width: 1680px;
    margin: 0 auto;
    text-align: center;
}

.grid-item {
    height: 300px;
}

.grid-item {
    padding: 6px;
    width: 410px;
    overflow: hidden;
}
.grid-item img {
    width: 100%;
    height: auto;
    transition: .9s;
    border-radius: 10px;
}

.inner-portfolio-container{
        display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.social-The{
        margin: 100px 0px;
}

.faq-area {
    background: #101114;
}

.inner-section-gap {
    padding-top: 100px;
    padding-bottom: 40px;
}

.align-items-center {
    align-items: center !important;
}

.section-title span {
    text-transform: uppercase;
    color: #fff;
}

.faq-wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 24px;
}

.accordion-flush .accordion-item:first-child {
    border-top: 0;
}

.faq-wrap .accordion-item {
    background-color: unset;
    border: unset;
}

.accordion-header {
    margin-bottom: 0;
    font-family: 'Poppins';
}

.faq-wrap .accordion-item:first-of-type .accordion-button {
    background: #fff0;
}

.faq-wrap .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}

.faq-wrap .accordion-button:not(.collapsed) {
    -webkit-box-shadow: unset;
    box-shadow: unset;
    color: #01f6fc;
}

.faq-wrap .accordion-item .accordion-body {
    padding: 5px 25px 25px;
    background-color: #17191e;
}


.faq-wrap .accordion-button {
    background-color: #17191e;
    color: #fff;
    padding: 25px;
}

.accordion-body {
    color: #fff;
}

.faq-wrap .accordion-button:not(.collapsed)::after {
    background-image: unset;
    font-family: bootstrap-icons !important;
    content: "\f2ea";
    -webkit-transform: unset;
    transform: unset;
}

.faq-wrap .accordion-button::after {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 18px;
    height: 26px;
    margin-left: auto;
    content: "\f4fe";
    font-family: bootstrap-icons !important;
    background-image: unset;
    background-repeat: no-repeat;
    background-size: unset;
    font-size: 21px;
    -webkit-transition: -webkit-transform .2s 
ease-in-out;
    transition: transform .2s 
ease-in-out;
    transition: transform .2s 
ease-in-out, -webkit-transform .2s 
ease-in-out;
}


section.testimonials-global {
    background: #101114;
}

.testimonial-info .testimonial-quote {
    font-style: italic;
    margin: 15px 0 30px;
    max-width: 600px;
    color: #fff;
}

.testimonial-info svg {
    color: #01f6fc;
}

.testimonial-slider {
    border-left: 1px solid #363d52;
    padding-left: 35px;
}

.testimonial-slider, .testimonial-slider .testimonial-button-next {
    margin-left: 30px;
}

.testimonial-author-info h4{
    color: #fff;
}

.testimonial-author-info p{
    color: #fff;
}

.testimonial-info{
    margin-left:30px;
}

.testimonial-info .testimonial-author-box .testimonial-author-info h4 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 5px;
}
.testimonial-info .testimonial-author-box img {
    max-width: 62px;
    width: 100%;
    border-radius: 50%;
}

.testimonial-author-info{
    margin-left: 20px !important;
}

.testimonial-pagination{
    margin-left: 30px;
}


/* Set base styling for the surrounding container */
        .cta-section-wrap {
            padding: 4rem 0;
            padding-top:150px;
            background-color: var(--text-light); /* Assuming the main background is white */
        }

        /* Container for the main content block (Mint + Image) */
        .cta-container {
            border-radius: 1.5rem; /* Apply overall rounded corners */
            overflow: hidden; /* Crucial to keep image within rounded corners */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow for lift */
            z-index: 42;
        }

        /* Left CTA Column Styling */
        .cta-content-column {
            background-color: var(--mint-color);
            padding: 5rem 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #fff;
                justify-content: flex-end;
        }

        .cta-text h1 {
            font-size: 3rem;
            font-weight: 900;
            line-height: 1.1;
            color: var(--dark-color);
            margin-bottom: 2rem;
        }

        .cta-text .highlight {
            color: var(--text-light); /* White text for "sheepish" highlight */
        }
        
        /* CTA Button Styling */
        .cta-button {
            display: inline-flex;
            align-items: center;
            background-color: var(--dark-color);
            color: var(--text-light);
            padding: 0.75rem 1.5rem;
            border-radius: 2rem; /* Highly rounded button */
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.3s;
        }

        .cta-button:hover {
            background-color: #333;
            color: var(--text-light);
        }

        .cta-button .arrow {
            margin-left: 0.75rem;
            font-size: 1.5rem;
            line-height: 1;
            transform: translateY(-1px); /* Minor vertical adjust */
        }

        /* Right Image Column Styling */
        .cta-image-column {
            padding: 0;
        }

        .cta-image-column img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures image covers the space without distortion */
            display: block;
        }

        /* Mobile Adjustments */
        @media (max-width: 991.98px) {
            .cta-text h1 {
                font-size: 2.5rem;
            }
            .cta-content-column {
                padding: 3rem 1.5rem;
                height: auto; /* Allow height to adjust naturally */
            }
            .cta-image-column {
                /* Ensure image stays below content on smaller screens */
                order: 2; 
            }
            .cta-content-column {
                order: 1;
            }
        }


        .footer-area {
                background: #131417;
                    padding: 190px 0px 0px 0px;
                        margin-top: -160px;
}

.justify-content-between {
    justify-content: space-between !important;
}
.justify-content-center {
    justify-content: center !important;
}
.footer-copy {
    border-top: 1px solid #363d52;
    padding: 20px 0;
}

.footer-widgets, .hero-counter-item {
    margin-bottom: 50px;
}

.footer-address {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 30px;
}

.footer-logo-wrap p {
    margin: 20px 0 30px;
    color: #fff;
}

.footer-logo-wrap a img{
    width: 100%;
}

.footer-address {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 30px;
    list-style: none;
}

.footer-address li {
    background: #17191e;
    padding: 15px;
    max-width: 290px;
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .4s;
    transition: .4s;
    margin-bottom: 16px;
    margin-right: 20px;
}
.footer-address li svg {
    color: #01f6fc;
    margin-right: 10px;
}


.footer-address li a{
color: #fff;
}

.footer-address{
    padding:0px;
}

.footer-widgets, .hero-counter-item {
    margin-bottom: 50px;
}

.footer-title h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 1.16;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
    display: inline-block;
    font-family: 'Poppins';
}

.footer-title h2::before {
    position: absolute;
    width: 80px;
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, from(#01f6fc), to(#fff0));
    background: linear-gradient(90deg, #01f6fc 0, #fff0 100%);
    content: "";
    left: 0;
    bottom: 0;
}

.footer-links{
    list-style: none;
    padding: 0px;
}

.footer-widgets{
    color: #fff;
}


.footer-links li a{
    color: #fff;
}

.footer-subscribe input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #2d3344;
    background: #fff0;
    color: #fff;
    padding-bottom: 13px;
    margin-bottom: 18px;
}

.blog-box.blog-box-standard .blog-img-wrap .img-blog-btn-wrap .img-blog-btn:hover, .common-btn {
    background-color: #01f6fc;
}

.common-btn span {
    position: relative;
    z-index: 10;
    display: block;
}

.common-btn i, .common-btn svg {
    margin-left: 8px;
}

.social-links li i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: flex;
    color: #fff;
    border: 1px solid #fff;
    height: 35px;
    width: 35px;
    font-size: 25px;
    -webkit-transition: .3s;
    transition: .3s;
    margin: 10px 0;
}

.social-links{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.social-links li:not(:last-child) {
    margin-right: 28px;
}

.bxl-facebook:before {
    content: "\ee81";
}

.bxl-pinterest-alt:before {
    content: "\eeb1";
}

.bxl-instagram:before {
    content: "\ee93";
}

.bxl-linkedin:before {
    content: "\ee9e";
}

.bxl-youtube:before {
    content: "\eeda";
}

.bxl-quora:before {
    content: "\eeb6";
}
.bxl-reddit:before {
    content: "\eeb9";
}

.footer-copy {
    border-top: 1px solid #363d52;
    padding: 20px 0;
    color: #fff !important;
}

.site-policy li:not(:last-child) {
    padding: 0 14px 0 8px;
}

.site-policy{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.site-policy li a{
    color: #fff;
}

.footer-links li:not(:last-child) {
    margin-bottom: 14px;
}

.services-offering-section{
    padding: 100px 0px !important;
}

.social-content-section{
    padding: 100px 0px !important;
}


/* mobile responsive */
@media (max-width: 768px) {
   .testimonial-area .swiper-wrapper {
        margin-left: 0 !important;
        transform: translateX(0) !important;
        padding: 10px;
        width: 100%;
    
    }
    
    .testimonial-info{
    margin-left:0px;
}
    .tab-content.active {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.our-packages .package-item{
    width: 100%;
}
    
  .hero-section .row {
    flex-direction: column-reverse; /* reverses column order on mobile */
  }

  .section-title h2{
    font-size: 28px;
  }

  .package-item .package-footer a{
    width:100%;
  }

  body{
    padding:0px;
  }

  .hero-visual{
    padding:0px !important;
  }

  .section-title h3{
    font-size: 32px !important;
  }

   .inner-portfolio-container > * {
        flex: 0 0 50%; /* Each child takes 50% width -> 2 per row */
        box-sizing: border-box; /* Ensure padding/margin don't break layout */
    }

    .grid-item {
    height: auto;
}

.logo img {
    width: 340px;
}

.main-header .cta-button2{
        width: 100%;
    text-align: center;
    display: block;
    margin-top: 12px;
}

    .main-header {
        padding: 22px 10px !important;
    }

    .hero-content h1{
        font-size: 36px;
    }

    .hero-section{
        padding: 0px 20px !important;
    }
    .brands-section {
        padding-top: 0px !important;
    }

    .mb-none{
        display: none;
    }

        .header-default .header__wrapper .header-left .logo a img {
        width: 180px !important;
    }

    .header-default.light-logo--version .mainmenu-wrapper .page_nav ul.mainmenu li a.contact-num-header i{
            font-size: 13px;
    }

    .header-default.light-logo--version .mainmenu-wrapper .page_nav ul.mainmenu li a.contact-num-header i:before{
        padding-left: 0px;
    }

    .header-default.light-logo--version .mainmenu-wrapper .page_nav ul.mainmenu li a.contact-num-header i {
    font-size: 15px !important;
}
.mainmenu-wrapper .page_nav ul.mainmenu li.lavel-1>a span{
    font-size: 15px !important;
}
.mainmenu-wrapper .page_nav ul.mainmenu li.lavel-1 {
    margin-top: 14px  !important;
}
}

.br_header  {
    position: sticky !important;
    top: 0;
    z-index: 9999;
    background: #fff; /* Keep header visible on scroll */
}

.package-body-data p{
    color: #fff;
}

.testimonial-area .swiper-wrapper{
    margin-left: 270px;
}
.footer-logo-sec img {
    width: 100%;
    max-width: 190px;
}
.footer-top-2 {
    width: 100%;
    background: #1c1c1c;
    padding: 60px 0 30px;
}

.footer-top-2 ul li {
    width: 100%;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 3px 0px;
}

.footer-top-2 ul {
    list-style: none;
    padding: 10px 0 0;
    margin: 0;
}

.footer-top-2 h6 {
    color: #fff;
    font-size: 22px;
    letter-spacing: 4px;
    margin: 0;
    margin-top: 20px;
}

.footer-bottom-2 {
    padding: 30px;
    width: 100%;
    background: #3d3b3c;
    color: #fff;
    overflow: hidden;
}

.footer-top-2 ul li a{
    color: #fff;
}

.footer-bottom-2 .left-par{
    float: left;
}
.footer-bottom-2 .right-par {
    float: right;
    margin: -20px 0 -30px;
}
.footer-bottom-2 .right-par img {
    width: 100%;
    max-width: 367px;
}

.fa-phone:before{
    color: #fff;
    padding-right: 10px;
}
.fa-envelope:before{
padding-right: 10px;
    color: #fff;

}

.fa-facebook-f:before{
    padding-right: 10px;
    color: #fff;
}
.fa-twitter:before{
    padding-right: 10px;
    color: #fff;
}

.fa-youtube:before{
     padding-right: 10px;
    color: #fff;
}

.header-default.header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #000000;
    transition: background .3s;
}

.clearfix:after, .clearfix:before {
    content: " ";
    display: table;
}

.header-default .header__wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.header-default .header__wrapper .header-left {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.header-default.light-logo--version .header__wrapper .header-left .logo a img{
    display: block;
}

.header-default .header__wrapper .header-flex-right.flex-80{
        -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.header-default .header__wrapper .header-flex-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.header-default .header__wrapper .mainmenu-wrapper.have-not-flex {
    -webkit-box-flex: inherit;
    -ms-flex-positive: inherit;
    flex-grow: inherit;
}
 nav{
    display: block;
}

.header-default .header__wrapper .mainmenu-wrapper.have-not-flex .page_nav ul.mainmenu {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.mainmenu-wrapper .page_nav ul.mainmenu li.lavel-1 {
    margin-top: 14px;
    display: inline-block;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 5px;
}

.header-default.light-logo--version .mainmenu-wrapper .page_nav ul.mainmenu li a{
    color: #fff;
}

.header-default.light-logo--version .mainmenu-wrapper .page_nav ul.mainmenu li a.contact-num-header i {
    font-size: 22px;
}

.flip-mr-5 {
    transform: scaleX(-1);
    margin-right: 5px;
}

.mainmenu-wrapper .page_nav ul.mainmenu li.lavel-1>a span {
    position: relative;
    overflow: hidden;
    font-size: 25px;
}
.header-default .header__wrapper .header-right.have-not-flex {
    -ms-flex-preferred-size: inherit;
    flex-basis: inherit;
}

.header-default .header__wrapper .header-right {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -12px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.header-default .header__wrapper .header-right.have-not-flex {
    -ms-flex-preferred-size: inherit;
    flex-basis: inherit;
}
.header-default.light-logo--version .manu-hamber.light-version, .manu-hamber.light-version{
    color: #fff;
}

.manu-hamber {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 19px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.manu-hamber div i {
    -webkit-transition: .3s 
cubic-bezier(.645, .045, .355, 1);
    -o-transition: .3s cubic-bezier(.645, .045, .355, 1);
    transition: .3s 
cubic-bezier(.645, .045, .355, 1);
    position: absolute;
    right: 20px;
    width: 20px;
    margin-top: -1px;
    width: 20px;
    height: 2px;
    background: currentColor;
}
.manu-hamber div i::after{
    position: absolute;
    left: 50%;
    width: 100%;
    height: 100%;
    top:10px;
    background: inherit;
    content: "";
    -webkit-transition: width .3s 
cubic-bezier(.645, .045, .355, 1);
    -o-transition: width .3s cubic-bezier(.645, .045, .355, 1);
    transition: width .3s 
cubic-bezier(.645, .045, .355, 1);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}

.manu-hamber div  i::before{
 position: absolute;
    right: -49%;
    width: 20px;
    height: 100%;
    top: 5px;
    background: inherit;
    content: "";
    -webkit-transition: width .3s 
cubic-bezier(.645, .045, .355, 1);
    -o-transition: width .3s cubic-bezier(.645, .045, .355, 1);
    transition: width .3s 
cubic-bezier(.645, .045, .355, 1);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}

.manu-hamber, .manu-hamber div {
    pointer-events: auto;
}

.popup-mobile-menu-wrapper .popup-mobile-manu, .portfolio.portfolio_style--2:hover .port-overlay-info {
    visibility: visible;
    opacity: 1;
}

.brook-search-popup, .popup-mobile-manu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
    visibility: hidden;
    opacity: 0;
    cursor: url(../images/icons/light-close.png) 16 16, pointer;
    -webkit-transition: .3s 
cubic-bezier(.645, .045, .355, 1);
    -o-transition: .3s cubic-bezier(.645, .045, .355, 1);
    transition: .3s 
cubic-bezier(.645, .045, .355, 1);
    z-index: 99999;
}

.brook-search-popup .inner .search-header a.search-close:hover::after, .brook-search-popup .inner .search-header a.search-close:hover::before, .open-hamberger-wrapper .page-close:hover::after, .open-hamberger-wrapper .page-close:hover::before, .page-search-popup-opened .brook-search-popup .inner, .popup-mobile-manu .inner .mobileheader a.mobile-close:hover::after, .popup-mobile-manu .inner .mobileheader a.mobile-close:hover::before, .popup-mobile-menu-wrapper .popup-mobile-manu .inner {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.brook-search-popup .inner, .popup-mobile-manu .inner {
    background: #000;
    position: relative;
    width: 400px;
    max-width: 80%;
    height: 100%;
    text-align: left;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    overflow-y: auto;
    padding-top: 85px;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    cursor: default;
}

.popup-mobile-manu .inner .mobileheader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0 15px 0 30px;
    height: 85px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #252525;
}

.popup-mobile-manu .inner .mobileheader .logo, .single-motive-speach .content {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.popup-mobile-manu .inner .mobileheader .logo a img {
    width: 175px;
    height: auto;
    max-width: 100%;
}

.brook-search-popup .inner .search-header a.search-close, .popup-mobile-manu .inner .mobileheader a.mobile-close {
    position: relative;
    cursor: pointer;
    height: 40px;
    width: 40px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.popup-mobile-manu .inner .mobileheader a.mobile-close::after, .popup-mobile-manu .inner .mobileheader a.mobile-close::before {
    position: absolute;
    top: 19px;
    left: 8px;
    content: "";
    width: 24px;
    height: 3px;
    background: #fff;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: .3s 
cubic-bezier(.645, .045, .355, 1);
    -o-transition: .3s cubic-bezier(.645, .045, .355, 1);
    transition: .3s 
cubic-bezier(.645, .045, .355, 1);
}

.brook-search-popup .inner .search-header a.search-close::before, .open-hamberger-wrapper .page-close::before, .popup-mobile-manu .inner .mobileheader a.mobile-close::before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.object-custom-menu {
    padding: 0;
    margin: 20px 40px 30px;
    list-style: none;
}
.object-custom-menu li, .object-custom-menu li.has-mega-menu {
    position: relative;
    border-top: 1px solid transparent;
    border-color: rgba(255, 255, 255, .15);
}

.object-custom-menu li>a, .object-custom-menu li>a:hover, .object-custom-menu li>a:visited {
    padding-top: 19px;
    padding-bottom: 19px;
    display: block;
    position: relative;
    color: #fff;
}

.contactinfo {
    padding: 0 40px 30px;
}

.contactinfo p {
    color: #fff;
    font-size: 19px;
    text-transform: capitalize;
    padding-bottom: 15px;
}

.contactinfo ul {
    list-style: none;
    padding: 0;
}

.contactinfo li, .pb--20 {
    padding-bottom: 20px;
}

.contactinfo a {
    display: flex;
    color: #fff;
    font-size: 17px;
    gap: 11px;
    align-items: center;
}



.header-default .header__wrapper .header-flex-right.flex-80, .header-default .header__wrapper .mainmenu-wrapper, .header-left--align.header-default .header__wrapper .header-left, .popup-mobile-manu .inner .mobileheader .logo, .single-motive-speach .content {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.pl--35 {
    padding-left: 35px;
}

.tab-content.active {
  display: flex;
  gap: 20px;
  justify-content: center;
}

button.tab-btn.active {
    color: #00c4ff;
    border: 1px solid #00c4ff;
    border-radius: 2px;
    box-shadow: -1px 1px 11px #0006;
    padding: 10px 25px;
    background: #00000000;
}

button.tab-btn {
    color: #fff;
    padding: 10px 25px;
    background: #00000000;
    border: none;
}

button.tab-btn:hover{
    color: #00c4ff;
    border-radius: 2px;
    box-shadow: -1px 1px 11px #0006;
    padding: 10px 25px;
    background: #00000000;
}

.pricing-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.tab-content {
  display: none;
}



.pricing-tabs {
  text-align: center;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  background: #222;
  color: #0ff;
  border: 1px solid #0ff;
  margin: 0 10px;
  cursor: pointer;
}

.tab-btn.active {
  background: #0ff;
  color: #000;
}

.tab-content {
  display: none;
  justify-content: center;
  gap: 20px;
}

.tab-content.active {
  display: flex;
}

.box {
  background: #333;
  padding: 20px;
  color: #fff;
}

.package-item {
    width: 55%;
}

.package-item .icon{
    display: none;
}

.pill {
     display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #8fe5ff;
    border: 1px solid rgba(17, 182, 255, 0.5);
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-offer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgb(0 196 255 / 44%);
    border: 1px solid rgb(0 196 255);
    color: #000000;
    font-size: 12px;
    margin-bottom: 20px;
}

h6.service-description.mb-4 {
font-family:'Poppins', sans-serif;
letter-spacing: 1px;
text-transform: capitalize;
}

.content-style-01 p{
 color: #fff;
}

.social-content-section h2{
    margin-bottom: 0px;
} 

.social-The h2{
    margin-bottom: 0px;
}


.social-The p{
    margin-bottom: 40px;
}

.testimonial-area h3{

    font-size: 40px !important;
}

.cta-section-wrap .cta-text h1{
    font-size: 24px;
    letter-spacing: 1px;
}
.cta-button-w-bg{
    background-color: #ffffff;
    color: var(--color-dark);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-top: 10px;
}


.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-box {
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 420px;
    border-radius: 10px;
    position: relative;
}

.popup-box input,
.popup-box textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.close-popup {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 25px;
    cursor: pointer;
}