/* ==============================================
   PAGES.CSS - AINOSOFT CUSTOM STYLES
   Root Variables & Header Enhancements
   ============================================== */

:root {
    /* Font Family */
    --primary-font: 'Poppins', sans-serif;
    --secondary-font: 'Open Sans', sans-serif;
    --rs-ff-fontawesome: "Font Awesome 6 Free";

    /* Color Palette - Primary */
    --rs-white: #FFFFFF;
    --rs-black: #1F1F1F;
    --rs-light: #F5F5F5;
    --rs-dark: #050748;

    /* Brand Colors */
    --primary-color: #020066;
    --secondary-color: #C00063;
    --primary-color-light: #020066;
    --primary-color-dark: #020066;
    --secondary-color: #C00063;
    --secondary-color-light: #8c6fcc;
    --accent-color: #ffbd84;
    --accent-gradient: linear-gradient(135deg, #ffbd84 0%, #C00063 100%);
    --blue-gradient: linear-gradient(135deg, #673AB7 0%, #2196F3 100%);

    /* Text Colors */
    --rs-text-primary: #6a6a8e;
    --rs-text-secondary: #050748;
    --rs-text-light: #a2a2a2;
    --rs-title-primary: #050748;



    /* Background Colors */
    --rs-bg-primary: #020066;
    /* WAS: #ff1f8e */
    --rs-bg-secondary: #C00063;
    --rs-bg-dark: #101010;
    --rs-bg-light: #fafafa;

    /* Border Colors */
    --rs-border-primary: #e6e6e6;
    --rs-border-secondary: #dadada;
    --rs-border-light: #f3f3f3;

    /* Spacing */
    --rs-spacing-xs: 4px;
    --rs-spacing-sm: 8px;
    --rs-spacing-md: 16px;
    --rs-spacing-lg: 24px;
    --rs-spacing-xl: 32px;
    --rs-spacing-xxl: 48px;

    /* Font Weights */
    --rs-fw-light: 300;
    --rs-fw-regular: 400;
    --rs-fw-medium: 500;
    --rs-fw-sbold: 600;
    --rs-fw-bold: 700;

    /* Font Sizes */
    --rs-fs-xs: 12px;
    --rs-fs-sm: 13px;
    --rs-fs-base: 14px;
    --rs-fs-md: 16px;
    --rs-fs-lg: 18px;
    --rs-fs-xl: 20px;
    --rs-fs-2xl: 24px;
    --rs-fs-3xl: 32px;

    /* Border Radius */
    --rs-radius-sm: 4px;
    --rs-radius-md: 8px;
    --rs-radius-lg: 12px;
    --rs-radius-xl: 20px;
    --rs-radius-full: 100px;

    /* Shadows */
    --rs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --rs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --rs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --rs-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --rs-transition-fast: all 0.2s ease;
    --rs-transition-base: all 0.3s ease;
    --rs-transition-slow: all 0.5s ease;
    --rs-primary-color: #C00063;

    --rs-btn-primary: #020066;
    --rs-transition: all 0.3s ease;
    --rs-hover-color: #C00063;
    --rs-white-color: #fff;
    --rs-light-white-color: rgba(255, 255, 255, 0.92);

    --rs-btn-primary: #020066;
    --rs-btn-hover: #C00063;
    --rs-btn-whatsapp-border: #020066;
    --rs-btn-whatsapp-hover-bg: #020066;
    --rs-btn-whatsapp-hover-color: #fff;
    --rs-transition: all 0.3s ease;
    --rs-white-color: #fff;
    --rs-light-white-color: rgba(255, 255, 255, 0.92);
}

/* 
:root{
    --gbp-section-padding:40px 0;
    --gbp-mobile-section-padding:20px 0;



    --gbp-primary-color:#020066;
    --gbp-secondary-color:#C00063;

    --gbp-hover-color:#C00063;

    --gbp-white-color:#fff;
    --gbp-body-color:#F7F8FC;
    --gbp-light-white-color: rgba(255,255,255,0.92);
    --gbp-black-color:#000000;
    --gbp-paragraph-color:#5B6475;
    --gbp-h6-color:#020066;

    --gbp-text-color:#64748b;
    --gbp-heading-color:#0f172a;

    --gbp-border-color:#e2e8f0;
    --gbp-bg-light:#f8fafc;

    --gbp-primary-font:'Poppins', sans-serif;
    --gbp-secondary-font:'Montserrat', sans-serif;

    --gbp-heading-font:'Yantramanav', sans-serif;
    --gbp-body-font:'Roboto', sans-serif;

    --gbp-transition:all 0.3s ease;

    --gbp-shadow: 0 10px 30px rgba(2,0,102,0.06);
} */

/* ==============================================
   TOP HEADER BAR (Like Reference Image)
   ============================================== */
.top-header-bar {
    background: linear-gradient(135deg, #050748 0%, #1a1a6e 100%);
    color: var(--rs-white);
    padding: 8px 0;
    font-size: 13px;
    position: relative;
    z-index: 1001;
}

.top-header-bar .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.top-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.top-header-left span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-header-left i {
    font-size: 14px;
    color: var(--accent-color);
}

.top-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-header-right a {
    color: var(--rs-white);
    text-decoration: none;
    font-size: 13px;
    transition: var(--rs-transition-fast);
}

.top-header-right a:hover {
    color: var(--accent-color);
}

.social-icons-top {
    display: flex;
    gap: 12px;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.social-icons-top a {
    font-size: 14px;
}

/* ==============================================
   BUTTON STYLES (Match Reference Image)
   ============================================== */
.btn-gradient {
    background: linear-gradient(135deg, #ff1f8e 0%, #ffbd84 100%);
    border: none;
    padding: 10px 28px;
    border-radius: 100px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(255, 31, 142, 0.3);
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 31, 142, 0.4);
    color: white;
}

.btn-outline-light {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    padding: 8px 20px;
    border-radius: 100px;
    color: white;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-outline-light:hover {
    background: white;
    color: #ff1f8e;
    border-color: white;
}

/* Icon Buttons */
.icon-btn-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
    font-size: 16px;
}

.icon-btn-circle:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}


/* ===================================================
   BUTTONS (Updated - Complete)
=================================================== */
.new-navbar-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 15px;
}

.new-btn-primary,
.new-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: var(--rs-transition);
    cursor: pointer;
    text-decoration: none;
}

/* Primary Button */
.new-btn-primary {
    background: var(--rs-btn-primary, #020066);
    color: var(--rs-white-color, #fff);
    border: none;
}

.new-btn-primary:hover {
    background: var(--rs-btn-hover, #C00063);
    color: var(--rs-light-white-color, rgba(255, 255, 255, 0.92));
    transform: translateY(-2px);
}

/* WhatsApp/Outline Button */
.new-btn-whatsapp {
    background: #fff;
    border: 2px solid var(--rs-btn-whatsapp-border, #020066);
    color: var(--rs-btn-whatsapp-border, #020066);
}

.new-btn-whatsapp:hover {
    background: var(--rs-btn-whatsapp-hover-bg, #020066);
    color: var(--rs-btn-whatsapp-hover-color, #fff);
    transform: translateY(-2px);
}

/* Utility Class */
.mr-10 {
    margin-right: 10px;
}

/* Mobile Responsive */
@media (max-width: 1150px) {
    .new-navbar-buttons {
        display: none;
    }
}

.new-btn-whatsapp:hover {

    background: var(--rs-bg-primary);
    color: #fff;
}

/* ==============================================
   TOP HEADER BAR - HIDES ON SCROLL
   ============================================== */
/* ==============================================
   TOP HEADER BAR - HIDES ON SCROLL (DESKTOP ONLY)
   ============================================== */
.gbp-top-header-bar {
    background: var(--rs-bg-primary);
    color: #ffffff;
    padding: 10px 40px;
    font-size: 12px;
    position: relative;
    z-index: 1002;
    transition: all 0.3s ease;
}

/* Hide on scroll - JavaScript will add this class */
.gbp-top-header-bar.hide-on-scroll {
    display: none;
}

.gbp-top-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.gbp-top-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.gbp-top-header-left span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.gbp-top-header-left i {
    font-size: 13px;
    /* color: #ffbd84; */
}

.gbp-top-header-left a {
    color: #ffffff;
    text-decoration: none;
}

.gbp-top-header-left a:hover {
    color: var(--rs-hover-color);
}

.gbp-top-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.gbp-top-header-right a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.gbp-top-header-right a:hover {
    color: var(--rs-hover-color);
}

.gbp-top-social-icons {
    display: flex;
    gap: 12px;
    margin-left: 10px;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.gbp-top-social-icons a {
    font-size: 13px;
}

/* Hide Mobile Header on Desktop */
.gbp-mobile-top-header{
    display:none;
}

/* Mobile View */
@media(max-width:767px){

    /* Hide Desktop Header */
    .gbp-top-header-bar{
        display:none;
    }

    /* Show Mobile Header */
    .gbp-mobile-top-header{
        display:flex;
        justify-content:space-between;
        align-items:center;

        background:#020066;
        color:#fff;

        padding:8px 12px;
        font-size:12px;
        font-weight:500;
        display:flex;
    }

    .gbp-mobile-location{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .gbp-mobile-phone{
        color:#fff;
        text-decoration:none;
        font-weight:600;
        margin-left:10px;
        white-space:nowrap;
    }

    .gbp-mobile-phone i{
        margin-right:4px;
    }
}
/* Mobile Only */
@media (max-width: 991px) {

    /* .mobile-menu2 {
        display: flex;
        align-items: center;
    }

    .mob-nav2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 0;
    } */

    .mobile-consult-btn {
        list-style: none;
    }

    .mobile-free-btn {
        background:var(--primary-color);
        color: #fff !important;
        padding: 7px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 600;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .mobile-free-btn i {
        font-size: 12px;
    }
}

/* Hide on Desktop */
@media (min-width: 992px) {
    .mobile-consult-btn {
        display: none;
    }
}

/* ==============================================
   HIDE TOP HEADER BAR ON MOBILE (max-width: 768px)
   ============================================== */
@media (max-width: 768px) {
    .gbp-top-header-bar {
        display: none !important;
    }

    /* Main header goes to top on mobile */
    .main-header {
        top: 0 !important;
    }
}

/* ==============================================
   MAIN HEADER - STICKY BEHAVIOR
   ============================================== */
.main-header {
    position: fixed;
    /* top: 29px; */
    /* Height of top header bar (desktop only) */
    left: 0;
    width: 100%;
    z-index: 1001;
    transition: all 0.3s ease;
}

/* When top header is hidden, main header goes to top */
.main-header.top-hidden {
    top: 0;
}

/* Sticky state - already in your CSS */
.main-header.sticky {
    top: 0 !important;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* ==============================================
   RESPONSIVE (Tablet & Desktop adjustments)
   ============================================== */
@media (max-width: 991px) and (min-width: 769px) {
    .gbp-top-header-bar {
        padding: 8px 20px;
    }

    .gbp-top-header-flex {
        justify-content: center;
        text-align: center;
    }

    .gbp-top-header-left,
    .gbp-top-header-right {
        justify-content: center;
    }

    .main-header {
        top: 72px;
        /* Adjust for tablet */
    }
}

@media (max-width: 767px) {

    /* Top header is hidden on mobile, so no adjustment needed */
    .main-header {
        top: 0 !important;
    }
}

/* ===================================================
   HERO SECTION - MAIN WEBSITE
=================================================== */
.gbp-hero-area {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding:40px 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    background-image:url('../images/9.png');
    /* margin-top: 64px; */
}

/* Left fade effect for better text readability */
.gbp-hero-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(247, 248, 252, 1) 0%,
            rgba(247, 248, 252, 0.95) 25%,
            rgba(247, 248, 252, 0) 55%);
}

/* Hero Content */
.gbp-hero-content {
    position: relative;
    z-index: 5;
    max-width: 860px;
    padding-left: 70px;
}

/* Tag/Badge */
/* .gbp-hero-tag {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(0, 37, 148, 0.08);
    color: var(--gbp-primary-color, #020066);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
} */
 /* Tag/Badge - With Icon */
.gbp-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    /* background: rgba(2, 0, 102, 0.08); */
    color: var(--primary-color, #020066);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 15px;
    border:1px solid var(--secondary-color, #C00063);
}

.gbp-hero-tag i {
    font-size: 11px;
    color: var(--secondary-color, #c00063);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .gbp-hero-tag {
        font-size: 8px;
        padding: 8px 12px;
        gap: 6px;
    }
    
    .gbp-hero-tag i {
        font-size: 8px;
    }
        .gbp-mobile-subtext {
        display: block !important;
    }
    
}

.gbp-mobile-subtext {
    font-size: 13px;
    color: var(--secondary-color, #C00063);
    font-weight: 500;
    margin-bottom: 15px;
    display: none;
}
.gbp-mobile-subtext i {
   
    color: var(--secondary-color, #C00063);
}
/* Heading */
.gbp-hero-content h1 {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--gbp-primary-color, #020066);
    margin-bottom: 10px;
    max-width: 850px;
}

.gbp-hero-content h1 span {
    color: var(--gbp-secondary-color, #C00063);
}

/* Description */
.gbp-hero-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gbp-paragraph-color, #5B6475);
    margin-bottom: 28px;
    max-width: 90%;
    text-align: justify;
}

/* Features Grid */
.gbp-hero-features {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 30px;
}

.gbp-feature-box {
    width: 105px;
}

/* Feature Icon */
.gbp-feature-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E7EAF3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.gbp-feature-icon:hover {
    border-color: var(--gbp-primary-color, #020066);
    transform: translateY(-3px);
}

.gbp-feature-icon i {
    font-size: 20px;
    color: var(--gbp-primary-color, #020066);
}

/* Feature Text */
.gbp-feature-box h6 {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--gbp-paragraph-color, #5B6475);
    margin: 0;
}

/* Hero Buttons */
.gbp-hero-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.gbp-hero-call-btn,
.gbp-hero-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gbp-hero-call-btn {
    background: var(--gbp-primary-color, #020066);
    color: #fff;
    border: none;
}

.gbp-hero-call-btn:hover {
    background: var(--gbp-secondary-color, #C00063);
    transform: translateY(-2px);
    color: #fff;
}

.gbp-hero-whatsapp-btn {
    background: #fff;
    border: 1px solid var(--gbp-primary-color, #020066);
    color: var(--gbp-primary-color, #020066);
}

.gbp-hero-whatsapp-btn:hover {
    background: var(--gbp-primary-color, #020066);
    color: #fff;
    transform: translateY(-2px);
}

/* ===================================================
   RESPONSIVE - TABLET
=================================================== */
@media (max-width: 991px) {
    .gbp-hero-features {
        gap: 12px;
    }

    .gbp-feature-box {
        width: 90px;
    }

    .gbp-feature-icon {
        width: 54px;
        height: 54px;
    }

    .gbp-feature-box h6 {
        font-size: 13px;
        line-height: 1.5;
    }
}


@media (max-width: 1400px) {

    .gbp-hero-area{
        min-height: 65vh;
        padding: 35px 0;
    }

    .gbp-hero-content{
        padding-left: 40px;
    }

    .gbp-hero-content h1{
        font-size: 34px;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .gbp-hero-content p{
        font-size: 12px;
        margin-bottom: 18px;
            max-width: 74%;
    }

    .gbp-hero-btns{
        margin-top: 10px;
    }

    .gbp-mini-stats{
        margin-top: 15px !important;
        gap: 20px;
    }

    .gbp-trust-card{
        margin-top: 10px;
        padding: 14px 18px;
    }
    .mini-stat strong{
        font-size: 18px !important;
    }
    .mini-stat span{
        font-size: 10px !important;
    }
    .trust-item strong{
        font-size:12px !important;
    }
}

/* ===================================================
   RESPONSIVE - MOBILE
=================================================== */
@media (max-width: 768px) {
    .gbp-hero-area {
        padding: 25px 0;
        background-image: none !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .gbp-hero-area::before {
        display: none;
    }

    .gbp-hero-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* .gbp-hero-tag {
        font-size: 8px;
        padding: 5px 12px;
    } */

    .gbp-hero-content h1 {
        font-size: 24px;
        line-height: 1.25;
    }

    .gbp-hero-content p {
        font-size: 11px;
        line-height: 1.7;
        margin-bottom: 20px;
        text-align: left;
        color:black;
        max-width: 100%;
    }

    /* Features as 2-column grid on mobile */
    .gbp-hero-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 25px;
    }

    .gbp-feature-box {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.04);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(2, 0, 102, 0.04);
    }

    .gbp-feature-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 0;
        border-radius: 12px;
    }

    .gbp-feature-icon i {
        font-size: 16px;
    }

    .gbp-feature-box h6 {
        font-size: 12px;
        margin: 0;
        text-align: left;
    }

    .gbp-feature-box h6 br {
        display: none;
    }

    /* Buttons side by side on mobile */
    .gbp-hero-btns {
        flex-direction: row;
        gap: 10px;
    }

    .gbp-hero-call-btn,
    .gbp-hero-whatsapp-btn {
        flex: 1;
        padding: 12px 10px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* ===================================================
   RESPONSIVE - SMALL MOBILE
=================================================== */
@media (max-width: 480px) {
    .gbp-hero-content h1 {
        font-size: 22px;
    }

    .gbp-hero-call-btn,
    .gbp-hero-whatsapp-btn {
        font-size: 11px;
        padding: 10px 8px;
    }

    .gbp-feature-box {
        padding: 8px 10px;
    }

    .gbp-feature-icon {
        width: 38px;
        height: 38px;
    }

    .gbp-feature-icon i {
        font-size: 14px;
    }

    .gbp-feature-box h6 {
        font-size: 11px;
    }
}


/* ==============================================
   CLIENTS CAROUSEL SECTION - AINOSOFT
   ============================================== */
.ainosof-clients-section {
    padding: 30px 0px 25px 0;
    background: linear-gradient(135deg, #f8faff 0%, #f0f3ff 100%);
    position: relative;
    overflow: hidden;
}

/* Section Header */
.ainosof-section-header {
    text-align: center;
    margin-bottom: 20px;
}

.ainosof-section-subtitle {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(255, 31, 142, 0.1);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 15px;
}



.ainosof-section-title span {
    color: var(--primary-color);
}

.ainosof-section-desc {
    font-size: 14px;
    color: #6a6a8e;
    max-width: 600px;
    margin: 0 auto;
}

/* Client Item - Larger Box */
.ainosof-client-item {
    padding: 10px;
}

.ainosof-client-logo {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 20px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ainosof-client-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(2, 0, 102, 0.1);
    /* border-color: var(--primary-color, #ff1f8e); */
}

/* No grayscale - Keep original colors */
.ainosof-client-logo img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none !important;  /* Remove any blur/grayscale */
    transition: all 0.3s ease;
}

.ainosof-client-logo:hover img {
    filter: none !important;
    transform: scale(1.02);
}

/* Carousel Navigation */
.ainosof-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* margin-top: 30px; */
}

.ainosof-carousel-prev,
.ainosof-carousel-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    color: var(--rs-dark, #050748);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ainosof-carousel-prev:hover,
.ainosof-carousel-next:hover {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* Owl Carousel Custom Styles */
.ainosof-clients-carousel .owl-stage {
    display: flex;
    align-items: center;
}

/* Remove opacity effect - show all logos clearly */
.ainosof-clients-carousel .owl-item {
    opacity: 1 !important;  /* No transparency */
    transition: all 0.3s ease;
}

/* Hide Dots */
.ainosof-clients-carousel .owl-dots {
    display: none !important;
}

/* ==============================================
   RESPONSIVE - CLIENTS CAROUSEL
================================================ */
/* Desktop: Show 7 items */
@media (min-width: 1200px) {
    .ainosof-clients-carousel .owl-item {
        width: calc(100% / 7) !important;
    }
}

/* Large Desktop */
@media (min-width: 992px) and (max-width: 1199px) {
    .ainosof-clients-carousel .owl-item {
        width: calc(100% / 6) !important;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .ainosof-section-title {
        font-size: 30px;
    }
    
    .ainosof-client-logo {
        padding: 20px 15px;
        min-height: 110px;
    }
    
    .ainosof-client-logo img {
        max-height: 50px;
    }
}

/* Mobile Landscape */
@media (max-width: 768px) {
    .ainosof-clients-section {
        padding: 30px 0;
    }
    
    .ainosof-section-header {
        margin-bottom: 20px;
    }
    
    .ainosof-section-title {
        font-size: 22px;
    }
    
    .ainosof-section-subtitle {
        font-size: 10px;
    }
    
    .ainosof-section-desc {
        font-size: 13px;
        padding: 0 15px;
    }
    
    .ainosof-client-logo {
        padding: 15px 12px;
        min-height: 90px;
    }
    
    .ainosof-client-logo img {
        max-height: 40px;
    }
    
    .ainosof-carousel-prev,
    .ainosof-carousel-next {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    .ainosof-section-title {
        font-size: 18px;
    }
    
    .ainosof-client-logo {
        padding: 12px 10px;
        min-height: 75px;
    }
    
    .ainosof-client-logo img {
        max-height: 32px;
    }
}

/* At top of page (no scroll) - Adjust based on header state */
.main-header:not(.sticky) .nx-dropdown {
    margin-top: -15px;
    transition: margin-top 0.3s ease;
}

/* When scrolled or sticky */
.main-header.sticky .nx-dropdown {
    margin-top: 0;
}

/* When top header is hidden and main header moves up */
.main-header.top-hidden .nx-dropdown {
    margin-top: 0;
}

/* ==============================================
   ENHANCED MOBILE MENU STYLES
   ============================================== */

/* Mobile Menu Background - Dark Theme */
.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
    background: linear-gradient(135deg, #050748 0%, #1a1a6e 100%) !important;
}

/* Menu Header / Title */
.hc-offcanvas-nav h2 {
    background: linear-gradient(135deg, #020066 0%, #050748 100%) !important;
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Menu Items */
.hc-offcanvas-nav li:not(.custom-content) a {
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Menu Item Hover */
.hc-offcanvas-nav li:not(.custom-content) a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffbd84 !important;
    padding-left: 24px;
}

/* Active/Open Menu Items */
.hc-offcanvas-nav li.level-open > .nav-item-wrapper > a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffbd84 !important;
}

/* Sub-menu Items */
.hc-offcanvas-nav ul ul li a {
    padding-left: 35px !important;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.2);
}

/* Third Level Menu */
.hc-offcanvas-nav ul ul ul li a {
    padding-left: 50px !important;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.3);
}

/* Navigation Arrows */
.hc-offcanvas-nav .nav-next span::before,
.hc-offcanvas-nav li.nav-back span::before {
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
}

/* Back Button */
.hc-offcanvas-nav li.nav-back a {
    background: #020066 !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Close Button */
.hc-offcanvas-nav li.nav-close a {
    background: #020066 !important;
    color: #ffffff !important;
}

/* Bottom Navigation Icons */
.hc-offcanvas-nav ul.bottom-nav {
    background: linear-gradient(135deg, #020066 0%, #050748 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hc-offcanvas-nav ul.bottom-nav li a {
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hc-offcanvas-nav ul.bottom-nav li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffbd84 !important;
}

/* Menu Toggle Button (Hamburger) */
.hc-nav-trigger span,
.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
    background: #050748;
}

/* When header is dark/nav-bg-b */
.nav-bg-b .hc-nav-trigger span,
.nav-bg-b .hc-nav-trigger span::before,
.nav-bg-b .hc-nav-trigger span::after {
    background: #ffffff;
}

/* Sticky Header - Hamburger Color */
.main-header.sticky .hc-nav-trigger span,
.main-header.sticky .hc-nav-trigger span::before,
.main-header.sticky .hc-nav-trigger span::after {
    background: #050748;
}

/* Mobile Menu Icons - Add icons to menu items */
#main-nav .first-nav > li > a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 12px;
    font-size: 14px;
    color: #ffbd84;
}

#main-nav .first-nav > li:nth-child(1) > a::before { content: "\f015"; }  /* Home */
#main-nav .first-nav > li:nth-child(2) > a::before { content: "\f0f7"; }  /* Company */
#main-nav .first-nav > li:nth-child(3) > a::before { content: "\f0ae"; }  /* Services */
#main-nav .first-nav > li:nth-child(4) > a::before { content: "\f0c5"; }  /* Solutions */
#main-nav .first-nav > li:nth-child(5) > a::before { content: "\f1ad"; }  /* Industries */
#main-nav .first-nav > li:nth-child(6) > a::before { content: "\f1fe"; }  /* Our Work */
#main-nav .first-nav > li:nth-child(7) > a::before { content: "\f0e4"; }  /* Resources */
#main-nav .first-nav > li:nth-child(8) > a::before { content: "\f003"; }  /* Contact */

/* Responsive adjustments */
@media (max-width: 767px) {
    .hc-offcanvas-nav .nav-container {
        width: 85% !important;
    }
    
    .hc-offcanvas-nav li:not(.custom-content) a {
        font-size: 14px;
        padding: 12px 16px;
    }
    
    .hc-offcanvas-nav ul ul li a {
        padding-left: 30px !important;
    }
    
    .hc-offcanvas-nav ul ul ul li a {
        padding-left: 45px !important;
    }
}


/* ==========================================
   AINOSOF CLIENTS SECTION
========================================== */

.ainosof-clients-section{
    padding:30px 0 20px 0;
    background: linear-gradient(135deg, #f8faff 0%, #f0f3ff 100%);
    /* background:#ffffff; */
    overflow:hidden;
}

.ainosof-section-header{
    text-align:center;
    margin-bottom:20px;
}

.ainosof-section-subtitle{
    display:inline-block;
    font-size:14px;
    font-weight:600;
    color:var(--secondary-color);
    text-transform:uppercase;
    letter-spacing:1px;
    /* margin-bottom:15px; */
}

.ainosof-section-title{
    font-size:26px;
    font-weight:700;
    color:var(--secondary-color);
    margin-bottom:5px;
}

.ainosof-section-title span{
    color:var(--primary-color);
}

.ainosof-section-desc{
    max-width:650px;
    margin:0 auto;
    color:#6b7280;
    line-height:28px;
}

.ainosof-clients-marquee{
    overflow:hidden;
    position:relative;
    width:100%;
}

.ainosof-clients-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:ainosofScroll 40s linear infinite;
}

.ainosof-clients-marquee:hover .ainosof-clients-track{
    animation-play-state:paused;
}

.ainosof-client-item{
    flex:0 0 auto;
    padding:0 6px;
}

.ainosof-client-logo{
    width:180px;
    height:100px;

    background:#fff;
    border:1px solid #f1f5f9;
    border-radius:12px;

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

    box-shadow:0 2px 12px rgba(0,0,0,.04);

    transition:all .25s ease;
}

.ainosof-client-logo:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.ainosof-client-logo img{
    max-width:130px;
    max-height:70px;
    width:auto;
    height:auto;
    object-fit:contain;

    transition:all .3s ease;
}
@keyframes ainosofScroll{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

@media(max-width:991px){

    .ainosof-section-title{
        font-size:32px;
    }

    .ainosof-client-logo{
        width:150px;
        height:95px;
    }

    .ainosof-client-logo img{
        max-width:110px;
    }

    .ainosof-clients-track{
        animation-duration:30s;
    }

}

@media(max-width:576px){

    .ainosof-clients-section{
        padding:20px 0;
    }

    .ainosof-section-title{
        font-size:26px;
    }

    .ainosof-client-logo{
        width:120px;
        height:80px;
    }

    .ainosof-client-logo img{
        max-width:85px;
    }

    .ainosof-clients-track{
        animation-duration:20s;
    }

}

@media(max-width:991px){
    .hidden-sm{
        display:none !important;
    }
}