.testimonials-section {
padding: 100px 0;
position: relative;
overflow: hidden;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(to right, #A9B187, #8A916D);
}
.testimonials-section:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//almostafastone.com/wp-content/themes/almostafa/assets/images/testimonial-bg.png);
background-repeat: repeat;
background-size: 300px;
opacity: 0.1;
z-index: 1;
}
.testimonials-section .container {
position: relative;
z-index: 2;
}
.testimonials-slider {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
gap: 40px;
align-items: flex-start;
}
.testimonial-card-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.section-header.centered {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
}
.section-header .section-sub {
font-size: 16px;
font-weight: 600;
color: #A9B187;
text-transform: uppercase;
letter-spacing: 2px;
display: inline-block;
margin-bottom: 10px;
position: relative;
}
.section-header .section-sub::after {
content: '';
display: block;
width: 60px;
height: 2px;
background-color: #A9B187;
margin: 10px auto 0;
}
.section-header .section-title {
font-size: 42px;
margin-bottom: 20px;
color: #010100;
font-weight: 700;
}
.section-header .section-description {
font-size: 18px;
line-height: 1.7;
color: #666;
margin-top: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.testimonial-card {
width: 100%;
min-width: 300px;
max-width: 330px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
overflow: hidden;
display: flex;
height: auto;
min-height: 200px;
max-height: none;
border: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
}
.testimonial-card-wrapper:hover .testimonial-card {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
border-color: rgba(0, 0, 0, 0.08);
}
.testimonial-card-wrapper:hover .quote-icon {
background: linear-gradient(45deg, #A9B187, #8A916D);
transform: scale(1.05) rotate(-5deg);
}
.testimonial-content {
padding: 40px 25px 20px;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.quote-icon {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #A9B187, #8A916D);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
top: -30px;
left: calc(50% - 30px);
z-index: 5;
box-shadow: 0 8px 20px rgba(169, 177, 135, 0.3);
transition: all 0.4s ease;
}
.quote-icon i {
font-size: 26px;
transition: all 0.4s ease;
}
.testimonial-text-wrapper {
overflow: hidden;
margin-bottom: 0;
}
.testimonial-content p {
margin-top: 10px;
color: #555;
font-size: 14px;
line-height: 1.4;
font-style: italic;
margin-bottom: 0;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
position: relative;
padding-left: 10px;
display: block;
overflow: visible;
height: auto;
}
.testimonial-content p::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 80%;
width: 3px;
background: linear-gradient(to bottom, #A9B187, transparent);
border-radius: 3px;
opacity: 0.5;
}
.testimonial-author {
display: flex;
flex-direction: column;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid #e0e0e0;
}
.author-name {
font-weight: 700;
font-size: 16px;
color: #010100;
margin-bottom: 3px;
position: relative;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.author-location {
color: #ab8e66;
font-size: 14px;
}
.author-location:before {
content: '\f3c5';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 5px;
font-size: 12px;
color: #b78733;
}
@media (max-width: 991px) {
.testimonials-slider {
flex-direction: column;
align-items: center;
}
.testimonial-card {
width: 100%;
max-width: 500px;
margin-bottom: 20px;
min-height: auto;
}
.testimonials-section {
padding: 60px 0;
}
.section-header .section-title {
font-size: 28px;
}
}
@media (max-width: 767px) {
.testimonial-content {
padding: 30px 20px;
}
.quote-icon {
width: 50px;
height: 50px;
left: 20px;
top: -25px;
}
.quote-icon i {
font-size: 20px;
}
.testimonial-card {
max-width: 400px;
}
}
@media (max-width: 480px) {
.testimonial-content p {
font-size: 15px;
line-height: 1.5;
}
.author-name {
font-size: 16px;
}
.author-location {
font-size: 13px;
color: #777;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.testimonial-card {
min-width: 260px;
}
}.counters-section {
padding: var(--spacing-32) 0;
position: relative;
overflow: hidden;
background: var(--dark-gradient);
z-index: 1;
isolation: isolate;
} .counters-overlay {
position: absolute;
inset: 0;
background: linear-gradient(125deg, rgba(18, 20, 24, 0.97) 0%, rgba(28, 30, 38, 0.95) 100%);
z-index: 1;
} .counters-pattern {
position: absolute;
inset: 0;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
z-index: 0;
} .counters-glow {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.counters-glow::before,
.counters-glow::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.15;
animation: pulseGlow 15s infinite alternate ease-in-out;
}
.counters-glow::before {
top: -10%;
left: -10%;
width: 50%;
height: 60%;
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
animation-delay: 0s;
}
.counters-glow::after {
bottom: -10%;
right: -5%;
width: 40%;
height: 50%;
background: linear-gradient(135deg, var(--secondary-500) 0%, var(--primary-500) 100%);
animation-delay: 7.5s;
}
@keyframes pulseGlow {
0% {
opacity: 0.1;
transform: scale(1) translate(0, 0);
}
50% {
opacity: 0.2;
transform: scale(1.1) translate(2%, 2%);
}
100% {
opacity: 0.1;
transform: scale(1) translate(0, 0);
}
} .counters-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--primary-gradient);
z-index: 2;
} .counters-section .container {
position: relative;
z-index: 3;
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
} .counters-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.counters-eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primary-400);
margin-bottom: var(--spacing-4);
background: rgba(var(--primary-rgb), 0.1);
padding: var(--spacing-1) var(--spacing-4);
border-radius: var(--radius-full);
}
.counters-title {
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
color: var(--white);
margin-bottom: var(--spacing-4);
line-height: 1.2;
position: relative;
display: inline-block;
}
.counters-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary-gradient);
border-radius: var(--radius-full);
}
.counters-subtitle {
font-size: var(--text-xl);
color: var(--gray-300);
max-width: 750px;
margin: var(--spacing-8) auto 0;
line-height: 1.6;
} .counters-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-8);
margin-top: var(--spacing-8);
} .counter-item {
flex: 1;
min-width: 260px;
max-width: 300px;
text-align: center;
padding: var(--spacing-10) var(--spacing-6);
background: rgba(40, 45, 60, 0.4);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
transition: all 0.5s var(--transition-type);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(var(--primary-rgb), 0.1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
isolation: isolate;
z-index: 1;
} .counter-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--primary-rgb), 0.05) 50%, rgba(var(--primary-rgb), 0.1) 100%);
opacity: 0;
z-index: -1;
transition: opacity 0.5s var(--transition-type);
}
.counter-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--primary-gradient);
transition: all 0.5s var(--transition-type);
} .counter-item:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-xl), 0 25px 40px rgba(0, 0, 0, 0.3);
background: rgba(45, 50, 65, 0.5);
border-color: rgba(var(--primary-rgb), 0.2);
}
.counter-item:hover::before {
opacity: 1;
}
.counter-item:hover::after {
height: 5px;
} .counter-decoration {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0) 70%);
border-radius: 0 var(--radius-xl) 0 50%;
opacity: 0.5;
transition: all 0.5s var(--transition-type);
z-index: -1;
}
.counter-item:hover .counter-decoration {
width: 100px;
height: 100px;
opacity: 0.7;
} .counter-icon {
width: 90px;
height: 90px;
margin: 0 auto var(--spacing-6);
border-radius: 50%;
background: rgba(var(--primary-rgb), 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-3xl);
color: var(--primary-300);
box-shadow: var(--shadow-lg);
transition: all 0.5s var(--transition-type);
position: relative;
overflow: hidden;
isolation: isolate;
z-index: 1;
border: 2px solid rgba(var(--primary-rgb), 0.1);
}
.counter-icon::before {
content: '';
position: absolute;
inset: 0;
background: var(--primary-gradient);
opacity: 0;
z-index: -1;
transition: opacity 0.5s var(--transition-type);
}
.counter-item:hover .counter-icon {
transform: scale(1.1) rotate(5deg);
color: var(--white);
box-shadow: var(--shadow-xl), 0 10px 25px rgba(var(--primary-rgb), 0.3);
}
.counter-item:hover .counter-icon::before {
opacity: 1;
} .counter-number {
font-size: var(--text-5xl);
font-weight: var(--font-extrabold);
background: var(--primary-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: var(--spacing-4);
line-height: 1;
font-family: var(--font-heading);
display: flex;
justify-content: center;
align-items: baseline;
position: relative;
transition: all 0.5s var(--transition-type);
}
.counter-number::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%) scaleX(0.6);
width: 30px;
height: 2px;
background: var(--primary-gradient);
border-radius: var(--radius-full);
transition: all 0.5s var(--transition-type);
opacity: 0.7;
}
.counter-item:hover .counter-number::after {
transform: translateX(-50%) scaleX(1);
width: 50px;
opacity: 1;
} .count-suffix {
font-size: var(--text-2xl);
margin-left: var(--spacing-1);
color: var(--primary-300);
transition: color 0.5s var(--transition-type);
}
.counter-item:hover .count-suffix {
color: var(--primary-400);
} .counter-title {
font-size: var(--text-lg);
font-weight: var(--font-medium);
color: var(--gray-300);
letter-spacing: 1px;
transition: all 0.5s var(--transition-type);
margin-top: var(--spacing-2);
}
.counter-item:hover .counter-title {
color: var(--white);
} .counter-description {
color: var(--gray-400);
font-size: var(--text-sm);
line-height: 1.6;
margin-top: var(--spacing-3);
transition: all 0.5s var(--transition-type);
opacity: 0.8;
}
.counter-item:hover .counter-description {
color: var(--gray-300);
opacity: 1;
} @media (max-width: 1400px) {
.counters-wrapper {
gap: var(--spacing-6);
}
.counters-glow::before {
width: 40%;
height: 40%;
}
.counters-glow::after {
width: 35%;
height: 35%;
}
}
@media (max-width: 1200px) {
.counters-section {
padding: var(--spacing-24) 0;
}
.counters-title {
font-size: var(--text-3xl);
}
.counters-subtitle {
font-size: var(--text-lg);
max-width: 650px;
}
.counter-item {
min-width: 220px;
}
}
@media (max-width: 991px) {
.counters-section {
padding: var(--spacing-20) 0;
}
.counters-wrapper {
gap: var(--spacing-5);
}
.counters-header {
margin-bottom: var(--spacing-10);
}
.counter-item {
min-width: 200px;
padding: var(--spacing-6) var(--spacing-4);
}
.counter-icon {
width: 75px;
height: 75px;
font-size: var(--text-2xl);
margin-bottom: var(--spacing-4);
}
.counter-number {
font-size: var(--text-4xl);
}
.count-suffix {
font-size: var(--text-xl);
}
.counter-title {
font-size: var(--text-base);
}
.counter-description {
font-size: var(--text-xs);
}
.counter-item:hover {
transform: translateY(-10px);
}
}
@media (max-width: 767px) {
.counters-section {
padding: var(--spacing-16) 0;
}
.counters-eyebrow {
font-size: var(--text-xs);
}
.counters-title {
font-size: var(--text-2xl);
}
.counters-subtitle {
font-size: var(--text-base);
margin-top: var(--spacing-6);
}
.counters-wrapper {
flex-direction: column;
align-items: center;
gap: var(--spacing-6);
}
.counter-item {
width: 100%;
max-width: 320px;
}
.counter-number::after {
bottom: -6px;
width: 25px;
}
.counter-item:hover .counter-number::after {
width: 40px;
}
}
@media (max-width: 576px) {
.counters-section {
padding: var(--spacing-12) 0;
}
.counters-header {
margin-bottom: var(--spacing-8);
}
.counter-item {
max-width: 280px;
padding: var(--spacing-5) var(--spacing-4);
}
.counter-icon {
width: 65px;
height: 65px;
font-size: var(--text-xl);
margin-bottom: var(--spacing-3);
}
.counter-number {
font-size: var(--text-3xl);
}
.count-suffix {
font-size: var(--text-lg);
}
.counter-title {
font-size: var(--text-sm);
margin-top: var(--spacing-1);
}
.counter-description {
display: none;
}
.counter-item:hover {
transform: translateY(-5px);
}
}.whatsapp-btn {
display: inline-block;
background-color: #25D366;
color: white !important;
padding: 8px 15px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
text-align: center;
width: fit-content;
align-self: center;
}
.whatsapp-btn:hover {
background-color: #128C7E;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
color: white !important;
text-decoration: none;
}
.whatsapp-btn i {
margin-right: 5px;
font-size: 16px;
} .unique-item {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
}
.unique-item h3 {
margin-bottom: 10px;
flex-grow: 1;
text-align: center;
}.why-choose-section {
background-color: var(--global-palette3-light);
padding: 60px 0;
margin: 20px 0;
}
.why-choose-section .play-btn {
cursor: pointer;
transition: transform 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
width: 74px;
height: 74px;
margin: 0 auto;
}
.why-choose-section .play-btn:hover {
transform: scale(1.1);
} #video-modal {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.95);
display: none;
align-items: center;
justify-content: center;
}
.modal-content {
position: relative;
width: 80%;
max-width: 800px;
}
.close-video {
position: absolute;
top: -40px;
right: 0;
color: #fff;
font-size: 28px;
cursor: pointer;
}
#video-iframe {
width: 100%;
height: 450px;
border: none;
}
@media (max-width: 767px) {
#video-iframe {
height: 300px;
}
}.hero-section {
position: relative;
overflow: hidden;
} .hero-images-container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
} .hero-main-image {
position: relative;
width: 100%;
z-index: 1;
}
.hero-main-image img {
width: 100%;
height: auto;
object-fit: cover;
max-height: 650px;
} .hero-additional-images.position-right {
position: absolute;
right: 30px;
bottom: 50px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 20px;
} .hero-additional-images.position-left {
position: absolute;
left: 30px;
bottom: 50px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 20px;
} .hero-additional-images.position-bottom {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: row;
gap: 20px;
} .hero-additional-images.size-small img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border: 3px solid #fff;
transition: all 0.3s ease;
} .hero-additional-images.size-medium img {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border: 3px solid #fff;
transition: all 0.3s ease;
} .hero-additional-images.size-large img {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border: 3px solid #fff;
transition: all 0.3s ease;
} .hero-additional-images img:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
} body.rtl .hero-additional-images.position-right {
right: auto;
left: 30px;
}
body.rtl .hero-additional-images.position-left {
left: auto;
right: 30px;
} @media (max-width: 991px) {
.hero-additional-images.size-large img {
width: 200px;
height: 200px;
}
.hero-additional-images.size-medium img {
width: 150px;
height: 150px;
}
}
@media (max-width: 768px) {
.hero-additional-images.position-right,
.hero-additional-images.position-left {
position: relative;
right: auto;
left: auto;
bottom: auto;
margin-top: 20px;
flex-direction: row;
justify-content: center;
}
.hero-additional-images.position-bottom {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-top: 20px;
justify-content: center;
}
.hero-additional-images img {
width: 120px !important;
height: 120px !important;
}
}.woocommerce-products-header {
text-align: center;
margin-bottom: 50px;
padding: 100px 20px 50px;
background: linear-gradient(180deg, #010100 0%, #28291F 100%);
border-bottom: 1px solid #A9B187;
position: relative;
color: #fff;
}
.woocommerce-products-header::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 5px;
background-color: var(--global-palette1);
border-radius: 10px;
}
.woocommerce-products-header__title {
font-size: 3.5rem;
margin-bottom: 15px;
color: var(--global-text-light);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.woocommerce-products-header .term-description {
max-width: 800px;
margin: 0 auto;
color: var(--global-text-light);
font-size: 1.2rem;
line-height: 1.6;
} .woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 40px;
padding: 40px 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none;
} .woocommerce ul.products li.product {
background: linear-gradient(145deg, #28291F 65%, #010100 100%);
border-radius: 20px;
border: 2px solid #A9B187;
box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 3px 15px rgba(255,255,255,0.05) inset;
padding: 25px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin: 0 !important;
width: 100% !important;
float: none !important;
overflow: hidden;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-15px);
box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 3px 15px rgba(169,177,135,0.15) inset;
border-color: #C4D198;
z-index: 2;
}
.woocommerce ul.products li.product::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at top right, rgba(169,177,135,0.15), transparent 60%);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
.woocommerce ul.products li.product:hover::before {
opacity: 1;
} .woocommerce ul.products li.product a img {
border-radius: 12px;
margin-bottom: 25px;
transition: transform 0.5s ease, box-shadow 0.5s ease;
box-shadow: 0 10px 25px rgba(0,0,0,0.35);
object-fit: cover;
height: 300px;
width: 100%;
position: relative;
}
.woocommerce ul.products li.product .product-image-wrapper {
position: relative;
overflow: hidden;
border-radius: 12px;
margin-bottom: 25px;
}
.woocommerce ul.products li.product .product-image-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.5) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.woocommerce ul.products li.product:hover .product-image-wrapper::after {
opacity: 1;
}
.woocommerce ul.products li.product:hover a img {
transform: scale(1.07);
box-shadow: 0 15px 35px rgba(0,0,0,0.4);
} .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
font-size: 1.4rem;
padding: 0;
margin-bottom: 18px;
color: #ffffff;
font-weight: 600;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2; -webkit-box-orient: vertical;
position: relative;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.woocommerce ul.products li.product h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background-color: #A9B187;
transition: width 0.3s ease;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title::after,
.woocommerce ul.products li.product:hover h3::after {
width: 80px;
background-color: #C4D198;
} .woocommerce ul.products li.product .price {
color: var(--global-palette1);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
text-align: center;
}
.woocommerce ul.products li.product .price ins {
text-decoration: none;
}
.woocommerce ul.products li.product .price del {
opacity: 0.6;
font-size: 1.1rem;
margin-right: 8px;
} .woocommerce ul.products li.product .button {
background-color: #A9B187;
color: #000000;
border-radius: 50px;
padding: 16px 28px;
text-transform: uppercase;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 1.5px;
width: 100%;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin-top: 15px;
position: relative;
overflow: hidden;
z-index: 1;
border: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
} .woocommerce ul.products li.product .button.quick-view {
background-color: transparent;
border: 2px solid #A9B187;
color: #A9B187;
margin-top: 10px;
padding: 14px 28px;
box-shadow: none;
}
.woocommerce ul.products li.product .button.quick-view:hover {
background-color: rgba(169,177,135,0.15);
border-color: #C4D198;
color: #C4D198;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.woocommerce ul.products li.product .button: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.7s ease;
z-index: -1;
}
.woocommerce ul.products li.product:hover .button:before {
left: 100%;
}
.woocommerce ul.products li.product .button:hover {
background-color: #C4D198;
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
color: #000000;
} .woocommerce ul.products li.product .star-rating {
margin: 10px auto;
font-size: 0.9em;
} .woocommerce ul.products li.product .onsale {
background-color: var(--global-palette1);
color: var(--global-text-dark);
border-radius: 50px;
min-height: auto;
min-width: auto;
padding: 8px 15px;
line-height: 1;
font-weight: 600;
margin: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
} .woocommerce nav.woocommerce-pagination {
text-align: center;
margin: 50px 0;
}
.woocommerce nav.woocommerce-pagination ul {
border: none;
display: inline-flex;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none;
margin: 0 5px;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
background-color: var(--global-palette3-light);
color: var(--global-text-light);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
transition: all 0.3s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
background-color: var(--global-palette1);
color: var(--global-text-dark);
} @media (max-width: 992px) {
.woocommerce ul.products {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 30px;
}
.woocommerce-products-header__title {
font-size: 2.8rem;
}
}
@media (max-width: 768px) {
.woocommerce ul.products {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.woocommerce-products-header {
padding: 60px 15px 25px;
}
.woocommerce-products-header__title {
font-size: 2.2rem;
}
.woocommerce-products-header .term-description {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.woocommerce ul.products {
grid-template-columns: 1fr;
max-width: 320px;
margin: 0 auto !important;
}
}.about-us-page {
font-family: 'Sora', sans-serif;
color: #333;
line-height: 1.6;
}
.about-us-page section {
padding: 80px 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-header {
margin-bottom: 40px;
}
.section-sub {
display: block;
font-size: 18px;
font-weight: 500;
color: #A9B187;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.section-title {
font-size: 36px;
font-weight: 700;
margin: 0 0 30px;
color: #010100;
position: relative;
}
.section-header.centered {
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
} .about-hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://placehold.co/1200x400/e8e8e8/5a5a5a?text=Almostafa+Stone+Banner) no-repeat center center;
background-size: cover;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
position: relative;
margin-bottom: 0;
padding: 0;
}
.about-title {
font-size: 48px;
font-weight: 700;
margin: 0 0 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.about-subtitle {
font-size: 22px;
font-weight: 400;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
.about-subtitle:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background-color: #A9B187;
} .about-content-section {
background-color: #fff;
padding: 100px 0;
}
.about-content-wrapper {
display: flex;
flex-wrap: wrap;
gap: 50px;
align-items: center;
}
.about-left-column {
flex: 1;
min-width: 300px;
}
.about-right-column {
flex: 1.5;
min-width: 300px;
}
.about-image {
position: relative;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
border-radius: 6px;
overflow: hidden;
}
.about-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.about-image:hover img {
transform: scale(1.05);
}
.experience-badge {
position: absolute;
bottom: 30px;
right: -15px;
background-color: #A9B187;
color: #fff;
padding: 20px;
border-radius: 4px;
text-align: center;
min-width: 120px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.experience-badge .years {
display: block;
font-size: 36px;
font-weight: 700;
line-height: 1;
}
.experience-badge .text {
display: block;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 5px;
}
.about-description {
font-size: 17px;
line-height: 1.8;
margin-bottom: 40px;
}
.about-stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 50px;
gap: 20px;
}
.stat-item {
flex: 1;
min-width: 120px;
text-align: center;
padding: 20px;
background-color: #f8f8f8;
border-radius: 6px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.stat-number {
font-size: 42px;
font-weight: 700;
color: #A9B187;
margin-bottom: 5px;
line-height: 1;
}
.stat-label {
font-size: 15px;
font-weight: 500;
color: #666;
} .mission-values-section {
background-color: #f8f8f8;
padding: 100px 0;
}
.mission-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.mission-column, .values-column {
flex: 1;
min-width: 300px;
background-color: #fff;
padding: 40px;
border-radius: 6px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
text-align: center;
transition: transform 0.3s ease;
}
.mission-column:hover, .values-column:hover {
transform: translateY(-10px);
}
.mission-icon, .values-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
border-radius: 50%;
background-color: rgba(161, 97, 63, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.mission-icon i, .values-icon i {
font-size: 34px;
color: #A9B187;
}
.mission-column h3, .values-column h3 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.mission-column p {
font-size: 16px;
line-height: 1.7;
}
.values-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.values-list li {
padding: 15px 0;
border-bottom: 1px solid #eee;
font-size: 16px;
display: flex;
align-items: center;
}
.values-list li:last-child {
border-bottom: none;
}
.values-list li i {
color: #A9B187;
margin-right: 10px;
font-size: 18px;
} .process-section {
background-color: #fff;
padding: 100px 0;
}
.process-steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30px;
margin-top: 60px;
}
.process-step {
flex: 1;
min-width: 250px;
position: relative;
padding: 30px;
border-radius: 6px;
background-color: #f9f9f9;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.process-step:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.step-number {
position: absolute;
top: -20px;
left: 30px;
width: 45px;
height: 45px;
background-color: #A9B187;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
}
.step-content {
padding-top: 20px;
}
.step-content h3 {
font-size: 22px;
margin-bottom: 15px;
color: #333;
}
.step-content p {
font-size: 15px;
line-height: 1.6;
color: #666;
} .team-section {
background-color: #f8f8f8;
padding: 100px 0;
}
.team-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 50px;
}
.team-member {
flex: 1;
min-width: 250px;
max-width: 300px;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.team-member:hover {
transform: translateY(-10px);
}
.member-image {
overflow: hidden;
height: 300px;
}
.member-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.team-member:hover .member-image img {
transform: scale(1.1);
}
.member-name {
text-align: center;
font-size: 20px;
font-weight: 600;
margin: 20px 0 5px;
color: #333;
}
.member-role {
text-align: center;
font-size: 14px;
color: #A9B187;
margin-bottom: 20px;
} .about-cta-section {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://placehold.co/1200x400/e8e8e8/5a5a5a?text=CTA+Background) no-repeat center center;
background-size: cover;
background-attachment: fixed;
color: #fff;
text-align: center;
padding: 100px 0;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 36px;
margin-bottom: 20px;
}
.cta-content p {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.9;
}
.cta-button {
display: inline-block;
background-color: #A9B187;
color: #fff;
padding: 15px 40px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-button:hover {
background-color: #fff;
color: #A9B187;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
} @media (max-width: 992px) {
.about-content-wrapper, .mission-wrapper {
flex-direction: column;
}
.about-left-column, .about-right-column {
flex: 100%;
}
.about-stats {
justify-content: center;
}
.process-steps {
justify-content: center;
}
.team-grid {
justify-content: center;
}
.about-title {
font-size: 36px;
}
.section-title {
font-size: 30px;
}
.about-us-page section {
padding: 60px 0;
}
}
@media (max-width: 768px) {
.stat-item {
min-width: 140px;
}
.process-step {
min-width: 100%;
}
.team-member {
min-width: 100%;
max-width: 100%;
}
.about-title {
font-size: 28px;
}
.about-subtitle {
font-size: 18px;
}
.section-title {
font-size: 26px;
}
.cta-content h2 {
font-size: 28px;
}
.cta-content p {
font-size: 16px;
}
}:root {
--collection-primary: #0a1c2d;
--collection-primary-light: #0e2234;
--collection-primary-dark: #071525;
--collection-secondary: #4d9cff;
--collection-secondary-light: #6aafff;
--collection-secondary-dark: #3a89f1;
--collection-accent: #ff9d4d;
--collection-text: rgba(255, 255, 255, 0.9);
--collection-text-secondary: rgba(255, 255, 255, 0.7);
--collection-text-muted: rgba(255, 255, 255, 0.5);
--collection-border: rgba(255, 255, 255, 0.1);
--collection-backdrop: rgba(10, 28, 45, 0.8);
--collection-glass: rgba(14, 34, 52, 0.6);
--collection-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
--collection-border-radius: 12px;
--collection-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
} .unique-collection-section {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, var(--collection-primary-dark) 0%, var(--collection-primary) 50%, var(--collection-primary-light) 100%);
overflow: hidden;
color: var(--collection-text);
z-index: 1;
isolation: isolate;
} .marble-background {
position: absolute;
inset: 0;
background-image: 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
linear-gradient(125deg, rgba(14, 34, 52, 0.9) 0%, rgba(10, 28, 45, 0.8) 40%, rgba(14, 34, 52, 0.9) 75%, rgba(17, 39, 58, 0.95) 100%);
background-blend-mode: overlay;
z-index: -1;
} .marble-effects {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
opacity: 0.4;
}
.marble-effects::before,
.marble-effects::after {
content: '';
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(77, 156, 255, 0.08) 0%, rgba(77, 156, 255, 0.03) 50%, rgba(77, 156, 255, 0.05) 100%);
filter: blur(80px);
transform-origin: center;
animation: marbleFloat 20s infinite alternate ease-in-out;
}
.marble-effects::before {
width: 70%;
height: 70%;
top: -20%;
left: -20%;
animation-delay: 0s;
}
.marble-effects::after {
width: 50%;
height: 50%;
bottom: -10%;
right: -10%;
animation-delay: 10s;
background: linear-gradient(135deg, rgba(255, 157, 77, 0.05) 0%, rgba(255, 157, 77, 0.02) 50%, rgba(255, 157, 77, 0.04) 100%);
}
@keyframes marbleFloat {
0% {
transform: translateY(0) scale(1) rotate(0);
opacity: 0.3;
}
50% {
transform: translateY(5%) scale(1.05) rotate(2deg);
opacity: 0.5;
}
100% {
transform: translateY(0) scale(1) rotate(0);
opacity: 0.3;
}
} .collection-header {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
position: relative;
}
.collection-eyebrow {
display: inline-block;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--collection-secondary);
margin-bottom: 16px;
position: relative;
padding: 6px 16px;
background: var(--collection-glass);
backdrop-filter: blur(10px);
border-radius: 30px;
box-shadow: var(--collection-shadow);
border: 1px solid var(--collection-border);
}
.collection-title {
font-size: 48px;
font-weight: 800;
background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
margin-bottom: 20px;
position: relative;
display: inline-block;
letter-spacing: -0.02em;
line-height: 1.2;
}
.collection-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--collection-secondary), transparent);
border-radius: 50px;
}
.collection-subtitle {
font-size: 18px;
color: var(--collection-text-secondary);
max-width: 650px;
margin: 24px auto 0;
line-height: 1.6;
font-weight: 400;
} .collection-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 0 auto 50px;
} .collection-item {
position: relative;
background: var(--collection-glass);
backdrop-filter: blur(10px);
border-radius: var(--collection-border-radius);
overflow: hidden;
border: 1px solid var(--collection-border);
box-shadow: var(--collection-shadow);
transition: var(--collection-transition);
transform: translateY(0);
} .collection-item:hover {
transform: translateY(-10px) scale(1.02);
border-color: var(--collection-secondary);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 
0 0 20px rgba(77, 156, 255, 0.2);
z-index: 2;
} .collection-item::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, 
rgba(77, 156, 255, 0.15), 
transparent 70%);
opacity: 0;
transition: var(--collection-transition);
z-index: -1;
}
.collection-item:hover::before {
opacity: 1;
} .collection-image-container {
position: relative;
overflow: hidden;
aspect-ratio: 1/1;
border-radius: var(--collection-border-radius) var(--collection-border-radius) 0 0;
}
.collection-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--collection-transition);
}
.collection-item:hover .collection-image {
transform: scale(1.08);
} .collection-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 60%,
rgba(10, 28, 45, 0.5) 90%,
rgba(10, 28, 45, 0.8) 100%
);
transition: var(--collection-transition);
} .collection-quick-actions {
position: absolute;
top: 15px;
right: 15px;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
transform: translateX(20px);
transition: var(--collection-transition);
}
.collection-item:hover .collection-quick-actions {
opacity: 1;
transform: translateX(0);
}
.collection-action-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--collection-glass);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--collection-border);
color: white;
cursor: pointer;
transition: var(--collection-transition);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.collection-action-btn:hover {
background: var(--collection-secondary);
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
} .collection-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.collection-badge.luxury {
background: linear-gradient(135deg, rgba(218, 165, 32, 0.8) 0%, rgba(255, 215, 0, 0.6) 100%);
color: #000;
border-color: rgba(255, 215, 0, 0.3);
}
.collection-badge.new {
background: linear-gradient(135deg, rgba(77, 156, 255, 0.8) 0%, rgba(106, 175, 255, 0.6) 100%);
color: #fff;
border-color: rgba(106, 175, 255, 0.3);
}
.collection-badge.limited {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.8) 0%, rgba(255, 107, 107, 0.6) 100%);
color: #fff;
border-color: rgba(255, 107, 107, 0.3);
} .collection-content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.collection-category {
font-size: 12px;
color: var(--collection-text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.collection-item-title {
font-size: 22px;
font-weight: 700;
color: white;
margin: 0;
line-height: 1.3;
transition: var(--collection-transition);
}
.collection-item:hover .collection-item-title {
color: var(--collection-secondary-light);
}
.collection-description {
font-size: 14px;
line-height: 1.6;
color: var(--collection-text-secondary);
margin: 0 0 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 4.8em; } .collection-price-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.collection-price-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.collection-old-price {
font-size: 14px;
text-decoration: line-through;
color: var(--collection-text-muted);
}
.collection-price {
font-size: 22px;
font-weight: 700;
color: white;
} .collection-add-to-cart {
padding: 8px 16px;
background: linear-gradient(135deg, var(--collection-secondary-dark) 0%, var(--collection-secondary) 100%);
color: white;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 30px;
cursor: pointer;
transition: var(--collection-transition);
display: flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
z-index: 1;
box-shadow: 0 4px 15px rgba(77, 156, 255, 0.3);
}
.collection-add-to-cart::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--collection-secondary) 0%, var(--collection-secondary-light) 100%);
z-index: -1;
opacity: 0;
transition: var(--collection-transition);
}
.collection-add-to-cart:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(77, 156, 255, 0.4);
}
.collection-add-to-cart:hover::before {
opacity: 1;
}
.collection-add-to-cart:active {
transform: translateY(-1px);
} .view-more-container {
text-align: center;
margin-top: 40px;
}
.view-more-btn {
padding: 12px 30px;
background: transparent;
color: white;
font-size: 16px;
font-weight: 600;
border: 1px solid var(--collection-border);
border-radius: 30px;
cursor: pointer;
transition: var(--collection-transition);
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
overflow: hidden;
z-index: 1;
backdrop-filter: blur(10px);
background: var(--collection-glass);
box-shadow: var(--collection-shadow);
}
.view-more-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--collection-secondary-dark) 0%, var(--collection-secondary) 100%);
z-index: -1;
opacity: 0;
transition: var(--collection-transition);
}
.view-more-btn:hover {
border-color: var(--collection-secondary);
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 
0 0 15px rgba(77, 156, 255, 0.2);
}
.view-more-btn:hover::before {
opacity: 0.9;
}
.view-more-btn i {
font-size: 16px;
transition: transform 0.3s ease;
}
.view-more-btn:hover i {
transform: translateX(5px);
} .collection-decoration {
position: absolute;
z-index: -1;
pointer-events: none;
}
.collection-decoration-1 {
top: 15%;
left: 5%;
width: 30vw;
height: 30vw;
border-radius: 30% 70% 70% 30% / 30% 40% 60% 70%;
background: linear-gradient(135deg, rgba(77, 156, 255, 0.03) 0%, rgba(77, 156, 255, 0.05) 100%);
animation: morphBlob 30s infinite alternate ease-in-out;
}
.collection-decoration-2 {
bottom: 10%;
right: 5%;
width: 35vw;
height: 35vw;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
background: linear-gradient(135deg, rgba(255, 157, 77, 0.03) 0%, rgba(255, 157, 77, 0.05) 100%);
animation: morphBlob 25s infinite alternate-reverse ease-in-out;
}
@keyframes morphBlob {
0% {
border-radius: 30% 70% 70% 30% / 30% 40% 60% 70%;
}
25% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
50% {
border-radius: 40% 60% 50% 50% / 30% 60% 40% 70%;
}
75% {
border-radius: 70% 30% 50% 50% / 50% 60% 40% 50%;
}
100% {
border-radius: 30% 70% 70% 30% / 30% 40% 60% 70%;
}
} @media (max-width: 1400px) {
.collection-grid {
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
}
@media (max-width: 1200px) {
.collection-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.unique-collection-container {
max-width: 90%;
}
.collection-title {
font-size: 42px;
}
.collection-subtitle {
font-size: 16px;
}
}
@media (max-width: 992px) {
.unique-collection-section {
padding: 80px 0;
}
.collection-header {
margin-bottom: 40px;
}
.collection-title {
font-size: 36px;
}
.collection-subtitle {
font-size: 15px;
}
}
@media (max-width: 768px) {
.unique-collection-section {
padding: 60px 0;
}
.collection-grid {
grid-template-columns: repeat(1, 1fr);
gap: 25px;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
.collection-title {
font-size: 32px;
}
.collection-eyebrow {
font-size: 12px;
}
.view-more-btn {
padding: 10px 24px;
}
}
@media (max-width: 576px) {
.unique-collection-section {
padding: 50px 0;
}
.unique-collection-container {
padding: 0 15px;
}
.collection-header {
margin-bottom: 30px;
}
.collection-title {
font-size: 28px;
}
.collection-title::after {
width: 80px;
bottom: -10px;
}
.collection-subtitle {
font-size: 14px;
margin-top: 20px;
}
.collection-content {
padding: 15px;
}
.collection-item-title {
font-size: 18px;
}
.collection-price {
font-size: 18px;
}
.collection-add-to-cart {
padding: 6px 12px;
font-size: 12px;
}
}:root { --primary-dark: #030a11; --primary-darker: #02070e; --primary-lighter: #05111d; --accent-blue: #3a7fd9; --accent-blue-dark: #2864b3; --accent-blue-light: #5a98e2;  --text-white: rgba(255, 255, 255, 0.95); --text-light: rgba(255, 255, 255, 0.85); --text-muted: rgba(255, 255, 255, 0.65); --section-title-color: var(--text-white); --section-subtitle-color: var(--accent-blue);  --section-bg-dark: var(--primary-dark); --section-bg-light: #040e18; --card-bg: rgba(3, 10, 17, 0.9); --glass-border: rgba(58, 127, 217, 0.15);  --dark-gradient: linear-gradient(135deg, rgb(3, 10, 17) 0%, rgb(2, 7, 14) 100%);
--accent-gradient: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
--title-gradient: linear-gradient(135deg, var(--text-white) 30%, var(--accent-blue) 100%);
--glow-gradient: radial-gradient(circle at center, rgba(58, 127, 217, 0.25), transparent 70%); --shadow-normal: 0 10px 30px rgba(0, 0, 0, 0.3);
--shadow-blue: 0 10px 25px rgba(77, 156, 255, 0.2);
--shadow-intense: 0 15px 35px rgba(0, 0, 0, 0.5);
--button-glow: 0 0 15px rgba(77, 156, 255, 0.5); --border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 20px; --transition-fast: 0.3s ease;
--transition-smooth: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
} section:not(.hero-section) {
background: linear-gradient(135deg, rgb(3, 10, 17) 0%, rgb(2, 7, 14) 100%) !important;
color: var(--text-light) !important;
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
} [style*="background"], [style*="background-color"] {
background: linear-gradient(135deg, rgb(3, 10, 17) 0%, rgb(2, 7, 14) 100%) !important;
} .section-title {
color: var(--section-title-color) !important;
font-weight: 700 !important;
} .section-sub {
color: var(--section-subtitle-color) !important;
} .section-description {
color: var(--text-muted) !important;
} .btn-primary, 
.button-primary {
background: var(--accent-gradient) !important;
color: var(--text-white) !important;
border: none !important;
box-shadow: var(--shadow-blue) !important;
transition: var(--transition-fast) !important;
}
.btn-primary:hover, 
.button-primary:hover {
box-shadow: var(--button-glow) !important;
transform: translateY(-3px) !important;
} .card, 
.item-card, 
.testimonial-card,
.partner-card,
.project-card,
.post-card {
background: var(--card-bg) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid var(--glass-border) !important;
border-radius: var(--border-radius-md) !important;
transition: var(--transition-smooth) !important;
} .card:hover, 
.item-card:hover, 
.testimonial-card:hover,
.partner-card:hover,
.project-card:hover,
.post-card:hover {
transform: translateY(-5px) !important;
box-shadow: var(--shadow-blue), var(--shadow-intense) !important;
} section:not(.hero-section)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 20%, rgba(77, 156, 255, 0.1), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(77, 156, 255, 0.08), transparent 40%);
z-index: -1;
pointer-events: none;
} section:not(.hero-section)::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, transparent 0%, rgba(77, 156, 255, 0.05) 50%, transparent 100%);
background-size: 200% 100%;
animation: shine 8s linear infinite;
z-index: -1;
pointer-events: none;
} @keyframes shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
} @media (max-width: 768px) {
.section-title {
font-size: 30px !important;
}
.section-description {
font-size: 16px !important;
}
}:root { --primary: #0a1c2d;
--primary-dark: #051525;
--primary-darker: #030e1a;
--secondary: #4d9cff;
--secondary-light: #6cabff;
--secondary-dark: #3a89f1;
--accent: #ff9d4d;
--accent-light: #ffb980;
--accent-dark: #e67e2e;
--success: #00c875;
--danger: #ff5252;
--warning: #ffcb2d; --text-light: rgba(255, 255, 255, 0.95);
--text-white: #ffffff;
--text-muted: rgba(255, 255, 255, 0.65);
--glass-bg: rgba(14, 34, 52, 0.7);
--glass-bg-light: rgba(35, 61, 85, 0.65);
--glass-border: rgba(255, 255, 255, 0.1); --shadow-sm: 0 5px 10px rgba(0, 0, 0, 0.1);
--shadow-md: 0 10px 25px rgba(0, 0, 0, 0.2);
--shadow-strong: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2);
--shadow-inner: inset 0 2px 10px rgba(0, 0, 0, 0.15);
--shadow-blue: 0 10px 35px rgba(77, 156, 255, 0.3);
--shadow-blue-strong: 0 15px 40px rgba(77, 156, 255, 0.4); --transition-fast: all 0.2s ease;
--transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
--transition-bounce: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
} .hero-custom.hero-section {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 70%, var(--primary-darker) 100%);
padding: 80px 0 60px;
overflow: hidden;
color: var(--text-light);
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1; } .hero-morphing-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.morphing-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.2;
animation: morphMove 25s infinite alternate ease-in-out;
}
.blob-1 {
width: 50%;
height: 50%;
background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
top: -10%;
right: -10%;
animation-duration: 20s;
}
.blob-2 {
width: 40%;
height: 40%;
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
bottom: -5%;
left: -5%;
animation-duration: 30s;
animation-delay: 3s;
}
.blob-3 {
width: 30%;
height: 30%;
background: radial-gradient(circle, var(--success) 0%, transparent 60%);
top: 40%;
left: 10%;
animation-duration: 25s;
animation-delay: 7s;
}
.noise-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
opacity: 0.4;
mix-blend-mode: overlay;
}
@keyframes morphMove {
0% { transform: translate(0, 0) scale(0.8); }
50% { transform: translate(3%, 3%) scale(1.1); }
100% { transform: translate(-3%, -3%) scale(0.9); }
} .feature-banner {
position: absolute;
top: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 30px;
z-index: 10;
}
.feature-tag {
background: var(--glass-bg-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 8px 15px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-white);
box-shadow: var(--shadow-sm);
border: 1px solid var(--glass-border);
animation: fadeInDown 0.8s forwards;
opacity: 0;
transform: translateY(-20px);
}
.feature-tag:nth-child(1) { animation-delay: 0.2s; }
.feature-tag:nth-child(2) { animation-delay: 0.4s; }
.feature-tag:nth-child(3) { animation-delay: 0.6s; }
.feature-tag i {
color: var(--secondary);
} .hero-custom.hero-section::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 60%;
height: 80%;
background: radial-gradient(circle, rgba(77, 156, 255, 0.08) 0%, transparent 70%);
filter: blur(60px);
z-index: 0;
animation: heroGlow 15s infinite alternate ease-in-out;
}
.hero-custom.hero-section::after {
content: '';
position: absolute;
bottom: -10%;
left: -5%;
width: 40%;
height: 60%;
background: radial-gradient(circle, rgba(255, 157, 77, 0.05) 0%, transparent 70%);
filter: blur(80px);
z-index: 0;
animation: heroGlow 20s infinite alternate-reverse ease-in-out;
}
@keyframes heroGlow {
0% { opacity: 0.4; transform: translate(0, 0) scale(0.8); }
50% { opacity: 0.7; transform: translate(3%, 3%) scale(1.1); }
100% { opacity: 0.4; transform: translate(0, 0) scale(0.8); }
} .hero-decoration {
position: absolute;
pointer-events: none;
z-index: 1;
}
.hero-decoration.dots {
width: 200px;
height: 200px;
top: 15%;
right: 5%;
background-image: radial-gradient(var(--secondary) 1px, transparent 1px);
background-size: 16px 16px;
opacity: 0.15;
}
.hero-decoration.circle {
width: 300px;
height: 300px;
bottom: -150px;
right: 15%;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0.5;
}
.hero-decoration.lines {
width: 150px;
height: 150px;
top: 20%;
left: 10%;
opacity: 0.2;
background: linear-gradient(45deg, transparent 48%, var(--secondary) 49%, var(--secondary) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, var(--secondary) 49%, var(--secondary) 51%, transparent 52%);
background-size: 30px 30px;
} .hero-flex-custom {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80vh;
width: 100%;
position: relative;
z-index: 5; padding: 0;
gap: 50px; max-width: 1400px;
margin: 0 auto;
padding: 0 20px; } .hero-content-wrapper {
flex: 1 1 55%; position: relative;
z-index: 6; display: flex;
justify-content: flex-start;
align-items: center;
transform: translateZ(0); }
.hero-content-wrapper::before {
content: '';
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
background: var(--glass-bg); border-radius: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-strong);
z-index: -1;
opacity: 0;
transform: scale(0.95);
animation: fadeInScale 0.8s 0.2s forwards;
border-top: 2px solid rgba(77, 156, 255, 0.3); border-left: 2px solid rgba(77, 156, 255, 0.3);
} .hero-content-custom {
padding: 50px;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
position: relative;
z-index: 3;
} .vip-tag {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #ffdc00 0%, #ffa700 100%);
padding: 6px 12px;
border-radius: 30px;
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(255, 167, 0, 0.3);
opacity: 0;
transform: translateY(-20px);
animation: fadeInDown 0.8s forwards;
}
.vip-crown {
margin-right: 6px;
font-size: 0.8rem;
color: #000;
}
.vip-tag span {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #000;
}
.performance-badge {
display: inline-flex;
align-items: center;
background: var(--glass-bg-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 30px;
margin-bottom: 20px;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-sm);
gap: 8px;
opacity: 0;
transform: translateY(-10px);
animation: fadeInDown 0.8s 0.2s forwards;
}
.performance-badge i {
color: var(--secondary);
} .subtitle-glow {
position: relative;
margin-bottom: 10px;
}
.collection-custom {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--secondary);
position: relative;
padding-left: 40px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 0.3s forwards;
}
.collection-custom::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 30px;
height: 2px;
background: var(--secondary);
transform: translateY(-50%);
}
.subtitle-glow::after {
content: '';
position: absolute;
width: 100%;
height: 40px;
background: radial-gradient(ellipse at center, rgba(77, 156, 255, 0.3) 0%, transparent 70%);
left: 0;
top: 50%;
transform: translateY(-50%);
filter: blur(10px);
z-index: -1;
opacity: 0;
animation: fadeIn 1s 0.5s forwards;
}
.hero-title-custom {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin: 0 0 20px;
position: relative;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.4s forwards;
}
.title-gradient {
background: linear-gradient(135deg, var(--text-white) 30%, var(--secondary-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
margin-right: 10px;
} .availability-badge {
display: inline-flex;
align-items: center;
background: var(--success);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
color: white;
vertical-align: middle;
gap: 5px;
position: relative;
top: -5px;
box-shadow: 0 5px 15px rgba(0, 200, 117, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 200, 117, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(0, 200, 117, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 200, 117, 0); }
} .hero-description {
font-size: 1.15rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 30px;
max-width: 90%;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 0.5s forwards;
}
.text-highlight {
color: var(--text-white);
font-weight: 500;
position: relative;
display: inline-block;
z-index: 1;
}
.text-highlight::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: var(--secondary);
opacity: 0.2;
z-index: -1;
transform: translateY(2px);
border-radius: 4px;
} .feature-indicators {
display: flex;
gap: 25px;
margin-bottom: 30px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 0.6s forwards;
}
.feature-indicator {
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.indicator-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--glass-bg-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
box-shadow: var(--shadow-sm);
border: 1px solid var(--glass-border);
font-size: 1.1rem;
position: relative;
z-index: 2;
}
.indicator-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at center, var(--secondary) 0%, transparent 70%);
filter: blur(10px);
opacity: 0.5;
z-index: -1;
animation: pulse 2s infinite;
}
.indicator-content {
display: flex;
flex-direction: column;
}
.indicator-title {
font-weight: 600;
color: var(--text-white);
font-size: 0.95rem;
}
.indicator-desc {
font-size: 0.85rem;
color: var(--text-muted);
} .hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
position: relative;
z-index: 5;
} .explore-btn-custom {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 15px 35px;
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
color: white;
font-size: 1.05rem;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
box-shadow: var(--shadow-blue);
position: relative;
overflow: hidden;
transition: var(--transition-smooth);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.7s forwards;
}
.btn-content {
position: relative;
z-index: 2;
}
.btn-icon {
position: relative;
z-index: 2;
transition: var(--transition-smooth);
}
.btn-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, transparent 80%);
opacity: 0;
z-index: 1;
transition: var(--transition-smooth);
}
.explore-btn-custom::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(45deg);
transition: var(--transition-smooth);
opacity: 0;
z-index: 1;
}
.explore-btn-custom:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: var(--shadow-blue-strong);
}
.explore-btn-custom:hover .btn-icon {
transform: translateX(3px);
}
.explore-btn-custom:hover .btn-glow {
opacity: 0.05;
}
.explore-btn-custom:hover::after {
animation: btnShine 1.5s ease;
}
@keyframes btnShine {
0% {
opacity: 0;
left: -50%;
}
30% {
opacity: 0.5;
}
100% {
opacity: 0;
left: 150%;
}
} .hero-secondary-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: var(--glass-bg-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--text-white);
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
border-radius: 50px;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-sm);
transition: var(--transition-smooth);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.8s forwards;
}
.btn-play-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: var(--secondary);
border-radius: 50%;
color: white;
font-size: 0.8rem;
transition: var(--transition-smooth);
}
.hero-secondary-btn:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
background: var(--glass-bg);
}
.hero-secondary-btn:hover .btn-play-icon {
transform: scale(1.1);
background: var(--secondary-dark);
} .hero-img-wrapper {
flex: 0 1 40%; position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 4; perspective: 1000px;
transform-style: preserve-3d;
margin-right: 20px; } .hero-img-frame {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateY(-5deg) rotateX(5deg);
transition: var(--transition-smooth);
animation: float 6s infinite ease-in-out;
}
.hero-img-frame:hover {
transform: rotateY(-8deg) rotateX(8deg) scale(1.02);
}
@keyframes float {
0%, 100% { transform: rotateY(-5deg) rotateX(5deg) translateY(0); }
50% { transform: rotateY(-5deg) rotateX(5deg) translateY(-15px); }
} .hero-img-custom {
position: relative;
width: 100%;
overflow: visible; border-radius: 20px;
transform-style: preserve-3d;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
} .img-shine-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateY(-100%);
animation: shine 8s infinite;
z-index: 2;
pointer-events: none;
}
@keyframes shine {
0% { transform: translateY(-100%) rotate(10deg); }
20% { transform: translateY(100%) rotate(10deg); }
100% { transform: translateY(100%) rotate(10deg); }
} .hero-img-custom img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow-strong);
transition: var(--transition-bounce);
transform: scale(0.98) translateZ(0);
opacity: 0;
filter: contrast(1.1) saturate(1.2);
animation: fadeInScale 1.2s 0.3s forwards;
}
.hero-img-custom:hover img {
transform: scale(1.02) translateZ(20px);
} .price-tag {
position: absolute;
bottom: -30px;
right: -20px;
background: var(--glass-bg-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px;
padding: 15px 20px;
box-shadow: var(--shadow-md);
border: 1px solid var(--glass-border);
transform: rotate(5deg) translateZ(30px);
transform-style: preserve-3d;
transition: var(--transition-bounce);
opacity: 0;
animation: fadeInRight 0.8s 1s forwards;
z-index: 5;
}
.price-tag:hover {
transform: rotate(5deg) translateZ(50px) scale(1.1);
}
.price-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.old-price {
font-size: 0.85rem;
color: var(--text-muted);
text-decoration: line-through;
}
.current-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-white);
}
.discount-badge {
position: absolute;
top: -10px;
right: -10px;
background: var(--danger);
color: white;
font-size: 0.8rem;
font-weight: 700;
padding: 5px 10px;
border-radius: 10px;
box-shadow: var(--shadow-sm);
transform: translateZ(5px);
} .countdown-timer {
position: absolute;
bottom: -30px;
left: -20px;
background: var(--glass-bg-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
box-shadow: var(--shadow-md);
border: 1px solid var(--glass-border);
z-index: 4;
transform: translateZ(30px);
transform-style: preserve-3d;
transition: var(--transition-bounce);
opacity: 0;
animation: fadeInLeft 0.8s 1s forwards;
width: 320px;
}
.countdown-timer:hover {
transform: translateZ(40px) scale(1.05);
}
.countdown-heading {
font-size: 0.9rem;
font-weight: 600;
color: var(--secondary);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.countdown-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.count-number {
font-size: 2rem;
font-weight: 700;
color: var(--text-white);
line-height: 1;
background: linear-gradient(to bottom, var(--text-white), var(--text-muted));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.count-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.countdown-separator {
width: 1px;
height: 30px;
background: var(--glass-border);
margin: 0 15px;
} .rating-indicator {
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 0.9s forwards;
}
.stars {
display: flex;
gap: 2px;
}
.stars i {
color: var(--warning);
font-size: 0.85rem;
}
.rating-count {
font-size: 0.85rem;
color: var(--text-muted);
} .product-categories-strip {
display: flex;
align-items: center;
gap: 15px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 12px 20px;
border-radius: 50px;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-sm);
margin-top: 30px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 1s forwards;
}
.category-title {
font-weight: 600;
color: var(--secondary);
font-size: 0.9rem;
}
.categories-wrapper {
display: flex;
align-items: center;
gap: 20px;
overflow-x: auto;
padding-bottom: 5px;
scrollbar-width: thin;
mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
.categories-wrapper::-webkit-scrollbar {
height: 3px;
}
.categories-wrapper::-webkit-scrollbar-track {
background: var(--glass-border);
border-radius: 10px;
}
.categories-wrapper::-webkit-scrollbar-thumb {
background: var(--secondary);
border-radius: 10px;
}
.category-item {
font-size: 0.85rem;
color: var(--text-muted);
white-space: nowrap;
transition: var(--transition-fast);
display: flex;
align-items: center;
gap: 6px;
}
.category-item i {
color: var(--secondary);
font-size: 0.8rem;
}
.category-item:hover {
color: var(--text-white);
transform: translateY(-2px);
} .marquee-container {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
overflow: hidden;
padding: 15px 0;
background: linear-gradient(90deg, var(--primary-darker) 0%, transparent 5%, transparent 95%, var(--primary-darker) 100%);
z-index: 5;
}
.marquee-content {
display: flex;
align-items: center;
gap: 40px;
white-space: nowrap;
animation: marqueeScroll 25s linear infinite;
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-item {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 2px;
color: var(--text-muted);
text-transform: uppercase;
}
.marquee-divider {
font-size: 0.6rem;
color: var(--secondary);
opacity: 0.7;
} .hero-secondary-image,
.hero-tertiary-image {
position: absolute;
z-index: 3;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-md);
opacity: 0;
transform: translateY(20px);
transition: var(--transition-bounce);
cursor: pointer;
transform-style: preserve-3d;
border: 1px solid var(--glass-border);
}
.hero-secondary-image {
animation: fadeInUp 0.8s 0.7s forwards;
}
.hero-tertiary-image {
animation: fadeInUp 0.8s 0.9s forwards;
}
.hero-secondary-image img,
.hero-tertiary-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.hero-secondary-image:hover,
.hero-tertiary-image:hover {
transform: translateY(-10px) scale(1.05);
z-index: 4;
} .hero-section[data-images-position="right"] .hero-secondary-image {
right: -40px;
top: 20%;
width: 180px;
height: 180px;
}
.hero-section[data-images-position="right"] .hero-tertiary-image {
right: 80px;
bottom: 15%;
width: 220px;
height: 180px;
} .hero-section[data-images-position="left"] .hero-secondary-image {
left: -40px;
top: 20%;
width: 180px;
height: 180px;
}
.hero-section[data-images-position="left"] .hero-tertiary-image {
left: 80px;
bottom: 15%;
width: 220px;
height: 180px;
} .hero-section[data-images-size="small"] .hero-secondary-image {
width: 150px;
height: 150px;
}
.hero-section[data-images-size="small"] .hero-tertiary-image {
width: 180px;
height: 150px;
}
.hero-section[data-images-size="large"] .hero-secondary-image {
width: 220px;
height: 220px;
}
.hero-section[data-images-size="large"] .hero-tertiary-image {
width: 270px;
height: 220px;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
} .hero-social-links {
position: absolute;
left: 40px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 10; opacity: 0;
animation: fadeIn 0.8s 1s forwards;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(14, 34, 52, 0.7);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 15px;
font-size: 16px;
transition: var(--transition-smooth);
}
.social-link:hover {
background: var(--secondary);
transform: translateY(-5px);
border-color: transparent;
box-shadow: 0 10px 25px rgba(77, 156, 255, 0.25);
}
.social-separator {
width: 30px;
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0 15px;
}
.social-text {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
} .scroll-indicator {
position: absolute;
left: 50%;
bottom: 120px; transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 20; animation: fadeInUp 1s 1.2s forwards;
opacity: 0;
background: var(--glass-bg-light);
padding: 10px 15px 5px;
border-radius: 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-md);
}
.scroll-icon {
width: 30px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
position: relative;
margin-bottom: 8px;
}
.scroll-dot {
width: 6px;
height: 6px;
background: var(--secondary);
border-radius: 50%;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scrollDown 2s infinite;
}
@keyframes scrollDown {
0% {
opacity: 1;
transform: translate(-50%, 0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, 25px);
}
}
.scroll-indicator span {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
} .hero-social-links {
position: absolute;
left: 40px;
bottom: 40px;
display: flex;
align-items: center;
z-index: 10;
animation: fadeInLeft 1s 1s forwards;
opacity: 0;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(14, 34, 52, 0.7);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 15px;
font-size: 16px;
transition: var(--transition-smooth);
}
.social-link:hover {
background: var(--secondary);
transform: translateY(-5px);
border-color: transparent;
box-shadow: 0 10px 25px rgba(77, 156, 255, 0.25);
}
.social-separator {
width: 30px;
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0 15px;
}
.social-text {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
} .browsing-status {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px;
z-index: 15;
opacity: 0;
animation: fadeInRight 1s 0.7s forwards;
background: var(--glass-bg-light);
padding: 20px;
border-radius: 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-right: 2px solid rgba(77, 156, 255, 0.3);
box-shadow: var(--shadow-md);
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate(30px, -50%);
}
to {
opacity: 1;
transform: translate(0, -50%);
}
}
.status-item {
margin: 15px 0;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.4);
position: relative;
padding-right: 50px;
transition: var(--transition-smooth);
cursor: pointer;
}
.status-item::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 40px;
height: 1px;
background: rgba(255, 255, 255, 0.2);
transform: translateY(-50%);
transition: var(--transition-smooth);
}
.status-item.active {
color: white;
}
.status-item.active::after {
background: var(--secondary);
width: 60px;
}
.status-label {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.4);
margin-top: 2px;
}
.status-item.active .status-label {
color: var(--secondary);
}
.status-item:hover {
color: white;
}
.status-item:hover::after {
width: 50px;
background: rgba(255, 255, 255, 0.4);
} .hero-content-custom {
position: relative;
z-index: 5;
padding-right: 60px;
} .product-categories-strip {
display: flex;
align-items: center;
margin-top: 30px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 1s forwards;
}
.category-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.6);
margin-right: 20px;
}
.category-item {
padding: 8px 15px;
margin-right: 10px;
border-radius: 30px;
background: rgba(14, 34, 52, 0.6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.08);
color: white;
font-size: 13px;
transition: var(--transition-smooth);
cursor: pointer;
}
.category-item:hover {
background: var(--secondary);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(77, 156, 255, 0.2);
border-color: transparent;
} .performance-badge {
position: absolute;
top: -20px;
right: 0;
background: linear-gradient(135deg, #ff9d4d 0%, #ff7d2d 100%);
color: white;
padding: 5px 15px;
border-radius: 30px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 20px rgba(255, 157, 77, 0.3);
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 1.2s forwards;
}
.performance-badge i {
margin-right: 5px;
} .availability-badge {
display: inline-flex;
align-items: center;
background: rgba(0, 170, 110, 0.2);
color: #00aa6e;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-left: 15px;
position: relative;
top: -5px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 0.8s forwards;
}
.availability-badge i {
margin-right: 5px;
font-size: 10px;
} .hero-title-custom {
position: relative;
display: inline-block;
}
.hero-title-custom::before {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--secondary), transparent);
border-radius: 3px;
} .hero-description {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-muted);
margin: 20px 0 30px;
max-width: 95%;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s 0.6s forwards;
} .hero-secondary-btn {
display: inline-flex;
align-items: center;
padding: 15px 30px;
margin-left: 20px;
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50px;
color: white;
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
transition: var(--transition-smooth);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.8s forwards;
}
.hero-secondary-btn i {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin-right: 10px;
font-size: 0.9rem;
transition: var(--transition-smooth);
}
.hero-secondary-btn:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.hero-secondary-btn:hover i {
background: var(--secondary);
transform: scale(1.1);
} .countdown-timer {
position: absolute;
left: 20px;
bottom: 20px;
display: flex;
align-items: center;
background: rgba(14, 34, 52, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 12px 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 5;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s 1.4s forwards;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10px;
}
.count-number {
font-size: 1.6rem;
font-weight: 700;
color: white;
line-height: 1;
}
.count-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.countdown-separator {
width: 1px;
height: 30px;
background: rgba(255, 255, 255, 0.2);
margin: 0 5px;
} @media (max-width: 1200px) {
.hero-title-custom {
font-size: 3.8rem;
}
.hero-section[data-images-position="right"] .hero-secondary-image {
right: -20px;
width: 160px;
height: 160px;
}
.hero-section[data-images-position="right"] .hero-tertiary-image {
right: 60px;
width: 200px;
height: 160px;
}
.hero-section[data-images-position="left"] .hero-secondary-image {
left: -20px;
width: 160px;
height: 160px;
}
.hero-section[data-images-position="left"] .hero-tertiary-image {
left: 60px;
width: 200px;
height: 160px;
}
}
@media (max-width: 992px) {
.hero-flex-custom {
flex-direction: column-reverse;
min-height: auto;
padding: 30px 0 60px;
}
.hero-content-custom {
flex: 1 1 100%;
padding: 40px 20px;
text-align: center;
align-items: center;
}
.hero-title-custom {
font-size: 3.2rem;
}
.hero-img-custom {
flex: 1 1 100%;
min-height: 300px;
margin-top: 20px;
}
.collection-custom {
padding-left: 0;
}
.collection-custom::before {
display: none;
}
.hero-section[data-images-position="right"] .hero-secondary-image,
.hero-section[data-images-position="left"] .hero-secondary-image {
right: auto;
left: 10%;
top: auto;
bottom: -30px;
width: 140px;
height: 140px;
}
.hero-section[data-images-position="right"] .hero-tertiary-image,
.hero-section[data-images-position="left"] .hero-tertiary-image {
right: 10%;
left: auto;
bottom: -50px;
width: 170px;
height: 140px;
}
}
@media (max-width: 768px) {
.hero-title-custom {
font-size: 2.5rem;
}
.explore-btn-custom {
padding: 12px 28px;
font-size: 1rem;
}
.hero-section[data-images-position="right"] .hero-secondary-image,
.hero-section[data-images-position="left"] .hero-secondary-image {
left: 5%;
width: 120px;
height: 120px;
}
.hero-section[data-images-position="right"] .hero-tertiary-image,
.hero-section[data-images-position="left"] .hero-tertiary-image {
right: 5%;
width: 150px;
height: 120px;
}
}
@media (max-width: 576px) {
.hero-content-custom {
padding: 30px 15px;
}
.hero-title-custom {
font-size: 2rem;
margin-bottom: 20px;
}
.collection-custom {
font-size: 0.9rem;
margin-bottom: 15px;
}
.hero-img-custom {
min-height: 220px;
}
.explore-btn-custom {
padding: 10px 24px;
font-size: 0.9rem;
}
.hero-secondary-image,
.hero-tertiary-image {
display: none;
}
}.hero-features {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
margin-top: 2rem;
width: 100%;
}
.feature-card {
flex: 1 1 200px;
max-width: 250px;
padding: 1.2rem 1rem;
border-radius: var(--border-radius-md);
background: linear-gradient(145deg, rgba(10, 28, 45, 0.8) 0%, rgba(13, 37, 60, 0.9) 100%);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-md);
transition: var(--transition-normal);
border: 1px solid rgba(77, 156, 255, 0.1);
position: relative;
overflow: hidden;
text-align: center;
}
.feature-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at bottom right, rgba(77, 156, 255, 0.1) 0%, transparent 70%);
z-index: 0;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(77, 156, 255, 0.3);
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin: 0 auto 1rem;
background: linear-gradient(135deg, rgba(10, 28, 45, 0.9) 0%, rgba(17, 47, 76, 0.9) 100%);
border-radius: 50%;
color: var(--secondary);
font-size: 1.5rem;
border: 1px solid rgba(77, 156, 255, 0.2);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
.feature-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: radial-gradient(circle at 70% 30%, rgba(77, 156, 255, 0.3) 0%, transparent 70%);
z-index: -1;
}
.feature-card:hover .feature-icon {
color: var(--light);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, rgba(77, 156, 255, 0.2) 0%, rgba(10, 28, 45, 0.9) 100%);
}
.feature-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--light);
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.feature-description {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
position: relative;
z-index: 1;
line-height: 1.5;
} @media (max-width: 768px) {
.hero-features {
gap: 1rem;
}
.feature-card {
flex: 1 1 40%;
min-width: 150px;
padding: 1rem 0.8rem;
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
margin-bottom: 0.8rem;
}
.feature-title {
font-size: 1rem;
}
.feature-description {
font-size: 0.8rem;
}
}.hero-text-side {
position: relative;
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
.hero-text-content {
flex: 1;
position: relative;
z-index: 3;
} .hero-side-images {
width: 200px;
height: 400px;
position: relative;
margin-top: 2rem;
perspective: 1000px;
} .hero-side-images .hero-secondary-image,
.hero-side-images .hero-tertiary-image {
position: absolute;
width: 180px;
height: 180px;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(77, 156, 255, 0.2);
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
transform-style: preserve-3d;
background-color: rgba(10, 28, 45, 0.4);
backdrop-filter: blur(8px);
border: 4px solid var(--primary-dark);
z-index: 3;
} .hero-side-images .hero-secondary-image {
top: 0;
left: 0;
transform: translateZ(20px) rotate(-5deg);
z-index: 4;
} .hero-side-images .hero-tertiary-image {
top: 200px;
left: 20px;
transform: translateZ(10px) rotate(5deg);
z-index: 3;
} .hero-side-images .hero-secondary-image:hover,
.hero-side-images .hero-tertiary-image:hover {
transform: translateZ(40px) scale(1.05) rotate(0deg);
border-color: var(--secondary);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(77, 156, 255, 0.3);
z-index: 10;
} .hero-side-images .hero-secondary-image::before,
.hero-side-images .hero-tertiary-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(77, 156, 255, 0.15) 0%, rgba(10, 28, 45, 0.5) 100%);
z-index: 1;
border-radius: inherit;
}
.hero-side-images .hero-secondary-image::after,
.hero-side-images .hero-tertiary-image::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, rgba(77, 156, 255, 0.2) 0%, transparent 70%);
border-radius: inherit;
z-index: 2;
filter: blur(10px);
opacity: 0.5;
transition: opacity 0.4s ease, filter 0.4s ease;
}
.hero-side-images .hero-secondary-image:hover::after,
.hero-side-images .hero-tertiary-image:hover::after {
opacity: 0.8;
filter: blur(5px);
}
.hero-side-images img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hero-side-images .hero-secondary-image:hover img,
.hero-side-images .hero-tertiary-image:hover img {
transform: scale(1.1);
} @media (max-width: 992px) {
.hero-text-side {
flex-direction: column;
align-items: center;
}
.hero-text-content {
text-align: center;
max-width: 100%;
}
.hero-side-images {
width: 100%;
height: 200px;
margin-top: 1rem;
display: flex;
justify-content: center;
perspective: 600px;
}
.hero-side-images .hero-secondary-image,
.hero-side-images .hero-tertiary-image {
position: relative;
width: 150px;
height: 150px;
margin: 0 -15px;
}
.hero-side-images .hero-secondary-image {
top: 0;
left: 0;
transform: translateZ(10px) rotate(-5deg);
}
.hero-side-images .hero-tertiary-image {
top: 0;
left: 0;
transform: translateZ(5px) rotate(5deg);
}
}
@media (max-width: 576px) {
.hero-side-images .hero-secondary-image,
.hero-side-images .hero-tertiary-image {
width: 120px;
height: 120px;
}
}.hero-text-vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
max-width: 100%;
padding: 2.5rem;
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0px rgba(255, 255, 255, 0.1), 0 0 15px rgba(77, 156, 255, 0.2);
background: linear-gradient(135deg, rgba(13, 37, 60, 0.85) 0%, rgba(10, 28, 45, 0.95) 50%, rgba(8, 22, 36, 0.9) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 10;
}
.hero-text-vertical .hero-subtitle {
margin-bottom: 1rem;
display: block;
width: 100%;
}
.hero-text-vertical .hero-title {
margin-bottom: 1.5rem;
width: 100%;
line-height: 1.3;
}
.hero-text-vertical .hero-simple-description {
margin-bottom: 2rem;
width: 100%;
line-height: 1.6;
} .vertical-buttons {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
width: 100%;
}
.vertical-buttons .hero-btn {
display: block;
width: 100%;
max-width: 250px;
text-align: center;
} .hero-text-vertical::before {
content: '';
position: absolute;
inset: 0;
background: 
radial-gradient(circle at 10% 20%, rgba(77, 156, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
linear-gradient(135deg, rgba(10, 20, 30, 0.3) 0%, rgba(7, 19, 29, 0.7) 100%);
z-index: 0;
animation: ambient-glow 10s infinite alternate ease-in-out;
}
.hero-text-vertical::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent 30%, rgba(77, 156, 255, 0.15), rgba(0, 212, 255, 0.15), transparent 70%);
z-index: -1;
border-radius: 18px;
filter: blur(20px);
opacity: 0.7;
animation: border-flow 8s infinite linear;
}
.hero-text-vertical > * {
position: relative;
z-index: 2;
} .hero-text-vertical .decorative-element {
position: absolute;
background: linear-gradient(90deg, rgba(77, 156, 255, 0.15), rgba(0, 212, 255, 0.05));
height: 2px;
width: 40%;
left: 0;
bottom: 0;
transform-origin: left;
animation: line-grow 4s ease-in-out infinite alternate;
}
.hero-text-vertical .decorative-circle {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, rgba(77, 156, 255, 0.03) 0%, transparent 70%);
right: -30px;
top: -30px;
animation: pulse 6s infinite ease-in-out;
} .hero-text-vertical {
border: 1px solid rgba(77, 156, 255, 0.2);
border-left: 2px solid rgba(77, 156, 255, 0.4);
border-top: 2px solid rgba(77, 156, 255, 0.3);
} @keyframes ambient-glow {
0% { opacity: 0.5; background-position: 0% 0%; }
50% { opacity: 0.7; }
100% { opacity: 0.5; background-position: 100% 100%; }
}
@keyframes border-flow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes line-grow {
0% { transform: scaleX(0.6); opacity: 0.3; }
100% { transform: scaleX(1); opacity: 0.7; }
}
@keyframes pulse {
0% { transform: scale(0.9); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.7; }
100% { transform: scale(0.9); opacity: 0.5; }
} @media (max-width: 768px) {
.hero-text-vertical {
padding: 1.5rem;
}
.vertical-buttons .hero-btn {
max-width: 100%;
}
.hero-text-vertical .hero-title {
font-size: 32px;
}
}:root { --primary-dark: #0a1c2d;
--primary-darker: #06121e;
--primary-lighter: #0e2438;
--accent-blue: #4d9cff;
--accent-blue-dark: #3a7fd9;
--accent-glow: rgba(77, 156, 255, 0.2);
--accent-gradient: linear-gradient(135deg, #4d9cff, #0b6adc); --bg-dark-gradient: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
--glass-bg: rgba(14, 36, 56, 0.75);
--glass-border: rgba(77, 156, 255, 0.15);
--text-white: rgba(255, 255, 255, 0.95);
--text-light: rgba(255, 255, 255, 0.8);
--text-muted: rgba(255, 255, 255, 0.6); --shadow-normal: 0 10px 30px rgba(0, 0, 0, 0.3);
--shadow-blue: 0 10px 25px rgba(77, 156, 255, 0.2);
--shadow-intense: 0 15px 35px rgba(0, 0, 0, 0.5);
--shadow-inner: inset 0 0 20px rgba(77, 156, 255, 0.1); --border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 20px;
--border-radius-xl: 30px;
--border-radius-full: 9999px; --transition-fast: 0.3s ease;
--transition-smooth: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
--transition-bounce: 0.5s cubic-bezier(0.19, 1.9, 0.22, 1);
} .unique-items-section {
position: relative;
background: var(--bg-dark-gradient);
padding: 100px 0 120px;
color: var(--text-light);
overflow: hidden;
z-index: 1;
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
} .unique-items-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 15% 15%, rgba(77, 156, 255, 0.1), transparent 40%),
radial-gradient(circle at 85% 85%, rgba(77, 156, 255, 0.08), transparent 40%),
linear-gradient(135deg, rgba(10, 28, 45, 0.95) 0%, rgba(6, 18, 30, 0.98) 100%);
z-index: -1;
} .unique-items-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, transparent 0%, rgba(77, 156, 255, 0.04) 50%, transparent 100%);
background-size: 200% 100%;
opacity: 0.7;
z-index: -1;
animation: shine 8s linear infinite;
} .unique-items-section .section-sub {
display: inline-block;
color: var(--accent-blue);
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
margin-bottom: 15px;
font-size: 14px;
text-align: center;
position: relative;
padding-bottom: 15px;
animation: glow 3s infinite alternate;
}
.unique-items-section .section-sub::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--accent-gradient);
border-radius: var(--border-radius-full);
}
.unique-items-section .section-title {
font-size: 44px;
font-weight: 800;
color: var(--text-white);
margin-bottom: 50px;
text-align: center;
text-transform: capitalize;
letter-spacing: -0.5px;
line-height: 1.2;
background: linear-gradient(135deg, var(--text-white) 30%, var(--accent-blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
} .unique-items-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
position: relative;
} .unique-items-scroll {
scrollbar-width: thin;
scrollbar-color: var(--accent-blue) var(--primary-darker);
}
.unique-items-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.unique-items-scroll::-webkit-scrollbar-track {
background: rgba(6, 18, 30, 0.5);
border-radius: var(--border-radius-full);
}
.unique-items-scroll::-webkit-scrollbar-thumb {
background: var(--accent-blue);
border-radius: var(--border-radius-full);
} .unique-item {
background: var(--glass-bg);
border-radius: var(--border-radius-lg);
overflow: hidden;
transition: var(--transition-smooth);
transform: translateY(0);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-normal);
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
} .unique-item::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(77, 156, 255, 0.1), transparent 70%);
opacity: 0;
transition: var(--transition-smooth);
z-index: 0;
} .unique-item::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--border-radius-lg);
padding: 1px;
background: linear-gradient(135deg, transparent, var(--accent-blue), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
}
.unique-item:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-blue), var(--shadow-intense);
}
.unique-item:hover::before {
opacity: 1;
}
.unique-item:hover::after {
opacity: 0.6;
} .unique-item img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
transition: var(--transition-smooth);
position: relative;
z-index: 1;
filter: brightness(1) contrast(1.1);
}
.unique-item:hover img {
transform: scale(1.05);
filter: brightness(1.1) contrast(1.15);
} .unique-item h3 {
font-size: 20px;
font-weight: 700;
margin: 20px 20px 10px;
color: var(--text-white);
transition: var(--transition-fast);
position: relative;
z-index: 1;
}
.unique-item:hover h3 {
color: var(--accent-blue);
transform: translateX(5px);
} .unique-item .item-description {
margin: 0 20px 20px;
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
position: relative;
z-index: 1;
flex-grow: 1;
} .unique-item .whatsapp-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
margin: 0 20px 20px;
background: linear-gradient(135deg, #25D366, #128C7E);
color: white;
font-weight: 600;
border-radius: var(--border-radius-full);
text-decoration: none;
transition: var(--transition-bounce);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
position: relative;
z-index: 1;
overflow: hidden;
}
.unique-item .whatsapp-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
transform: translateX(-100%);
transition: var(--transition-fast);
}
.unique-item .whatsapp-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
}
.unique-item .whatsapp-btn:hover::before {
transform: translateX(100%);
}
.unique-item .whatsapp-btn i {
margin-right: 10px;
font-size: 18px;
} .unique-items-section.second {
background: var(--bg-dark-gradient);
position: relative;
padding: 100px 0 120px;
color: var(--text-light);
overflow: hidden;
z-index: 1;
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.unique-items-section.second::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 15% 15%, rgba(77, 156, 255, 0.1), transparent 40%),
radial-gradient(circle at 85% 85%, rgba(77, 156, 255, 0.08), transparent 40%),
linear-gradient(135deg, rgba(10, 28, 45, 0.95) 0%, rgba(6, 18, 30, 0.98) 100%);
z-index: -1;
} .unique-items-section.second::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, transparent 0%, rgba(77, 156, 255, 0.04) 50%, transparent 100%);
background-size: 200% 100%;
opacity: 0.7;
z-index: -1;
animation: shine 8s linear infinite;
} @keyframes glow {
0%, 100% {
text-shadow: 0 0 5px rgba(77, 156, 255, 0.3);
}
50% {
text-shadow: 0 0 15px rgba(77, 156, 255, 0.6);
}
}
@keyframes shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
} @media (max-width: 992px) {
.unique-items-section {
padding: 80px 0 100px;
}
.unique-items-section .section-title {
font-size: 36px;
}
.unique-items-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}
}
@media (max-width: 768px) {
.unique-items-section {
padding: 60px 0 80px;
}
.unique-items-section .section-title {
font-size: 30px;
}
.unique-items-list {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.unique-item img {
height: 180px;
}
.unique-item h3 {
font-size: 18px;
}
}
@media (max-width: 576px) {
.unique-items-list {
grid-template-columns: 1fr;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.unique-item h3 {
margin-top: 15px;
}
}@media (max-width: 1200px) {
.hero-section .container {
max-width: 90%;
}
.hero-title {
font-size: 2.5rem;
}
.hero-simple-description {
font-size: 1rem;
}
.hero-features {
gap: 15px;
}
} @media (max-width: 992px) {
.hero-section {
padding: 60px 0;
}
.hero-top-content {
flex-direction: column-reverse;
gap: 30px;
}
.hero-text-side, 
.hero-image-side {
width: 100%;
max-width: 100%;
}
.hero-text-vertical {
margin: 0 auto;
width: 100%;
max-width: 600px;
}
.hero-title {
font-size: 2.2rem;
text-align: center;
}
.hero-subtitle {
text-align: center;
}
.hero-simple-description {
text-align: center;
}
.vertical-buttons {
align-items: center;
}
.hero-image-wrapper {
margin: 0 auto;
max-width: 500px;
}
.main-hero-image {
max-height: 400px;
object-fit: contain;
}
.hero-features {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
} @media (max-width: 768px) {
.hero-section {
padding: 50px 0;
}
.hero-title {
font-size: 2rem;
}
.hero-image-wrapper {
max-width: 400px;
}
.main-hero-image {
max-height: 350px;
}
.hero-features {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.feature-card {
display: flex;
align-items: center;
text-align: left;
padding: 15px;
}
.feature-icon {
margin-bottom: 0;
margin-right: 15px;
width: 40px;
height: 40px;
min-width: 40px;
}
.feature-title {
margin: 0 0 5px 0;
font-size: 1rem;
}
.feature-description {
font-size: 0.85rem;
margin: 0;
}
.vertical-buttons .hero-btn {
width: 100%;
max-width: 100%;
}
} @media (max-width: 576px) {
.hero-section {
padding: 40px 0;
}
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 0.9rem;
}
.hero-simple-description {
font-size: 0.9rem;
}
.hero-image-wrapper {
max-width: 300px;
}
.main-hero-image {
max-height: 280px;
}
.hero-text-vertical {
padding: 1.5rem;
}
.vertical-buttons {
gap: 0.7rem;
}
.hero-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.hero-bottom-content {
margin-top: 30px;
} .decorative-dot {
display: none;
}
.decorative-element,
.decorative-circle {
opacity: 0.5;
transform: scale(0.8);
}
} @media (max-width: 380px) {
.hero-title {
font-size: 1.6rem;
}
.hero-simple-description {
font-size: 0.85rem;
}
.hero-text-vertical {
padding: 1.2rem;
}
.hero-image-wrapper {
max-width: 250px;
}
.main-hero-image {
max-height: 220px;
}
.feature-card {
padding: 12px;
}
.feature-icon {
width: 35px;
height: 35px;
min-width: 35px;
font-size: 14px;
}
.feature-description {
font-size: 0.8rem;
}
} @media (max-width: 768px) {
.animated {
animation-duration: 0.5s;
}
.hero-features .feature-card {
opacity: 1;
transform: none;
animation: none;
}
} @media (max-width: 576px) {
.hero-decoration .decoration-circle {
display: none;
}
.animated {
animation: none;
}
}:root { --dark-bg: #0a1c2d;
--darker-bg: #061220;
--accent-blue: #4d9cff;
--accent-blue-dark: #3a7fd9;
--accent-blue-light: #70b0ff;
--glass-bg: rgba(14, 36, 56, 0.75);
--glass-border: rgba(77, 156, 255, 0.15); --dark-gradient: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
--accent-gradient: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
--glow-gradient: radial-gradient(circle, rgba(77, 156, 255, 0.15) 0%, transparent 70%); --text-light: rgba(255, 255, 255, 0.95);
--text-muted: rgba(255, 255, 255, 0.6); --shadow-normal: 0 10px 30px rgba(0, 0, 0, 0.25);
--shadow-blue: 0 10px 25px rgba(77, 156, 255, 0.2);
--border-radius: 16px;
--transition-bounce: 0.5s cubic-bezier(0.2, 1.8, 0.3, 1);
--transition-smooth: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
} .partners-section {
position: relative;
background: var(--dark-gradient);
padding: 80px 0;
overflow: hidden;
color: var(--text-light);
z-index: 1;
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
} .partners-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 15% 15%, rgba(77, 156, 255, 0.1), transparent 40%),
radial-gradient(circle at 85% 85%, rgba(77, 156, 255, 0.08), transparent 40%);
z-index: -1;
} .partners-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(77, 156, 255, 0.05), transparent);
background-size: 200% 100%;
animation: shine 8s infinite linear;
z-index: -1;
} .partners-section .section-header {
margin-bottom: 60px;
position: relative;
} .partners-section .section-title {
position: relative;
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 15px;
background: linear-gradient(135deg, var(--text-light) 30%, var(--accent-blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
} .partners-section .section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--accent-gradient);
border-radius: 10px;
} .partners-section .section-desc {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 600px;
margin: 25px auto 0;
} .partners-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 30px;
margin-top: 40px;
} .partner-item {
position: relative;
background: var(--glass-bg);
border-radius: var(--border-radius);
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
z-index: 1;
box-shadow: var(--shadow-normal);
transform: translateY(0);
} .partner-item::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--border-radius);
padding: 1px;
background: linear-gradient(135deg, transparent, var(--accent-blue), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
} .partner-item::after {
content: '';
position: absolute;
inset: 0;
background: var(--glow-gradient);
z-index: -2;
opacity: 0;
transition: opacity 0.5s ease;
} .partner-item:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-blue), 0 15px 35px rgba(0, 0, 0, 0.3);
}
.partner-item:hover::before {
opacity: 0.6;
}
.partner-item:hover::after {
opacity: 1;
} .partner-logo {
width: 100%;
max-width: 160px;
height: auto;
object-fit: contain;
filter: brightness(1.1) contrast(1.05);
transition: var(--transition-bounce);
transform: scale(1);
}
.partner-item:hover .partner-logo {
transform: scale(1.1);
filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px rgba(77, 156, 255, 0.3));
} .partner-name {
margin-top: 20px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
transition: var(--transition-smooth);
}
.partner-item:hover .partner-name {
color: var(--accent-blue-light) !important;
} @media (max-width: 992px) {
.partners-section {
padding: 60px 0;
}
.partners-section .section-title {
font-size: 2.4rem;
}
.partners-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
}
@media (max-width: 768px) {
.partners-section {
padding: 50px 0;
}
.partners-section .section-title {
font-size: 2rem;
}
.partners-section .section-desc {
font-size: 1rem;
}
.partners-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 15px;
}
.partner-item {
padding: 20px;
}
.partner-logo {
max-width: 120px;
}
.partner-name {
font-size: 1rem;
margin-top: 15px;
}
}
@media (max-width: 576px) {
.partners-section {
padding: 40px 0;
}
.partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.partner-item {
padding: 15px;
}
.partner-logo {
max-width: 100px;
}
.partner-name {
font-size: 0.9rem;
margin-top: 10px;
}
} @keyframes shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
} .partners-grid:only-child {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
max-width: 80%;
margin-left: auto;
margin-right: auto;
} @media (max-width: 768px) {
.partners-grid:only-child {
grid-template-columns: 1fr;
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
}:root { --primary-dark: #0a1c2d;
--primary-darker: #06121e;
--primary-lighter: #0e2438;
--accent-blue: #4d9cff;
--accent-blue-dark: #3a7fd9;
--accent-glow: rgba(77, 156, 255, 0.25); --dark-gradient: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
--accent-gradient: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%); --glass-bg: rgba(14, 36, 56, 0.75);
--glass-border: rgba(77, 156, 255, 0.15); --text-white: rgba(255, 255, 255, 0.95);
--text-light: rgba(255, 255, 255, 0.85);
--text-muted: rgba(255, 255, 255, 0.65); --shadow-normal: 0 10px 30px rgba(0, 0, 0, 0.3);
--shadow-blue: 0 10px 25px rgba(77, 156, 255, 0.2);
--shadow-intense: 0 15px 35px rgba(0, 0, 0, 0.5);
--shadow-inner: inset 0 0 20px rgba(77, 156, 255, 0.1); --border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 20px;
--border-radius-xl: 30px; --transition-fast: 0.3s ease;
--transition-smooth: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
--transition-bounce: 0.5s cubic-bezier(0.19, 1.9, 0.22, 1);
} .testimonials-section {
position: relative;
background: var(--dark-gradient) !important;
padding: 100px 0;
color: var(--text-light);
overflow: hidden;
z-index: 1;
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
} .testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 20%, rgba(77, 156, 255, 0.1), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(77, 156, 255, 0.08), transparent 40%);
z-index: -1;
} .testimonials-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, transparent 0%, rgba(77, 156, 255, 0.05) 50%, transparent 100%);
background-size: 200% 100%;
animation: shine 8s linear infinite;
z-index: -1;
} .testimonials-section .section-header {
text-align: center;
margin-bottom: 60px;
position: relative;
} .testimonials-section .section-sub {
display: inline-block;
color: var(--accent-blue);
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
margin-bottom: 15px;
font-size: 14px;
position: relative;
animation: pulse 3s infinite alternate;
} .testimonials-section .section-title {
font-size: 44px;
font-weight: 800;
margin-bottom: 20px;
color: var(--text-white) !important;
position: relative;
background: linear-gradient(135deg, var(--text-white) 30%, var(--accent-blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
display: inline-block;
} .testimonials-section .section-description {
max-width: 700px;
margin: 0 auto 20px;
color: var(--text-muted);
font-size: 18px;
line-height: 1.6;
} .testimonials-slider {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
position: relative;
z-index: 5;
} .testimonial-card-wrapper {
position: relative;
display: flex;
flex-direction: column;
transform-style: preserve-3d;
perspective: 1000px;
margin-top: 35px;
} .quote-icon {
width: 60px;
height: 60px;
background: var(--accent-gradient);
color: var(--text-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
position: absolute;
top: -30px;
left: 30px;
box-shadow: 0 10px 20px rgba(77, 156, 255, 0.3);
z-index: 10;
transform: translateZ(20px);
transition: var(--transition-bounce);
}
.testimonial-card-wrapper:hover .quote-icon {
transform: translateZ(30px) scale(1.1);
box-shadow: 0 15px 30px rgba(77, 156, 255, 0.4);
} .testimonial-card {
background: var(--glass-bg);
border-radius: var(--border-radius-lg);
overflow: hidden;
padding: 40px 30px 30px;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-normal);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-smooth);
transform: translateY(0) rotateX(0);
height: 100%;
} .testimonial-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--border-radius-lg);
padding: 1px;
background: linear-gradient(135deg, transparent, var(--accent-blue), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
}
.testimonial-card-wrapper:hover .testimonial-card {
transform: translateY(-10px) rotateX(5deg);
box-shadow: var(--shadow-blue), var(--shadow-intense);
}
.testimonial-card-wrapper:hover .testimonial-card::before {
opacity: 0.6;
} .testimonial-content {
position: relative;
z-index: 1;
} .testimonial-text-wrapper {
margin-bottom: 25px;
position: relative;
perspective: 800px;
}
.testimonial-text-wrapper p {
background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(77, 156, 255, 0.85));
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
font-size: 18px;
line-height: 1.8;
font-style: italic;
margin: 0;
position: relative;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
letter-spacing: 0.3px;
transform-style: preserve-3d;
animation: textGlow 3s ease-in-out infinite alternate;
}
@keyframes textGlow {
0%, 100% {
text-shadow: 0 0 2px rgba(77, 156, 255, 0.2);
}
50% {
text-shadow: 0 0 10px rgba(77, 156, 255, 0.4);
}
}
.testimonial-text-wrapper::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 60px;
height: 2px;
background: var(--accent-gradient);
border-radius: 2px;
} .testimonial-author {
display: flex;
flex-direction: column;
position: relative;
padding-left: 5px;
}
.testimonial-author::before {
content: '';
position: absolute;
left: -10px;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent-gradient);
border-radius: 4px;
box-shadow: 0 0 10px var(--accent-blue);
animation: pulseVertical 2s ease-in-out infinite;
}
.author-name {
font-size: 18px;
font-weight: 700;
background: linear-gradient(to right, var(--text-white), var(--accent-blue));
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
margin-bottom: 5px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 16px;
}
.author-location {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
display: inline-block;
}
.author-location::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 1px;
background: var(--accent-blue);
transition: width 0.3s ease;
}
.testimonial-card:hover .author-location::after {
width: 100%;
}
@keyframes pulseVertical {
0%, 100% {
opacity: 0.6;
transform: scaleY(0.92);
}
50% {
opacity: 1;
transform: scaleY(1);
}
} @keyframes pulse {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
@keyframes shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
} @media (max-width: 992px) {
.testimonials-section {
padding: 80px 0;
}
.testimonials-section .section-title {
font-size: 36px;
}
.testimonial-card {
padding: 35px 25px 25px;
}
}
@media (max-width: 768px) {
.testimonials-section {
padding: 60px 0;
}
.testimonials-section .section-title {
font-size: 30px;
}
.testimonials-section .section-description {
font-size: 16px;
}
.testimonials-slider {
grid-template-columns: 1fr;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.quote-icon {
width: 50px;
height: 50px;
font-size: 20px;
top: -25px;
left: 25px;
}
.testimonial-card {
padding: 30px 20px 20px;
}
} @media (max-width: 576px) {
.testimonials-section {
padding: 50px 0;
}
.testimonials-section .section-title {
font-size: 26px;
}
.testimonials-section .section-description {
font-size: 15px;
}
.quote-icon {
width: 45px;
height: 45px;
font-size: 18px;
top: -22px;
left: 20px;
}
.testimonial-card-wrapper:hover .testimonial-card {
transform: translateY(-5px) rotateX(0);
}
.author-name {
font-size: 16px;
}
.author-location {
font-size: 13px;
}
}.shop-products-grid {
background: #10151c;
padding: 38px 0 48px 0;
}
.shop-products-grid > ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 34px 24px;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
background: none;
}
.shop-products-grid > ul.products > li {
background: #191f2a;
border-radius: 18px;
box-shadow: 0 8px 36px rgba(27,34,56,0.13), 0 1.5px 6px rgba(0,0,0,0.07);
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 0 24px 0;
transition: transform 0.22s, box-shadow 0.22s;
position: relative;
overflow: hidden;
min-width: 0;
border: none;
}
.shop-products-grid > ul.products > li:hover {
transform: translateY(-7px) scale(1.025);
box-shadow: 0 16px 44px rgba(27,34,56,0.19), 0 2px 10px rgba(0,0,0,0.11);
}
.shop-product-thumb {
background: linear-gradient(135deg, #232a39 60%, #181f2a 100%);
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.shop-product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
transition: transform 0.22s;
}
.shop-products-grid > ul.products > li:hover .shop-product-thumb img {
transform: scale(1.06) rotate(-1deg);
}
.shop-product-details {
padding: 18px 22px 0 22px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
justify-content: flex-end;
gap: 11px;
}
.shop-product-title {
font-size: 1.14rem;
color: #fff;
font-weight: 700;
margin: 0 0 7px 0;
letter-spacing: 0.01em;
line-height: 1.25;
}
.shop-product-title a {
color: inherit;
text-decoration: none;
transition: color 0.18s;
}
.shop-product-title a:hover {
color: #ffb800;
}
.shop-product-price {
color: #ffb800;
font-size: 1.07rem;
font-weight: 600;
margin-bottom: 4px;
}
.shop-product-cart-btn .button,
.woocommerce ul.products li.product .button {
background: linear-gradient(90deg,#ffb800 30%, #ff7a00 100%);
color: #fff;
border: none;
border-radius: 9px;
padding: 11px 0;
font-size: 1.05rem;
font-weight: 700;
margin-top: 8px;
box-shadow: 0 2px 10px rgba(255,186,0,0.07);
transition: background 0.18s, transform 0.18s;
width: 100%;
cursor: pointer;
}
.shop-product-cart-btn .button:hover,
.woocommerce ul.products li.product .button:hover {
background: linear-gradient(90deg,#ff7a00 10%, #ffb800 100%);
transform: translateY(-2px) scale(1.04);
}
.shop-product-details-btn {
display: inline-flex;
align-items: center;
gap: 7px;
background: #232a39;
color: #fff;
border-radius: 7px;
padding: 7px 17px 7px 15px;
margin-top: 8px;
font-size: 0.97rem;
font-weight: 600;
text-decoration: none;
transition: background 0.16s, color 0.16s, transform 0.18s;
border: none;
box-shadow: 0 1px 5px rgba(27,34,56,0.09);
}
.shop-product-details-btn:hover {
background: #ffb800;
color: #191f2a;
transform: translateY(-2px) scale(1.03);
}
@media (max-width: 991px) {
.shop-products-grid > ul.products {
grid-template-columns: repeat(2, 1fr);
gap: 18px 8px;
}
}
@media (max-width: 600px) {
.shop-products-grid > ul.products {
grid-template-columns: 1fr;
gap: 12px 0;
}
.shop-product-details {
padding: 14px 10px 0 10px;
}
}@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Cairo:wght@400;700;900&display=swap");  .shop-banner {
background: linear-gradient(120deg,#010100 60%,#28291F 100%);
padding: 46px 0 32px 0;
margin-bottom: 0;
border-bottom: 2px solid #A9B187;
}
.shop-banner-flex {
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
}
.shop-banner-content {
flex: 1 1 350px;
}
.shop-banner-img {
flex: 0 0 350px;
display: flex;
align-items: center;
justify-content: center;
}
.shop-title {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
letter-spacing: -1px;
text-shadow: 0 2px 12px #0003;
}
.shop-desc {
font-size: 1.2rem;
color: #b8b8b8;
margin-bottom: 0;
} .shop-products-area {
margin-top: 28px;
margin-bottom: 40px;
}
.shop-flex {
display: flex;
gap: 38px;
}
.shop-sidebar {
background: #010100;
border-radius: 18px;
box-shadow: 0 4px 32px rgba(0,0,0,0.13);
padding: 36px 28px 32px 28px;
min-width: 270px;
max-width: 340px;
width: 100%;
margin-bottom: 32px;
color: #fff;
position: relative;
transition: box-shadow 0.2s, border 0.2s;
}
.shop-sidebar h3 {
color: #A9B187;
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 28px;
letter-spacing: 1.2px;
text-align: right;
}
.shop-sidebar .widget, .shop-sidebar .woocommerce-widget-layered-nav, .shop-sidebar .woocommerce-widget-price-filter {
margin-bottom: 24px;
background: #28291F;
border-radius: 12px;
padding: 18px 14px 12px 14px;
box-shadow: 0 2px 16px rgba(0,0,0,0.09);
}
.shop-sidebar .widget-title, .shop-sidebar .woocommerce-widget-title {
color: #fff;
font-size: 1.09rem;
font-weight: 700;
margin-bottom: 12px;
}
.shop-sidebar ul, .shop-sidebar li {
list-style: none;
padding: 0;
margin: 0;
}
.shop-sidebar li {
margin-bottom: 10px;
}
.shop-sidebar a {
color: #DFE3CD;
font-weight: 600;
border-radius: 7px;
padding: 6px 10px;
display: block;
transition: background 0.18s, color 0.18s;
text-decoration: none;
}
.shop-sidebar a:hover, .shop-sidebar a:focus {
background: #474B3D;
color: #A9B187;
}
.shop-sidebar .price_slider_wrapper {
margin-top: 18px;
}
.shop-sidebar .ui-slider {
background: #474B3D;
border-radius: 8px;
height: 6px;
}
.shop-sidebar .ui-slider-handle {
background: #ffb800;
border-radius: 50%;
width: 18px;
height: 18px;
top: -6px;
border: 3px solid #fff;
box-shadow: 0 2px 8px #0002;
}
.shop-sidebar .ui-slider-range {
background: linear-gradient(90deg,#A9B187 0%,#8A916D 100%);
border-radius: 8px;
}
.shop-sidebar .price_label {
color: #fff;
font-weight: 700;
margin-top: 8px;
display: block;
}
@media (max-width: 991px) {
.shop-sidebar {
max-width: 100%;
min-width: 0;
padding: 22px 10px 16px 10px;
}
}
.shop-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px 22px;
width: 100%;
background: none;
align-items: stretch;
justify-items: center;
margin: 0 auto;
padding-bottom: 20px;
box-sizing: border-box;
min-height: 300px;
}
@media (max-width: 1100px) {
.shop-products-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px 10px;
}
}
@media (max-width: 700px) {
.shop-products-grid {
grid-template-columns: 1fr 1fr;
gap: 12px 6px;
}
}
@media (max-width: 500px) {
.shop-products-grid {
grid-template-columns: 1fr;
gap: 10px 0;
padding-left: 4px;
padding-right: 4px;
}
} body.woocommerce-shop,
.woocommerce-page {
font-family: 'Montserrat', 'Cairo', Arial, Tahoma, sans-serif !important;
background: linear-gradient(120deg, #010100 0%, #28291F 100%) !important;
}
.woocommerce .shop-banner, .woocommerce .shop-title {
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-weight: 800;
font-size: 2.8rem;
letter-spacing: -1.5px;
color: #fff;
background: linear-gradient(90deg, #A9B187 0%, #8A916D 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin-bottom: 16px;
text-shadow: 0 6px 32px #0005, 0 1px 0 #a1613f;
}
.woocommerce .shop-products-grid, .woocommerce ul.products {
gap: 38px 28px !important;
margin-top: 32px;
}
.woocommerce ul.products li.product, .shop-product-card {
background: rgba(255,255,255,0.02) !important;
border-radius: 22px !important;
box-shadow: 0 8px 36px 0 rgba(230,103,34,0.10), 0 2px 12px 0 rgba(0,0,0,0.12) !important;
padding: 24px 18px 26px 18px !important;
border: 2.5px solid #232b36 !important;
min-width: 0;
min-height: 370px;
max-width: 370px;
width: 100%;
transition: box-shadow 0.25s, transform 0.18s;
position: relative;
overflow: hidden;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
cursor: pointer;
}
.woocommerce ul.products li.product:hover, .shop-product-card:hover {
box-shadow: 0 16px 48px 0 rgba(230,103,34,0.20), 0 6px 32px 0 rgba(0,0,0,0.16) !important;
transform: translateY(-10px) scale(1.03);
border-color: #e67e22 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-size: 1.35rem;
font-weight: 800;
color: #fff !important;
margin: 18px 0 10px 0;
text-align: center;
letter-spacing: 0.01em;
text-shadow: 0 3px 14px #0005, 0 1px 0 #a1613f;
border-bottom: none !important;
transition: color 0.18s;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
color: #e67e22 !important;
}
.woocommerce ul.products li.product img {
width: 100%;
max-width: 260px;
height: 210px;
border-radius: 18px;
box-shadow: 0 8px 36px rgba(161,97,63,0.13), 0 2px 12px rgba(0,0,0,0.10);
object-fit: cover;
background: linear-gradient(120deg,#232b36 60%,#18212b 100%);
border: 2.5px solid #232b36;
margin-bottom: 14px;
transition: transform 0.22s cubic-bezier(.4,2,.6,1), box-shadow 0.22s;
}
.woocommerce ul.products li.product img:hover {
transform: scale(1.06) rotate(-2deg);
box-shadow: 0 16px 48px rgba(230,103,34,0.13), 0 8px 32px rgba(0,0,0,0.14);
z-index: 2;
border-color: #e67e22;
}
.woocommerce ul.products li.product .price {
color: #e67e22;
font-size: 1.19rem;
font-weight: 700;
margin-bottom: 12px;
text-align: center;
text-shadow: 0 2px 12px #0003;
}
.woocommerce ul.products li.product .button {
background: linear-gradient(90deg, #e67e22 0%, #a1613f 100%) !important;
color: #fff !important;
border-radius: 20px !important;
font-size: 1.13em;
font-weight: 800;
padding: 13px 0 !important;
width: 100%;
margin-top: 14px;
box-shadow: 0 2px 14px #a1613f22;
border: none !important;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background 0.18s, transform 0.13s;
}
.woocommerce ul.products li.product .button:hover {
background: linear-gradient(90deg, #a1613f 0%, #e67e22 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.04);
}
.woocommerce .shop-sidebar, .woocommerce .widget, .woocommerce .widget-area {
background: rgba(20,30,48,0.93) !important;
border-radius: 16px !important;
box-shadow: 0 4px 22px #0004;
padding: 28px 18px 18px 18px !important;
color: #fff !important;
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
}
.woocommerce .shop-sidebar h3, .woocommerce .shop-sidebar .widgettitle, .woocommerce .shop-sidebar .widget-title {
font-size: 1.18rem;
color: #e67e22;
font-weight: 900;
margin-bottom: 18px;
letter-spacing: 0.5px;
text-shadow: 0 3px 14px #0003, 0 1px 0 #a1613f;
border-bottom: 2px solid #e67e22;
padding-bottom: 7px;
background: none;
} .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce .product .product_title, .woocommerce-page .product .product_title {
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-size: 1.6rem;
font-weight: 900;
background: linear-gradient(90deg, #e67e22 0%, #ffb347 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
margin-bottom: 8px;
text-shadow: 0 3px 14px #0004, 0 1px 0 #fff3;
transition: background 0.18s, color 0.18s;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
background: linear-gradient(90deg, #ffb347 0%, #e67e22 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
display: block;
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-size: 1.19rem;
font-weight: 800;
color: #e67e22;
background: linear-gradient(90deg, #e67e22 0%, #ffb347 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
text-align: center;
text-shadow: 0 2px 12px #0003;
letter-spacing: 0.03em;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
color: #e74c3c !important;
opacity: 0.62;
text-decoration: line-through;
font-weight: 600;
margin-right: 7px;
text-shadow: none;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
color: #27ae60 !important;
background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
text-shadow: 0 2px 12px #0002;
padding-left: 2px;
} .woocommerce ul.products, .woocommerce-page ul.products {
display: flex;
flex-wrap: wrap;
gap: 40px 32px;
justify-content: center;
align-items: stretch;
margin-top: 38px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
background: linear-gradient(145deg, #232b36 65%, #1a2027 100%) !important;
border-radius: 24px !important;
box-shadow: 0 12px 40px 0 rgba(230,103,34,0.10), 0 2px 12px 0 rgba(0,0,0,0.12) !important;
padding: 28px 18px 32px 18px !important;
border: 2.5px solid #232b36 !important;
min-width: 0;
min-height: 410px;
max-width: 370px;
width: 100%;
transition: box-shadow 0.25s, transform 0.18s, border-color 0.18s;
position: relative;
overflow: hidden;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
cursor: pointer;
margin: 0 auto;
}
.woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover {
box-shadow: 0 24px 64px 0 rgba(230,103,34,0.20), 0 8px 32px 0 rgba(0,0,0,0.16) !important;
transform: translateY(-12px) scale(1.035);
border-color: #e67e22 !important;
z-index: 3;
}
.woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img {
width: 100%;
max-width: 250px;
height: 190px;
border-radius: 20px;
box-shadow: 0 8px 36px rgba(161,97,63,0.13), 0 2px 12px rgba(0,0,0,0.10);
object-fit: cover;
background: linear-gradient(120deg,#232b36 60%,#18212b 100%);
border: 2.5px solid #232b36;
margin-bottom: 18px;
margin-top: 6px;
transition: transform 0.22s cubic-bezier(.4,2,.6,1), box-shadow 0.22s, border-color 0.18s;
}
.woocommerce ul.products li.product img:hover, .woocommerce-page ul.products li.product img:hover {
transform: scale(1.09) rotate(-2deg);
box-shadow: 0 16px 48px rgba(230,103,34,0.13), 0 8px 32px rgba(0,0,0,0.14);
border-color: #e67e22;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-size: 1.45rem;
font-weight: 900;
background: linear-gradient(90deg, #e67e22 10%, #ffb347 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
margin-bottom: 10px;
margin-top: 0;
text-align: center;
text-shadow: 0 3px 14px #0004, 0 1px 0 #fff3;
border-bottom: none !important;
transition: background 0.18s, color 0.18s;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
background: linear-gradient(90deg, #ffb347 0%, #e67e22 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
display: block;
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-size: 1.13rem;
font-weight: 800;
color: #e67e22;
background: linear-gradient(90deg, #e67e22 0%, #ffb347 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
text-align: center;
text-shadow: 0 2px 12px #0003;
letter-spacing: 0.03em;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
color: #e74c3c !important;
opacity: 0.62;
text-decoration: line-through;
font-weight: 600;
margin-right: 6px;
text-shadow: none;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
color: #27ae60 !important;
background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
text-shadow: 0 2px 12px #0002;
padding-left: 2px;
}
.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
background: linear-gradient(90deg, #e67e22 0%, #a1613f 100%) !important;
color: #fff !important;
border-radius: 20px !important;
font-size: 1.13em;
font-weight: 800;
padding: 13px 0 !important;
width: 100%;
margin-top: 14px;
box-shadow: 0 2px 14px #a1613f22;
border: none !important;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background 0.18s, transform 0.13s;
}
.woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover {
background: linear-gradient(90deg, #a1613f 0%, #e67e22 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.04);
}
.woocommerce .shop-sidebar, .woocommerce .widget, .woocommerce .widget-area {
background: rgba(35, 43, 54, 0.93) !important;
border-radius: 16px !important;
box-shadow: 0 4px 22px #0004;
padding: 28px 18px 18px 18px !important;
color: #fff !important;
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
}
.woocommerce .shop-sidebar h3, .woocommerce .shop-sidebar .widgettitle, .woocommerce .shop-sidebar .widget-title {
font-size: 1.18rem;
color: #e67e22;
font-weight: 900;
margin-bottom: 18px;
letter-spacing: 0.5px;
text-shadow: 0 3px 14px #0003, 0 1px 0 #a1613f;
border-bottom: 2px solid #e67e22;
padding-bottom: 7px;
background: none;
} .woocommerce a,
.woocommerce-page a,
.shop-products-grid a,
.shop-sidebar a,
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .price a,
.woocommerce-breadcrumb a,
.woocommerce-tabs .wc-tabs li a,
.woocommerce-pagination a,
.woocommerce-widget-layered-nav-list a,
.woocommerce-widget-product-categories a,
.woocommerce-widget-product-tag-cloud a,
.woocommerce-cart .product-name a,
.woocommerce-checkout .product-name a {
color: #e67e22 !important;
text-decoration: none !important;
font-weight: 700;
transition: color 0.18s, box-shadow 0.18s;
border-radius: 6px;
box-shadow: 0 2px 16px #a1613f18;
background: none;
}
.woocommerce a:hover,
.woocommerce-page a:hover,
.shop-products-grid a:hover,
.shop-sidebar a:hover,
.woocommerce ul.products li.product a:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .price a:hover,
.woocommerce-breadcrumb a:hover,
.woocommerce-tabs .wc-tabs li a:hover,
.woocommerce-pagination a:hover,
.woocommerce-widget-layered-nav-list a:hover,
.woocommerce-widget-product-categories a:hover,
.woocommerce-widget-product-tag-cloud a:hover,
.woocommerce-cart .product-name a:hover,
.woocommerce-checkout .product-name a:hover {
color: #ffb347 !important;
background: linear-gradient(90deg, #e67e22 0%, #a1613f 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
box-shadow: 0 4px 32px #e67e2222;
} .woocommerce a:focus, .woocommerce-page a:focus, .woocommerce button:focus, .woocommerce .button:focus {
outline: none !important;
box-shadow: 0 0 0 3px #e67e22cc !important;
} .woocommerce ul.products li.product:hover, .shop-product-card:hover {
box-shadow: 0 12px 48px 0 rgba(230,103,34,0.20), 0 4px 32px 0 rgba(0,0,0,0.16) !important;
transform: translateY(-4px) scale(1.025);
border: 2px solid #e67e22 !important;
} .woocommerce .button, .woocommerce-page .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce input[type="submit"], .woocommerce-cart .checkout-button, .woocommerce #place_order {
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%) !important;
color: #fff !important;
border-radius: 12px !important;
border: none !important;
font-weight: 800;
font-size: 1.06rem;
padding: 13px 34px !important;
box-shadow: 0 4px 24px #e67e2222, 0 1px 8px #0002;
transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
text-decoration: none !important;
}
.woocommerce .button:hover, .woocommerce-page .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce input[type="submit"]:hover, .woocommerce-cart .checkout-button:hover, .woocommerce #place_order:hover {
background: linear-gradient(90deg, #ffb347 0%, #e67e22 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.04);
} .woocommerce-breadcrumb {
background: none !important;
color: #b8b8b8 !important;
font-size: 0.97rem;
font-weight: 600;
margin: 0 0 18px 0;
padding: 0;
}
.woocommerce-breadcrumb a {
color: #e67e22 !important;
text-decoration: none !important;
font-weight: 700;
}
.woocommerce-breadcrumb a:hover {
color: #ffb347 !important;
} a, a:visited {
color: #e67e22 !important;
text-decoration: none !important;
transition: color 0.18s;
}
a:hover, a:focus {
color: #ffb347 !important;
text-decoration: underline;
} .woocommerce-pagination ul.page-numbers li a, .woocommerce-pagination ul.page-numbers li span {
background: #232b36;
color: #e67e22 !important;
border-radius: 8px;
font-weight: 800;
padding: 8px 18px;
margin: 0 5px;
border: 2px solid #a1613f;
transition: background 0.18s, color 0.18s, border 0.18s;
}
.woocommerce-pagination ul.page-numbers li a:hover, .woocommerce-pagination ul.page-numbers li span.current {
background: linear-gradient(90deg, #e67e22 0%, #a1613f 100%) !important;
color: #fff !important;
border-color: #e67e22;
} .shop-sidebar .widget a, .shop-sidebar .widget-title a, .shop-sidebar .woocommerce-widget-layered-nav-list a, .shop-sidebar .woocommerce-widget-product-categories a {
color: #e67e22 !important;
font-weight: 800;
text-decoration: none !important;
}
.shop-sidebar .widget a:hover, .shop-sidebar .widget-title a:hover, .shop-sidebar .woocommerce-widget-layered-nav-list a:hover, .shop-sidebar .woocommerce-widget-product-categories a:hover {
color: #ffb347 !important;
} a, a:visited, a:hover, a:focus {
text-decoration: none !important;
} .dark-product-page, .woocommerce-single-product-page {
background: #101a24;
}
.single-product-flex {
display: flex;
gap: 48px;
align-items: flex-start;
justify-content: center;
margin-top: 32px;
margin-bottom: 24px;
}
.single-product-gallery {
background: #1b232d;
border-radius: 20px;
box-shadow: 0 2px 24px rgba(0,0,0,0.22);
padding: 18px 18px 18px 18px;
min-width: 340px;
max-width: 420px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.single-product-gallery img {
border-radius: 16px;
max-width: 100%;
box-shadow: 0 2px 14px rgba(0,0,0,0.15);
border: 2px solid #273447;
background: #232b36;
}
.single-product-gallery .badge {
left: 24px;
top: 24px;
font-size: 1em;
}
.single-product-info {
flex: 1 1 320px;
background: #18212b;
border-radius: 18px;
box-shadow: 0 2px 22px rgba(0,0,0,0.16);
padding: 32px 32px 24px 32px;
color: #fff;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 320px;
max-width: 540px;
}
.product_title.entry-title {
font-size: 2.1rem;
font-weight: 800;
color: #fff;
margin-bottom: 6px;
letter-spacing: -1px;
text-shadow: 0 2px 8px #0006;
}
.single-product-price {
font-size: 1.35rem;
color: #e67e22;
font-weight: 700;
margin-bottom: 12px;
text-shadow: 0 1px 6px #0003;
}
.single-product-shortdesc {
color: #b8b8b8;
font-size: 1.1rem;
margin-bottom: 10px;
}
.single-product-info .cart {
margin: 16px 0 0 0;
display: flex;
gap: 12px;
align-items: center;
}
.single-product-info .quantity input {
background: #232b36;
color: #fff;
border-radius: 8px;
border: 1.5px solid #273447;
font-size: 1.1em;
width: 52px;
text-align: center;
padding: 7px 0;
}
.single-product-info .single_add_to_cart_button.dark-btn {
background: #a1613f;
color: #fff;
font-weight: 700;
font-size: 1.13em;
border-radius: 8px;
padding: 10px 30px;
border: none;
box-shadow: 0 1px 8px rgba(161,97,63,0.13);
transition: background 0.2s;
display: flex;
align-items: center;
gap: 7px;
}
.single-product-info .single_add_to_cart_button.dark-btn:hover {
background: #e67e22;
}
.single-product-meta {
font-size: 0.97em;
color: #b8b8b8;
margin-top: 18px;
}
.single-product-meta .posted_in {
color: #a1613f;
font-weight: 600;
}
.single-product-details {
background: #1b232d;
border-radius: 18px;
box-shadow: 0 2px 18px rgba(0,0,0,0.13);
margin-top: 32px;
padding: 32px 24px;
}
.single-product-tabs {
margin-bottom: 40px;
}
.woocommerce-tabs .wc-tabs {
display: flex;
gap: 12px;
background: transparent;
border-radius: 18px 18px 0 0;
padding: 0 0 12px 0;
justify-content: flex-start;
margin-bottom: 0;
border: none;
}
.woocommerce-tabs .wc-tabs li {
background: linear-gradient(90deg, #232b36 60%, #1b232d 100%);
color: #fff;
border: none;
border-radius: 16px 16px 0 0;
margin: 0;
font-weight: 800;
font-size: 1.13rem;
padding: 10px 34px 10px 34px;
box-shadow: 0 2px 12px #0002;
transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.13s;
cursor: pointer;
position: relative;
outline: none;
border-bottom: 3px solid transparent;
letter-spacing: 0.01em;
z-index: 2;
}
.woocommerce-tabs .wc-tabs li:hover {
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
color: #fff;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 6px 24px #e67e2233;
}
.woocommerce-tabs .wc-tabs li.active, .woocommerce-tabs .wc-tabs li.ui-state-active {
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%);
color: #232526;
border-bottom: 3px solid #ffb347;
box-shadow: 0 8px 32px #e67e2233;
z-index: 3;
transform: scale(1.07) translateY(-3px);
}
.woocommerce-tabs .wc-tabs li a {
color: inherit !important;
text-decoration: none !important;
font-weight: inherit;
font-size: inherit;
padding: 0;
}
@media (max-width: 700px) {
.woocommerce-tabs .wc-tabs {
gap: 4px;
flex-wrap: wrap;
padding: 0 0 6px 0;
}
.woocommerce-tabs .wc-tabs li {
font-size: 0.98rem;
padding: 8px 12px 8px 12px;
}
}
.woocommerce-tabs .panel { }
.woocommerce-Reviews {
background: transparent;
border-radius: 18px;
box-shadow: none;
padding: 0;
margin-top: 0;
}
.woocommerce-Reviews h2, .woocommerce-Reviews h3 {
color: #fff;
font-size: 2rem;
font-weight: 800;
margin-bottom: 16px;
letter-spacing: 0.01em;
}
.commentlist {
list-style: none;
padding: 0;
margin: 0 0 22px 0;
}
.commentlist li {
background: #232b36;
border-radius: 16px;
box-shadow: 0 2px 16px #0002;
padding: 18px 18px 14px 18px;
margin-bottom: 18px;
color: #fff;
position: relative;
}
.commentlist .star-rating {
color: #ffb347;
font-size: 1.3rem;
margin-bottom: 8px;
}
.commentlist .description {
color: #eee;
font-size: 1.08rem;
}
.woocommerce-Reviews .comment-form {
background: #1b232d;
border-radius: 16px;
box-shadow: 0 2px 18px #0002;
padding: 26px 18px 18px 18px;
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.woocommerce-Reviews .comment-form label {
color: #ffb347;
font-weight: 700;
font-size: 1.13rem;
margin-bottom: 4px;
}
.woocommerce-Reviews .comment-form input[type="text"],
.woocommerce-Reviews .comment-form input[type="email"],
.woocommerce-Reviews .comment-form textarea {
background: #232b36;
color: #fff;
border-radius: 12px;
border: 2px solid #232b36;
font-size: 1.13rem;
padding: 12px 14px;
margin-bottom: 8px;
transition: border 0.18s, box-shadow 0.18s;
outline: none;
}
.woocommerce-Reviews .comment-form input[type="text"]:focus,
.woocommerce-Reviews .comment-form input[type="email"]:focus,
.woocommerce-Reviews .comment-form textarea:focus {
border: 2px solid #ffb347;
box-shadow: 0 2px 12px #ffb34733;
}
.woocommerce-Reviews .comment-form .stars {
display: flex;
gap: 6px;
margin: 8px 0 14px 0;
}
.woocommerce-Reviews .comment-form .stars a {
font-size: 2.1rem !important;
color: #b8b8b8;
text-decoration: none !important;
transition: color 0.18s, transform 0.13s;
margin: 0 2px;
display: inline-block;
}
.woocommerce-Reviews .comment-form .stars a:hover,
.woocommerce-Reviews .comment-form .stars a.active {
color: #ffb347 !important;
transform: scale(1.18) rotate(-7deg);
}
.woocommerce-Reviews .comment-form .stars a:before {
font-family: 'Font Awesome 5 Free';
content: '\f005'; font-weight: 900;
font-size: 1.05em;
color: #ffb347;
margin-left: 2px;
margin-right: 6px;
opacity: 0.88;
transition: color 0.18s;
}
.woocommerce-Reviews .comment-form input[type="submit"],
.woocommerce-Reviews .comment-form button[type="submit"] {
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%);
color: #fff;
border-radius: 50px;
border: none;
padding: 15px 44px;
font-size: 1.19rem;
font-weight: 900;
box-shadow: 0 4px 18px #e67e2233;
cursor: pointer;
transition: background 0.18s, transform 0.13s;
margin-top: 10px;
}
.woocommerce-Reviews .comment-form input[type="submit"]:hover,
.woocommerce-Reviews .comment-form button[type="submit"]:hover {
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
color: #fff;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 32px #e67e2233;
}
@media (max-width: 700px) {
.woocommerce-Reviews .comment-form {
padding: 10px 3px 8px 3px;
}
.woocommerce-Reviews h2, .woocommerce-Reviews h3 {
font-size: 1.3rem;
}
.commentlist li {
padding: 12px 7px 8px 7px;
}
}
.upsell-title {
color: #a1613f;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 18px;
margin-top: 12px;
}
.single-product-upsell {
margin-top: 24px;
}
@media (max-width: 900px) {
.single-product-flex { flex-direction: column; gap: 28px; }
.single-product-info, .single-product-gallery { max-width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
.single-product-info, .single-product-gallery { padding: 10px 6px; }
.single-product-details { padding: 14px 3px; }
} .dark-cart-page, .woocommerce-cart-page, .dark-checkout-page, .woocommerce-checkout-page {
background: #101a24;
}
.cart-container-dark, .checkout-container-dark {
background: #1b232d;
border-radius: 22px;
box-shadow: 0 2px 32px rgba(0,0,0,0.18);
padding: 40px 28px 32px 28px;
margin-top: 38px;
margin-bottom: 38px;
}
.cart-title, .checkout-title {
color: #fff;
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 32px;
text-align: center;
letter-spacing: -1px;
text-shadow: 0 2px 12px #0003;
}
.woocommerce-cart-form, .woocommerce-checkout form {
background: #18212b;
border-radius: 16px;
padding: 30px 18px;
box-shadow: 0 2px 18px rgba(0,0,0,0.13);
}
.woocommerce-cart-form table.shop_table, .woocommerce-checkout-review-order-table, .woocommerce-checkout-payment {
background: #232b36;
color: #fff;
border-radius: 12px;
box-shadow: 0 1px 8px rgba(0,0,0,0.12);
border: none;
}
.woocommerce-cart-form table.shop_table th, .woocommerce-cart-form table.shop_table td, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td {
color: #fff;
border: none;
background: transparent;
}
.woocommerce-cart-form .product-name a, .woocommerce-checkout-review-order-table .product-name a {
color: #a1613f;
font-weight: 700;
}
.woocommerce-cart-form .product-remove a.remove {
color: #e67e22 !important;
background: #232b36;
border-radius: 50%;
transition: background 0.2s;
}
.woocommerce-cart-form .product-remove a.remove:hover {
background: #a1613f;
color: #fff !important;
}
.woocommerce-cart-form .actions .coupon input.input-text {
background: #232b36;
color: #fff;
border-radius: 8px;
border: 1.5px solid #273447;
font-size: 1em;
padding: 7px 10px;
margin-right: 8px;
width: 74px;
text-align: center;
box-shadow: 0 1px 6px #a1613f11;
outline: none;
transition: border 0.18s, box-shadow 0.18s;
}
.woocommerce-cart-form .actions .button, .woocommerce-checkout .button, .woocommerce #place_order {
background: #a1613f;
color: #fff;
font-weight: 700;
font-size: 1.13em;
border-radius: 8px;
padding: 10px 30px;
border: none;
box-shadow: 0 1px 8px rgba(161,97,63,0.13);
transition: background 0.2s;
}
.woocommerce-cart-form .actions .button:hover, .woocommerce-checkout .button:hover, .woocommerce #place_order:hover {
background: #e67e22;
}
.cart_totals, .woocommerce-checkout-review-order {
background: #232b36;
border-radius: 14px;
padding: 24px 18px;
color: #fff;
margin-top: 32px;
box-shadow: 0 1px 12px rgba(0,0,0,0.10);
}
.cart_totals h2, .woocommerce-checkout-review-order h3 {
color: #a1613f;
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 18px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper select, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper textarea {
background: #232b36;
color: #fff;
border-radius: 8px;
border: 1.5px solid #273447;
font-size: 1em;
padding: 8px 10px;
margin-bottom: 12px;
}
.woocommerce-checkout .woocommerce-billing-fields label, .woocommerce-checkout .woocommerce-additional-fields label {
color: #fff;
font-weight: 600;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
color: #fff;
background: transparent;
}
.woocommerce-message, .woocommerce-error, .woocommerce-info {
background: #232b36;
color: #fff;
border-radius: 8px;
border: 1.5px solid #a1613f;
box-shadow: 0 1px 8px rgba(0,0,0,0.10);
margin-bottom: 16px;
}
@media (max-width: 900px) {
.cart-container-dark, .checkout-container-dark { padding: 14px 3px; }
}
body.woocommerce-page .site {
background: #fff;
} .topbar, .main-nav, .main-nav ul, .main-nav ul li, .main-nav ul li a, .header-right, .logo a, .logo {
background: unset !important;
color: unset !important;
box-shadow: unset !important;
}
.topbar {
background: var(--global-palette3) !important;
border-top: 4px solid var(--global-palette1) !important;
box-shadow: 0 2px 16px rgba(169, 177, 135, 0.1);
}
.main-nav ul li a {
color: var(--global-palette1) !important;
}
.main-nav ul li a:hover {
color: var(--global-palette3) !important;
}
.logo a, .logo {
color: var(--global-palette1) !important;
}
.header-right {
color: var(--global-palette1) !important;
} .woocommerce .main-nav ul li a,
.woocommerce-page .main-nav ul li a {
color: var(--global-palette1) !important;
background: none !important;
font-weight: 400 !important;
box-shadow: none !important;
border-radius: 0 !important;
-webkit-text-fill-color: unset !important;
text-fill-color: unset !important;
}
.woocommerce .main-nav ul li a:hover,
.woocommerce-page .main-nav ul li a:hover {
color: var(--global-palette3) !important;
background: none !important;
-webkit-text-fill-color: unset !important;
text-fill-color: unset !important;
} .woocommerce ul.products {
display: flex;
flex-wrap: wrap;
gap: 32px 2.5%;
justify-content: flex-start;
padding: 0;
}
.woocommerce ul.products li.product {
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 10px;
padding: 18px 14px 22px 14px;
margin: 0 0 24px 0;
box-shadow: 0 2px 12px rgba(0,0,0,0.03);
transition: box-shadow 0.2s, transform 0.2s;
width: 22%;
min-width: 240px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.woocommerce ul.products li.product:hover {
box-shadow: 0 6px 32px rgba(0,0,0,0.10);
transform: translateY(-6px) scale(1.01);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 1.1rem;
font-weight: 700;
color: #222;
margin: 12px 0 8px 0;
text-align: center;
}
.woocommerce ul.products li.product .price {
color: #e67e22;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
}
.woocommerce ul.products li.product .button {
margin-top: auto;
width: 100%;
} .woocommerce .woocommerce-breadcrumb {
color: #888;
margin: 16px 0 28px 0;
font-size: 0.97rem;
} .woocommerce div.product {
display: flex;
gap: 40px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.05);
padding: 28px 24px;
margin-bottom: 32px;
}
.woocommerce div.product .product_title {
color: #222;
font-weight: 700;
font-size: 2rem;
margin-bottom: 12px;
}
.woocommerce div.product .price {
color: #e67e22;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 18px;
}
.woocommerce div.product .woocommerce-tabs {
margin-top: 32px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
border-bottom: 2px solid #eee;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: none;
background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #e67e22;
border-bottom: 2px solid #e67e22;
}  .wc-block-components-button.wc-block-cart__submit-button.contained {
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%);
color: #fff !important;
border-radius: 50px;
border: none;
padding: 20px 60px;
font-size: 1.38rem;
font-family: 'Cairo', 'Tajawal', 'Montserrat', Arial, sans-serif;
font-weight: 900;
box-shadow: 0 8px 30px #e67e2233;
cursor: pointer;
transition: background 0.18s, transform 0.13s, box-shadow 0.18s, padding 0.18s;
margin: 28px auto 18px auto;
display: flex;
align-items: center;
gap: 22px;
position: relative;
text-decoration: none !important;
outline: none;
text-align: center;
min-width: 320px;
max-width: 98vw;
}
.wc-block-components-button__text {
display: inline-block;
font-size: 1.18em;
font-weight: 900;
letter-spacing: 0.01em;
line-height: 1.1;
vertical-align: middle;
}
.wc-block-components-button.wc-block-cart__submit-button.contained:after {
content: '\f061';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.25em;
margin-left: 0;
display: inline-block;
vertical-align: middle;
height: 1em;
line-height: 1;
transition: margin-left 0.18s, color 0.18s, transform 0.18s;
color: #fff;
align-self: center;
}
.wc-block-components-button.wc-block-cart__submit-button.contained:hover,
.wc-block-components-button.wc-block-cart__submit-button.contained:focus {
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
transform: translateY(-2px) scale(1.04);
box-shadow: 0 14px 36px #e67e2255;
padding-right: 80px;
}
.wc-block-components-button.wc-block-cart__submit-button.contained:hover:after,
.wc-block-components-button.wc-block-cart__submit-button.contained:focus:after {
margin-left: 12px;
color: #ffb347;
transform: translateX(10px) scale(1.15);
}
@media (max-width: 700px) {
.wc-block-components-button.wc-block-cart__submit-button.contained {
font-size: 1rem;
padding: 12px 20px 12px 18px;
min-width: 140px;
gap: 10px;
}
.wc-block-components-button__text {
font-size: 1em;
}
}
.wc-block-components-button.wc-block-cart__submit-button.contained:after {
content: '\f061';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.2em;
margin-left: 18px;
transition: margin-left 0.18s, color 0.18s;
color: #fff;
}
.wc-block-components-button.wc-block-cart__submit-button.contained:hover,
.wc-block-components-button.wc-block-cart__submit-button.contained:focus {
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
color: #fff;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 12px 32px #e67e2255;
padding-right: 72px;
}
.wc-block-components-button.wc-block-cart__submit-button.contained:hover:after,
.wc-block-components-button.wc-block-cart__submit-button.contained:focus:after {
margin-left: 32px;
color: #ffb347;
}
@media (max-width: 700px) {
.wc-block-components-button.wc-block-cart__submit-button.contained {
font-size: 1rem;
padding: 12px 20px 12px 18px;
}
} .wc-block-components-product-name {
font-size: 1.45rem;
font-weight: 900;
background: linear-gradient(90deg, #e67e22 40%, #a1613f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
border-radius: 14px;
padding: 5px 18px 5px 0;
margin: 0 0 6px 0;
box-shadow: 0 2px 12px #e67e2233;
letter-spacing: 0.01em;
transition: background 0.18s, box-shadow 0.18s, color 0.18s;
display: inline-block;
}
.wc-block-components-product-name:hover, .wc-block-components-product-name:focus {
-webkit-text-fill-color: #fff;
color: #fff;
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
box-shadow: 0 6px 22px #e67e2255;
}
@media (max-width: 700px) {
.wc-block-components-product-name {
font-size: 1.05rem;
padding: 4px 6px 4px 0;
}
}
.woocommerce-cart .cart-collaterals {
background: #232b36;
border-radius: 18px;
padding: 32px 22px;
margin-top: 32px;
box-shadow: 0 4px 22px rgba(0,0,0,0.10);
}
.woocommerce-cart table.shop_table {
border-radius: 22px;
background: rgba(35, 43, 54, 0.65);
backdrop-filter: blur(8px) saturate(120%);
box-shadow: 0 8px 40px 0 #0005;
overflow: hidden;
margin-bottom: 0;
color: #fff;
border: 1.5px solid #fff2;
position: relative;
}
.woocommerce-cart .cart_totals {
background: rgba(35, 43, 54, 0.7);
border-radius: 22px;
padding: 36px 26px;
color: #fff;
margin-top: 32px;
box-shadow: 0 8px 40px 0 #0005;
border: 1.5px solid #fff2;
backdrop-filter: blur(8px) saturate(120%);
position: relative;
}
.woocommerce-cart .cart_totals h2:before {
content: '\f07a';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #ffb347;
margin-left: 0;
margin-right: 12px;
font-size: 1.3em;
vertical-align: middle;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:after {
content: '\f061';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-left: 12px;
font-size: 1.1em;
vertical-align: middle;
transition: margin-left 0.18s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover:after {
margin-left: 22px;
}
.woocommerce-cart a.remove {
background: #ff3b3b;
color: #fff !important;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 2px 14px #ff3b3b33;
transition: background 0.18s, transform 0.13s;
border: none;
padding: 0;
position: relative;
outline: none;
text-decoration: none !important;
}
.woocommerce-cart a.remove:before {
content: '\f2ed';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.2em;
transition: color 0.13s, transform 0.18s;
}
.woocommerce-cart a.remove:hover {
background: #e60023;
transform: scale(1.15) rotate(-8deg);
}
.woocommerce-cart a.remove:hover:before {
color: #fff;
transform: rotate(-18deg) scale(1.2);
}
.woocommerce-cart table.shop_table tr {
border-bottom: 1.5px solid #fff1;
background: rgba(35, 43, 54, 0.72);
border-radius: 22px;
box-shadow: 0 2px 18px #0005;
transition: box-shadow 0.18s, transform 0.13s;
overflow: hidden;
}
.woocommerce-cart table.shop_table tr:hover {
box-shadow: 0 8px 40px #e67e2255, 0 2px 18px #0007;
transform: translateY(-4px) scale(1.012);
z-index: 2;
}
.woocommerce-cart table.shop_table .product-thumbnail img {
border-radius: 50%;
box-shadow: 0 2px 16px #0002;
width: 72px;
height: 72px;
object-fit: cover;
background: #232b36;
border: 2.5px solid #ffb347;
margin: 0 10px;
transition: box-shadow 0.18s, border 0.18s;
}
.woocommerce-cart table.shop_table .product-name a {
background: linear-gradient(90deg, #e67e22 40%, #a1613f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.22rem;
font-weight: 900;
letter-spacing: 0.01em;
text-decoration: none !important;
transition: color 0.18s, box-shadow 0.18s, background 0.18s;
border-radius: 12px;
padding: 4px 12px;
display: inline-block;
box-shadow: 0 2px 8px #e67e2222;
}
.woocommerce-cart table.shop_table .product-name a:hover, .woocommerce-cart table.shop_table .product-name a:focus {
-webkit-text-fill-color: #fff;
color: #fff;
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
box-shadow: 0 4px 16px #e67e2233;
text-shadow: 0 2px 10px #a1613f44;
}
.woocommerce-cart a.remove, .woocommerce-cart a.remove:visited {
background: #ff3b3b;
color: #fff !important;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 2px 14px #ff3b3b33;
transition: background 0.18s, transform 0.13s;
border: none;
padding: 0;
position: relative;
outline: none;
text-decoration: none !important;
}
.woocommerce-cart a.remove:before {
content: '\f2ed';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.2em;
transition: color 0.13s, transform 0.18s;
}
.woocommerce-cart a.remove:hover, .woocommerce-cart a.remove:focus {
background: #e60023;
color: #fff !important;
transform: scale(1.15) rotate(-8deg);
}
.woocommerce-cart a.remove:hover:before, .woocommerce-cart a.remove:focus:before {
color: #fff;
transform: rotate(-18deg) scale(1.2);
}
@media (max-width: 900px) {
.woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td {
font-size: 0.99rem;
padding: 10px 3px;
}
.woocommerce-cart .cart_totals {
padding: 14px 3px;
}
}
@media (max-width: 600px) {
.woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td {
font-size: 0.93rem;
padding: 6px 2px;
}
.woocommerce-cart .cart_totals {
padding: 10px 2px;
}
.woocommerce-cart table.shop_table .product-thumbnail img {
width: 44px;
height: 44px;
}
}
.woocommerce-cart table.shop_table th {
background: #e67e22;
color: #fff;
font-size: 1.12rem;
font-weight: 800;
padding: 18px 10px;
border: none;
text-align: center;
}
.woocommerce-cart table.shop_table td {
padding: 16px 10px;
border: none;
text-align: center;
background: #f7f7f7;
color: #222;
font-size: 1.09rem;
}
.woocommerce-cart .cart_totals h2 {
font-size: 1.28rem;
color: #e67e22;
margin-bottom: 18px;
font-weight: 800;
letter-spacing: 0.01em;
}
.woocommerce-cart .checkout-button {
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%);
color: #fff;
border-radius: 8px;
padding: 14px 36px;
font-size: 1.18rem;
font-weight: 800;
transition: background 0.18s, transform 0.13s;
margin-top: 22px;
margin-bottom: 10px;
box-shadow: 0 4px 18px rgba(230,103,34,0.14);
border: none;
outline: none;
cursor: pointer;
}
.woocommerce-cart .checkout-button:hover {
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
color: #fff;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 24px rgba(230,103,34,0.18);
} .woocommerce-checkout .woocommerce {
background: #232b36;
border-radius: 18px;
box-shadow: 0 4px 22px rgba(0,0,0,0.10);
padding: 36px 28px 38px 28px;
}
.woocommerce-checkout .woocommerce form.checkout {
display: flex;
gap: 44px;
flex-wrap: wrap;
}
.woocommerce-checkout .woocommerce form .form-row label {
font-weight: 700;
color: #fff;
font-size: 1.09rem;
margin-bottom: 3px;
}
.woocommerce-checkout .woocommerce form .form-row input,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select {
border-radius: 8px;
border: 1.5px solid #273447;
padding: 12px 14px;
margin-top: 4px;
margin-bottom: 14px;
width: 100%;
background: #1b232d;
color: #fff;
font-size: 1.09rem;
transition: border 0.18s;
}
.woocommerce-checkout .woocommerce form .form-row input:focus,
.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus {
border: 2px solid #e67e22;
outline: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
background: #1b232d;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 2px 12px rgba(230,103,34,0.08);
color: #fff;
}
.woocommerce-checkout .place-order .button {
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%);
color: #fff;
border-radius: 8px;
padding: 14px 36px;
font-size: 1.18rem;
font-weight: 800;
transition: background 0.18s, transform 0.13s;
margin-top: 12px;
margin-bottom: 8px;
box-shadow: 0 4px 18px rgba(230,103,34,0.14);
border: none;
outline: none;
cursor: pointer;
}
.woocommerce-checkout .place-order .button:hover {
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
color: #fff;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 24px rgba(230,103,34,0.18);
} .woocommerce-message, .woocommerce-error, .woocommerce-info {
border-radius: 5px;
padding: 13px 18px;
margin-bottom: 18px;
font-size: 1rem;
font-weight: 600;
}
.woocommerce-message {
background: #eafbe7;
color: #246d36;
border-left: 4px solid #4caf50;
}
.woocommerce-error {
background: #fdeaea;
color: #c0392b;
border-left: 4px solid #e74c3c;
}
.woocommerce-info {
background: #eaf3fb;
color: #276fa6;
border-left: 4px solid #2196f3;
} .woocommerce .button, .woocommerce-page .button, .single_add_to_cart_button, .checkout-button, .woocommerce #place_order {
background: linear-gradient(90deg, #a1613f 60%, #e67e22 100%);
color: #fff !important;
border-radius: 8px;
border: none;
padding: 12px 32px;
font-weight: 800;
font-size: 1.13rem;
box-shadow: 0 4px 18px rgba(161,97,63,0.14);
letter-spacing: 0.01em;
transition: background 0.18s, transform 0.13s;
outline: none;
cursor: pointer;
position: relative;
z-index: 1;
margin-top: 10px;
margin-bottom: 8px;
display: inline-block;
}
.woocommerce .button:hover, .woocommerce-page .button:hover, .single_add_to_cart_button:hover, .checkout-button:hover, .woocommerce #place_order:hover {
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%);
color: #fff !important;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 24px rgba(230,103,34,0.12);
}
.woocommerce .button:active, .woocommerce-page .button:active, .single_add_to_cart_button:active, .checkout-button:active, .woocommerce #place_order:active {
background: #a1613f;
color: #fff !important;
transform: scale(0.98);
}
.woocommerce .button:focus, .woocommerce-page .button:focus, .single_add_to_cart_button:focus, .checkout-button:focus, .woocommerce #place_order:focus {
outline: 2px solid #e67e22;
outline-offset: 2px;
} .woocommerce .button[disabled], .woocommerce-page .button[disabled], .single_add_to_cart_button[disabled], .checkout-button[disabled], .woocommerce #place_order[disabled] {
background: #b8b8b8;
color: #fff !important;
opacity: 0.7;
cursor: not-allowed;
box-shadow: none;
} .single_add_to_cart_button::before, .checkout-button::before, .woocommerce #place_order::before {
content: '\f07a';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-left: 8px;
font-size: 1.1em;
vertical-align: middle;
opacity: 0.8;
display: inline-block;
}
.checkout-button::before, .woocommerce #place_order::before {
content: '\f560';
} @media (max-width: 900px) {
.woocommerce ul.products li.product {
width: 45%;
}
.woocommerce div.product {
flex-direction: column;
gap: 20px;
}
.woocommerce-checkout .woocommerce form.checkout {
flex-direction: column;
gap: 20px;
}
}
@media (max-width: 600px) {
.woocommerce ul.products li.product {
width: 100%;
}
.woocommerce div.product, .woocommerce-checkout .woocommerce {
padding: 12px 6px;
}
} .woocommerce ul.products, .woocommerce-page ul.products {
display: flex;
flex-wrap: wrap;
gap: 48px 36px;
justify-content: center;
align-items: stretch;
margin-top: 48px;
background: none;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .product-inner-modern {
background: linear-gradient(140deg, #232b36 70%, #1a2027 100%) !important;
border-radius: 28px !important;
box-shadow: 0 16px 48px 0 #e67e2255, 0 2px 18px 0 #0004 !important;
padding: 34px 22px 38px 22px !important;
border: 2.5px solid #232b36 !important;
min-width: 0;
min-height: 430px;
max-width: 370px;
width: 100%;
transition: box-shadow 0.25s, transform 0.18s, border-color 0.18s;
position: relative;
overflow: hidden;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
cursor: pointer;
z-index: 1;
}
.woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover, .product-inner-modern:hover {
box-shadow: 0 32px 80px 0 #e67e2299, 0 12px 48px 0 #0009 !important;
transform: translateY(-16px) scale(1.045);
border-color: #e67e22 !important;
z-index: 5;
}
.product-thumb-modern img {
width: 100%;
max-width: 260px;
height: 210px;
border-radius: 22px;
box-shadow: 0 12px 48px #e67e2255, 0 2px 12px #0002;
object-fit: cover;
background: linear-gradient(120deg,#232b36 60%,#18212b 100%);
border: 2.5px solid #232b36;
margin-bottom: 20px;
margin-top: 8px;
transition: transform 0.22s cubic-bezier(.4,2,.6,1), box-shadow 0.22s, border-color 0.18s;
}
.product-thumb-modern img:hover {
transform: scale(1.11) rotate(-2deg);
box-shadow: 0 24px 64px #e67e2255, 0 8px 32px #0007;
border-color: #e67e22;
}
.woocommerce-loop-product__title, .product-inner-modern .woocommerce-loop-product__title {
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-size: 1.55rem;
font-weight: 900;
background: linear-gradient(90deg, #e67e22 10%, #ffb347 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
margin-bottom: 12px;
margin-top: 0;
text-align: center;
text-shadow: 0 3px 14px #0004, 0 1px 0 #fff3;
border-bottom: none !important;
transition: background 0.18s, color 0.18s;
}
.woocommerce-loop-product__title:hover {
background: linear-gradient(90deg, #ffb347 0%, #e67e22 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.price, .product-inner-modern .price {
display: block;
font-family: 'Montserrat', 'Cairo', Arial, sans-serif !important;
font-size: 1.22rem;
font-weight: 900;
color: #e67e22;
background: linear-gradient(90deg, #e67e22 0%, #ffb347 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 14px;
text-align: center;
text-shadow: 0 2px 12px #0003;
letter-spacing: 0.03em;
}
.price del {
color: #e74c3c !important;
opacity: 0.62;
text-decoration: line-through;
font-weight: 600;
margin-right: 7px;
text-shadow: none;
}
.price ins {
color: #27ae60 !important;
background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
text-shadow: 0 2px 12px #0002;
padding-left: 2px;
}
.product-excerpt-modern {
color: #d7dbe6;
font-size: 1.01em;
font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
text-align: center;
margin-bottom: 18px;
line-height: 1.7;
min-height: 44px;
opacity: 0.88;
}
.modern-view-details-btn {
display: block;
width: 100%;
margin: 0 auto;
background: linear-gradient(90deg, #e67e22 0%, #a1613f 100%) !important;
color: #fff !important;
border-radius: 22px !important;
font-size: 1.15em;
font-weight: 900;
padding: 15px 0 !important;
box-shadow: 0 2px 18px #a1613f22;
border: none !important;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background 0.18s, transform 0.13s;
text-decoration: none !important;
margin-top: 16px;
}
.modern-view-details-btn:hover {
background: linear-gradient(90deg, #a1613f 0%, #e67e22 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.07);
}
@media (max-width: 900px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .product-inner-modern {
max-width: 98vw;
min-height: 260px;
padding: 14px 4px 18px 4px;
}
.product-thumb-modern img {
max-width: 90vw;
height: 150px;
}
}
@media (max-width: 600px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .product-inner-modern {
max-width: 100vw;
margin: 0 auto;
}
.product-thumb-modern img {
max-width: 100vw;
height: 110px;
}
} .woocommerce .button.add_to_cart_button,
.woocommerce .add_to_cart_button.button,
.woocommerce-page .button.add_to_cart_button,
.woocommerce-page .add_to_cart_button.button,
.woocommerce .single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button {
color: #fff !important;
text-shadow: 0 2px 8px #a1613f44;
}
.woocommerce .button.add_to_cart_button:hover,
.woocommerce .add_to_cart_button.button:hover,
.woocommerce-page .button.add_to_cart_button:hover,
.woocommerce-page .add_to_cart_button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page .single_add_to_cart_button:hover {
color: #fff !important;
text-shadow: 0 4px 16px #e67e2244;
} .single-product-modern-page {
background: #101a24;
color: #fff;
font-family: 'Montserrat', 'Cairo', Arial, sans-serif;
padding-bottom: 0;
}
.single-product-hero {
padding: 44px 0 22px 0;
background: linear-gradient(120deg,#010100 60%,#28291F 100%);
border-bottom: 2px solid #A9B187;
}
.single-product-flex {
display: flex;
align-items: flex-start;
gap: 48px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.single-product-gallery {
flex: 0 0 420px;
max-width: 420px;
background: #232b36;
border-radius: 24px;
box-shadow: 0 8px 32px #a1613f22, 0 2px 12px #0002;
padding: 24px 18px;
min-width: 0;
}
.single-product-gallery img {
width: 100%;
height: auto;
border-radius: 18px;
background: #fff;
box-shadow: 0 4px 18px #0002;
}
.single-product-summary {
flex: 1 1 340px;
max-width: 650px;
background: rgba(35,43,54,0.93);
border-radius: 22px;
box-shadow: 0 4px 22px #0004;
padding: 36px 30px 28px 30px;
margin-top: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.single-product-summary .woocommerce-breadcrumb {
margin-bottom: 12px;
}
.single-product-summary .product_title {
font-size: 2.1rem;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
line-height: 1.2;
letter-spacing: -1px;
}
.single-product-short-desc {
font-size: 1.13rem;
color: #d7d7d7;
margin-bottom: 0;
font-weight: 400;
}
.single-product-price {
font-size: 1.35rem;
font-weight: 900;
color: #ffb347;
margin-bottom: 0;
}
.single-product-meta {
font-size: 1.01rem;
color: #b8b8b8;
margin-bottom: 0;
}
.single-product-cart {
margin: 18px 0 0 0;
}
.single-product-cart .single_add_to_cart_button {
width: 100%;
font-size: 1.18rem;
padding: 16px 0;
border-radius: 16px;
font-weight: 900;
background: linear-gradient(90deg, #e67e22 60%, #a1613f 100%) !important;
color: #fff !important;
box-shadow: 0 4px 24px #e67e2222, 0 1px 8px #0002;
transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.single-product-cart .single_add_to_cart_button:hover {
background: linear-gradient(90deg, #ffb347 0%, #e67e22 100%) !important;
color: #fff !important;
box-shadow: 0 8px 32px #e67e2222, 0 2px 12px #0003;
transform: translateY(-2px) scale(1.04);
}
.single-product-share {
margin-top: 18px;
display: flex;
align-items: center;
gap: 12px;
font-size: 1.02rem;
}
.single-product-share span {
color: #e67e22;
font-weight: 800;
margin-left: 8px;
}
.single-product-share .share-btn {
background: #232b36;
color: #ffb347;
border-radius: 8px;
padding: 8px 18px;
font-weight: 800;
text-decoration: none;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
box-shadow: 0 2px 8px #e67e2222;
display: inline-block;
}
.single-product-share .share-btn.fb { color: #1877f2; }
.single-product-share .share-btn.tw { color: #1da1f2; }
.single-product-share .share-btn.wa { color: #25d366; }
.single-product-share .share-btn:hover {
background: linear-gradient(90deg, #A9B187 0%, #8A916D 100%);
color: #fff;
}
.single-product-tabs-section {
background: #101a24;
padding: 38px 0 0 0;
}
.single-product-tabs-section .container {
max-width: 900px;
margin: 0 auto;
background: #232b36;
border-radius: 18px;
box-shadow: 0 4px 22px #0004;
padding: 32px 28px;
}
.woocommerce-tabs .wc-tabs {
display: flex;
gap: 18px;
border-bottom: 2px solid #A9B187;
margin-bottom: 22px;
background: none;
padding: 0;
}
.woocommerce-tabs .wc-tabs li {
background: none;
border: none;
margin: 0;
padding: 0;
}
.woocommerce-tabs .wc-tabs li a {
color: #e67e22 !important;
font-weight: 900;
font-size: 1.09rem;
border-radius: 8px 8px 0 0;
padding: 12px 24px;
background: none;
transition: background 0.18s, color 0.18s;
}
.woocommerce-tabs .wc-tabs li.active a, .woocommerce-tabs .wc-tabs li a:hover {
background: #e67e22 !important;
color: #fff !important;
}
.woocommerce-tabs .panel {
background: none;
color: #fff;
font-size: 1.01rem;
padding: 0;
}
.single-product-related-section {
background: #101a24;
padding: 48px 0 0 0;
}
.single-product-related-section .container {
max-width: 1200px;
margin: 0 auto;
background: none;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.woocommerce.related.products h2 {
color: #e67e22;
font-size: 1.38rem;
font-weight: 900;
margin-bottom: 22px;
letter-spacing: 0.01em;
}
@media (max-width: 900px) {
.single-product-flex {
flex-direction: column;
gap: 32px;
}
.single-product-gallery, .single-product-summary {
max-width: 100%;
width: 100%;
padding: 20px 6vw;
}
.single-product-tabs-section .container {
padding: 18px 2vw;
}
}
@media (max-width: 600px) {
.single-product-hero {
padding: 18px 0 10px 0;
}
.single-product-gallery, .single-product-summary {
padding: 10px 0;
}
.single-product-tabs-section .container {
padding: 7px 0;
}
} .single-product-swiper {
width: 100%;
height: 410px;
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 18px #0002;
margin-bottom: 14px;
}
.single-product-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
height: 410px;
background: #fff;
}
.single-product-swiper img {
width: auto;
max-width: 100%;
max-height: 400px;
margin: 0 auto;
border-radius: 12px;
box-shadow: 0 2px 8px #a1613f22;
}
.single-product-swiper .swiper-pagination {
bottom: 8px !important;
}
.single-product-swiper .swiper-button-next,
.single-product-swiper .swiper-button-prev {
color: #e67e22;
background: #fff;
border-radius: 50%;
width: 38px;
height: 38px;
box-shadow: 0 2px 8px #a1613f22;
top: 50%;
transform: translateY(-50%);
}
.single-product-swiper .swiper-button-next:after,
.single-product-swiper .swiper-button-prev:after {
font-size: 1.3rem;
font-weight: bold;
}
.single-product-swiper .swiper-pagination-bullet {
background: #e67e22;
opacity: 0.7;
}
.single-product-swiper .swiper-pagination-bullet-active {
background: #a1613f;
opacity: 1;
}
@media (max-width: 900px) {
.single-product-swiper, .single-product-swiper .swiper-slide {
height: 290px;
}
.single-product-swiper img {
max-height: 260px;
}
}
@media (max-width: 600px) {
.single-product-swiper, .single-product-swiper .swiper-slide {
height: 180px;
}
.single-product-swiper img {
max-height: 140px;
}
} .single-product-hero {
padding: 36px 0 14px 0;
}
.single-product-flex {
gap: 36px;
max-width: 1080px;
}
.single-product-gallery {
flex: 0 0 350px;
max-width: 350px;
padding: 12px 8px;
}
.single-product-summary {
max-width: 540px;
padding: 26px 16px 18px 16px;
gap: 16px;
}
.single-product-summary .product_title {
font-size: 1.45rem;
}
.single-product-short-desc {
font-size: 1.01rem;
}
.single-product-price {
font-size: 1.09rem;
}
.single-product-cart .single_add_to_cart_button {
font-size: 1.05rem;
padding: 12px 0;
}
@media (max-width: 900px) {
.single-product-flex {
gap: 16px;
max-width: 98vw;
}
.single-product-gallery, .single-product-summary {
max-width: 100%;
width: 100%;
padding: 10px 2vw;
}
}
@media (max-width: 600px) {
.single-product-hero {
padding: 7px 0 4px 0;
}
.single-product-gallery, .single-product-summary {
padding: 4px 0;
}
} body.woocommerce-shop,
.woocommerce-shop .site,
.woocommerce-shop .site-main,
.woocommerce-shop .shop-products-area,
.woocommerce-shop .shop-banner,
.woocommerce-shop .shop-sidebar,
.woocommerce-shop ul.products,
.woocommerce-shop .shop-product-card,
.woocommerce-shop .shop-product-card-dark,
.woocommerce-shop .shop-product-details,
.woocommerce-shop .woocommerce-pagination,
.woocommerce-shop .shop-title,
.woocommerce-shop .shop-desc {
background: linear-gradient(135deg, #0a1622 60%, #050a12 100%) !important;
color: #fff !important;
}
.woocommerce-shop .shop-product-card, .woocommerce-shop .shop-product-card-dark {
border: 2px solid #101828 !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.38), 0 2px 12px rgba(255,255,255,0.04) inset !important;
filter: brightness(0.98) contrast(1.08);
}
.woocommerce-shop .shop-product-details {
background: rgba(10, 22, 34, 0.85) !important;
border-radius: 0 0 16px 16px;
}
.woocommerce-shop .shop-banner-content,
.woocommerce-shop .shop-title,
.woocommerce-shop .shop-desc,
.woocommerce-shop .shop-sidebar,
.woocommerce-shop .shop-sidebar * {
color: #fff !important;
}
.woocommerce-shop .price_slider_wrapper,
.woocommerce-shop .woocommerce-pagination,
.woocommerce-shop .shop-sidebar .widget,
.woocommerce-shop .shop-sidebar .widget-area {
background: none !important;
color: #fff !important;
}
.woocommerce-shop .shop-sidebar .widget-title,
.woocommerce-shop .shop-sidebar h3 {
border-bottom: 1px solid #222a38 !important;
color: #fff !important;
}
.woocommerce-shop .shop-sidebar a,
.woocommerce-shop .shop-sidebar .woocommerce-widget-product-categories li a {
color: #b3cdfa !important;
}
.woocommerce-shop .shop-sidebar a:hover {
color: #fff !important;
text-decoration: underline;
}
.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before {
content: none !important;
display: none !important;
} .woocommerce .products ul::before,
.woocommerce .products ul::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
position: static !important;
} .woocommerce .shop-products-grid,
.woocommerce ul.products {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce main,
.woocommerce .site-main {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce .content-area,
.woocommerce .site-content {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce .woocommerce-pagination {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce .shop-products-area {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce .shop-products-grid:after,
.woocommerce ul.products:after {
display: none !important;
content: none !important;
} .woocommerce div.product .woocommerce-tabs {
background: #101d29 !important;
border-radius: 18px 18px 0 0;
margin-top: 32px;
box-shadow: 0 4px 32px rgba(0,0,0,0.13);
padding: 0 0 32px 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
gap: 8px;
list-style: none;
padding: 0 0 0 24px;
margin: 0;
border-bottom: 2.5px solid #22314a;
background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: none;
margin: 0;
padding: 0;
position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: 10px 28px;
background: #222a38;
color: #fff;
border-radius: 10px 10px 0 0;
font-weight: 600;
font-size: 1.08rem;
transition: background 0.2s, color 0.2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
background: linear-gradient(90deg,#A9B187 0%,#8A916D 100%);
color: #222a38;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
z-index: 2;
}
.woocommerce div.product .woocommerce-tabs .panel {
background: transparent;
color: #fff;
border-radius: 0 0 18px 18px;
padding: 32px 24px 0 24px;
font-size: 1.08rem;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
color: #A9B187;
font-size: 1.2rem;
margin-bottom: 18px;
} ul.tabs.wc-tabs {
display: flex;
gap: 10px;
list-style: none;
padding: 0 0 0 24px;
margin: 0;
border-bottom: 2.5px solid #22314a;
background: transparent;
position: relative;
z-index: 10;
}
ul.tabs.wc-tabs li {
background: transparent;
border: none;
margin: 0;
padding: 0;
position: relative;
}
ul.tabs.wc-tabs li a {
display: block;
padding: 12px 32px 10px 32px;
background: #222a38;
color: #fff;
border-radius: 12px 12px 0 0;
font-weight: 700;
font-size: 1.1rem;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 12px #0002;
border: none;
}
ul.tabs.wc-tabs li.active a,
ul.tabs.wc-tabs li a:focus {
background: linear-gradient(90deg,#A9B187 0%,#8A916D 100%);
color: #222a38;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
z-index: 2;
}
ul.tabs.wc-tabs li a:hover {
background: #474B3D;
color: #A9B187;
}
@media (max-width: 700px) {
ul.tabs.wc-tabs {
flex-direction: column;
gap: 0;
padding-left: 0;
}
ul.tabs.wc-tabs li a {
border-radius: 12px;
margin-bottom: 8px;
padding: 12px 16px;
font-size: 1rem;
}
} .wc-block-components-button, .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button {
background: linear-gradient(90deg,#ffb800 0%,#ff8000 100%) !important;
color: #222a38 !important;
border: none !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 1.18rem !important;
padding: 16px 0 !important;
box-shadow: 0 6px 32px rgba(255,128,0,0.11), 0 1.5px 6px rgba(0,0,0,0.08);
letter-spacing: 0.5px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.12s;
outline: none !important;
min-width: 220px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 22px auto 0 auto;
cursor: pointer;
box-sizing: border-box;
}
.wc-block-components-button__text {
font-size: 1.14rem !important;
font-weight: 800 !important;
letter-spacing: 0.7px;
text-shadow: 0 2px 12px #fff3, 0 1px 2px #0002;
}
.wc-block-components-button:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-components-totals-coupon__button:hover {
background: linear-gradient(90deg,#ff8000 0%,#ffb800 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.035);
box-shadow: 0 10px 40px rgba(255,128,0,0.16), 0 2px 8px rgba(0,0,0,0.11);
}
.wc-block-components-button:active {
transform: scale(0.98);
}
@media (max-width: 600px) {
.wc-block-components-button, .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button {
font-size: 1rem !important;
padding: 13px 0 !important;
min-width: 160px;
}
.wc-block-components-button__text {
font-size: 1rem !important;
}
} .wc-block-components-button.wp-element-button,
.wc-block-cart__submit-button.wp-element-button,
.wc-block-components-checkout-place-order-button.wp-element-button,
.wc-block-components-button.contained,
.wc-block-cart__submit-button.contained {
background: linear-gradient(90deg,#ffb800 0%,#ff8000 100%) !important;
color: #222a38 !important;
border: none !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 1.18rem !important;
padding: 16px 0 !important;
box-shadow: 0 6px 32px rgba(255,128,0,0.11), 0 1.5px 6px rgba(0,0,0,0.08);
letter-spacing: 0.5px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.12s;
outline: none !important;
min-width: 220px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 22px auto 0 auto;
cursor: pointer;
box-sizing: border-box;
}
.wc-block-components-button.wp-element-button:hover,
.wc-block-cart__submit-button.wp-element-button:hover,
.wc-block-components-checkout-place-order-button.wp-element-button:hover,
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button.contained:hover {
background: linear-gradient(90deg,#ff8000 0%,#ffb800 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.035);
box-shadow: 0 10px 40px rgba(255,128,0,0.16), 0 2px 8px rgba(0,0,0,0.11);
}
.wc-block-components-button.wp-element-button:active,
.wc-block-cart__submit-button.wp-element-button:active {
transform: scale(0.98);
}
@media (max-width: 600px) {
.wc-block-components-button.wp-element-button,
.wc-block-cart__submit-button.wp-element-button,
.wc-block-components-checkout-place-order-button.wp-element-button,
.wc-block-components-button.contained,
.wc-block-cart__submit-button.contained {
font-size: 1rem !important;
padding: 13px 0 !important;
min-width: 160px;
}
.wc-block-components-button__text {
font-size: 1rem !important;
}
} .shop-products-grid {
gap: 24px 34px !important; }
.shop-product-card,
.shop-product-card-dark,
.product.type-product {
min-width: 250px !important;
max-width: 320px !important;
width: 100% !important;
min-height: 410px !important;
max-height: 500px !important;
height: 100% !important;
background: linear-gradient(120deg, #101d29 70%, #18212b 100%) !important;
border-radius: 18px !important;
box-shadow: 0 6px 32px rgba(0,0,0,0.13), 0 1.5px 6px rgba(0,0,0,0.08) !important;
overflow: hidden !important;
transition: transform 0.18s, box-shadow 0.18s !important;
list-style: none !important;
margin: 0 !important;
border: 2px solid #18212b33 !important;
display: flex !important;
flex-direction: column !important;
}
.shop-product-card:hover,
.shop-product-card-dark:hover,
.product.type-product:hover {
transform: translateY(-7px) scale(1.03) !important;
box-shadow: 0 14px 48px rgba(0,0,0,0.22) !important;
border-color: #ffb80099 !important;
}
.shop-product-thumb {
position: relative !important;
background: #0b1923 !important;
padding: 0 !important;
aspect-ratio: 1/1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-bottom: 1.5px solid #19283a !important;
}
.shop-product-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
transition: filter 0.18s;
}
.shop-product-card:hover .shop-product-thumb img,
.shop-product-card-dark:hover .shop-product-thumb img,
.product.type-product:hover .shop-product-thumb img {
filter: brightness(1.07) saturate(1.15);
}
.shop-product-details {
padding: 18px 14px 14px 14px !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
gap: 8px;
}
.shop-product-title {
font-size: 1.14rem !important;
color: #fff !important;
margin: 0 0 7px 0 !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
transition: color 0.18s;
}
.shop-product-title a {
color: inherit !important;
text-decoration: none !important;
}
.shop-product-card:hover .shop-product-title,
.shop-product-card-dark:hover .shop-product-title,
.product.type-product:hover .shop-product-title {
color: #ffb800 !important;
}
.shop-product-price {
color: #ffb800 !important;
font-size: 1.06rem !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
transition: color 0.18s;
}
.shop-product-card:hover .shop-product-price,
.shop-product-card-dark:hover .shop-product-price,
.product.type-product:hover .shop-product-price {
color: #fff !important;
}
@media (max-width: 991px) {
.shop-products-grid {
gap: 18px 14px !important;
}
.shop-product-card,
.shop-product-card-dark,
.product.type-product {
border-radius: 13px !important;
}
}
@media (max-width: 600px) {
.shop-products-grid {
gap: 10px 0 !important;
}
.shop-product-card,
.shop-product-card-dark,
.product.type-product {
border-radius: 8px !important;
}
}