/*
Theme Name: 	   Atuvi
Text Domain: 	   atuvi
Template: 			atua
Version:            1.1.0
Tested up to:       6.6
Requires at least:  4.7
Requires PHP:       5.6
Author:             DesertThemes
Author URI:         https://desertthemes.com/
Theme URI:          https://desertthemes.com/themes/atuvi-free/
Description:        Atuvi is lightweight, highly extendable and multi-purpose WordPress Theme. It will enable you to create almost any type of website with a beautiful & professional design. Atuvi supports popular WordPress plugins such as Elementor, WPML, Polylang, Yoast SEO, WooCommerce, Contact Form 7, Jetpack, and much more. Atuvi Pro demo https://preview.desertthemes.com/pro/atuvi/
Tags:               one-column, two-columns ,right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, theme-options, threaded-comments, translation-ready, full-width-template, custom-logo, blog, e-commerce, portfolio
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

:root {
    --dt-pri-color: #73bb13;
    --dt-priTwo-color: #92cf3c;
    --dt-priGrd-color: linear-gradient(-137deg, var(--dt-pri-color) 10%, var(--dt-priTwo-color) 100%);
    --dt-priGrdRev-color: linear-gradient(-137deg, var(--dt-priTwo-color) 10%, var(--dt-pri-color) 100%);
	--dt-sec-color: #00045F;
}

.header--twelve {
    color: var(--dt-whi-color);
}

.header--twelve .dt_mobilenav > .dt-container,
.header--twelve .is--sticky.on {
    background-color: var(--dt-sec-color);
}

.header--twelve .dt_mobilenav .hamburger span {
    background-color: #fff;
}

.header--twelve .dt_navbar-wrapper > .dt-container > .dt-row {
    align-items: center;
}

.header--twelve .dt_navbar-sidebar-item .dt_navbar-sidebar-toggle-inner {
    border-color: rgba(189, 189, 189, 0.35);
}

.header--twelve .dt_navbar-nav .dt_navbar-mainmenu > li > a {
    margin: 0 1.2rem;
}

.header--twelve .dt_navbar-sidebar-item .dt_navbar-sidebar-toggle-inner,
.header--twelve .dt_navbar-nav .dt_navbar-mainmenu > li:not(:hover, .focus, .active) > a,
.header--twelve .dt_navbar-cart-item .dt_navbar-cart-icon,
.header--twelve .dt_navbar-search-item button.dt_navbar-search-toggle {
    color: #fff;
}

.header--twelve .dt_header-topbar .dt_header-widget a:focus {
    text-decoration: underline;
}
.header--twelve .dt_navbar-cart-item .dt_navbar-cart-icon:focus,
.header--twelve .dt_navbar-search-item button.dt_navbar-search-toggle:focus {
    transform: translateY(-2px);
	color: var(--dt-pri-color);
}

@media (min-width: 62em) {
    .header--twelve .dt_header-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .header--twelve .dt_navbar-wrapper > .dt-container {
        max-width: 1640px;
    }
    
    .header--twelve .dt_header-topbar .dt_header-widget > .dt-container > .dt-row {
        background-color: var(--dt-pri-color);
        margin-left: 0;
        margin-right: 0;
        padding: 0 1.6rem;
    }

    .header--twelve .dt_header-topbar .dt_header-widget .contact__list i {
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: unset;
        background: transparent;
    }

    .header--twelve .dt_header-topbar .dt_header-widget a,
    .header--twelve .dt_header-topbar .dt_header-widget .contact__list i {
        color: #fff;
    }

    .header--twelve .dt_header-widget .widget--right .widget:not(:last-child):after {
        right: 0.5rem;
        background-color: rgba(255, 255, 255, 0.35);
    }

    .header--twelve + .site-content .dt_slider .dt_slider-innercell {
        padding-top: 15rem;
    }

    .header--twelve + .site-content .dt_slider .dt_slider-content {
        margin-bottom: 8rem;
    }

    .header--twelve + .dt_pagetitle {
        padding-top: 20rem;
    }
}

/* Slider */

@media (min-width: 87.5em) {
    .dt_slider .dt_slider-carousel,
    .dt_slider .dt_slider-item,
    .dt_slider .dt_slider-innercell,
    .dt_slider .dt_slider-item > img {
        max-height: 83rem;
        min-height: 83rem;
    }
}

.dt_slider .dt_slider-content .subtitle {
    display: inline-block;
    padding: 0.8rem 2.4rem;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10rem;
    -webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
}

/* Service Thirteen */

.dt_service--thirteen {
    z-index: 1;
}

.dt_slider + .dt_service.dt_service--thirteen {
    padding-top: 0;
    margin-top: -13rem;
    margin-bottom: -3.8rem;
    padding-bottom: 3rem;
}

.dt_service.dt_service--thirteen .dt_item_inner {
    text-align: center;
    position: relative;
    z-index: 0;
    margin-top: 4rem;
    margin-bottom: 2rem;
    -webkit-filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.08));
    filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.08));
    padding: 13rem 1.5rem 4rem 1.5rem;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.dt_service.dt_service--thirteen .dt_item_inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dt-whi-color);
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    z-index: -2;
    -webkit-clip-path: polygon(0 0, 100% 50px, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 50px, 100% 100%, 0% 100%);
}

.dt_service.dt_service--thirteen .dt_item_holder {
    position: relative;
    z-index: 1;
}

.dt_service.dt_service--thirteen .dt_item_holder .dt_item_icon {
    width: 12rem;
    height: 12rem;
    line-height: 12rem;
    font-size: 5rem;
    color: #fff;
    background-color: var(--dt-pri-color);
    border-radius: 50%;
    text-align: center;
    position: relative;
    margin: -15rem auto 3.5rem auto;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
}

.dt_service.dt_service--thirteen .dt_item_inner:focus-within .dt_item_icon,
.dt_service.dt_service--thirteen .dt_item_inner:hover .dt_item_icon {
    color: var(--dt-pri-color);
    background: var(--dt-whi-color);
}

.dt_service.dt_service--thirteen .dt_item_holder .dt_item_icon:before {
    content: "";
    position: absolute;
    inset: -1.5rem;
    background-color: var(--dt-sec-color);
    z-index: -1;
    border-radius: inherit;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
    opacity: 0.2;
}

.dt_service.dt_service--thirteen .dt_item_holder .dt_item_title a {
    text-decoration: none;
}

.dt_service.dt_service--thirteen .dt_item_holder .dt_item_content,
.dt_service.dt_service--thirteen .dt_item_holder .dt_item_title a,
.dt_service.dt_service--thirteen .dt_item_holder .dt_item_title {
    color: var(--dt-sec-color);
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
}

.dt_service.dt_service--thirteen .dt_item_inner:focus-within .dt_item_holder .dt_item_content,
.dt_service.dt_service--thirteen .dt_item_inner:focus-within .dt_item_holder .dt_item_title a,
.dt_service.dt_service--thirteen .dt_item_inner:focus-within .dt_item_holder .dt_item_title,
.dt_service.dt_service--thirteen .dt_item_inner:hover .dt_item_holder .dt_item_content,
.dt_service.dt_service--thirteen .dt_item_inner:hover .dt_item_holder .dt_item_title a,
.dt_service.dt_service--thirteen .dt_item_inner:hover .dt_item_holder .dt_item_title {
    color: #fff;
}

.dt_service.dt_service--thirteen .dt_item_holder .dt-btn-plustext {
    display: inline-block;
    padding: 1.121rem 2.4rem;
    border-radius: 10rem;
    background-color: var(--dt-pri-color);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
}

.dt_service.dt_service--thirteen .dt_item_inner:hover .dt_item_holder .dt-btn-plustext,
.dt_service.dt_service--thirteen .dt_item_inner:focus-within .dt_item_holder .dt-btn-plustext {
    background-color: var(--dt-sec-color);
    color: #fff;
}

.dt_service.dt_service--thirteen .dt_item_inner .dt_item_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    z-index: -1;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    -webkit-clip-path: polygon(0 0, 100% 50px, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 50px, 100% 100%, 0% 100%);
}

.dt_service.dt_service--thirteen .dt_item_inner:focus-within .dt_item_image,
.dt_service.dt_service--thirteen .dt_item_inner:hover .dt_item_image {
    opacity: 1;
    visibility: visible;
    height: 100%;
}

.dt_service.dt_service--thirteen .dt_item_inner .dt_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dt_service.dt_service--thirteen .dt_item_inner .dt_item_image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dt-pri-color);
    opacity: 0.9;
}

.dt_service.dt_service--thirteen .dt_item_inner .dt_item_image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--dt-whi-color);
    z-index: 0;
    width: 23.8rem;
    height: 19.8rem;
    opacity: 0;
    -webkit-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
}

.dt_service.dt_service--thirteen .dt_item_inner:focus-within .dt_item_image::after,
.dt_service.dt_service--thirteen .dt_item_inner:hover .dt_item_image::after {
    -webkit-transform: rotate(36.66deg);
    transform: rotate(36.66deg);
    opacity: 0.15;
    left: -10rem;
}

.dt_service.dt_service--thirteen .ripple-shape {
    position: absolute;
    top: 4rem;
    right: -2rem;
    --circle-size: 6rem;
    --border-color: #F7F7F7;
    height: var(--circle-size);
    width: var(--circle-size);
}

.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5,
.ripple-6 {
    --duration: 6s;
    height: var(--circle-size);
    width: var(--circle-size);
    position: absolute;
    inset: 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    -webkit-animation: rippleShape var(--duration) linear infinite;
    animation: rippleShape var(--duration) linear infinite;
}

.ripple-1 {
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

.ripple-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.ripple-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.ripple-4 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.ripple-4 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.ripple-5 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.ripple-6 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes rippleShape {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.2;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(4);
        transform: scale(4);
    }
}

@keyframes rippleShape {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.2;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(4);
        transform: scale(4);
    }
}

/* Service Fourteen */

.dt_service.dt_service--fourteen .dt_item_inner {
    position: relative;
    text-align: center;
    background-color: var(--dt-whi-color);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding: 3.5rem 2.5rem;
}

.dt_service.dt_service--fourteen .dt_item_inner .dt_item_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5, 1);
    transition: all 500ms ease 0s;
}

.dt_service.dt_service--fourteen .dt_item_inner:focus-within .dt_item_image,
.dt_service.dt_service--fourteen .dt_item_inner:hover .dt_item_image {
    opacity: 1;
    visibility: visible;
    transform: scale(1, 1);
}

.dt_service.dt_service--fourteen .dt_item_inner .dt_item_image::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.9;
    background-color: var(--dt-sec-color);
}

.dt_service.dt_service--fourteen .dt_item_inner .dt_item_image img {
    height: 100%;
    object-fit: cover;
}

.dt_service.dt_service--fourteen .dt_item_inner .dt_item_icon {
    position: relative;
    width: 10rem;
    height: 10rem;
    line-height: 10rem;
    color: var(--dt-pri-color);
    font-size: 5rem;
    background: var(--dt-whi-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 25px;
    margin: 0 auto 3rem auto;
    border-radius: 10rem;
    transition: all 500ms ease 0s;
}

.dt_service.dt_service--fourteen .dt_item_inner:hover .dt_item_icon {
    color: var(--dt-whi-color);
    transform: rotateY(180deg);
    transition-delay: 300ms;
    background: var(--dt-pri-color);
}

.dt_service.dt_service--fourteen .dt_item_inner .dt_item_title,
.dt_service.dt_service--fourteen .dt_item_inner .dt_item_title a {
    text-decoration: none;
    color: var(--dt-sec-color);
}

.dt_service.dt_service--fourteen .dt_item_inner .dt_item_content {
    padding-bottom: 0.5rem;
}

.dt_service.dt_service--fourteen .dt_item_inner .dt_item_content,
.dt_service.dt_service--fourteen .dt_item_inner .dt_item_title,
.dt_service.dt_service--fourteen .dt_item_inner .dt_item_title a {
    transition: all 500ms ease 0s;
}

.dt_service.dt_service--fourteen .dt_item_inner:hover .dt_item_content,
.dt_service.dt_service--fourteen .dt_item_inner:hover .dt_item_title,
.dt_service.dt_service--fourteen .dt_item_inner:hover .dt_item_title a {
    color: #fff;
}

.wc-block-components-totals-item {
    color: var(--dt-sec-color);
    font-weight: 700;
}

.wc-block-components-product-price__value {
    color: var(--dt-pri-color);
    font-weight: 600;
}

div.wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__totals-title {
    color: var(--dt-sec-color);
    font-weight: 700;
    font-size: 24px;
}

.wp-block-latest-posts__list .wp-block-latest-posts__post-author,
.wp-block-latest-posts__list .wp-block-latest-posts__post-date {
    text-decoration: none;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--dt-sec-color);
}

.wc-block-cart-items th {
    color: var(--dt-sec-color);
}

.wc-block-components-product-badge {
    background: var(--dt-pri-color);
    color: var(--dt-whi-color);
}

.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    background-color: var(--dt-pri-color);
    color: #fff;
}

div.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background: var(--dt-pri-color);
    color: #fff;
}

.wc-block-featured-category__link .wp-block-button__link:hover, 
.wc-block-featured-category__link .wp-block-button__link:focus {
    color: #fff;
}

nav.woocommerce-breadcrumb a {
    text-decoration: none;
}

.wc-block-featured-product__price .woocommerce-Price-amount.amount {
    color: #fff;
}

.wc-block-featured-product__link a:hover, 
.wc-block-featured-product__link a:focus {
    color: #fff;
}


/* define */
/* 外部容器样式 */
.outer-container {
    width: 100%; /* 使容器宽度为 100% */
    max-width: 1200px; /* 设置最大宽度为 1200px，可以根据需要调整 */
    margin: 90px auto; /* 水平居中容器 */
    padding: 20px; /* 添加内边距 */
    box-sizing: border-box; /* 确保内边距不影响总宽度 */
}

/* 确保内容在容器内居中 */
.category-projects-wrapper {
    text-align: center; /* 居中对齐文本和子元素 */
}

.container {
    padding: 0 15px; /* 添加左右内边距 */
}

/* 标题样式 */
.category-title {
    font-size: 2.5em; /* 设置标题字体大小 */
    margin-bottom: 20px; /* 添加标题下方的边距 */
    color: #333; /* 设置标题颜色 */
    font-weight: bold; /* 设置标题字体粗细 */
    text-decoration: none; /* 去除标题下划线 */
}

/* 网格样式 */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 每行 4 列 */
    gap: 20px; /* 子元素之间的间距 */
}

/* 项目卡片样式 */
.project-card {
    background-color: #fff; /* 设置背景颜色 */
    border: 1px solid #ddd; /* 添加细实线边框 */
    border-radius: 8px; /* 圆角边框 */
    overflow: hidden; /* 确保圆角效果 */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); 初始阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
    padding: 20px; /* 内边距 */
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.1); /* 阴影在右下角 */
}

.project-image-wrapper {
    width: 100%; /* 图片宽度 100% */
    height: 200px; /* 固定图片高度 */
    overflow: hidden; /* 确保图片不会超出边界 */
}

.project-image {
    width: 100%; /* 图片宽度 100% */
    height: 100%; /* 图片高度 100% */
    object-fit: cover; /* 使图片适应容器，不改变比例 */
    display: block; /* 确保图片占满父容器 */
}

.project-info {
    padding: 15px; /* 添加内边距 */
    background-color: #f9f9f9; /* 设置背景颜色 */
    border-top: 1px solid #ddd; /* 添加顶部边框 */
}

.project-title {
    font-size: 1.2em; /* 设置标题字体大小 */
    margin: 0; /* 去掉默认边距 */
    color: #333; /* 设置标题颜色 */
    text-decoration: none;
}

.project-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.project-title a:hover {
  color: #007bff; /* 或者您喜欢的其他颜色 */
}

/* 分页样式 */
.navigation {
    text-align: center; /* 分页居中对齐 */
    margin-top: 20px; /* 添加分页上方的边距 */
}

.page-numbers {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background-color: #eee;
    border-radius: 5px;
    text-decoration: none;
    color: #333; /* 设置分页文字颜色 */
}

.page-numbers.current {
    background-color: #333;
    color: #fff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr); /* 每行 3 列 */
    }
}

@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 每行 2 列 */
    }
}

@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr; /* 每行 1 列 */
    }
}

//详情DEFINE
/* 单个产品页面样式 */
.single-product-container {
    padding: 50px 0;
}

.single-product {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.product-image {
    flex: 1;
}

.product-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.product-details {
    flex: 2;
}

.product-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

.product-content {
    font-size: 1.2em;
    color: #666;
}

/* 基本布局样式 */
.custom-post-section {
    padding: 20px 0; /* 增加上下内边距 */
}

/* 内容与侧边栏容器样式 */
.row {
    display: flex; /* 使用Flexbox布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 使内容区域居中 */
}

/* 内容区域 */
.content-area {
    margin-right: 20px; /* 右侧间距 */
}

/* 文章标题样式 */
.post-title {
    font-size: 2em; /* 增加标题字体大小 */
    margin-bottom: 15px; /* 增加底部间距 */
}

/* 文章元信息样式 */
.post-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px; /* 增加底部间距 */
}

/* 特色图片样式 */
.post-thumbnail img {
    max-width: 100%; /* 确保图片自适应 */
    height: auto; /* 保持比例 */
}

/* 文章内容样式 */
.post-content {
    line-height: 1.6; /* 增加行高 */
    margin-bottom: 20px; /* 增加底部间距 */
}

/* 推荐文章样式 */
.related-posts {
    margin-top: 40px; /* 增加顶部间距 */
}

.related-posts-horizontal {
    display: flex; /* 使用Flexbox布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 使推荐文章项均匀分布 */
}

.related-post-item {
    flex: 1 0 21%; /* 设置每个推荐文章项占据21%宽度，留出间隙 */
    margin: 10px; /* 间距 */
    text-align: center对齐 */
}

/* 推荐文章缩略图样式 */
.related-post-thumbnail {
    width: 100%; /* 宽度占满 */
    height: 150px; /* 固定高度 */
    overflow: hidden; /* 隐藏溢出部分 */
}

.related-post-thumbnail img {
    width: 100%; /* 宽度自适应 */
    height: 100%; /* 高度自适应 */
    object-fit: cover; /* 保持比例且填充容器 */
}

/* 相关文章标题样式 */
.related-post-title {
    margin-top: 10px; /* 增加顶部间距 */
    font-size: 1em; /* 设置字体大小 */
}

/* 侧边栏样式 */
.sidebar {
    padding-left: 15px; /* 左侧内边距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .content-area {
        margin-right: 0; /* 移除右侧间距 */
        margin-bottom: 20px; /* 添加底部间距 */
    }

    .related-posts-horizontal {
        flex-direction: column; /* 小屏幕下推荐文章竖直排列 */
    }

    .related-post-item {
        flex: 1 0 100%; /* 每个推荐文章项占满宽度 */
        margin: 10px 0; /* 上下间距 */
    }

    .related-post-thumbnail {
        height: 100px; /* 调整小屏幕下的高度 */
    }
}

.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea, .wp-core-ui div.wpforms-container input[type=date], .wp-core-ui div.wpforms-container input[type=datetime], .wp-core-ui div.wpforms-container input[type=datetime-local], .wp-core-ui div.wpforms-container input[type=email], .wp-core-ui div.wpforms-container input[type=month], .wp-core-ui div.wpforms-container input[type=number], .wp-core-ui div.wpforms-container input[type=password], .wp-core-ui div.wpforms-container input[type=range], .wp-core-ui div.wpforms-container input[type=search], .wp-core-ui div.wpforms-container input[type=tel], .wp-core-ui div.wpforms-container input[type=text], .wp-core-ui div.wpforms-container input[type=time], .wp-core-ui div.wpforms-container input[type=url], .wp-core-ui div.wpforms-container input[type=week], .wp-core-ui div.wpforms-container select, .wp-core-ui div.wpforms-container textarea {
    border-radius: 5px;
}

.wpforms-container textarea.wpforms-field-medium {
    border-radius: 5px;
}

/* 文章图片居中问题 */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.aligncenter p.wp-caption-text {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

@media screen and (max-width: 768px) {
    .outer-container {
        flex-direction: column;
    }

    .sidebar {
        order: 2; /* 让侧边栏在内容区之后 */
        padding-top: 20px;
    }

    .product-detail-wrapper {
        order: 1;
        flex: 1; /* 占据全部宽度 */
    }
}

/* 确保图片框保持4:3比例 */
.dt_post_image {
    width: 300px; /* 固定宽度 */
    aspect-ratio: 4 / 3; /* 设置4:3的宽高比 */
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* 防止图片框因内容部分的宽度而缩小 */
    text-align: center;
}

.dt_post_image img {
    width: 100%;
    object-fit: cover; /* 图片填充整个框，同时保持比例 */
}


/* 让图片与段落上下居中 */
.dt_post_content-wrapper {
    display: flex;
    align-items: flex-start; /* 确保图片与段落顶部对齐 */
}

/* 移动端样式 */
@media (max-width: 768px) {
    .dt_post_content-wrapper {
        align-items: center; /* 水平居中 */
    }

    .dt_post_image {
        margin-left: 0; /* 移动端不需要左边距 */
        margin-bottom: 10px; /* 图片与内容之间的间距 */
        width: 100%; /* 图片宽度100% */
        aspect-ratio: 4 / 3; /* 保持4:3比例 */
    }

    .dt_post_inner {
        text-align: left; /* 文字居左 */
    }
}

.project-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: scale(1.05); /* 鼠标悬停时稍微放大卡片 */
}

.project-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 高度比率，可根据需要调整 */
}

.project-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shine {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-20deg);
    transition: all 0.5s ease-in-out;
}

.project-card:hover .shine {
    left: 150%;
}

.project-info {
    padding: 10px;
    text-align: center;
}

#social-sidebar {
    position: fixed;
    right: 0;
    top: 70%;
    transform: translateY(-50%);
    z-index: 9999;
    text-align: center;
    display: flex;
    flex-direction: column; /* 图标纵向排列 */
}

.social-icon {
    margin: 6px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

.icon-container {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.icon-container:hover {
    background-color: #e0e0e0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影效果 */
}

.icon-container i {
    font-size: 30px;
    color: #333;
    transition: color 0.3s ease;
}

/* 所有图标悬停时变绿色 */
.social-icon:hover i {
    color: #28a745;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}

.social-tooltip {
    display: none;
    position: absolute;
    right: 70px;
    top: 100%; /* 提示框显示在图标下方 */
    transform: translateY(10px); /* 稍微下移以避免与图标重叠 */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: row; /* 默认横向排列 */
    align-items: center;
    gap: 10px; /* 横向间距 */
}

/* 如果有图片，则将图片和文字上下排列 */
.social-tooltip.has-image {
    flex-direction: column; /* 图片和文字上下排列 */
    align-items: center; /* 图片和文字水平居中对齐 */
}

.social-icon:hover .social-tooltip {
    display: flex;
    opacity: 1;
    transform: translateY(10px) scale(1.05); /* 鼠标悬停时放大 */
}

.social-tooltip img {
    max-width: 100px; /* 控制图片最大宽度 */
    height: auto;
    display: block;
}

.social-tooltip p {
    font-size: 14px;
    color: #333;
    margin: 0;
    text-align: center; /* 文字居中对齐 */
    white-space: nowrap; /* 防止文字换行 */
}


/* 你可以根据需要调整圆角的大小 */
.envira-gallery.rounded-corners .envira-gallery-item img {
    border-radius: 15px; /* 调整圆角的大小 */
    overflow: hidden; /* 确保圆角效果生效 */
}

.wp-show-posts .wp-show-posts-more {
    text-align: right; /* 将按钮内容对齐到右边 */
    margin-top: 15px; /* 可选，添加上边距以美化布局 */
}

/* 移动端隐藏侧边栏 */
@media (max-width: 768px) {
    #social-sidebar {
        display: none;
    }
}