.our-work-wrapper {
width: 100%;
padding: 140px 0 100px; position: relative;
overflow: visible !important;
margin-bottom: 60px;
}
.our-work-wrapper::before {
content: '';
position: absolute;
top: 0;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(53, 78, 43, 0.03) 0%, transparent 70%);
border-radius: 50%;
}
.our-work-wrapper::after {
content: '';
position: absolute;
bottom: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 107, 53, 0.04) 0%, transparent 70%);
border-radius: 50%;
}
.our-work-container {
max-width: 1280px;
margin: 0 auto;
padding: 24px;
position: relative;
z-index: 1;
} .category-header {
text-align: center;
margin-bottom: 70px;
position: relative;
animation: fadeInDown 0.8s ease-out;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.category-header::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: linear-gradient(90deg, transparent, #ff6b35, transparent);
margin: 25px auto 0;
border-radius: 2px;
animation: expandWidth 1s ease-out 0.3s both;
}
@keyframes expandWidth {
from {
width: 0;
}
to {
width: 100px;
}
}
.category-subtitle {
font-size: 0.95rem;
color: #ff6b35;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
display: block;
opacity: 0;
animation: fadeIn 0.8s ease-out 0.2s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.category-title {
font-size: 3.2rem;
font-weight: 800;
color: #354e2b;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
display: inline-block;
line-height: 1.2;
}
.category-title::before {
content: '';
position: absolute;
top: -15px;
left: -25px;
width: 50px;
height: 50px;
background: rgba(255, 107, 53, 0.1);
border-radius: 50%;
z-index: -1;
}
.category-description {
font-size: 1.15rem;
color: #5a7a4d;
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
font-weight: 400;
} .work-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 40px;
margin-bottom: 60px;
justify-content: center;
padding: 0 20px;
} .work-tile {
animation: fadeInUp 0.6s ease-out backwards;
}
.work-tile:nth-child(1) { animation-delay: 0.1s; }
.work-tile:nth-child(2) { animation-delay: 0.2s; }
.work-tile:nth-child(3) { animation-delay: 0.3s; }
.work-tile:nth-child(4) { animation-delay: 0.4s; }
.work-tile:nth-child(5) { animation-delay: 0.5s; }
.work-tile:nth-child(6) { animation-delay: 0.6s; }
.work-tile:nth-child(7) { animation-delay: 0.7s; }
.work-tile:nth-child(8) { animation-delay: 0.8s; }
.work-tile:nth-child(9) { animation-delay: 0.9s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .work-tile {
position: relative;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(53, 78, 43, 0.1);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
height: 380px;
border: 2px solid rgba(53, 78, 43, 0.08);
backface-visibility: hidden; transform: translateZ(0); }
.work-tile:hover {
transform: translateY(-10px) translateZ(0); box-shadow: 0 20px 50px rgba(53, 78, 43, 0.25);
border-color: #ff6b35;
}
.work-tile::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 2;
pointer-events: none;
}
.work-tile:hover::before {
opacity: 1;
}
.tile-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
position: relative;
} .tile-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(135deg, #e8efe5 0%, #d4e0cf 100%);
}
.tile-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, 
transparent 0%, 
rgba(0,0,0,0.3) 100%);
z-index: 1;
transition: opacity 0.4s ease;
}
.work-tile:hover .tile-image::after {
background: linear-gradient(to bottom, 
rgba(0,0,0,0.1) 0%, 
rgba(0,0,0,0.5) 100%);
}
.tile-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
will-change: transform;
}
.work-tile:hover .tile-image img {
transform: scale(1.08);
} .tile-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 26px 28px;
background: linear-gradient(to top, 
rgba(53, 78, 43, 0.95) 0%,
rgba(53, 78, 43, 0.80) 60%,
transparent 100%);
z-index: 5;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} .work-tile:hover .tile-content {
bottom: auto;
top: auto; position: relative; background: linear-gradient(
to bottom,
rgba(53, 78, 43, 0.95) 0%,
rgba(53, 78, 43, 0.70) 50%,
rgba(53, 78, 43, 0.00) 100%
);
padding: 8px 15px; }
.tile-title {
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
transition: all 0.4s ease;
} .work-tile:hover .tile-title {
font-size: 1.35rem;
margin-bottom: 12px;
} .tile-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, 
rgba(53, 78, 43, 0.98) 0%, 
rgba(53, 78, 43, 0.95) 100%);
padding: 24px 26px 28px;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 4;
display: flex;
flex-direction: column;
justify-content: flex-end;
max-height: 85%; overflow: hidden;
} .work-tile:hover .tile-overlay {
transform: translateY(0);
padding: 24px 26px 28px; }
.overlay-content {
display: flex;
flex-direction: column;
gap: 18px;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease 0.2s;
} .work-tile:hover .overlay-content {
opacity: 1;
transform: translateY(0);
}
.tile-excerpt {
font-size: 1rem;
color: #ffffff;
line-height: 1.7;
margin: 0;
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
opacity: 0.95;
} .read-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #ff6b35 0%, #ff8555 100%);
color: #ffffff;
padding: 10px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 0.8rem;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
align-self: flex-start;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
position: relative;
overflow: hidden;
}
.read-more-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.read-more-btn:hover::before {
left: 100%;
}
.read-more-btn:hover {
background: linear-gradient(135deg, #ff8555 0%, #ffa575 100%);
transform: translateX(5px);
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
}
.read-more-btn svg {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.read-more-btn:hover svg {
transform: translateX(3px);
} .work-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 60px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.work-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
background: #ffffff;
color: #354e2b;
border: 2px solid #d4e0cf;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(53, 78, 43, 0.08);
}
.work-pagination .page-numbers:hover {
background: #354e2b;
color: #ffffff;
border-color: #354e2b;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(53, 78, 43, 0.2);
}
.work-pagination .page-numbers.current {
background: linear-gradient(135deg, #ff6b35 0%, #ff8555 100%);
color: #ffffff;
border-color: #ff6b35;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}
.work-pagination .page-numbers.dots {
border: none;
background: transparent;
box-shadow: none;
pointer-events: none;
}
.work-pagination .prev,
.work-pagination .next {
background: #354e2b;
color: #ffffff;
border-color: #354e2b;
font-size: 0.95rem;
}
.work-pagination .prev:hover,
.work-pagination .next:hover {
background: #ff6b35;
border-color: #ff6b35;
} .no-posts {
text-align: center;
padding: 80px 40px;
background: linear-gradient(135deg, #f8faf7 0%, #eef3ec 100%);
border-radius: 20px;
border: 2px dashed #d4e0cf;
animation: fadeInUp 0.8s ease-out;
grid-column: 1 / -1;
}
.no-posts h2 {
font-size: 2rem;
color: #354e2b;
margin-bottom: 12px;
font-weight: 700;
}
.no-posts p {
font-size: 1.1rem;
color: #5a7a4d;
max-width: 500px;
margin: 0 auto;
} .site-footer,
footer,
#colophon {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 0 !important;
position: relative !important;
z-index: 10 !important;
} .footer-widgets,
.footer-widget-area,
#footer-widgets,
.widget-area {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 40px 20px !important;
min-height: 100px !important;
} .footer-widgets .widget,
.footer-widget-area .widget,
#footer-widgets .widget {
display: block !important;
visibility: visible !important;
margin-bottom: 30px !important;
} .our-work-wrapper {
overflow: visible !important; margin-bottom: 60px !important;
position: relative !important;
} .our-work-wrapper::after {
content: '';
display: table;
clear: both;
}  @media (min-width: 1400px) {
.work-grid {
grid-template-columns: repeat(3, 1fr);
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
} @media (max-width: 1200px) {
.our-work-wrapper {
padding: 120px 0 60px;
}
.work-grid {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 35px;
}
.category-title {
font-size: 2.8rem;
}
.work-tile {
height: 360px;
}
} @media (max-width: 992px) {
.our-work-wrapper {
padding: 200px 0 70px;
}
.work-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
padding: 0 10px;
}
.category-header {
margin-bottom: 60px;
}
.category-title {
font-size: 2.5rem;
letter-spacing: 2px;
}
.category-description {
font-size: 1.1rem;
}
.work-tile {
height: 340px;
}
.tile-title {
font-size: 1.4rem;
}
.work-tile:hover .tile-title {
font-size: 1.3rem;
}
.tile-excerpt {
font-size: 0.95rem;
}
} @media (max-width: 768px) {
.our-work-wrapper {
padding: 200px 0 60px;
margin-bottom: 40px;
}
.our-work-container {
padding: 0 16px;
}
.work-grid {
grid-template-columns: 1fr;
gap: 28px;
padding: 0;
}
.category-header {
margin-bottom: 50px;
}
.category-title {
font-size: 2.2rem;
letter-spacing: 1.5px;
}
.category-subtitle {
font-size: 0.9rem;
letter-spacing: 2.5px;
}
.category-description {
font-size: 1.05rem;
padding: 0 10px;
}
.work-tile {
height: 360px;
border-radius: 14px;
}
.work-tile:hover {
transform: translateY(-8px);
}
.tile-content {
padding: 22px 24px 26px;
}
.work-tile:hover .tile-content,
.work-tile.active .tile-content {
padding: 22px 24px 18px;
}
.tile-title {
font-size: 1.35rem;
}
.work-tile:hover .tile-title,
.work-tile.active .tile-title {
font-size: 1.25rem;
} .tile-overlay {
padding: 22px 24px 26px;
}
.work-tile.active .tile-content {
bottom: auto;
top: 0;
background: linear-gradient(to bottom, 
rgba(53, 78, 43, 0.95) 0%,
rgba(53, 78, 43, 0.70) 80%,
transparent 100%);
}
.work-tile.active .tile-title {
font-size: 1.25rem;
margin-bottom: 12px;
}
.work-tile.active .tile-overlay {
transform: translateY(0);
padding-top: 70px;
}
.work-tile.active .overlay-content {
opacity: 1;
transform: translateY(0);
}
.tile-excerpt {
font-size: 0.95rem;
line-height: 1.65;
-webkit-line-clamp: 3;
}
.read-more-btn {
padding: 9px 18px;
font-size: 0.75rem;
width: 100%;
justify-content: center;
}
.work-pagination {
margin-bottom: 30px;
}
.work-pagination .page-numbers {
min-width: 40px;
height: 40px;
font-size: 0.9rem;
}
} @media (max-width: 576px) {
.our-work-wrapper {
padding: 200px 0 50px;
}
.category-title {
font-size: 1.9rem;
}
.category-description {
font-size: 1rem;
}
.work-grid {
gap: 24px;
}
.work-tile {
height: 340px;
}
.tile-content {
padding: 20px 22px 24px;
}
.tile-title {
font-size: 1.25rem;
}
.work-tile:hover .tile-title,
.work-tile.active .tile-title {
font-size: 1.15rem;
}
.tile-excerpt {
font-size: 0.9rem;
}
.read-more-btn {
padding: 8px 16px;
font-size: 0.7rem;
}
} @media (max-width: 480px) {
.our-work-wrapper {
padding: 200px 0 40px;
margin-bottom: 30px;
}
.category-title {
font-size: 1.7rem;
letter-spacing: 1px;
}
.category-subtitle {
font-size: 0.85rem;
letter-spacing: 2px;
}
.work-grid {
gap: 20px;
}
.work-tile {
height: 320px;
}
.tile-content {
padding: 18px 20px 22px;
}
.tile-title {
font-size: 1.2rem;
}
.work-tile:hover .tile-title,
.work-tile.active .tile-title {
font-size: 1.1rem;
}
.tile-excerpt {
font-size: 0.85rem;
line-height: 1.6;
}
.tile-overlay {
padding: 18px 20px 24px;
}
.work-tile.active .tile-overlay {
padding-top: 65px;
}
.read-more-btn {
padding: 7px 14px;
font-size: 0.65rem;
letter-spacing: 0.3px;
}
.work-pagination .page-numbers {
min-width: 36px;
height: 36px;
font-size: 0.85rem;
padding: 0 10px;
}
} .work-tile,
.tile-image img,
.tile-overlay,
.tile-content,
.overlay-content {
will-change: transform;
}
.work-tile:not(:hover) {
will-change: auto;
}
.tile-image img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.work-tile:hover {
transform: none;
}
.work-tile:hover .tile-image img {
transform: none;
}
} @media print {
.our-work-wrapper {
padding: 20px 0;
}
.work-tile {
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.tile-overlay,
.read-more-btn,
.work-pagination {
display: none;
}
}