@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: 100%;
      max-width: 800px;
      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: 66px;
  }

  .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;
      height: 20px;
  }

  .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---------------- */