/* --- Reset and Fonts --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --accent-orange: #0dcaf0;
    --text-dark: #222222;
    --text-gray: #686868;
    /* The specific soft gradient from the image */
    --bg-gradient: linear-gradient(135deg, #f0f2ff 0%, #f4f9fc 60%, #f4fdfd 100%);
}

section {
    overflow: hidden !important;
}

body {
    background: var(--bg-gradient);
    color: var(--text-dark);
    min-height: 100vh;
    overflow-x: hidden;
    /* Prevent horizontal scroll from floating elements */
    position: relative;
}

@media (max-width: 768px) {
    .sm_hide {
        display: none !important;
    }

    h3 {
        font-size: 2rem !important;
    }
}

@media (min-width: 768px) {
    .lg_hide {
        display: none !important;
    }

    h3 {
        font-size: 2.6rem !important;
    }
}

img {
    width: 100%;
}

.heading {
    margin-bottom: 2rem;
}

/* Un-nested selectors */
.heading h3,
.heading p {
    /* text-align: center; */
}

.heading h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 800;
}

.heading span {
    position: relative;
    z-index: 1;
    display: inline-block;
    /* Added: Ensures the width applies correctly */
}

/* .heading span::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: #1da1f2; 
    z-index: -1; 
    opacity: 0.7;
    border-radius: 4px;
} */

/* Media Queries must be outside or standard syntax */
@media(min-width: 765px) {
    .heading h3 {
        font-size: 3rem !important;
    }
}

@media(max-width: 765px) {
    .heading h3 {
        font-size: 2rem !important;
    }
}

.main-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 25px;
    position: relative;
}

/* --- Header --- */
/* --- Header & Nav Base --- */

/* --- Variables & Reset (Unchanged) --- */
:root {
    --primary-color: #051441;
    --secondary-color: #0d6efd;
    --accent-red: #ea4335;
    --accent-yellow: #fbbc04;
    --accent-green: #34a853;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --white: #ffffff;
    --bg-light: #f4f7fc;
    --font-main: 'Poppins', sans-serif;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Buttons --- */
.btn-primary {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    display: inline-block;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
}




/* ==================== NAVBAR STYLES ==================== */


/* --- Default (Desktop) Styles --- */
.mobile-footer {
    display: none;
    /* CRITICAL: Hides this section on desktop */
}

.desktop-only {
    display: inline-block;
    /* Shows desktop button */
}

/* ... (Your existing Navbar Styles) ... */

/* --- Mobile Styles (Max-width 768px) --- */
@media (max-width: 768px) {

    /* Hide Desktop Button */
    .desktop-only {
        display: none;
    }

    .dropdown-content li a {
        font-size: 15px;
    }

    /* Enable Mobile Footer Wrapper */
    .mobile-footer {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        gap: 20px;
        border-top: 1px solid #f0f0f0;
        /* padding-top: 20px; */
        margin-bottom: 0;
    }

    /* 1. Action Buttons (Call/WA) */
    .action-buttons {
        display: flex;
        gap: 15px;
    }

    .act-btn {
        flex: 1;
        height: 50px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        color: white;
        text-decoration: none;
        transition: transform 0.2s;
    }

    .act-btn:active {
        transform: scale(0.98);
    }

    .act-btn.call {
        background-color: #007bff;
    }

    /* Blue */
    .act-btn.whatsapp {
        background-color: #25d366;
    }

    /* Green */

    /* 2. Address Cards */
    .address-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .addr-card {
        background: #051441;
        /* Navy Theme */
        padding: 15px;
        border-radius: 8px;
        color: white;
    }

    .addr-card h5 {
        font-size: 14px;
        margin-bottom: 5px;
        color: #fff;
    }

    .addr-card p {
        font-size: 12px;
        line-height: 1.4;
        color: #ccc;
        margin: 0;
    }

    /* 3. Social Icons */
    .mobile-socials {
        display: flex;
        justify-content: space-between;
        /* Spreads them out evenly */
        background: #f8f9fa;
        padding: 10px;
        border-radius: 8px;
    }

    .ms-icon {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border-radius: 5px; */
        color: white;
        font-size: 18px;
        text-decoration: none;
    }

    /* Brand Colors */
    .ms-icon.insta {
        background: #E1306C;
    }

    .ms-icon.fb {
        background: #1877F2;
    }

    .ms-icon.x {
        background: #d20014;
    }

    .ms-icon.linkd {
        background: #0077B5;
    }

    /* Fix Layout Scroll */
    .nav-menu {
        overflow-y: auto;
        /* Allows scrolling if phone screen is short */
        padding-bottom: 50px;
    }
}


/* Fix the navbar to the top */
/* --- Basic Reset & Variables --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

/* --- Navbar Layout --- */
.navbar {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 100%;
    position: fixed;
    /* Keep navbar at top */
    top: 0;
    z-index: 1000;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}

.nav-logo img {
    height: 40px;
    /* Adjust based on your logo */
}

/* --- Desktop Menu Styles --- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    transition: 0.3s;
}

.nav-link:hover {
    color: #007bff;
}

.btn-nav {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-nav:hover {
    background: #0056b3;
}

/* Hide Mobile Elements on Desktop */
.menu-icon,
.close-icon {
    display: none;
    cursor: pointer;
}

/* --- Dropdown Styles --- */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    list-style: none;
    top: 100%;
    /* width: 100%; */
    padding-left: 0;
    border-radius: 14px;
    border-top: 3px solid #0dcaf0;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content li a {
    color: #051441;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content li a:hover {
    background-color: #f1f1f1;
}

/* ============================ */
/* MOBILE RESPONSIVENESS   */
/* ============================ */
@media (max-width: 768px) {

    /* Show Hamburger Icon */
    .menu-icon {
        display: block;
        width: 30px;
        height: 30px;
        color: #333;
    }

    /* Mobile Menu Container - Initially Hidden off-screen */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        /* Width of mobile menu */
        /* max-width: 300px; */
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 30px;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.4s ease;
        /* Smooth slide effect */
        z-index: 1001;
    }

    /* Class added via JS to show menu */
    .nav-menu.show-menu {
        right: 0;
    }

    .dropbtn.show-submenu {
        display: block;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        margin-bottom: 30px;
    }

    /* Close Icon */
    .close-icon {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
        color: #333;
    }

    /* Mobile Dropdown adjustment */
    .dropdown-content {
        position: static;
        box-shadow: none;
        padding-left: 15px;
        border: 0;
    }

}

/* --- Default Desktop Styles --- */
.mobile-footer {
    display: none;
    /* Hide footer on desktop */
}

/* --- Mobile Responsiveness (Max-width 768px) --- */
@media (max-width: 768px) {

    /* Show Mobile Footer */
    .mobile-footer {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        padding-top: 20px;
        gap: 20px;
        border-top: 1px solid #eee;
    }

    /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 15px;
    }

    .act-btn {
        flex: 1;
        height: 50px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 22px;
        text-decoration: none;
    }

    .call {
        background: #007bff;
    }

    .whatsapp {
        background: #25d366;
    }

    /* Address Cards */
    .address-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .addr-card {
        background: #051441;
        padding: 15px;
        border-radius: 8px;
        color: white;
    }

    .addr-card h5 {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .addr-card p {
        font-size: 12px;
        line-height: 1.4;
        color: #ccc;
    }

    /* Social Icons */
    .mobile-socials {
        display: flex;
        justify-content: space-between;
        background: #f8f9fa;
        padding: 10px;
        border-radius: 8px;
    }

    .ms-icon {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border-radius: 5px; */
        color: white;
        font-size: 18px;
        text-decoration: none;
    }

    .insta {
        background: #E1306C;
    }

    .fb {
        background: #1877F2;
    }

    .x {
        background: #000;
    }

    .linkd {
        background: #0077B5;
    }

    /* --- Toggle Logic for Dropdown --- */
    /* Hide dropdown by default on mobile (even on hover) */
    .dropdown:hover .dropdown-content {
        display: none;
    }

    /* Only show when JS adds 'show-submenu' class */
    .dropdown-content.show-submenu {
        display: block !important;
        position: static;
        /* Stack naturally */
        box-shadow: none;
        padding-left: 20px;
        background: #f9f9f9;
        width: 100%;
    }

    .nav-menu {
        overflow-y: auto;
        padding-bottom: 50px;
    }
}




/* ===================== header section=============================================== */

/* New Hero Image Styles */


.hero {
    padding: 50px 0;
    position: relative;


    /* .tech-lines-pattern{
        position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%230086be' fill-opacity='0.08'/%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 120px 120px;

    z-index: 0;
    pointer-events: none;
    

    } */


    h1 {
        font-size: 3rem;
        font-weight: 800;
        margin: 2rem 0;

    }

    .hero-text {
        .tagline {
            padding: 5px 20px;
            background: #0086be;
            color: white;
            border-radius: 25px;
        }
    }
}

.hero-image {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.image-wrapper {
    position: relative;
    width: 100%;
    /* max-width: 500px; */
}

.main-img {
    width: 100%;
    border-radius: 20px;
    /* box-shadow: 0 20px 50px rgba(5, 20, 65, 0.15); */
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s;
    animation: floatImage 5s ease-in-out infinite;
}

.hero-image:hover .main-img {
    transform: perspective(1000px) rotateY(0deg);
}

@keyframes floatImage {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Floating Cards Over Image */
.floating-card {
    position: absolute;
    background: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    z-index: 3;
}

.c1 {
    top: 10%;
    left: -30px;
    border-left: 4px solid var(--accent-red);
}

.c2 {
    bottom: 10%;
    right: -20px;
    border-left: 4px solid var(--accent-green);
}

.c1 i {
    color: var(--accent-red);
}

.c2 i {
    color: var(--accent-green);
}

.blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 1;
}

.blob-1 {
    width: 533px;
    height: 477px;
    background: #0d6efd21;
    top: -100px;
    left: -195px;
}

/* .blob-2 {
    width: 200px;
    height: 200px;
    background: var(--accent-yellow);
    bottom: 50px;`
    right: 5%;
} */

/* --- About Section (Redesigned) --- */
.about-section {
    padding: 80px 0;
    background-color: var(--white);
}

.about-container {
    display: flex;
    gap: 60px;
    align-items: center;
}

/* About Image Side */
.about-image {
    flex: 1;
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.exp-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--secondary-color);
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
}

.exp-badge .years {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.exp-badge .text {
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* About Content Side */
.about-content {
    flex: 1.2;
}

.about-desc {
    margin-bottom: 30px;
    font-size: 1.05rem;
    color: var(--text-light);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-box {
    padding: 20px;
    border-radius: 12px;
    background: var(--bg-light);
    border: 1px solid #eee;
    transition: 0.3s;
}

.feature-box:hover {
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}

.feature-box i {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.feature-box h4 {
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.feature-box p {
    font-size: 0.85rem;
    color: var(--text-light);
}

.color-blue-text {
    color: var(--secondary-color);
}

.color-green-text {
    color: var(--accent-green);
}

.color-red-text {
    color: var(--accent-red);
}

.color-yellow-text {
    color: var(--accent-yellow);
}

/* --- Services Flow (Same as before) --- */
.services-flow {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.section-header {
    margin-bottom: 60px;
}

.sub-title {
    color: var(--secondary-color);
    /* font-weight: 700; */
    /* text-transform: uppercase; */
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.section-header h3 {
    font-size: 2.5rem !important;
    color: var(--primary-color);
    margin: 10px 0;
}

.section-header p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.flow-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-left: 50px;
}

.flow-container::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.flow-item {
    position: relative;
    margin-bottom: 60px;
}

.flow-marker {
    position: absolute;
    left: -50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    z-index: 2;
    box-shadow: 0 0 0 5px #f8f9fa;
}

.color-blue-bg {
    background-color: var(--secondary-color);
}

.color-red-bg {
    background-color: var(--accent-red);
}

.color-yellow-bg {
    background-color: var(--accent-yellow);
}

.color-green-bg {
    background-color: var(--accent-green);
}

.flow-content h3 {
    font-size: 1.6rem !important;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.flow-intro {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 20px;
    font-style: italic;
}

.flow-details {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
}

.flow-list-col {
    flex: 2;
    min-width: 250px;
}

.flow-list-col h4 {
    font-size: 0.95rem;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    display: inline-block;
}

.check-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.check-list li::before {
    content: '\f00c';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 0.75rem;
    color: var(--secondary-color);
}

.flow-benefit-col {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f9faff;
    border-left: 4px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.color-blue-border {
    border-left-color: var(--secondary-color);
}

.color-red-border {
    border-left-color: var(--accent-red);
}

.color-yellow-border {
    border-left-color: var(--accent-yellow);
}

.color-green-border {
    border-left-color: var(--accent-green);
}


/* --- Workflow Grid (Same as before) --- */
.workflow-grid-section {
    background-color: var(--white);
    padding: 80px 0;
}

.workflow-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.workflow-box {
    background: var(--white);
    border: 1px solid #eee;
    padding: 30px 20px;
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
    text-align: left;
    overflow: hidden;
}

.workflow-box:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
    border-color: var(--secondary-color);
}

.wf-number {
    font-size: 3rem;
    font-weight: 700;
    color: #f0f2f5;
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
    transition: 0.3s;
}

.workflow-box:hover .wf-number {
    color: rgba(13, 110, 253, 0.1);
}

.workflow-box h4 {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    margin-top: 10px;
}

.workflow-box .wf-desc {
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
    color: var(--text-light);
}

.highlight-box {
    background-color: var(--primary-color);
    color: white;
}

.highlight-box h4 {
    color: white;
}

.highlight-box .wf-desc {
    color: rgba(255, 255, 255, 0.7);
}

.highlight-box .wf-number {
    color: rgba(255, 255, 255, 0.05);
}

/* --- CTA Section (NEW) --- */
.cta-section {
    position: relative;
    background: url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center/cover no-repeat fixed;
    padding: 100px 0;
    text-align: center;
    color: white;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 20, 65, 0.85);
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-content h3 {
    font-size: 2.5rem !important;
    margin-bottom: 15px;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-btn {
    background-color: var(--accent-red);
    box-shadow: 0 4px 15px rgba(234, 67, 53, 0.4);
}

.cta-btn:hover {
    background-color: #d32f2f;
}

/* --- Footer --- */
footer {
    background-color: var(--primary-color);
    color: white;
    padding-top: 70px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 50px;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-col h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.footer-col p {
    opacity: 0.8;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #d1d5db;
    transition: 0.3s;
    font-size: 0.9rem;
}

.footer-col ul li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

.footer-col ul li i {
    margin-right: 10px;
    color: var(--secondary-color);
}

.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    margin-right: 10px;
    transition: 0.3s;
}

.social-links a:hover {
    background: var(--secondary-color);
}

.footer-bottom {
    background-color: #030c26;
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .nav-links {
        /* position: fixed; */
        /* right: -100%; */
        top: 70px;
        height: calc(100vh - 70px);
        background-color: var(--white);
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: center;
        transition: 0.4s;
        padding-left: 0;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 0;
        /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);g309
         */
    }

    .nav-links.active {
        right: 0;
    }

    .hamburger {
        display: block;
    }

    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .image-wrapper {
        margin-top: 30px;
        max-width: 100%;
    }

    .about-container {
        flex-direction: column;
    }

    .exp-badge {
        right: 10px;
        bottom: 10px;
        padding: 10px 20px;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .flow-container {
        padding-left: 0;
    }

    .flow-container::before {
        display: none;
    }

    .flow-marker {
        position: static;
        margin-bottom: 15px;
        margin-left: 0;
    }

    .flow-item {
        text-align: left;
    }

    .flow-details {
        flex-direction: column;
    }

    .workflow-container {
        grid-template-columns: 1fr;
    }
}

.navbar.scrolled {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}


/* ===============================================================
                    about start                                     
====================================================================== */

/* --- Redesigned Growth Section Container --- */
.growth-redesign-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    /* Ensure shapes don't spill out */
    /* background: #fff; */
}

/* Angled Background Shape */
.angle-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    /* background: #fffcf5; */
    /* Creates the diagonal cut */
    clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
    z-index: 0;
}

.growth-grid {
    display: grid;
    /* Left side gets slightly more space for visuals */
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
    /* Above background */
}

/* === Left Side: Visual Collage Styling === */
.visual-collage-container {
    position: relative;
    min-height: 500px;
    /* Ensure height for absolute items */
}

/* --- Decorative Shapes --- */
.blob {
    position: absolute;
    z-index: -1;
    /* Behind images */
    opacity: 0.7;
    border-radius: 50%;
}

/* Organic orange blob bottom left */
.shape-1 {
    width: 300px;
    height: 300px;
    background: #ffecd2;
    /* Light Orange theme */
    bottom: -40px;
    left: -50px;
    /* CSS trick for organic "blob" shape */
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: pulse-slow 8s ease-in-out infinite alternate;
}

/* Smaller yellow shape top right */
.shape-2 {
    width: 150px;
    height: 150px;
    background: #fff59d;
    /* Light Yellow theme */
    top: 40px;
    right: 10%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Dot pattern texture */
.dots-texture {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 200px;
    height: 200px;
    /* Creates a polka dot pattern */
    background-image: radial-gradient(#0dcaf0 20%, transparent 20%);
    background-size: 15px 15px;
    opacity: 0.15;
    z-index: -2;
}

@keyframes pulse-slow {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1.05) rotate(5deg);
    }
}

/* --- Image Grid Collage Layout --- */
.image-collage.grid-layout {
    display: grid;
    /* A 12x12 grid allows precise overlapping placement */
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 50px);
}

.image-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* Image 1: Tall Main Image */
.main-img {
    grid-column: 1 / span 7;
    /* Occupies left side */
    grid-row: 2 / span 9;
    /* Tall vertical span */
    border-radius: 20px;
    z-index: 2;
}

/* Image 2: Wide Overlapping Image */
.overlap-img {
    grid-column: 6 / span 7;
    /* Starts middle, goes right */
    grid-row: 7 / span 5;
    /* Sits lower down */
    /* Unique "Leaf" border radius shape */
    border-radius: 40px 0px 40px 0px;
    z-index: 3;
    /* Sits on top */
}

/* Image 3: Small Accent Image */
.accent-img {
    grid-column: 9 / span 4;
    /* Top right area */
    grid-row: 1 / span 4;
    border-radius: 50%;
    /* Circle shape */
    border: 5px solid white;
    z-index: 1;
}

/* Hover Effect for collage */
.visual-collage-container:hover .main-img {
    transform: translateX(-10px);
}

.visual-collage-container:hover .overlap-img {
    transform: translateY(-10px);
}


/* === Right Side: Content Styling === */
.content-side {
    padding-left: 20px;
}

.section-title {
    font-size: 38px;
    font-weight: 800;
    color: #222;
    line-height: 1.2;
    margin-bottom: 30px;
    position: relative;
}

/* Small accent line under title */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #0dcaf0;
    /* Theme Orange */
    margin-top: 15px;
    border-radius: 2px;
}

.lead-paragraph {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.6;
    margin-bottom: 25px;
    border-left: 3px solid #0dcaf0;
    padding-left: 20px;
    /* Indent the lead paragraph */
}

.body-paragraph {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
}


/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .growth-grid {
        grid-template-columns: 1fr;
        /* Stack on tablets/mobile */
        gap: 60px;
    }

    .visual-collage-container {
        order: 2;
        /* Move visual below content on mobile if preferred, or keep as is */
        max-width: 600px;
        margin: 0 auto;
        /* Center the collage */
    }

    .content-side {
        padding-left: 0;
        text-align: left;
    }

    .angle-bg {
        width: 100%;
        height: 40%;
        bottom: 0;
        top: auto;
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
    }
}

@media (max-width: 600px) {

    /* Simplify collage on very small screens */
    .image-collage.grid-layout {
        display: block;
    }

    .image-collage img {
        width: 100%;
        height: 250px;
        margin-bottom: 20px;
        border-radius: 15px;
    }

    /* Hide complex shapes on mobile */
    .accent-img,
    .dots-texture {
        display: none;
    }

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

/* ===============================================================
                    about end                                     
====================================================================== */

/* ===============================================================
                  seo services start                               
====================================================================== */

/* --- Data SEO Section Layout --- */
.data-seo-section {
    padding: 50px 0;
    /* backgroud-color: #fbfbfb;  */
}

.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

/* === Right Side: Typography === */
.seo-content-side {
    text-align: left;
}

.sub-heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #0dcaf0;
    /* Theme Orange */
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

.main-heading {
    font-size: 40px;
    line-height: 1.2;
    color: #222;
    margin-bottom: 30px;
    font-weight: 700;
}

.text-highlight {
    color: #0dcaf0;
    position: relative;
    display: inline-block;
}

/* Subtle underline for highlight */
.text-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(255, 171, 0, 0.2);
    z-index: -1;
}

.seo-desc {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.seo-btn {
    background: linear-gradient(to right, #1da1f2, #00386d);
    color: white;
    border: none;
    padding: 15px 35px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;

    a {
        color: white;
        text-decoration: none;
    }
}

.seo-btn:hover {
    background: #0dcaf0;
}


/* === Left Side: CSS Analytics Visual === */
.analytics-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

/* Background Circle decoration */
.soft-circle-bg {
    position: absolute;
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #fff3e0 0%, #ffffff 100%);
    border-radius: 50%;
    z-index: 1;
}

/* The Dashboard Card */
.seo-dashboard-card {
    position: relative;
    z-index: 2;
    background: white;
    width: 100%;
    /* max-width: 450px;
    padding: 30px; */
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);

    .img_div {
        border-radius: 8px;
        overflow: hidden;
    }
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    display: none;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.red {
    background: #ff5f57;
}

.yellow {
    background: #ffbd2e;
}

.green {
    background: #28c940;
}

.card-header span {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #888;
}

/* The Bar Chart */
.chart-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    padding: 0 10px;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 40px;
}

.bar {
    width: 100%;
    background: #eee;
    border-radius: 5px;
    transition: height 1s ease-out;
    position: relative;
    /* Animation: Grow up */
    animation: growBar 1.5s ease-out forwards;
    transform-origin: bottom;
}

/* Heights */
.h-40 {
    height: 40%;
}

.h-60 {
    height: 60%;
}

.h-50 {
    height: 50%;
}

.h-80 {
    height: 80%;
}

.h-100 {
    height: 100%;
}

/* The main bar */
.highlight-bar {
    background: linear-gradient(to top, #0dcaf0, #ffd740);
    box-shadow: 0 -5px 15px rgba(255, 171, 0, 0.4);
}

.month {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* Floating Badge */
.floating-stat {
    position: absolute;
    top: -20px;
    right: -20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid white;
    animation: float-badge 4s ease-in-out infinite;
}

.floating-stat i {
    font-size: 24px;
    color: #28c940;
    /* Green arrow */
    background: #e8f5e9;
    padding: 10px;
    border-radius: 8px;
}

.floating-stat div {
    display: flex;
    flex-direction: column;
}

.floating-stat strong {
    font-size: 18px;
    color: #222;
}

.floating-stat small {
    font-size: 11px;
    color: #777;
}


/* --- Animations --- */
@keyframes growBar {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes float-badge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .data-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .analytics-visual {
        order: 2;
        /* Move graphic to bottom on mobile? Or remove this line to keep top */
        margin-top: 30px;
    }

    .seo-content-side {
        text-align: center;
    }
}

/* ===============================================================
                seo services end                                 
====================================================================== */
/* ===============================================================
                seo service  cards start                                 
====================================================================== */
@media(max-width:765px) {
    .heading.centered p {
        font-size: 14px !important;
    }
}

/* --- Global Heading Style (Centered) --- */
.heading.centered {
    text-align: center;
    margin-bottom: 60px;
}

.heading.centered h3 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
}

.heading.centered p {
    color: #777;
    font-size: 18px;
}

.heading.centered span {
    color: #0dcaf0;
    /* Theme Orange */
}

/* --- Services Grid Section --- */
.services-grid-section {
    padding: 100px 0;
    /* background: #fff; */
}

.services-grid-container {
    display: grid;
    /* Responsive Grid: 3 columns default */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Individual Service Card */
.service-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #0d6efd;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: #f2f9ff;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #0d6efd;
    margin-bottom: 25px;
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #222;
}

.sub-title {
    font-size: 13px;
    color: #999;
    font-weight: 500;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
    /* Pushes list/benefit down */
}

/* The List Style */
.check-list {
    list-style: none;
    margin-bottom: 25px;
}

.check-list li {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.check-list li::before {
    content: '\f00c';
    /* FontAwesome check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #0d6efd;
    font-size: 12px;
    top: 3px;
}

/* Benefit Box at Bottom */
.benefit-box {
    background: #fbfbfb;
    border-left: 3px solid #0d6efd;
    padding: 15px;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
    border-radius: 0 8px 8px 0;
}

.benefit-box strong {
    color: #222;
    display: block;
    margin-bottom: 3px;
}



/* --- Workflow Section --- */
/* --- Workflow Section (Redesigned) --- */
.workflow-section {
    padding: 100px 0;
    background-color: #051441;
    /* Dark Navy Theme */
    color: white;
    position: relative;
    overflow: hidden;
}

/* Background Decoration */
.workflow-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(13, 202, 240, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(13, 202, 240, 0.05) 0%, transparent 20%);
    pointer-events: none;
}

.workflow-section .heading.centered h3 {
    color: white;
    font-size: 36px;
    margin-bottom: 10px;
}

.workflow-section .heading.centered span {
    color: #0dcaf0;
    /* Cyan Highlight */
    position: relative;
    display: inline-block;
}

/* Underline for title span */
.workflow-section .heading.centered span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0dcaf0;
    box-shadow: 0 0 10px #0dcaf0;
}

/* --- The Grid Layout --- */
.workflow-steps {
    display: grid;
    /* 4 Columns for a wider layout */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

/* --- Card Design --- */
.step-item {
    position: relative;
    perspective: 1000px;
    /* For 3D effect */
}

.step-content {
    background: rgba(255, 255, 255, 0.03);
    /* Glassy Background */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Glow & Lift */
.step-item:hover .step-content {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: #0dcaf0;
    box-shadow: 0 10px 30px rgba(13, 202, 240, 0.15);
    /* Cyan Glow */
}

/* Step Number */
.step-num {
    font-size: 40px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    /* Subtle large number */
    line-height: 1;
    margin-bottom: 15px;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

/* Number highlights on hover */
.step-item:hover .step-num {
    color: #0dcaf0;
    text-shadow: 0 0 15px rgba(13, 202, 240, 0.5);
    transform: scale(1.1);
}

/* Title & Text */
.step-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.step-item p {
    font-size: 14px;
    color: #a0aab5;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* --- Connecting Lines (Desktop Only) --- */
.step-item::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    /* Position connector between cards */
    width: 20px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
}

/* Remove connector from every 4th item (end of row) and last item */
.step-item:nth-child(4n)::after,
.step-item:last-child::after {
    display: none;
}

/* --- Responsive Adjustments --- */
/* --- Responsive Adjustments for Workflow Section --- */

@media (max-width: 1100px) {
    .workflow-steps {
        grid-template-columns: repeat(3, 1fr);
        /* 3 Columns on Tablet */
    }

    /* Hide connectors for tablet grid */
    .step-item::after {
        display: none;
    }
}

@media (max-width: 765px) {
    .workflow-steps {
        /* CHANGED: Set to 2 columns for Mobile */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        /* Reduce gap slightly to save space */
    }

    .step-item::after {
        display: none;
        /* Hide connectors */
    }

    .step-content {
        /* Keep vertical layout inside card so it fits in the narrow column */
        flex-direction: column;
        text-align: center;
        padding: 20px 10px;
        /* Reduced padding */
        align-items: center;
        gap: 10px;
        min-height: 180px;
        /* Ensure uniform height */
        justify-content: center;
        text-align: center;
    }

    .step-num {
        margin-bottom: 5px;
        font-size: 32px;
        /* Slightly smaller number */
        width: auto;
    }

    .step-item h4 {
        font-size: 16px;
        /* Adjust font size for mobile */
    }

    .step-item p {
        font-size: 12px;
        /* Adjust font size for mobile */
        line-height: 1.4;
    }
}

/* ===============================================================
                seo service cards end                                 
====================================================================== */


/* ===============================================================
              video slider end                                 
====================================================================== */
/* --- Video Slider Section --- */
.video-slider-section {
    position: relative;
    width: 100%;
    height: 80vh;
    /* Adjust height as needed */
    min-height: 500px;
    background: #000;
    overflow: hidden;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slide Styling */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Video Styling */
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    /* Ensures video covers area */
    filter: brightness(0.5);
    /* Darkens video for text readability */
}

/* Text Content Styling */
.slide-content {
    position: absolute;
    top: 50%;
    left: 10%;
    /* Left aligned */
    transform: translateY(-50%);
    z-index: 10;
    color: white;
    max-width: 600px;
}

.slide-content h1 {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 15px;
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.3s;
    /* Delay for smoothness */
}

.slide-content span {
    color: #0dcaf0;
    /* Theme Orange */
}

.slide-content p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.6s;
}

.slider-btn {
    display: inline-block;
    padding: 15px 35px;
    background: #0dcaf0;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.9s, background 0.3s;
}

.slider-btn:hover {
    background: #e69900;
}

/* Animation when slide is active */
.slide.active .slide-content h1,
.slide.active .slide-content p,
.slide.active .slider-btn {
    opacity: 1;
    transform: translateY(0);
}

/* --- Navigation Buttons --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s;
}

.nav-btn:hover {
    background: #0dcaf0;
    border-color: #0dcaf0;
}

.prev-btn {
    left: 30px;
}

.next-btn {
    right: 30px;
}

/* --- Pagination Dots --- */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 20;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #0dcaf0;
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 768px) {
    .video-slider-section {
        height: 60vh;
    }

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

    .slide-content {
        left: 5%;
        width: 90%;
        text-align: center;
    }

    .nav-btn {
        display: none;
        /* Hide arrows on mobile, use dots/swipe */
    }
}

/* ===============================================================
               video slider end                                 
====================================================================== */


/* ===============================================================
             logo section start                              
====================================================================== */
.logo_sec {
    padding: 50px 0;
    background: url(img/bg.jpg);
    background-size: cover;

    @media(max-width:765px) {
        .client-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .grid-item {
            height: 90px;
            width: 90px;
            margin: auto;
            padding: 5px;
        }
    }

    @media(min-width:765px) {

        .grid-item {
            height: 200px;
            width: 200px;
            padding: 30px;

        }

        h3 {
            font-size: 3rem !important;
            color: white !important;
        }
    }

    h3 {
        font-size: 3rem;
        font-weight: 800;
        text-transform: capitalize;
        color: white;
        margin-bottom: 2rem;

        span {
            color: #0dcaf0;
        }
    }

    /* Container reset */
    .logo-section {
        /* padding: 60px 20px; */
        /* background: #fff; */
        display: flex;
        justify-content: center;
    }

    .main-wrapper {
        /* max-width: 1000px; */
        width: 100%;
    }

    /* --- THE GRID SYSTEM --- */
    .client-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);

        gap: 30px;
        /* border: 1px solid #e5e5e5; */
    }

    /* Individual Cells */
    .grid-item {
        background-color: #fff;

        display: flex;
        justify-content: center;
        align-items: center;

        transition: background-color 0.3s ease;
        border-radius: 50%;

        a {
            display: flex;
            justify-content: center;
            align-items: center;

        }
    }

    /* Hover effect for cells */
    .grid-item:hover {
        background-color: #fafafa;
    }

    /* Logo Image Styling */
    .grid-item img {

        object-fit: contain;
        /* Grayscale filter to make them look uniform (Optional) */
        /* filter: grayscale(100%); */
        /* opacity: 0.8; */
        transition: transform 0.3s;
    }

    .grid-item:hover img {
        transform: scale(1.05);
        filter: grayscale(0%);
        opacity: 1;
    }

    /* --- View All Cell --- */
    .view-all-cell {
        font-family: sans-serif;
        font-size: 18px;
        font-weight: 500;
    }

    .view-all-cell a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s;
    }

    .view-all-cell a:hover {
        color: #0dcaf0;
        /* Your theme orange */
    }

    /* --- Responsive Layout --- */
    @media (max-width: 768px) {
        .client-grid {
            grid-template-columns: repeat(3, 1fr);
            /* 2 cols on tablet */
        }
    }

    /* --- View More Button Styling --- */
    .view-more-wrapper {
        width: 100%;
        text-align: center;
        margin-top: 50px;
        /* Space between grid and button */
    }

    .view-more-btn {
        display: inline-block;
        padding: 14px 40px;
        background-color: #0dcaf0;
        /* Your Theme Cyan */
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 50px;
        /* Rounded Pill Shape */
        border: 2px solid #0dcaf0;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(13, 202, 240, 0.3);
        /* Cyan Glow */
    }

    .view-more-btn i {
        margin-left: 8px;
        /* Space between text and icon */
        transition: margin-left 0.3s ease;
    }

    /* Hover Effect */
    .view-more-btn:hover {
        background-color: transparent;
        color: #0dcaf0;
        box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
    }

    .view-more-btn:hover i {
        margin-left: 12px;
        /* Arrow moves slightly on hover */
    }

    /* Responsive adjustment for button */
    @media (max-width: 768px) {
        .view-more-wrapper {
            margin-top: 30px;
        }

        .view-more-btn {
            padding: 12px 30px;
            font-size: 14px;
        }
    }


}



/* ===============================================================
            logo section end                               
====================================================================== */



/* ===============================================================
           why-us-section start                        
====================================================================== */

.why_choose_sec {

    /* --- Why Us Section --- */
    .why-us-section {
        padding: 50px 0;
        background-color: #fff;
        /* Clean white background */
        position: relative;
        overflow: hidden;
    }

    .why-us-grid {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        /* Text side slightly wider */
        gap: 70px;
        align-items: center;
    }

    /* --- Visual Side (Left) --- */
    .why-us-visual {
        position: relative;
    }

    .image-frame {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    .image-frame img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }

    .image-frame:hover img {
        transform: scale(1.03);
    }

    .trust-badge {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: #fff;
        padding: 15px 20px;
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 15px;
        border-left: 4px solid #0dcaf0;
    }

    .trust-badge i {
        font-size: 28px;
        color: #0dcaf0;
    }

    .trust-badge span {
        font-weight: 700;
        font-size: 14px;
        line-height: 1.2;
        color: #222;
    }

    /* Decorative Dots Pattern behind image */
    .pattern-dots {
        position: absolute;
        top: -30px;
        left: -30px;
        width: 150px;
        height: 150px;
        background-image: radial-gradient(#ddd 2px, transparent 2px);
        background-size: 15px 15px;
        z-index: 1;
    }

    /* --- Content Side (Right) --- */
    .why-us-content .heading h3 {
        font-size: 38px;
        line-height: 1.3;
        margin-bottom: 20px;
        color: #222;
    }

    .highlight-text {
        color: #0d6efd;
        /* Theme Orange */
        position: relative;
        display: inline-block;
    }

    .intro-p {
        font-size: 16px;
        color: #555;
        line-height: 1.7;
        margin-bottom: 30px;
        text-align: center;
    }

    .list-title {
        font-size: 18px;
        font-weight: 700;
        color: #222;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Custom List Styling */
    .custom-list {
        list-style: none;
        margin-bottom: 35px;
        display: grid;
        grid-template-columns: 1fr;
        /* Single column list */
        gap: 12px;
    }

    .custom-list li {
        position: relative;
        padding-left: 30px;
        font-size: 15px;
        color: #444;
        font-weight: 500;
    }

    .custom-list li::before {
        content: '\f058';
        /* FontAwesome Check Circle */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        color: #28a745;
        /* Green check for trust */
        font-size: 16px;
    }

    /* Closing Note Box */
    .closing-note {
        background: #fdfdfd;
        border-left: 4px solid #222;
        padding: 20px;
        display: flex;
        gap: 15px;
        align-items: flex-start;
    }

    .closing-note i {
        color: #ccc;
        font-size: 20px;
    }

    .closing-note p {
        font-size: 14px;
        font-style: italic;
        color: #666;
        margin: 0;
    }

    /* --- Responsive --- */
    @media (max-width: 992px) {
        .intro-p p {
            text-align: center;
        }

        .why-us-grid {
            grid-template-columns: 1fr;
            gap: 50px;
        }

        .why-us-visual {
            order: 2;
            /* Put image below text on tablet */
            max-width: 600px;
            margin: 0 auto;
        }

        .why-us-content .heading h3 {
            font-size: 32px;
            text-align: center;
        }
    }
}

/* ===============================================================
           why-us-section end                            
====================================================================== */


/* ===============================================================
           why-us-section carousel start                            
====================================================================== */
/* --- Best SEO Company Section (Redesign) --- */
.iberr-about-redesign {
    padding: 100px 0;
    background-color: #fff;
    /* Clean White Background */
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50/50 Split */
    gap: 80px;
    align-items: center;
}

/* --- Left Side: Layered Visuals --- */
.about-visual {
    position: relative;
    padding-left: 20px;
    /* Space for negative margin elements if needed */
}

.image-composition {
    position: relative;
    z-index: 1;
}

/* Main Large Image */
.main-img {
    width: 85%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Small Offset Image */
.small-img {
    position: absolute;
    bottom: -40px;
    right: 20px;
    width: 45%;
    border: 8px solid #fff;
    /* White border to separate from main image */
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Experience Badge */
.exp-badge {
    position: absolute;
    top: 40px;
    right: 0;
    background: #051441;
    /* Navy Theme */
    color: #fff;
    padding: 20px 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(5, 20, 65, 0.3);
    z-index: 3;
    animation: floatBadge 3s ease-in-out infinite;
    display: none;
}

@keyframes floatBadge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.exp-badge .years {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #0dcaf0;
    /* Cyan Highlight */
    line-height: 1;
}

.exp-badge .text {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Decorative Dots */
.dot-pattern {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(#0dcaf0 2px, transparent 2px);
    background-size: 10px 10px;
    z-index: -1;
    opacity: 0.6;
}

/* --- Right Side: Content --- */
.about-text {
    padding-right: 20px;
}

.sub-heading {
    display: inline-block;
    color: #0dcaf0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 15px;
}

.about-text h3 {
    font-size: 40px;
    line-height: 1.2;
    color: #051441;
    margin-bottom: 25px;
    font-weight: 800;
}

.highlight-text {
    color: #0dcaf0;
    position: relative;
    display: inline-block;
}

/* Underline effect */
/* .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(13, 202, 240, 0.2);
    z-index: -1;
} */

.intro-p {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 25px;
}

.content-body p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Milestone List Style */
.milestone-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.milestone-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 10px;
    border-left: 4px solid #0dcaf0;
    transition: transform 0.3s;
}

.milestone-list li:hover {
    transform: translateX(10px);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.milestone-list i {
    font-size: 20px;
    color: #051441;
}

.milestone-list div {
    display: flex;
    flex-direction: column;
}

.milestone-list strong {
    color: #051441;
    font-size: 16px;
}

.milestone-list span {
    font-size: 14px;
    color: #666;
}

/* Button */
.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #051441;
    color: #fff;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(5, 20, 65, 0.2);
}

.primary-btn:hover {
    background: #0dcaf0;
    color: #051441;
    transform: translateY(-3px);
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 60px;
    }

    .about-visual {
        max-width: 600px;
        margin: 0 auto;
        padding-bottom: 40px;
        display: none;
        /* Space for the floating small image */
    }

    .main-img {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .about-text h3 {
        font-size: 30px;
    }

    .small-img {
        width: 50%;
        bottom: -30px;
    }

    .exp-badge {
        padding: 15px;
        top: 20px;
    }

    .exp-badge .years {
        font-size: 24px;
    }
}

/* ===============================================================
           why-us-section carousel end                            
====================================================================== */



/* ===============================================================
        services grid section start                          
====================================================================== */
.services_grid {

    /* --- Redesigned Section Container --- */
    .services-grid-section-modern {
        padding: 120px 0;
        background: #f8f9fd;
        /* Very light grey-blue background */
        position: relative;
        overflow: hidden;
    }

    /* Decorative Blurred Blobs */
    .bg-blur {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0;
        opacity: 0.4;
    }

    .blur-1 {
        width: 400px;
        height: 400px;
        background: #c0f5ff;
        top: -100px;
        left: -100px;
    }

    .blur-2 {
        width: 500px;
        height: 500px;
        background: #d0e1ff;
        bottom: -150px;
        right: -150px;
    }


    /* --- Modern Heading --- */
    .modern-heading {
        position: relative;
        z-index: 1;
    }

    .modern-heading h3 {
        font-size: 42px;
    }

    .text-gradient {
        background: linear-gradient(45deg, #000859, #00a6ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    /* --- Modern Grid & Card --- */
    .services-grid-modern {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Responsive columns */
        gap: 30px;
        position: relative;
        z-index: 1;
    }

    .service-card-modern {
        /* The outer container defines the gradient border */
        padding: 2px;
        /* Thickness of the gradient border */
        background: linear-gradient(135deg, #fff, #f0f0f0);
        /* Default subtle border */
        border-radius: 20px;
        transition: all 0.4s ease;
        /* Initial state for hover animation */
        transform: translateY(0);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    /* Hover State: Active Gradient Border & Lift */
    .service-card-modern:hover {
        background: linear-gradient(135deg, #009cff, #00e7ff);
        /* Orange gradient on hover */
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(255, 171, 0, 0.2);
    }

    .card-inner {
        background: #fff;
        border-radius: 18px;
        /* Slightly smaller to fit inside */
        padding: 35px 30px;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Hide benefit box initially */
        position: relative;
    }


    /* --- Icon Styling with Glow --- */
    .icon-wrapper {
        width: 65px;
        height: 65px;
        background: #fff4e0;
        /* Default orange-ish bg */
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        color: #0dcaf0;
        margin-bottom: 25px;
        position: relative;
        transition: all 0.3s;
    }

    .icon-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: inherit;
        filter: blur(15px);
        opacity: 0.4;
        z-index: -1;
        transition: all 0.3s;
    }

    .service-card-modern:hover .icon-wrapper {
        transform: scale(1.1);
        color: white;
        background: linear-gradient(135deg, #009cff, #00e7ff);
    }

    .service-card-modern:hover .icon-glow {
        background: linear-gradient(135deg, #009cff, #00e7ff);
        opacity: 0.6;
    }


    /* --- Content Styling --- */
    .card-content {
        flex-grow: 1;
    }

    .card-content h3 {
        font-size: 22px !important;
        font-weight: 700;
        margin-bottom: 5px;
        color: #222;
    }

    .sub-title {
        font-size: 13px;
        color: #999;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: block;
        margin-bottom: 15px;
    }

    .desc {
        font-size: 15px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 20px;
    }


    /* --- Modern Checklist --- */
    .check-list-modern {
        list-style: none;
        padding: 0;
        margin-bottom: 30px;
    }

    .check-list-modern li {
        font-size: 14px;
        color: #555;
        margin-bottom: 10px;
        padding-left: 24px;
        position: relative;
        transition: transform 0.2s;
    }

    .check-list-modern li::before {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 3px;
        color: white;
        font-size: 12px;
        width: 20px;
        height: 20px;
        background: #002271;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

    .service-card-modern:hover .check-list-modern li {
        transform: translateX(5px);
    }


    /* --- Sliding Benefit Box --- */
    .benefit-box-modern {
        background: #f5faff;
        /* Light orange tint */
        border-radius: 12px;
        padding: 15px 20px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 13px;
        color: #555;
        line-height: 1.5;

        /* Animation Setup */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translateY(100%);
        /* Hidden below */
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        /* Bouncy effect */
        opacity: 0;
    }

    .benefit-box-modern i {
        color: #0dcaf0;
        font-size: 16px;
        margin-top: 2px;
    }

    .benefit-box-modern strong {
        color: #222;
        display: block;
        margin-bottom: 2px;
    }

    /* Slide up on hover */
    .service-card-modern:hover .benefit-box-modern {
        transform: translateY(0);
        opacity: 1;
        position: relative;
        /* Makes it take up space so card expands */
    }

    .service-card-modern:hover .card-inner {
        padding-bottom: 0;
    }

    /* Remove padding to fit box seamlessly */


    /* --- Optional Color Variations for Icons --- */
    .color-blue {
        background: #e3f2fd;
        color: #2196f3;
    }

    .color-purple {
        background: #f3e5f5;
        color: #9c27b0;
    }

    .color-green {
        background: #e8f5e9;
        color: #4caf50;
    }

    .color-red {
        background: #ffebee;
        color: #f44336;
    }

    .color-teal {
        background: #e0f2f1;
        color: #009688;
    }

    .color-orange {
        background: #fff3e0;
        color: #ff9800;
    }

    .color-pink {
        background: #fce4ec;
        color: #e91e63;
    }

    .color-yellow {
        background: #fffde7;
        color: #fdd835;
    }

    .color-cyan {
        background: #e0f7fa;
        color: #00bcd4;
    }

    /* Hover states for varied colors */
    .service-card-modern:hover .color-blue {
        background: linear-gradient(45deg, #2196f3, #64b5f6);
    }

    .service-card-modern:hover .color-purple {
        background: linear-gradient(45deg, #9c27b0, #ba68c8);
    }

    /* ... add similar hover rules for other colors if you want them all to have gradients ... */


    /* --- Responsive --- */
    @media (max-width: 768px) {
        .services-grid-modern {
            grid-template-columns: 1fr;
            /* Single column on mobile */
            gap: 40px;
        }

        .modern-heading h3 {
            font-size: 32px;
        }
    }
}

/* ===============================================================
       services grid section end                       
====================================================================== */


/* ===============================================================
    why_choose_sec1 start                    
====================================================================== */

.why_choose_sec1 {

    /* --- Why Choose Us Section --- */
    .why-choose-section {
        padding: 50px 0;
        background-color: #fff;
        position: relative;
    }

    .choose-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }

    /* Typography & Content */
    .choose-content .heading h3 {
        font-size: 42px;
        margin-bottom: 25px;
        color: #051441;
        /* Dark Blue Theme */
        font-weight: 700;
    }

    .highlight-text {
        color: #0dcaf0;
        /* Orange Theme */
    }

    .lead-text {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
        border-left: 4px solid #0dcaf0;
        padding-left: 20px;
    }

    .desc-text {
        font-size: 16px;
        color: #666;
        line-height: 1.8;
        margin-bottom: 40px;
    }

    /* Key Values Row */
    .values-row {
        display: flex;
        gap: 30px;
        margin-bottom: 40px;
    }

    .value-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .v-icon {
        width: 60px;
        height: 60px;
        background: #fdf6e4;
        /* Light Orange Bg */
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #0dcaf0;
        transition: transform 0.3s, background 0.3s;
    }

    .value-item:hover .v-icon {
        background: #0dcaf0;
        color: white;
        transform: translateY(-5px);
    }

    .value-item span {
        font-size: 14px;
        font-weight: 600;
        color: #051441;
        line-height: 1.3;
    }

    /* Button (reusing your primary style) */
    .primary-btn {
        display: inline-block;
        background: #051441;
        color: white;
        padding: 15px 35px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        transition: background 0.3s;
    }

    .primary-btn:hover {
        background: #0dcaf0;
        color: #051441;
    }

    /* Visual Side */
    .choose-visual {
        position: relative;
    }

    .visual-card {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    }

    .visual-card img {
        width: 100%;
        display: block;
        border-radius: 20px;
    }

    /* Orange shape overlay effect */
    .overlay-shape {
        position: absolute;
        bottom: -20px;
        right: -20px;
        width: 150px;
        height: 150px;
        background: #0dcaf0;
        z-index: -1;
        border-radius: 20px;
        opacity: 0.5;
    }

    /* Responsive */
    @media (max-width: 992px) {
        .choose-grid {
            grid-template-columns: 1fr;
            gap: 50px;
        }

        .choose-visual {
            order: -1;
            /* Image on top for mobile */
        }
    }
}

/* ===============================================================
      why_choose_sec1 end                       
====================================================================== */



/* ===============================================================
      result_approch_sec start                    
====================================================================== */
.result_approch_sec {

    /* --- Experience & Results Section (Dark Theme Update) --- */
    .results-approach-section {
        padding: 50px 0;
        /* CHANGED: Switched from light grey to Dark Navy Blue */
        background: url(img/bg.jpg);
        background-size: cover;
    }

    /* CHANGED: Update Heading Colors for Dark Background */
    .results-approach-section .heading h3 {
        color: #ffffff;
    }

    .results-approach-section .heading p {
        color: #e0e0e0;
        /* Light gray for the sub-text */
    }

    .results-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Card Styling */
    .res-card {
        background: #fff;
        /* Keep cards white for contrast */
        padding: 35px 30px;
        border-radius: 15px;
        /* CHANGED: Stronger shadow for depth against dark bg */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        border-top: 4px solid transparent;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Hover Effect: Lift up + Orange Top Border */
    .res-card:hover {
        transform: translateY(-8px);
        /* CHANGED: Deeper shadow on hover */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        border-top: 4px solid #0dcaf0;
    }

    /* Icons */
    .res-icon {
        width: 50px;
        height: 50px;
        background: #f0f4ff;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #051441;
        /* Dark Blue Icon */
        margin-bottom: 20px;
        transition: background 0.3s;
    }

    /* CHANGED: Icon turns dark blue on hover to match theme */
    .res-card:hover .res-icon {
        background: #051441;
        color: #0dcaf0;
        /* Symbol becomes orange */
    }

    /* Header Area */
    .res-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .res-header h3 {
        font-size: 19px !important;
        font-weight: 700;
        color: #222;
        /* Keep dark text inside white card */
        line-height: 1.3;
        max-width: 85%;
    }

    /* The Green Checkmark Icon */
    .verified-mark {
        color: #28a745;
        font-size: 16px;
        margin-top: 4px;
    }

    /* Paragraph Text */
    .res-card p {
        font-size: 14px;
        color: #555;
        /* Dark gray for readability inside card */
        line-height: 1.6;
        margin-bottom: 15px;
    }

    /* List Styling */
    .res-list {
        list-style: none;
        padding: 0;
        margin-top: auto;
    }

    .res-list li {
        font-size: 13px;
        color: #555;
        margin-bottom: 8px;
        position: relative;
        padding-left: 18px;
    }

    /* Bullet points for list */
    .res-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 6px;
        width: 6px;
        height: 6px;
        background-color: #0dcaf0;
        border-radius: 50%;
    }

    /* --- Responsive Adjustments --- */
    @media (max-width: 992px) {
        .results-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 600px) {
        .results-grid {
            grid-template-columns: 1fr;
        }

        .res-card {
            padding: 25px;
        }
    }

    h3 {
        span {
            color: #0dcaf0 !important;
        }
    }
}

/* ===============================================================
      result_approch_sec end                       
====================================================================== */



/* ===============================================================
     client vedio section start                     
====================================================================== */
/* --- Video Gallery Section --- */
.video-gallery-section {
    padding: 50px 0;
    background-color: #f8f9fa;
}

/* Grid Layout */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card Styling */
.video-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Video Wrapper */
.video-wrapper {
    position: relative;
    width: 100%;
    /* No fixed height here; we let the video determine height or force aspect ratio */
    background: #000;
    line-height: 0;
    /* Removes potential gap at bottom of video */
}

/* The actual Video Tag */
.video-wrapper video {
    width: 100%;
    height: 250px;
    /* Fixed height for uniformity */
    object-fit: cover;
    /* Ensures video/thumbnail fills the area without stretching */
    display: block;
}

/* Card Body Content */
.video-body {
    padding: 20px 25px;
    flex-grow: 1;
    /* Ensures cards are equal height */
}

.video-body h3 {
    font-size: 18px !important;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 8px;
}

.video-body p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-wrapper video {
        height: auto;
        /* Allow auto height on mobile if preferred */
        aspect-ratio: 16 / 9;
    }
}


/* ===============================================================
     client vedio section end                  
====================================================================== */


/* ===============================================================
   keyword ranking section start              
====================================================================== */

/* --- Ranking Slider Section --- */
.ranking-slider-section {
    padding: 50px 0;
    background: #fff;
    overflow: hidden;
    /* Hide overflow from scrollbar */
}

.ranking-slider-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The Track (Scrollable Area) */
.ranking-track {
    display: flex;
    gap: 65px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 20px 5px 40px 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: center;
}

.ranking-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Individual Card Styling */
.ranking-card {
    min-width: 350px;
    /* Fixed width for each slide */
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    scroll-snap-align: center;
    /* Snap card to center */
    border: 1px solid #eee;
    transition: transform 0.3s;
}

.ranking-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.ranking-card img {
    width: 100%;
    /* height: 250px; */
    object-fit: cover;
    display: block;
    /* border-bottom: 4px solid #FFAB00;  */
}

/* Rank Badge (Top Left) */
.rank-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #28a745;
    /* Success Green */
    color: white;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
    z-index: 2;
    display: none;
}

.rank-badge i {
    margin-right: 5px;
    color: #fff700;
}

/* Card Info (Bottom) */
.rank-info {
    padding: 20px;
    text-align: left;
    display: none;
}

.rank-info h3 {
    font-size: 18px;
    color: #051441;
    margin-bottom: 5px;
    font-weight: 700;
}

.rank-info p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.rank-info strong {
    color: #FFAB00;
}

/* Navigation Buttons */
.rank-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    color: #051441;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
}

.rank-btn:hover {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.prev-rank {
    left: -25px;
}

.next-rank {
    right: -25px;
}


/* Responsive */
@media (max-width: 768px) {
    .ranking-card {
        min-width: 300px;
        /* Slightly smaller cards on mobile */
    }

    .rank-btn {
        /* display: none; */
    }
}

/* ===============================================================
    keyword ranking section end               
====================================================================== */



/* ==================================================================
      keyword ranking  END
==================================================================  */
.kywrd-rnk-scn {
    background-color: #f9f9f9;
    /* Light grey background for section */

    @media(max-width:765px) {
        h3.title {
            font-size: 32px !important;
            text-align: center;
            line-height: 1.3;
        }

        .sub-title {
            text-align: justify !important;
            padding: 0 15px;
        }
    }

    h3.title {
        font-size: 48px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #051441;
        /* Dark Navy Theme */
    }

    .highlight-text {
        color: #0dcaf0;
        /* Theme Orange */
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
    }

    .col-md-6 {
        margin-bottom: 30px;
    }

    .card.keyword-card {
        padding: 0;
        border-radius: 20px;
        border: none;
        background: #fff;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
        /* Soft shadow */
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;

        &:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
        }

        /* --- Image Section --- */
        .img-div {
            display: block;
            width: 100%;
            height: 300px;
            overflow: hidden;
            position: relative;
            background: #f0f0f0;

            .title {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                background: #0dcaf0;
                width: auto;
                min-width: 200px;
                text-align: center;
                color: #051441;
                padding: 10px 20px;
                font-size: 16px;
                font-weight: 700;
                border-radius: 15px 15px 0 0;
                transition: 0.3s;
                cursor: pointer;
                box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
                margin-bottom: 0;
            }
        }

        .img-div img {
            display: block;
            width: 100%;
            height: auto;
            transition: transform 12s linear;
            /* Slower smooth scroll */
        }

        .img-div:hover img {
            transform: translateY(calc(-100% + 300px));
        }

        .img-div:hover .title {
            padding-bottom: 15px;
            /* Slight lift effect */
        }

        /* --- Card Body Design --- */
        .card-body {
            padding: 25px;
            background: #fff;
            position: relative;

            h5 {
                font-size: 18px;
                font-weight: 700;
                color: #051441;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                gap: 10px;
                border-bottom: 2px solid #f0f0f0;
                padding-bottom: 15px;

                .rank-icon {
                    color: #FFAB00;
                    /* Gold/Orange Trophy */
                }
            }

            ul.keyword-list {
                padding: 0;
                list-style: none;
                margin-bottom: 20px;

                li {
                    font-size: 14px;
                    color: #555;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: flex-start;
                    gap: 10px;
                    line-height: 1.5;

                    i {
                        color: #28a745;
                        /* Green checkmark */
                        font-size: 14px;
                        margin-top: 3px;
                        flex-shrink: 0;
                    }
                }
            }

            .btn-wrapper {
                text-align: center;
                margin-top: 15px;
            }

            .read-more-btn {
                color: #051441;
                font-weight: 600;
                font-size: 14px;
                cursor: pointer;
                text-decoration: none;
                background: #f4f6f9;
                padding: 8px 20px;
                border-radius: 20px;
                transition: all 0.3s;
                display: inline-flex;
                align-items: center;
                gap: 5px;

                &:hover {
                    background: #0dcaf0;
                    color: #fff;
                }
            }
        }
    }
}

/* ==================================================================
      keyword ranking  END
==================================================================  */


/* ==================================================================
    local seo section start
==================================================================  */
/* --- Local SEO Section --- */
.local-seo-section {
    padding: 100px 0;
    background-color: #fff;
    /* White background to contrast previous dark section */
    position: relative;
}

.local-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* Text side slightly wider */
    gap: 60px;
    align-items: center;
}

/* Typography */
.local-content .heading h3 {
    font-size: 38px;
    font-weight: 700;
    color: #051441;
    /* Dark Navy */
    margin-bottom: 25px;
    line-height: 1.3;
}

.highlight-text {
    color: #0dcaf0;
    /* Theme Orange */
}

.std-text {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Example Box Styling */
.example-box {
    background: #f5fcff;
    border-left: 4px solid #0dcaf0;
    padding: 25px;
    border-radius: 0 15px 15px 0;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.icon-label {
    font-size: 14px;
    font-weight: 700;
    color: #0dcaf0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.example-box p {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin: 0;
    /* Remove default margin for clean fit */
}

/* Visual Side */
.local-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.map-card {
    position: relative;
    width: 100%;
    max-width: 450px;
    border-radius: 20px;
}

.map-card img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(5, 20, 65, 0.15);
    display: block;
    margin-bottom: 20px;
}

/* Floating Pin Animation */
.floating-pin {
    position: absolute;
    top: 30%;
    left: 45%;
    font-size: 40px;
    color: #FF0000;
    /* Map marker red */
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
    animation: bouncePin 2s infinite ease-in-out;
    z-index: 2;
    display: none;
}

@keyframes bouncePin {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Floating Stat Card */
.map-stat {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: #051441;
    /* Dark Navy Theme */
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
    z-index: 3;
}

.map-stat strong {
    display: block;
    font-size: 18px;
    color: #FFAB00;
}

.map-stat span {
    font-size: 13px;
    color: #ddd;
}

/* Responsive */
@media (max-width: 992px) {
    .local-grid {
        grid-template-columns: 1fr;
        /* Stack on tablet */
        gap: 50px;
    }

    .local-visual {
        order: -1;
        /* Image on top */
    }

    .map-card {
        max-width: 100%;
    }
}

/* ==================================================================
     local seo section end
==================================================================  */



/* ==================================================================
    Benefits of Local SEO Section start
==================================================================  */

/* --- Benefits of Local SEO Section (Dark Theme) --- */
.local-benefits-section {
    padding: 50px 0;
    background-color: #051441;
    /* Dark Navy Background */
    position: relative;
    /* Optional: Subtle background pattern */
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Heading Updates for Dark Mode */
.local-benefits-section .heading h3 {
    color: #ffffff;
}

.local-benefits-section .heading p {
    color: #a0aab5;
}

/* The Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 30px;
    margin-top: 50px;
}

/* Card Styling */
.benefit-card {
    background: rgba(255, 255, 255, 0.03);
    /* Transparent / Glassy */
    border: 1px solid #0dcaf0;
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Glow & Lift */
.benefit-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: #0dcaf0;
    /* Slight orange border on hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Icon Styling */
.icon-box {
    width: 60px;
    height: 60px;
    background: rgb(0 234 255 / 14%);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #0dcaf0;
    margin-bottom: 25px;
    transition: transform 0.4s, background 0.4s;
}

.benefit-card:hover .icon-box {
    background: #0dcaf0;
    color: #051441;
    /* Dark icon on orange bg */
    transform: rotateY(180deg);
    /* 3D Flip effect */
}

/* Typography inside Card */
.benefit-card h3 {
    font-size: 20px !important;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

.benefit-card p {
    font-size: 15px;
    color: #b0b8c1;
    /* Light gray text */
    line-height: 1.7;
    margin: 0;
}

/* Decorative Line at bottom of card */
.benefit-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #0dcaf0;
    transition: width 0.4s ease;
}

.benefit-card:hover::after {
    width: 100%;
    /* Line expands on hover */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns tablet */
    }
}

@media (max-width: 600px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        /* 1 column mobile */
    }

    .benefit-card {
        padding: 30px;
    }
}

/* ==================================================================
    Benefits of Local SEO Section end
==================================================================  */

/* ==================================================================
    seo-highlights section start
==================================================================  */

/* --- Google SEO Highlights Section (Redesigned) --- */
.google-seo-highlights {
    padding: 50px 0;
    position: relative;
    background-color: #f8f9fa;
    /* Slightly off-white base */
    overflow: hidden;
    z-index: 1;
    /* Ensure content is above background */
}

/* --- Background Image with Low Opacity --- */
.google-seo-highlights::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Using a subtle map pattern placeholder */
    background-image: url('img/bg1.jpg');
    /* Alternatively, use a real Google Maps screenshot and blur it:
    background-image: url('path-to-your-google-maps-image.jpg');
    filter: blur(5px) grayscale(50%); */
    opacity: 0.08;
    /* Very low opacity */
    z-index: -1;
    /* Place behind content */
    pointer-events: none;
}

/* Multi-color Text Effect for Heading */
.google-color-text {

    font-weight: 800;
}

/* Grid Layout */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin-top: 50px;
}

/* --- New Card Design --- */
.highlight-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 25px;
    /* Subtle default shadow */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    text-align: center;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
    /* Very subtle border definition */
    overflow: hidden;
}

/* Hover State: Lift and stronger shadow */
.highlight-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

/* Icon Container & Glow Effect */
.h-icon {
    font-size: 36px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
    display: inline-block;
    /* Resetting previous styles */
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
}

/* The colored glow blob behind the icon */
.h-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    z-index: -1;
    filter: blur(22px);
    /* Creates the glow */
    opacity: 0.25;
    /* Soft initial glow */
    transition: all 0.4s ease;
}

/* Intensify glow on card hover */
.highlight-card:hover .h-icon::after {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.3);
    /* Expands the glow */
}


/* Typography */
.highlight-card h3 {
    font-size: 21px !important;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}

.highlight-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

/* --- Google Color Variations for Icon & Glow --- */

/* Google Blue */
.g-blue .h-icon {
    color: #4285F4;
}

.g-blue .h-icon::after {
    background: #4285F4;
}

/* Google Red */
.g-red .h-icon {
    color: #EA4335;
}

.g-red .h-icon::after {
    background: #EA4335;
}

/* Google Yellow */
.g-yellow .h-icon {
    color: #FBBC05;
}

.g-yellow .h-icon::after {
    background: #FBBC05;
}

/* Google Green */
.g-green .h-icon {
    color: #34A853;
}

.g-green .h-icon::after {
    background: #34A853;
}


/* --- Responsive --- */
@media (max-width: 992px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .highlight-card {
        padding: 30px 25px;
    }
}


/* ==================================================================
   seo-highlights section end
==================================================================  */

/* ==================================================================
  Importance Section start  
==================================================================  */


/* --- Importance Section --- */
.importance-section {
    padding: 50px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.importance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

/* Heading */
.importance-content .heading h3 {
    font-size: 36px !important;
    font-weight: 700;
    color: #051441;
    /* Navy Theme */
    margin-bottom: 30px;
}

.highlight-text {
    color: #0dcaf0;
    /* Orange Theme */
}

/* Stylish List */
.importance-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.importance-list li {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    /* Light grey base */
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

/* Hover Effect on List Items */
.importance-list li:hover {
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transform: translateX(10px);
    /* Slide right */
    border-left: 4px solid #0dcaf0;
}

/* Icons for each point */
.check-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0dcaf0;
    margin-right: 20px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.importance-list li:hover .check-icon {
    background: #0dcaf0;
    color: white;
}

.importance-list span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Impact Box (Conclusion) */
.impact-box {
    background: #051441;
    color: white;
    padding: 25px;
    border-radius: 15px;
    position: relative;
    text-align: center;
    box-shadow: 0 15px 30px rgba(5, 20, 65, 0.2);
}

.impact-box p {
    font-size: 17px;
    margin: 0;
    line-height: 1.5;
}

.impact-box strong {
    color: #0dcaf0;
    font-weight: 700;
}

/* Visual Side */
.importance-visual {
    position: relative;
    z-index: 1;
}

.importance-visual img {
    width: 100%;
    border-radius: 20px;
    /* Clean shadow */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

/* Decorative Background Circle behind image */
.deco-circle {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 200px;
    height: 200px;
    background: #0dcaf0;
    border-radius: 50%;
    opacity: 0.15;
    z-index: 1;
}

/* Responsive */
@media (max-width: 992px) {
    .importance-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .importance-visual {
        order: -1;
        /* Image on top on mobile */
        max-width: 500px;
        margin: 0 auto;
    }
}

/* ==================================================================
   Importance Section end
==================================================================  */

/* ==================================================================
   iberr-difference-section start
==================================================================  */
/* --- Smart Brands Section (Redesign) --- */
.iberr-smart-section {
    padding: 100px 0;
    background-color: #fff;
    /* Clean white background */
    overflow: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.smart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Split 50/50 */
    gap: 80px;
    align-items: center;
}

/* --- Left Visual Side --- */
.smart-visual {
    position: relative;
}

.image-frame {
    position: relative;
    border-radius: 20px;
    z-index: 1;
}

.image-frame img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    z-index: 2;
}

/* Cyan Decorative Shape */
.corner-shape {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 60%;
    height: 60%;
    background-color: #0dcaf0;
    /* Theme Cyan */
    border-radius: 20px;
    z-index: 1;
    opacity: 0.2;
}

/* --- Right Content Side --- */
.smart-content {
    display: flex;
    flex-direction: column;
}

.sub-badge {
    display: inline-block;
    color: #0dcaf0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    margin-bottom: 15px;
}

.smart-content h3 {
    font-size: 40px !important;
    color: #051441;
    /* Dark Navy */
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 800;
}

.highlight-text {
    color: #0dcaf0;
    /* Cyan Highlight */
    position: relative;
    display: inline-block;
}

/* Underline effect for highlight */


.lead-text {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 20px;
    border-left: 4px solid #0dcaf0;
    padding-left: 20px;
}

.desc-text {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* --- Feature Blocks (New Design) --- */
.feature-row {
    display: flex;
    gap: 20px;
}

.feature-item {
    background: #f8f9fa;
    padding: 15px 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 110px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.feature-item:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
    border-color: #0dcaf0;
}

.f-icon {
    width: 40px;
    height: 40px;
    background: #e0faff;
    /* Very light cyan */
    color: #0dcaf0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    transition: all 0.3s;
}

.feature-item:hover .f-icon {
    background: #0dcaf0;
    color: white;
}

.feature-item span {
    font-weight: 600;
    color: #051441;
    font-size: 14px;
}

/* --- Responsive Media Queries --- */

/* Tablet & Smaller Laptops */
@media (max-width: 992px) {
    .smart-grid {
        grid-template-columns: 1fr;
        /* Stack visually */
        gap: 50px;
    }

    .smart-visual {
        order: -1;
        /* Image on top */
        max-width: 600px;
        margin: 0 auto;
    }

    .smart-content h3 {
        font-size: 32px;
    }
}

/* Mobile Devices */
@media (max-width: 576px) {
    .iberr-smart-section {
        padding: 50px 0;
    }

    .corner-shape {
        bottom: -15px;
        left: -15px;
    }

    .smart-content h3 {
        font-size: 28px !important;
    }

    .lead-text {
        font-size: 16px;
    }

    /* Stack features on very small screens or make them scrollable */
    .feature-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .feature-item {
        flex: 1 1 30%;
        /* Distribute space evenly */
        min-width: 90px;
    }
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .diff-layout {
        flex-direction: column;
        /* Stack vertically on tablet */
    }

    .diff-image-wrapper {
        width: 100%;
        margin-bottom: -50px;
        /* Pull content up slightly */
    }

    .diff-image-wrapper img {
        height: 400px;
        /* Shorter image on mobile */
    }

    .diff-border-deco {
        display: none;
        /* Hide decorative border on mobile for simplicity */
    }

    .diff-content-card {
        width: 90%;
        /* Almost full width */
        margin-left: 0;
        /* Remove overlap */
        padding: 40px;
    }
}

/* ==================================================================
 iberr-difference-section end
==================================================================  */

/* ==================================================================
comparison table section start
==================================================================  */
/* --- Comparison Table Section --- */
/* --- Comparison Cards Section --- */
.iberr-comparison-cards-section {
    padding: 50px 0;
    background-color: #f8f9fa;
    /* Light grey background */
}

.iberr-comparison-cards-section .heading {
    margin-bottom: 50px;
}

.iberr-comparison-cards-section .heading h3 {
    font-size: 36px !important;
    font-weight: 700;
    color: #051441;
}

.highlight-text {
    color: #0dcaf0;
    /* Cyan Theme */
}

/* Grid Layout */
.cards-grid {
    display: grid;
    /* Responsive Grid: 3 cols desktop, 2 tablet, 1 mobile */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 0 15px;
}

/* Individual Card Design */
.compare-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.compare-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #0dcaf0;
}

/* Top Section (Expectation) */
.card-top {
    padding: 25px 25px 15px 25px;
    background: #fff;
    text-align: center;
}

.card-top h4 {
    font-size: 18px;
    font-weight: 600;
    color: #666;
    /* Muted text for standard expectation */
    margin: 10px 0 0 0;
}

/* Divider Arrow */
.card-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    position: relative;
}

.card-divider i {

    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    z-index: 2;
    border: 2px solid #fff;
    color: #0dcaf0;
    background: #fff;
}

/* Bottom Section (Delivery) */
.card-bottom {
    padding: 15px 25px 30px 25px;
    background: #051441;
    text-align: center;
    flex-grow: 1;
    /* Ensures equal height cards */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.card-bottom p {
    font-size: 16px;
    font-weight: 600;
    color: white;
    /* Dark Navy for Premium Delivery */
    margin: 15px 0 0 0;
    line-height: 1.5;
}

.card-bottom p i {
    color: #28a745;
    /* Green checkmark */
    margin-right: 5px;
}

/* Labels (Badges) */
.label-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    font-weight: 700;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}

.label-tag.highlight {
    background: rgba(255, 255, 255, 0.2);
    color: #0dcaf0;
}

/* Hover Effect on Card Content */
.compare-card:hover .card-bottom {
    background: #051441;
    /* Navy Background on Hover */
}

.compare-card:hover .card-bottom p {
    color: #fff;
}

.compare-card:hover .card-bottom .label-tag.highlight {
    background: rgba(255, 255, 255, 0.2);
    color: #0dcaf0;
}

.compare-card:hover .card-divider i {
    color: #0dcaf0;
    background: #fff;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
        /* 1 Column on Mobile */
        gap: 20px;
    }

    .compare-card {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ==================================================================
comparison table section end
==================================================================  */

/* ==================================================================
iberr-statement-section start
==================================================================  */

/* --- Statement Section (White Theme) --- */
.iberr-statement-white {
    padding: 100px 0;
    background-color: #ffffff;
    position: relative;
    display: flex;
    justify-content: center;
}

/* The Framed Box */
.manifesto-box {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px;
    background: #fff;
    border: 1px solid #f0f0f0;
    /* Subtle border */
    border-radius: 20px;
    text-align: center;
    position: relative;
    /* Soft premium shadow */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
}

/* Decorative Top Border (Optional accent) */
.manifesto-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 4px;
    background: linear-gradient(90deg, #051441, #0dcaf0);
    /* Navy to Cyan */
    border-radius: 0 0 10px 10px;
}

/* Top Icon */
.top-icon {
    font-size: 30px;
    color: #e0e0e0;
    margin-bottom: 30px;
}

/* Typography */
.manifesto-box h3 {
    font-size: 34px !important;
    line-height: 1.4;
    font-weight: 800;
    color: #051441;
    /* Dark Navy Text */
    margin-bottom: 30px;
}



.lead-desc {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.lead-desc strong {
    color: #051441;
    font-weight: 700;
}

/* Separator Line */
.separator-line {
    width: 60px;
    height: 3px;
    background: #0dcaf0;
    /* Cyan Accent */
    margin: 0 auto 30px auto;
    border-radius: 2px;
}

.closing-text {
    font-size: 19px;
    font-weight: 500;
    color: #333;
    line-height: 1.6;
    margin-bottom: 45px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Final Tagline Badge */
.tagline-wrapper {
    display: inline-block;
}

.tagline-text {
    display: inline-block;
    padding: 12px 30px;
    background-color: #051441;
    /* Navy Background */
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(5, 20, 65, 0.2);
    transition: transform 0.3s ease;
}

.tagline-text:hover {
    transform: translateY(-3px);
    background-color: #0dcaf0;
    /* Cyan on hover */
    color: #051441;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .manifesto-box {
        padding: 40px 25px;
        border: none;
        /* Remove border on mobile for cleaner look */
        box-shadow: none;
    }

    .manifesto-box h3 {
        font-size: 26px !important;
    }

    .lead-desc {
        font-size: 16px;
    }

    .closing-text {
        font-size: 17px;
    }
}

/* ==================================================================
iberr-statement-section end
==================================================================  */



/* ========================side icons=========================== */

.whats-btn img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(15deg) brightness(107%) contrast(101%);
  height: 1.5rem;
  width: 1.5rem;
}

.call-btn img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(82deg) brightness(105%) contrast(105%);
  height: 1.5rem;
  width: 1.5rem;
}

.call-btn:hover {
  width: fit-content;
}

.whats-btn:hover .title,
.insta-btnn:hover .title {
  width: 100px;
  color: white;
}

.call-btn:hover .title {
  width: 100px;
}

.call-btn .img-div,
.whats-btn .img-div,
.insta-btnn .img-div {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.call-btn .title,
.whats-btn .title,
.insta-btnn .title {
  /* transform: translateX(100%); */
  /* visibility: hidden; */
  /* display: none; */
  width: 0px;
  overflow: hidden;
  transition: 0.5s;
  white-space: nowrap;

}

.call-btn {
  position: fixed;
  /* left: 2rem; */
  bottom: 6rem;
  height: 3rem;
  /* width: 3rem; */
  z-index: 999;
  color: white;
  background: #009ee3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  right: 0;
  text-decoration: none;
  border-radius: 5px 0 0 5px;
}

.whats-btn,
.insta-btnn {
  position: fixed;
  /* left: 2rem; */
  bottom: 6rem;
  height: 3rem;
  /* width: 3rem; */
  z-index: 999;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  right: 0;
  text-decoration: none;
  border-radius: 5px 0 0 5px;
}

.whats-btn {
  background: #007f38;
  transform: translateY(-50px);
  /* right: 2rem; */
}

.insta-btnn {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  transform: translateY(-100px);
  /* width: 100px; */
}

.insta-btnn img {
  /* height: 22px; */
  filter: invert(100%) sepia(0%) saturate(1503%) hue-rotate(327deg) brightness(105%) contrast(94%);
}


/* ========================side icons=========================== */


/* --- Scroll to Top Button --- */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #0dcaf0; /* Theme Cyan */
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Show state (added via JS) */
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover Effect */
.scroll-top-btn:hover {
    background: #051441; /* Navy Theme */
    color: #fff;
    transform: translateY(-5px); /* Little lift effect */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Responsive Position */
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}



/* ===========================faq section start========================= */

/* --- FAQ Section Styling --- */
.iberr-faq-section {
    padding: 80px 0 100px 0;
    background-color: #f8f9fa;
    
    
    
    @media(min-width:765px){
        h3{
            font-size: 3rem;
        }
    }
    @media(max-width:765px){
        h3{
            font-size: 2rem;
        }
    }
    
    /* Light grey background */
}

.faq-container {
    /* max-width: 800px; */
    margin: 40px auto 0;
}

/* Individual Card */
.faq-item {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.faq-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Active State Styling */
.faq-item.activ {
    border-color: #0dcaf0; /* Cyan Border when open */
    box-shadow: 0 10px 25px rgba(13, 202, 240, 0.1);
}

/* The Clickable Button (Question) */
.faq-question {
    width: 100%;
    background: #fff;
    border: none;
    padding: 20px 25px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: #051441; /* Navy Theme */
    transition: color 0.3s ease;
}

.faq-question span {
    padding-right: 15px;
    line-height: 1.5;
}

/* Icon Rotation */
.faq-question .icon {
    font-size: 14px;
    color: #0dcaf0; /* Cyan Icon */
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question .icon {
    transform: rotate(45deg); /* Turns plus to x */
}

.faq-item.active .faq-question {
    color: #0dcaf0; /* Text turns cyan when open */
}

/* The Answer (Hidden by default) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #fff;
}

.faq-answer p {
    padding: 0 25px 25px 25px;
    margin: 0;
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}

/* Highlight Text in Heading */
.iberr-faq-section .highlight-text {
    color: #0dcaf0;
}


/* ===========================faq section end========================= */