/*
    Template  Name: Relstate
*/

/*
Table Of Content

1. header top area
2. main menu area
3. slider area
4. video slider area  
5. breadcum area
6. about area
7. feature area
8. service area
9. choose area
10. project area
11. team area
12. testimonial area
13. brand area
14. faq area
15. call to action
16. contact area
17. single page price area
18. progess bar area
19. circle progress
20. blog area
21. portfolio area
22. project information area
23. single blog page area 
24.  footer area

*/

/* ======= site font family ==========*/
@import url('css2.css');

:root{
    --blackc: #000;
    --whitec: #fff;
    --bgcolor: #000000;
    --brcolor: #666666;
    --paracolor: #696969;
    --hoverbg: #dc3e03;
    --titlecolor: #000;
}
html,body{
    overflow-x: hidden;
}
/* defult css */
body{
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    font-family: "Jost", sans-serif;
    overflow: hidden;
    color: var(--paracolor);
}

h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    font-size: 24px;
    font-weight: 700;
    color: var(--titlecolor);
    line-height: 1.2;
    font-family: "Jost", sans-serif;
    padding: 0;
    margin-bottom: 10px;
    
}
h1{
    font-size: 30px;
}
h2{
    font-size: 24px;
}
h3{
    font-size: 20px;
}
h4{
    font-size: 18px;
}
h5{
    font-size: 15px;
}
h6{
    font-size: 15px;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{ 
    color:inherit;    
}
.btn-primary:focus,
select:focus,
textarea:focus,
input:focus{
   box-shadow: none !important;
	border: none;
}
textarea,
input{
	outline:none;
}
.btn:focus {
    text-decoration: none;
    outline: none;
	box-shadow: none;
}
input:focus,
button:focus{
	border-color:transparent;
	outline-color:transparent;
}
textarea:focus{
	border-color:transparent;
	outline-color:transparent;	
}
::-moz-placeholder {
    font-size: 16px;
}
::-webkit-input-placeholder {
    font-size: 16px;
}
:-ms-input-placeholder {
    font-size: 16px;
}
::placeholder {
    font-size: 16px;
}
a{
    font-size: 15px;
    font-weight: 500;
    font-family: "Jost", sans-serif;
    text-decoration: none !important;
    color: var(--blackc);
    transition: .5s;
}
a:focus, 
a:hover {
    text-decoration: none;
	outline: none;
} 
a:hover:hover{
    color: var(--brcolor);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active{
  transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;	
}
p.form-messege{
    margin-top: 8px;
}
.witr_all_pd0{
    padding: 0;
}
/* highlight color css */
.highlight{
    color: var(--brcolor);
}


/*======= header top area start =====*/
.header_top_area {
    background-color: #ffffff;  /* 整体白色背景 */
    padding: 10px 390px;
    height: 110px;
    position: relative;
}
/* header left */
.header_left span, .header_right span{
    font-size: 15px;
    font-weight: 500;
    color: var(--whitec);
}
.header_left span, .header_left a {
    margin: 0 15px 0 0;
    color: var(--whitec);
}
.header_left span i,
.header_left a i{
    margin-right: 6px;
}
/* header right */
.header_right a{
    margin-left: 12px;
    color: var(--whitec);
}
.header_left a:hover, .header_right a:hover{
    color: var(--textcolor);
}
.header_right span i{
    margin-right: 5px;
}
/*=========== header top area end =============*/


/*======== mobile menu area start ==========*/
.mobile_logo_area{
    display:none !important;
}
.mean-container a.meanmenu-reveal {
    display: none !important;
}
.mean-container .mean-nav > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}
.mean-container .mean-bar {
    background: #fff;
    padding: 0;
}
.mean-container .mean-nav ul li {
    border-top: 0px solid #ddd;
}
.mean-container .mean-nav ul li li a,
.mean-container .mean-nav ul li a {
    color: #444;
}
.mean-container .mean-nav ul li li a {
    border-top: 1px solid #ddd;
}
.mean-container .mean-nav ul li a:hover {
    color: #ff4a17;
}
.mobile_p {
    position: fixed;
    right: 0;
    width: 300px;
    padding: 80px 20px 0px;
    overflow-y: scroll;
    top: 0;
    height: 100%;
    z-index: 9999;
    display: block;
    transition: 0.5s all;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);
    transform: translateX(100%);
    background: #ffffff;
}
.tx-s-open {
    transform: translateX(0);
}
.mobile_p .tuetion_theme_widget > div.widget_block {
    padding: 0;
}
.mobile_p .tuetion_theme_widget > div {
    padding: 20px 0px 20px;
    box-shadow: none;
}
.mean-container .mean-nav ul li a {
    border: 0;	
    width: 100%;
    border-top: 1px solid #ddd;	
    font-size: 14px;
    padding: 12px 5px;
    font-weight: 500;
    display: block;
}
.mean-container .mean-nav ul li a.mean-expand {
    width: auto;
}
.mobile_opicon {
    text-align: right;
    padding: 4px 0;
}
.mean-container .mean-nav > ul > li:first-child > a {
    border-top: 0;
}
.mobilemenu_con {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mobile_menu_o  i {
    font-size: 26px;
}
.mobile_menu_content .mobile_menu_logo {
    margin-bottom: 20px;
}
.mobile_cicon {
    position: absolute;
    right: 30px;
    top: 50px;
}
.mobile_overlay {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease-out 0s;
}
.mobile_overlay.mactive {
    opacity: 1;
    visibility: visible;
}
/*======== mobile menu area end ==========*/

/*======== 微信二维码-新闻+作品 弹窗代码 开始 ==========*/
.popup-news {
    position: fixed;
    bottom: 80px;
    right: 40px;
    width: auto;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.popup-news.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.popup-news .close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 10%;
    font-size: 15px;
    color: #999;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0);
    font-family: sans-serif;
}
.popup-news .close-btn:hover {
    color: #333;
}
.popup-news img {
    display: block;
    max-width: 260px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
@media (max-width: 550px) {
    .popup-news { right: 20px; bottom: 60px; }
    .popup-news img { max-width: 200px; }
}
/*======== 微信二维码-新闻+作品 弹窗代码 结束 ==========*/

/*======== 全屏 菜单组件 开始 ==========*/
/* 重置所有菜单组件内外边距和盒模型 */
.embedded-menu-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 菜单容器 - 放置在原来LOGO位置 */
.embedded-menu-wrapper {
    position: relative;
    z-index: 1000;
    display: inline-block;
    top: -3px;  /* ← 向上移动5px（负值向上，正值向下） */
}

/* 菜单图标圆形按钮 - 背景大小36px */
.top-left-menu {
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.25s ease; /* 修改：删除重复的transition定义，保留一个综合过渡效果 */
}

/* 菜单图标悬停时背景切换成黑色圆形 */
.top-left-menu:hover {
    background-color: #000000;
}

/* 菜单图标隐藏状态 */
.top-left-menu.hide-icon {
    display: none;
}

/* 菜单触发按钮 - 完全透明无样式 */
.menu-trigger {
    width: 100%;
    height: 100%;
    background-color: transparent;
    /* 删除：backdrop-filter: none; - 默认值无需声明 */
    border-radius: 50%;
    /* 删除：box-shadow: none; - 默认值无需声明 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    border: none;
}

/* 三杠图标容器 */
.hamburger-icon {
    width: 18px;
    height: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 三杠图标的三个横线 */
.hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #1a1a1a; /* 默认黑色 */
    border-radius: 2px;
    transition: all 0.2s ease;
}

/* 鼠标悬停菜单图标时三杠变白色 */
.top-left-menu:hover .hamburger-icon span {
    background-color: #ffffff;
}

/* 滚动后sticky状态下，三杠图标变为白色 */
.main_menu_area.sticky .top-left-menu .hamburger-icon span {
    background-color: #ffffff;
}

/* 绝对定位菜单（深色背景）下，三杠图标变为白色 */
.absolute_menu .top-left-menu .hamburger-icon span {
    background-color: #ffffff;
}

/* 菜单触发按钮悬停微缩放效果 */
.top-left-menu:hover .menu-trigger {
    transform: scale(1.02);
    /* 删除：box-shadow: none; - 默认值无需声明 */
    /* 删除：background-color: transparent; - 默认值无需声明 */
}

/* 菜单遮罩层 - 半透明毛玻璃效果 */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.25s ease;
    z-index: 998;
}

/* 遮罩层激活显示 */
.menu-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* 菜单面板 - 侧边栏毛玻璃效果 */
.nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(178, 178, 178, 1);
    backdrop-filter: blur(12px);
    /* 删除：box-shadow: none; - 默认值无需声明 */
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 60px 40px;
}

/* 菜单面板打开状态 */
.nav-panel.open {
    transform: translateX(0%);
}

/* 菜单内容容器 */
.nav-panel-content {
    max-width: 700px;
    width: 100%;
    margin: 0;
    text-align: left;
    padding-left: 100px; /* 修改：删除冗余的!important */
    padding-right: 40px;
    /* 删除：margin-top: 0 !important; - 无冲突不需要!important */
}

/* 隐藏顶部品牌区域 */
.brand-area {
    display: none;
}

/* 一级菜单列表容器 */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* 一级菜单项 - 行间距25px */
.nav-item {
    margin-bottom: 25px; /* 修改：删除冗余的!important */
    position: relative;
}

/* 一级菜单链接样式 - 字体70px，向右偏移35px */
.nav-link {
    text-decoration: none;
    font-size: 70px; /* 修改：删除冗余的!important */
    font-weight: 450;
    color: rgba(218, 218, 218, 1);
    transition: all 0.2s ease; /* 修改：优化过渡效果，确保颜色变化平滑 */
    display: inline-block;
    position: relative;
    letter-spacing: -0.2px;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    cursor: pointer;
    margin-left: 35px; /* 修改：删除冗余的!important */
    line-height: 1.2;
}

/* 【核心修改】一级菜单悬停效果 - 字体变白色，右移4px */
.nav-link:hover {
    color: #ffffff !important; /* 修改：强制白色，确保悬停时字体变白 */
    transform: translateX(4px);
}

/* 删除：.nav-link::after伪元素样式 - 从未定义过此伪元素，代码无效 */

/* BLAN品牌一级菜单 - 默认白色 */
.nav-link[data-nav="blan"] {
    color: rgba(255, 255, 255, 1);
    /* 删除：font-weight: 450 !important; - 与默认值相同，冗余声明 */
}

/* 【核心修改】BLAN菜单悬停保持白色 */
.nav-link[data-nav="blan"]:hover {
    color: #ffffff !important; /* 修改：悬停时保持白色 */
}

/* 二级菜单容器 - 绝对定位在右侧800px处 */
.submenu {
    position: absolute;
    left: 800px; /* 修改：删除冗余的!important */
    top: 0;
    background: transparent;
    /* 删除：backdrop-filter: none; - 默认值无需声明 */
    /* 删除：border-radius: 0; - 默认值无需声明 */
    /* 删除：box-shadow: none; - 默认值无需声明 */
    list-style: none;
    padding: 0;
    min-width: 220px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
    pointer-events: none;
}

/* 二级菜单显示状态 */
.submenu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 二级菜单项 - 行间距0 */
.submenu li {
    margin-bottom: 0; /* 修改：删除冗余的!important */
}

.submenu li:last-child {
    margin-bottom: 0;
}

/* 二级菜单链接样式 - 字体35px，居中显示 */
.submenu-link {
    text-decoration: none;
    font-size: 35px; /* 修改：删除冗余的!important */
    font-weight: 400;
    color: rgba(218, 218, 218, 1);
    transition: all 0.2s ease; /* 修改：优化过渡效果，确保颜色变化平滑 */
    display: block;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    padding: 6px 0;
    /* 删除：border-radius: 0; - 默认值无需声明 */
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
}

/* 【核心修改】二级菜单悬停效果 - 字体变白色，右移4px */
.submenu-link:hover {
    color: #ffffff !important; /* 修改：强制白色，确保悬停时字体变白 */
    transform: translateX(4px);
    background-color: transparent;
}

/* 关闭菜单按钮 - 圆形毛玻璃效果 */
.close-menu-btn {
    position: absolute;
    top: 15px;
    left: 50px;
    width: 35px;
    height: 35px;
    background-color: rgba(178, 178, 178, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(218, 218, 218, 0.3);
    color: rgba(218, 218, 218, 1);
    font-size: 20px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    z-index: 1002;
}

/* 关闭按钮悬停效果 - 旋转90度，变白色 */
.close-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    transform: rotate(90deg);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* 菜单右上角社交图标容器 - 右边距165px */
.menu-top-socials {
    position: absolute;
    top: 30px;
    right: 165px;
    z-index: 1003;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* 社交图标样式 - 圆形半透明背景 */
.menu-social-icon {
    color: rgba(218, 218, 218, 1);
    font-size: 22px;
    transition: all 0.25s ease;
    opacity: 0.8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(2px);
}

/* 社交图标悬停效果 - 上移2px，背景变亮 */
.menu-social-icon:hover {
    opacity: 1;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* 小红书图标特殊字体样式 */
.social-xhs {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0;
}

/* 右下角Logo容器 - 初始隐藏 */
.bottom-right-logo {
    position: fixed;
    bottom: 30px;
    right: 165px;
    z-index: 1003;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    visibility: hidden;
    opacity: 0;
}

/* 右下角Logo显示状态 */
.bottom-right-logo.show {
    visibility: visible;
    opacity: 0.8;
}

/* Logo图片尺寸限制 */
.bottom-right-logo img {
    max-width: 280px;
    height: auto;
    display: block;
}

/* Logo悬停完全显示 */
.bottom-right-logo:hover {
    opacity: 1;
}

/* 微信二维码弹窗 - 全屏黑色半透明遮罩 */
.qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.25s ease;
}

/* 二维码弹窗激活显示 */
.qrcode-modal.active {
    visibility: visible;
    opacity: 1;
}

/* 二维码内容容器 */
.qrcode-container {
    text-align: center;
    background: transparent;
    border-radius: 16px;
    padding: 20px;
    max-width: 90vw;
    max-height: 90vh;
}

/* 二维码图片样式 */
.qrcode-container img {
    max-width: 400px;
    width: 80%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 关闭二维码按钮 */
.close-qrcode-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    backdrop-filter: blur(4px);
    z-index: 2001;
}

/* 关闭二维码按钮悬停效果 */
.close-qrcode-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
    border-color: rgba(255, 255, 255, 0.6);
}

body.menu-open {
    overflow: hidden;
    /* 固定页面位置，防止滚动跳动 */
    position: fixed;
    width: 100%;
}
/*======== 全屏 菜单组件 结束 ==========*/


/* ========= 全站搜索功能样式 ========= */

/* 搜索图标增强样式 - 确保可点击 */
.main_nav_icons {
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;   /*向上移动 */
}

.main_nav_icons .icofont-search {
    font-size: 20px;
    transition: all 0.25s ease;
    display: inline-block;
}

.main_nav_icons .icofont-search:hover {
    color: #ffffff;
    transform: scale(1.1);
}

/* 搜索弹窗 - 全屏毛玻璃效果 */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);  /* ← 背景颜色和透明度 */
    backdrop-filter: blur(0.5px);             /* ← 磨砂模糊程度 */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.25s ease;
}

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

.search-container {
    width: 90%;
    max-width: 800px;
    padding-top: 100px;      /* 只调整上边距 */
    animation: searchFadeIn 0.3s ease;
}

@keyframes searchFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-input-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.search-input {
    width: 100%;
    padding: 15px 60px 15px 30px;
    font-size: 18px;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: rgba(255, 255, 255, 1);  /* 修改：0.1 = 10%透明度，值越大越不透明 */
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 60px;
    color: #000000;
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255,1);  /* 修改：聚焦时15%透明度 */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.search-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
}

.search-submit {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.search-submit:hover {
    transform: translateY(-50%) scale(1.1);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* 关闭搜索按钮 - 移动到搜索栏下方居中 */
.close-search-btn {
    position: absolute;
    bottom: 60px;           /* 距离底部80px，位于搜索栏下方 */
    left: 50%;              /* 水平居中 */
    transform: translateX(-50%);  /* 水平居中偏移 */
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    backdrop-filter: blur(4px);
    z-index: 10001;
}

.close-search-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translateX(-50%) rotate(90deg);  /* 保持居中同时旋转 */
}

/* 搜索结果区域 */
.search-results {
    max-height: 500px;
    overflow-y: auto;     /* 保留垂直滚动 */
    overflow-x: hidden;   /* 【修改】隐藏水平滚动条 */
    margin-top: 30px;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.search-result-item {
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(8px);
    border-left-color: #ffffff;
}

.search-result-title {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 8px;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.search-result-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.search-result-category {
    display: inline-block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

/* 高亮关键词 */
.search-result-item mark {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0 2px;
    border-radius: 3px;
}

/* 空状态 */
.search-result-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    padding: 60px 20px;
}

/* 加载状态 */
.search-result-loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    padding: 40px;
}

.search-result-loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* 搜索提示 */
.search-hint {
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    z-index: 2002;
    pointer-events: none;
}
/* ========= 全站搜索功能样式 ========= */


/*======== main menu area start ==========*/
.main_menu_area_index {
    padding: 0 50px;
    background-color:transparent; /* 修改：背景改为透明 */
    position: absolute; /* 新增：绝对定位，使其悬浮在轮播图上 */
    top: 0; /* 新增：紧贴顶部 */
    left: 0; /* 新增：左侧对齐 */
    right: 0; /* 新增：右侧对齐 */
    z-index: 999; /* 新增：确保菜单在轮播图上方 */
    width: 100%; /* 新增：确保占满宽度 */
    box-sizing: border-box; /* 新增：保证padding不会撑开宽度 */
}
.main_menu_area {
    padding: 0 50px;
    background-color: var(--whitec);
}
/* mobile menu */
.mobile_menu{
    display: none;
}
.mobile_logo_area{
    display: none;
}
.main_menu_area.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: rgb(0 0 0 / 70%);
}
.main_menu_area .sticky_logo{
    display: none;
}
.main_menu_area.sticky .main_logo{
    display: none;
}
.main_menu_area.sticky .sticky_logo{
    display: block;
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a{
    color: var(--whitec);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a:hover{
    color: var(--brcolor);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a i{
    color: var(--whitec);
}
.main_menu_area.sticky .main_nav_btn a{
    color: var(--whitec);
}
.main_menu_area.sticky .main_nav_icons >i{
    color: var(--whitec);
}

/* main nav area css */
.main_nav_area{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* absolute menu css */
.absolute_menu{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: none;
}
.absolute_menu .main_nav_area{
    justify-content: flex-end;
}
/* landing menu css */
.landing_menu{
    justify-content: end;
}
.main_menu_all_item{
    align-items: center;
}
/* inner main nav area css */
.inner_main_nav_area ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.inner_main_nav_area >ul >li {
    display: inline-block;
    position: relative;
}
.inner_main_nav_area >ul >li >a {
    display: inline-block;
    margin: 40px 20px 40px 0;
    font-size: 19px;
    font-weight: 500;
}
.inner_main_nav_area >ul >li >a>i {
    font-size: 14px;
    font-weight: 700;
    color: var(--titlecolor);
}
.inner_main_nav_area >ul> li> a:hover{
    color: var(--brcolor);
}
.absolute_menu .inner_main_nav_area >ul >li >a{
    color: var(--whitec);
}
.absolute_menu .inner_main_nav_area >ul >li >a:hover{
    color: var(--bgcolor);
}
/* main nav icons together */
.main_nav_icons_together {
    display: flex;
    align-items: center;
    margin-top: 10px; /* 上边距30px，向下移动位置 */
}
/* main nav icons */
.main_nav_icons {
    margin-left: 7px;
}
.main_nav_icons >i{
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 100%;
    text-align: center;
    color: var(--blackc);
    cursor: pointer;
    transition: .5s;
}
.main_nav_icons >i:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.main_nav_btn {
    margin-left: 12px;
}
.main_nav_btn a {
    display: inline-block;
    font-size: 19px;
    font-weight: 600;
    padding: 8px 35px;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.main_nav_btn a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* nav icon popup css */
.nav_icon_popup {
    position: fixed;
    top: -110%;
    left: 0;
    background: #000000c2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}
.nav_icon_popup.icon_popup {
    opacity: 1;
    visibility: visible;
    top: 0;
}
/* inner nav icon popup */
.inner_nav_icon_popup {
    width: 47%;
    margin: 0 auto;
    position: relative;
}
.inner_nav_icon_popup input{
    font-size: 30px;
    font-weight: 500;
    padding: 17px 40px 15px 15px;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: 0px 0px 30px 0px #dddddd45;
    background: var(--whitec);
    border-radius: 10px;
}
.inner_nav_icon_popup input::placeholder{
    font-size: 30px;
}
/* inner nav popup form icons css */
.inner_nav_popup_form_icons {
    position: absolute;
    top: 35%;
    right: 10px;
    transform: translateY(-50%);
}
.inner_nav_popup_btnicon{
    font-size: 40px;
    border: none;
    outline: none;
    background: none;
}
.inner_nav_icon_popup i{
    display: inline-block;
    margin-top: 10px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--whitec);
    color: var(--blackc);
    font-size: 25px;
    cursor: pointer;
    transition: 1s;
}
/* drop down menu css */
.inner_main_nav_area ul li .sub_menu{
    position: absolute;
    top: 130%;
    left: 0;
    width: max-content;
    min-width: 205px;
    max-width: 320px;
    text-align: left;
    margin: 0;
    padding: 15px 5px 14px;
    z-index: 9999;
    box-shadow: 0 0 30px rgb(0 0 0 / 9%);
    background-color: var(--whitec);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li{
    position: relative;
}
.inner_main_nav_area ul li .sub_menu li a {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    padding: 6px 17px;
}
.inner_main_nav_area ul li .sub_menu li a:hover{
    color: var(--brcolor);
    margin-left: 5px;
}
.inner_main_nav_area >ul >li:hover .sub_menu{
    top: 100%;
    opacity: 1;
    visibility: visible;
}
.inner_main_nav_area .sub_menu >li > ul.sub_menu{
    top: 130%;
    left: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li:hover  ul.sub_menu{
    top: 0;
    opacity: 1;
    visibility: visible;
}
/*======== main menu area end ==========*/




/*======== slider area start  ==========*/
/* 新增：轮播图区域的父容器需要作为绝对定位的参考点 */
.slider_area {
    position: relative; /* 新增：作为菜单栏绝对定位的参考父容器 */
}

/* inner slider area */
.inner_slider_area {
    height: 1080px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; /* 禁止背景图片重复 */
    display: flex !important;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow-x: hidden; /* 阻止水平溢出 */
    overflow-y: auto;   /* 允许垂直滚动，防止内容被裁剪 */
}

.inner_slider_area::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #0000001f;
    pointer-events: none; /* 避免伪元素干扰点击 */
}

.inner_slider_content {
    width: 59%;
    margin: 0 auto;
    text-align: left;
}

.inner_slider_content h2{
    font-size: 70px;
    font-weight: 600;
    color: var(--whitec);
    margin: 0;
}

.inner_slider_content p {
    width: 45%;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 500;
    color: var(--whitec);
}

/* golobal btn css */
.r_btn{
    margin-top: 50px;
}

.r_btn a {
    display: inline-block;
    padding: 15px 45px;
    background-color: var(--whitec);
    color: var(--blackc);
    font-size: 19px;
    font-weight: 600;
    transition: all 0.3s ease; /* 增加过渡效果 */
}

.r_btn a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}

/* slider defult arrow css */
.slider_area .slick-prev, .slider_area .slick-next {
    background: none;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease; /* 增加过渡效果 */
}

.slider_area:hover .slick-prev, .slider_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}

.slider_area .slick-prev{
    left: 0;
}

.slider_area .slick-next{
    right: 10px;
}

.slider_area .slick-prev::before ,.slider_area .slick-next::before{
    content: '\eac9';
    font-family: IcoFont;
    color: var(--whitec);
    display: inline-block;
    background: 0 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 0;
    font-size: 50px;
    font-weight: 700;
    transition: all 0.3s ease; /* 增加过渡效果 */
}

.slider_area .slick-next::before{
    content: '\eaca';
}

.slider_area .slick-prev:hover::before ,.slider_area .slick-next:hover::before{
    background-color: var(--whitec);
    color: var(--blackc);
}

/* 针对 slider 中的图片元素 */
.inner_slider_area img {
    max-width: 100%;    /* 图片宽度不超过父容器 */
    height: auto;       /* 高度自动调整，保持比例 */
    display: block;     /* 避免行内元素导致的额外间距 */
    object-fit: cover;  /* 图片填充容器并保持比例 */
}

/* 如果背景图需要额外控制背景图片行为 */
.inner_slider_area {
    background-repeat: no-repeat;   /* 禁止背景图片重复 */
    background-attachment: scroll;  /* 背景图随页面滚动 */
}
/*======== slider area end  ==========*/




/*======== video slider area start  ==========*/
.video_slider_area{
    position: relative;
    height: 820px;
}
.video_slider_area::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #00000033;
}
.witr_youtube_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -99;
}
.witr_youtube_video iframe {
    width: 100%;
    height: 100%;
    border: none;
}
/*======== video slider area end  ==========*/

/*======== breadcum area start  ==========*/
.breadcum_area {
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center center;
}
.breadcum_area::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 30%);
    z-index: -1;
}
.inner_breadcum_area {
    padding: 110px 0;
}
.inner_breadcum_area h1{
    font-size: 29px;
    font-weight: 700;
    color: var(--whitec);
    margin: 0;
}
.inner_breadcum_area ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.inner_breadcum_area ul li{
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: var(--whitec);
}
.inner_breadcum_area ul li a{
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: var(--whitec);
}
.inner_breadcum_area ul li i, .inner_breadcum_area ul li a i {
    font-size: 22px;
}
/*======== breadcum area end  ==========*/

/*======== about area start  ==========*/
.about_area {
    padding: 100px 0 50px;
}
/* call to action about area css */
.call_about{
    padding: 100px 0 100px;
}
.inner_about_area {
    margin-top: 15px;
}
/* section title area css */
.section_title_area {
    margin-bottom: 50px;
}
.about_area .section_title_area{
    margin-bottom: 40px;
}
.section_title_area h2{
    font-size: 16px;
    color: var(--brcolor);
}
.section_title_area h3{
    font-size: 40px;
}
.section_title_area p{
    margin: 30px 0 10px;
    width: 90%;
}
/* inner about list area css */
.inner_about_list ul{
    list-style: none;
    padding: 0;
}
.inner_about_list ul li {
    color: var(--paracolor);
    font-size: 17px;
    margin: 10px 0 10px;
}
/* inner about lower css */
.inner_about_lower {
    display: flex;
    margin-top: 60px;
}
.inner_ab_icon{
    margin-right: 30px;
}
.inner_ab_icon i{
    display: inline-block;
    width: 67px;
    height: 67px;
    line-height: 67px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--bgcolor);
    color: var(--whitec);
    font-size: 30px;
    transition: 1s;
}
.inner_about_lower:hover .inner_ab_icon i{
    background-color: var(--brcolor);
    color: var(--whitec);
}
.inner_ab_cont h1{
    color: var(--brcolor);
}
/* inner about right area css */
.inner_about_right_area {
    padding: 75px 60px 40px;
    position: relative;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* 背景图从 HTML inline style 来，这里不用写 */
}
.inner_about_right_area::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 方案2：使用 rgba，直接调整最后一个数值控制透明度 */
    background-color: rgba(0, 0, 0, 0.1);
    z-index: -1;
}
.inner_ab_right_counter {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.inner_ab_cou_icon{
    margin-right: 20px;
}
.inner_ab_cou_icon i{
    font-size: 60px;
    color: var(--black);
}
.inner_ab_cou_title h2{
    font-size: 50px;
    font-weight: 500;
    color: var(--black);
    margin: 0;
}
.inner_ab_cou_title h4{
    color: var(--black);
}
/*======== about area end  ==========*/

/*======== feature area start  ==========*/
.feature_area {
    margin: 50px 0 50px;
    padding: 115px 0 50px;
    background-color: var(--blackc);
}
.feature_area .section_title_area h3{
    color: var(--whitec);
}
.single_feature_right{
    position: relative;
}
.single_feature_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.single_feature_play a{
    display: inline-block;
    width: 75px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--whitec);
    color: var(--bgcolor);
    animation: witr-shadow 1s linear infinite;
}
@keyframes witr-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    }
}
/*======== feature area end  ==========*/

/*======== service area start  ==========*/
.service_area {
    padding: 45px 0 50px;
}
/* single page service area css */
.single_page_service{
    padding: 95px 0 50px;
}
.service_area .section_title_area{
    margin-bottom: 35px;
}
/* single service area css */
.single_service_area{
    margin: 15px;
    background-color: var(--whitec);
    box-shadow: 0 0 30px -5px rgb(0 0 0 / 10%);
}
.single_service_area img{
    width: 100%;
}
/* inner single service content css */
.inner_single_service_content {
    padding: 45px 0 50px;
}
.inner_single_service_content p {
    width: 90%;
    margin: 0 auto 15px;
}
.inner_single_service_content>a{
    font-size: 19px;
    font-weight: 600;
    border: 1px solid var(--brcolor);
    color: var(--brcolor);
    display: inline-block;
    padding: 9px 30px;
}
.inner_single_service_content>a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
/* golobal slick defult arrow css */
.slick-prev , .slick-next{
    position: absolute;
    top: 50%;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 100%;
    z-index: 9999;
    outline: none;
    border: none;
    font-size: 0;
    background: none;
    transform: translateY(-50%);
    transition: 1s;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}
.slick-prev{
    left: -65px;
}
.slick-next{
    right: -40px;
}
.slick-prev::before ,.slick-next::before{
    content: '\ea93';
    font-family: IcoFont;
    display: inline-block;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 100%;
    font-size: 40px;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: 1s;
}
.slick-next::before{
    content: '\ea94';
}
.slick-prev:hover::before ,.slick-next:hover::before{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.service_area:hover .slick-prev , .service_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
} 
/*======== service area end  ==========*/

/*======== choose area start  ==========*/
.choose_area {
    background: #F9F9F9;
    padding: 100px 0 100px;
    margin: 30px 0 50px;
}
/* about choose area css */
.about_choose{
    margin: 30px 0 0px;
}
.inner_choose_img img{
    width: 100%;
}
/* inner choose right css */
.inner_choose_right .section_title_area{
    margin-bottom: 40px;
}
.inner_choose_right{
    padding: 50px 20px;
}
.inner_choose_sub_cont {
    display: flex;
    margin-bottom: 20px;
}
.inner_choose_cont_title{
    margin-left: 20px;
}
.inner_choose_cont_title h2{
    margin: 0;
}
/*======== choose area end  ==========*/

/*======== project area start  ==========*/
.project_area{
    padding: 50px 0 50px;
}
/* about project area css */
.about_project{
    padding: 95px 0 30px;
}
.inner_project_area img{
    width: 100%;
}
.inner_project_area{
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000a3;
    text-align: center;
}
.inner_pro_cont {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
}
.inner_pro_cont h2{
    margin: 0;
}
.inner_pro_cont h2 a{
    color: var(--whitec);
}
.inner_pro_cont h2 a:hover{
    color: var(--brcolor);
}
.inner_pro_cont p{
    font-size: 16px;
    font-weight: 400;
    color: var(--whitec);
}
.inner_project_area:hover .overlay{
    opacity: 1;
    visibility: visible;
}
/*======== project area end  ==========*/

/*======= team area start =====*/
.team_area {
    padding: 25px 0 60px;
}
/* service team area css */
.service_team{
    padding: 45px 0 60px;
}
/* single page team css */
.single_page_team{
    padding: 95px 0 60px;
}
.inner_team_title_area {
    margin-bottom: 60px;
}
.inner_team_title_area h2{
    font-size: 18px;
    text-transform: uppercase;
    color: var(--brcolor);
}
.inner_team_title_area h3{
    font-size: 48px;
}
/* inner team area css */
.inner_team_area {
    position: relative;
    box-shadow: 0 5px 4px 0 rgba(0,0,0,.05);
}
.inner_team_img{
    position: relative;
    overflow: hidden;
}
.inner_team_img img{
    width: 100%;
    height: 100%;
}
.inner_team_sub_icon {
    position: absolute;
    top: -150px;
    right: 20px;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.inner_team_area:hover .inner_team_sub_icon{
    top: 85px;
    opacity: 1;
    visibility: visible;
}
/* inner team content css */
.inner_team_content {
    padding: 15px 15px 10px;
}
.inner_team_content h2{
    margin: 0;
}
.inner_team_absoltue_icon {
    position: absolute;
    top: 50px;
    right: 20px;
}
.inner_team_absoltue_icon a{
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 100%;
    font-size: 20px;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.inner_team_absoltue_icon a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.inner_team_sub_icon a {
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 100%;
    font-size: 20px;
    background-color: var(--brcolor);
    color: var(--whitec);
    margin-bottom: 5px;
    margin-top: 5px;
}
.inner_team_sub_icon a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.team_line {
    position: absolute;
    opacity: 1;
    transition: .5s;
    z-index: 99
}
.team_line_bottom , .team_line_top{
    width: 0;
    height: 2px;
    left: -60px;
    bottom: 0;
    background: linear-gradient(to right, rgba(117, 161, 251, 0), #999999, rgba(117, 161, 251, 0));
}
.team_line_top{
    top: 0;
}
.inner_team_area:hover .team_line_bottom, .inner_team_area:hover .team_line_top {
    width: calc(100% + 110px)
}
.team_line_right,  .team_line_left  {
    height: 0;
    width: 2px;
    top: -60px;
    right: 0;
    background: linear-gradient(to top, rgba(117, 161, 251, 0), #999999, rgba(117, 161, 251, 0));
}
.team_line_left {
    left: 0;
}
.team_line_right{
    right: 0;
}
.inner_team_area:hover .team_line_left, .inner_team_area:hover .team_line_right {
    height: calc(100% + 110px);
}
/*======= team area end =====*/

/*===== testimonial area start  ====*/
.testimonial_area {
    margin: 40px 0 0;
    padding: 100px 0 90px;
}
.single_page_testimonial{
    margin: 0 0;
}
.inner_testimonial_area {
    padding: 50px 30px 10px;
    margin: 10px 15px;
    background-color: var(--whitec);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.04);
}
/* testimonial title css */
.inner_test_title {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.inner_test_img{
    margin-right: 20px;
}
.inner_test_text h2{
    margin: 0;
}
.inner_test_text p{
    margin: 0;
}
/* inner test thumb css */
.inner_test_thumb {
    padding: 20px 0px 30px;
}
/* testimonial icons css */
.inner_test_icon {
    margin-top: 30px;
}
.inner_test_icon i{
    font-size: 22px;
    color: var(--blackc);
}
.testimonial_area:hover .slick-prev ,.testimonial_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
/*=====  testimonial area end  ====*/

/*======== brand area start  ==========*/
.brand_area{
    padding: 80px 0 80px;
}
/* team brand area css */
.team_brand{
    margin: 40px 0 100px;
}
.inner_brand_area img{
    margin: 0 auto;
}
.brand_area:hover .slick-prev ,.brand_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
/*======== brand area end  ==========*/

/*======== faq area start  ==========*/
.faq_area {
    padding: 100px 0 50px;
}
/* single page faq css */
.single_page_faq{
    padding: 100px 0 100px;
}
.inner_faq_area button{
    outline: none;
    border: 1px solid #6969694d;
    font-size: 18px;
    font-weight: 700;
}
.accordion-item{
    margin-top: 20px;
}
.accordion-button:focus{
    box-shadow: none;
}
.inner_faq_area .accordion-button h4{
    margin: 0;
}
.accordion-button:not(.collapsed) {
    background: none;
}
/*======== faq area end  ==========*/
/*======== call to action start  =========*/
.call_to_action{
    margin: 0px 0 0px;
    padding: 212px 0 360px;
    position: relative;
    z-index: 1;
    overflow-x: hidden; /* 阻止水平溢出 */
    overflow-y: auto;   /* 允许垂直滚动，防止内容被裁剪 */
}

/* 如果背景图片在这里设置，避免重复并完整显示 */
.call_to_action {
    background-size: cover;      /* 背景图片覆盖整个容器，保持比例 */
    background-repeat: no-repeat; /* 禁止背景图片重复 */
    background-position: center center; /* 图片居中显示 */
}

.call_to_action::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brcolor);
    opacity: .2;
    z-index: -1;
    pointer-events: none; /* 避免伪元素干扰点击 */
}

.inner_call_action h1{
    font-size: 40px;
    color: var(--whitec);
}

/* call to right btn css */
.call_right_btn{
    margin-top: 30px;
}
.call_right_btn a{
    display: inline-block;
    padding: 12px 50px 12px 50px;
    font-size: 19px;
    font-weight: 600;
    background-color: var(--blackc);
    color: var(--whitec);
    transition: all 0.3s ease; /* 增加过渡效果 */
}
.call_right_btn a:hover{
    background-color: var(--whitec);
    color: var(--blackc);
}

/* 针对图片元素（如果页面中有 img 标签）*/
.inner_call_action img,
.call_to_action img {
    max-width: 100%;    /* 图片宽度不超过父容器 */
    height: auto;       /* 高度自动调整，保持比例 */
    display: block;     /* 避免行内元素导致的额外间距 */
    object-fit: cover;  /* 如果图片需要填充容器且保持比例 */
}

/* 如果图片作为背景图在某个子元素中 */
.call_bg_image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;       /* 高度盛满父容器 */
}
/*======== call to action end  =========*/

/*======== contact area start  ==========*/
.contact_area {
    padding: 50px 0 50px;
}
/* about contact area css */
.about_contact{
    padding: 50px 0 100px;
}
/* single page contact css */
.single_page_contact{
    padding: 100px 0 100px;
}
.inner_contact_area {
    padding: 60px 10px 60px 30px;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 6%);
}
.inner_contact_content {
    margin-bottom: 20px;
}
.inner_contact_content h2{
    font-size: 17px;
    font-weight: 700;
    color: var(--brcolor);
}
.inner_contact_content h3{
    font-size: 38px;
    font-weight: 700;
}
.inner_contact_content p {
    width: 78%;
    font-weight: 400;
}
/* inner contact form */
.inner_contact_form input {
    border: 1px solid #f1f1f1;
    outline: none;
    width: 100%;
    height: 45px;
    border-radius: 5px;
    padding: 0 20px;
    margin-right: 15px;
    margin-bottom: 23px;
}
.inner_contact_form textarea {
    width: 100%;
    border: 1px solid #f1f1f1;
    outline: none;
    padding: 20px 20px;
}
.inner_contact_form button {
    margin-top: 18px;
    padding: 15px 30px;
    font-size: 19px;
    font-weight: 600;
    border: none;
    outline: none;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: .5s;
}
.inner_contact_form button:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.inner_contact_map{
    width: 100%;
    height: 100%;
}
.inner_contact_map iframe {
    width: 100%;
    height: 100%;
}
/*======== contact area end  ==========*/

/*======== single page price area start  ==========*/
.single_page_price_area {
    padding: 90px 0 80px;
}
.sp_inner_price_area{
    text-align: left;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 18%);
    padding: 0px 0 40px;
    margin-bottom: 20px;
    background-color: var(--whitec);
}
/* inner price sub content */
.sp_inner_price_title {
    display: inline-block;
    width: 100%;
    background: #333;
    padding: 20px 0 10px;
}
.sp_inner_price_title h2 {
    font-size: 30px;
    color: #fff;
}
.sp_inner_price_content {
    display: inline-block;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--brcolor);
    color: var(--whitec);
    padding-top: 50px;
    margin-top: 30px;
}
.sp_inner_price_content h3{
    font-size: 25px;
    color: var(--whitec);
    margin: 0;
}
.sp_inner_price_content h4{
    font-size: 18px;
    color: var(--whitec);
}
/* inner price list menu css */
.sp_inner_price_list_menu {
    padding: 20px 0 15px;
}
.sp_inner_price_list_menu ul {
    list-style: none;
    padding-left: 18px;
}
.sp_inner_price_list_menu ul li {
    padding-bottom: 18px;
    font-size: 16px;
    font-weight: 400;
    color: var(--paracolor);
}
.sp_inner_price_list_menu ul li i{
    font-weight: 700;
    margin-right: 6px;
}
/* inner price btn */
.sp_inner_price_btn a {
    display: inline-block;
    padding: 12px 50px;
    font-size: 19px;
    font-weight: 600;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.sp_inner_price_btn a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/*======== single page price area end  ==========*/

/*======== progess bar area start ==========*/
.progerss_bar{
    padding: 100px 0 50px;
}
.witr_single_progress {
    overflow: hidden;
    margin-bottom: 20px;
}
.progress {
    display: flex;
    height: 6px;
    background-color: #e9ecef;
}
.progress-bar {
    overflow: initial;
    background-color: var(--brcolor);
}
.witr_title2 span {
    font-weight: 700;
    font-size: 17px;
    color: #000;
}
.witr_progress-style2 .progress-bar {
    position: relative;
    text-align: left;
    line-height: 4px;
    border-radius: 0;
    box-shadow: none;
}
.witr_progress-style2 {
    overflow: visible;
    position: relative;
    margin-top: 2px;
    box-shadow: none;
    background: #e9ecef;
    border-radius: 0;
    margin-bottom: 2px;
}
.witr_progress-style2 + .witr_progress-style2 {
	margin-top: 60px;
}
.witr_progress-style2 .progress-bar {
    position: relative;
    text-align: left;
    border-radius:0;
    line-height: 25px;
    box-shadow: none;
    height: 6px;
}
.witr_title6 .witr_label {
	left: 2px;
	top: 8px;
	color: #272727;
	font-size: 16px;
	font-weight: 600;
}
.witr_progress-style2 .witr_percent {
    position: absolute;
    right: 0;
    font-weight: 700;
    font-size: 16px;
    top: -28px;
    color: var(--blackc);
}
/*======== progess bar area end ==========*/

/*======= circle progress start ======*/
.circle_progress_bar{
    padding: 50px 0 50px;
}
.witr_cp_class {
    position: relative;
}
span.witr_cir_text {
    color: var(--blackc);
    font-size: 22px;
}
span.witr_cir_text {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-weight: 700;
}
.witr_circle_title {
    margin-top: 10px;
}
.witr_circle_title h2 {
    color: var(--blackc);
}
.cir_witr .allcostyle {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
    margin: 0 0 35px 0;
    padding: 0;
    border: none;
}
.cir_witr .allcostyle h2 {
    margin: 16px 0 8px 0;
}
.prog_page_cir {
    margin: 0;
}
.prog_page_cir .cir_inner {
    padding: 0;
}
.prog_page_cir .witr_circle_area{
    margin-right:25px;
    margin-left:25px;
}
/*======= circle progress end =====*/

/*======== blog area start  ==========*/
.blog_area {
    margin: 50px 0 0;
    padding: 95px 0 100px;
    background: #F9F9F9;
}
/* single page blog css */
.single_page_blog{
    margin: 0 0;
}
/* inner blog area css */
.inner_blog_area {
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
/* inner blog thumb css */
.inner_blog_thumb{
    position: relative;
    overflow: hidden;
}
.inner_blog_img img{
    width: 100%;
    transition: .5s;
}
.inner_blog_area:hover .inner_blog_img img{
    transform: scale(1.2);
}
/* blog overlay css */
.blog_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    transform: scale(0);
    transition: .5s;
}
.inner_blog_area:hover .blog_overlay{
    transform: scale(1.2);
}
/* inner blog text css */
.inner_blog_text {
    padding: 20px 20px 8px;
}
.inner_blog_text span a{
    color: var(--paracolor);
    font-weight: 400;
}
.inner_blog_text span {
    margin-right: 10px;
    color: var(--paracolor);
}
.inner_blog_text span i{
    margin-right: 3px;
    color: var(--brcolor);
}
/*inner blog content css */
.inner_blog_content {
    padding: 0 20px 5px;
}
.inner_blog_content h2 a {
    display: inline-block;
    margin-bottom: 8px;
}
.inner_blog_content >a{
    font-size: 14px;
    color: var(--brcolor);
}
.inner_blog_content >a:hover{
    color: var(--bgcolor);
}
/* blog btn area css */
.blog_sub_btn {
    padding: 5px 20px 35px;
}
.blog_sub_btn a{
    display: inline-block;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: 600;
    background-color: #66666614;
    color: var(--brcolor);
}
.blog_sub_btn a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
/*======== blog area end  ==========*/

/*======== portfolio area start  ==========*/
.portfolio_area {
    padding: 18px 0 100px;
    background-color: #f5f5f5;   /* 添加灰色背景 */
}
.portfolio_area .section_title_area{
    margin-bottom: 0;
}
/* portfolio 2 css */
.portfolio_2{
    margin-bottom: 30px;
}
.portfolio_title h2{
    font-size: 18px;
    color: var(--brcolor);
}
.portfolio_title h3{
    font-size: 48px;
}
.portfolio_title p {
    width: 64%;
    margin: 0 auto;
}
/* portfolio 2 sub content css */
.portfolio_2_subc {
    padding: 0px 0 5px 15px;
}
.portfolio_2_subc h2 a{
    font-size: 24px;
    transition: .5s;
    color: var(--brcolor);
}
.portfolio_2_subc h2 a:hover{
    color: var(--bgcolor);
}
.portfolio_nav_all {
    padding: 0px 0 22px;
}
/* portfolio nav css */
.portfolio_nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.portfolio_nav ul li{
    display: inline-block;
    border: 1px solid #f3eaea;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    margin: 0 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: .5s;
    background-color: #ffffff;   /* 浅灰色背景 */
}
.portfolio_nav ul li.current_menu_item{
    background-color: var(--brcolor);
    color: var(--whitec);
}
.portfolio_nav ul li:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
/* portfolio items css */
.portfolio_img_area{
    position: relative;
    overflow: hidden;
    margin: 0px;          /* 上下左右都有间距 */
    padding: 0 px 0px 0px;  /* 上 右 下 左 */
}
.portfolio_img_area img{
    width: 100%;
}
.inner_port_cont{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}
.inner_port_cont h2{
    margin: 0;
}
.inner_port_cont h2 a{
    color: var(--whitec);
}
.inner_port_cont p{
    color: var(--whitec);
}
.inner_portfolio_items:hover .portfolio_overlay_cont{
    top: 50%;
    opacity: 1;
    visibility: visible;
}
/* portfolio lower nav area css */
.portfolio_lo_nav_area{
    padding: 40px 0 0;
}
.inner_portfolio_lower_nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.inner_portfolio_lower_nav ul li{
    display: inline-block;
}
.inner_portfolio_lower_nav ul li a{
    display: inline-block;
    border-radius: 5px;
    font-size: 19px;
    line-height: 1;
    margin: 0 5px;
    padding: 15px 24px;
    box-shadow: 0 10px 40px 0 rgba(50,65,141,.12);
}
.inner_portfolio_lower_nav ul li a.current{
    background-color: var(--brcolor);
    color: var(--whitec);
}
.inner_portfolio_lower_nav ul li a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
.inner_portfolio_lower_nav ul li a i{
    font-size: 22px;
    font-weight: bold;
}


/* 调整 portfolio 图片卡片间距 */
.portfolio_area .row {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 15px;  /* 抵消最后一行的底部间距 */
}
.portfolio_area [class*="col-lg-4"],
.portfolio_area [class*="col-md-6"],
.portfolio_area [class*="col-sm-12"] {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: -20px;   /* ← 这个数值控制图片上下间距，改这里！ */
}
/*======== portfolio area end  ==========*/

/*======== blog left area start  ==========*/
.yblog_left {
    padding: 100px 0 35px;
}
.inner_yblog_form {
    position: relative;
    padding: 20px 0 20px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
}
.inner_yblog_form input {
    width: 90%;
    outline: none;
    height: 55px;
    border: 1px solid #efefef;
    margin-left: 20px;
    padding-left: 20px;
}
.inner_yblog_form button {
    position: absolute;
    right: 0;
    display: inline-block;
    outline: none;
    border: none;
    padding: 15px 20px 14px;
    background-color: #dddddd;
}
.inner_yblog_form button i{
    font-size: 18px;
}
/* inner  left title css */
.inner_yblog_left_title {
    margin: 30px 0 30px;
    width: 100%;
    padding: 20px 20px 15px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
}
.inner_yblog_left_title h2 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
}
.inner_yblog_left_title h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    border-radius: 50%;
    border: 1px solid var(--brcolor);
}
.inner_yblog_left_title a {
    display: inline-block;
    margin-top: 15px;
    font-size: 17px;
    font-weight: 400;
}
.inner_yblog_left_title a.bottom{
    border-bottom: none;
}
.inner_yblog_left_title a:hover{
    color: var(--hoverbg);
}
.inner_yblog_left_title a i{
    font-weight: 900;
}
/* innr blog left style 2 css*/
.inner_yblgo_left_style2 a {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #dddddd;
    padding: 13px 0 12px;
    margin-top: 0;
}
/* blog left inner css */
.yblog_left_inner{
    margin-bottom: 30px;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 5%);
}
.yblog_left_sub{
    padding: 25px 0 30px 15px;
}
.yblog_left_sub h2 a{
    width: 90%;
}
.yblog_left_text_sub {
    padding: 0px 0 10px;
}
.yblog_left_text_sub span{
    color: var(--bgcolor);
}
.yblog_left_text_sub span i{
    color: var(--brcolor);
}
.yblog_left_sub p{
    font-size: 16px;
    font-weight: 400;
    width: 95%;
}
.yblog_left_sub >a {
    display: inline-block;
    margin: 7px 0 0;
    padding: 7px 25px;
    border: 1px solid #dddddd;
    font-size: 16px;
    font-weight: 400;
    border-radius: 5px;
    color: var(--paracolor);
    text-transform: capitalize;
}
.yblog_left_sub >a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}

/* <=== ycalender start === >*/
:root {
    --brcolor: #666666;
    --whitec: #ffffff;
}

.ycalender_inner h5 {
    background-color: var(--brcolor);
    color: var(--whitec);
    padding: 14px 0 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 100%;
    margin: 0;
}

.ycalender_inner {
    padding: 20px 20px;
    width: 100%;
}

.ycalender_inner th {
    text-align: center;
    border: 1px solid #dddddd;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
}

.ycalender_inner td {
    text-align: center;
    border: 1px solid #dddddd;
    padding: 10px 12px;
    font-size: 14px;
}

.ycalender_inner td.active {
    background-color: var(--brcolor);
    color: var(--whitec);
}

/* 非本月日期样式 - 背景填充 #cccccc */
.ycalender_inner td.other-month {
    background-color: rgba(204, 204, 204, 0.2);
    color: #888888;
}
/* === ycalender end ===*/

/*======== blog left area end  ==========*/



/*======== project information area start  ==========*/
.project_information_area {
    padding: 100px 0 85px;
}
.inner_project_information_img {
    margin-bottom: 20px;
}
.inner_project_information_img img{
    width: 100%;
}
/* inner project right content css */
.inner_project_right_content h2{
    font-size: 24px;
}
.inner_project_right_content p span{
    font-size: 16px;
    color: var(--bgcolor);
    font-weight: 700;
}
/* inner project infomation icons css */
.inner_project_in_icon a{
    width: 48px;
    height: 48px;
    border: 1px solid #dddddd;
    display: inline-block;
    line-height: 46px;
    text-align: center;
    border-radius: 30px;
    background-color: var(--whitec);
    color: var(--bgcolor);
    font-size: 20px;
    margin-right: 4px;
}
.inner_project_in_icon a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
/* inner project text area css */
.inner_project_text_area {
    margin-top: 25px;
}
.inner_project_text_area h2{
    font-size: 24px;
}
.inner_project_information_descrip {
    margin-bottom: 8px;
}
.inner_project_information_descrip h4{
    font-size: 16px;
}
.inner_project_information_descrip p{
    margin: 0;
}
/* inner project information description css */
.inner_project_infor_list{
    margin-bottom: 15px;
    padding: 0;
    list-style: none;
}
.inner_project_infor_list li{
    margin-bottom: 5px;
}
/*======== project information area end  ==========*/

/*======== single blog page area start  ==========*/
.inner_single_box_area{
    background-color: #f8f9fa;
    padding: 20px 20px 20px;
}
.inner_single_box_area p {
    margin-bottom: 5px;
}
.inner_single_page_content_area p{
    margin-top: 20px;
}
/* inner single page middle text css */
.inner_single_page_middle_text {
    margin: 35px 0 45px;
}
.inner_single_page_middle_text h2{
    font-size: 24px;
}
/* single blog group css */
.single_blog_group {
    margin-top: 125px;
}
.inner_single_blog_group_box {
    background-color: #f8f9fa;
    padding: 10px 20px 30px;
    margin-top: 30px;
}
.inner_single_blog_group_box p{
    font-size: 1.5em;
    font-style: italic;
    margin-bottom: 0;
}
.inner_single_blog_group_box span{
    font-size: 1.125em;
    font-weight: 400;
    color: var(--paracolor);
}
.single_blog_post_area {
    margin: 80px 0 30px;
    padding: 25px 0 25px;
    border-top: 1px solid var(--textcolor);
    border-bottom: 1px solid var(--textcolor);
}
.single_blog_post_area p{
    margin: 0;
}
.single_blog_post_area a{
    color: var(--paracolor);
    font-size: 16px;
    font-weight: 400;
}
.single_blog_post_area a:hover{
    color: var(--hoverbg);
}
/* single comment title css */
.single_comment_title{
    margin: 35px 0 55px;
}
.single_comment_title h3{
    font-size: 20px;
}
.single_post_comment_area input {
    width: 47%;
    outline: none;
    height: 42px;
    padding: 0 20px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    margin-right: 20px;
}
/* inner single post checkbox css */
.inner_single_post_checkbox {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.inner_single_post_checkbox input {
    height: 15px;
    width: 12px;
    margin-right: 6px;
}
.single_post_comment_area textarea{
    width: 97%;
    padding: 10px 20px;
    height: 150px;
    margin-top: 15px;
    margin-bottom: 15px;
    outline: none;
    border: 1px solid #ced4da;
    border-radius: 5px;
}
.single_post_comment_area button{
    display: inline-block;
    text-align: center;
    padding: 16px 30px;
    margin-top: 5px;
    border-radius: 5px;
    background-color: var(--brcolor);
    color: var(--whitec);
    border: none;
    outline: none;
    transition: .6s;
}
.single_post_comment_area button:hover{
    background-color: var(--bgcolor);
}
/*======== single blog page area end  ==========*/

/*======== footer area start  ==========*/
.footer_area {
    background-color: var(--bgcolor);
    padding: 90px 0 25px;
}
.footer_widget p {
    color: var(--whitec);
}
/* footer widget */
.footer_widget h2 {
    padding: 0 0 12px;
    color: var(--whitec);
}
/* footer address area css */
.footer_address ul{
    list-style: none;
    padding-left: 0;
}
.footer_address ul li{
    font-size: 17px;
    font-weight: 400;
    padding: 0 0 10px;
    color: var(--whitec);
}
.footer_address ul li i{
    margin-right: 5px;
}
/* footer nav css */
.footer_nav {
    margin-top: 12px;
}
.footer_nav ul{
    list-style: none;
    padding-left: 0;
}
.footer_nav ul li {
    padding: 0 0 10px;
}
.footer_nav ul li a{
    font-size: 17px;
    font-weight: 400;
    color: var(--whitec);
}
.footer_nav ul li a:hover{
    color: var(--brcolor);
}
.f_widget_form{
    position: relative;
}
.f_widget_form input {
    height: 50px;
    position: relative;
    background: 0 0;
    color: var(--whitec);
    width: 100%;
    padding-left: 10px;
    outline: none;
    border: 1px solid #fefcfc54;
}
.f_widget_form input::placeholder{
    color: var(--whitec);
}
.f_widget_form button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 11px 24px;
    border: none;
    outline: none;
    background-color: var(--brcolor);
    color: var(--whitec);
}
/* footer widget sub img */
.footer_wid_sub_img {
    margin-top: 20px;
}
.inner_footer_widget_img{
    margin-bottom: 20px;
}
.inner_footer_widget_img img{
    width: 100%;
    height: auto;
}
/* copy right area css */
.copy_right_area {
    margin-top: 65px;
    padding-top: 25px;
    border-top: 1px solid #ffffff73;
}
.copyright_text p{
    color: var(--whitec);
    margin: 0;
}
/* copy right nav css */
.copyright_nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.copyright_nav ul li{
    display: inline-block;
}
.copyright_nav ul li a {
    display: inline-block;
    margin-left: 20px;
    font-size: 17px;
    color: var(--whitec);
}
/*======== footer area end  ==========*/

/*======== scroll top btn css  ==========*/
#scrollUp {
    bottom: 30px;
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    right: 40px;
    text-align: center;
    border-radius: 5px;
    width: 40px;
    background: var(--brcolor);
    color: var(--whitec);
    box-shadow: 0 0 10px #dddddd67;
}