.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var( --container-widget-align-self,initial );--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer:not(:has(>.elementor-widget-container))>.elementor-spacer,.e-con>.elementor-widget-spacer:not(:has(>.elementor-widget-container))>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer:not(:has(>.elementor-widget-container))>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer:not(:has(>.elementor-widget-container))>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{min-height:22px;min-width:22px;position:relative}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{height:22px;inset:0;margin:auto;padding:0;position:absolute;width:22px}.dinopack-blog-container {
overflow: visible;
}
.dinopack-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
} .dinopack-blog-masonry {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
.elementor-widget-dinopack-blog .dinopack-blog-masonry .dinopack-blog-item {
break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 20px;
display: inline-block;
width: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 1px 1px 5px 1px rgba(178.5, 178.5, 178.5, 0.2);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.dinopack-blog-layout-list .dinopack-blog-container {
display: block;
}
.dinopack-blog-layout-list .dinopack-blog-item {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
}
.dinopack-blog-layout-list .dinopack-blog-image {
flex: 0 0 40%;
}
.dinopack-blog-layout-list .dinopack-blog-content {
flex: 0 0 60%;
padding-left: 20px;
}
.elementor-widget-dinopack-blog .dinopack-blog-item {
background-color: #fff;
border-radius: 5px;
box-shadow: 1px 1px 5px 1px rgba(178.5, 178.5, 178.5, 0.2);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.elementor-widget-dinopack-blog .dinopack-blog-item:hover {
box-shadow: 1px 1px 5px 1px rgba(178.5, 178.5, 178.5, 0.2);
transform: none;
}
.dinopack-blog-image {
position: relative;
overflow: hidden;
}
.dinopack-blog-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.dinopack-blog-item:hover .dinopack-blog-image img {
transform: scale(1.05);
}
.dinopack-blog-content {
padding: 20px;
}
.dinopack-blog-meta {
display: flex;
flex-wrap: wrap;
font-size: 13px;
color: #777;
margin-bottom: 15px;
}
.dinopack-blog-meta span {
display: inline-flex;
align-items: center;
}
.dinopack-blog-meta i {
margin-right: 5px;
}
.dinopack-blog-title {
font-size: 20px;
line-height: 1.4;
margin-top: 0;
margin-bottom: 15px;
}
.dinopack-blog-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.dinopack-blog-title a:hover {
color: #6F9C50;
}
.dinopack-blog-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
font-size: 14px;
}
.dinopack-blog-read-more {
margin-top: 15px;
}
.dinopack-blog-read-more-btn {
display: inline-block;
background: #6F9C50;
color: #fff;
text-decoration: none;
padding: 10px 18px;
border-radius: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1em;
border: 1px solid #6F9C50;
transition: all 0.3s ease;
}
.dinopack-blog-read-more-btn:hover {
background: #fff;
border: 1px solid #6F9C50;
color: #6F9C50;
}
.dinopack-blog-read-more-btn i {
transition: transform 0.3s ease;
} .dinopack-blog-read-more-btn:hover i:last-child {
transform: translateX(3px);
}
.dinopack-blog-read-more-btn:hover i:first-child {
transform: translateX(-3px);
} @media only screen and (max-width: 1024px) {
.dinopack-blog-columns-4-tablet .dinopack-blog-grid,
.dinopack-blog-columns-3-tablet .dinopack-blog-grid {
grid-template-columns: repeat(3, 1fr);
}
.dinopack-blog-columns-2-tablet .dinopack-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
.dinopack-blog-columns-1-tablet .dinopack-blog-grid {
grid-template-columns: repeat(1, 1fr);
} .dinopack-blog-columns-4-tablet .dinopack-blog-masonry,
.dinopack-blog-columns-3-tablet .dinopack-blog-masonry {
column-count: 3;
}
.dinopack-blog-columns-2-tablet .dinopack-blog-masonry {
column-count: 2;
}
.dinopack-blog-columns-1-tablet .dinopack-blog-masonry {
column-count: 1;
}
}
@media only screen and (max-width: 767px) {
.dinopack-blog-columns-4-mobile .dinopack-blog-grid,
.dinopack-blog-columns-3-mobile .dinopack-blog-grid,
.dinopack-blog-columns-2-mobile .dinopack-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
.dinopack-blog-columns-1-mobile .dinopack-blog-grid {
grid-template-columns: repeat(1, 1fr);
} .dinopack-blog-columns-4-mobile .dinopack-blog-masonry,
.dinopack-blog-columns-3-mobile .dinopack-blog-masonry,
.dinopack-blog-columns-2-mobile .dinopack-blog-masonry {
column-count: 2;
}
.dinopack-blog-columns-1-mobile .dinopack-blog-masonry {
column-count: 1;
}
.dinopack-blog-layout-list .dinopack-blog-item {
flex-direction: column;
}
.dinopack-blog-layout-list .dinopack-blog-image,
.dinopack-blog-layout-list .dinopack-blog-content {
flex: 0 0 100%;
padding-left: 0;
}
}
@media only screen and (max-width: 480px) {
.dinopack-blog-grid {
grid-template-columns: repeat(1, 1fr) !important;
}
.dinopack-blog-masonry {
column-count: 1 !important;
}
} .dinopack-blog-no-image {
background-color: #f5f5f5;
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.dinopack-blog-no-image i {
font-size: 48px;
}
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
} .dinopack-blog-pagination {
text-align: center;
margin: 30px 0 0 0;
}
.dinopack-blog-pagination ul.page-numbers {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.dinopack-blog-pagination ul.page-numbers li {
display: inline-block;
margin: 0 2px;
}
.dinopack-blog-pagination ul.page-numbers li .page-numbers {
position: relative;
display: inline-block;
min-width: 40px;
line-height: 40px;
padding: 0 12px;
text-align: center;
color: #333;
background-color: #f8f9fa;
border: 1px solid #e9e9e9;
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
border-radius: 5px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
-webkit-box-sizing: content-box;
box-sizing: content-box;
text-decoration: none;
}
.dinopack-blog-pagination ul.page-numbers li .page-numbers:hover {
background: #6F9C50;
color: #fff;
border: 1px solid #6F9C50;
}
.dinopack-blog-pagination ul.page-numbers li .page-numbers.current {
background: #6F9C50;
color: #fff;
border: 1px solid #6F9C50;
}
.dinopack-blog-pagination ul.page-numbers li .page-numbers.next,
.dinopack-blog-pagination ul.page-numbers li .page-numbers.prev {
font-weight: 600;
}
.dinopack-blog-pagination ul.page-numbers li .page-numbers i {
font-size: 12px;
} .dinopack-blog-load-more {
text-align: center;
margin: 30px 0 0 0;
}
.dinopack-blog-load-more .load-more-btn {
display: inline-block;
padding: 12px 24px;
background-color: #6F9C50;
color: #fff;
border: 1px solid #6F9C50;
border-radius: 5px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.dinopack-blog-load-more .load-more-btn:hover {
background-color: #5a7d3f;
border-color: #5a7d3f;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(111, 156, 80, 0.3);
}
.dinopack-blog-load-more .load-more-btn:active {
transform: translateY(0);
}
.dinopack-blog-load-more .load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.dinopack-blog-load-more .load-more-btn .loading-text {
display: none;
}
.dinopack-blog-load-more .load-more-btn .loading-icon {
display: none;
margin-left: 8px;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.dinopack-blog-load-more .load-more-btn.loading .loading-icon {
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .dinopack-blog-item.ajax-loaded {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.dinopack-blog-item.ajax-loaded.animate-in {
opacity: 1;
transform: translateY(0);
} .dinopack-blog-masonry .dinopack-blog-item.ajax-loaded {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease; position: relative;
z-index: 1;
}
.dinopack-blog-masonry .dinopack-blog-item.ajax-loaded.animate-in {
opacity: 1;
transform: translateY(0);
}