/*
Theme Name: TechnUm
Theme URI: http://demo.artureanec.com/themes/technum/
Author: Artureanec
Author URI: https://demo.artureanec.com/
Description: Meet WordPress Theme by Artureanec - really amazing, powerful, clean and ultramodern product, that created with love and attention to details. We know it's difficult to represent yourself on the web in the right way, that's why we spent a lot of time trying to make our Theme more effective. It's flexible, easy customizable, high-quality and really easy to use! So everyone can make awesome website with it. Hope you'll like it. Enjoy!
Version: 1.0.15
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: technum
*/

@media screen and (min-width: 1024px) {


    #home_about_left{

        padding-left: 8.33333333%;
    }
    #video-row .elementor-row{
        align-items: flex-end;
    }

    #video_txt{
        font-size: 6.875rem;
        color: #e9e9e9;
        font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
        text-transform: uppercase;
        position: relative;
        line-height: 1;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-style: italic;
    }
    #global-count{
        background-color: white;
        z-index: 1;
    }

.header.header-position-over{

    background: white !important;
    margin-top: 45px;
    width: 80%;
    /* justify-content: center; */
    margin: 0 auto;
    margin-top: 45px;

}

.header, .site-search, .header.sticky-header-on.sticky-ready .sticky-wrapper

{
    background-color: #fff !important;
}

.mobile-header, .mobile-header.sticky-header-on.sticky-ready .sticky-wrapper {
    background-color: #2d2d2d !important;
}

.mobile-header-menu-container {
    background-color: #fff !important;
}
.header a, .header .main-menu > li > a, .header .logo-link .logo-site-name, .header .header-icon, .error-404-header .logo-link .logo-site-name, .mini-cart .mini-cart-trigger, .mini-cart .mini-cart-trigger:hover, .header-type-2 .dropdown-trigger .dropdown-trigger-item:before, .header-type-3 .dropdown-trigger .dropdown-trigger-item:before, .callback .callback-text {
    color: #000000;
}

/* 移动端样式仅在移动设备上应用 */
@media only screen and (max-width: 991px) {
    .mobile-header a, .mobile-header .logo-link .logo-site-name, .mobile-header .header-icon {
        color: #ffffff !important;
    }

    .mobile-header-menu-container a, .mobile-header-menu-container .logo-link .logo-site-name, .mobile-header-menu-container .header-icon, .mobile-header-menu-container {
        color: #000000 !important;
    }
}
}


/* 强制桌面端菜单链接为深色 */
@media only screen and (min-width: 992px) {
    .header .main-menu > li > a {
        color: #333333 !important;
    }
    
    .header .main-menu > li > a:hover,
    .header .main-menu > li.current-menu-ancestor > a,
    .header .main-menu > li.current-menu-parent > a,
    .header .main-menu > li.current-menu-item > a {
        color: #003D96 !important;
    }
}

.product-rating-wrapper{
    display: none;
    min-height: auto !important;
}
.content-woocommerce-wrapper .price{
    display: none !important;
}

/* Footer Responsive Improvements */
@media only screen and (max-width: 480px) {
  .footer-section {
    padding: 20px 0;
  }

  .footer-widgets {
    padding: 0 0 20px;
  }

  .footer-columns-row .footer-column {
    margin: 10px auto 0;
    padding: 0 10px;
    text-align: center;
  }

  .footer ul.footer-menu {
    margin: -5px -8px 10px;
  }

  .footer ul.footer-menu li {
    margin: 8px 8px 0;
    font-size: 14px;
  }

  .footer ul.footer-additional-menu li {
    font-size: 13px;
  }
}

/* Enhanced Footer Styling */
.footer-top {
  position: relative;
  overflow: hidden;
}

.footer-top img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-section {
  box-shadow: 0 -2px 10px rgba(0, 61, 150, 0.1);
}

.footer-widgets .widget {
  margin-bottom: 25px;
}

.footer-widgets .widget:last-child {
  margin-bottom: 0;
}

.footer ul.footer-menu a {
  transition: color 0.3s ease;
  padding: 5px 0;
}

.footer ul.footer-menu a:hover {
  color: #ffffff !important;
  opacity: 0.8;
}

.footer-copyrights-container {
  font-size: 13px;
  line-height: 1.6;
}

.footer ul.wrapper-socials a {
  transition: all 0.3s ease;
}

.footer ul.wrapper-socials a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

/* ===============================
   移动端首页优化样式
   =============================== */

/* 移动端首页banner优化 */
@media only screen and (max-width: 768px) {
  /* 首页banner区域 */
  .hero-slider-section {
    padding: 0;
    margin-top: 0;
  }
  
  .elementor-section {
    padding: 20px 0 !important;
  }
  
  /* Owl Carousel 移动端修复 */
  .owl-carousel .owl-item {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  .owl-stage {
    transform: none !important;
    width: 100% !important;
  }
  
  .content-slider-container {
    overflow: hidden;
  }
  
  /* Banner内容区域 */
  .slide-content-column {
    text-align: center;
    padding: 20px 15px;
  }
  
  .slide-image-column {
    margin-top: 20px;
    text-align: center;
  }
  
  /* 标题优化 */
  .technum-heading-content {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px;
  }
  
  /* 按钮优化 */
  .technum-button {
    padding: 12px 20px !important;
    font-size: 14px !important;
    display: inline-block;
    margin: 10px 0;
  }
  
  /* 视频区域优化 */
  #video_txt {
    font-size: 3rem !important;
    writing-mode: horizontal-tb !important;
    text-align: center;
    margin: 20px 0;
  }
  
  #video-row .elementor-row {
    flex-direction: column;
    align-items: center !important;
  }
}

/* 小屏手机优化 */
@media only screen and (max-width: 480px) {
  .hero-slider-section {
    min-height: auto;
  }
  
  .slide-content-column {
    padding: 15px 10px;
  }
  
  .technum-heading-content {
    font-size: 20px !important;
  }
  
  .technum-button {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  #video_txt {
    font-size: 2rem !important;
  }
  
  /* 首页关于区域 */
  #home_about_left {
    padding-left: 0 !important;
    text-align: center;
  }
}

/* 移动端头部样式优化 */
@media only screen and (max-width: 768px) {
  .header.header-position-over {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    width: 100% !important;
    margin: 0 !important;
    padding: 0 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .mobile-header {
    background: rgba(45, 45, 45, 0.98) !important;
    backdrop-filter: blur(10px);
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    height: 82px;
    display: flex;
    align-items: center;
  }
  
  .mobile-header-row {
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }
  
  /* Logo垂直居中优化 */
  .mobile-header .logo-container {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .mobile-header .logo-link {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .mobile-header .logo {
    display: flex;
    align-items: center;
  }
  
  /* Logo优化 */
  .logo-container {
    flex: 1;
  }
  
  .logo-container img,
  .mobile-header .logo img {
    max-height: 50px;
    width: auto;
    height: auto;
    vertical-align: middle;
  }
  
  /* 头部图标优化 */
  .mobile-header .header-icons-container {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
  }
  
  .header-icon {
    padding: 8px;
    transition: all 0.3s ease;
  }
  
  .header-icon:hover {
    transform: scale(1.1);
  }
  
  /* 汉堡菜单优化 */
  .mobile-header .menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  .hamburger {
    width: 24px;
    height: 18px;
    position: relative;
    display: inline-block;
  }
  
  .hamburger span {
    display: block;
    height: 2px;
    background: #000;
    border-radius: 1px;
    transition: all 0.3s ease;
    position: absolute;
    left: 0;
    right: 0;
  }
  
  .mobile-header .hamburger span {
    background: #fff !important;
  }
  
  .hamburger span:nth-child(1) {
    top: 0;
  }
  
  .hamburger span:nth-child(2) {
    top: 8px;
  }
  
  .hamburger span:nth-child(3) {
    top: 16px;
  }
  
  /* 活跃状态的汉堡菜单 */
  .menu-trigger.active .hamburger span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
  }
  
  .menu-trigger.active .hamburger span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-trigger.active .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    top: 8px;
  }
}

/* 移动端深色主题额外样式 */
@media only screen and (max-width: 991px) {
  /* 确保移动端顶部导航栏文字为白色 */
  .mobile-header,
  .mobile-header .header-icon,
  .mobile-header .menu-trigger {
    color: #ffffff !important;
  }
  
  /* 移动端顶部菜单图标颜色 */
  .mobile-header .header-icon i {
    color: #ffffff !important;
  }
  
  /* 展开菜单的文字为黑色 */
  .mobile-header-menu-container,
  .mobile-header-menu-container .main-menu a,
  .mobile-header-menu-container .contact-item,
  .mobile-header-menu-container .contact-item a,
  .mobile-header-menu-container .sub-menu-trigger {
    color: #333333 !important;
  }
  
  /* 关闭按钮 */
  .menu-close-icon:before,
  .menu-close-icon:after {
    background: #333 !important;
  }
  
  /* 活跃菜单项 */
  .mobile-header-menu-container .main-menu li.current-menu-item > a,
  .mobile-header-menu-container .main-menu li.active > a {
    color: #0056b3 !important;
  }
}

/* ===============================
   移动端菜单样式优化
   =============================== */

/* 移动端菜单容器优化 */
@media only screen and (max-width: 768px) {
  .mobile-header-menu-container {
    width: 100%;
    right: -100%;
    background: #ffffff;
    padding: 0;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .mobile-header-menu-container.active {
    right: 0;
  }
  
  
  /* 主菜单样式 */
  .mobile-header-menu-container nav {
    padding: 20px 0;
  }
  
  .mobile-header-menu-container .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .mobile-header-menu-container .main-menu li {
    border-bottom: 1px solid #f0f0f0;
    position: relative;
  }
  
  .mobile-header-menu-container .main-menu li:last-child {
    border-bottom: none;
  }
  
  .mobile-header-menu-container .main-menu a {
    display: block;
    padding: 15px 25px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
  }
  
  .mobile-header-menu-container .main-menu a:hover {
    color: #003D96;
    background: rgba(0, 61, 150, 0.05);
    padding-left: 35px;
  }
  
  .mobile-header-menu-container .main-menu a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #003D96;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  
  .mobile-header-menu-container .main-menu a:hover:before {
    transform: scaleX(1);
  }
  
  /* 子菜单支持 */
  .mobile-header-menu-container .main-menu .sub-menu {
    background: #f8f9fa;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .mobile-header-menu-container .main-menu li:hover .sub-menu {
    max-height: 200px;
  }
  
  .mobile-header-menu-container .main-menu .sub-menu a {
    padding: 12px 25px 12px 45px;
    font-size: 14px;
    color: #666;
    font-weight: 400;
  }
  
  /* 移动端联系信息 */
  .header-mobile-contacts {
    padding: 25px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
  }
  
  .contact-item {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
  }
  
  .contact-item:last-child {
    border-bottom: none;
  }
  
  .contact-item:before {
    content: '\1F4DE';
    margin-right: 10px;
    font-size: 16px;
  }
  
  .contact-item-address:before {
    content: '\1F4CD';
  }
  
  .contact-item-email:before {
    content: '\2709';
  }
  
  .contact-item a {
    color: #003D96;
    text-decoration: none;
    font-weight: 500;
  }
  
  /* 社交媒体链接 */
  .header-mobile-socials {
    padding: 20px 25px;
    text-align: center;
    background: #003D96;
  }
  
  .header-mobile-socials .wrapper-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0;
  }
  
  .header-mobile-socials .wrapper-socials li {
    margin: 0;
  }
  
  .header-mobile-socials .wrapper-socials a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  
  .header-mobile-socials .wrapper-socials a:hover {
    background: white;
    color: #003D96;
    transform: translateY(-2px);
  }
  
  /* 移动端按钮 */
  .header-mobile-button {
    padding: 20px 25px;
    text-align: center;
    background: #f8f9fa;
  }
  
  .header-mobile-button .technum-button {
    background: #003D96;
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 61, 150, 0.3);
  }
  
  .header-mobile-button .technum-button:hover {
    background: #002a6b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 61, 150, 0.4);
  }
}

/* 超小屏幕菜单优化 */
@media only screen and (max-width: 480px) {
  .mobile-header-menu-container .main-menu a {
    font-size: 15px;
    padding: 12px 20px;
  }
  
  .mobile-header-menu-container .main-menu a:hover {
    padding-left: 30px;
  }
  
  .header-mobile-contacts,
  .header-mobile-button {
    padding: 15px 20px;
  }
  
  .contact-item {
    font-size: 14px;
  }
}

/* ===============================
   移动端效果增强
   =============================== */

/* 全局移动端优化 */
@media only screen and (max-width: 768px) {
  /* 页面滚动优化 */
  html {
    scroll-behavior: smooth;
  }
  
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* 触摸优化 */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 按钮触摸效果 */
  .technum-button,
  .header-icon,
  .menu-trigger {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* 防止意外缩放 */
  input[type="search"],
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    font-size: 16px;
    -webkit-appearance: none;
    border-radius: 0;
  }
  
  /* 提高点击区域 */
  .header-icon {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 动画性能优化 */
  .mobile-header-menu-container,
  .hamburger span,
  .technum-button,
  .main-menu a {
    will-change: transform, opacity;
  }
  
  /* 图片响应式优化 */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* 文字可读性优化 */
  body {
    font-size: 14px;
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    margin-bottom: 15px;
  }
  
  p {
    margin-bottom: 15px;
  }
  
  /* 表单元素优化 */
  select,
  input,
  textarea {
    max-width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }
  
  /* 列表和表格优化 */
  table {
    width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }
  
  /* 内容区域间距优化 */
  .elementor-section {
    margin: 0 !important;
  }
  
  .elementor-container {
    padding: 0 15px !important;
  }
  
  /* 卡片和容器优化 */
  .widget,
  .elementor-widget {
    margin-bottom: 20px;
  }
  
  /* 导航和面包屑优化 */
  .breadcrumb {
    font-size: 13px;
    padding: 10px 0;
  }
  
  /* 搜索结果优化 */
  .search-results {
    padding: 0 15px;
  }
  
  /* 加载动画优化 */
  .loading,
  .preloader {
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
}

/* 横屏手机优化 */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  .mobile-header-menu-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .mobile-header-menu-container .main-menu a {
    padding: 10px 25px;
  }
  
  .header-mobile-contacts {
    padding: 15px 25px;
  }
}

/* 高分辨率屏幕优化 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  .logo-container img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
  @media only screen and (max-width: 768px) {
    .mobile-header-menu-container {
      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
      color: #fff;
    }
    
    .mobile-header-menu-container .main-menu a {
      color: #fff;
    }
    
    .mobile-header-menu-container .main-menu a:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .header-mobile-contacts {
      background: #2d2d2d;
      color: #fff;
    }
  }
}

/* ===============================
   移动端菜单调试和修复
   =============================== */

/* 确保移动端菜单容器存在且可见 */
.mobile-header-menu-container {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
}

.mobile-header-menu-container.active {
  right: 0;
}

/* body overlay 样式 */
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

/* 确保菜单触发器可点击 */
.menu-trigger {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 强制显示移动端菜单（调试用） */
@media only screen and (max-width: 768px) {
  .mobile-header-menu-container {
    display: block !important;
  }
  
  /* 菜单触发器调试样式 */
  .menu-trigger {
    border: 2px solid transparent;
    padding: 8px;
    border-radius: 4px;
  }
  
  .menu-trigger:hover {
    border-color: rgba(0, 61, 150, 0.3);
    background: rgba(0, 61, 150, 0.1);
  }
  
  .menu-trigger:active {
    background: rgba(0, 61, 150, 0.2);
  }
}

/* ===============================
   提高菜单的z-index以及其他修复
   =============================== */

/* 提高body overlay的优先级 */
body.menu-open {
  overflow: hidden;
}

body.menu-open .body-overlay {
  z-index: 9998;
}

body.menu-open .mobile-header-menu-container {
  z-index: 9999;
}

/* 强制显示菜单在所有屏幕尺寸 */
.mobile-header-menu-container {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
}

/* 确保汉堡菜单显示 */
.hamburger {
  width: 24px;
  height: 18px;
  position: relative;
  display: inline-block;
}

.hamburger span {
  display: block;
  height: 2px;
  background: #000;
  border-radius: 1px;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
  right: 0;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 8px;
}

.hamburger span:nth-child(3) {
  top: 16px;
}

/* 菜单打开状态的汉堡菜单 */
.menu-trigger.active .hamburger span:nth-child(1) {
  transform: rotate(45deg);
  top: 8px;
}

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

.menu-trigger.active .hamburger span:nth-child(3) {
  transform: rotate(-45deg);
  top: 8px;
}

/* 移动端菜单内容样式 */
.mobile-header-menu-container .main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-header-menu-container .main-menu li {
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.mobile-header-menu-container .main-menu li:last-child {
  border-bottom: none;
}

.mobile-header-menu-container .main-menu a {
  display: block;
  padding: 15px 25px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.mobile-header-menu-container .main-menu a:hover {
  color: #003D96;
  background: rgba(0, 61, 150, 0.05);
  padding-left: 35px;
}

/* 移动端菜单头部 */
.mobile-header-menu-container .mobile-header-row {
  background: #003D96;
  padding: 15px 20px;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 61, 150, 0.2);
}

.mobile-header-menu-container .header-icons-container {
  justify-content: flex-end;
}

.menu-close {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.menu-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.menu-close-icon {
  width: 20px;
  height: 20px;
  position: relative;
}

.menu-close-icon:before,
.menu-close-icon:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: white;
  top: 50%;
  left: 0;
  transform-origin: center;
}

.menu-close-icon:before {
  transform: translateY(-50%) rotate(45deg);
}

.menu-close-icon:after {
  transform: translateY(-50%) rotate(-45deg);
}