:root {
--font-heading: 'Playfair Display', serif;
--font-body: 'Inter', sans-serif;
--font-hand: 'Nanum Pen Script', cursive;
--spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3rem; --spacing-xl: 5rem;
--text-dark: #ffffff;
--text-light: #ffffff;
--text-muted: #aaaaaa;
--bg-light: rgba(255,255,255,0.03);
--bg-dark: #121212;
--border-color: rgba(255,255,255,0.1);
}
img { max-width: 100%; height: auto; } .w1-hero {
display: flex;
min-height: 80vh;
}
.w1-hero-content {
flex: 1;
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(255,255,255,0.03);
}
.w1-hero-image {
flex: 1;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80) center/cover;
position: relative;
}
.w1-trust {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--wp--preset--color--primary);
margin-bottom: 20px;
font-weight: 600;
}
.w1-title {
font-size: 4rem;
line-height: 1.1;
margin-bottom: 20px;
color: #ffffff;
}
.w1-desc {
font-size: 1.1rem;
margin-bottom: 40px;
max-width: 80%;
} .w2-hero {
height: 90vh;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80) center/cover;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.w2-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
}
.w2-glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: var(--spacing-lg);
text-align: center;
border-radius: 12px;
position: relative;
z-index: 2;
color: #fff;
max-width: 800px;
}
.w2-glass-card h2 {
font-size: 3.5rem;
color: #fff;
margin-bottom: 15px;
}
.w2-glass-card p {
color: #f0f0f0;
font-size: 1.2rem;
}
.w2-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.w2-feature span {
color: var(--wp--preset--color--primary);
font-weight: bold;
} .w3-hero {
padding: var(--spacing-xl) var(--spacing-md);
text-align: center;
background: transparent;
}
.w3-pretitle {
color: var(--text-muted);
letter-spacing: 4px;
text-transform: uppercase;
font-size: 0.85rem;
margin-bottom: 20px;
display: block;
}
.w3-title {
font-size: 5rem;
line-height: 1;
margin-bottom: 30px;
font-style: italic;
}
.w3-title span {
color: var(--wp--preset--color--primary);
}
.w3-video-block {
margin-top: var(--spacing-lg);
height: 500px;
background: #ccc url(https://images.unsplash.com/photo-1594938328870-9623159c8c99?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80) center/cover;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.w3-play {
width: 80px;
height: 80px;
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 24px;
cursor: pointer;
transition: transform 0.3s;
}
.w3-play:hover {
transform: scale(1.1);
color: var(--wp--preset--color--primary);
} .w4-hero {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg-dark);
color: #fff;
}
.w4-content {
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.w4-content h2 {
color: #fff;
font-size: 3.5rem;
}
.w4-content p {
color: #aaa;
}
.w4-btn {
background: transparent;
color: #ffffff;
}
.w4-carousel {
display: flex;
gap: 20px;
padding: var(--spacing-xl) 0;
overflow-x: auto;
align-items: center;
}
.w4-card {
min-width: 250px;
background: #2a2a2a;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.w4-card img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 15px;
}
.w4-card h4 {
color: #fff;
margin-bottom: 5px;
}
.w4-card .price {
color: var(--wp--preset--color--primary);
font-weight: bold;
} .w5-hero {
text-align: center;
padding: var(--spacing-xl) 20px 0;
background: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
}
.w5-title {
font-size: 3.8rem;
margin-bottom: 20px;
}
.w5-trust-bar {
margin-top: var(--spacing-lg);
background: transparent;
padding: 30px;
display: flex;
justify-content: center;
gap: 60px;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w5-trust-item {
color: var(--text-muted);
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 10px;
}
.w5-trust-item svg {
fill: var(--wp--preset--color--primary);
width: 24px;
height: 24px;
} .w6-story {
display: flex;
padding: var(--spacing-xl);
gap: 60px;
align-items: center;
}
.w6-title {
font-size: 2.5rem;
flex: 1;
border-left: 4px solid var(--wp--preset--color--primary);
padding-left: 30px;
}
.w6-text {
flex: 2;
font-size: 1.2rem;
color: #ffffff;
line-height: 1.8;
}
.w6-highlight {
color: var(--wp--preset--color--primary);
font-weight: 600;
} .w7-artisan {
padding: var(--spacing-lg) var(--spacing-xl);
max-width: 900px;
margin: 0 auto;
position: relative;
}
.w7-artisan p {
font-size: 1.25rem;
line-height: 1.9;
}
.w7-artisan p:first-child::first-letter {
float: left;
font-size: 5rem;
line-height: 0.8;
padding-right: 15px;
padding-top: 10px;
color: var(--wp--preset--color--primary);
font-family: var(--font-heading);
font-weight: bold;
} .w8-ps {
display: grid;
grid-template-columns: 1fr 1fr;
background: transparent;
}
.w8-col {
padding: var(--spacing-xl);
}
.w8-problem {
background: rgba(255,255,255,0.03);
border-right: 1px solid rgba(255,255,255,0.1);
}
.w8-solution {
background: transparent;
}
.w8-badge {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
}
.w8-problem-badge {
background: #fee2e2;
color: #b91c1c;
}
.w8-solution-badge {
background: #e0f2fe;
color: #0369a1;
}
.w8-col h3 {
font-size: 2rem;
} .w9-vision {
padding: var(--spacing-xl);
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.w9-quote {
font-size: 2rem;
font-family: var(--font-heading);
font-style: italic;
color: #ffffff;
margin-bottom: 30px;
}
.w9-signature {
font-family: 'Great Vibes', cursive;
font-size: 2.5rem;
color: var(--wp--preset--color--primary);
} .w10-value {
background: var(--bg-dark);
color: #fff;
padding: var(--spacing-xl);
text-align: center;
}
.w10-value h3 {
color: #fff;
font-size: 2.5rem;
}
.w10-value p {
color: #ccc;
max-width: 700px;
margin: 0 auto 30px;
font-size: 1.1rem;
}
.w10-stat-grid {
display: flex;
justify-content: center;
gap: 40px;
}
.w10-stat {
display: flex;
flex-direction: column;
}
.w10-num {
font-size: 3rem;
font-family: var(--font-heading);
color: var(--wp--preset--color--primary);
}
.w10-label {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
} .w11-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: var(--spacing-xl);
}
.w11-card {
text-align: center;
}
.w11-icon {
width: 70px;
height: 70px;
background: rgba(255,255,255,0.03);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: var(--wp--preset--color--primary);
}
.w11-card h4 {
font-size: 1.3rem;
margin-bottom: 10px;
}
.w11-card p {
font-size: 0.95rem;
} .w12-zigzag {
padding: var(--spacing-xl) 0;
}
.w12-row {
display: flex;
align-items: center;
gap: 60px;
margin-bottom: 80px;
padding: 0 var(--spacing-xl);
}
.w12-row:nth-child(even) {
flex-direction: row-reverse;
}
.w12-img {
flex: 1;
height: 400px;
background-size: cover;
background-position: center;
border-radius: 12px;
}
.w12-content {
flex: 1;
}
.w12-content h3 {
font-size: 2.2rem;
}
.w12-content ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
.w12-content li {
padding-left: 30px;
position: relative;
margin-bottom: 15px;
font-size: 1.1rem;
}
.w12-content li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--wp--preset--color--primary);
font-weight: bold;
} .w13-acc-container {
padding: var(--spacing-xl);
max-width: 800px;
margin: 0 auto;
}
.w13-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 40px;
}
.w13-item {
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 10px;
}
.w13-header {
padding: 20px 0;
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.w13-header::after {
content: '+';
font-size: 1.5rem;
transition: transform 0.3s;
color: var(--wp--preset--color--primary);
}
.w13-header.active::after {
content: '-';
}
.w13-content {
padding: 0 0 20px;
display: none;
color: var(--text-muted);
line-height: 1.6;
} .w14-numbers {
background: var(--wp--preset--color--primary);
color: #fff;
padding: var(--spacing-xl);
display: flex;
justify-content: space-around;
text-align: center;
}
.w14-stat {
width: 25%;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.w14-stat:last-child {
border-right: none;
}
.w14-num {
font-size: 4rem;
font-weight: bold;
font-family: var(--font-heading);
display: block;
margin-bottom: 10px;
}
.w14-text {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
} .w15-comp {
padding: var(--spacing-xl);
max-width: 1000px;
margin: 0 auto;
}
.w15-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 40px;
}
.w15-table {
width: 100%;
border-collapse: collapse;
background: transparent;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.w15-table th,
.w15-table td {
padding: 25px;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w15-table th {
background: rgba(255,255,255,0.03);
font-size: 1.2rem;
font-weight: 600;
width: 33.33%;
}
.w15-table th.brand-col {
background: var(--wp--preset--color--primary);
color: #fff;
}
.w15-table td:first-child {
text-align: left;
font-weight: 500;
font-size: 1.1rem;
}
.w15-table td.brand-col {
background: rgba(195, 154, 95, 0.05);
}  .w16-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
}
.w16-card {
max-width: 600px;
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
position: relative;
background: transparent;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}
.w16-quote-icon {
position: absolute;
top: -20px;
left: 40px;
background: var(--wp--preset--color--primary);
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: serif;
line-height: 1;
}
.w16-text {
font-size: 1.2rem;
font-style: italic;
margin-bottom: 25px;
color: #ffffff;
}
.w16-author {
display: flex;
align-items: center;
gap: 15px;
}
.w16-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background-size: cover;
background-position: center;
}
.w16-meta h4 {
margin: 0;
font-size: 1.1rem;
font-family: var(--font-body);
}
.w16-verified {
color: #059669;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 5px;
margin-top: 4px;
font-weight: 500;
}
.w16-badge {
position: absolute;
top: 20px;
right: 20px;
opacity: 0.1;
width: 60px;
} .w17-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w17-title {
font-size: 2.5rem;
margin-bottom: 50px;
}
.w17-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.w17-card {
background: transparent;
padding: 30px;
border-radius: 8px;
text-align: left;
border-top: 4px solid var(--wp--preset--color--primary);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.w17-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.w17-name {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 5px;
display: block;
}
.w17-role {
font-size: 0.85rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
} .w18-wrapper {
padding: var(--spacing-xl);
background: var(--bg-dark);
color: #fff;
text-align: center;
}
.w18-quote {
font-size: 3rem;
font-family: var(--font-heading);
max-width: 900px;
margin: 0 auto 40px;
line-height: 1.3;
}
.w18-highlight {
color: var(--wp--preset--color--primary);
font-style: italic;
}
.w18-author {
font-size: 1.2rem;
letter-spacing: 2px;
text-transform: uppercase;
} .w19-wrapper {
padding: var(--spacing-xl);
background: transparent;
}
.w19-flex {
display: flex;
gap: 50px;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.w19-image {
flex: 1;
border-radius: 12px;
overflow: hidden;
}
.w19-image img {
width: 100%;
display: block;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.w19-content {
flex: 1;
}
.w19-stars {
font-size: 24px;
color: var(--wp--preset--color--primary);
margin-bottom: 20px;
}
.w19-text {
font-size: 1.3rem;
margin-bottom: 20px;
font-style: italic;
color: #ffffff;
}
.w19-product-link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 10px 20px;
background: rgba(255,255,255,0.03);
border-radius: 30px;
text-decoration: none;
color: #ffffff;
font-weight: 500;
font-size: 0.9rem;
border: 1px solid rgba(255,255,255,0.1);
} .w20-wrapper {
padding: var(--spacing-lg) 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
text-align: center;
}
.w20-title {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 3px;
color: #888;
margin-bottom: 30px;
}
.w20-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 60px;
flex-wrap: wrap;
opacity: 0.6;
filter: grayscale(100%);
transition: 0.3s;
}
.w20-logos:hover {
opacity: 1;
filter: grayscale(0%);
}
.w20-logo {
font-size: 1.8rem;
font-weight: 900;
font-family: var(--font-heading);
color: #ffffff;
} .w21-wrapper {
padding: var(--spacing-xl);
text-align: center;
background: transparent;
}
.w21-logo {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 30px;
color: #ffffff;
}
.w21-quote {
font-size: 2.2rem;
max-width: 800px;
margin: 0 auto;
line-height: 1.4;
font-family: var(--font-heading);
}
.w21-quote span {
border-bottom: 4px solid var(--wp--preset--color--primary);
} .w22-wrapper {
padding: var(--spacing-xl);
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w22-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 900px;
}
.w22-card {
background: transparent;
padding: 40px;
text-align: center;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
}
.w22-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: var(--wp--preset--color--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
} .w23-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w23-header {
text-align: center;
margin-bottom: 40px;
}
.w23-header h2 {
font-size: 2.5rem;
}
.w23-header p {
font-size: 1.1rem;
}
.w23-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.w23-item {
aspect-ratio: 1;
background-size: cover;
background-position: center;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.w23-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: opacity 0.3s;
font-size: 24px;
}
.w23-item:hover .w23-overlay {
opacity: 1;
} .w24-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
background: rgba(255,255,255,0.03);
}
.w24-card {
background: transparent;
width: 100%;
max-width: 450px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}
.w24-img {
height: 500px;
background-size: cover;
background-position: center;
position: relative;
}
.w24-tag {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 8px 15px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
color: #ffffff;
text-decoration: none;
}
.w24-tag-dot {
width: 8px;
height: 8px;
background: var(--wp--preset--color--primary);
border-radius: 50%;
}
.w24-content {
padding: 25px;
}
.w24-user {
font-weight: bold;
margin-bottom: 5px;
} .w25-wrapper {
padding: var(--spacing-xl);
background: transparent;
}
.w25-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: stretch;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
overflow: hidden;
}
.w25-images {
flex: 1;
display: flex;
}
.w25-img {
flex: 1;
background-size: cover;
background-position: center;
min-height: 400px;
position: relative;
}
.w25-label {
position: absolute;
bottom: 15px;
right: 15px;
background: transparent;
padding: 5px 10px;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 4px;
}
.w25-content {
flex: 1;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(255,255,255,0.03);
}
.w25-content h3 {
font-size: 2rem;
margin-bottom: 20px;
}
.w25-quote {
font-style: italic;
color: #ffffff;
font-size: 1.1rem;
border-left: 3px solid var(--wp--preset--color--primary);
padding-left: 20px;
margin-bottom: 30px;
} .w26-wrapper {
display: flex;
min-height: 600px;
}
.w26-img {
flex: 1.5;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80) center/cover;
position: relative;
}
.w26-badge {
position: absolute;
top: 30px;
right: 30px;
background: var(--wp--preset--color--primary);
color: #fff;
padding: 10px 20px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
}
.w26-content {
flex: 1;
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--bg-dark);
color: #fff;
}
.w26-content h2 {
font-size: 3.5rem;
color: #fff;
margin-bottom: 20px;
}
.w26-content p {
color: #ccc;
font-size: 1.1rem;
margin-bottom: 40px;
} .w27-wrapper {
padding: var(--spacing-xl) 20px;
}
.w27-header {
text-align: center;
margin-bottom: 40px;
}
.w27-header h2 {
font-size: 2.5rem;
}
.w27-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.w27-card {
text-align: center;
group;
cursor: pointer;
}
.w27-img-wrap {
overflow: hidden;
border-radius: 8px;
margin-bottom: 15px;
position: relative;
aspect-ratio: 3/4;
}
.w27-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.w27-card:hover .w27-img {
transform: scale(1.05);
}
.w27-new {
position: absolute;
top: 10px;
left: 10px;
background: transparent;
color: #ffffff;
font-size: 11px;
padding: 4px 10px;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
.w27-title {
font-size: 1.1rem;
margin-bottom: 5px;
}
.w27-price {
color: var(--wp--preset--color--primary);
font-weight: 600;
} .w28-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w28-container {
display: flex;
gap: 40px;
max-width: 1000px;
align-items: center;
background: transparent;
padding: 40px;
border-radius: 12px;
}
.w28-main {
flex: 1;
}
.w28-sub {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.w28-item {
text-align: center;
}
.w28-item img {
border-radius: 8px;
margin-bottom: 10px;
}
.w28-main h2 {
font-size: 2.5rem;
}
.w28-link {
color: #ffffff;
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--primary);
text-underline-offset: 4px;
} .w29-wrapper {
display: flex;
min-height: 500px;
background: transparent;
}
.w29-content {
flex: 1;
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.w29-img {
flex: 1;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80) center/cover;
}
.w29-tag {
color: var(--wp--preset--color--primary);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
margin-bottom: 15px;
display: block;
}
.w29-title {
font-size: 3rem;
margin-bottom: 20px;
}
.w29-features {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.w29-features li {
padding-left: 25px;
position: relative;
margin-bottom: 10px;
}
.w29-features li::before {
content: '•';
position: absolute;
left: 0;
color: var(--wp--preset--color--primary);
font-size: 1.5rem;
line-height: 1;
top: -2px;
} .w30-wrapper {
padding: var(--spacing-xl) 20px;
}
.w30-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.w30-item {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: 12px;
}
.w30-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.w30-item:hover img {
transform: scale(1.05);
}
.w30-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px;
color: #fff;
}
.w30-overlay h3 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 10px;
}
.w30-btn {
background: transparent;
color: #ffffff;
padding: 10px 20px;
display: inline-block;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
font-size: 0.9rem;
letter-spacing: 1px;
text-transform: uppercase;
width: max-content;
} .w31-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
}
.w31-header {
text-align: center;
margin-bottom: 40px;
}
.w31-masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
grid-auto-rows: 250px;
}
.w31-item {
border-radius: 8px;
overflow: hidden;
background-size: cover;
background-position: center;
position: relative;
}
.w31-item.tall {
grid-row: span 2;
}
.w31-item.wide {
grid-column: span 2;
}
.w31-label {
position: absolute;
bottom: 20px;
left: 20px;
background: transparent;
padding: 8px 15px;
border-radius: 4px;
font-weight: bold;
} .w32-wrapper {
background: var(--accent-red);
color: #fff;
padding: 30px 20px;
text-align: center;
}
.w32-title {
font-size: 2rem;
color: #fff;
margin-bottom: 10px;
}
.w32-subtitle {
font-size: 1.2rem;
font-family: var(--font-body);
opacity: 0.9;
}
.w32-countdown {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.w32-time {
background: rgba(255, 255, 255, 0.2);
width: 80px;
height: 80px;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.w32-num {
font-size: 2rem;
font-weight: bold;
font-family: var(--font-heading);
line-height: 1;
}
.w32-text {
font-size: 0.8rem;
text-transform: uppercase;
opacity: 0.8;
} .w33-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
}
.w33-card {
display: flex;
max-width: 900px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}
.w33-img {
flex: 1;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
}
.w33-content {
flex: 1;
padding: 40px;
}
.w33-flash-badge {
display: inline-block;
background: var(--accent-red);
color: #fff;
padding: 5px 12px;
border-radius: 4px;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
margin-bottom: 15px;
}
.w33-title {
font-size: 2.2rem;
margin-bottom: 10px;
}
.w33-prices {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.w33-old {
text-decoration: line-through;
color: #999;
font-size: 1.2rem;
}
.w33-new {
color: var(--accent-red);
font-size: 1.8rem;
font-weight: bold;
}
.w33-progress-wrap {
margin-bottom: 30px;
}
.w33-progress-text {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
margin-bottom: 8px;
}
.w33-progress-bar {
height: 6px;
background: #eee;
border-radius: 3px;
overflow: hidden;
}
.w33-progress-fill {
height: 100%;
background: var(--accent-red);
width: 85%;
} .w34-wrapper {
padding: var(--spacing-xl) 20px;
}
.w34-box {
background: var(--bg-dark);
border: 2px solid var(--wp--preset--color--primary);
padding: 50px;
text-align: center;
max-width: 800px;
margin: 0 auto;
border-radius: 16px;
position: relative;
}
.w34-icon {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: var(--wp--preset--color--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.w34-box h2 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 15px;
}
.w34-box p {
color: #ddd;
font-size: 1.2rem;
margin-bottom: 30px;
}
.w34-code {
display: inline-block;
padding: 15px 30px;
border: 2px dashed #fff;
color: var(--wp--preset--color--primary);
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 2px;
} .w35-wrapper {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.w35-bg {
position: absolute;
inset: 0;
background: url(https://images.unsplash.com/photo-1593030103066-0093718efeb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80) center/cover;
filter: grayscale(100%) brightness(0.4);
}
.w35-content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
}
.w35-content h2 {
font-size: 4rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #fff;
margin-bottom: 10px;
}
.w35-content p {
font-size: 1.5rem;
font-family: var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 30px;
} @media (max-width: 992px) {
.w26-wrapper,
.w28-container,
.w29-wrapper,
.w30-grid,
.w33-card,
.w25-container,
.w12-row,
.w8-ps,
.w4-hero {
flex-direction: column;
grid-template-columns: 1fr;
}
.w26-img,
.w29-img {
min-height: 400px;
}
.w12-row:nth-child(even) {
flex-direction: column;
}
.w12-img {
height: 300px;
width: 100%;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
h3 {
font-size: 1.5rem !important;
}
.w27-grid,
.w31-masonry,
.w17-grid,
.w11-grid,
.w14-numbers {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
gap: 20px;
}
.w14-stat {
width: 100%;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 20px;
}
.w14-stat:last-child {
border-bottom: none;
}
.w28-container {
padding: 20px;
}
.w28-sub {
grid-template-columns: 1fr 1fr;
}
.w32-countdown {
flex-wrap: wrap;
}
.w32-time {
width: 70px;
height: 70px;
}
.w32-num {
font-size: 1.5rem;
}
.w34-box {
padding: 30px 20px;
}
.w34-code {
font-size: 1.2rem;
padding: 10px 20px;
}
.w35-content h2 {
font-size: 2.5rem;
} .w1-hero {
flex-direction: column;
}
.w1-hero-content {
padding: 2rem;
}
.w1-hero-image {
min-height: 300px;
}
.w5-trust-bar {
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.w6-story {
flex-direction: column;
gap: 30px;
}
.w6-title {
border-left: none;
border-top: 4px solid var(--wp--preset--color--primary);
padding-left: 0;
padding-top: 15px;
}
.w15-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.w23-grid {
grid-template-columns: 1fr 1fr;
}
.w19-flex {
flex-direction: column;
gap: 20px;
}
} .w46-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
}
.w46-header {
text-align: center;
margin-bottom: 60px;
}
.w46-timeline {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.w46-timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
bottom: 0;
width: 2px;
background: var(--border-color);
}
.w46-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
position: relative;
}
.w46-item:nth-child(even) {
flex-direction: row-reverse;
}
.w46-content {
width: 45%;
background: transparent;
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
position: relative;
}
.w46-content::before {
content: '';
position: absolute;
top: 30px;
width: 20px;
height: 2px;
background: var(--wp--preset--color--primary);
}
.w46-item:nth-child(odd) .w46-content::before {
right: -20px;
}
.w46-item:nth-child(even) .w46-content::before {
left: -20px;
}
.w46-number {
position: absolute;
left: 50%;
top: 20px;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: var(--wp--preset--color--primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-family: var(--font-heading);
font-size: 1.2rem;
z-index: 2;
border: 4px solid var(--bg-light);
}
.w46-content h3 {
color: var(--wp--preset--color--primary);
margin-bottom: 10px;
font-size: 1.5rem;
} .w47-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
}
.w47-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 50px;
position: relative;
}
.w47-step {
position: relative;
padding: 0 20px;
}
.w47-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: rgba(255,255,255,0.03);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--wp--preset--color--primary);
border: 1px dashed var(--wp--preset--color--primary);
}
.w47-title {
font-size: 1.2rem;
margin-bottom: 10px;
} .w48-wrapper {
display: flex;
min-height: 500px;
flex-wrap: wrap;
}
.w48-img {
flex: 1;
min-width: 300px;
background: url(https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
position: relative;
}
.w48-content {
flex: 1;
min-width: 300px;
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--bg-dark);
color: #fff;
}
.w48-content h2 {
font-size: 3rem;
color: #fff;
margin-bottom: 20px;
}
.w48-content p {
color: #ccc;
margin-bottom: 30px;
font-size: 1.1rem;
}
.w48-tag {
color: var(--wp--preset--color--primary);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
font-weight: bold;
margin-bottom: 15px;
} .w49-wrapper {
position: relative;
padding: var(--spacing-xl) 20px;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80) center/cover;
background-attachment: fixed;
}
.w49-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.w49-content {
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
background: transparent;
padding: 50px;
border-radius: 12px;
text-align: center;
}
.w49-content h2 {
font-size: 2.5rem;
}
.w49-logos {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
opacity: 0.7;
}
.w49-logos span {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: bold;
} .w50-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w50-container {
display: flex;
max-width: 1200px;
margin: 0 auto;
gap: 60px;
align-items: center;
flex-wrap: wrap;
}
.w50-visual {
flex: 1;
position: relative;
min-width: 300px;
aspect-ratio: 3/4;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
border-radius: 12px;
}
.w50-point {
position: absolute;
width: 30px;
height: 30px;
background: var(--wp--preset--color--primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border: 4px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: transform 0.3s;
}
.w50-point:hover {
transform: scale(1.2);
}
.w50-content {
flex: 1;
min-width: 300px;
}
.w50-feature {
margin-bottom: 30px;
padding-left: 20px;
border-left: 2px solid var(--border-color);
}
.w50-feature h4 {
color: var(--wp--preset--color--primary);
font-size: 1.2rem;
margin-bottom: 5px;
} .w51-wrapper {
padding: var(--spacing-xl);
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w51-card {
max-width: 900px;
background: transparent;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
padding: 50px;
position: relative;
}
.w51-quote {
font-size: 1.8rem;
font-family: var(--font-heading);
font-style: italic;
line-height: 1.5;
color: #ffffff;
margin-bottom: 30px;
}
.w51-quote-mark {
position: absolute;
top: -30px;
left: 40px;
font-size: 5rem;
color: var(--wp--preset--color--primary);
opacity: 0.2;
line-height: 1;
font-family: serif;
}
.w51-author {
display: flex;
align-items: center;
gap: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px;
}
.w51-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: url(https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80) center/cover;
}
.w51-name {
font-weight: bold;
font-size: 1.2rem;
}
.w51-title {
color: var(--text-muted);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
} .w52-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
}
.w52-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1100px;
margin: 50px auto 0;
}
.w52-item {
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
transition: all 0.3s;
}
.w52-item:hover {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-5px);
}
.w52-item h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.w52-item p {
font-size: 0.95rem;
} .w53-wrapper {
display: flex;
flex-wrap: wrap;
background: transparent;
}
.w53-content {
flex: 1;
padding: var(--spacing-xl);
min-width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.w53-content h2 {
font-size: 2.8rem;
}
.w53-badge-wrap {
display: flex;
gap: 20px;
margin-top: 30px;
}
.w53-badge {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.03);
padding: 10px 20px;
border-radius: 30px;
font-weight: 500;
font-size: 0.9rem;
}
.w53-badge svg {
color: #059669;
}
.w53-img {
flex: 1;
min-width: 300px;
background: url(https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
min-height: 400px;
} .w54-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
color: #fff;
text-align: center;
}
.w54-container {
max-width: 800px;
margin: 0 auto;
}
.w54-container h2 {
color: #fff;
font-size: 3rem;
margin-bottom: 20px;
}
.w54-info {
display: flex;
justify-content: center;
gap: 40px;
margin: 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 0;
flex-wrap: wrap;
}
.w54-block h4 {
color: var(--wp--preset--color--primary);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 5px;
} .w55-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
}
.w55-card {
background: transparent;
border: 2px solid var(--wp--preset--color--primary);
padding: 50px;
text-align: center;
max-width: 700px;
border-radius: 12px;
position: relative;
}
.w55-icon {
width: 80px;
height: 80px;
background: transparent;
border: 2px solid var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.w55-card h2 {
font-size: 2.2rem;
margin-top: 20px;
} @media (max-width: 992px) {
.w47-grid,
.w52-grid {
grid-template-columns: repeat(2, 1fr);
}
.w46-timeline::before {
left: 40px;
}
.w46-number {
left: 40px;
transform: translateX(-50%);
}
.w46-item,
.w46-item:nth-child(even) {
flex-direction: column;
align-items: flex-end;
}
.w46-content {
width: calc(100% - 90px);
margin-bottom: 30px;
}
.w46-content::before,
.w46-item:nth-child(even) .w46-content::before,
.w46-item:nth-child(odd) .w46-content::before {
display: none;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
h3 {
font-size: 1.5rem !important;
}
.w47-grid,
.w52-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.w49-content {
padding: 30px 20px;
}
.w51-card {
padding: 30px;
}
.w51-quote {
font-size: 1.3rem;
}
.w53-badge-wrap {
flex-direction: column;
gap: 10px;
}
.w54-info {
flex-direction: column;
gap: 20px;
}
.w55-card {
padding: 40px 20px;
}
} .w66-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80) center/cover;
position: relative;
}
.w66-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.w66-content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
max-width: 600px;
padding: 40px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
background: rgba(0, 0, 0, 0.4);
}
.w66-content h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.w66-badge {
display: inline-block;
background: var(--wp--preset--color--primary);
padding: 5px 15px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 20px;
border-radius: 20px;
} .w67-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
color: #fff;
display: flex;
justify-content: center;
}
.w67-container {
max-width: 800px;
text-align: center;
}
.w67-container h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.w67-form {
display: flex;
gap: 10px;
margin-top: 40px;
flex-wrap: wrap;
justify-content: center;
}
.w67-input {
padding: 15px 20px;
font-size: 1rem;
border: none;
border-radius: 4px;
flex: 1;
min-width: 250px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
outline: none;
}
.w67-input::placeholder {
color: #aaa;
}
.w67-input:focus {
background: rgba(255, 255, 255, 0.2);
} .w68-wrapper {
padding: var(--spacing-xl) 20px;
}
.w68-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.w68-card {
background: transparent;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
}
.w68-img {
height: 300px;
background-size: cover;
background-position: center;
position: relative;
}
.w68-status {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 8px;
}
.w68-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #059669;
}
.w68-status-dot.dev {
background: #f59e0b;
}
.w68-content {
padding: 30px;
}
.w68-progress {
height: 6px;
background: #eee;
border-radius: 3px;
margin: 20px 0 10px;
overflow: hidden;
}
.w68-progress-bar {
height: 100%;
background: var(--wp--preset--color--primary);
}
.w68-meta {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-muted);
} .w69-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.w69-images {
display: flex;
gap: 20px;
flex: 1;
min-width: 300px;
}
.w69-img1 {
flex: 2;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 3/4;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80) center/cover;
}
.w69-img2 {
flex: 1;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 2/4;
margin-top: 50px;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80) center/cover;
filter: grayscale(100%);
}
.w69-content {
flex: 1;
min-width: 300px;
}
.w69-tag {
color: var(--wp--preset--color--primary);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
.w69-title {
font-size: 2.8rem;
margin: 15px 0;
} .w70-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w70-container {
max-width: 800px;
margin: 0 auto;
}
.w70-title {
font-size: 2.5rem;
margin-bottom: 40px;
}
.w70-steps {
text-align: left;
}
.w70-step {
border-left: 3px solid var(--border-color);
padding: 0 0 30px 30px;
position: relative;
}
.w70-step:last-child {
border-left-color: transparent;
}
.w70-step::before {
content: '';
position: absolute;
left: -11px;
top: 0;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid var(--border-color);
border-radius: 50%;
}
.w70-step.active {
border-left-color: var(--wp--preset--color--primary);
}
.w70-step.active::before {
border-color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--primary);
}
.w70-date {
font-weight: bold;
color: var(--wp--preset--color--primary);
font-size: 0.9rem;
margin-bottom: 5px;
}
.w70-desc {
font-size: 1.2rem;
color: #ffffff;
} .w71-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
}
.w71-box {
background: url(https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80) center/cover;
width: 100%;
max-width: 1200px;
border-radius: 20px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 450px;
}
.w71-box::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.w71-content {
position: relative;
z-index: 2;
padding: 50px;
width: 100%;
max-width: 600px;
color: #fff;
margin-right: auto;
}
.w71-content h2 {
font-size: 3.5rem;
color: #fff;
line-height: 1;
margin-bottom: 20px;
}
.w71-content p {
color: #ddd;
font-size: 1.2rem;
} .w72-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
}
.w72-card {
display: inline-block;
border: 2px dashed var(--wp--preset--color--primary);
padding: 50px 80px;
border-radius: 12px;
background: rgba(255,255,255,0.03);
max-width: 700px;
}
.w72-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.w72-title {
font-size: 2.2rem;
margin-bottom: 15px;
} .w73-wrapper {
display: flex;
flex-wrap: wrap;
}
.w73-img {
flex: 1;
min-width: 300px;
background: url(https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
min-height: 400px;
}
.w73-content {
flex: 1;
padding: var(--spacing-xl);
background: var(--text-dark);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 300px;
}
.w73-content h2 {
font-size: 2.5rem;
color: #fff;
}
.w73-content p {
color: #ccc;
margin-bottom: 30px;
}
.w73-list {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.w73-list li {
margin-bottom: 15px;
padding-left: 30px;
position: relative;
color: #ddd;
}
.w73-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--wp--preset--color--primary);
font-weight: bold;
} .w74-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w74-text {
font-size: 4rem;
font-family: var(--font-heading);
max-width: 1000px;
margin: 0 auto;
line-height: 1.2;
color: var(--border-color);
font-weight: bold;
}
.w74-text span {
color: #ffffff;
}
.w74-sub {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--wp--preset--color--primary);
margin-top: 30px;
font-weight: bold;
} .w75-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
}
.w75-container {
max-width: 800px;
margin: 0 auto;
}
.w75-item {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w75-header {
padding: 30px 0;
font-size: 1.5rem;
font-family: var(--font-heading);
font-weight: bold;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-muted);
transition: 0.3s;
}
.w75-header:hover,
.w75-header.active {
color: #ffffff;
}
.w75-header::after {
content: '+';
font-size: 1.5rem;
color: var(--wp--preset--color--primary);
font-family: var(--font-body);
}
.w75-header.active::after {
content: '−';
}
.w75-content {
padding: 0 0 30px;
display: none;
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1.8;
} @media (max-width: 992px) {
.w68-grid {
grid-template-columns: 1fr;
}
.w69-wrapper {
flex-direction: column;
text-align: center;
}
.w73-wrapper {
flex-direction: column;
}
.w74-text {
font-size: 3rem;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
.w66-content h2 {
font-size: 2rem;
}
.w67-form {
flex-direction: column;
}
.w67-input {
width: 100%;
box-sizing: border-box;
}
.w71-content {
padding: 30px;
}
.w71-content h2 {
font-size: 2.5rem;
}
.w72-card {
padding: 30px 20px;
}
.w72-title {
font-size: 1.8rem;
}
.w74-text {
font-size: 2rem;
}
.w75-header {
font-size: 1.2rem;
}
}  .w76-wrapper {
padding: 15px;
background: #fff5f5;
border-bottom: 2px solid var(--accent-red);
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
color: var(--accent-red);
font-weight: bold;
}
.w76-icon {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
} .w77-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
background: transparent;
}
.w77-tag {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--bg-dark);
color: #fff;
padding: 10px 20px;
border-radius: 30px;
font-size: 0.9rem;
font-weight: bold;
}
.w77-tag span {
color: var(--accent-red);
} .w78-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w78-card {
background: transparent;
border: 1px solid var(--wp--preset--color--primary);
border-radius: 8px;
padding: 30px;
max-width: 500px;
text-align: center;
position: relative;
}
.w78-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--wp--preset--color--primary);
color: #fff;
padding: 5px 15px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
font-weight: bold;
} .w79-wrapper {
padding: var(--spacing-md);
display: flex;
justify-content: center;
}
.w79-counter {
display: flex;
align-items: center;
gap: 10px;
background: #eef2ff;
color: #4f46e5;
padding: 10px 20px;
border-radius: 6px;
font-weight: 500;
font-size: 0.95rem;
}
.w79-dot {
width: 8px;
height: 8px;
background: #4f46e5;
border-radius: 50%;
animation: blink 1.5s infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
} .w80-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
background: url(https://customfit.ro/wp-content/uploads/2026/03/customfit-logo-adresa.png) center/cover;
position: relative;
}
.w80-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.w80-icon {
font-size: 3rem;
margin-bottom: 15px;
color: #ffffff;
} .w81-wrapper {
padding: var(--spacing-md);
display: flex;
justify-content: center;
}
.w81-warning {
border: 1px solid #f59e0b;
background: #fffbeb;
color: #b45309;
padding: 15px 25px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 15px;
max-width: 600px;
} .w82-wrapper {
padding: var(--spacing-md);
display: flex;
justify-content: center;
background: transparent;
}
.w82-notice {
border-left: 4px solid var(--text-dark);
padding: 15px 20px;
background: rgba(255,255,255,0.03);
max-width: 700px;
font-style: italic;
color: var(--text-muted);
} .w83-wrapper {
padding: var(--spacing-lg) 20px;
display: flex;
justify-content: center;
}
.w83-box {
width: 100%;
max-width: 400px;
}
.w83-text {
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 0.9rem;
margin-bottom: 8px;
}
.w83-bar {
height: 8px;
background: #eee;
border-radius: 4px;
overflow: hidden;
}
.w83-fill {
width: 92%;
height: 100%;
background: var(--wp--preset--color--primary);
} .w84-wrapper {
padding: 15px;
background: var(--text-dark);
color: #fff;
text-align: center;
font-size: 0.95rem;
font-weight: 500;
}
.w84-wrapper span {
color: var(--wp--preset--color--primary);
font-weight: bold;
} .w85-wrapper {
padding: var(--spacing-md);
text-align: center;
}
.w85-btn {
border: 1px dashed var(--wp--preset--color--primary);
color: #ffffff;
padding: 10px 20px;
font-weight: bold;
background: transparent;
cursor: default;
}  .w86-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w86-container {
max-width: 800px;
margin: 0 auto;
}
.w86-item {
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 10px;
border-radius: 6px;
overflow: hidden;
}
.w86-header {
background: rgba(255,255,255,0.03);
padding: 15px 20px;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.w86-header::after {
content: '+';
font-size: 1.2rem;
color: var(--wp--preset--color--primary);
}
.w86-content {
padding: 20px;
display: none;
color: var(--text-muted);
background: transparent;
border-top: 1px solid rgba(255,255,255,0.1);
} .w87-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
background: rgba(255,255,255,0.03);
}
.w87-card {
background: transparent;
padding: 40px;
border-radius: 12px;
max-width: 600px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.w87-icon {
width: 60px;
height: 60px;
background: rgba(195, 154, 95, 0.1);
color: var(--wp--preset--color--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
} .w88-wrapper {
padding: var(--spacing-md);
display: flex;
justify-content: center;
}
.w88-badge {
border: 1px solid var(--accent-green);
background: #f0fdf4;
color: var(--accent-green);
padding: 15px 20px;
border-radius: 8px;
display: flex;
align-items: flex-start;
gap: 15px;
max-width: 500px;
} .w89-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w89-flex {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
max-width: 900px;
margin: 0 auto;
flex-wrap: wrap;
}
.w89-text {
flex: 1;
min-width: 300px;
}
.w89-text h3 {
font-size: 2rem;
}
.w89-circle {
width: 150px;
height: 150px;
border: 8px solid var(--wp--preset--color--primary);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.w89-circle span {
font-size: 2rem;
font-weight: bold;
font-family: var(--font-heading);
line-height: 1;
} .w90-wrapper {
padding: var(--spacing-lg) 20px;
display: flex;
justify-content: center;
}
.w90-box {
background: var(--bg-dark);
color: #fff;
padding: 30px 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 100%;
max-width: 900px;
flex-wrap: wrap;
}
.w90-box h3 {
color: #fff;
margin-bottom: 5px;
}  .w91-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w91-card {
background: transparent;
border-radius: 12px;
padding: 30px;
max-width: 800px;
width: 100%;
border: 1px solid rgba(255,255,255,0.1);
}
.w91-item {
display: flex;
align-items: center;
gap: 20px;
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w91-item:last-child {
border-bottom: none;
}
.w91-img {
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
}
.w91-info {
flex: 1;
}
.w91-info h4 {
margin: 0 0 5px;
font-family: var(--font-body);
font-size: 1rem;
}
.w91-price {
color: var(--text-muted);
font-size: 0.9rem;
} .w92-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w92-bundle {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.w92-product {
width: 150px;
text-align: center;
}
.w92-product img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
border: 2px solid transparent;
}
.w92-product.active img {
border-color: var(--wp--preset--color--primary);
}
.w92-plus {
font-size: 2rem;
color: var(--text-muted);
}
.w92-total {
text-align: center;
padding: 20px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
max-width: 400px;
margin: 0 auto;
} .w93-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
}
.w93-modal {
background: transparent;
max-width: 600px;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.w93-header {
background: var(--accent-green);
color: #fff;
padding: 20px;
text-align: center;
}
.w93-body {
padding: 30px;
text-align: center;
} .w94-wrapper {
padding: var(--spacing-md) 20px;
display: flex;
justify-content: center;
}
.w94-toggle-box {
border: 1px solid var(--wp--preset--color--primary);
border-radius: 8px;
padding: 20px;
max-width: 500px;
background: transparent;
display: flex;
align-items: flex-start;
gap: 15px;
}
.w94-radio {
margin-top: 5px;
accent-color: var(--wp--preset--color--primary);
width: 18px;
height: 18px;
} .w95-wrapper {
padding: var(--spacing-lg) 20px;
display: flex;
justify-content: center;
background: rgba(255,255,255,0.03);
}
.w95-addon {
display: flex;
align-items: center;
gap: 20px;
background: transparent;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
max-width: 600px;
}  .w96-wrapper {
padding: var(--spacing-md) 0;
display: flex;
justify-content: center;
gap: 15px;
filter: grayscale(100%);
opacity: 0.6;
flex-wrap: wrap;
}
.w96-badge-img {
height: 30px;
} .w97-wrapper {
background: var(--text-dark);
color: #fff;
padding: 40px 20px;
}
.w97-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.w97-item svg {
width: 30px;
height: 30px;
color: var(--wp--preset--color--primary);
margin-bottom: 15px;
}
.w97-item h4 {
font-size: 1rem;
color: #fff;
margin-bottom: 5px;
}
.w97-item p {
font-size: 0.85rem;
color: #aaa;
margin: 0;
} .w98-wrapper {
padding: var(--spacing-lg);
display: flex;
justify-content: center;
}
.w98-stamp {
border: 2px solid var(--text-dark);
border-radius: 50%;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-transform: uppercase;
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 1px;
color: #ffffff;
}
.w98-stamp span {
font-size: 1rem;
font-family: var(--font-heading);
font-style: italic;
text-transform: none;
margin: 5px 0;
} .w99-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w99-container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.w99-stars {
color: #FFA41C;
font-size: 1.5rem;
letter-spacing: 5px;
margin-bottom: 15px;
} .w100-wrapper {
padding: 20px;
background: transparent;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
justify-content: space-between;
align-items: center;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
border-radius: 8px 8px 0 0;
}
.w100-price {
font-size: 1.5rem;
font-weight: bold;
font-family: var(--font-heading);
}
.w100-label {
font-size: 0.8rem;
text-transform: uppercase;
color: var(--text-muted);
} @media (max-width: 768px) {
.w90-box,
.w91-item,
.w95-addon {
flex-direction: column;
text-align: center;
}
.w97-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.w100-wrapper {
flex-direction: column;
gap: 15px;
text-align: center;
}
} .w101-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w101-title {
font-size: 4rem;
max-width: 900px;
margin: 0 auto;
color: #ffffff;
line-height: 1.1;
letter-spacing: -1px;
}
.w101-title span {
font-style: italic;
color: var(--wp--preset--color--primary);
}
.w101-subtitle {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 4px;
color: var(--text-muted);
margin-top: 30px;
} .w102-wrapper {
display: flex;
flex-wrap: wrap;
background: var(--bg-dark);
color: #fff;
}
.w102-img {
flex: 1;
min-width: 300px;
min-height: 500px;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80) center/cover;
filter: grayscale(100%);
transition: 0.5s;
}
.w102-wrapper:hover .w102-img {
filter: grayscale(0%);
}
.w102-content {
flex: 1;
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.w102-content h2 {
font-size: 3rem;
color: #fff;
margin-bottom: 20px;
}
.w102-stat {
display: flex;
gap: 40px;
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
}
.w102-stat div h4 {
color: var(--wp--preset--color--primary);
font-size: 2rem;
margin-bottom: 5px;
} .w103-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w103-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.w103-main {
height: 600px;
background: url(https://images.unsplash.com/photo-1593030103066-0093718efeb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80) center/cover;
border-radius: 12px;
}
.w103-side {
display: flex;
flex-direction: column;
gap: 20px;
}
.w103-sub {
flex: 1;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
border-radius: 12px;
}
.w103-text {
flex: 1;
background: rgba(255,255,255,0.03);
border-radius: 12px;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.w103-text h3 {
font-size: 1.8rem;
} .w104-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w104-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1000px;
margin: 50px auto 0;
}
.w104-card {
position: relative;
height: 350px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.w104-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: 0.5s;
}
.w104-card:hover .w104-bg {
transform: scale(1.1);
filter: blur(3px) brightness(0.6);
}
.w104-front {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
color: #fff;
transition: 0.5s;
}
.w104-front h3 {
font-size: 2rem;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
}
.w104-back {
position: absolute;
inset: 0;
padding: 30px;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: 0.5s;
display: flex;
flex-direction: column;
color: #fff;
}
.w104-card:hover .w104-front {
opacity: 0;
}
.w104-card:hover .w104-back {
opacity: 1;
transform: translateY(0);
} .w105-wrapper {
display: flex;
align-items: center;
background: transparent;
padding: var(--spacing-xl) 20px;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.w105-visual {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(255,255,255,0.03);
display: flex;
align-items: center;
justify-content: center;
}
.w105-text-circle {
font-family: 'Great Vibes', cursive;
color: var(--wp--preset--color--primary);
font-size: 4rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.w105-content {
max-width: 500px;
}
.w105-content h2 {
font-size: 2.8rem;
}
.w105-content p {
font-size: 1.1rem;
margin-bottom: 30px;
} .w106-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
}
.w106-container {
max-width: 900px;
margin: 0 auto;
column-count: 2;
column-gap: 50px;
}
.w106-container p {
font-size: 1.1rem;
line-height: 1.8;
text-align: justify;
margin-bottom: 20px;
}
.w106-container p:first-child::first-letter {
float: left;
font-size: 5rem;
line-height: 0.8;
padding-right: 15px;
padding-top: 10px;
color: #ffffff;
font-family: var(--font-heading);
}
.w106-quote {
break-inside: avoid;
font-size: 1.5rem;
font-family: var(--font-heading);
font-style: italic;
color: var(--wp--preset--color--primary);
text-align: center;
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
margin: 30px 0;
} .w107-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
background: transparent;
}
.w107-title {
font-size: 2.5rem;
margin-bottom: 60px;
}
.w107-flex {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 30px;
flex-wrap: wrap;
max-width: 1100px;
margin: 0 auto;
}
.w107-item {
flex: 1;
min-width: 250px;
text-align: left;
padding: 30px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
position: relative;
}
.w107-year {
position: absolute;
top: -20px;
left: 30px;
background: var(--text-dark);
color: #fff;
font-weight: bold;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
}
.w107-item h4 {
margin-top: 10px;
font-size: 1.3rem;
} .w108-wrapper {
padding: 40px 0;
background: var(--wp--preset--color--primary);
overflow: hidden;
white-space: nowrap;
display: flex;
}
.w108-scroll {
display: inline-block;
font-size: 4rem;
font-family: var(--font-heading);
color: #fff;
text-transform: uppercase;
animation: scrollLeft 20s linear infinite;
}
.w108-scroll span {
margin: 0 40px;
}
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
} .w109-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
text-align: center;
}
.w109-video {
width: 100%;
max-width: 1000px;
aspect-ratio: 16/9;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80) center/cover;
position: relative;
border-radius: 12px;
margin-top: 40px;
cursor: pointer;
}
.w109-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 2rem;
transition: 0.3s;
}
.w109-video:hover .w109-play {
background: var(--wp--preset--color--primary);
color: #fff;
transform: translate(-50%, -50%) scale(1.1);
} .w110-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
}
.w110-box {
border: 2px solid var(--wp--preset--color--primary);
padding: 50px;
max-width: 800px;
width: 100%;
text-align: center;
position: relative;
}
.w110-bg-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 12rem;
font-family: var(--font-heading);
color: rgba(195, 154, 95, 0.05);
z-index: 1;
pointer-events: none;
}
.w110-content {
position: relative;
z-index: 2;
}
.w110-math {
font-size: 3rem;
font-family: monospace;
font-weight: bold;
color: var(--wp--preset--color--primary);
margin: 20px 0;
} .w111-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
}
.w111-card {
max-width: 900px;
margin: 0 auto;
display: flex;
background: transparent;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.w111-img {
flex: 1;
background: url(https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
}
.w111-content {
flex: 1;
padding: 50px;
position: relative;
}
.w111-pin {
position: absolute;
top: 0;
right: 40px;
background: var(--wp--preset--color--primary);
color: #fff;
padding: 15px 10px;
font-weight: bold;
border-radius: 0 0 4px 4px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
} .w112-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
background: transparent;
}
.w112-container {
position: relative;
max-width: 800px;
margin: 40px auto 0;
}
.w112-img {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: block;
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
}
.w112-line {
position: absolute;
background: var(--border-color);
height: 1px;
width: 150px;
}
.w112-label {
position: absolute;
text-align: left;
max-width: 200px;
font-size: 0.9rem;
}
.w112-label strong {
display: block;
color: var(--wp--preset--color--primary);
font-size: 1.1rem;
margin-bottom: 5px;
} .w113-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--text-dark);
color: #fff;
text-align: center;
}
.w113-content {
max-width: 700px;
margin: 0 auto;
}
.w113-line {
width: 60px;
height: 3px;
background: var(--wp--preset--color--primary);
margin: 30px auto;
}
.w113-text {
font-size: 1.5rem;
line-height: 1.6;
font-style: italic;
color: #ddd;
} .w114-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w114-flex {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.w114-card {
flex: 1;
min-width: 300px;
max-width: 400px;
position: relative;
height: 450px;
border-radius: 8px;
overflow: hidden;
}
.w114-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.8s ease;
}
.w114-card:hover .w114-bg {
transform: scale(1.05);
}
.w114-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
color: #fff;
}
.w114-badge {
background: transparent;
color: #ffffff;
padding: 5px 10px;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
align-self: flex-start;
margin-bottom: 10px;
border-radius: 4px;
} .w115-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80) center/cover fixed;
position: relative;
}
.w115-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
}
.w115-content {
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 60px 40px;
max-width: 600px;
text-align: center;
color: #fff;
backdrop-filter: blur(5px);
} .w116-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w116-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 1200px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.1);
}
.w116-item {
text-align: center;
padding: 40px 20px;
border-right: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w116-val {
font-size: 3rem;
font-family: var(--font-heading);
color: var(--wp--preset--color--primary);
margin-bottom: 10px;
display: block;
}
.w116-lbl {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
font-weight: 500;
display: block;
} .w117-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w117-container {
max-width: 800px;
margin: 0 auto;
}
.w117-options {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
flex-wrap: wrap;
}
.w117-btn {
padding: 15px 30px;
border: 2px solid var(--border-color);
background: transparent;
cursor: pointer;
border-radius: 30px;
font-weight: 600;
color: var(--text-muted);
transition: 0.3s;
}
.w117-btn:hover {
border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary);
} .w118-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
background: transparent;
}
.w118-locations {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
margin-top: 50px;
}
.w118-loc {
display: flex;
flex-direction: column;
align-items: center;
max-width: 200px;
}
.w118-pin {
width: 50px;
height: 50px;
background: rgba(195, 154, 95, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--primary);
margin-bottom: 15px;
} .w119-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--text-dark);
color: #fff;
display: flex;
justify-content: center;
}
.w119-card {
display: flex;
align-items: center;
gap: 40px;
max-width: 900px;
flex-wrap: wrap;
}
.w119-img {
width: 250px;
height: 350px;
background: url(https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80) center/cover;
border-radius: 8px;
}
.w119-content {
flex: 1;
min-width: 300px;
}
.w119-content h3 {
font-size: 2.5rem;
color: #fff;
margin-bottom: 10px;
}
.w119-signature {
font-family: 'Great Vibes', cursive;
color: var(--wp--preset--color--primary);
font-size: 2.5rem;
margin-top: 30px;
} .w120-wrapper {
padding: 30px 20px;
background: var(--wp--preset--color--primary);
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
border-radius: 8px;
flex-wrap: wrap;
gap: 20px;
}
.w120-text {
color: #fff;
font-size: 1.5rem;
font-weight: 600;
font-family: var(--font-heading);
} @media (max-width: 992px) {
.w106-container {
column-count: 1;
}
.w103-grid {
grid-template-columns: 1fr;
}
.w116-grid {
grid-template-columns: repeat(2, 1fr);
}
.w111-card {
flex-direction: column;
}
.w111-img {
height: 300px;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
.w101-title {
font-size: 2.5rem;
}
.w104-grid {
grid-template-columns: 1fr;
}
.w107-flex {
flex-direction: column;
}
.w118-locations {
flex-direction: column;
gap: 30px;
align-items: center;
}
.w120-wrapper {
justify-content: center;
text-align: center;
}
.w112-line,
.w112-label {
display: none; }
} .w121-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w121-container {
position: relative;
max-width: 600px;
margin: 0 auto;
}
.w121-img {
width: 100%;
filter: contrast(1.1);
}
.w121-dot {
position: absolute;
width: 24px;
height: 24px;
background: var(--wp--preset--color--primary);
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
color: #fff;
font-weight: bold;
font-size: 12px;
transition: 0.3s;
}
.w121-dot:hover {
transform: scale(1.2);
}
.w121-tooltip {
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
background: var(--text-dark);
color: #fff;
padding: 10px 15px;
border-radius: 4px;
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.w121-dot:hover .w121-tooltip {
opacity: 1;
bottom: 40px;
}
.w121-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--text-dark) transparent transparent transparent;
} .w122-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
align-items: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.w122-img {
flex: 1;
min-width: 300px;
border-radius: 8px;
overflow: hidden;
height: 600px;
background: url(https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
}
.w122-content {
flex: 1;
min-width: 300px;
}
.w122-item {
margin-bottom: 30px;
display: flex;
gap: 20px;
}
.w122-icon {
color: var(--wp--preset--color--primary);
font-size: 2rem;
line-height: 1;
}
.w122-text h4 {
font-size: 1.3rem;
margin-bottom: 5px;
} .w123-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
align-items: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap-reverse;
background: rgba(255,255,255,0.03);
border-radius: 12px;
}
.w123-content {
flex: 1;
min-width: 300px;
}
.w123-item {
margin-bottom: 30px;
display: flex;
gap: 20px;
flex-direction: row-reverse;
text-align: right;
}
.w123-icon {
color: var(--wp--preset--color--primary);
font-size: 2rem;
line-height: 1;
}
.w123-text h4 {
font-size: 1.3rem;
margin-bottom: 5px;
}
.w123-img {
flex: 1;
min-width: 300px;
border-radius: 8px;
overflow: hidden;
height: 500px;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
} .w124-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--text-dark);
color: #fff;
text-align: center;
}
.w124-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1000px;
margin: 50px auto 0;
}
.w124-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 40px 20px;
border-radius: 8px;
}
.w124-number {
font-size: 3rem;
font-family: var(--font-heading);
color: var(--wp--preset--color--primary);
font-style: italic;
opacity: 0.5;
margin-bottom: 10px;
display: block;
}
.w124-card h4 {
font-size: 1.5rem;
color: #fff;
} .w125-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w125-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
max-width: 800px;
margin: 40px auto 0;
}
.w125-item {
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 20px;
cursor: pointer;
transition: 0.3s;
}
.w125-item:hover {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transform: translateY(-3px);
}
.w125-circle {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 15px;
background-size: cover;
background-position: center;
border: 2px solid #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} .w126-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w126-flex {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 40px;
flex-wrap: wrap;
}
.w126-col {
flex: 1;
min-width: 250px;
max-width: 300px;
}
.w126-img-box {
width: 100%;
aspect-ratio: 3/4;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.1);
background: #fff url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80) center/cover;
filter: grayscale(50%);
}
.w126-col h4 {
font-size: 1.3rem;
margin-bottom: 10px;
}
.w126-col p {
font-size: 0.9rem;
} .w127-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
}
.w127-box {
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
max-width: 900px;
width: 100%;
display: flex;
overflow: hidden;
flex-wrap: wrap;
}
.w127-img {
flex: 1;
min-width: 300px;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
}
.w127-list {
flex: 1;
min-width: 300px;
padding: 40px;
background: rgba(255,255,255,0.03);
}
.w127-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.w127-list li {
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-weight: 500;
display: flex;
align-items: flex-start;
gap: 10px;
}
.w127-list li:last-child {
border-bottom: none;
}
.w127-list li::before {
content: '✓';
color: var(--wp--preset--color--primary);
font-weight: bold;
font-size: 1.2rem;
} .w128-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
background: transparent;
}
.w128-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 900px;
margin: 40px auto 0;
}
.w128-card {
text-align: left;
padding: 30px;
border: 1px solid rgba(255,255,255,0.1);
border-left: 4px solid var(--wp--preset--color--primary);
border-radius: 8px;
}
.w128-card h4 {
font-size: 1.4rem;
color: var(--wp--preset--color--primary);
} .w129-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
color: #fff;
text-align: center;
}
.w129-relative {
position: relative;
max-width: 800px;
margin: 40px auto 0;
}
.w129-relative img {
width: 100%;
opacity: 0.8;
border-radius: 8px;
}
.w129-marker {
position: absolute;
border-bottom: 1px dashed var(--wp--preset--color--primary);
padding-bottom: 5px;
cursor: help;
}
.w129-marker span {
display: none;
position: absolute;
bottom: 100%;
left: 0;
width: 200px;
background: transparent;
color: #ffffff;
padding: 15px;
border-radius: 4px;
font-size: 0.85rem;
text-align: left;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.w129-marker:hover span {
display: block;
} .w130-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w130-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
max-width: 900px;
margin: 40px auto 0;
flex-wrap: wrap;
}
.w130-equation {
font-size: 2rem;
color: var(--text-muted);
}
.w130-box {
border: 2px solid var(--border-color);
padding: 30px;
border-radius: 8px;
flex: 1;
min-width: 200px;
font-weight: bold;
font-family: var(--font-heading);
font-size: 1.2rem;
} .w131-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w131-table {
width: 100%;
max-width: 800px;
margin: 40px auto 0;
border-collapse: collapse;
background: transparent;
text-align: left;
}
.w131-table th {
background: var(--text-dark);
color: #fff;
padding: 15px 20px;
font-family: var(--font-heading);
font-weight: normal;
font-size: 1.2rem;
}
.w131-table td {
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w131-table tr:last-child td {
border-bottom: none;
}
.w131-badge {
display: inline-block;
padding: 4px 8px;
background: #eef2ff;
color: #4f46e5;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
margin-right: 5px;
} .w132-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
background: transparent;
}
.w132-zoom {
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid var(--bg-light);
background: url(https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80) center/cover;
position: relative;
}
.w132-zoom::after {
content: '🔎';
position: absolute;
bottom: 20px;
right: 20px;
font-size: 2rem;
background: transparent;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.w132-content {
max-width: 500px;
} .w133-wrapper {
padding: var(--spacing-xl) 20px;
text-align: center;
background: rgba(255,255,255,0.03);
}
.w133-flex {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
flex-wrap: wrap;
}
.w133-style {
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
padding: 30px;
border-radius: 8px;
flex: 1;
min-width: 200px;
max-width: 250px;
text-align: center;
}
.w133-style svg {
width: 60px;
height: 60px;
color: var(--text-muted);
margin-bottom: 15px;
} .w134-wrapper {
display: flex;
background: transparent;
flex-wrap: wrap;
}
.w134-col1 {
flex: 1;
min-width: 300px;
padding: var(--spacing-xl) 10%;
display: flex;
flex-direction: column;
justify-content: center;
}
.w134-col2 {
flex: 1;
min-width: 300px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.w134-swatch {
height: 250px;
background-size: cover;
background-position: center;
transition: 0.3s;
position: relative;
}
.w134-swatch:hover {
opacity: 0.8;
}
.w134-swatch:hover::after {
content: 'Select +';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
} .w135-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w135-fonts {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 50px;
flex-wrap: wrap;
}
.w135-font-card {
background: transparent;
padding: 30px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
flex: 1;
min-width: 200px;
max-width: 300px;
}
.w135-font-card span {
display: block;
font-size: 3rem;
margin-bottom: 10px;
color: var(--wp--preset--color--primary);
} .w136-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w136-threads {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 30px;
flex-wrap: wrap;
}
.w136-thread {
width: 40px;
height: 80px;
border-radius: 20px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: 0.2s;
}
.w136-thread:hover {
transform: translateY(-10px);
} .w137-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: transparent;
}
.w137-hero {
width: 100%;
max-width: 1000px;
height: 400px;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80) center/cover;
border-radius: 12px;
margin-bottom: 40px;
position: relative;
}
.w137-hero::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
}
.w137-play {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
background: transparent;
padding: 20px 40px;
border-radius: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
font-weight: bold;
font-family: var(--font-heading);
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 10px;
} .w138-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w138-options {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 40px;
flex-wrap: wrap;
}
.w138-opt {
width: 250px;
}
.w138-img-ph {
height: 300px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
margin-bottom: 15px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 20px;
font-weight: bold;
color: #ccc;
border-bottom: 4px solid var(--wp--preset--color--primary);
} .w139-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--text-dark);
color: #fff;
display: flex;
justify-content: center;
}
.w139-box {
border: 1px dashed rgba(255, 255, 255, 0.3);
padding: 50px;
max-width: 800px;
text-align: center;
border-radius: 12px;
}
.w139-box h2 {
color: var(--wp--preset--color--primary);
} .w140-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w140-grid {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1000px;
margin: 40px auto 0;
gap: 40px;
}
.w140-card {
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
overflow: hidden;
}
.w140-card div {
padding: 30px;
}
.w140-card h3 {
background: rgba(255,255,255,0.03);
padding: 15px 0;
margin: 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
} @media (max-width: 992px) {
.w122-wrapper,
.w123-wrapper {
flex-direction: column;
}
.w124-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.w127-box {
flex-direction: column;
}
.w134-wrapper {
flex-direction: column;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
.w128-grid {
grid-template-columns: 1fr;
}
.w130-container {
flex-direction: column;
}
.w130-equation {
display: none;
}
.w140-grid {
grid-template-columns: 1fr;
}
.w132-wrapper {
flex-direction: column;
text-align: center;
}
} .w141-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w141-content {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.w141-shield {
width: 80px;
height: 80px;
margin-bottom: 30px;
fill: none;
stroke: var(--wp--preset--color--primary);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.w141-title {
font-size: 3rem;
margin-bottom: 20px;
letter-spacing: -1px;
} .w142-wrapper {
display: flex;
flex-wrap: wrap;
background: var(--bg-dark);
color: #fff;
}
.w142-half {
flex: 1;
min-width: 300px;
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.w142-half:first-child {
background: #2a2a2a;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.w142-tag {
position: absolute;
top: 40px;
background: rgba(0, 0, 0, 0.5);
padding: 5px 15px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
font-size: 12px;
}
.w142-half h3 {
font-size: 2.2rem;
margin-bottom: 15px;
}
.w142-half p {
color: #ccc;
font-size: 1.1rem;
} .w143-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
overflow-x: hidden;
}
.w143-timeline {
display: flex;
justify-content: space-between;
position: relative;
max-width: 1000px;
margin: 60px auto 0;
padding: 0 50px;
}
.w143-timeline::before {
content: '';
position: absolute;
top: 25px;
left: 50px;
right: 50px;
height: 2px;
background: var(--border-color);
z-index: 1;
}
.w143-step {
position: relative;
z-index: 2;
width: 25%;
text-align: center;
}
.w143-dot {
width: 50px;
height: 50px;
background: transparent;
border: 2px solid var(--wp--preset--color--primary);
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--wp--preset--color--primary);
}
.w143-step.active .w143-dot {
background: var(--wp--preset--color--primary);
color: #fff;
} .w144-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w144-box {
background: transparent;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
max-width: 800px;
padding: 50px;
display: flex;
gap: 40px;
align-items: center;
flex-wrap: wrap;
border-top: 5px solid var(--wp--preset--color--primary);
}
.w144-huge {
font-size: 6rem;
font-family: var(--font-heading);
color: var(--wp--preset--color--primary);
line-height: 1;
flex: 1;
min-width: 150px;
text-align: center;
}
.w144-text {
flex: 3;
min-width: 300px;
} .w145-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w145-cards {
display: flex;
justify-content: center;
gap: 20px;
max-width: 1100px;
margin: 50px auto 0;
flex-wrap: wrap;
align-items: flex-end;
}
.w145-card {
flex: 1;
min-width: 300px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 40px 30px;
background: transparent;
text-align: left;
}
.w145-card.featured {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 15px 30px rgba(195, 154, 95, 0.15);
border-width: 2px;
transform: translateY(-20px);
position: relative;
}
.w145-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--wp--preset--color--primary);
color: #fff;
padding: 5px 15px;
font-size: 0.8rem;
text-transform: uppercase;
font-weight: bold;
border-radius: 20px;
}
.w145-price {
font-size: 2.5rem;
font-family: var(--font-heading);
font-weight: bold;
margin: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 20px;
}
.w145-list {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}
.w145-list li {
margin-bottom: 15px;
font-size: 0.95rem;
display: flex;
gap: 10px;
}
.w145-list li::before {
content: '✓';
color: var(--wp--preset--color--primary);
font-weight: bold;
} .w146-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--text-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.w146-video {
flex: 1;
min-width: 300px;
max-width: 500px;
aspect-ratio: 9/16;
background: url(https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80) center/cover;
border-radius: 12px;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.w146-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: var(--wp--preset--color--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 0 0 10px rgba(195, 154, 95, 0.3);
}
.w146-content {
flex: 1;
min-width: 300px;
max-width: 500px;
}
.w146-quote {
font-family: var(--font-heading);
font-size: 1.8rem;
font-style: italic;
line-height: 1.4;
margin-bottom: 20px;
} .w147-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w147-logos {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin-top: 40px;
opacity: 0.6;
filter: grayscale(100%);
transition: 0.3s;
}
.w147-logos:hover {
opacity: 1;
filter: grayscale(0%);
}
.w147-logo {
font-size: 1.5rem;
font-family: var(--font-heading);
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
} .w148-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.w148-img {
flex: 1;
min-width: 300px;
max-width: 400px;
height: 600px;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80) center/cover;
position: relative;
}
.w148-list {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
gap: 30px;
}
.w148-item {
padding-left: 20px;
border-left: 2px solid var(--border-color);
cursor: pointer;
transition: 0.3s;
}
.w148-item:hover,
.w148-item.active {
border-left-color: var(--wp--preset--color--primary);
}
.w148-item:hover h4,
.w148-item.active h4 {
color: var(--wp--preset--color--primary);
} .w149-wrapper {
padding: 40px 20px;
background: var(--bg-dark);
color: #fff;
}
.w149-flex {
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.w149-icon {
background: rgba(255, 255, 255, 0.1);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--wp--preset--color--primary);
} .w150-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 600px;
background: url(https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80) center/cover fixed;
position: relative;
}
.w150-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
}
.w150-content {
position: relative;
z-index: 2;
max-width: 600px;
text-align: center;
color: #fff;
}
.w150-input-group {
display: flex;
margin-top: 40px;
}
.w150-input {
flex: 1;
padding: 15px 20px;
border: none;
font-size: 1rem;
outline: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.w150-input::placeholder {
color: #aaa;
}
.w150-btn {
padding: 15px 30px;
border: none;
background: var(--wp--preset--color--primary);
color: #fff;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
} .w151-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w151-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.w151-card {
padding: 30px 20px;
border: 1px dashed var(--border-color);
position: relative;
}
.w151-num {
font-size: 4rem;
font-family: var(--font-heading);
color: var(--bg-light);
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
line-height: 1;
}
.w151-text {
position: relative;
z-index: 2;
margin-top: 40px;
} .w152-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w152-box {
background: transparent;
border: 2px solid var(--wp--preset--color--primary);
padding: 60px;
max-width: 700px;
text-align: center;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(195, 154, 95, 0.1);
}
.w152-box h2 {
font-size: 2.5rem;
margin-bottom: 20px;
} .w153-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--text-dark);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 60px;
flex-wrap: wrap;
}
.w153-phone {
width: 250px;
height: 500px;
border: 10px solid #333;
border-radius: 30px;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80) center/cover;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.w153-content {
max-width: 500px;
}
.w153-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
} .w154-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
}
.w154-card {
display: flex;
max-width: 1000px;
background: rgba(255,255,255,0.03);
border-radius: 12px;
overflow: hidden;
flex-wrap: wrap;
}
.w154-img {
flex: 1;
min-width: 300px;
background: url(https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
}
.w154-info {
flex: 1.5;
min-width: 300px;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
} .w155-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w155-container {
max-width: 800px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.1);
padding: 50px;
border-radius: 8px;
position: relative;
}
.w155-circles {
display: flex;
justify-content: center;
gap: -20px;
margin-bottom: 30px;
}
.w155-circle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #fff;
background-size: cover;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-left: -20px;
} .w156-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
color: #fff;
}
.w156-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}
.w156-visual {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 8px;
text-align: center;
}
.w156-data {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
} .w157-wrapper {
padding: var(--spacing-xl) 20px;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80) center/cover;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.w157-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.9);
}
.w157-content {
position: relative;
z-index: 2;
max-width: 600px;
text-align: center;
}
.w157-content h2 {
font-size: 3rem;
color: #ffffff;
} .w158-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
align-items: center;
}
.w158-card {
background: var(--text-dark);
color: #fff;
width: 400px;
height: 250px;
border-radius: 12px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.w158-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%;
background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
transform: skewX(-20deg) translateX(50px);
} .w159-wrapper {
padding: 40px 20px;
background: var(--wp--preset--color--primary);
color: #fff;
}
.w159-flex {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
flex-wrap: wrap;
text-align: center;
}
.w159-number {
font-size: 2.5rem;
font-family: var(--font-heading);
font-weight: bold;
} .w160-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w160-list {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
margin: 40px auto 0;
font-size: 1.2rem;
font-family: var(--font-heading);
color: #ffffff;
}
.w160-list div {
padding: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
} @media (max-width: 992px) {
.w145-cards {
flex-direction: column;
align-items: center;
}
.w145-card {
width: 100%;
max-width: 500px;
}
.w145-card.featured {
transform: translateY(0);
}
.w151-grid,
.w156-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
.w143-timeline {
flex-direction: column;
gap: 30px;
padding: 0;
}
.w143-timeline::before {
left: 24px;
top: 0;
bottom: 0;
width: 2px;
height: auto;
right: auto;
}
.w143-step {
width: 100%;
display: flex;
align-items: center;
text-align: left;
gap: 20px;
}
.w143-dot {
margin: 0;
}
.w144-box,
.w150-input-group,
.w159-flex {
flex-direction: column;
text-align: center;
}
.w151-grid,
.w156-grid {
grid-template-columns: 1fr;
}
.w158-card {
width: 100%;
}
} .w161-wrapper {
display: flex;
height: 600px;
background: transparent;
}
.w161-left {
flex: 1;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
position: relative;
display: flex;
align-items: flex-end;
padding: 40px;
}
.w161-right {
flex: 1;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
position: relative;
display: flex;
align-items: flex-end;
padding: 40px;
}
.w161-content {
background: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 8px;
max-width: 400px;
backdrop-filter: blur(5px);
}
.w161-content h3 {
font-size: 2rem;
margin-bottom: 10px;
} .w162-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w162-img-container {
position: relative;
max-width: 600px;
}
.w162-img {
width: 100%;
border-radius: 12px;
}
.w162-hotspot {
position: absolute;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.w162-hotspot::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: var(--text-dark);
border-radius: 50%;
}
.w162-hotspot:hover {
transform: scale(1.2);
}
.w162-panel {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: transparent;
padding: 15px;
border-radius: 8px;
width: 220px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: 0.3s;
z-index: 10;
display: flex;
gap: 15px;
align-items: center;
}
.w162-hotspot:hover .w162-panel {
opacity: 1;
pointer-events: auto;
}
.w162-panel img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
.w162-panel-info {
flex: 1;
text-align: left;
}
.w162-panel-info h4 {
font-family: var(--font-body);
font-size: 0.9rem;
margin: 0 0 5px;
} .w163-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w163-list {
max-width: 1000px;
margin: 0 auto;
list-style: none;
padding: 0;
}
.w163-item {
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: 0.3s;
}
.w163-item h2 {
font-size: 4rem;
color: var(--text-muted);
transition: 0.3s;
margin: 0;
}
.w163-arrow {
font-size: 2rem;
color: var(--text-muted);
transition: 0.3s;
opacity: 0;
transform: translateX(-20px);
}
.w163-item:hover h2 {
color: #ffffff;
padding-left: 20px;
}
.w163-item:hover .w163-arrow {
opacity: 1;
transform: translateX(0);
color: var(--wp--preset--color--primary);
} .w164-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w164-card {
display: flex;
max-width: 1000px;
align-items: center;
gap: 40px;
position: relative;
z-index: 1;
}
.w164-card::before {
content: '';
position: absolute;
right: 0;
bottom: -20px;
width: 70%;
height: 100%;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
z-index: -1;
border-radius: 12px;
}
.w164-img {
width: 350px;
height: 450px;
background: url(https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80) center/cover;
border-radius: 12px;
box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
}
.w164-content {
padding: 40px;
flex: 1;
}
.w164-quote {
font-size: 2rem;
font-family: var(--font-heading);
line-height: 1.4;
margin-bottom: 30px;
} .w165-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w165-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border-color);
border: 1px solid rgba(255,255,255,0.1);
max-width: 1200px;
margin: 0 auto;
}
.w165-item {
background: transparent;
padding: 40px 20px;
text-align: center;
transition: 0.3s;
position: relative;
}
.w165-item:hover {
transform: scale(1.02);
z-index: 2;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.w165-img {
height: 200px;
object-fit: cover;
margin-bottom: 20px;
}
.w165-item h4 {
font-size: 1.2rem;
margin: 0 0 10px;
} .w166-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
}
.w166-row {
display: flex;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
align-items: stretch;
}
.w166-col-text {
flex: 1;
padding: 40px;
background: var(--text-dark);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.w166-col-img {
flex: 2;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
min-height: 400px;
} .w167-wrapper {
padding: 80px 20px;
background: transparent;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w167-container {
max-width: 600px;
margin: 0 auto;
}
.w167-form {
display: flex;
border-bottom: 2px solid var(--text-dark);
padding: 10px 0;
margin-top: 40px;
}
.w167-input {
flex: 1;
border: none;
font-size: 1.1rem;
outline: none;
font-family: var(--font-body);
}
.w167-btn {
background: none;
border: none;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: var(--wp--preset--color--primary);
} .w168-wrapper {
padding: 40px 20px;
background: var(--wp--preset--color--primary);
color: #fff;
}
.w168-grid {
display: flex;
justify-content: space-around;
max-width: 1000px;
margin: 0 auto;
flex-wrap: wrap;
gap: 30px;
text-align: center;
}
.w168-val {
font-size: 3.5rem;
font-weight: bold;
line-height: 1;
margin-bottom: 10px;
}
.w168-lbl {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
} .w169-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.w169-img {
width: 400px;
height: 400px;
border-radius: 50%;
background: url(https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
box-shadow: 20px 20px 0 var(--border-color);
}
.w169-content {
max-width: 500px;
}
.w169-tag {
color: var(--wp--preset--color--primary);
font-family: var(--font-heading);
font-style: italic;
font-size: 1.5rem;
margin-bottom: 15px;
display: block;
} .w170-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
color: #fff;
display: flex;
justify-content: center;
}
.w170-container {
max-width: 800px;
text-align: center;
position: relative;
}
.w170-quote-icon {
font-size: 4rem;
color: rgba(255, 255, 255, 0.1);
margin-bottom: -20px;
line-height: 1;
}
.w170-text {
font-size: 2.2rem;
font-family: var(--font-heading);
font-style: italic;
margin-bottom: 40px;
}
.w170-author {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
color: var(--wp--preset--color--primary);
}
.w170-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 40px;
}
.w170-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.w170-dot.active {
background: transparent;
} .w171-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w171-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1000px;
margin: 40px auto 0;
}
.w171-card {
position: relative;
height: 400px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.w171-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
filter: brightness(0.7);
}
.w171-card:hover img {
transform: scale(1.05);
filter: brightness(0.5);
}
.w171-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
padding: 20px;
}
.w171-card h3 {
font-size: 2rem;
border-bottom: 2px solid transparent;
transition: 0.3s;
padding-bottom: 5px;
}
.w171-card:hover h3 {
border-color: var(--wp--preset--color--primary);
} .w172-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
}
.w172-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.w172-num {
color: var(--border-color);
font-size: 5rem;
font-family: var(--font-heading);
margin-bottom: -30px;
line-height: 1;
font-style: italic;
}
.w172-item h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
} .w173-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w173-container {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 15px;
height: 600px;
}
.w173-main {
grid-column: 1 / 2;
grid-row: 1 / 3;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
position: relative;
}
.w173-part {
background: rgba(255,255,255,0.03);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.w173-part img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
} .w174-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
max-width: 800px;
margin: 0 auto;
}
.w174-item {
border-bottom: 2px solid var(--text-dark);
}
.w174-header {
padding: 20px 0;
font-family: var(--font-heading);
font-size: 1.8rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.w174-content {
padding-bottom: 20px;
color: var(--text-muted);
display: none;
}
.w174-icon {
font-size: 1.5rem;
font-family: var(--font-body);
transition: 0.3s;
}
.w174-header.open .w174-icon {
transform: rotate(45deg);
} .w175-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
text-align: center;
}
.w175-box {
max-width: 700px;
}
.w175-line {
width: 2px;
height: 60px;
background: var(--wp--preset--color--primary);
margin: 0 auto 30px;
} .w176-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
}
.w176-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 60px;
}
.w176-item {
display: flex;
gap: 40px;
align-items: center;
}
.w176-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.w176-num {
font-size: 3rem;
color: var(--wp--preset--color--primary);
font-family: var(--font-heading);
margin-right: 20px;
} .w177-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--text-dark);
color: #fff;
}
.w177-grid {
display: flex;
max-width: 1000px;
margin: 0 auto;
gap: 0;
}
.w177-img {
flex: 1;
min-height: 400px;
background: url(https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
}
.w177-text {
flex: 1;
padding: 60px;
background: rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
justify-content: center;
} .w178-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
}
.w178-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 400px;
}
.w178-img {
width: 120px;
height: 120px;
border-radius: 50%;
background: url(https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80) center/cover;
margin-bottom: 20px;
}
.w178-btn {
margin-top: 20px;
padding: 10px 20px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.03);
cursor: pointer;
border-radius: 30px;
} .w179-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w179-focus {
display: inline-block;
position: relative;
}
.w179-focus img {
height: 600px;
}
.w179-focus::after {
content: '';
position: absolute;
inset: -20px;
border: 1px solid var(--wp--preset--color--primary);
pointer-events: none;
} .w180-wrapper {
padding: 30px 20px;
background: var(--text-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
text-align: center;
}
.w180-wrapper strong {
color: var(--wp--preset--color--primary);
} @media (max-width: 992px) {
.w161-wrapper {
flex-direction: column;
height: auto;
}
.w161-left,
.w161-right {
min-height: 400px;
}
.w163-item h2 {
font-size: 3rem;
}
.w164-card {
flex-direction: column;
}
.w164-img {
width: 100%;
height: 300px;
}
.w165-grid {
grid-template-columns: repeat(2, 1fr);
}
.w166-row {
flex-direction: column;
}
.w172-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.w173-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
height: auto;
}
.w173-main {
height: 400px;
}
.w177-grid {
flex-direction: column;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
.w163-item h2 {
font-size: 2rem;
}
.w165-grid {
grid-template-columns: 1fr;
}
.w171-grid {
grid-template-columns: 1fr;
}
.w176-item {
flex-direction: column;
text-align: center;
}
.w179-focus img {
height: 400px;
}
} .w181-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
justify-content: center;
background: transparent;
}
.w181-letter {
max-width: 700px;
padding: 40px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 10px 10px 0 rgba(255,255,255,0.1);
font-family: var(--font-heading);
font-size: 1.2rem;
line-height: 1.8;
color: #ffffff;
position: relative;
}
.w181-signature {
font-family: var(--font-hand);
font-size: 3rem;
color: var(--wp--preset--color--primary);
margin-top: 30px;
transform: rotate(-5deg);
display: inline-block;
} .w182-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 50px;
}
.w182-img {
flex: 1;
min-width: 300px;
max-width: 500px;
height: 400px;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
position: relative;
}
.w182-img::after {
content: '';
position: absolute;
inset: -10px;
border: 1px solid rgba(255, 255, 255, 0.2);
pointer-events: none;
}
.w182-content {
flex: 1;
min-width: 300px;
max-width: 500px;
}
.w182-list {
list-style: none;
padding: 0;
margin-top: 20px;
font-size: 1.1rem;
}
.w182-list li {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.w182-icon {
color: var(--wp--preset--color--primary);
font-size: 1.5rem;
} .w183-wrapper {
height: 100px;
background: #eccb66;
background-image: repeating-linear-gradient(90deg, transparent, transparent 19px, #1a1a1a 19px, #1a1a1a 20px), repeating-linear-gradient(90deg, transparent, transparent 99px, #1a1a1a 99px, #1a1a1a 100px);
background-position: bottom;
background-size: 100px 30px, 100px 50px;
background-repeat: repeat-x;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.w183-text {
background: transparent;
padding: 5px 30px;
font-family: var(--font-heading);
font-size: 1.5rem;
border-radius: 40px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border: 2px solid var(--text-dark);
} .w184-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w184-container {
display: flex;
max-width: 1000px;
margin: 40px auto 0;
gap: 40px;
text-align: left;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.w184-media {
width: 400px;
height: 400px;
background: url(https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80) center/cover;
position: relative;
border-radius: 5px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.w184-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
font-size: 3rem;
color: #fff;
cursor: pointer;
}
.w184-text {
max-width: 400px;
} .w185-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
}
.w185-card {
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
padding: 50px;
border-radius: 8px;
max-width: 600px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.w185-stats {
display: flex;
justify-content: center;
gap: 40px;
margin: 40px 0;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 20px 0;
}
.w185-stat {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--wp--preset--color--primary);
} .w186-wrapper {
padding: var(--spacing-xl) 20px;
display: flex;
align-items: center;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.w186-info {
flex: 1;
min-width: 300px;
padding: 40px;
background: var(--bg-dark);
color: #fff;
}
.w186-info h3 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.w186-info p {
color: #ccc;
font-size: 1.1rem;
margin-bottom: 10px;
}
.w186-map {
flex: 2;
min-width: 300px;
height: 500px;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80) center/cover;
position: relative;
filter: grayscale(50%);
} .w187-wrapper {
padding: 40px;
background: var(--text-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
border-radius: 12px;
transform: translateY(30px);
position: relative;
z-index: 5;
flex-wrap: wrap;
gap: 20px;
}
.w187-text h3 {
margin: 0 0 5px;
font-size: 1.8rem;
}
.w187-text p {
margin: 0;
color: #aaa;
} .w188-wrapper {
padding: 80px 20px 40px;
background: var(--bg-dark);
color: #fff;
margin-bottom: -60px; }
.w188-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
}
.w188-col h4 {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
margin-bottom: 20px;
color: var(--wp--preset--color--primary);
}
.w188-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.w188-col li {
margin-bottom: 12px;
font-size: 0.9rem;
color: #aaa;
cursor: pointer;
transition: 0.3s;
}
.w188-col li:hover {
color: #fff;
padding-left: 5px;
}
.w188-bottom {
max-width: 1200px;
margin: 60px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: #aaaaaa;
flex-wrap: wrap;
gap: 15px;
} .w189-wrapper {
padding: 80px 20px 40px;
background: transparent;
border-top: 1px solid rgba(255,255,255,0.1);
margin-bottom: -60px;
}
.w189-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
text-align: center;
}
.w189-brand {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.w189-brand h2 {
font-size: 3rem;
margin: 0;
line-height: 1;
}
.w189-brand p {
font-size: 1.1rem;
font-style: italic;
color: var(--text-muted);
}
.w189-col h4 {
font-size: 1.2rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.w189-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 2px;
background: var(--wp--preset--color--primary);
} .w190-wrapper {
padding: var(--spacing-xl) 20px;
background-color: #ffffff;
background-image: radial-gradient(#333 1px, transparent 1px);
background-size: 20px 20px;
color: #fff;
text-align: center;
}
.w190-card {
background: #1a1a1a;
border: 1px solid #333;
padding: 40px;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.w190-card h2 {
color: var(--wp--preset--color--primary);
} .w191-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w191-dots {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
flex-wrap: wrap;
}
.w191-dot {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--border-color);
cursor: pointer;
transition: 0.3s;
position: relative;
}
.w191-dot:hover,
.w191-dot.active {
box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
transform: scale(1.1);
}
.w191-tooltip {
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: var(--text-dark);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.w191-dot:hover .w191-tooltip {
opacity: 1;
bottom: 130%;
} .w192-wrapper {
padding: 40px 20px;
background: rgba(255,255,255,0.03);
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
text-align: center;
}
.w192-badge {
display: flex;
flex-direction: column;
align-items: center;
max-width: 250px;
}
.w192-icon-wrap {
width: 60px;
height: 60px;
border-radius: 50%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--wp--preset--color--primary);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
} .w193-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
min-height: 700px;
overflow: hidden;
}
.w193-collage {
position: relative;
width: 100%;
max-width: 800px;
height: 600px;
}
.w193-img1 {
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 70%;
background: url(https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
z-index: 1;
}
.w193-img2 {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 60%;
background: url(https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80) center/cover;
z-index: 2;
border: 15px solid #fff;
box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.1);
}
.w193-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
background: rgba(255, 255, 255, 0.95);
padding: 40px;
text-align: center;
border-radius: 4px;
width: 80%;
max-width: 400px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,0.1);
} .w194-wrapper {
padding: var(--spacing-xl) 20px;
background: rgba(255,255,255,0.03);
text-align: center;
}
.w194-outline {
font-family: var(--font-heading);
font-size: 8rem;
color: transparent;
-webkit-text-stroke: 2px var(--wp--preset--color--primary);
opacity: 0.3;
margin: 0;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
}
.w194-solid {
font-size: 3rem;
font-family: var(--font-heading);
color: #ffffff;
margin-top: -60px;
position: relative;
z-index: 2;
} .w195-wrapper {
padding: 50px 20px;
text-align: center;
background: transparent;
}
.w195-fab-demo {
display: inline-flex;
align-items: center;
gap: 15px;
background: var(--text-dark);
color: #fff;
padding: 15px 30px;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transition: 0.3s;
font-weight: bold;
}
.w195-fab-demo:hover {
transform: translateY(-5px);
background: var(--wp--preset--color--primary);
}
.w195-fab-demo span {
font-size: 1.5rem;
line-height: 1;
margin-top: -2px;
} .w196-wrapper {
padding: 40px 20px;
background: transparent;
text-align: center;
}
.w196-dividers {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 600px;
margin: 0 auto;
}
.w196-div1 {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}
.w196-div2 {
position: relative;
text-align: center;
}
.w196-div2::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border-color);
z-index: 1;
}
.w196-div2 span {
position: relative;
z-index: 2;
background: transparent;
padding: 0 20px;
color: var(--wp--preset--color--primary);
font-size: 1.5rem;
} .w197-wrapper {
padding: var(--spacing-xl) 20px; color: #fff;
display: flex;
justify-content: center;
}
.w197-badge {
width: 250px;
height: 250px;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
padding: 20px;
}
.w197-badge::after {
content: '';
position: absolute;
inset: 10px;
border: 1px solid var(--wp--preset--color--primary);
border-radius: 50%;
} .w198-wrapper {
padding: var(--spacing-xl) 20px;
background: var(--bg-dark);
color: #fff;
display: flex;
justify-content: center;
}
.w198-quote {
max-width: 800px;
font-size: 2.2rem;
font-family: var(--font-heading);
line-height: 1.4;
text-align: center;
position: relative;
}
.w198-quote::before {
content: '“';
font-size: 10rem;
color: rgba(255, 255, 255, 0.05);
position: absolute;
top: -50px;
left: -50px;
line-height: 1;
font-family: serif;
} .w199-wrapper {
padding: var(--spacing-xl) 20px;
background: transparent;
text-align: center;
}
.w199-p {
max-width: 700px;
margin: 0 auto;
font-size: 1.3rem;
color: #ffffff;
line-height: 1.8;
}
.w199-p strong {
color: var(--wp--preset--color--primary);
background: rgba(195, 154, 95, 0.1);
padding: 0 5px;
} .w200-wrapper {
padding: 100px 20px;
background: url(https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80) center/cover;
position: relative;
display: flex;
justify-content: center;
text-align: center;
}
.w200-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}
.w200-content {
position: relative;
z-index: 2;
color: #fff;
max-width: 800px;
margin-top: 100px;
}
.w200-content h1 {
font-size: 4rem;
margin-bottom: 20px;
} @media (max-width: 992px) {
.w188-container {
grid-template-columns: 1fr 1fr;
}
.w189-container {
grid-template-columns: 1fr 1fr;
}
.w186-wrapper {
flex-direction: column;
}
.w186-map {
width: 100%;
height: 300px;
}
.w193-collage {
height: 500px;
}
.w193-img1 {
width: 80%;
height: 60%;
}
.w193-img2 {
width: 70%;
height: 50%;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}
.preview-controls {
flex-direction: column;
gap: 10px;
padding: 10px;
text-align: center;
}
.widget-container {
margin-top: 130px;
padding: 10px;
}
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
.w188-container {
grid-template-columns: 1fr;
text-align: center;
}
.w189-container {
grid-template-columns: 1fr;
}
.w184-container {
flex-direction: column;
text-align: center;
}
.w184-media {
width: 100%;
height: 300px;
}
.w185-stats {
flex-direction: column;
gap: 20px;
}
.w187-wrapper {
flex-direction: column;
text-align: center;
padding: 30px 20px;
transform: none;
margin-bottom: 30px;
}
.w193-collage {
height: 400px;
}
.w194-outline {
font-size: 4rem;
}
.w194-solid {
font-size: 2rem;
margin-top: -30px;
}
.w200-content h1 {
font-size: 2.8rem;
}
.w182-wrapper {
flex-direction: column;
}
}