@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

  
  
  :root {
  --primary-font: 'Inter';
  --secondary-font: 'Lato';

  --primary-color: #4CAF4F;
  --secondary-color: #3ac36a;
  --accent-color: #4D4D4D;
  --accent-color-text: #717171;
  --category-tag-font: #6D757F;
  --category-subheading-tag: #183354;
  --background-color: #ffffff;
}

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

        body {
            font-family: var(--primary-font);
            /* background: #0a0a0a; */
            color: #fff;
            overflow-x: hidden;
        }


        /*loader  */
        
/* .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: all 0.8s ease;
        }

        .loader.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .loader-content {
            text-align: center;
            animation: loaderFadeIn 1s ease-out;
        }

        @keyframes loaderFadeIn {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .loader-logo {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #fff 0%, #ff6600 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 2rem;
            animation: logoGlow 2s ease-in-out infinite alternate;
        }

        @keyframes logoGlow {
            0% {
                filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.3));
            }
            100% {
                filter: drop-shadow(0 0 20px rgba(255, 102, 0, 0.6));
            }
        }

        .loader-spinner {
            width: 80px;
            height: 80px;
            margin: 0 auto 2rem;
            position: relative;
        }

        .loader-spinner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 3px solid rgba(255, 102, 0, 0.1);
            border-top: 3px solid #ff6600;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loader-spinner::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            width: 60px;
            height: 60px;
            border: 3px solid rgba(255, 102, 0, 0.1);
            border-top: 3px solid #e05400;
            border-radius: 50%;
            animation: spinReverse 1.5s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes spinReverse {
            0% {
                transform: rotate(360deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }

        .loader-text {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.8);
            animation: textPulse 2s ease-in-out infinite;
        }

        @keyframes textPulse {
            0%, 100% {
                opacity: 0.5;
            }
            50% {
                opacity: 1;
            }
        }

        .loader-progress {
            width: 200px;
            height: 3px;
            background: rgba(255, 102, 0, 0.1);
            border-radius: 3px;
            margin: 1.5rem auto 0;
            overflow: hidden;
            position: relative;
        }

        .loader-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #ff6600, #e05400);
            border-radius: 3px;
            width: 0%;
            animation: progressFill 3s ease-in-out;
        }

        @keyframes progressFill {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }

        .loader-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ff6600;
            border-radius: 50%;
            animation: particleFloat 4s ease-in-out infinite;
        }

        .particle:nth-child(1) {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .particle:nth-child(2) {
            top: 60%;
            left: 20%;
            animation-delay: 0.5s;
        }

        .particle:nth-child(3) {
            top: 30%;
            right: 15%;
            animation-delay: 1s;
        }

        .particle:nth-child(4) {
            bottom: 25%;
            right: 25%;
            animation-delay: 1.5s;
        }

        .particle:nth-child(5) {
            bottom: 40%;
            left: 15%;
            animation-delay: 2s;
        }

        @keyframes particleFloat {
            0%, 100% {
                transform: translateY(0px) scale(0.8);
                opacity: 0.3;
            }
            50% {
                transform: translateY(-20px) scale(1.2);
                opacity: 1;
            }
        } */

/* loader ends */

/* Navigation Base */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 40px;
}

.nav-menu li {
    position: relative;
}

.nav-link {
    text-decoration: none;
    padding: 10px;
    display: block;
}

/* Dropdown Base */
.dropdown-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    padding: 10px 0;
    min-width: 180px;
    display: none;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 99;
}

.dropdown-menu li a {
    padding: 10px 15px;
    display: block;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: #f3f3f3;
}

/* Show on Hover */
.dropdown:hover .dropdown-menu {
    display: block;
}
/* ---------other pages header------------ */

/* .logged-in .page-id-38767 .header {
     top: 78px;
} */
.page .header,
.single .header,
.blog .header,
.archive .header,
.error404 .header{
    position: relative;
     /* top: 48px; */
    left: 0;
    right: 0;
    z-index: 1000;
    background:rgba(245, 247, 250, 1) !important;
    backdrop-filter: none !important;
    border: none;
    /* border-bottom: 1px solid rgba(255, 102, 0, 0.1); */
    transition: all 0.3s ease;
}

header.header.scrolled {
    background: rgba(245, 247, 250, 1) !important;
    /* box-shadow:0 5px 30px rgb(0 0 0 / 5%); */
    top: 0;
    position: fixed;
}
.header.scrolled ul#menu-new-menu-type>li>a{
    color: rgba(60, 76, 65, 1) !important;
}

.header.scrolled ul#menu-new-menu-type>li>a:hover {
    color: var(--primary-color) !important; /* optional hover color */
}
.header.scrolled .menu-toggle span {
    background: var(--primary-color);
}

.home .header.scrolled .menu-toggle span {
    background: var(--primary-color) !important;
}
.header-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 25px;
}



.header.scrolled .icon-btn {
    color: #000;
}
.logo-img {
    content: url("https://staging.techversions.com/assets/TV-Logo-243-x-22.png");
}

.search-icon {
    content: url("https://staging.techversions.com/assets/Header-Icon-Search-Color.png");
}

.translate-icon {
    content: url("https://staging.techversions.com/assets/Header-Icon-Language-Translator-Color.png");
}
.user-icon {
    content: url("https://staging.techversions.com/assets/header_user_icon_color.png");
}
/* --------ends -------- */

/* ------home page header css starts---------------- */
.home .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none;
    /* border-bottom: 1px solid rgba(255, 102, 0, 0.1); */
    transition: all 0.3s ease;
}

.home header.header.scrolled {
    background: rgba(245, 247, 250, 1) !important;
    /* box-shadow:0 5px 30px rgb(0 0 0 / 5%); */
    position: fixed;
}
/* .home .header.scrolled ul#menu-new-menu-type>li>a{
    color: rgba(60, 76, 65, 1) !important;
} */

.home .header.scrolled ul#menu-new-menu-type>li>a:hover {
    color: var(--primary-color) !important; /* optional hover color */
}
.home .header.scrolled .menu-toggle span {
    background: var(--primary-color);
}
.home .header-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 25px;
}
.home .header.scrolled .icon-btn {
    color: #000;
}
.home .logo-img {
    content: url("https://staging.techversions.com/assets/TV-Logo-243-x-22-White.png") !important;
}

.home .search-icon {
    content: url("https://staging.techversions.com/assets/Header-Icon-Search-white.png") !important;
}

.home .translate-icon {
    content: url("https://staging.techversions.com/assets/Header-Icon-Language-Translator-white.png") !important;
}
.home .user-icon {
    content: url("https://staging.techversions.com/assets/header_user_icon_white.png") !important;
}
.home .header.scrolled .logo-img {
    content: url("https://staging.techversions.com/assets/TV-Logo-243-x-22.png") !important;
}

.home .header.scrolled .search-icon {
    content: url("https://staging.techversions.com/assets/Header-Icon-Search-Color.png") !important;
}

.home .header.scrolled .translate-icon {
    content: url("https://staging.techversions.com/assets/Header-Icon-Language-Translator-Color.png") !important;
}
.home .header.scrolled .user-icon {
    content: url("https://staging.techversions.com/assets/header_user_icon_color.png") !important;
}
/* -----------ends------------- */
.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    transition: color 0.3s ease;
}

    /* .search-overlay {
        position: fixed;
        top: -100px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 15px 20px;
        display: flex;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        z-index: 9999;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

    .search-overlay.active {
        top: 70px; 
    } */
   

    /* .search-box {
        width: 100%;
        max-width: 650px;
        display: flex;
        align-items: center;
        border: 2px solid #000;
        border-radius: 50px;
        padding: 5px 15px;
    }

    .search-box input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 18px;
    } */

/* .search-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 80px; 
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 40px;
  
    transform: translateX(100%);
    transition: transform 0.5s ease;
    z-index: 9999;
} */

/* Active State */
/* .search-overlay.active {
    transform: translateX(0);
}

.search-box {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-box input {
    flex: 1;
    height: 45px;
    border: none;
    outline: none;
    font-size: 16px;
    border-bottom: 2px solid #ddd;
}

.close-search {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
} */
    /* .search-box button.close-search {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 22px;
        color: #000;
    } */
/* Scroll Down Arrow */
img.scroll-down {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s ease-in-out;
    animation: bounce 1.8s infinite;
    z-index: 10;
}



/* Bounce animation */
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -12px); }
}


        .home .nav-container {
            /* max-width: 1200px; */
            margin: 3px 49px !important;
            padding: 0 !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            
        }

         .nav-container {
            max-width: 1600px !important;
            margin: 3px 70px !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            
        }
nav {
    left: 35%;
    position: absolute;
    top: 25px;
}

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: 700;
            /* background: linear-gradient(135deg, #fff 0%, #ff6600 100%); */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
            transition: all 0.3s ease;
        }
/* 
        .logo:hover {
            filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.5));
        } */

        .logo-img {
            width: 100%;
            height: auto;
            border-radius:0;
            transition: all 0.3s ease;
        }

        /* .logo:hover .logo-img {
            transform: scale(1.6);
            filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.3));
        } */
ul#menu-header-menu>li>a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}
.home .header.scrolled ul#menu-header-menu>li>a {
    color: rgba(60, 76, 65, 1);
    padding: 10px;
}
    
.header.scrolled ul#menu-header-menu>li>a {
    color: rgba(60, 76, 65, 1);
    padding: 10px;
}
        .nav-link {
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-family: var(--primary-font);
            font-size: 16px;
            position: relative;
            padding: 0.5rem 0;
            transition: all 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color), var( --secondary-color));
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .nav-link:hover {
            color: var(--primary-color);
        }

        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 0.5rem;
        }

        .menu-toggle span {
            width: 25px;
            height: 3px;
            background: #fff;
            margin: 3px 0;
            transition: 0.3s;
            border-radius:0;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }

        

        .techversion-hero-container {
            display: flex;
            justify-content: center;
            /* background: linear-gradient(90deg, #10121647 0%, #0e10143b 100%); */
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            /* margin-top: 60px; */
        }

        .techversion-hero-fullscreen {
            position: relative;
            width: 100%;
            height: 100vh;
            max-width: 100vw;
            max-height: 100vh;
            border-radius:0;
            overflow: hidden;
            /* box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 102, 0, 0.1); */
            animation: heroFloat 6s ease-in-out infinite;
            /* top: -25px; */
        }

        @keyframes heroFloat {
            0%, 100% {
                transform: translateY(0px) scale(1);
            }
            50% {
                transform: translateY(-10px) scale(1.005);
            }
        }

        .techversion-hero-slider,
        .swiper-wrapper,
        .swiper-slide {
            width: 100%;
            height: 100%;
            border-radius: 0;
        }

        .techversion-hero-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            z-index: 1;
            transition: transform 0.5s ease;
        }

        .techversion-hero-video:hover {
            transform: scale(1.05);
        }

        .techversion-hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            /* background: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0%, #0c0d19 50%, rgba(0, 0, 0, 0.6) 100%); */
                background: #161c2de6;
        }

        .techversion-hero-overlay::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%, transparent 100%); */
            pointer-events: none;
        }

        .techversion-hero-overlay::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            /* background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%, transparent 100%); */
            pointer-events: none;
        }

        .tv-hero-content {
            position: absolute;
            z-index: 3;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 600px;
            text-align: center;
            color: #fff;
            animation: contentFadeIn 2s ease-out;
        }

        @keyframes contentFadeIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) translateY(0);
            }
        }

        .tv-hero-title {
            font-size: clamp(2rem, 4vw, 60px);
            font-weight: 700;
            margin: 0 0 1.5rem;
            /* text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); */
            background: linear-gradient(135deg, #fff 0%, #fff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            /* animation: titleGlow 3s ease-in-out infinite alternate; */
        }

        @keyframes titleGlow {
            0% {
                filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.3));
            }
            100% {
                filter: drop-shadow(0 0 20px rgba(255, 102, 0, 0.6));
            }
        }

        .tv-hero-subtitle {
            color: var(--primary-color);
           font-size: clamp(14px, 2vw, 16px);
            font-weight: 600;
            margin: 0 0 2.5rem;
            /* text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); */
            opacity: 0.9;
            line-height: 1.5;
            animation: subtitleSlide 2s ease-out 0.5s both;
        }

        @keyframes subtitleSlide {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 0.9;
                transform: translateY(0);
            }
        }

        .tv-hero-btn {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: #fff;
            padding: 1rem 2.5rem;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            /* box-shadow: 0 10px 30px rgba(255, 102, 0, 0.3); */
            animation: buttonBounce 2s ease-out 1s both;
        }

        @keyframes buttonBounce {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.8);
            }
            60% {
                opacity: 1;
                transform: translateY(-5px) scale(1.05);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .tv-hero-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .tv-hero-btn:hover::before {
            left: 100%;
        }

        .tv-hero-btn:hover {
            transform: translateY(-3px) scale(1.05);
            /* box-shadow: 0 15px 40px rgba(255, 102, 0, 0.4); */
                background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
            color: #fff;
        }

        .tv-hero-btn:active {
            transform: translateY(-1px) scale(1.02);
        }

        .techversion-hero-container::before {
            content: "";
            position: absolute;
            top: 10%;
            left: 10%;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255, 102, 0, 0.1) 0%, transparent 70%);
            /* border-radius: 50%; */
            animation: float1 8s ease-in-out infinite;
        }

        .techversion-hero-container::after {
            content: "";
            position: absolute;
            bottom: 15%;
            right: 15%;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(255, 102, 0, 0.05) 0%, transparent 70%);
            /* border-radius: 50%; */
            animation: float2 10s ease-in-out infinite;
        }

        @keyframes float1 {
            0%, 100% {
                transform: translate(0, 0) rotate(0deg);
            }
            25% {
                transform: translate(20px, -30px) rotate(90deg);
            }
            50% {
                transform: translate(-10px, -20px) rotate(180deg);
            }
            75% {
                transform: translate(-30px, 10px) rotate(270deg);
            }
        }

        @keyframes float2 {
            0%, 100% {
                transform: translate(0, 0) rotate(0deg);
            }
            33% {
                transform: translate(-25px, 20px) rotate(120deg);
            }
            66% {
                transform: translate(15px, -25px) rotate(240deg);
            }
        }

        .techversion-hero-fullscreen {
            opacity: 0;
            animation: heroAppear 1.5s ease-out 0.5s both;
        }

        @keyframes heroAppear {
            0% {
                opacity: 0;
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
/* Tablet */
@media (max-width: 1024px) {

    .fr-full-filter-wrapper {
        margin: 0 15px !important;
        padding: 20px;
    }

    .fr-full-filter-form {
        flex-wrap: wrap;
        gap: 15px;
    }

    .fr-full-filter-form input,
    .fr-full-filter-form select {
        flex: 1 1 48%;
        width: 100%;
    }

    .fr-full-filter-form input {
        flex: 1 1 100%;
    }
/* ------------------ */
    .fr-center-filter-form {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding: 16px;
    }

    .fr-center-filter-form input {
        width: 180px;
    }

    /* .fr-center-filter-form select {
        min-width: 150px;
    } */

    .fr-heading-resources {
        font-size: 36px;
        margin: 50px auto 30px;
    }
    .kb-search-box {
    width: 100% !important;
    }
}


/* Mobile */
@media (max-width: 768px) {
    .footer-container {
        padding: 0px 50px !important;
    
}
h3.core-stats-heading {   
   text-align: center;
}
p.core-stats-text {
    text-align: center;
}
.page-id-3619 .section-title h1 {
    font-size: 36px !important;
}
.author-box {
    padding: 30px !important;
    margin: 0px 0px -30px !important;
    display: block !important;
}
.resources-carousel .resource-carousel-card
{
    width: 100% !important;
}
.abt-container {
    padding: 20px 0px 0px 0px !important;
}
.mission-container {
    padding: 0px 40px !important;
}
.stats-section {
    padding: 60px 30px !important;
}
.header-icons {
    display: none !important;
}
.kb-container {
    max-width: 100%;
}
.kb-breadcrumb {
    margin: 0 0px 20px !important;
}
.third_section_single.active {
    margin-top: 30px !important;
}
h2.mission-heading {
    font-size: 36px !important;
    margin-top: 0;
}
.sec_section_single.active {
    margin-top: 30px !important;
}
    .fr-full-filter-wrapper {
        margin: 0 15px;
        padding: 18px;
    }

    .fr-full-filter-form {
        flex-direction: column;
        gap: 12px;
    }

    .fr-full-filter-form input,
    .fr-full-filter-form select {
        width: 100%;
        flex: unset;
    }

    /* ------------ */
     .fr-center-filter-wrapper {
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 0 15px;
    }

    .fr-center-filter-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
        padding: 18px;
    }

    .fr-center-filter-form input,
    .fr-center-filter-form select,
    .fr-center-filter-form button {
        width: 100%;
    }

    .fr-center-filter-form input {
        width: 100% !important;
    }

    .fr-center-filter-form select {
        min-width: 100%;
    }

    .fr-heading-resources {
        font-size: 28px;
        margin: 40px auto 20px;
    }

    .fr-filter-wrapper {
        margin: 20px 0;
        padding: 0 15px;
    }
    .author-avatar img {
    height: auto !important;
    width: 100% !important;
    margin-top: 30px;
}

}
        @media (max-width: 1280px) {
            .techversion-hero-fullscreen {
                width: 100vw !important;
                height: calc(95vw * 0.5625);
            }
            .home .nav-container {
                    margin: 3px 38px !important;
            }
            .resources-carousel .resource-carousel-card
{
    width: 100% !important;
}
        }

        @media (max-width: 768px) {
                .main-nav .nav-menu {
        display: flex;
        gap: 30px !important;
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }
      .kb-right {
    margin-top: 40px !important;
}
 .kb-title {
    font-size: 40px !important;
    }
.tv-container {
    margin: 0 23px !important;
}
    .tv-tabs-container {
    margin: 0 30px !important;
}
.tv-consult-container {
    /* max-width: 1200px; */
    margin: 0 30px !important;
}
            .nav-menu {
                position: fixed;
                top: 0px !important;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: rgba(10, 10, 10, 0.95);
                backdrop-filter: blur(20px);
                flex-direction: column;
                justify-content: flex-start;
                padding-top: 2rem;
                transition: left 0.3s ease;
            }

            .nav-menu.active {
                left: 0;
            }

            .nav-menu li {
                margin: 0;
            }

            .menu-toggle {
                display: flex;
                 margin-bottom: 0px !important;
                         align-items: end !important;
                         /* position: fixed;
        left: 85%;
        right: 0; */
            }
p.schedule-footer
{
        padding: 0px !important;
}
    .row.right_key.g-4 {
        margin-left: -9px !important;
    }
            .techversion-hero-container {
                padding: 0rem;
            }

            .techversion-hero-fullscreen {
                width: 100vw;
                height: 60vh;
                min-height: 400px;
                border-radius: 0;
            }
img.single_res_img {
    width: 100% !important;
    height: 100% !important;
}
            .tv-hero-title {
                font-size: clamp(1.8rem, 6vw, 2.5rem);
            }

            .tv-hero-subtitle {
                font-size: clamp(1rem, 4vw, 1.2rem);
                margin-bottom: 2rem;
            }

            .tv-hero-btn {
                padding: 0.8rem 2rem;
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .nav-container {
                padding: 0 1rem ;
            }
            .resources-carousel .resource-carousel-card
{
    width: 100% !important;
}
img.single_res_img {
    width: 100%;
    height: 100%;
}
.header-icons {
    display: none !important;
}
            .techversion-hero-fullscreen {
                height: 50vh;
                min-height: 350px;
                border-radius: 0;
            }

            .tv-hero-content {
                width: 95%;
            }

            .tv-hero-btn {
                padding: 0.7rem 1.5rem;
                font-size: 0.9rem;
            }
        }
/* -----section 2 */
/* .section-two .row > div {
   padding-left: 20px;
   padding-right: 20px;
} */
.partial-section {
    background: #fff;
}
.section-two {
    padding: 100px 50px 0px 50px;
    margin-bottom: 10px;
}
h1.section-two-heading {
    font-size: 36px;
    color: var(--accent-color);
    font-weight: 600;
    text-align: center;
    padding-bottom: 20px;
    font-family: var(--primary-font);

}
p.section-two-para {
    font-size: 16px;
    font-weight: 400;
    color: var(--accent-color-text);
    text-align: center;
    line-height: 1.5;
    padding-bottom: 20px;
     font-family: var(--secondary-font);
}
/* .card {
      text-align: center;
          background: rgb(114 114 114 / 5%);
          border-radius: 6px;
}
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    align-items: center;
}
.card-body>h1 {
    font-size: 22px;
    color: var(--accent-color);
    text-align: center;
    font-weight: 700;
}
.card-body>p {
    font-size: 15px;
    font-weight: 400;
    color: var(--accent-color);
    text-align: center;
} */

.front {
  position: relative;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  text-align: center;
  font-family: var(--primary-font);
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  padding: 6px 8px;
  /* background: rgba(0, 0, 0, 0.45); */
  border-radius: 6px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.6)
  );
}
.flip {
  perspective: 1000px;
}

.flip .card {
  width: 100%;
  height: 350px;
  position: relative;
  transition: transform .7s;
  transform-style: preserve-3d;
  border: none;
}

.flip:hover .card {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

.front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .back {
  text-align: center;
  background: rgba(77, 175, 80, 1);
  border-radius: 6px;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
} */
.face.back>h4 {
    font-size: 22px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
    padding: 25px 0px;
}
.face.back>p {
   font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.5;
   padding-top: 40px;
    padding-bottom: 20px;
    font-family: var(--secondary-font);
}
.learn-more {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  align-items: center;
  margin-top: auto;
      line-height: 1.5;
      padding-bottom: 50px;
      font-family: var(--secondary-font);
       transition: all 0.4s ease;
}
/* TEXT animation */
.learn-more .text {
  position: relative;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}

/* ICON animation */
.learn-more-icon {
  width: 20px;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}
.learn-more  .arrow {
  transition: transform 0.3s ease;
  margin-left: 5px;
}
/* HOVER EFFECT */
.learn-more:hover .text {
  transform: translateY(-3px);
}

.learn-more:hover .learn-more-icon {
  transform: translateX(2px) rotate(-19deg);
}

.learn-more:hover::after {
  width: 100%;
}

.learn-more:hover {
  color: #fff;
}
img.learn-more-icon {
    width: 20px;
}
img.download-white-icon {
     width: 20px;
}
/* img.card-img-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
} */

/* ------------------- */
.back {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 6px;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  overflow: hidden;
}

/* Green to transparent gradient overlay */
.back::before {
  content: "";
  position: absolute;
  inset: 0;
  background:rgb(0 0 0 / 70%);/* SAME TRANSPARENT GREEN FULL CARD */
  z-index: 1;
}


/* Make sure back card text appears above overlay */
.back * {
  position: relative;
  z-index: 2;
}
/* ends */
/* Section Header */
.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.trending-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #000;
    font-family: var(--primary-font);
}

/* .view-all-btn {
    background-color: var(--secondary-color); 
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s ease;
} */

/* Button Base */
a.view-all-btn {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keep center always */
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    overflow: hidden;
    font-size: 12px;
    transition: all 0.4s ease;
}
a.view-all-btn:hover{
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
 color: #fff;
} 
/* Force icon size + color */
.view-all-btn i {
    font-size: 14px;
    color: #fff !important;
    line-height: 1;
}

/* Text wrapper */
.text-wrap {
    position: relative;
    height: 18px;
    overflow: hidden;
}

/* Arrow wrapper FIXED SIZE */
.arrow-wrap {
    position: relative;
    width: 18px;   /* fixed width */
    height: 18px;  /* fixed height */
    overflow: hidden;
    margin-top: 3px;
}
.arrow,
.arrow-hover {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s ease;
    font-size: 14px;
    color: #fff;
}
/* Base layers */
.text,
.arrow {
    display: block;
    transition: transform 0.5s cubic-bezier(.77,0,.18,1);
    color: #fff !important;
}

/* Hover layers exactly overlap */
.text-hover,
.arrow-hover {
    position: absolute;
    top: 100%;
    left: 0;
    color: #fff;
}

/* Default diagonal arrow */
.arrow {
    transform: rotate(-45deg);
    opacity: 1;
}

/* Hover straight arrow */
.arrow-hover {
    transform: rotate(0deg);
      opacity: 0;
}

/* Flip text */
.view-all-btn:hover .text {
    transform: translateY(-100%);
}

.view-all-btn:hover .text-hover {
    transform: translateY(-100%);
}

/* Flip arrow */
.view-all-btn:hover .arrow {
    transform: translateY(-100%) rotate(-45deg);
    opacity: 0; 
}

.view-all-btn:hover .arrow-hover {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
    top: 13px;
}
.progress-line {
    /* width: 100%; */
    height: 4px;
    /* background-color: #ddd;  */
    position: relative;
    margin-bottom: 20px;
}

/* Filled Progress using Image */
.progress-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Progress width */
    height: 6px;
    background-image: url("https://staging.techversions.com/assets/Icon-Section-Borders.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.progress-line-video {
    height: 4px;
    /* background-color: #ddd;  */
    position: relative;
    margin-bottom: 20px;
}

/* Filled Progress using Image */
.progress-line-video::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 93%; /* Progress width */
    height: 6px;
    background-image: url("https://staging.techversions.com/assets/Icon-Section-Borders.png");
    background-repeat: no-repeat;
    background-size: cover;
}
/* Cards Grid */
.card-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0;
    margin-top: 35px;
}

/* Card Style */
.thumbnail-card {
    /* background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
    transition: transform 0.3s ease;
    /* text-align: center; */
    position: relative; /* required for badge */
}

.thumbnail-card:hover {
    transform: translateY(-6px);
}

/* Card Image */
.thumbnail-card img {
    width: 95%;
    height: 240px;
    object-fit: cover;
    /* border-radius: 10px; */
    /* margin-bottom: 10px; */
}

/* Card Text */
.thumbnail-card h3>a {
    font-size: 20px;
    text-decoration: none;
    color: var(--category-subheading-tag);
    font-weight: 700;
    margin-bottom: 6px;
      font-family: var(--primary-font);
    line-height: 1.5;
}

.thumbnail-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}

/* Sponsored Badge (for 1st card only) */
.sponsored-badge {
    position: absolute;
    background: var(--primary-color); /* green */
    color: #fff;
   font-size: 12px;
    font-weight: 400;
    padding: 5px 10px;
    text-transform: uppercase;
    z-index: 10;
        border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
        font-family: var(--secondary-font);
}

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

@media (max-width: 767px) {
      .main-nav .nav-menu {
        display: flex;
        gap: 30px !important;
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }
    .header-icons {
    display: none !important;
}
    .schedule-grid {
   grid-template-columns: 1fr !important;
    }
    .feature-card {
    height: auto !important;
    margin-right: 0PX !important;
    }
        .footer-widgets .widget li a {
        font-size: 16px !important;
    }
    .footer-widgets .widget h2 {
        font-size: 22px;
    }
        .widget.widget-menu-3 ul li {
        width: 100% !important;
    }
    .footer-container {
    display: block !important;
    }
    .footer-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 18px;
    }
    .lead-section {
    padding: 70px 30px 100px 30px !important;
    }
    .lead-section h2 {
    font-size: 27px !important;
    line-height: 1.5 !important;
    }
    #footer {
        margin-top: 0px !important;
    }
    .videos-grid {
     grid-template-columns: 1fr !important;
    }
    .progress-line-video::after {
    width: 100%;
    }
  .ai-top-grid {
    grid-template-columns: auto !important;
  }
  .ai-section {
    padding: 30px !important;
  }
  .ai-bottom-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
img.scroll-down {
    left: 45% !important;
}
.nav-container {
    margin: 0px 12px !important;
}
#menu-item-112649 > .sub-menu {
    top: 270px !important;
    right: -24px !important;
    left: 150px !important;
}

form#form178 {
    width: 100% !important;
}
#form178 > div.fm-header-bg > div > div > div.fm-header-title {
    font-size: 26px !important;
}
div#\31 78form_view1 .newsletter_popup .button-submit {
    padding: 0 10px !important;
    width: 154px !important;
    max-width: 100% !important;
}
.home .nav-container {
     margin: 3px 20px !important;
    
}
    .article-info h3>a {
    font-size: 20px !important;
    }
    .main-article img {
    width: 100% !important;
    }
    .card-wrapper {
        grid-template-columns: 1fr;
    }
    img.scroll-down
    {
    bottom: 20px !important;
    }

}
/* Category Tag */
.category-tag {
    font-size: 12px;
    font-weight: 400;
    color: var(--category-tag-font);
    text-transform: uppercase;
    display: flex;
    margin-top: 10px;
    margin-bottom: 6px;
    margin-left: 2px;
      font-family: var(--primary-font);
}

/* Meta Info */
.post-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    font-size: 10px;
    font-weight: 400;
    color: var(--category-tag-font);
    margin-top: 10px;
    text-transform: uppercase;
    gap: 5px;
        font-family: var(--secondary-font);
}

.post-meta i {
    margin-right: 5px;
    font-size: 0.85rem;
}

.section-three {
    padding: 100px 50px 50px 50px;
    /* margin-bottom: 40px; */
}
/* ---------- */


/* section two style */

.trending-header-two {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.trending-header-two h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #000;
      font-family: var(--primary-font);
}

/* .view-all-btn {
    background-color: var(--primary-color); 
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s ease;
}

.view-all-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}


.view-all-btn:hover {
    background-color: var(--secondary-color); 
}

.view-all-btn:hover i {
    transform: translate(3px, -3px);
} */

/* Cards Grid */
.card-wrapper-two {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
margin-top: 40px;
}

/* Card Style */
.thumbnail-card-two {
    /* background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
    transition: transform 0.3s ease;
    /* text-align: center; */
    position: relative; /* required for badge */
}

.thumbnail-card-two:hover {
    transform: translateY(-6px);
}

/* Card Image */
.thumbnail-card-two img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Card Text */
.thumbnail-card-two h3>a {
    font-size: 20px;
    color: var(--category-subheading-tag);
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.5;
    text-decoration: none;
      font-family: var(--primary-font);
}

.thumbnail-card-two p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
        font-family: var(--secondary-font);
}

/* Sponsored Badge (for 1st card only) */
.sponsored-badge-two {
    position: absolute;
    background: var(--primary-color); /* green */
    color: #fff;
   font-size: 12px;
    font-weight: 400;
    padding: 5px 10px;
    text-transform: uppercase;
    z-index: 10;
        border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
        font-family: var(--secondary-font);
}

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

@media (max-width: 600px) {
    .card-wrapper-two {
        grid-template-columns: 1fr;
    }
}
/* Category Tag */
span.category-tag-two>a {
    font-size: 12px;
    font-weight: 400;
    color: var(--category-tag-font);
    text-transform: uppercase;
      font-family: var(--primary-font);
    display: flex;
    /* margin-top: -6px; */
    margin-bottom: 6px;
    margin-left: 2px;
    text-decoration: none;
}
section#next-section {
       margin-left: -45px;
    margin-right: -46px;
}
/* Meta Info */
.post-meta-two {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 400;
    color: var(--category-tag-font);
    margin-top: 10px;
    text-transform: uppercase;
        font-family: var(--secondary-font);
}

.post-meta-two i {
    margin-right: 5px;
    font-size: 0.85rem;
}
.section-four {
    padding: 50px;
    margin-bottom: 30px;
}
/* ------- */
hr.solid {
  border-top: 2px solid #DFDFDF;
  width: 100%;
  max-width: 1140px; /* Same as Bootstrap container */
  margin: 20px auto; /* center inside page */
}

@keyframes slides {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  margin-top:30px;
  white-space: nowrap;
  position: relative;
}

.logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 250px;
  height: 100%;
  z-index: 2;
}

.logos:before {
  left: 0;
  /* background: linear-gradient(to left, rgba(255,255,255,0), rgb(255, 255, 255)); */
}

.logos:after {
  right: 0;
  /* background: linear-gradient(to right, rgba(255,255,255,0), rgb(255, 255, 255)); */
}

.logo_items {
  display: inline-block;
  animation: 35s slides infinite linear;
  gap: 60px;
}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img{
  margin-right: 60px;   /* spacing between images */
  height: 40px;         /* adjust your height here */
  width: auto;
}



@keyframes slides {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logos {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  padding: 0px 0 0px 0px;
}

/* Left + Right Fade Masks */
.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to right, white 10%, rgba(255,255,255,0));
}

.logos:after {
  right: 0;
  background: linear-gradient(to left, white 10%, rgba(255,255,255,0));
}

.logo_items {
  display: flex;
  align-items: center;
  animation: slides 20s linear infinite;
}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img {
  margin-right: 60px;
  height: 60px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity .2s;
}

.logo_items img:hover {
  opacity: 1;
}
h2.trusted_header {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 20px;
    font-family: var(--primary-font);
}
p.trusted_para {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
    font-family: var(--secondary-font);
    color: var(--accent-color-text);
}

/* ---------- */
.feature-card {
  background: #fff;
  padding: 45px 30px;
  height: 350px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0,0,0,0.08);
  transition: 0.3s;
      margin-right: 30px;
}

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

.feature-icon {
  font-size: 40px;
  color: #20c997; /* Green Icon */
  margin-bottom: 15px;
}

.feature-card h4 {
  font-size: 24px;
  color: #3C4C41;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
     font-family: var(--primary-font);
}

.feature-card p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: #161C2D;
     font-family: var(--secondary-font);
}
.section_five {
    position: relative;
    background: url(https://staging.techversions.com/assets/B2B_bg.png) center / cover no-repeat;
    padding: 30px;
}
.section_five::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgb(0 0 0 / 81%); */
    z-index: 1;
}
/* Make content above overlay */
.section_five > * {
    position: relative;
    z-index: 2;
}
h1.b2b_header {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
       font-family: var(--primary-font);
}
p.b2b_para {
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    line-height: 1.5;
    padding-bottom: 20px;
    color: #ccccccdb;
    font-family: var(--secondary-font);
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 40px;
  /* margin-top: 30px; */
}

.schedule-item {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
  align-items: flex-start;
}

.schedule-item .icon {
  width: 35px;
  height: 35px;
  min-width: 35px;
  background: var(--secondary-color);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

.schedule-item h4 {
  margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
       font-family: var(--primary-font);
    line-height: 1.5;
}

.schedule-item p {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
       font-family: var(--secondary-font);
    color: #ccccccdb;
}

/* Mobile responsive */
@media (min-width: 768px) and (max-width: 1280px){
.kb-hero-container {
margin: 0 25px !important;
}
.kb-hero-right {
    display: grid !important;
    margin-top: 30px !important;
}
.resource-content-container {
    margin: 70px 28px 0px!important;
}
.footer-bottom, .footer-bottom a, .copyright, .copyright a {
    margin-top: -30px !important;
}
.container-related-res {
    margin: 0 18px 50px !important;
}
.Sponsored_name {
    text-align: justify !important;
}
.browse-section {
padding: 30px !important;
}
.browse-grid {
    grid-template-columns: repeat(1, 1fr) !important;
}
.browse-header {
    display: block !important;
}
    .kb-title {
    font-size: 40px !important;
            margin-top: 44px !important;
    }
.nav-container {
    margin: 0px 30px !important;
}
.tv-container {
    margin: 0 23px !important;
}
    .tv-tabs-container {
    margin: 0 30px !important;
}
.tv-consult-container {
    /* max-width: 1200px; */
    margin: 0 30px !important;
}
img.scroll-down {
    left: 48% !important;
}
.feature-card {
    padding: 20px 15px !important;
    height: 390px !important;
    margin-right: 0 !important;
}
.section_seven {
    padding: 50px 100px !important;
}
.sub-articles {
    display: grid;
    grid-template-columns: 1fr !important;
}
.sub-card {
    display: flex !important;
    flex-direction: row !important;
}
  .schedule-grid {
    grid-template-columns: 1fr;
  }
  form#form178 {
    width: 90% !important;
    }
      .footer-widgets .widget li a {
        font-size: 16px !important;
    }
    .footer-widgets .widget h2 {
        font-size: 22px;
    }
        .widget.widget-menu-3 ul li {
        width: 100% !important;
    }
    /* .footer-container {
    display: block !important;
    } */
    .footer-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    }
     #footer .row {
        display: flex;
        flex-wrap: wrap;
    }

    #footer .col-md-2,
    #footer .col-md-3 {
        width: 50%;          /* 2 columns per row */
        margin-bottom: 30px;
        text-align: left;
    }

    /* Last footer column center aligned */
   

    .footer-bottom {
        text-align: center;
        padding-top: 20px;
    }

    .footer-menu .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-menu .nav li {
        margin: 5px 10px;
    }
  .row.right_key.g-4 {
    margin-left: 0px !important;
}
}
p.schedule-footer {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    padding: 30px 0px;
       font-family: var(--secondary-font);
       color: #fff;
}
p.schedule-footer a {
    color: var(--primary-color);
    text-decoration: none;
       font-family: var(--secondary-font);
}
.schedule-list.container {
    padding: 100px 0px 10px 0px;
}
/* -------------- */
.hero-card {
  max-height: 320px;
    position: relative;
    border-radius: 1rem; /* matches rounded-4 */
    overflow: hidden;
    z-index: 1;
}

 
.hero-card img {
  object-fit: cover;
   transition: transform 0.5s ease;
}
.hero-card:hover img {
    transform: scale(1.1);
}
 
.icon-card {
  padding: 5px 0px 40px 0px;
  width: 280px;
  /* background-color: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s ease, transform 0.2s ease; */
}
/*  
.icon-card:hover {
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
} */
 
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: #ecfdf3;
  color: #16a34a;
  font-size: 18px;
}
 
.link-success {
  color: #16a34a;
}
 
.link-success:hover {
  color: #15803d;
}
 /* ----ends---------- */
/* section 6 css starts */
.section_six {
    padding: 50px 50px;
    margin-bottom: 30px;
}
.resources-section {
    margin-top: 40px;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    color: #183354;
    line-height: 1.5;
       font-family: var(--primary-font);
    margin-bottom: 15px;
}

/* Card Layout */
.resource-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.resource-card {
    background: #f4f6f9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.08);
    position: relative;
    transition: transform .3s ease;
      /* padding-bottom: 80px;   */
          border: 1px solid rgba(0, 0, 0, 0.11);
      
}

.resource-card:hover {
    transform: translateY(-6px);
}

/* Badge */
.resource-badge {
    position: absolute;
       font-family: var(--secondary-font);
    /* top: 12px; */
    /* left: 12px; */
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    /* border-radius: 4px; */
    text-transform: uppercase;
    z-index: 2;
}
.webinar { background: #3db575;
opacity: 0.8; }
.res-type {
    background: rgba(18, 165, 85, 1);
    opacity: 0.8;

}
/* .guide { background: #97979733; }
.report { background: #97979733; } */


/* Top Part */
.card-top {
    background: #F0F3FF; /* change based on category if needed */
    /* padding: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-top img {
   width: 100%;
    max-height: 100%;
    height: 250px;
    object-fit: cover;
}

/* Bottom Part */
.card-bottom {
       background: #f4f6f9;
    padding: 30px;
}
.card-bottom h3>a{
    font-size: 20px;
      position: relative;
      text-decoration: none;
    font-weight: 700;
    line-height: 1.5;
       font-family: var(--primary-font);
    margin-bottom: 15px;
    color: rgba(60, 76, 65, 1);
}
.card-bottom h3>a::before {
    content: "";
    position: absolute;
    left: -30px;      /* aligns with card border */
    top: 0;
    width: 3px;
    height: 100%;     /* AUTO — depends on title */
    background-color: var(--primary-color);
    border-radius: 2px;
}
.card-bottom p {
    color: rgba(60, 76, 65, 1);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 0px;
       font-family: var(--secondary-font);
}
.card-bottom .btn-div {
  /* text-align: center; 
  margin-top: 10px;
  margin-bottom: 30px; */
    position: absolute;
    bottom: 60px;                      /* distance from bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    margin: 0 !important;
}
/* Button */
a.btn-download {
    position: relative;
    overflow: hidden;
    background: #4DAF50;
    color: #fff;
    padding: 8px 50px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: 0.4s ease;
    display: inline-block;
    font-family: var(--secondary-font);
    animation: buttonBounce 2s ease-out 1s both;
}

/* Hover background gradient */
a.btn-download:hover {
       background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    color: #fff;
}

/* ✨ Shine Layer */
a.btn-download::after {
    content: "";
    position: absolute;
    top: 0;
    left: -156%;
    width: 150%;
    height: 100%;
    background: rgb(255 255 255 / 7%);
    /* transform: skewX(-6deg); */
    transition: 0.5s ease;
}

/* Hover → slide shine layer */
a.btn-download:hover::after {
    left: 150%;          /* swipe across to the right */
}

/* Active Click */
a.btn-download:active {
    transform: translateY(-1px) scale(1.02);
}

/* Bounce animation */
@keyframes buttonBounce {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Responsive */
@media(max-width: 992px) {
    .resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 600px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom, .footer-bottom a, .copyright, .copyright a {
    margin-top: -30px !important;
}
}
/* ------ends---------- */
/* ----section 7 css starts-------- */
.section_seven {
    padding: 50px 140px;
    margin-bottom: 30px;
}
h1.key_verticals.mb-1 {
    font-size: 36px;
    font-weight: 600;
    color: #4D4D4D;
    line-height: 1.5;
       font-family: var(--primary-font);
    padding-bottom: 20px !important;
}
h4.sub_heading>span {
    color: var(--primary-color);
       font-family: var(--primary-font);
}
h4.sub_heading>span:hover {
    transform: scale(1.05);   
    /* font-size: 25px;   */
    font-weight: 700;       
}
h4.sub_heading {
    color: var(--accent-color);
       font-family: var(--primary-font);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    padding-bottom: 20px;
     display: inline-block; 
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
p.key_para.mb-4 {
    color: #18191F;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    padding-top: 20px;
    padding-bottom: 40px;
       font-family: var(--secondary-font);
}
h5.key_title.mb-2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
       font-family: var(--primary-font);
    color: #3C4C41;
}

p.key_para.mb-3 {
    color: #161C2D;
    font-size: 16px;
    font-weight: 300;
       font-family: var(--secondary-font);
    line-height: 1.5;
}

a.read_more.text-decoration-none {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-color);
       font-family: var(--secondary-font);
}
.icon.mb-2 {
    display: flex;
}
img.feature-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-right: 10px;
    display: inline-block;
}
img.feature-img2 {
    width: 60px;
    height: auto;
    object-fit: contain;
    margin-right: 10px;
    display: inline-block;
    margin-bottom: 20px;
}
img.feature-img-calender {
    width: 20px !important;
    height: 12px !important;
    object-fit: contain !important;
    /* margin-right: 10px; */
    /* vertical-align: unset; */
    display: inline-block;
    margin-top: -3px;
}
img.feature-img-calender-two {
    width: 20px !important;
    height: 12px !important;
    object-fit: contain !important;
    /* margin-right: 10px; */
    /* vertical-align: unset; */
    display: inline-block;
    margin-top: 6px;
}
/* ------ends----------- */
/* -------newsletter section css-------- */
.newsletter-section {
    position: relative;
    background: url('https://staging.techversions.com/assets/paralex.jpg') center/cover no-repeat;
    padding: 60px 20px;
    text-align: center;
    color: #fff;
}

/* Dark overlay */
.newsletter-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgb(0 0 0 / 81%);
    z-index: 1;
}

/* Content above overlay */
.newsletter-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: auto;
}

.newsletter-content h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 15px;
       font-family: var(--primary-font);
}

.newsletter-content p {
    font-size: 16px;
       font-family: var(--secondary-font);
    font-weight: 300;
    line-height: 1.5;
    /* margin-bottom: 30px; */
    color: #bcbcbc;
}
.newsletter-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.newsletter-icon i {
    color: #2D2D2D;
    font-size: 32px;
}
/* Email input box style */
.newsletter-form {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: auto;
}

.newsletter-form input {
    width: 100%;
    padding: 13px 140px 15px 20px; /* space for button */
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-family: var(--secondary-font);
    height: 46px;
}

button.subscribe-btn {
    font-family: var(--secondary-font);
    position: absolute;
    right: 0px;
    top: 28%;
    width: 40%;
    transform: translateY(-50%);
    padding: 12px 25px;
    border: none;
    height: 46px;
    border-radius: 8px;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    transition: 0.3s;
}

button.subscribe-btn:hover{
   background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
}


/* Pop-out hover effect for Privacy Policy link */
.small-text a {
    color: #bcbcbc;
    font-size: 16px !important;
    font-weight: 300;
    text-decoration: underline;
    font-family: var(--secondary-font) !important;
    display: inline-block;     /* necessary for transform */
    transition: transform 0.3s ease, 
                text-shadow 0.3s ease,
                color 0.3s ease;
}

.small-text a:hover {
    /* transform: scale(1.15) translateY(-3px);
    text-shadow: 0 5px 12px rgba(255, 255, 255, 0.6); */
    text-decoration: underline;
    color: #bcbcbc; /* brightens on hover */
}


/* Responsive */
@media(max-width: 600px) {
    .newsletter-form {
        flex-direction: column;
    }
    .newsletter-form input {
        width: 100%;
    }
    .newsletter-form button {
        width: 50%;
    }
}
/* -----ends------- */
/* case studies section css */
.industry-section {
    width: 100%;
    padding: 50px;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 40px;
    align-items: flex-start;
}
.main-article {
    display: grid;
        overflow: hidden;
    gap: 10px;
    margin-bottom:40px;
    margin-top: 40px;
    grid-template-columns: 40% 60%;
}

.main-article img {
   width: 460px;
    max-width: 100%;
    max-height: 100%;
    /* border-radius: 8px; */
    height: 250px;
    object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-article:hover img {
    transform: scale(1.08) rotate(1deg);
}
.article-info {
    padding-left: 15px;
        margin-top: 20px;
}
.article-info h3>a {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #183354;
       font-family: var(--primary-font);
    text-decoration: none;
}

.article-info .meta {
    font-size: 13px;
    margin: 10px 0;
    font-weight: 400;
    color: #6D757F;
    text-transform: uppercase;
       font-family: var(--secondary-font);margin-left: -3px;
}
p.excerpt {
    font-size: 16px;
    font-weight: 400;
    color: #545E69;
    line-height: 1.5;
       font-family: var(--secondary-font);
}
.sub-articles {
   display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-left: -6px;
         overflow: visible;
}

.sub-card {
   display: flex;
    gap: 10px;
    flex-direction: row-reverse;
    margin-left: 10px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.sub-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    padding: 10px 10px 0px;
    border: 1px solid #cccccc3d;
}
.sub-card img {
    width: 100px;
    height: 100px;
    display: block;
    /* border-radius: 6px; */
    object-fit: cover;
    max-height: 100%;
    max-width: 100%;
       transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tag {
    color: #6D757F;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
       font-family: var(--secondary-font);

}
.sub-title {
    font-size: 18px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 4px;
    color: #183354;
       font-family: var(--primary-font);
}
.sub-title>a {
    font-size: 16px;
    text-decoration: none;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 4px;
    color: #183354;
       font-family: var(--secondary-font);
}
.meta.small {
    font-size: 10px;
    color: #6D757F;
       font-family: var(--secondary-font);
    padding-top: 6px;
    text-transform: uppercase;
}
.sidebar {
    position: relative;
    padding-left: 20px; /* spacing from vertical line */
    border-left:1px solid #8f8c8c3d; /* Vertical Line */
}
.case-card {
    padding-bottom: 15px;
    border-bottom: 1px solid #8f8c8c3d;
}

.case-card:last-child {
    border-bottom: none;
}
/* Right Sidebar */
.sidebar .case-card {
    margin-bottom: 15px;
}

/* Only image container needs height */
.sidebar .case-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
.cards-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers cards horizontally */
    gap: 20px; /* Optional spacing between cards */
}

.sidebar img {
      width: 100%;
    height: auto;
    /* display: block; */
    /* border-radius: 6px; */
    object-fit: cover;
}
.sidebar img :hover {
    transform: scale(1.08) rotate(1deg);
}
/* Ad Banner */
.ad-banner {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.ad-banner img {
    width: 80%;
    /* border-radius: 10px; */
}

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

.progress-line-five {
    width: 100%;
    height: 4px;
    background-color: #ddd; /* Light Base */
    position: relative;
    margin-bottom: 20px;
}

/* 10% Filled Indicator */
.progress-line-five::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10%; /* show 10% width */
    height: 4px;
    background-color: #F4796C;
}
aside.sidebar {
    margin-top: 4px;
    height: 100%;
}
p.tag.small {
    margin-top: 15px;
    margin-bottom: 10px;
}
p.tag.small>a{
    color: #A2ABB7;
    text-decoration: none;
    font-size: 13px;
        margin-top: 15px;
    margin-bottom: 10px;
       font-family: var(--secondary-font);
}
.sub-title-one>a {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 4px;
    color: #3C4C41;
    text-transform: inherit;
    text-decoration: none;
       font-family: var(--secondary-font);
}
.sidebar hr:nth-of-type(1) {
    display: none;
}

/* --------industry section css ends------- */
.ai-section {
    padding: 50px;
    width: 100%;
}
.section-underline {
    width: 100%;
    height: 4px;
    background-color: #ddd; /* Light Base */
    position: relative;
    margin-bottom: 20px;
}
.section-underline::after  {
content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10%; /* show 10% width */
    height: 4px;
    background-color: #F4796C;
}
.ai-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 30px;
}

/* Left Content */
.ai-top-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 35px;
}

.ai-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.ai-card {
    background: #fff;
    border-radius: 8px;
    /* padding-bottom: 10px; */
    overflow: hidden;
    position: relative;
}

.ai-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    /* border-radius: 6px; */
}



.ai-card .meta {
    font-size: 10px;
}

.badge.sponsored {
   position: absolute;
    top: 0px;
    left: 0px;
    background: var(--primary-color);
    color: #fff;
   padding: 5px 10px;
    font-size: 12px;
    font-weight: 400;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
}

/* Sidebar */
.progress-line-six {
    width: 100%;
    height: 4px;
    background-color: #ddd; /* Light Base */
    position: relative;
    margin-bottom: 20px;
}

/* 10% Filled Indicator */
.progress-line-six::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10%; /* show 10% width */
    height: 4px;
    background-color: #F4796C;
}
.ai-sidebar {
    padding-left: 20px;
    margin-top: 4px;
    /* border-left: 2px solid #e4e4e4; */
}

.pod-card img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 0px !important;
}

/* .tag {
    font-size: 11px;
    font-weight: 700;
    color: #183354;
    text-transform: uppercase;
    margin-bottom: 4px;
} */

.meta.small {
    font-size: 10px;
    color: #777;
}

.ai-sidebar hr {
    border: none;
    border-top: 1px solid #8f8c8c;
    margin: 12px 0;
}

/* Responsive */
@media(max-width: 992px) {
    .ai-container {
        grid-template-columns: 1fr;
    }
    .ai-sidebar {
        border-left: none;
        padding-left: 0;
    }
}
/* Overlay style for left cards */
.ai-card.large {
    position: relative;
    color: #fff;
}

.ai-card.large img {
    height: 300px;
    object-fit: cover;
    /* filter: brightness(40%);  */
}


.ai-card.large h3>a {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.5;
    text-decoration: none;
    color: #fff;
       font-family: var(--primary-font);
}

.ai-card.large .meta {
        color: #fff;
    font-weight: 300;
    text-transform: uppercase;
       font-family: var(--secondary-font);
}

.badge.sponsored {
    z-index: 2;
}

.ai-card.large {
    position: relative;
    color: #fff;
    overflow: hidden;
}

/* Dark overlay across the entire image */
.meta {
    display: flex;
    align-items: center;
    gap: 6px;   /* space between icon and date */
}

.ai-card.large::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45); /* Adjust darkness */
    z-index: 1;
}

/* Ensure image stays behind overlay */
.ai-card.large img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    display: block;
        transition: transform 0.5s ease;
}
.ai-card.large:hover img {
    transform: scale(1.12);
    filter: brightness(1.05);
}
/* Ensure text stays above overlay */
.ai-card.large .overlay-content {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    padding: 0px 10px;
    z-index: 2;
}

.ai-post-meta>span {
 font-size: 10px;
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
    font-family: var(--secondary-font);
}
/* Small cards overlay */
.ai-card.small {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
img.avatar.avatar-40.photo.author-avatar.me-2 {
    width: 16px;
    height: 16px;
    border-radius: 50%;
  object-fit: cover;
}
img.avatar.avatar-40.photo.author-avatar-top.me-2 {
    width: 16px;
    height: 16px;
    border-radius: 50%;
  object-fit: cover;
  margin-bottom: 4px !important;
}
a.author-link {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 400;
    color: var(--category-tag-font);
    margin-top: 5px;
    text-transform: uppercase;
    font-family: var(--secondary-font);
    text-decoration: none;
}
a.author-link:hover{
    color: var(--category-tag-font);
}

a.author-link-ai{
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 400;
    color: #e5e5e5;
    margin-top: 5px;
    text-transform: uppercase;
    font-family: var(--secondary-font);
    text-decoration: none;
}
a.author-link-ai:hover{
    color: #e5e5e5;
}

/* Dark overlay layer */
.ai-card.small::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* adjust darkness */
    z-index: 1;
    transition: 0.3s ease;
}

.ai-card.small img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: 0.4s ease-in-out;
}

/* Content stays above overlay */
.ai-card.small .overlay-content {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    color: #fff;
    padding: 0 10px;
    z-index: 2;
}

/* Hover zoom effect */
.ai-card.small:hover img {
    transform: scale(1.05);
}

/* Make icon + date in one line */
.ai-card.small .meta {
    font-size: 10px;
    color: #e5e5e5;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-card-link {
    display: block;
    text-decoration: none;
    color: #fff;
}

.ai-card-link h3 {
   font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.5;
    text-decoration: none;
    color: #fff;
    font-family: var(--primary-font);
}

.ai-card-link:hover h3 {
    color:#fff;
}
.ai-card.small h4>a {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.5;
       font-family: var(--primary-font);
       color: #FFF;
       text-decoration: none;

}

.ai-card.small .meta {
    font-size: 12px;
    color: #e5e5e5;
    text-transform: uppercase;
       font-family: var(--secondary-font);
}

.ai-card.small:hover img {
    transform: scale(1.05);
    transition: 0.4s ease-in-out;
}
/* -------------- */
.videos-section {
    padding: 50px;
    color: #fff;
    background: url("https://staging.techversions.com/assets/video_bg_image.jpg") no-repeat center center/cover;
}
.video-overlay {
    position: absolute;
    top: 0;
     inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 69%);
    z-index: 2;
    pointer-events: none;
}
/* Header */
.videos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.videos-header h2 {
    font-size: 22px;
    font-weight: 700;
       font-family: var(--primary-font);
}

.view-all {
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
       font-family: var(--secondary-font);
}
.view-all:hover {
    color: #fff;
}


/* Grid */
.videos-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    margin-top: 35px;
}

/* Thumbnails */
.video-thumb-one {
    position: relative;
      cursor: pointer;
}

.video-thumb-one img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 6px;
    /* filter: brightness(70%); */
}

.video-thumb-one.small img {
    width: 130px;
    height: 90px;
}

.video-thumb {
    position: relative;
    height: 100px;
      cursor: pointer;
}

.video-thumb img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 6px;
    /* filter: brightness(70%); */
}

.video-thumb.small img {
    width: 130px;
    height: 90px;
}

.play-btn {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    top: 50%;
    left: 50%;
   transform: translate(-50%, -50%) scale(1);
    padding: 15px;
    border-radius: 50%;
    z-index: 3;
    transition: transform 0.3s ease, background 0.3s ease;
}
.video-thumb:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.15); /* pops up */
}
.video-thumb-one:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.15); /* pops up */
}
.feature-img-play-btn {
    width: 60px;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Icon also grows a little */
.video-thumb-one:hover .feature-img-play-btn {
    transform: scale(1.1);
}
.video-thumb:hover .feature-img-play-btn {
    transform: scale(1.1);
}
.play-btn.small {
    padding: 6px;
    font-size: 10px;
}
img.feature-img-play-btn {
    width: 40px;
    height: 40px;
    background: transparent !important;
    /* object-fit: cover; */
    /* filter: brightness(-16%); */
}
/* Right list structure */
.video-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.video-small {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
iframe.right_video_img {
    width: 180px;
    /* max-width: 100%; */
    height: 100px;
    max-height: 100%;
}
img.btn-icon {
    width: 20px;
}
/* Tags */
.tag-line {
    background: #6f808b;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    padding: 4px 7px;
    border-radius: 4px;
    margin: 10px 0 5px;
    display: inline-block;
    font-weight: 300;
       font-family: var(--secondary-font);
}

.tag-line.gray {
    background: #374955;
    color: #fff;
       font-family: var(--secondary-font);
}

/* Titles */
h3.video-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 6px;
       font-family: var(--primary-font);
}

/* Meta Info */
.video-meta {
    font-size: 13px;
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
       font-family: var(--secondary-font);
}

.video-meta i {
    margin: 0 4px;
       font-family: var(--secondary-font);
}
h4.video-small-text {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
       font-family: var(--primary-font);
}
@media(max-width: 768px) {
    .footer-bottom, .footer-bottom a, .copyright, .copyright a {
    margin-top: -30px !important;
}
    .sidebar {
        border-left: none;
        padding-left: 0;
    }
    .kb-hero-section {
    padding: 50px 20px !important;
}
.kb-hero {
    padding: 50px 20px !important;
}
.fm-error, .fm-not-filled {
    margin-left: 0 !important;
}
h1.tv-service-heading {
    font-size: 34px;
}
    .video-small {
        flex-direction: column;
    }
iframe.right_video_img {
    width: 100%;
}
    .video-thumb {
        width: 100%;
        height:auto;
    }
     .video-thumb-one {
        width: 100%;
        height:auto;
    }
    .kb-search-box button {
    width: 45% !important;
    }
    .blog-img-wrap {
    width: 100% !important;
}
.blog-main {
    padding: 0 30px !important;
}
.search-blog-card {
border-bottom: 1px solid #ddd;
    margin-bottom: 20px !important;
}
.blog-content p {
    margin-bottom: 20px !important;
}
}

/* ---------------------- */

/* Upcoming Events Section */
.events-section {
    text-align: center;
    padding: 60px 50px 100px 50px;
}

.events-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--accent-color);
       font-family: var(--primary-font);
}

span.arrow-unit {
    color: #fff;
}

/* 3 Column Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    max-width: 1260px;
    margin: 40px auto 0px;

}

/* Cards */
.event-card {
    position: relative;
    border-radius: 15px;
    background: transparent;
}

.event-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
}

.event-info {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: 85%;
    background: rgba(245, 247, 250, 1);
    border-radius: 12px;
    padding: 15px 10px;
    box-shadow: 0 6px 18px rgba(171, 190, 209, 0.4);
    text-align: center;
}

.event-info h4 {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    color: #717171;
    padding-bottom: 10px;
    line-height: 1.5;
       font-family: var(--primary-font);
}

.event-info span {
    display: block;
    margin-top: 8px;
    font-size: 20px;
    line-height: 1.5;
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--primary-color);
       font-family: var(--secondary-font);
}
@media (max-width: 992px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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



/* CTA Section */
.lead-section {
    background: rgba(245, 247, 250, 1);
    padding: 70px 50px 100px 50px;
    text-align: center;
}

.lead-section h2 {
    font-size: 40px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 20px;
    color: rgba(77, 77, 77, 1);
       font-family: var(--primary-font);
}

.lead-section p {
    font-size: 16px;
    max-width: 550px;
    margin: auto;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(113, 113, 113, 1);
    margin-bottom: 35px;
       font-family: var(--secondary-font);
}

a.cta-btn {
    background: var(--primary-color);
       font-family: var(--secondary-font);
    color: #fff;
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease;
    display: inline-block;
    animation: buttonBounce 2s ease-out 1s both;
}

a.cta-btn:hover {
      background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    color: #fff;
}
/* ✨ Shine Layer */
a.cta-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -156%;
    width: 150%;
    height: 100%;
    background: rgb(255 255 255 / 7%);
    /* transform: skewX(-6deg); */
    transition: 0.5s ease;
}

/* Hover → slide shine layer */
a.cta-btn:hover::after {
    left: 150%;          /* swipe across to the right */
}

/* Active Click */
a.cta-btn:active {
    transform: translateY(-1px) scale(1.02);
}

/* Responsive */
@media (max-width: 700px) {
    .events-grid {
        flex-direction: column;
        align-items: center;
    }
}
.footer-widgets .widget li a {
    text-decoration: none;
}
.footer-widgets {
        background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
            padding: 50px 50px 0px !important;
}
.footer-bottom{
background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
}
h1.newsletter-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
       font-family: var(--primary-font);
}
.footer-newsletter-form button {
    position: absolute;
    right: 5px;
    top: 20%;
    transform: translateY(-50%);
    padding: 1px 10px;
    border: none;
    border-radius: 8px;
    background: no-repeat;
    color: #2f3932;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.3s;
       font-family: var(--secondary-font);
}
.footer-newsletter-form {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: auto;
       font-family: var(--secondary-font);
}
.footer-newsletter-form input {
    width: 100%;
   padding: 8px 15px;
    font-size: 12px;
    color:#fff !important;
    border-radius: 5px;
    border: none;
       font-family: var(--secondary-font);
           background: #f0f3f547;
}
.footer-icons {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 15px;
    /* padding: 20px; */
    /* background-color: #111; */
}
img.send-arrow-icon {
    width: 20px;
    transition: transform 0.3s ease;
}

img.send-arrow-icon:hover {
    animation: arrowMove 0.6s infinite alternate;
}

@keyframes arrowMove {
    from { transform: translateX(0); }
    to { transform: translateX(6px); }
}
/* @keyframes arrowBounce {
    0% { transform: translateX(0); }
    50% { transform: translateX(8px); }
    100% { transform: translateX(0); }
} */
.footer-newsletter-form input::placeholder {
    color: #ffffff !important;
    opacity: 1;
}
.footer-container {
    display: flex;
    justify-content: space-between; /* left & right alignment */
    align-items: center;            /* vertical alignment */
        padding: 0px 90px 0px 50px;
        padding-bottom: 5px;
    
}

.footer-left {
    font-size: 14px;
    color: #cccccc;
    font-family: var(--secondary-font);
}
.footer-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.footer-btn img {
    width: 25px;
    height: 25px;
    transition: 0.3s;
}

.footer-btn:hover img {
    transform: scale(1.2);
    /* opacity: 0.8; */
     /* filter: brightness(0) invert(1);  */
}
/* .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
       padding: 0px 50px;
   
    color: #fff;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.footer-left {
    font-size: 14px;
       font-family: var(--secondary-font);
} */
hr.solid-footer {
    border-top: 1px solid #DFDFDF;
    width: 100%;
    max-width: 1420px;
    margin: 20px auto;
}
.key_left {
    /* width: 41%; */
    padding-right: 60px;
}
.footer-bottom-content {
    padding-top: 0px;
    margin-top: -15px;
}
.newsletter-box>p {
    line-height: 1.5;
       font-family: var(--secondary-font);
       font-weight: 300;
       font-size: 16px;
}
img.feature-img-time {
    width: 25px !important;
    height: 16px !important;
    object-fit: contain !important;
    /* margin-right: 10px; */
    /* vertical-align: unset; */
    display: inline-block;
    margin-top: -3px;

}
.row.right_key.g-4 {
    margin-left: 45px;
}
img.newsletter-img {
    width: 60px;
    height: auto;
    display: block;
}

@media (max-width: 576px) {
    .footer-bottom, .footer-bottom a, .copyright, .copyright a {
    margin-top: -30px !important;
}
    .flip {
    padding: 0 43px;
}
.row.right_key.g-4 {
    margin-left: 0;
}
.newsletter-content p {
    font-size: 16px !important;
}
.main-article {
    display: block !important;
}
/* .main-article img {
    width: 50% !important;
} */
.article-info {
    padding-left: 0px !important;
    padding-top: 10px;
}
.sub-articles {
    display: block;
}
.industry-section {
    padding: 40px !important;
}

    .cards-row {
        padding-left: 35px;
        padding-right: 35px;
    }
    .section-three {
    padding: 50px 35px;
    margin-bottom: 0 !important;
}
.trending-header h2 {
    font-size: 22px;
}
.section-four {
    padding: 50px 35px 50px 35px;
}
.feature-card {
    margin-bottom: 30px;
}
.schedule-list.container {
    padding: 50px 0px 10px 0px !important;
}
.section_six {
    padding: 50px 35px !important;
    margin-bottom: 0px !important;
}
.section_seven {
    padding: 50px 35px;
}
}


/* ---------------sub menu ---------------- */
 .sidebar-menu .navbar-nav {
	 float: none;
	 margin: 0;
	 padding-bottom: 0px;
	 /* width: 100%; */
 }
.nav-menu .sub-menu,
.nav-menu .sub-menu li {
    list-style: none !important;
}

 .sidebar-menu .navbar-nav>li {
	 margin: 10px 0;
	 display: block;
 }

 .sidebar-menu .navbar-nav>li:last-child {
	 margin-bottom: 0;
 }

 .sidebar-menu .navbar-nav>li>a {
	 padding: 5px 0;
	 display: block;
 }

 .tr-menu .navbar-nav li a {
	 font-size: 14px;
	 display: block;
	 font-weight: 600;
	 padding: 6px 3px;
	 color: #ffffff;
	 text-transform: capitalize;
 }

 .sidebar-menu .navbar-nav li a i {
	 color: #010101;
	 margin-right: 30px;
 }

 .tr-menu li.active>a,
 .tr-menu li.active a i,
 .tr-menu li a:hover,
 .tr-menu .navbar-nav li a:focus,
 .tr-menu li a:hover i,
 .tr-menu .navbar-nav>li>a:hover,
 .tr-menu .navbar-nav>li>a:focus,
 .tr-menu .navbar-nav>li.active>a:focus,
 .tr-menu .navbar-nav>li.active>a,
 .tr-menu .navbar-nav>.active>a:hover,
 .tr-menu .navbar-nav li a:focus i,
 .tr-menu li.active .sub-menu li a:hover,
 .tr-menu li.active .sub-menu li.active>a,
 .navbar-default .navbar-nav>.open>a,
 .navbar-default .navbar-nav>.open>a:focus,
 .navbar-default .navbar-nav>.open>a:hover,
 .tr-menu.menu-style-two .navbar-nav li a:hover,
 .tr-menu.menu-style-two .navbar-nav li.active,
 .tr-menu.menu-style-two .navbar-nav li.active>a,
 .tr-menu.sidebar-menu ul.sub-menu li a:hover,
 .tr-menu.sidebar-menu ul.sub-menu li.active>a {
	 /* color: #212529; */
	 background-color: transparent;
 }
.tr-menu .navbar-nav>li>a:hover,.tr-menu li a:hover,.tr-menu .navbar-nav>li.active>a, #navbarNav .current-menu-item a {
	background-color: #c4c4c47d;
    color: #fff !important;
}
 /* Navbar Toggle */

 .tr-menu .navbar-toggle {
	 border-color: #212529;
 }

 .tr-menu .navbar-toggle .icon-bar {
	 background-color: #212529;
 }

 .tr-menu .navbar-toggle:focus,
 .tr-menu .navbar-toggle:hover {
	 background-color: transparent;
 }

 .toggle-white.navbar-toggle {
	 border-color: #fff;
 }

 .toggle-white.navbar-toggle .icon-bar {
	 background-color: #fff;
 }

 .toggle-white.navbar-toggle:focus,
 .toggle-white.navbar-toggle:hover {
	 background-color: transparent;
 }

 .navbar-toggler {
	 position: absolute;
	 top: 15px !important;
	 right: 15px;
	 color: #ffffff;
	 padding: 6px 8px;
	 border: 1px solid #ffffff;
 }

 .menu-responsive .navbar-toggler {
	 top: 16px;
	 right: 0;
 }

 .sidebar-menu-two.menu-responsive .navbar-toggler {
	 right: 15px;
	 top: 22px;
 }

 .menu-responsive .navbar {
	 padding-left: 0;
	 padding-right: 0;
 }

 .menu-responsive .navbar-brand {
	 padding-left: 0;
 }

 .navbar-toggler-icon {
	 width: inherit;
	 height: inherit;
 }

 .tr-menu .feed  {
	 margin-right: 15px;
	 padding: 20px 0;
 }

 .tr-menu .navbar-default .feed li a i {
	 margin-right: 0;
 }

 .tr-menu .navbar-default .feed li a {
	 transition: inherit;
	 color: #696969;
 }


/*
 ul.sub-menu,
 ul.sub-menu .sub-menu-2 {
	 position: absolute;
	 top: 100%;
	 left: 0;
	 z-index: 1000;
	 min-width: 180px;
     width:max-content;
	 background-color: #fff;
	 opacity: 0;
	 -webkit-transform: rotateX(-75deg);
	 -moz-transform: rotateX(-75deg);
	 -ms-transform: rotateX(-75deg);
	 -o-transform: rotateX(-75deg);
	 transform: rotateX(-75deg);
	 visibility: hidden;
	 -webkit-transform-origin: 0% 0%;
	 -moz-transform-origin: 0% 0%;
	 -ms-transform-origin: 0% 0%;
	 -o-transform-origin: 0% 0%;
	 transform-origin: 0% 0%;
	 transition: transform 0.3s, opacity 0.3s;
	 -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	 -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	 -ms-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	 -o-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	 box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
 
 */
 
/* Enable submenu for WordPress class */

.nav-menu li.menu-item-has-children:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotateX(0deg) !important;
    display: block !important;
    padding: 0px 20px 10px;
}


.nav-menu > li > .sub-menu > li > .sub-menu { 
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotateX(0deg) !important;
    padding: 0px 20px 10px;
}

.home ul#menu-new-menu-type>li>a {
        color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--primary-font);
    font-size: 16px;
    position: relative;
    padding: 0.5rem 0;

}
ul#menu-new-menu-type>li>a {
        color: rgba(60, 76, 65, 1);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--primary-font);
    font-size: 16px;
    position: relative;
    padding: 0.5rem 0;

}
 .dropdown:hover .sub-menu,
 .topbar-right .user:hover .sub-menu,
 ul.sub-menu li:hover .sub-menu-2 {
	 opacity: 1;
	 visibility: visible;
	 display: block;
	 -webkit-transform: rotateX(0deg);
	 -moz-transform: rotateX(0deg);
	 -ms-transform: rotateX(0deg);
	 -o-transform: rotateX(0deg);
	 transform: rotateX(0deg);
 }

 ul.sub-menu .sub-menu-2 {
	 left: 100%;
	 top: 0;
 }

 .sub-menu i {
	 margin-right: 10px;
 }

 .tr-menu .sub-menu li a,
 .sub-menu li a {
	padding: 6px 0px;
    /* border-top: 1px solid #f0f3f5; */
    display: block;
    color: #696969;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--secondary-font);
 }

 .sub-menu li a:hover,
 .sub-menu li.active a,
 .sub-menu li a:focus {
	 /* background-color: #f6f8f9 !important; */
 }

 .sub-menu li a:hover,
 .topbar-right .user a:hover,
 .search-icon:hover,
 .sub-menu li a:focus,
 .topbar-right a:hover {
	 color:var(--primary-color);
     font-weight: 600;
 }

 .user .user-dropdown i {
	 margin-left: 10px;
 }

 .tr-menu.sidebar-menu .sub-menu {
	 min-width: 180px;
 }

span.arrow-unit>img {
    width: 10px;
    height: auto;
    margin-left: 6px;
}

span.arrow-unit-dn>img {
    /* width: 10px; */
    height: auto;
    margin-left: 6px;
}
ul.sub-menu {
    padding: 10px 20px 12px 20px !important;
}
/* Add down arrow for menu items having submenu */
.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
    transition: transform 0.3s ease;
        margin-bottom: 2px;
}
/* Rotate arrow on hover */
/* .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
} */


img.feature-img-user {
    width: 14px;
    /* height: 19px; */
}
img.feature-img-calender-video {
    width: 14px;
     margin-left: 6px;
}
li#menu-item-112674>a::after {
    display: none;
}
li#menu-item-112673>a::after {
    display: none;
}
li#menu-item-112675>a::after {
    display: none;
}

/* ---------------------home page css ends--------------- */

/* -----------solution page css starts ------------------ */
/* .logged-in .header {
    top: 79px;
} */
.subscribe-banner {
    background-color: rgba(18, 165, 85, 1); /* green */
    color: #ffffff;
    /* padding: 12px 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
     height: 48px; 
         width: 100%;
}

/* Text */
.subscribe-text {
   font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
    font-family: var(--secondary-font);
}

/* Button */
.subscribe-btn {
    background-color: #ffffff;
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--secondary-font);
     white-space: nowrap;
}

.subscribe-btn:hover {
    background-color: #e6f6ee;
    color: var(--secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .subscribe-banner {
        flex-direction: column;
        gap: 8px;
                display: flow;
        height: 50%;
        padding-bottom: 20px;
    }

    .subscribe-text {
        font-size: 13px;
          margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}
.tv-cards-row {
    display: flex;
    flex-wrap: wrap;
}

.tv-card {
    border: 1px solid #9fb3bf;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.tv-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.tv-card-content {
    padding: 30px 25px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tv-card-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: rgba(77, 77, 77, 1);
    font-family: var(--secondary-font);
}

.tv-card-text {
    font-size: 17px;
    line-height: 1.5;
    color: #8a8a8a;
    margin-bottom: 25px;
    flex-grow: 1;
    font-weight: 400;
    font-family: var(--secondary-font);
}

.tv-card-link {
    color: rgba(76, 175, 79, 1);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 17px;
}

.tv-arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.tv-card-link:hover .tv-arrow {
    transform: translateX(5px);
}
/* ---------------------------ends--- */

.tv-services-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.tv-service-card {
    height: 100%;
    border: 1px solid #9fb3bf;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.tv-service-img {
    width: 100%;
    height: 330px;
    object-fit: cover;
}

.tv-service-content {
    padding: 30px 25px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tv-service-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: rgba(77, 77, 77, 1);
    line-height: 1.5;
    font-family: var(--primary-font);
}

.tv-service-text {
    font-size: 17px;
    color: rgba(77, 77, 77, 1);
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 25px;
    flex-grow: 1;
    font-family: var(--secondary-font);
}

.tv-service-link {
    color: rgba(76, 175, 79, 1);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
    line-height: 1.5;
    font-family: var(--secondary-font);
}

.tv-service-link span {
    transition: transform 0.3s ease;
}

.tv-service-link:hover span {
    transform: translateX(5px);
}

/* =========================
   CTA CARD
========================= */
.tv-cta-card {
    height: 100%;
    background: #3f5148;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.tv-cta-inner {
    padding: 40px;
    color: #ffffff;
}

.tv-cta-inner h3 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.5;
    font-family: var(--primary-font);
}

.tv-cta-inner p {
    font-size: 17px;
    opacity: 0.85;
    margin-bottom: 30px;
    line-height: 1.5;
    font-weight: 400;
    font-family: var(--secondary-font);
}

.tv-cta-btn {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    line-height: 1.5;
    font-family: var(--secondary-font);
}
.row.tv-services-wrapper {
    padding-bottom: 50px;
}
.page, .archive, .menu-toggle span {
    background: var(--primary-color) !important;
}
body.page {
    background: #fff !important;
}
body.archive {
    background: #fff !important;
}
.home .menu-toggle span {
    background:#fff !important;
}

@media (max-width: 767px) {
    .footer-bottom, .footer-bottom a, .copyright, .copyright a {
    margin-top: -30px !important;
}
/* .page .section-two {
    padding: 0px;
} */
.header.scrolled ul#menu-new-menu-type>li>a {
    color: #fff !important;
}
 ul#menu-new-menu-type>li>a {
    color: #fff !important;
}
 .kb-title {
    font-size: 40px !important;
            margin-top: 56px;
    }
    .tv-service-img {
        height: 200px;
    }

    .tv-cta-inner h3 {
        font-size: 26px;
    }

    .tv-cta-inner p {
        font-size: 16px;
    }
    
    .tv-card-img {
        height: 180px;
    }

    .tv-card-title {
        font-size: 20px;
    }

    .tv-card-text {
        font-size: 15px;
    }
}

@media (min-width: 768px) and (max-width: 1280px){

 ul#menu-new-menu-type>li>a {
    color:#fff !important;
}
    .tv-service-img {
        height: 240px;
    }

    .tv-cta-inner {
        padding: 30px;
    }
     .tv-card-img {
        height: 200px;
    }
}

@media (min-width: 1200px) {
    .tv-service-img {
        height: 300px;
    }
     .tv-card {
        max-width: 100%;
    }
}
@media (min-width: 992px) {

    .tv-card-img {
        height: 220px;
    }
}
/* -------solution newsletter section css-------- */
.newsletter-section-solution {
    position: relative;
    background: url('https://staging.techversions.com/assets/solution_paralex.webp') center/cover no-repeat;
    padding: 60px 20px;
    text-align: center;
    color: #fff;
}

/* Dark overlay */
.newsletter-section-solution::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgb(0 0 0 / 56%);
    z-index: 1;
}

/* Content above overlay */
.newsletter-content-solution {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: auto;
}

.newsletter-content-solution h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 15px;
       font-family: var(--primary-font);
}

.newsletter-content-solution p {
    font-size: 18px;
       font-family: var(--secondary-font);
    font-weight: 300;
    line-height: 1.5;
    /* margin-bottom: 30px; */
    color: #bcbcbc;
}
img.newsletter-img-solution {
    width: 60px;
    height: auto;
    display: block;
}
.newsletter-icon-solution {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.newsletter-icon-solution i {
    color: #2D2D2D;
    font-size: 32px;
}
/* -------solution newsletter section css ends-------- */
/* -----------solution page css starts ------------------ */

@media (max-width: 1024px) {
  .techversion-hero-container {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        display: grid !important;
    }
    .nav-container {
        display: grid;
        grid-template-columns: auto 1fr auto; /* 3 grids */
        align-items: center;
        /* gap: 12px; */
    }

    /* Logo */
    .logo {
        justify-self: start;
    }

    /* Menu */
    .main-nav {
        justify-self: center;
    }

    .main-nav .nav-menu {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Icons */
    .header-icons {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-self: end;
    }

    .header-icons img {
        width: 20px;
        height: auto;
    }

    /* Hamburger */
    .menu-toggle {
        margin-left: 10px;
    }
}
/* --------------solution single page css starts------------------------ */

.tv-syndication-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 50px 80px 50px 20px;
}


/* Top heading */
.tv-syndication-header {
text-align: center;
margin: 0 auto 40px;
}


.tv-syndication-header h1 {
font-size: 36px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 14px;
color: rgba(77, 77, 77, 1);
font-family: var(--primary-font);
}


.tv-syndication-header p {
font-size: 16px;
color: rgba(113, 113, 113, 1);
font-weight: 700;
line-height: 1.5;
}
.tv-syndication-header span {
font-size: 16px;
color: rgba(113, 113, 113, 1);
font-weight: 400;
}
/* Image */
.tv-syndication-image {
margin-bottom: 70px;
}


.tv-syndication-image img {
width: 100%;
border-radius: 10px;
display: block;
object-fit: cover;
}


/* Two column layout */
.tv-syndication-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: flex-start;
}
.tv-syndication-grid h2 {
font-size: 48px;
font-weight: 700;
line-height: 1.5;
color: rgba(77, 77, 77, 1);
font-family: var(--primary-font);
}
.tv-syndication-grid p {
font-size: 19px;
font-weight: 400;
color:rgba(77, 77, 77, 1);
margin-bottom: 22px;
line-height: 1.5;
}


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


.tv-syndication-grid h2 {
font-size: 28px;
}
}


@media (max-width: 600px) {
.tv-syndication-header h1 {
font-size: 28px;
}
}
/* =--------------- */

.tv-tabs-wrapper {
background: rgba(244, 247, 250, 1);
padding: 60px 20px 90px;
}


.tv-tabs-container {
/* max-width: 1360px; */
 /* max-width: 1200px; */
margin: 0 60px;
}

/* Flex Layout */
.tv-tab-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.tv-tab-flex.reverse {
  flex-direction: row-reverse;
}

/* Left Content */
.tv-tab-left {
  flex: 1;
}
/* Right Image */
.tv-tab-right {
  flex: 1;
}

.tv-tab-right img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Hide panels */
.tv-tab-panel {
  display: none;
}

.tv-tab-panel.active {
  display: block;
}
/* Tabs header */
.tv-tabs-nav {
display: flex;
gap: 40px;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 24px;
}


.tv-tab-btn {
background: none;
border: none;
font-size: 21px;
font-weight: 600;
color: #ccc;
padding: 12px 0;
cursor: pointer;
position: relative;
font-family:var(--primary-font);
text-align: justify;
}


.tv-tab-btn.active {
color: var(--primary-color);
}


.tv-tab-btn.active::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: var(--primary-color);
}


/* Content */
.tv-tab-text {
font-size: 16px;
color: var(--accent-color-text);
line-height: 1.5;
margin-bottom: 22px;
font-family: var(--secondary-font);
}


.tv-tab-heading {
font-weight: 700;
font-size: 17px;
margin-bottom: 12px;
color: var(--accent-color);
font-family: var(--primary-font);
}


.tv-tab-list {
padding-left: 18px;
}


.tv-tab-list li {
font-size: 14px;
color: var(--accent-color-text);
margin-bottom: 10px;
font-family: var(--secondary-font);
}


/* Responsive */
@media (max-width: 768px) {
.tv-tabs-nav {
gap: 20px;
display: grid;
}
.tv-tab-flex,
  .tv-tab-flex.reverse {
    flex-direction: column;
  }
}

.tv-consult-section {
    background: var(--primary-color);
    padding: 80px 20px;
}

.tv-consult-container {
    /* max-width: 1200px; */
    margin: 0 60px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* LEFT bigger, RIGHT smaller */
    align-items: center;
    gap: 60px;
}

/* LEFT CONTENT */
.tv-consult-title {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    font-family: var(--primary-font);
}

.tv-consult-text {
    color: rgba(255, 255, 255, 1);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    font-family: var(--secondary-font);
}

/* FORM CARD */
.tv-consult-form-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* FORM */
.tv-form-group {
    margin-bottom: 15px;
}

.tv-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: rgba(22, 28, 45, 1);
}

.tv-form-group input,
.tv-form-group select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.tv-form-btn {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    text-transform: uppercase;
    transition: 0.4s ease;
}

.tv-form-btn:hover {
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
}
@media (max-width: 768px) {
    .tv-consult-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tv-consult-title {
        font-size: 30px;
    }
}


/* -------------------------ends---------------------------------------- */

/*
#menu-item-112649 > ul {
    column-count: 3;
}

*/


/* ===============================
   MEGA MENU – 3 COLUMN (COLUMN-COUNT)
================================ */

/* Parent positioning */
#menu-item-112649 {
    position: static;
}

/* Mega dropdown */
#menu-item-112649 > .sub-menu {
  position: absolute;
    top: 74%;
    left: 76%;
    /* width: 50%; */
    max-width: 100%;
    background: #fff;
    padding: 20px 40px;
    /* column-count: 2; */
    /* column-gap: 0; */
    display: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Show on hover */
#menu-item-112649:hover > .sub-menu {
    display: block;
}

/* Prevent items breaking across columns */
#menu-item-112649 > .sub-menu > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Title styling */
#menu-item-112649 > .sub-menu > li > a {
        padding: 6px 0px;
    /* border-top: 1px solid #f0f3f5; */
    display: block;
    color: #696969;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--secondary-font);
}
#menu-item-112649 > .sub-menu > li > a:hover {
    color: var(--primary-color);
    font-weight: 600;
}
/* Child submenu */
#menu-item-112649 .sub-menu .sub-menu {
    position: static;
    display: block;
       margin: 0 -18px 0px;
    padding: 0;
}

/* ------------------------ */
form#form178 {
    width: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* max-width: 800px; */
    /* width: 45%; */
    margin: 0;
    z-index: 9999;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    background: #fff;
    color: #4D4D4D;
    box-sizing: border-box;
}


div#fm-popover-container178 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%;
    margin: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    border-radius: 15px;
    box-sizing: border-box;
}

/* ============================
   ONLY Form ID 178
============================ */
div#\31 78form_view1 {
    text-align: center;
}

/* Headings / Description text */
div#\31 78form_view1 .wdform_page_description,
div#\31 78form_view1 .wdform_page_title {
    text-align: center;
}

/* Make specific lines bold */
div#\31 78form_view1 strong,
div#\31 78form_view1 b {
    font-weight: 700;
}

/* ============================
   Email field container
============================ */
div#\31 78form_view1 .newsletter_email {
    position: relative;
    max-width: 520px;
    margin: 25px auto 0;
}

/* Email input */
div#\31 78form_view1 .newsletter_email input {
    height: 40px;
    border-radius: 30px;
    padding: 0 150px 0 18px;
    font-size: 15px;
    border: none;
        border-radius: 8px !important;
    outline: none;
    background: rgba(245, 247, 250, 1);
}
span.fm-submit-loading.spinner.fm-ico-spinner {
        display: none !important;
}
/* ============================
   Submit button OVER input
============================ */
/* span#closing-form178 {
    display: none;
} */
/* Make popup container relative */
#closing-form178,
.fm-form-container.fm-theme1 .closing-form {
        position: relative;
    top: -160px;
    bottom: 0;
    right: 130px;
    left: auto;
    float: inline-end;
    z-index: 10000;
}
.fm-form-container.fm-theme1 .fm-form .fm-header {
    text-align: center;
    width: -webkit-fill-available;
}
div#\31 78form_view1 .newsletter_popup {
      position:fixed;
    right: 0px;
       border: none;
    bottom: 83px !important;
    left: 370px !important;
    transform: translateY(-50%);
}

/* Button style */
div#\31 78form_view1 .newsletter_popup .button-submit {
    height: 39px;
    padding: 0 60px;
    border-radius: 8px;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    opacity: 1 !important;
    cursor: pointer;
    text-transform: uppercase;
}

/* Hide reset button */
div#\31 78form_view1 .button-reset {
    display: none;
}

/* ============================
   Mobile fallback
============================ */
@media (max-width: 480px) {
div#\31 78form_view1 .newsletter_email input {
    padding-right: 20px;
}
div#\31 78form_view1 .newsletter_popup {
    position: absolute !important;
        right: 0px;
        bottom: 33px !important;
        left: 55% !important;
        transform: none;
      
}
}

#form178 > div.fm-header-bg > div > div > div.fm-header-title {
     font-size: 30px;
    font-weight: 700 !important;
    font-family: 'Inter';
    line-height: 1.5;
        margin-bottom: 30px;
}
.fm-form-container.fm-theme1 .fm-form .fm-header-description {
    color: #4D4D4D;
}
#wd_required_2 {
    position: absolute;
    bottom: -8px;        
    left: 0;
    width: 100%;
    margin: 0 !important;
    font-size: 12px;
    line-height: 1.5;
}

/* ----------------resource page css starts--------------- */

.kb-banner {
  position: relative;
  height: 380px;
  width: 100%;
  background: url("https://staging.techversions.com/assets/resource_banner.gif")
    center center / cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
}

/* Dark overlay */
.kb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 25, 50, 0.9) 35%,
    rgba(10, 25, 50, 0.6) 65%,
    rgba(10, 25, 50, 0.25) 100%
  );
}

/* Full-width content */
.kb-content {
  position: relative;
  width: 100%;         
  padding: 0 70px;       
}



/* Breadcrumb */
.breadcrumb {
  font-size: 12px !important;
  font-weight: 600;
  font-family: var(--primary-font);
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 20px;
}

.kb-content h1 {
 font-size: 60;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    font-family: var(--primary-font);
}


.kb-content p {
 font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
    opacity: 0.95;
    max-width: 100%;
    font-weight: 400;
    font-family: var(--secondary-font);
}

/* Share icons */
.share {
  display: flex;
  /* gap: 14px; */
  font-size: 14px;
}

.share span {
  margin-right: 10px;
  opacity: 0.85;
  margin-right: 10px;
    opacity: 0.85;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    font-family: var(--secondary-font);
}

.share a {
  width: 34px;
  height: 34px;
  display: flex;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease;
}

/* .share a:hover {
  background: #fff;
  color: #0a1932;
} */

a.resource-read-more {
  display: block;
    width: fit-content;
    margin: 20px auto 0;
    padding: 8px 20px;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid var(--primary-color);
    font-weight: 400;
    font-family: var(--secondary-font);
}
.card-bottom-res {
       /* background: #f4f6f9; */
    padding: 30px;
    height: 200px;
    max-height: 100%;
}
.card-bottom-res h3>a{
    text-decoration: none;
    font-size: 18px;
      position: relative;
    font-weight: 600;
    line-height: 1.5;
       font-family: var(--primary-font);
    margin-bottom: 15px;
    color: rgba(60, 76, 65, 1);
}
.card-bottom-res h3>a::before {
    content: "";
    position: absolute;
    left: -30px;      /* aligns with card border */
    top: 0;
    width: 3px;
    height: 100%;     /* AUTO — depends on title */
    background-color: var(--primary-color);
    border-radius: 2px;
}
.card-bottom-res p {
    color: rgba(60, 76, 65, 1);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 30px;
       font-family: var(--secondary-font);
}
.card-bottom-res .btn-div {
  /* text-align: center; 
  margin-top: 10px;
  margin-bottom: 30px; */
    position: absolute;
    bottom: 60px;                      /* distance from bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    margin: 0 !important;
}

.fr-section {
  padding:60px 80px 100px;
  text-align: center;
}

.fr-heading {
  font-size: 46;
    margin-bottom: 30px;
    font-family: var(--primary-font);
    font-weight: 500;
    color: var(--accent-color); 
}

.fr-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  border-bottom: 2px solid #DFDFDF;
  margin-bottom: 40px;
}

.fr-tab-btn {
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  color: var(--accent-color);
    font-weight: 500;
}

.active-tab::after {
  content: "";
  height: 3px;
  width: 100%;
  background: #000;
  position: absolute;
  bottom: -1px;
  left: 0;
}

.fr-panel {
  display: none;
}

.active-panel {
  display: block;
}

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

.fr-card-box {
  background: #fff;
 width: 350px;
    margin-left: 20px;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 20px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: 0.3s ease;
  position: relative;
}

.fr-card-box:hover {
  transform: translateY(-5px);
}

.fr-card-box img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.fr-label {
  position: absolute;
  /* top: 15px;
  left: 15px; */
  background: #3db575;
  color: #fff;
  padding: 5px 12px;
  /* opacity: 0.8; */
  font-size: 12px;
      border-bottom-left-radius: 0px;
  font-weight: 400;
  font-family: var(--secondary-font);
  text-transform: uppercase;
}
.category-tag-res {
font-size: 12px;
    font-weight: 500;
    color: #3db575;
    text-transform: uppercase;
    display: flex;
       margin-top: 20px;
    margin-bottom: -13px;
    margin-left: 20px;
    font-family: var(--primary-font);
}
.label-guide {
  background: #888;
}

.label-report {
  background: #3c3c8c;
}

.fr-card-box h3 {
font-size: 20;
    font-weight: 600;
    padding: 20px;
    font-family: var(--primary-font);
    line-height: 1.5;
}

.fr-card-box p {
 font-size: 13px;
    padding: 0 20px 20px;
    color: rgba(60, 76, 65, 1);
    font-weight: 400;
    font-family: var(--secondary-font);
    line-height: 1.5;
}

.fr-download-btn {
   display: block;              /* make it block */
  width: fit-content;          /* shrink to content */
  margin: 20px auto 0;         /* center horizontally */
  padding: 8px 20px;
  color: var(--primary-color);
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid var(--primary-color);
  font-weight: 400;
  font-family: var(--secondary-font);
}
.fr-download-btn :hover{ 
     color: var(--primary-color);
}
/* ----- */
.resource-card-res {
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.08);
    position: relative;
    transition: transform .3s ease;
      padding-bottom: 60px;  
          border: 1px solid rgba(0, 0, 0, 0.11);

      
}

.resource-card-res:hover {
    transform: translateY(-6px);
}
.browse-section {
  background: #3f5246;
  padding: 80px;
  color: #fff;
}

.browse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.browse-header h2 {
  font-size: 36px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.5;
    font-family: var(--primary-font);
}

.browse-header p {
  color: #ccccccdb;
    line-height: 1.5;
    font-size: 18px;
    font-weight: 300;
    font-family: var(--secondary-font);
}

.explore-link {
 color: var(--primary-color);
    text-decoration: none;
    font-family: var(--secondary-font);
    font-size: 16px;
    font-weight: 600;
}
.explore-link:hover {
 color: var(--background-color);
   
}
.browse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.browse-card > a {
  background: rgba(255, 255, 255, 1);
  color: #2f3e35;
  padding: 25px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.browse-card h3 {
  margin: 0;
    font-size: 20px;
    font-family: var(--secondary-font);
    font-weight: 700;
    line-height: 1.5;
    color: #3c4c41;
    
}


.browse-card span {
  font-size: 14px;
  color: #6b756f;
  font-weight: 400;
  font-family: var(--secondary-font);
}

.arrow-circle {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  opacity: 0;
}

/* 🔥 Hover Effect */
.browse-card>a:hover {
  background:linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
  color: #fff !important;
  border-radius: 0;
}

.browse-card>a:hover span {
  color: #fff;
}
.browse-card>a:hover h3 {
  color: #fff;
}
/* .browse-card:hover .arrow-circle {
  opacity: 1;
  color: var(--primary-color);
} */

.browse-card .arrow-circle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff; /* Keep circle white */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

/* Font Awesome Icon */
.browse-card .arrow-circle::before {
    content: "\f101"; /* angles-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #4CAF4F; /* ✅ Green icon */
    transition: color 0.3s ease;
}

/* On Hover */
.browse-card>a:hover .arrow-circle {
    opacity: 1;
}

/* First card default active style */
.browse-card.active {
  background: var(--primary-color);
  color: #fff;
}

.browse-card.active span {
  color: #e0ffe9;
}

.browse-card.active .arrow-circle {
  opacity: 1;
}


/* Section Background */
.kb-hero {
  background: #f1f3f1;
  padding: 80px 0;
}

/* Container */
/* .kb-container {
 
  max-width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
 
} */

.kb-container {
    max-width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
  /* gap: 40px;  */
}

/* Left Side */
.kb-left {
   width: 100%;          
  padding-left: 0;
  transform: translateX(-60px);
  margin: 0 -7px;
}
.kb-left,
.kb-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.9s ease;
}
/* When active */
.kb-hero.active .kb-left,
.kb-hero.active .kb-right {
    opacity: 1;
    transform: translateX(0);
}
.kb-breadcrumb {
  font-size: 12px;
    color: rgba(60, 76, 65, 1);
    font-family: var(--primary-font);
    font-weight: 400;
    margin: 0 70px;
}

.kb-breadcrumb a {
  color: #6b756f;
  text-decoration: none;
}

.kb-breadcrumb span {
  /* margin: 0 8px; */
}

.kb-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 25px;
  margin-top: 25px;
      font-family: var(--primary-font);
}

.kb-description {
  font-size: 16px;
  line-height: 1.5;
  color: var(--accent-color-text);
  max-width: 520px;
  margin-bottom: 40px;
      font-family: var(--secondary-font);
}

/* Share */
.kb-share {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  color:var(--accent-color);
}

.kb-share a {
  width: 28px;
  height: 28px;
  background: #dfe4df;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: var(--accent-color);;
  font-size: 12px;
  transition: 0.3s;
}

.kb-share a:hover {
  background: #1fa551;
  color: #fff;
}

/* Right Image */
.kb-right {
  flex: 1;
}

.kb-right img {
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
  height: 100%;
}
@media (max-width: 992px) {
    .kb-container {
    grid-template-columns: 1fr;
  }
  .kb-share {
    justify-content: center;
  }
  .kb-right {
    margin-top: 40px !important;
}
}
.all-resource-section {
    margin: 0 auto;
    background: rgba(244, 246, 249, 1);
}
.fr-full-filter-wrapper {
    background: #e6ece9;
    padding: 25px;
    border-radius: 14px;
    margin: 0 70px;
}

.fr-full-filter-form {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fr-full-filter-form input{
    flex: 1;
    padding: 14px 18px;
    height: 46px;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    outline: none;
}

.fr-full-filter-form input {
    flex: 2; /* Bigger search field */
}


.fr-full-filter-form select {
    flex: 1;
    padding: 12px 40px 14px 18px; /* extra space for icon */
    height: 46px;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    outline: none;

    /* Remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Custom dropdown icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6' stroke='%23333' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
/* .fr-full-filter-form button {
    padding: 14px 35px;
    border-radius: 8px;
    background: #198754;
    color: #fff;
    border: 2px solid #198754;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.fr-full-filter-form button:hover {
    background: transparent;
    color: #198754;
} */

/* --------2nd search -------- */

.fr-center-filter-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
     margin-bottom: 40px;
}

.fr-center-filter-form {
    background: #e6ece9;
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100% !important;
    max-width: 1200px;
}

.fr-center-filter-form input {
    padding: 10px 14px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    outline: none;
    background: #fff;
}

.fr-center-filter-form input {
    width: 200px;
}

/* .fr-center-filter-form select {
    min-width: 160px;
} */

.fr-center-filter-form button {
    padding: 10px 25px;
    border-radius: 6px;
    background: #198754;
    color: #fff;
    border: 2px solid #198754;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.fr-center-filter-form button:hover {
    background: transparent;
    color: #198754;
}
.fr-center-filter-form select {
    flex: 1;
    padding: 12px 40px 14px 18px; /* space for icon */
    height: 46px;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    outline: none;

    /* Remove default browser arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' stroke='%23333' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
/* ----------------- */
.fr-heading-resources {
  font-size: 46px;
    margin-bottom: 30px;
    font-family: var(--primary-font);
    font-weight: 500;
    color: var(--accent-color); 
    margin:60px auto 40px;
    text-align: center;
    width: 100%;
}
.fr-filter-wrapper {
    text-align: center;
    width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

/* Section background */
.pagination-section {
    /* background: #f3f4f6; */
    padding: 15px 0 80px;
    text-align: center;
     display: flex;              
    justify-content: center;    
    align-items: center;   
}

/* Pagination wrapper */
.pagination {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Default page button */
.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Active page */
.page-btn.active {
    background: #ffffff;
    border: 1px solid #2e7d32;
    color: #2e7d32;
    font-weight: 600;
}

/* Hover */
.page-btn:hover:not(.active):not(.disabled) {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
}

/* Next button (solid green) */
.page-btn.next {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
}

/* Disabled previous */
.page-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Dots */
.page-dots {
    font-size: 18px;
    color: #666;
}
.category-tag-resources{
font-size: 12px;
    font-weight: 500;
    color: #3db575;
    text-transform: uppercase;
    display: flex;
  margin-top: 20px;
    margin-bottom: 10px;
    /* margin-left: 20px;*/
    font-family: var(--primary-font);
}



img.feature-img-user-two {
    width: 25px !important;
    height: 16px !important;
    object-fit: contain !important;
    /* margin-right: 10px; */
    /* vertical-align: unset; */
    display: inline-block;
    margin-top: 6px;
}
/* ================= ICON ANIMATION ================= */
/* Add spacing between icon & heading */
.icon {
    gap: 0px;   /* increase if needed */
}

/* Prevent overlap during scaling */
.icon img {
    transition: transform 0.5s ease;
    transform-origin: center;
}
.icon-card img {
      transition: transform 0.5s ease;
    transform-origin: center;
}

.icon-card:hover img {
    transform: scale(1.15) rotate(8deg);
    gap:20px;
}


/* ================= HEADING ANIMATION ================= */
.icon-card .key_title {
    display: inline-block;
    transition: transform 0.4s ease, color 0.3s ease;
    transform-origin: left center;
}

.icon-card:hover .key_title {
    transform: scale(1.12);
    color: var(--primary-color);
    font-size: 20px;
}


/* ================= READ MORE ANIMATION ================= */
.read_more {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Underline slide effect */
.read_more::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.icon-card:hover .read_more {
    transform: translateX(6px);
}

.icon-card:hover .read_more::after {
    width: 100%;
}
/* Smooth transition for spacing */
.icon-card .icon {
    margin-bottom: 8px; /* normal spacing */
    transition: margin-bottom 0.4s ease;
}

/* Add extra space on hover */
.icon-card:hover .icon {
    margin-bottom: 18px; /* hover spacing */
}

.schedule-footer a {
    position: relative;
    display: inline-block;
    padding-right: 20px;
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.schedule-footer a {
    position: relative;
    display: inline-block;
    padding-right: 25px;
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

/* Underline (hidden by default) */
.schedule-footer a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: var(--secondary-color);
    transition: width 0.4s ease;
}

/* Arrow (hidden by default) */
.schedule-footer a::after {
    content: "\f101"; /* Font Awesome angles-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    opacity: 0;
    transition: all 0.4s ease;
}

/* On Hover */
.schedule-footer a:hover {
    color: var(--secondary-color);
}

.schedule-footer a:hover::before {
    width: 96%;
}

.schedule-footer a:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.ad-banner-one {
    margin-top: 80px;
    width: 100%;
    text-align: center;
    margin-bottom: -40px;
}

.hero-card {
    position: relative;
    border-radius: 1rem; /* matches rounded-4 */
    overflow: hidden;
    z-index: 1;
}

/* Create animated border layer */
.hero-card::before,
.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    pointer-events: none;
    z-index: -1;   /* 👈 This pushes border behind content */
}

/* Border animation layer */
.hero-card::after {
    border-left: 10px solid #4CAF4F;
    border-bottom: 10px solid #4CAF4F;

    transform: scale(0);
    transform-origin: bottom left;
    transition: transform 0.4s ease;
}

/* Hover Effect */
.hero-card:hover::after {
    transform: scale(1);
}

/* Top & Bottom */
/* .hero-card::before {
    border-top: 3px solid #4CAF4F;
    border-bottom: 3px solid #4CAF4F;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
} */

/* Left & Right */
/* .hero-card::after {
    border-left: 3px solid #4CAF4F;
    border-right: 3px solid #4CAF4F;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease 0.4s;
} */

/* Hover effect */
.hero-card:hover::before {
    transform: scaleX(1);
}

/*ero-card:hover::after {
    transform: scaleY(1);
} */
.reveal {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Image wrapper */
.card-image-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
   border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Image Zoom */
.card-image-wrapper img {
    width: 100%;
    transition: transform 0.6s ease;
}

.resource-card:hover .card-image-wrapper img {
    transform: scale(1.1);
}

/* Default Diagonal */
.corner-arrow {
     position: absolute;
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(-15px);   /* Start slightly above */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* On Hover → Convert to Circle */
.resource-card:hover .corner-arrow {
    opacity: 1;
    transform: translateY(0);
    clip-path: none;            /* Remove triangle */
    border-radius: 50%;         /* Make circle */
    width: 45px;
    height: 45px;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
      transform: scale(1);
    justify-content: center;
    padding: 0;
}

/* Icon animation */
.corner-arrow i {
    transform: rotate(-45deg);
    transition: transform 0.4s ease;
    color: #fff;
}
/* Initial hidden state */
.reveal-card {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: all 0.8s cubic-bezier(.17,.67,.38,1.46);
}

/* When visible */
.reveal-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Image wrapper */
.card-image-wrapper-res {
    position: relative;
    display: block;
    overflow: hidden;
     border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Image Zoom */
.card-image-wrapper-res img {
    width: 100%;
    transition: transform 0.6s ease;
}

.resource-card-res:hover .card-image-wrapper-res img {
    transform: scale(1.1);
}

/* Default Diagonal */
.corner-arrow-res {
     position: absolute;
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(-15px);   /* Start slightly above */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* On Hover → Convert to Circle */
.resource-card-res:hover .corner-arrow-res {
    opacity: 1;
    transform: translateY(0);
    clip-path: none;            /* Remove triangle */
    border-radius: 50%;         /* Make circle */
    width: 45px;
    height: 45px;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Icon animation */
.corner-arrow-res i {
    transform: rotate(-45deg);
    transition: transform 0.4s ease;
    color: #fff;
}
/* -----------solution page css---------- */
.custom-carousel .carousel-card {
    position: relative;
    height: 500px;
    width: 360px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
    cursor: pointer;
}

/* Black & White for inactive */
.custom-carousel .owl-item {
    filter: grayscale(100%);
    transform: scale(0.9);
    transition: all 0.5s ease;
    width: 350px;
    max-width: 100%;
}


/* Active card */
.custom-carousel .owl-item.active.center {
    filter: grayscale(0%);
    transform: scale(1.05);
    z-index: 2;
}

/* Lift + Shadow on hover */
.custom-carousel .carousel-card:hover {
    transform: translateY(-12px);
    /* box-shadow: 0 25px 40px rgba(0,0,0,0.25); */
}

/* Overlay */
.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    gap: 0px;
}

/* Title */
.card-title {
    font-size: 35px;
    font-weight: 600;
    transition: all 0.4s ease;
}

/* Hover Content Hidden Initially */
.card-hover-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* Show on Hover */
.carousel-card:hover .card-hover-content {
    opacity: 1;
    max-height: 150px;
    margin-top: 20px;
}

/* Description */
.card-hover-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 50px;
}

/* View More */
.view-more {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}
.view-more:hover {
    color: #4CAF4F;
    text-decoration: none;
}
/* Make carousel relative */
.custom-carousel {
    position: relative;
}

/* Owl Nav Container */
.custom-carousel .owl-nav {
    position: absolute;
     z-index: 9999;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

/* Individual Buttons */
.custom-carousel .owl-nav button {
     position: absolute;
    top: 50%;
     pointer-events: auto;
    transform: translateY(-50%);
    background: var(--primary-color) !important;
    color: #fff !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 22px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
}
.resources-carousel .owl-stage-outer {
    overflow: hidden; /* ✅ ensures no next slide visible */
}

.custom-carousel {
    max-width: 1320px;   /* Bootstrap 5 container max width */
    margin: 0 auto;
    
}
.custom-carousel .owl-nav .owl-prev {
    left: 10px;
}

.custom-carousel .owl-nav .owl-next {
    right: 10px;
}

.custom-carousel .owl-nav button:hover {
    background: #4CAF4F !important;
}
/* Hover Effect */
.custom-carousel .owl-nav button:hover {
    background: #4CAF4F !important;
}

/* Remove default outline */
.custom-carousel .owl-nav button:focus {
    outline: none;
}
.custom-carousel .owl-nav {
    display: block !important;
}
/* --------------- */
.banner-sm-icon {
    position: relative;
    width: 45px;
    height: 34px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    overflow: hidden;
}

.banner-sm-icon:hover img {
    /* transform: scale(1.2); */
    /* opacity: 0.8; */
     /* filter: brightness(0) invert(1);  */
}

/* Smooth transition */
.banner-sm-icon img {
    transition: 0.3s ease;
}

/* Facebook Hover */
.facebook:hover img {
    content: url('https://staging.techversions.com/assets/SM Icons Original Facebook_Color.png');
}

/* LinkedIn Hover */
.linkedin:hover img {
    content: url('https://staging.techversions.com/assets/SM Icons Original LinkedIn_Color.png');
}

/* Twitter (X) Hover */
.twitter:hover img {
    content: url('https://staging.techversions.com/assets/SM Icons Original X_Color.png');
}

/* Instagram Hover */
.instagram:hover img {
    content: url('https://staging.techversions.com/assets/SM Icons Original Instagram_Color.png');
}
.share_on_banner {
  display: flex;
  /* gap: 14px; */
  font-size: 14px;
}

.share_on_banner span {
 margin-top: 4px;
  margin-right: 10px;
    opacity: 0.85;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    font-family: var(--secondary-font);
}

.share_on_banner a {
  width: 45px;
  height: 34px;
  display: flex;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease;
}
i.fa-solid.fa-angles-right.learn-more-icon {
    height: 20px;
    font-size: 14px;
}


/* On Hover → Convert to Circle */
.ai-card:hover .corner-arrow-ai {
    opacity: 1;
    transform: translateY(0);
    clip-path: none;            /* Remove triangle */
    border-radius: 50%;         /* Make circle */
    width: 45px;
    height: 45px;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}



.corner-arrow-ai i {
    transform: rotate(-45deg);
    transition: transform 0.4s ease;
    color: #fff !important;
}

.ai-card {
    position: relative;  /* REQUIRED */
}

/* Make the LINK positioned */
.corner-arrow-link {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;   /* Make sure it's above image */
    text-decoration: none;
}

/* Arrow circle */
.corner-arrow-ai {
    width: 45px;
    height: 45px;
       top: 15px;
    right: 15px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Default Diagonal */
.corner-arrow-case-study {
     position: absolute;
    top: 90px;
    right: 15px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(-15px);   /* Start slightly above */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* On Hover → Convert to Circle */
.case-card:hover .corner-arrow-case-study {
    opacity: 1;
    transform: translateY(0);
    clip-path: none;            /* Remove triangle */
    border-radius: 50%;         /* Make circle */
    width: 45px;
    height: 45px;
    top: 90px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Icon animation */

.corner-arrow-case-study i {
    transform: rotate(-45deg);
    transition: transform 0.4s ease;
    color: #fff !important;
}
section.solutions-section {
    padding: 30px 0px 70px;
}

/* ------------------ */
.tv-services-section {
  padding: 80px 0;
  background: #f8f9fb;
}
.tv-content-box {
  padding: 40px;
}

/* Optional – for better look */
@media (max-width: 992px) {
  .tv-content-box {
    padding: 0px;
    margin-top: 20px !important;
  }
}
.tv-container {
    margin: 0 80px;
}

h1.tv-service-heading {
  font-size: 36px;
  margin-bottom: 15px;
  font-weight: 600;
  color: rgba(77, 77, 77, 1);
  font-family: var(--primary-font);
}

/* Initial hidden state */
.tv-slide-left,
.tv-slide-right {
  opacity: 0;
  transition: all 1s ease;
}

/* Slide from left */
.tv-slide-left {
  transform: translateX(-80px);
}

/* Slide from right */
.tv-slide-right {
  transform: translateX(80px);
}

/* When visible */
.tv-animate-row.active .tv-slide-left,
.tv-animate-row.active .tv-slide-right {
  opacity: 1;
  transform: translateX(0);
}

button.res_search {
    width: 160px;
    height: 46px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    /* margin-top: 10px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    text-transform: uppercase;
    transition: 0.4s ease;
}

button.res_search:hover {
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
}


button.res_search_two{
    width: 160px;
    height: 42px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    /* margin-top: 10px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    text-transform: uppercase;
    transition: 0.4s ease;
}

button.res_search_two:hover{
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
}

.newsletter_popup {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0px;
}

/* Arrow (always visible) */
.newsletter_popup::after {
    content: "\f101"; /* Font Awesome angles-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: -62px;
    width: 0px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;/* Green arrow */
    transform: rotate(-45deg);
    background: transparent;  /* ✅ Transparent background */
    border-radius: 50%;
    transition: transform 0.4s ease;
}

/* Rotate on hover */
.newsletter_popup:hover::after {
    transform: rotate(0deg);
}
/* Smooth background transition */
div#\31 78form_view1 .newsletter_popup .button-submit {
    transition: background 0.3s ease;
}

/* Change background when hovering whole wrapper */
div#\31 78form_view1 .newsletter_popup:hover .button-submit {
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    opacity: 1.1;
}

/* Make whole card clickable */
.flip-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Remove link hover color issues */
.flip-card-link:hover {
    color: inherit;
}

/* Trigger flip on anchor hover */
.flip-card-link:hover .card {
    transform: rotateY(180deg);
}
.sec_section_single.active {
    margin-top: 100px;
}
.third_section_single.active{
    margin-top: 100px;
}
.pagination-section {
    padding: 15px 0 80px;
    display: flex;
    flex-direction: column;   /* STACK vertically */
    align-items: center;      /* CENTER everything */
}

/* Loader */
.pagination-loader-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Loader image */
.ajax-loader img {
    width: 150px;
    height: 150px;
}

/* Pagination */
.pagination {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
/* ---------------lp page css starts-------------- */
/* ===== HERO SECTION ===== */
.kb-hero-container {
    max-width: 100% !important;
    /* width: 1366px !important; */
      margin: 40px 68px 0px;
}
.kb-hero-section {
    padding: 90px 0;
    background: #f1f3f1;
}

.kb-hero-left {
    padding-right: 40px;
}
img.single_res_img {
        width: auto;
    height: 310px;
    float: inline-start;
    border-radius: 5px;
}
.kb-hero-left {
    margin-top: 0px;
}
.resource-content-container {
    margin: 80px 70px 80px;
}
.kb-full-description {
    font-size: 16px;
    line-height: 1.5;
    color: #5e6b64;
    max-width: 800px;
    margin-bottom: 40px;
    font-family: var(--secondary-font);
}
#resource-download-form {
    padding: 30px 20px 20px;
    background: rgba(244, 247, 250, 1);
    border: 1px solid rgba(213, 226, 217, 1);
    border-radius: 10px;
     box-shadow: 0 15px 20px -14px rgba(22, 28, 45, 0.25);
}
.guide-box {
    background: rgba(76, 175, 79, 0.1); /* light green */
    padding: 40px;
    border-radius: 16px;
    max-width: 900px;
    margin: 40px auto;
}

.guide-title {
   font-size: 22px;
    font-weight: 700;
    color: rgba(60, 76, 65, 1);
    margin-bottom: 30px;
    font-family: var(--primary-font);
}

.guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(60, 76, 65, 1);
    font-weight: 500;
}

/* Check Icon */
.guide-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 3px;
    width: 26px;
    height: 26px;
    background: #2f5d4e;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Target only this form button */
#resource-download-form .button-submit {
    position: relative;
    padding-right: 27px; /* space for icon */
    transition: background 0.3s ease;
}

/* Add arrow icon */
#resource-download-form .button-submit::after {
    content: "\f101"; /* Font Awesome angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);

    font-size: 14px;
    color: #fff;

    transition: transform 0.3s ease;
}

/* Rotate on hover */
#resource-download-form .button-submit:hover::after {
    transform: translateY(-50%) rotate(0deg);
}
/* Mobile spacing */
@media (max-width: 767px) {
    .kb-hero-container {
    max-width: 100% !important;
    width: auto !important;
    margin: 0 10px;
}
.kb-breadcrumb {
    margin: 0 0px 20px !important;
}
.resource-content-container {
    margin: 45px 20px 0px !important;
}
.fr-heading-resources {
    font-size: 36px !important;
}
.container-related-res {
    margin: 0 15px 50px !important;
}
.guide-box {
    padding: 25px !important;
}
img.single_res_img {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
    border-radius: 5px;
    margin-top: 20px;
}
.newsletter_popup::after {
    margin-left: -36px;
}
.browse-section {
    padding: 30px !important;
}
.browse-grid {
    grid-template-columns: repeat(1, 1fr) !important;
}
.browse-header h2 {
    font-size: 28px !important;
}
.browse-header {
    display: block !important;
}
.kb-hero-left {
    padding-right: 0;
}
.tv-tabs-container {
margin: 0 10px !important;
}
.kb-right{
margin-top: 60px !important;
}
.custom-carousel .carousel-card
{
width: 100% !important;
}
.tv-consult-container {
margin: 0px !important;
}

#closing-form178, .fm-form-container.fm-theme1 .closing-form {
    top: -183px !important;
    right: -22px !important;
}
}
.related-resources-section {
    padding: 10px 0;
    background: rgba(244, 246, 249, 1); 
}
.container-related-res {
    margin: 0 70px 50px;
}
/* .resource-sidebar {
    width: 36% !important;
    margin-left: 46px !important;
    max-width: 100% !important;
} */
 h1.typ-para {font-size: 18px;
    font-family: var(--secondary-font);  
     line-height: 1.5;
     font-weight: 400;
     color: rgba(60, 76, 65, 1);}
h1.typ-title {font-size: 24px;
    font-family: var(--secondary-font);
     line-height: 1.5;
      font-weight: 600;
     color: rgba(60, 76, 65, 1);
}
     .fm-error, .fm-not-filled {
    margin-left: 0px !important;
}
a#downloadLink {
    color: var(--primary-color);
}
.translate-wrapper{
    position: relative;
    display: inline-block;
}

.language-menu{
   position: absolute;
    top: 40px;
    right: -90px;
    background: #fff;
    width: 300px;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 999;
}

.language-menu ul{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-menu li{
    font-size:14px;
    cursor:pointer;
    padding:6px 8px;
    border-radius:6px;
}

.language-menu li:hover{
    background:#f2f2f2;
}
.language-menu{
    display:none;
}

.language-menu.active{
    display:block;
}


/* ---------serach bar css starts-------------- */
.menu-search-icon{
display:none;
}
.search-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#e9ecef;
display:flex;
justify-content:center;
align-items:flex-start;
padding-top:120px;

opacity:0;
visibility:hidden;

transition:0.3s ease;
z-index:99999;
}

.search-overlay.active{
opacity:1;
visibility:visible;
}

/* SEARCH CONTAINER */
.search-container{
    width:700px;
    max-width:90%;
}

/* SEARCH BAR */
.search-bar{
    display:flex;
    align-items:center;
    background:white;
    border-radius:8px;
    padding:8px;
    box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

.search-bar input{
    flex:1;
    border:none;
    padding:12px;
    font-size:16px;
    outline:none;
}

.search-submit{
    background:var(--primary-color);
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:6px;
    cursor:pointer;
}

.close-search{
    background:none;
    border:none;
    font-size:20px;
    margin-left:10px;
    cursor:pointer;
}

/* SUGGESTIONS BOX */
.search-suggestions{
    background:white;
    margin-top:20px;
    border-radius:10px;
    padding:15px;
    box-shadow:0 15px 30px rgba(0,0,0,0.15);
        max-height: 300px; 
    overflow-y: auto;    
}



.search-suggestions li:hover,
.search-suggestions li.active{
    background:rgb(18 165 85 / 70%);
    color:white;
}
.trending-searches {
    margin-top: 20px;
    text-align: center;
}

.trending-searches h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--accent-color);
    font-family: var(--secondary-font);
}

.trending-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.trending-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--category-tag-font);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    color:var(--accent-color-text);
}

.trending-tags span i {
    color: var(--secondary-color);
    font-size: 12px;
}

.trending-tags span:hover {
    background: #f5f7ff;
    border-color: var(--secondary-color);
}
.menu-search-icon a{
display:flex;
align-items:center;
font-size:0; /* hide text */
padding:10px;
}

.menu-search-icon a::before{
content:"";
display:block;
width:22px;
height:22px;

background-image:url("https://staging.techversions.com/assets/Header-Icon-Search-white.png");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.header.scrolled .menu-search-icon a::before{
color:#000;
}
.header.scrolled .menu-search-icon a::before{
background-image:url("https://staging.techversions.com/assets/Header-Icon-Search-white.png");
}

.search-suggestions ul{
list-style:none;
padding:0;
margin:0;
}

.search-suggestions li{
position:relative;
padding: 12px 30px 12px;
margin-bottom:10px;
font-size:14px;
color:#333;
  border-radius:6px;
    cursor:pointer;
}

ul#search-suggestions-list>li>a {
    color: #333;
    text-decoration: none;
    font-family: var(--secondary-font);
}
.search-suggestions li::before{
content:"";
position:absolute;
left: 7px;
top: 15px;
width: 15px;
height: 15px;
background-image:url("https://staging.techversions.com/assets/Icon-Posts-Time-Read-Color.png");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.trending-tags>span>a {
    text-decoration: none;
    color: #333;
    font-size: 12px;
}
/* ----------login and SM icons for mobile view--------- */
.menu-linkedin a,
.menu-twitter a,
.menu-facebook a,
.menu-insta a{
text-indent:-9999px;
overflow:hidden;
position:relative;
}
/* LOGIN BUTTON */
.menu-login-btn a{
background:var(--primary-color);
color:#fff !important;
padding: 10px 22px !important;
border-radius: 6px;
height: 46px;
border-radius:6px;
display:inline-flex;
align-items:center;
gap:8px;
font-weight:600;
}

/* SOCIAL ICONS */
.menu-linkedin a,
.menu-twitter a,
.menu-facebook a,
.menu-insta a{
display:inline-flex;
align-items:center;
justify-content:center;
}

/* COMMON STYLE FOR SOCIAL MENU ITEMS */


/* LINKEDIN */
.menu-linkedin a::before{
content:"";
width:25px;
height:25px;
background:url("https://staging.techversions.com/assets/Footer_new_LinkedIn_Color.png") no-repeat center;
background-size:contain;
display:block;
}

/* TWITTER / X */
.menu-twitter a::before{
content:"";
width:25px;
height:25px;
background:url("https://staging.techversions.com/assets/Footer_new_X_Color.png") no-repeat center;
background-size:contain;
display:block;
}

/* FACEBOOK */
.menu-facebook a::before{
content:"";
width:25px;
height:25px;
background:url("https://staging.techversions.com/assets/Footer_new_Facebook_Color.png") no-repeat center;
background-size:contain;
display:block;
}

/* INSTAGRAM */
.menu-insta a::before{
content:"";
width:25px;
height:25px;
background:url("https://staging.techversions.com/assets/Footer_new_Instagram_Color.png") no-repeat center;
background-size:contain;
display:block;
}
/* HIDE IN DESKTOP */
.menu-login-btn,
.menu-linkedin,
.menu-twitter,
.menu-facebook,
.menu-insta{
display:none;
}

/* SHOW ONLY IN MOBILE + TABLET */
@media (max-width:991px){

.menu-login-btn,
.menu-linkedin,
.menu-twitter,
.menu-facebook,
.menu-insta{
display:block;
}

}
@media (min-width:768px) and (max-width:991px){

.mobile-social-menu{
    display:block;
    margin-top:20px;
    margin-right:0;
    padding-top:20px;
}
.author-box {
    padding: 30px;
    margin: 0px 0px -30px;
    display: block !important;
}
.social-menu{
    display:flex;
    justify-content:flex-start;
    gap:18px;
}

}
.mobile-social-menu{
    display: none !important;
    margin-top: 400px;
    padding-top: 20px;
    margin-right: 238px !important;
    position: static;
}

/* show when menu opens */
.main-nav.active .mobile-social-menu{
display:block;
}

/* icons in row */
.social-menu{
display:flex;
/* justify-content:center; */
gap:20px;
padding:0;
margin:0;
}

.social-menu li{
list-style:none;
}

.social-menu a{
display:inline-flex;
}

.social-menu img{
width:30px;
height:30px;
}

/* ---------------ends------------- */
/* ------------media kit page css starts------------ */
.kb-full-description>h1 {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--primary-font);
    line-height: 1.5;
    color: rgba(60, 76, 65, 1);
}
h1.media_heading {
    font-size: 16px;
    font-weight: 500;
    color: rgba(60, 76, 65, 1);
    text-align: center;
    font-family: var(--secondary-font);
}
/* Top arrows */
.resources-carousel .resource-carousel-card {
     background: transparent; 
    box-shadow: none; 
    border-radius: 12px;
    overflow: hidden;
    height: 460px;
    width: 320px;
    max-width: 100%;
    max-height: 100%;

}

.resource-carousel-card {
    box-sizing: border-box;
}
/* Parent section */
.related-resources-section {
    position: relative;
}

.resources-carousel {
    position: relative;
}
/* IMAGE */
.resource-carousel-image {
    position: relative;
}

.resource-carousel-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* CATEGORY TAG */
.carousel-category {
   position: absolute;
    font-family: var(--secondary-font);
    top: 0px;
    left: 0px;
    background: rgba(18, 165, 85, 1);
    opacity: 0.8;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    /* border-radius: 4px; */
    text-transform: uppercase;
    z-index: 2;
}

/* CONTENT */
.resource-carousel-content {
    padding: 20px;
}

.resource-carousel-content h3 a{
    text-decoration: none;
    font-size: 18px;
    position: relative;
    font-weight: 600;
    line-height: 1.5;
    font-family: var(--primary-font);
    margin-bottom: 15px;
    color: rgba(60, 76, 65, 1);
    position: relative;   /* important for positioning */
}
.resource-carousel-content p {
color: rgba(60, 76, 65, 1);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-family: var(--secondary-font);
}
.resource-carousel-content h3 a {
    position: relative;
    display: inline-block;
}

.resource-carousel-content h3 a::before {
    content: "";
    position: absolute;
    left: -20px;   /* adjust spacing */
    top: 0;
    width: 3px;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 2px;
}
/* 🔥 ARROWS ON IMAGE */
.resources-carousel .owl-nav {
   position: absolute;
    top: 35%; /* aligns with image */
    transform: translateY(-50%);
    width: 100%;
    display: flex;
     z-index: 20;
    /* justify-content: space-between; */
    pointer-events: none; /* allow only buttons clickable */
}
.resources-carousel .owl-nav button {
     position: absolute;
   pointer-events: all;
    background: var(--primary-color)!important;
    color: #fff !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: 0.3s ease;
    border-radius: 50%;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: 0.3s;
}
.resources-carousel .owl-nav button:hover {
    background: var(--primary-color) !important;
}
.resources-carousel .owl-nav .owl-prev {
    left: -60px; /* 👈 outside left */
}
.resources-carousel .owl-nav .owl-next {
    right: -60px; /* 👈 outside right */
}
/* 🔥 BOTTOM NAV */
.custom-nav {
     position: absolute;
    top: 45%; /* adjust based on image height */
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 20;
    pointer-events: none;
}

.custom-nav button {
     pointer-events: all;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.resource-carousel-card {
    background: #f4f6f9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: transform .3s ease;
    /* padding-bottom: 80px; */
    border: 1px solid rgba(0, 0, 0, 0.11);
}
/* Image wrapper */
.resource-carousel-image {
    position: relative;
}


/* Show on hover */
.resource-carousel-card:hover{
    opacity: 1;
}

/* Hover */
.custom-nav button:hover {
    background: #2e7d32;
}

/* Push outside edges like design */
.custom-nav .prev-btn {
    margin-left: 20px;
}

.custom-nav .next-btn {
    margin-right: 20px;
}
/* Dots container */
.resources-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
}

/* Each dot */
.resources-carousel .owl-dots .owl-dot {
    display: inline-block;
    margin: 0 5px;
}

/* Dot shape */
.resources-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ccc;
    display: block;
    border-radius: 50%;
    transition: 0.3s;
}

/* Active dot */
.resources-carousel .owl-dots .owl-dot.active span {
    background: var(--primary-color);
    width: 25px; /* pill style */
    border-radius: 20px;
}
img.avatar.avatar-40.photo.author-avatar-blog.me-2 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #6c757de8;
    object-fit: cover;
}
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-pill {
    background: #4caf4f99;
    color: #fff !important;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--secondary-font);
    text-decoration: none;
    transition: 0.3s ease;
}
a.tag-pill{
    background: var(--primary-color);
    color: #fff !important;
    /* padding: 8px 14px; */
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--secondary-font);
    text-decoration: none;
    transition: 0.3s ease;
}
/* Hover effect */
a.tag-pill:hover {
    background: var(--secondary-color); /* darker green */
}
.image_courtesy {
font-size: 12px;
    /* font-style: italic; */
    margin-top: 10px;
    float: left;
    font-weight: 400;
    font-family: var(--secondary-font);
    color: rgba(60, 76, 65, 1);
}
.image_courtesy a {
    font-size: 12px;
    /* font-style: italic; */
    margin-top: 10px;
    font-weight: 400;
    text-decoration: none;
    font-family: var(--secondary-font);
    color: #6c757dd6;
}
.blog-full-description {
    font-size: 16px;
    line-height: 1.5;
    color: #5e6b64;
    margin-bottom: 40px;
    font-family: var(--secondary-font);
}
.blog-title-list {
    margin-bottom: 50px;
}

.blog-title-list ul {
    padding-left: 20px;
    margin: 0;
}

.blog-title-list li {
    margin-bottom: 10px;
    color: #555;
     font-family: var(--secondary-font);
}

.blog-title-list li a {
    text-decoration: none;
    color: #6c757d;
    font-size: 16px;
    line-height: 1.5;
     font-family: var(--secondary-font);
}

/* Hover */
.blog-title-list li a:hover {
    color: var(--secondary-color) !important;
}
p.author_des {
    color: rgba(60, 76, 65, 1);
    font-size: 18px;
    font-weight: 400;
    font-family: var(--secondary-font);
    line-height: 1.5;
}
p.author_link>a {
    color: rgba(60, 76, 65, 1);
    font-weight: 600;
    text-decoration: none;
    font-family: var(--secondary-font);
    font-size: 16px;
}
.blog-full-description h1,
.blog-full-description h2,
.blog-full-description h3,
.blog-full-description h4,
.blog-full-description h5,
.blog-full-description h6 {
    font-weight: 700;
    color: var(--accent-color);
    margin-top: 25px;
    margin-bottom: 15px;
    line-height: 1.5;
}
.fm-form-container.fm-theme1 {
    width: 100% !important;
}
.show-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    overflow: hidden;
    font-size: 12px;
    transition: all 0.4s ease;
}

.show-more-btn:hover {
   background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
 color: #fff;
}
.show-more-btn:hover .arrow {
    transform: rotate(0deg); /* straight */
}
/* Flip text */
.show-more-btn:hover .text {
    transform: translateY(-100%);
}

.show-more-btn:hover .text-hover {
    transform: translateY(-100%);
}

/* Flip arrow */
.show-more-btn:hover .arrow {
    transform: translateY(-100%) rotate(-45deg);
    opacity: 0; 
}

.show-more-btn:hover .arrow-hover {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
    top: 13px;
}
section.author_section {
    padding: 0px 90px 90px;
}
/* IMAGE WRAPPER */
.blog-card-image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.blog-card-image img {
    width: 100%;
    display: block;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* ARROW */
.blog-card-arrow {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(18,165,85,1) 0%, rgba(74,76,60,1) 90%);

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

    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* HOVER EFFECT */
.blog-card-image:hover .blog-card-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* ICON */
.blog-card-arrow i {
    color: #fff;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

/* TITLE */
.blog-card-title a {
    text-decoration: none;
    color: var(--accent-color-text);
    font-weight: 500;
    font-family: var(--secondary-font);
    font-size: 16px;
    line-height: 1.5;
}

.blog-card-title a:hover {
    color: var(--secondary-color);
}

/* CARD SPACING */
.blog-card {
    margin-bottom: 20px;
}
p.blog-category {
    color: var(--primary-color);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: var(--secondary-font);
    text-transform: uppercase;
    font-weight: 500;
}
p.no-posts-msg {
    font-size: 30px;
    text-align: center;
    color: var(--primary-color);
    font-weight: 600;
       font-family: var(--secondary-font);
}
/* ----------ends---------------- */

/* --------------subscribe page css starts------------- */
.ns-wrap {
  padding: 60px 78px;
  margin-top: -4px;
      background: #f4f6f540;
}

.ns-box {
  max-width: 1400px;
  margin: auto;
}

.ns-grid {
  display: flex;
  gap: 40px;
  align-items: center;
}

.ns-leftcol {
  flex: 0 0 60%;
  max-width: 60%;
}

.ns-rightcol {
  flex: 0 0 40%;
  max-width: 40%;
}

.ns-rightcol img {
  width: 100%;
  border-radius: 14px;
}

/* TEXT */
.ns-heading {
  font-size: 40px;
    color: rgba(60, 76, 65, 1);
    margin-bottom: 15px;
    font-weight: 700;
    font-family: var(--primary-font);
}

.ns-text-main {
    font-size: 20px;
    color: var(--accent-color);
    margin-bottom: 10px;
    font-weight: 400;
    font-family: var(--secondary-font);
}

.ns-text-sub {
  color: var(--accent-color-text);
   font-size: 16px;
    font-weight: 400;
    font-family: var(--secondary-font);
  margin-bottom: 25px;
}

/* OPTIONS */
.ns-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.ns-item {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  flex: 1 1 calc(50% - 10px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.ns-item-full {
  flex: 1 1 100%;
}

.ns-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ns-item-top>h3 {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--secondary-font);
    color:var(--category-subheading-tag)
}
.ns-item>p {
 font-size: 12px;
    font-weight: 400;
    font-family: var(--secondary-font);
    color:var(--accent-color-text)
}
/* TOGGLE */
.ns-toggle-wrap {
  position: relative;
  width: 42px;
  height: 22px;
}

.ns-toggle-wrap input {
  display: none;
}

.ns-toggle-slider {
  position: absolute;
  background: #ccc;
  border-radius: 22px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  transition: 0.3s;
}

.ns-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.ns-toggle-wrap input:checked + .ns-toggle-slider {
  background: #4CAF50;
}

.ns-toggle-wrap input:checked + .ns-toggle-slider::before {
  transform: translateX(20px);
}

/* FORM */
.ns-form {
 margin-top: 25px;
    display: flex;
    background: #fff;
    padding: 5px;
    border: 2px solid #ccc;
    border-radius: 8px;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); */
}

.ns-input-field {
  flex: 1;
  border: none;
  padding: 14px;
  border-radius: 12px;
  outline: none;
}

.ns-submit-btn {
 position: relative;
 border: none;
    display: inline-flex;
    align-items: center; /* Keep center always */
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    overflow: hidden;
    font-size: 12px;
    transition: all 0.4s ease;
}
 .ns-submit-btn:hover {
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
 color: #fff;
 }

 /* Flip text */
.ns-submit-btn:hover .text {
    transform: translateY(-100%);
}

.ns-submit-btn:hover .text-hover {
    transform: translateY(-100%);
}

/* Flip arrow */
.ns-submit-btn:hover .arrow {
    transform: translateY(-100%) rotate(-45deg);
    opacity: 0; 
}

.ns-submit-btn:hover .arrow-hover {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
    top: 13px;
}

/* RESPONSIVE */
/* TABLET */
@media (max-width: 1024px) {
  .ns-leftcol {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .ns-rightcol {
    flex: 0 0 45%;
    max-width: 45%;
  }
/* div#\31 78form_view1 .newsletter_popup {
    left: 530px;
} */
#closing-form178, .fm-form-container.fm-theme1 .closing-form {
    top: -174px;
    right: -93px;
}
}

/* MOBILE */
@media (max-width: 768px) {
  .ns-grid {
    flex-direction: column;
  }
.ns-wrap {
    padding: 50px 12px 60px;

}
/* div#\31 78form_view1 .newsletter_popup {
    left: 530px !important;
} */
body.page-id-17107 {
    margin-top: -10px;
}
  .ns-leftcol,
  .ns-rightcol {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .ns-rightcol {
    margin-top: 20px;
  }
}

/* ----------------------------- */

.ns-main-wrapper {
   background: #f4f6f540;
    padding: 60px 78px;
  margin-top: -4px;
}

/* FLEX ROW */
.ns-flex-row {
    display: flex;
    align-items: center;
    gap: 40px;
}
.ns-inner-box {
    max-width: 1400px;
    margin: auto;
}
/* LEFT 60% */
.ns-left {
    flex: 0 0 60%;
    max-width: 60%;
}

/* RIGHT 40% */
.ns-right {
    flex: 0 0 40%;
    max-width: 40%;
}

.ns-right img {
    width: 100%;  height: 400px;  
    border-radius: 12px;
    object-fit: cover;
}

/* HEADER */
.ns-header h1 {
 font-size: 40px;
    color: rgba(60, 76, 65, 1);
    margin-bottom: 15px;
    font-weight: 700;
    font-family: var(--primary-font);
}

.ns-header p {
    font-size: 16px;
    font-weight: 400;
    font-family: var(--secondary-font);
    color:var(--accent-color-text)
}

.ns-sub {
    color: #8c9892;
}

/* CARDS */
.ns-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.ns-card {
    flex: 1 1 calc(50% - 10px);
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.ns-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 🔥 THIS FIXES VERTICAL ALIGNMENT */
    gap: 10px;
}
.ns-card-top>h3{
     font-size: 16px;
    font-weight: 700;
    font-family: var(--secondary-font);
    color:var(--category-subheading-tag)
}
.ns-desc>p {
font-size: 12px;
    font-weight: 400;
    font-family: var(--secondary-font);
    color:var(--accent-color-text)
}
/* FULL WIDTH CARD (optional for last one) */
.ns-card:nth-child(3) {
    flex: 1 1 100%;
    display: none;
}

/* SWITCH */
.ns-switch {
    position: relative;
    width: 42px;
    height: 22px;
}

.ns-switch input {
    display: none;
}

.ns-slider {
    position: absolute;
    background: #ccc;
    border-radius: 22px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ns-slider:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.ns-switch input:checked + .ns-slider {
    background: #4CAF50;
}

.ns-switch input:checked + .ns-slider:before {
    transform: translateX(20px);
}

/* EMAIL */
.ns-subscribe-box {
    margin-top: 25px;
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 5px;
    border: 2px solid #ccc;
}

.ns-input {
    flex: 1;
    border: none;
    padding: 14px;
    outline: none;
}

.ns-btn {
    background: #4CAF50;
    color: #fff;
    border: none;
    padding: 0 25px;
    border-radius: 10px;
}
.ns-right img {
    width: 100%;
    height: 400px;   /* 👈 makes it bigger */
    object-fit: cover;
}
/* RESPONSIVE */
/* =======================
   LARGE SCREENS (1200px+)
======================= */
@media (max-width: 1200px) {
    .ns-main-wrapper {
        padding: 50px 40px;
    }
}

/* =======================
   TABLETS (992px)
======================= */
@media (max-width: 992px) {

    .ns-main-wrapper {
        padding: 40px 30px;
    }
 .ns-flex-row {
        flex-direction: column;
        gap: 30px;
    }
    .ns-left,
    .ns-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ns-right img {
        max-height: 350px;
        object-fit: cover;
    }

    .ns-header h1 {
        font-size: 32px;
    }

    .ns-card {
        flex: 1 1 100%;
    }
    /* 🔥 FIX START */
    .ns-right {
        width: 100%;
    }

    .ns-right img {
        width: 100%;
        height: auto;        /* maintain ratio */
        max-height: none;    /* ❌ remove restriction */
        object-fit: cover;
        border-radius: 12px;
    }
    /* 🔥 FIX END */

}

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

    .ns-main-wrapper {
        padding: 30px 20px;
    }

    .ns-header h1 {
        font-size: 26px;
        line-height: 1.3;
    }

    .ns-header p {
        font-size: 14px;
    }

    .ns-card-grid {
        gap: 15px;
    }

    .ns-card {
        padding: 16px;
    }

    .ns-card-top h3 {
        font-size: 14px;
    }

    .ns-desc p {
        font-size: 12px;
    }

    /* INPUT + BUTTON STACK */
    .ns-subscribe-box {
        flex-direction: row;
        gap: 10px;
        padding: 10px;
    }

    .ns-input {
        width: 100%;
        padding: 12px 0px;
        font-size:10px;
    }

    .ns-btn {
        width: auto;
        height: 45px;
        justify-content: center;
    }
}

/* =======================
   SMALL MOBILE (480px)
======================= */
@media (max-width: 480px) {

    .ns-main-wrapper {
        padding: 20px 15px;
    }

    .ns-header h1 {
        font-size: 22px;
    }

    .ns-header p {
        font-size: 13px;
    }

    .ns-card {
        padding: 14px;
    }

    .ns-card-top {
        gap: 6px;
    }

    .ns-card-top h3 {
        font-size: 13px;
    }

    .ns-switch {
        transform: scale(0.9);
    }
}

/* -----------------contact us css starts-------------- */

.contact-wrapper {
  padding: 60px;
}

.contact-card {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
      background: rgb(241 243 241);
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.08); */
      max-width: 1200px;   
  width: 100%;
    margin: auto;
}

/* LEFT SIDE */
.contact-left {
  width: 30%;
  padding: 30px;
  color: #fff;
  margin: 14px;
  border-radius: 8px;
  background: rgba(18, 165, 85, 1);
  position: relative;
  overflow: hidden; /* important */
  display: flex;
  flex-direction: column;
   /* justify-content: space-between; */
}

/* BIG ellipse */
.contact-left::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  bottom: -40px;
  right: -40px;
}

/* SMALL ellipse */
.contact-left::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  bottom: 60px;
  right: 60px;
}

.contact-left h2 {
  margin-bottom: 15px;
  font-size: 28px;
    font-weight: 600;
    font-family: var(--primary-font);
    line-height: 1.5;
}

.contact-left p {
  font-size: 14px;
  line-height: 1.5;
    font-weight: 400;
    font-family: var(--secondary-font);
    color: rgba(239, 231, 231, 1);
}

.contact-info {
  margin-top: 40px;
}

.contact-info p {
  margin-bottom: 40px;
}

/* RIGHT SIDE */
.contact-right {
  width: 70%;
  padding: 60px 30px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .contact-card {
    flex-direction: column;
  }

  .contact-left,
  .contact-right {
    width: 100%;
            margin: 0;
  }
  .contact-right
 {
        width: 100%;
       padding: 20px 30px !important;       
        margin-bottom: -50px !important;
    }
}

.share_on_contact_banner {
  display: flex;
  gap: 12px;
  margin-top: 90px;
}
.banner-contact-icon {
    position: relative;
    width: 30px;
    height: auto;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    overflow: hidden;
}

.contact_us_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0px;
}

/* Arrow (always visible) */
.contact_us_btn::after {
    content: "\f101"; /* Font Awesome angles-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: -62px;
    width: 0px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;/* Green arrow */
    transform: rotate(-45deg);
    background: transparent;  /* ✅ Transparent background */
    border-radius: 50%;
    transition: transform 0.4s ease;
}

/* Rotate on hover */
.contact_us_btn:hover::after {
    transform: rotate(0deg);
}
/* Smooth background transition */
.contact_us_btn .button-submit {
    transition: background 0.3s ease;
}

/* Change background when hovering whole wrapper */
/* .contact_us_btn:hover .button-submit {
    background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
    opacity: 1.1;
} */
/* -------------------------author page css starts------------- */
/* MAIN WRAPPER */
.contact-layout {
display: flex;
    gap: 30px;
    max-width: 1400px !important;
    margin: auto;
    padding: 60px 0px;
}

.contact-sidebar {
position: relative;
  height: 100%;
  width: 30%;
  align-self: flex-start; /* 🔥 VERY IMPORTANT */
}
/* LAYOUT */
.blog-layout {
  display: flex;
  gap: 30px;
  max-width: 1400px;
  margin: auto;
}

/* LEFT */
/* .blog-main {
  width: 70%;
} */
.blog-content {
    width: 100%;
    max-width: 100%;
}
/* BLOG CARD */
.blog-card {
  /* display: flex; */
  gap: 20px;
  margin-bottom: 30px;
}

.blog-img {
  width: 280px;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
}

/* CONTENT */


.blog-tag {
  background: rgba(18, 165, 85, 1);
  opacity: 0.8;
  color: #fff;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 20px !important;
  font-family: var(--secondary-font);
}

.blog-meta {
  font-size: 12px;
  color: var(--category-tag-font);
  display: flex;
  font-family: var(--secondary-font);
  gap: 15px;
  margin-bottom: 10px;
}

.blog-content p {
    color: rgba(60, 76, 65, 1);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 0px;
    font-family: var(--secondary-font);
}

/* RIGHT */
/* .blog-sidebar {
  width: 30%;
} */

/* STICKY */
.author-sticky-sidebar {
  position: fixed;
  top: 120px;
}

/* SIDEBAR BOX */
.sidebar-box {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.sidebar-box h4 {
  margin-bottom: 10px;
}

.sidebar-box ul {
  padding-left: 18px;
}

.sidebar-box li {
  margin-bottom: 8px;
  font-size: 14px;
}
.blog-content h3>a {
    font-size: 24px;
    margin: 10px 0;
    font-weight: 700;
    font-family: var(--primary-font);
    color: var(--category-subheading-tag);
    text-decoration: none;
    
    }
/* -------------ends---------------- */
/* search page css starts */
.search-blog-card {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

/* FORM WRAPPER */
.kb-search-form {
  margin-top: 20px;
}

/* SEARCH BOX */
.kb-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  /* padding: 8px; */
  /* height: 46px; */
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #eee;
  transition: 0.3s;
  width: 90%;
  max-width: 100%;
}

/* HOVER EFFECT */
.kb-search-box:focus-within {
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
  border-color: var(--primary-color);
}

/* INPUT */
.kb-search-box input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 15px 12px 40px;
  font-size: 14px;
  border-radius: 50px;
}

/* ICON */


/* BUTTON */
.kb-search-box button {
   background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
      border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
  cursor: pointer;
  height: 46px;
    width: 15%;
  font-size: 14px;
      transform: translateY(-50%) !important;
  transition: 0.3s;
}

/* BUTTON HOVER */
.kb-search-box button:hover {
   background: linear-gradient(90deg, rgba(18, 165, 85, 1) 0%, rgba(74, 76, 60, 1) 90%);
  transform: translateY(-1px);
}
/* sidebar */
.trending-widget {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.trending-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  color: #183354;
}

/* CARD */
.trending-card {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

/* IMAGE */
.trending-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px !important;
  margin-bottom: 10px;
}

/* META */
.trending-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.trend-category {
  letter-spacing: 0.5px;
}

.trend-date {
  font-size: 11px;
}

/* TITLE */
.trending-post-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.trending-post-title a {
  text-decoration: none;
  color: #3C4C41;
}

.trending-post-title a:hover {
  color: var(--secondary-color);
}
.blog-meta>span {
    font-size: 12px;
    font-weight: 400;
    color: var(--category-tag-font);
    text-transform: uppercase;
    font-family: var(--secondary-font);
}
.search-page-container {
    width: 1400px;
    max-width: 100%;
    margin: 0 0px 0px 20px;
}
.trending-meta>span {
    justify-content: space-between;
    font-size: 10px;
    font-weight: 400;
    color: var(--category-tag-font);
    text-transform: uppercase;
    font-family: var(--secondary-font);
}
  /* terms of service page css  */
.page-id-3619 .tr-details p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--accent-color-text);
    /* max-width: 520px; */
    margin-bottom: 40px;
    font-weight: 400;
    font-family: var(--secondary-font);
}
.page-id-3619 .tr-details>h4 {
    color: rgba(60, 76, 65, 1);
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 22px;
}
.page-id-3619 .tr-details>p>a {
    color: rgb(42 174 103);
    text-decoration: none;
    font-style: italic;
}.subscribe_image {
  width: 100%;
  height: auto;
  display: block;
}
/* about us css starts*/
h2.abt-core-heading {
    font-size: 40px;
    font-family: var(--primary-font);
    font-weight: 700;
        margin-bottom: 20px;
}
.abt-core-heading-span {
    color: var(--primary-color);
    font-family: var(--primary-font);
    margin-right: 8px; 
    display: inline-block; /* 🔥 required for transform */
    transition: transform 0.3s ease, color 0.3s ease;
}
.abt-core-heading-span:hover {
    transform: scale(1.1);
    cursor: pointer;
}
.datacore { 
    padding: 70px !important;
    background-color: #FFFFFF;
}
p.abt-core-paragraph {
    font-size: 18px;
    color: #3C4C41;
    max-width: 1020px;
    line-height: 1.5;
    font-family: var(--secondary-font);
        text-align: center;
    display: contents;
}
.abt-container {
    padding: 30px;
}
h5.abt-card-heading {
    font-size: 28px;
    color: #3C4C41;
    font-weight: 700;
    padding-bottom: 10px;
    font-family: var(--secondary-font);
}
.abt-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.abt-card-img-top {
    width: 380px;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* 🔥 Gradient overlay */
.abt-img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0)
    );
    border-radius: 8px;
    width: 380px;
}
.abt-card-text-1
{
  font-size:16px;
  color:#3C4C41;
  font-weight:400;
   font-family: var(--secondary-font);
  line-height:24px;
}
.abt-card-text-2
{
  font-size:16px;
  color:#3C4C41;
  font-weight:400;
  line-height:24px;
   font-family: var(--secondary-font);
}
h2.mission-heading {
    font-size: 48px;
    color: var(--accent-color);
    font-weight: 700;
    line-height: 1.5;
    font-family: var(--primary-font);
    text-align: center;
    margin-top: 35px;
}
p.mission-text{
    font-size: 20px;
    color: var(--accent-color);
    font-weight:400;
    line-height:28px;
    margin-top:20px;
    font-family: var(--secondary-font);
}
p.vision-text {
    font-size: 20px;
    color: var(--accent-color);
    font-weight:400;
    line-height:28px;
    margin-top:30px;
    margin-bottom: 30px;
    font-family: var(--secondary-font);
}
p.mission-text span,
p.vision-text span {
    font-weight: 700;
     font-family: var(--secondary-font);
}

.mission-cards {
    margin-top: 50px;
}
.mission-card-description
{
    font-size: 20px;
   color: var(--accent-color);
   margin-bottom: 50px;
   font-family: var(--secondary-font);
}
.abt-card-title {
    font-size: 20px;
    font-weight: 600;
    margin: 20px;
    font-family: var(--primary-font);
}
p.abt-card-text {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
       font-family: var(--secondary-font);
}
section.section-bg.mission-section.reveal.active {
    padding: 30px 0px 100px 0px !important;
}
.highlight {
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-weight: 600;

    display: inline-block;            
    transition: transform 0.25s ease, 
                text-shadow 0.25s ease;
}

.highlight:hover {
    transform: scale(1.08) translateY(-2px); 
    cursor: pointer;
}
    .stats-section {
      background-color: #F5F7FA;
      padding: 60px 0;
    }
    h3.core-stats-heading {
    font-size: 36px;
    color: #4D4D4D;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: var(--primary-font);
}
p.core-stats-text {
    font-size: 16px;
    font-weight: 400;
    font-family: var(--secondary-font);
}
h3.core-heading {
    font-size: 40px;
    color: #3C4C41;
    font-weight: 700;
    font-family: var(--primary-font);
}
p.core-text {
    font-size: 16px;
     color: #3C4C41;
    font-weight: 400;
    font-family: var(--secondary-font);
}
.what-we-do-card-body {
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Title */
.what-we-do-abt-card-title-1 {
    font-size: 22px;
    font-weight: 700;
    color: #4D4D4D;
    margin-bottom: 15px;
    line-height: 36px;
    font-family: var(--primary-font);
}

/* Description */
.what-we-do-abt-abt-card-text-1 {
    font-size: 16px;
    color: #4D4D4D;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
    font-family: var(--secondary-font);
}
section.what-we-do {
    padding: 30px 0px 60px 0px;
}
.mission-container {
    padding: 0px 80px;
}
h4.magic-link-title {
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: 'Lato' !important;
    color: #0C1421 !important;
    margin-bottom: 10px !important;
}

/* ------------blog single page summerize with ai css starts */
.ai-summary-wrapper{
    margin-top:40px;
    margin-bottom: 40px;
    padding:25px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fafafa;
}

.ai-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.ai-btn {
     display: flex;

    align-items: center;

    gap: 7px;

    background: transparent;

    border: none;

    color: #2563ff;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    padding: 0;
}



#ai-summary-result{
    line-height:1.8;
    display: flex;
    gap: 30px;
    /* color: var(--primary-color); */
    font-size: 14px;
    font-weight: 400;

     /* margin-top: 20px; */
}

.ai-loader{
    width:40px;
    height:40px;
    border:4px solid #ddd;
    border-top:4px solid #000;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:auto;
}

@keyframes spin{
    100%{
        transform:rotate(360deg);
    }
}
.ai-btn img {

    width: 18px;

    height: 18px;

    object-fit: contain;
}

.ai-btn:hover {

    opacity: 0.7;
}
.ai-summary-header {

    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;
}

.ai-summary-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}


/* ---------------ends---------------- */