* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: var(--font-size-base);
line-height: 1.6;
color: #333;
min-height: 100vh;
overflow-y: scroll;
}
body.modal-open {
overflow: hidden; padding-right: 15px; }
a {
text-decoration: none;
color: #333;
} :root {
--font-size-xs: 10px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-xxl: 24px;
--font-size-huge: 32px;
} .navbar-nav .nav-link {
font-size: var(--font-size-base);
} h1, .h1 {
font-size: var(--font-size-huge);
margin-bottom: 1.5rem;
}
h2, .h2 {
font-size: var(--font-size-xxl);
margin-bottom: 1.25rem;
}
h3, .h3 {
font-size: var(--font-size-xl);
margin-bottom: 1rem;
margin-top: 1rem;
}
h4, .h4 {
font-size: var(--font-size-lg);
margin-bottom: 0.75rem;
}
h5, .h5 {
font-size: var(--font-size-md);
margin-bottom: 0.5rem;
}
h6, .h6 {
font-size: var(--font-size-base);
margin-bottom: 0.5rem;
} .product-title {
font-size: var(--font-size-xl);
}
.product-sku {
font-size: var(--font-size-sm);
}
.product-description {
font-size: var(--font-size-base);
}
.product-short-description {
font-size: var(--font-size-base);
}
.product-meta {
font-size: var(--font-size-base);
}
.product-attribute {
font-size: var(--font-size-base);
} .category-title {
font-size: var(--font-size-base);
}
.subcategories-nav .btn {
font-size: var(--font-size-base);
} .product-filters label {
font-size: var(--font-size-base);
font-weight: 500;
}
.product-filters .form-select {
font-size: var(--font-size-base);
} .site-footer {
font-size: var(--font-size-base);
}
.widget-title {
font-size: var(--font-size-md);
} .carousel-caption h2 {
font-size: var(--font-size-huge);
}
.carousel-caption p {
font-size: var(--font-size-lg);
} .btn {
font-size: var(--font-size-sm);
}
.btn-lg {
font-size: var(--font-size-base);
}
.btn-sm {
font-size: var(--font-size-xs);
} @media (max-width: 768px) {
:root {
--font-size-huge: 28px;
--font-size-xxl: 24px;
--font-size-xl: 18px;
--font-size-lg: 16px;
--font-size-md: 14px;
--font-size-base: 14px;
--font-size-sm: 12px;
--font-size-xs: 10px;
}
.carousel-caption h2 {
font-size: var(--font-size-xxl);
}
.carousel-caption p {
font-size: var(--font-size-base);
}
}
.container {
max-width: 1440px;
}
.site {
margin: 0 auto;
}
.site-header {
min-height: 80px; align-items: center;
box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
background-color: #fff;
} .woocommerce ul.products li.product {
text-align: center;
}
.woocommerce ul.products li.product .price {
color: #333;
font-weight: bold;
} .product-categories-nav {
margin: 10px 0;
background-color: #f7f7f7;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.product-categories-nav::-webkit-scrollbar {
display: none;
}
.categories-wrapper {
display: flex;
flex-wrap: nowrap;
padding: 10px 0;
gap: 10px;
min-width: min-content;
}
.category-item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #333;
padding: 10px;
min-width: 80px;
transition: all 0.3s ease;
}
.category-image {
width: 60px;
height: 50px;
object-fit: cover;
margin-bottom: 8px;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.category-item:hover .category-image {
opacity: 0.7;
}
.category-item.active .category-image {
opacity: 1;
}
.category-title {
font-size: var(--font-size-base);
margin: 0;
font-weight: 500;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} @media (max-width: 768px) {
.category-item {
min-width: 70px;
padding: 5px;
}
.category-image {
width: 40px;
height: 40px;
margin-bottom: 5px;
}
.category-title {
font-size: var(--font-size-xs);
}
} .subcategories-nav {
margin: 10px 0;
}
.subcategories-nav a::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-color: #002664;
border-radius: 50%;
margin-right: 5px;
opacity: .4;
}
.subcategories-nav a:hover::before {
opacity: .7;
}
.subcategories-nav .btn.active::before {
opacity: 1;
background-color: #fff;
}
.subcategories-nav .btn {
margin: 2px;
width: auto;
background-color: #fff;
border-color: #e3e3e3;
}
.subcategories-nav .btn:hover {
border-color: #e3e3e3;
background-color: #f7f7f7;
}
.subcategories-nav .btn.active {
color: #fff;
background-color: #002664;
border: none;
}
.children-items {
display: flex;
flex-wrap: wrap;
grid-gap: 10px 20px;
margin: 10px 0 0 0;
} .product-filters {
background-color: #f8f9fa;
border-radius: 8px;
}
.product-filters .form-select {
cursor: pointer;
}
.product-filters .btn-outline-secondary {
margin-top: 10px;
}
.product-filter-form label {
font-weight: 500;
margin-bottom: 5px;
}
.product-filter-form .btn {
margin-right: 10px;
}
.card {
border: none;
}
.card-body {
padding: 0;
}
.form-select:focus {
border-color: #002664;
box-shadow: none;
}
.woocommerce-loop-product__title {
font-size: var(--font-size-base);
color: #002664;
font-weight: 600;
} .attribute-filter:disabled {
background-color: #e9ecef;
cursor: not-allowed;
} .custom-logo-link {
display: flex;
align-items: center;
max-width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.custom-logo {
max-width: 100%;
height: auto;
margin: 0;
} .site-title {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
}
.site-description {
margin: 0;
font-size: 0.875rem;
color: #666;
} .navbar-nav {
height: 100%;
align-items: center;
margin-left: 20px;
}
.navbar-nav .nav-item {
display: flex;
align-items: center;
}
.navbar-nav .nav-link {
padding: 0 1rem;
height: 100%;
display: flex;
align-items: center;
} .cart-contents,
.ms-3 {
display: flex;
align-items: center;
height: 100%;
padding: 0 0.5rem;
}
.navbar {
width: 100%;
padding: 0;
min-height: 90px;
}
.navbar-brand {
padding: 0;
} .product-detail-container {
padding: 20px 0;
}
.product-gallery {
position: relative;
}
.product-title {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.product-sku {
color: #666;
font-size: 14px;
}
.product-description {
margin: 20px 0;
color: #666;
line-height: 1.8;
}
.product-meta {
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.product-categories a {
color: #666;
text-decoration: none;
}
.product-categories a:hover {
color: #333;
}
.product-attribute {
font-size: 14px;
color: #666;
}
.product-attribute strong {
color: #333;
margin-right: 10px;
} .product-tabs {
margin-top: 40px;
}
.nav-tabs {
border-bottom: 1px solid #dee2e6;
}
#productTabs > .nav-item {
margin-right: 2px;
}
.nav-tabs .nav-link {
color: #002664;
border: none;
border-bottom: 2px solid transparent;
padding: 10px 20px;
background-color: #eee;
}
.nav-tabs .nav-link:hover {
border-color: transparent;
color: #fff;
background-color: #002664;
}
.nav-tabs .nav-link.active {
color: #fff;
border-bottom: 2px solid #333;
font-weight: 500;
background-color: #002664;
}
.tab-content {
background: #fff; border-top: none;
border-radius: 0 0 4px 4px;
}
.content-info {
padding: 1.5rem 0;
list-style: none;
}
.content-info ul {
padding-left: 20px;
}
.content-info li {
margin-bottom: 10px;
}
.content-info h4 {
color: #002664;
font-weight: bold;
}
.product-detail hr{ } .woocommerce-product-gallery {
margin-bottom: 0;
}
.woocommerce-product-gallery__wrapper {
margin: 0;
}
.flex-viewport {
border: 1px solid #eee;
border-radius: 4px;
}
.flex-control-thumbs {
margin-top: 10px !important;
}
.flex-control-thumbs li {
padding: 5px !important;
}
.flex-control-thumbs img {
border: 1px solid #eee;
border-radius: 4px;
transition: all 0.3s ease;
}
.flex-control-thumbs img:hover,
.flex-control-thumbs img.flex-active {
border-color: #333;
} .home-banner { }
.carousel-item {
height: 520px;
background-color: #000;
}
.carousel-item img {
height: 100%;
object-fit: cover; }
.carousel-caption {
bottom: 50%;
transform: translateY(50%);
padding: 0;
text-align: center;
}
.carousel-caption h2 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.carousel-caption p {
font-size: 1.25rem;
margin-bottom: 1.5rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.carousel-caption .btn {
font-size: 1.1rem;
padding: 0.75rem 2rem;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #fff;
color: #333;
border: none;
transition: all 0.3s ease;
}
.carousel-caption .btn:hover {
background-color: #333;
color: #fff;
}
.carousel-control-prev,
.carousel-control-next {
width: 5%;
}
.carousel-indicators {
bottom: 20px;
}
.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
} @media (max-width: 768px) {
.carousel-item {
height: 300px;
}
.carousel-caption h2 {
font-size: 2rem;
}
.carousel-caption p {
font-size: 1rem;
display: none;
}
.carousel-caption .btn {
font-size: 0.9rem;
padding: 0.5rem 1.5rem;
}
} .product-gallery {
position: relative;
}
.main-image {
border-radius: 4px;
overflow: hidden;
margin-bottom: 15px;
}
.main-product-image {
width: 100%;
height: auto;
display: block;
cursor: pointer;
}
.gallery-images {
position: relative;
}
.gallery-image {
width: 100%;
height: auto;
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.gallery-image:hover {
border: 2px solid #002664;
}
.gallery-image.active {
border: 2px solid #002664;
} .image-zoom-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.image-zoom-container {
position: relative;
max-width: 90vw;
max-height: 90vh;
}
.zoomed-image {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.close-zoom {
position: absolute;
top: -40px;
right: -40px;
background: none;
border: none;
color: #fff;
font-size: 30px;
cursor: pointer;
padding: 10px;
}
.close-zoom:hover {
color: #ddd;
} .col-3 {
padding: 5px;
cursor: pointer;
} .main-image-container {
position: relative;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
line-height: 0;
padding: 0;
color: #333;
transition: all 0.3s ease;
opacity: 0;
}
.gallery-nav span {
display: inline-block;
line-height: 1;
height: 36px;
margin-top: -4px;
position: relative;
font-size: 36px;
}
.gallery-nav.prev span {
margin-left: -2px;
color: #002664;
}
.gallery-nav.next span {
margin-right: -2px;
}
.main-image-container:hover .gallery-nav {
opacity: 1;
}
.gallery-nav:hover {
background: rgba(255, 255, 255, 0.95);
}
.gallery-nav.prev {
left: 10px;
}
.gallery-nav.next {
right: 10px;
} .breadcrumb-nav {
margin: 10px 0;
padding: 10px 0;
}
.breadcrumb {
padding: 0;
margin: 0;
background: none;
display: flex;
align-items: center;
}
.breadcrumb-item {
font-size: var(--font-size-base);
color: #999;
display: flex;
align-items: center;
}
.breadcrumb-item a {
color: #666;
text-decoration: none;
transition: all 0.3s ease;
}
.breadcrumb-item a:hover {
color: #002664;
}
.breadcrumb-item.active {
color: #002664;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 12px;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: #999;
padding-right: 12px;
float: none;
} .search-form {
max-width: 300px;
margin-right: 15px;
}
.search-form .input-group {
border: 1px solid #dee2e6;
border-radius: 30px;
overflow: hidden;
background: #f8f9fa;
transition: all 0.3s ease;
}
.search-form .input-group:hover,
.search-form .input-group:focus-within {
border-color: #002664;
background: #fff;
box-shadow: 0 0 10px rgba(0, 38, 100, 0.1);
}
.search-form .form-control {
border: none;
padding: 10px 15px;
background: transparent;
font-size: var(--font-size-base);
color: #333;
}
.search-form .form-control::placeholder {
color: #999;
font-size: var(--font-size-base);
}
.search-form .form-control:focus {
outline: none;
box-shadow: none;
}
.search-form .btn {
border: none;
background: transparent;
color: #666;
padding: 0 15px;
transition: all 0.3s ease;
}
.search-form .btn:hover,
.search-form .btn:focus {
color: #002664;
background: transparent;
outline: none;
box-shadow: none;
}
.search-form .btn i {
font-size: var(--font-size-base);
} @media (max-width: 991px) {
.search-form {
max-width: 100%;
margin: 10px 15px;
}
.search-form .input-group {
background: #fff;
}
} .search-results-wrapper {
padding: 40px 0;
}
.search-title {
font-size: var(--font-size-xxl);
color: #333;
margin-bottom: 30px;
}
.search-query {
color: #002664;
} .search-product-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
text-align: center;
}
.search-product-card .product-link {
text-decoration: none;
color: inherit;
display: block;
}
.search-product-card .product-image {
position: relative;
padding-top: 100%;
overflow: hidden;
border-radius: 8px 8px 0 0;
}
.search-product-card .product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.search-product-card:hover .product-image img {
transform: scale(1.05);
}
.search-product-card .product-info {
padding: 15px;
}
.search-product-card .product-title {
font-size: var(--font-size-base);
margin-bottom: 8px;
color: #002664;
line-height: 1.4;
}
.search-product-card .product-categories {
font-size: var(--font-size-sm);
color: #666;
} .no-results {
text-align: center;
padding: 40px 0;
}
.no-results p {
font-size: var(--font-size-lg);
color: #666;
margin-bottom: 30px;
}
.search-suggestions h3,
.popular-categories h3 {
font-size: var(--font-size-lg);
color: #333;
margin-bottom: 20px;
}
.search-suggestions ul {
list-style: none;
padding: 0;
margin: 0;
}
.search-suggestions li {
font-size: var(--font-size-base);
color: #666;
margin-bottom: 10px;
}
.search-results .nav-links {
text-align: center;
display: block;
} .category-link {
display: block;
text-align: center;
text-decoration: none;
padding: 10px;
border-radius: 8px;
transition: all 0.3s ease;
}
.category-link:hover {
background: #f8f9fa;
}
.category-link img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 10px;
}
.category-name {
display: block;
font-size: var(--font-size-sm);
color: #333;
} .search-pagination {
margin-top: 40px;
text-align: center;
}
.search-pagination .page-numbers {
display: inline-block;
padding: 8px 16px;
margin: 0 4px;
border: 1px solid #ddd;
border-radius: 4px;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
.search-pagination .page-numbers.current {
background: #002664;
color: #fff;
border-color: #002664;
}
.search-pagination .page-numbers:hover:not(.current) {
background: #f8f9fa;
border-color: #002664;
} @media (max-width: 768px) {
.search-title {
font-size: var(--font-size-xl);
}
.category-link img {
width: 60px;
height: 60px;
}
}  .entry-title {
font-size: var(--font-size-xxl);
color: #333;
margin-bottom: 20px;
}
.entry-content {
font-size: var(--font-size-base);
line-height: 1.8;
color: #666;
}
.entry-content p {
margin-bottom: 1.5em;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
color: #333;
margin: 1.5em 0 1em;
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 1.5em 0;
}
.entry-content ul,
.entry-content ol {
margin: 1.5em 0;
padding-left: 2em;
}
.entry-content blockquote {
border-left: 4px solid #002664;
padding-left: 1.5em;
margin: 1.5em 0;
font-style: italic;
color: #666;
}
.entry-content table {
width: 100%;
margin: 1.5em 0;
border-collapse: collapse;
}
.entry-content th,
.entry-content td {
padding: 12px;
border: 1px solid #ddd;
}
.entry-content th {
background: #f8f9fa;
font-weight: 600;
}
.page-links {
margin: 1.5em 0;
padding: 1em 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.page-links a {
display: inline-block;
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
color: #666;
}
.page-links a:hover {
background: #f8f9fa;
color: #002664;
}
.edit-link {
display: inline-block;
margin-top: 20px;
font-size: var(--font-size-sm);
}
.edit-link a {
color: #666;
text-decoration: none;
}
.edit-link a:hover {
color: #002664;
} .widget-area {
padding-left: 30px;
}
.widget:last-child {
margin-bottom: 0;
}
.widget-title {
color: #333;
margin-bottom: 10px;
padding-bottom: 10px;
} @media (max-width: 991px) {
.widget-area {
padding-left: 0;
margin-top: 30px;
}
}
@media (max-width: 768px) {
.page-content {
padding: 20px;
}
.entry-title {
font-size: var(--font-size-xl);
}
} .post-content {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.post-thumbnail {
margin: -30px -30px 30px;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
.post-thumbnail img {
width: 100%;
height: auto;
}
.entry-title {
font-size: var(--font-size-xxl);
color: #333;
margin-bottom: 20px;
}
.entry-meta {
font-size: var(--font-size-sm);
color: #666;
margin-bottom: 30px;
}
.entry-meta span {
margin-right: 20px;
}
.entry-meta i {
margin-right: 5px;
}
.entry-meta a {
color: #666;
text-decoration: none;
}
.entry-meta a:hover {
color: #002664;
} .author-bio {
display: flex;
align-items: center;
padding: 30px;
margin: 30px 0;
background: #f8f9fa;
border-radius: 8px;
}
.author-avatar {
margin-right: 20px;
}
.author-avatar img {
border-radius: 50%;
}
.author-info {
flex: 1;
}
.author-title {
font-size: var(--font-size-lg);
margin-bottom: 10px;
}
.author-description {
font-size: var(--font-size-base);
color: #666;
margin: 0;
} .post-navigation {
margin: 30px 0;
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.nav-links {
display: flex;
justify-content: space-between;
}
.nav-previous,
.nav-next {
flex: 0 0 48%;
}
.nav-next {
text-align: right;
}
.nav-subtitle {
display: block;
font-size: var(--font-size-sm);
color: #666;
margin-bottom: 5px;
}
.nav-links a {
color: #333;
text-decoration: none;
font-weight: 500;
}
.nav-links a:hover {
color: #002664;
} .related-posts {
margin-top: 40px;
}
.section-title {
font-size: var(--font-size-xl);
margin-bottom: 20px;
}
.related-post {
margin-bottom: 30px;
}
.related-post .post-thumbnail {
margin: 0 0 15px;
border-radius: 8px;
}
.related-post .entry-title {
font-size: var(--font-size-base);
margin-bottom: 10px;
}
.related-post .entry-meta {
margin-bottom: 0;
} .comments-area {
margin-top: 40px;
padding: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.comments-title {
font-size: var(--font-size-xl);
margin-bottom: 30px;
}
.comment-list {
list-style: none;
padding: 0;
margin: 0;
}
.comment-body {
padding: 20px;
margin-bottom: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.comment-meta {
margin-bottom: 15px;
}
.comment-author {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.comment-author .avatar {
margin-right: 10px;
border-radius: 50%;
}
.comment-metadata {
font-size: var(--font-size-sm);
color: #666;
}
.comment-content p {
margin-bottom: 10px;
}
.reply {
text-align: right;
}
.comment-reply-link {
font-size: var(--font-size-sm);
color: #666;
text-decoration: none;
}
.comment-reply-link:hover {
color: #002664;
} .comment-respond {
margin-top: 30px;
}
.comment-reply-title {
font-size: var(--font-size-lg);
margin-bottom: 20px;
}
.comment-form-comment label {
display: block;
margin-bottom: 10px;
}
.comment-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
}
.form-submit {
margin-top: 20px;
} @media (max-width: 768px) {
.post-content {
padding: 20px;
}
.post-thumbnail {
margin: -20px -20px 20px;
}
.entry-title {
font-size: var(--font-size-xl);
}
.nav-links {
flex-direction: column;
}
.nav-previous,
.nav-next {
flex: 0 0 100%;
text-align: left;
margin-bottom: 15px;
}
.author-bio {
flex-direction: column;
text-align: center;
}
.author-avatar {
margin: 0 0 15px;
}
} .error-404 {
padding: 60px 0;
}
.error-icon {
font-size: 80px;
color: #002664;
}
.error-title {
font-size: var(--font-size-huge);
color: #333;
margin-bottom: 20px;
}
.error-content {
font-size: var(--font-size-lg);
color: #666;
max-width: 600px;
margin: 0 auto 30px;
}
.error-search {
max-width: 500px;
margin: 0 auto 40px;
}
.error-search .search-form {
max-width: 100%;
} .quick-links {
margin-bottom: 40px;
}
.quick-link-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.quick-link-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
color: #002664;
}
.quick-link-item i {
font-size: 24px;
margin-bottom: 10px;
}
.quick-link-item span {
font-size: var(--font-size-base);
font-weight: 500;
} .popular-categories {
margin-top: 40px;
}
.popular-categories h3 {
font-size: var(--font-size-xl);
color: #333;
margin-bottom: 30px;
}
.category-link {
display: block;
text-align: center;
padding: 15px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-decoration: none;
transition: all 0.3s ease;
}
.category-link:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.category-name {
display: block;
font-size: var(--font-size-base);
color: #333;
margin-top: 10px;
} @media (max-width: 768px) {
.error-404 {
padding: 40px 0;
}
.error-icon {
font-size: 60px;
}
.error-title {
font-size: var(--font-size-xxl);
}
.error-content {
font-size: var(--font-size-base);
}
.quick-link-item {
padding: 15px;
margin-bottom: 20px;
}
.category-image {
width: 60px;
height: 60px;
}
.category-name {
font-size: var(--font-size-sm);
}
} .navbar {
position: relative;
z-index: 1030;
}
.navbar-nav .nav-item.menu-item-mega {
position: static;
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
padding: 30px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1020;
border-radius: 0;
}
.mega-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.navbar-nav .nav-link {
position: relative;
z-index: 1031;
color: #000;
}
.mega-menu .container {
max-width: 1440px;
margin: 0 auto;
}
.mega-menu .row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.mega-menu-header{
display: flex;
align-items: center;
text-align: left;
}
.mega-menu-column {
padding: 15px;
display: flex;
flex-direction: column;
text-align: left;
}
.mega-menu-image-wrapper {
width: 60px;
height: 60px;
margin: 0 0 15px 0;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.mega-menu-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
opacity: .4;
}
.mega-menu-column:hover .mega-menu-image {
transform: scale(1.05);
opacity: 1;
}
.mega-menu-title {
margin: 0 0 15px 10px;
font-size: var(--font-size-base);
font-weight: 500;
}
.mega-menu-title a {
color: #335183;
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
}
.mega-menu-title a:hover {
color: #002664;
}
.mega-menu-list {
margin: 0;
padding: 0;
list-style: none;
}
.mega-menu-list li {
margin-bottom: 8px;
border-bottom: 1px solid #eee;
}
.mega-menu-link {
color: #666;
font-size: var(--font-size-base);
text-decoration: none;
transition: color 0.3s ease;
display: block;
padding: 4px 0;
}
.mega-menu-link:hover {
color: #002664;
} @media (max-width: 991px) {
.navbar-nav .nav-item.menu-item-mega {
position: relative;
}
.mega-menu {
position: static;
width: 100%;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
}
.mega-menu.show {
display: block;
}
.mega-menu-column {
width: 100%;
padding: 0;
border-bottom: 1px solid #eee;
}
.mega-menu-header {
padding: 8px 15px 8px 30px;
}
.mega-menu-list {
padding: 0;
margin: 0;
list-style: none;
}
.mega-menu-list li {
border-bottom: 1px solid #eee;
}
.mega-menu-link {
display: block;
padding: 8px 15px 8px 45px;
color: #666;
} .dropdown-toggle::after {
float: right;
margin-top: 8px;
}
} .modal-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 32px;
line-height: 0;
padding: 0;
color: #333;
transition: all 0.3s ease;
z-index: 1030;
}
.modal-nav:hover {
background: rgba(255, 255, 255, 0.95);
}
.modal-nav.prev {
left: 10px;
}
.modal-nav.next {
right: 10px;
} @media (min-width: 768px) {
.modal-nav.prev {
left: -30px;
}
.modal-nav.next {
right: -30px;
}
} .image-zoom-container {
position: relative;
max-width: 95vw;
max-height: 95vh;
margin: 0 auto;
}
.zoomed-image {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
} .close-zoom {
position: absolute;
top: -50px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 30px;
cursor: pointer;
padding: 10px;
z-index: 1030;
}
@media (min-width: 768px) {
.close-zoom {
right: -40px;
}
} .site-footer {
background-color: #f8f9fa;
padding: 60px 0 0;
margin-top: 60px;
}
.footer-column {
margin-bottom: 30px;
} .footer-logo {
margin-bottom: 20px;
}
.footer-logo img {
max-width: 150px;
height: auto;
}
.footer-site-title {
font-size: var(--font-size-lg);
color: #333;
margin-bottom: 10px;
}
.footer-site-description {
font-size: var(--font-size-base);
color: #666;
} .footer-widget-title {
color: #333;
margin-bottom: 10px;
padding-bottom: 10px;
}
.footer-contact-info {
list-style: none;
padding: 0;
margin: 0;
}
.footer-contact-info li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.footer-contact-info i {
margin-right: 10px;
color: #002664;
font-size: var(--font-size-lg);
}
.footer-contact-info a {
color: #666;
text-decoration: none;
transition: color 0.3s ease;
margin-top: 2px;
}
.footer-contact-info span {
margin-top: 2px;
}
.footer-contact-info a:hover {
color: #002664;
} .footer-column .widget {
margin-bottom: 30px;
}
.footer-column .widget-title {
color: #333;
margin-bottom: 10px;
padding-bottom: 10px;
}
.footer-column .widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column .widget ul li {
margin-bottom: 10px;
}
.footer-column .widget ul li a {
color: #666;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column .widget ul li a:hover {
color: #002664;
} .footer-bottom {
margin-top: 30px;
padding: 20px 0;
border-top: 1px solid #eee;
}
.copyright {
font-size: var(--font-size-base);
color: #666;
} @media (max-width: 768px) {
.site-footer {
padding: 40px 0 0;
margin-top: 40px;
}
.footer-column {
text-align: center;
}
.footer-logo img {
margin: 0 auto;
}
.footer-contact-info li {
justify-content: center;
}
} .video-thumbnail {
position: relative;
cursor: pointer;
width: 100%;
padding-bottom: 100%; overflow: hidden;
}
.video-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 2rem;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
opacity: 0.8;
transition: opacity 0.3s ease;
}
.video-thumbnail:hover .video-play-icon {
opacity: 1;
} #videoModal .modal-content {
background: #000;
}
#videoModal .modal-header {
border: none;
padding: 0.5rem;
position: absolute;
right: 0;
z-index: 1;
}
#videoModal .btn-close {
opacity: 0.7;
padding: 0.5rem;
}
#videoModal .btn-close:hover {
opacity: 1;
}
#videoModal .modal-body {
background: #000;
} .navbar-toggler {
padding: 0;
width: 30px;
height: 30px;
position: relative;
border: none;
background: transparent;
}
.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.navbar-toggler-icon-bar {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #333;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.navbar-toggler-icon-bar:nth-child(1) {
top: 6px;
}
.navbar-toggler-icon-bar:nth-child(2) {
top: 14px;
}
.navbar-toggler-icon-bar:nth-child(3) {
top: 22px;
} .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-bar:nth-child(1) {
top: 14px;
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-bar:nth-child(2) {
opacity: 0;
width: 0;
left: 50%;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-bar:nth-child(3) {
top: 14px;
transform: rotate(-45deg);
} @media (max-width: 991px) {
.navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
z-index: 1029;
}
.navbar-collapse.show {
max-height: calc(100vh - 90px);
overflow-y: auto;
}
.navbar-nav {
padding: 0;
margin: 0;
width: 100%;
} .navbar-nav > .nav-item {
display: block;
width: 100%;
border-bottom: 1px solid #eee;
}
.navbar-nav > .nav-item > .nav-link {
display: block;
width: 100%;
padding: 12px 15px;
} .mega-menu {
display: none;
width: 100%;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
}
.mega-menu.show {
display: block;
}
.mega-menu-column {
width: 100%;
padding: 0;
border-bottom: 1px solid #eee;
}
.mega-menu-header {
padding: 8px 15px 8px 30px;
}
.mega-menu-list {
padding: 0;
margin: 0;
list-style: none;
}
.mega-menu-list li {
border-bottom: 1px solid #eee;
}
.mega-menu-link {
display: block;
padding: 8px 15px 8px 45px;
color: #666;
} .dropdown-toggle::after {
float: right;
margin-top: 8px;
}
} .contact-page {
background-color: #fff;
}
.contact-info {
background: #f8f9fa;
padding: 30px;
border-radius: 8px;
height: 100%;
}
.contact-title {
color: #333;
font-size: var(--font-size-xl);
font-weight: 600;
margin-bottom: 30px;
}
.contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
}
.contact-icon {
width: 40px;
height: 40px;
background: #002664;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.contact-icon i {
color: #fff;
font-size: 20px;
}
.contact-text h4 {
font-size: var(--font-size-base);
color: #333;
margin-bottom: 5px;
font-weight: 600;
}
.contact-text p {
margin: 0;
color: #666;
font-size: var(--font-size-base);
}
.contact-text a {
color: #666;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-text a:hover {
color: #002664;
}
.contact-form-wrapper {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
}
.contact-form .form-label {
color: #333;
font-weight: 500;
margin-bottom: 8px;
}
.contact-form .form-control {
border-color: #dee2e6;
padding: 12px 15px;
}
.contact-form .form-control:focus {
border-color: #002664;
box-shadow: none;
}
.contact-form textarea.form-control {
min-height: 150px;
}
.contact-form .btn-primary {
padding: 12px 30px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-map {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
} @media (max-width: 768px) {
.contact-info {
margin-bottom: 30px;
}
.contact-form-wrapper {
padding: 20px;
}
.contact-icon {
width: 35px;
height: 35px;
}
.contact-icon i {
font-size: 16px;
}
} .product-actions .btn-primary {
background-color: #002664;
border-color: #002664;
color: #fff;
padding: 8px 20px;
font-size: var(--font-size-base);
transition: all 0.3s ease;
}
.product-actions .btn-primary:hover {
background-color: #003997;
border-color: #003997;
} .product-actions {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
} @media (max-width: 576px) {
.product-actions {
flex-direction: column;
align-items: stretch;
}
.product-actions .btn-primary {
width: 100%;
margin-bottom: 10px;
}
}
.product-info .woocommerce-Price-amount {
font-size: 1.5rem;
font-weight: 600;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt {
background-color: #002664;
border: 1px solid #002664;
color: #fff;
text-transform: uppercase;
padding: 12px 30px;
font-weight: 500;
border-radius: 0.375rem;
transition: all 0.3s ease;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover {
background-color: #fff;
border: 1px solid #001a4d;
color: #001a4d;
} .product-actions .cart {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 0;
}
.cart div.quantity {
float: none;
margin: 0;
} .woocommerce .quantity .qty {
width: 70px;
text-align: center;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
} @media (max-width: 576px) {
.woocommerce div.product form.cart {
flex-wrap: nowrap;
}
.woocommerce .quantity .qty {
width: 60px;
}
} .modal-dialog {
max-width: 600px;
}
.modal-content {
border: none;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.modal-header {
background-color: #002664;
color: #fff;
border-radius: 8px 8px 0 0;
padding: 1.5rem;
border-bottom: none;
}
.modal-title {
font-size: var(--font-size-lg);
font-weight: 600;
}
.modal-header .btn-close {
background-color: transparent;
opacity: 1;
filter: brightness(0) invert(1);
padding: 1rem;
}
.modal-body {
padding: 2rem;
}
.modal-footer {
padding: 1.5rem;
border-top: 1px solid #eee;
background-color: #f8f9fa;
border-radius: 0 0 8px 8px;
} .wholesale-inquiry-form .form-label {
color: #333;
font-weight: 500;
margin-bottom: 0.5rem;
}
.wholesale-inquiry-form .form-control {
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 0.75rem 1rem;
font-size: var(--font-size-base);
transition: all 0.3s ease;
}
.wholesale-inquiry-form .form-control:focus {
border-color: #002664;
box-shadow: 0 0 0 0.2rem rgba(0, 38, 100, 0.15);
}
.wholesale-inquiry-form textarea.form-control {
min-height: 120px;
resize: vertical;
} .modal-footer .btn {
padding: 0.75rem 1.5rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.modal-footer .btn-secondary {
background-color: #f8f9fa;
border-color: #dee2e6;
color: #333;
}
.modal-footer .btn-secondary:hover {
background-color: #e9ecef;
border-color: #dee2e6;
color: #333;
}
.modal-footer .btn-primary {
background-color: #002664;
border-color: #002664;
}
.modal-footer .btn-primary:hover {
background-color: #001a4d;
border-color: #001a4d;
} @media (max-width: 576px) {
.modal-dialog {
margin: 1rem;
}
.modal-body {
padding: 1.5rem;
}
.modal-footer {
padding: 1rem;
}
.modal-footer .btn {
padding: 0.5rem 1rem;
}
} .modal.fade .modal-dialog {
transform: scale(0.9);
opacity: 0;
transition: all 0.3s ease;
}
.modal.show .modal-dialog {
transform: scale(1);
opacity: 1;
} .wc-block-cart__submit-container {
background-color: #002664;
border: 1px solid #002664;
font-weight: 500;
border-radius: 0.375rem;
transition: all 0.3s ease;
color: #fff;
width: 100%;
}
.wc-block-cart__submit-container:hover {
background-color: #fff;
border: 1px solid #002664;
color: #002664;
}
.wc-block-cart__submit-container a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
text-align: center;
line-height: inherit;
text-decoration: none;
color: inherit;
}
.wc-block-components-button__text:hover {
color: #002664;
}
.wc-block-components-product-metadata {
font-size: var(--font-size-base);
}
.wc-block-components-totals-coupon__button {
background-color: #002664;
border: 1px solid #002664;
color: #fff;
padding: 0;
font-weight: 500;
border-radius: 0.375rem;
transition: all 0.3s ease;
}
.wc-block-components-totals-coupon__button span {
color: #fff;
}
.wc-block-components-totals-coupon__button span:hover {
color: #fff;
} .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button--full-width {
background-color: #002664;
border: 1px solid #002664;
color: #fff;
padding: 0;
font-weight: 500;
border-radius: 0.375rem;
transition: all 0.3s ease;
}
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button--full-width:hover {
background-color: #fff;
border: 1px solid #002664;
color: #002664;
}
.wc-block-components-form .wc-block-components-text-input input[type="email"], .wc-block-components-form .wc-block-components-text-input input[type="number"], .wc-block-components-form .wc-block-components-text-input input[type="password"], .wc-block-components-form .wc-block-components-text-input input[type="tel"], .wc-block-components-form .wc-block-components-text-input input[type="text"], .wc-block-components-form .wc-block-components-text-input input[type="url"], .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="number"], .wc-block-components-text-input input[type="password"], .wc-block-components-text-input input[type="tel"], .wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="url"] {
border: 1px solid #dee2e6;
} .woocommerce-account .woocommerce {
padding: 30px 0;
} .woocommerce-MyAccount-navigation {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
margin-bottom: 10px;
}
.woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 12px 15px;
color: #333;
text-decoration: none;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 4px;
transition: all 0.3s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
background: #f8f9fa;
color: #002664;
border-color: #002664;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
background: #002664;
color: #fff;
border-color: #002664;
} .woocommerce-MyAccount-content {
background: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
} .woocommerce-orders-table,
.woocommerce-table--order-details {
width: 100%;
margin-bottom: 20px;
border: none;
border-collapse: collapse;
}
.woocommerce-orders-table th,
.woocommerce-table--order-details th {
background: #f8f9fa;
padding: 12px;
font-weight: 600;
text-align: left;
border-bottom: 2px solid #dee2e6;
}
.woocommerce-orders-table td,
.woocommerce-table--order-details td {
padding: 12px;
border-bottom: 1px solid #eee;
} .woocommerce-Address {
background: #fff;
padding: 20px;
border-radius: 4px;
border: 1px solid #dee2e6;
margin-bottom: 20px;
}
.woocommerce-Address-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.woocommerce-Address-title h3 {
margin: 0;
font-size: var(--font-size-lg);
} .woocommerce-EditAccountForm,
.woocommerce-form-login,
.woocommerce-form-register {
max-width: 600px;
}
.woocommerce-form-row {
margin-bottom: 20px;
}
.woocommerce-form-row label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.woocommerce-form-row input {
width: 100%;
padding: 10px;
border: 1px solid #dee2e6;
border-radius: 4px;
}
.woocommerce-form-row input:focus {
border-color: #002664;
outline: none;
} .woocommerce-MyAccount-content .button,
.woocommerce-form-login .button,
.woocommerce-form-register .button {
background: #002664;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover {
background: #001a4d;
} .woocommerce-account .woocommerce h2 {
font-size: var(--font-size-xl);
margin-bottom: 30px;
text-align: center;
}
.woocommerce-form-login,
.woocommerce-form-register {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
.woocommerce-form-login p,
.woocommerce-form-register p {
margin-bottom: 20px;
}
.woocommerce-form-login .woocommerce-form-login__rememberme {
display: block;
margin-bottom: 20px;
}
.woocommerce-LostPassword {
margin-top: 15px;
text-align: center;
}
.woocommerce-LostPassword a {
color: #666;
text-decoration: none;
}
.woocommerce-LostPassword a:hover {
color: #002664;
} @media (max-width: 768px) {
.woocommerce-MyAccount-navigation {
margin-bottom: 30px;
}
.woocommerce-MyAccount-content {
padding: 20px;
}
.woocommerce-orders-table,
.woocommerce-table--order-details {
display: block;
overflow-x: auto;
}
}
.bi-person-fill, .bi-bag-fill {
font-size: 18px;
color: #002480;
} .contact-info .contact-item {
color: #002664;
font-size: var(--font-size-lg);
}
.contact-info .contact-item:first-child .contact-text p {
font-weight: 600;
color: #333;
} .about-title {
color: #333;
margin-bottom: 30px;
font-size: var(--font-size-xxl);
font-weight: 600;
}
.about-description {
color: #666;
line-height: 1.8;
margin-bottom: 30px;
}
.about-image img {
width: 100%;
height: auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
} .feature-card {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
height: 100%;
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
color: #002664;
font-size: 2.5rem;
margin-bottom: 20px;
}
.feature-title {
color: #333;
font-size: var(--font-size-lg);
margin-bottom: 15px;
}
.feature-description {
color: #666;
margin: 0;
} .timeline {
position: relative;
padding: 40px 0;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #002664;
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 30px;
width: 50%;
padding-right: 40px;
}
.timeline-item:nth-child(even) {
margin-left: 50%;
padding-right: 0;
padding-left: 40px;
}
.timeline-year {
position: absolute;
top: 0;
right: -25px;
background: #002664;
color: #fff;
padding: 5px 15px;
border-radius: 20px;
font-weight: 600;
}
.timeline-item:nth-child(even) .timeline-year {
right: auto;
left: -25px;
}
.timeline-content {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
} .value-card {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
height: 100%;
}
.value-icon {
color: #002664;
font-size: 2rem;
margin-bottom: 20px;
}
.value-title {
color: #333;
font-size: var(--font-size-md);
margin-bottom: 15px;
}
.value-description {
color: #666;
margin: 0;
font-size: var(--font-size-sm);
} .about-cta {
background: #f8f9fa;
padding: 60px 30px;
border-radius: 8px;
margin-top: 60px;
}
.cta-title {
color: #333;
font-size: var(--font-size-xl);
margin-bottom: 30px;
} @media (max-width: 768px) {
.timeline::before {
left: 0;
}
.timeline-item {
width: 100%;
padding-left: 30px;
padding-right: 0;
}
.timeline-item:nth-child(even) {
margin-left: 0;
padding-left: 30px;
}
.timeline-year {
left: -25px;
right: auto;
}
.timeline-item:nth-child(even) .timeline-year {
left: -25px;
}
}
.btn-primary {
background-color: #002664;
border-color: #002664;
color: #fff;
} .company-features {
padding: 60px 0;
}
.feature-box {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
height: 100%;
transition: transform 0.3s ease;
}
.feature-box:hover {
transform: translateY(-5px);
}
.feature-box i {
font-size: 2.5rem;
color: #002664;
margin-bottom: 20px;
}
.feature-box h3 {
color: #333;
font-size: var(--font-size-lg);
margin-bottom: 15px;
}
.feature-box p {
color: #666;
margin: 0;
font-size: var(--font-size-base);
} .home-cta {
background: #f8f9fa;
padding: 60px 30px;
border-radius: 8px;
text-align: center;
}
.cta-content h2 {
color: #333;
font-size: var(--font-size-xl);
margin-bottom: 20px;
}
.cta-content p {
color: #666;
font-size: var(--font-size-lg);
margin-bottom: 30px;
} .section-title {
color: #333;
font-size: var(--font-size-xl);
position: relative;
padding-bottom: 15px;
text-align: center;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #002664;
} .featured-products {
background-color: #f8f9fa;
padding: 60px 0;
}
.featured-product-block {
position: relative;
display: block;
margin-bottom: 30px;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: #fff;
}
.featured-product-block img {
width: 100%;
transition: transform 0.3s ease;
}
.featured-product-block:hover img {
transform: scale(1.05);
} .featured-product-block.large img {
height: 600px;
object-fit: cover;
} .featured-product-block.small img {
height: 285px;
object-fit: cover;
} .featured-product-block.wide img {
height: 285px;
object-fit: cover;
}
.featured-product-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
transition: background 0.3s ease;
}
.featured-product-block:hover .featured-product-content {
background: linear-gradient(to top, rgba(0,38,100,0.9), rgba(0,38,100,0));
}
.featured-product-content h3 {
font-size: var(--font-size-lg);
margin-bottom: 8px;
font-weight: 600;
}
.featured-product-content p {
font-size: var(--font-size-base);
margin: 0;
opacity: 0.9;
} @media (max-width: 768px) {
.featured-product-block.large img,
.featured-product-block.small img,
.featured-product-block.wide img {
height: 200px;
}
.featured-product-block.wide img {
margin-top: 0;
}
.featured-product-content {
padding: 15px;
}
.featured-product-content h3 {
font-size: var(--font-size-base);
}
.featured-product-content p {
font-size: var(--font-size-sm);
}
} .featured-blocks {
position: relative;
z-index: 2;
padding: 60px 0;
}
.featured-block {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
text-decoration: none;
color: #fff;
}
.featured-block img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
}
.featured-block:hover img {
transform: scale(1.05);
}
.featured-block-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
text-align: center;
transition: background 0.3s ease;
}
.featured-block:hover .featured-block-content {
background: linear-gradient(to top, rgba(0,38,100,0.9), rgba(0,38,100,0));
}
.featured-block-content h3 {
font-size: var(--font-size-lg);
margin-bottom: 10px;
font-weight: 600;
}
.featured-block-content p {
font-size: var(--font-size-base);
margin: 0;
opacity: 0.9;
} @media (max-width: 768px) {
.featured-blocks {
margin-top: 0;
}
.featured-block img {
height: 200px;
}
.featured-block-content {
padding: 15px;
}
.featured-block-content h3 {
font-size: var(--font-size-base);
}
.featured-block-content p {
font-size: var(--font-size-sm);
}
} .document-list {
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.document-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.document-info {
display: flex;
align-items: center;
font-size: var(--font-size-base);
}
.document-info i {
font-size: 24px;
color: #dc3545;
}
.document-name {
margin-left: 10px;
color: #333;
}
.document-actions {
flex-shrink: 0;
} .content-info table {
--bs-table-border-color: #91AADF;
--bs-table-striped-bg: #D9E1F4;
font-size: 12px;
}
.info-table {
text-align: center;
}
.info-table table th {
color: #fff;
background-color: #4874CB;
} .category-description .card {
border: none;
}
.category-description .card-title {
color: #333;
font-size: var(--font-size-xl);
font-weight: 600;
}
.description-content {
color: #666;
line-height: 1.8;
}
.description-content p:last-child {
margin-bottom: 0;
} .language-switcher .language-btn {
border: none;
padding: 0.375rem 0.75rem;
border-radius: 4px;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
}
.language-switcher .dropdown-menu {
min-width: 180px;
padding: 0.5rem 0;
margin-top: 0.5rem;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.language-switcher .dropdown-item {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.language-switcher .dropdown-item.active,
.language-switcher .dropdown-item:active {
background-color: #0b5ed7;
color: #fff;
}
.language-switcher .bi-globe {
font-size: 1rem;
} @media (max-width: 768px) {
.language-switcher .language-btn {
padding: 0.25rem 0.5rem;
}
.language-switcher .current-lang {
display: none;
}
}
.industry-card{
text-align:center;
}
.industry-img{
overflow:hidden;
border-radius:12px;
margin-bottom:15px;
}
.industry-img img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
transition:.4s;
}
.industry-card:hover img{
transform:scale(1.08);
}
.industry-card h5{
font-size:14px;
font-weight:600;
margin:0;
}
.about-section{
background:#f8fafc;
}
.factory-card{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}
.factory-card img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
transition:.4s;
}
.factory-card:hover img{
transform:scale(1.08);
}
.factory-card h5{
padding:18px;
margin:0;
text-align:center;
font-size:18px;
font-weight:600;
}
.factorySwiper{
padding-bottom:55px;
}
.swiper-button-next,
.swiper-button-prev{
color:#0d6efd;
}
.swiper-pagination-bullet-active{
background:#0d6efd;
}
.index-features{
background:#f8fafc;
}
.index-features .feature-box{
background: #fff;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
height: 100%;
transition: transform 0.3s ease;
} .floating-contact{
position:fixed;
right:0;
top:50%;
transform:translateY(-50%);
z-index:9999;
}
.contact-item{
position:relative;
margin-bottom:12px;
}
.contact-icon{
width:55px;
height:55px;
background:#0d6efd;
color:#fff;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.3s;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}
.contact-icon i{
font-size:26px;
}
.contact-icon:hover{
background:#0b5ed7;
}
.contact-popup{
position:absolute;
right:70px;
top:50%;
transform:translateY(-50%);
min-width:220px;
background:#fff;
border-radius:10px;
padding:15px;
box-shadow:0 8px 25px rgba(0,0,0,.15);
display:none;
white-space:nowrap;
}
.contact-item:hover .contact-popup{
display:block;
}
.qr-popup{
width:180px;
text-align:center;
}
.qr-popup img{
width:150px;
height:150px;
object-fit:cover;
margin-bottom:10px;
}
.contact-item .phone, .contact-item .email{
font-size: 20px;
}
@media(max-width:768px){
.floating-contact,.dianhua{
display:none;
}
}
.dianhua span{
font-size: 18px;
font-weight: bold;
color: #002664;
}
.carousel-indicators [data-bs-target]{
width: 10px;
height: 10px;
}