/* ================================
MODERN CSS VARIABLES SYSTEM
WoodMart & Elementor Compatible
================================ */
:root {
/* Color Palette - WoodMart Friendly */
--primary-red: #E60000;
--light-red: #FF3333;
--dark-gray: #222222;
--gray-text: #555555;
--light-gray: #f4f4f4;
--white: #ffffff;
/* WoodMart Theme Compatibility */
--elementor-container-width: 1200px;
--woodmart-primary: var(--primary-red);
--woodmart-text: var(--dark-gray);
/* Spacing System */
--spacing-xs: 5px;
--spacing-sm: 10px;
--spacing-md: 20px;
--spacing-lg: 40px;
--spacing-xl: 80px;
/* Typography */
--font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-sm: 0.85rem;
--font-size-base: 1rem;
--font-size-lg: 1.2rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--font-size-3xl: 2.8rem;
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 25px;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.2);
/* Animations */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* ================================
RESET & BASE STYLES
================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--dark-gray);
overflow-x: hidden;
background-color: #f8f9fa;
font-size: var(--font-size-base);
margin: 0;
padding: 0;
}
/* ================================
MAIN CONTAINER WITH OUTER BORDER
================================ */
.main-container {
max-width: 100%;
margin: 0;
background-color: var(--white);
border: 0;
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* ================================
MODERN SECTION ANIMATION SYSTEM
================================ */
.section {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
/* ================================
HERO SECTION
================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 40px 20px;
margin-bottom: 60px;
background: var(--white);
}
.hero-logo {
max-width: 180px;
height: auto;
margin-bottom: var(--spacing-md);
opacity: 0;
animation: fadeInLogo 1s ease forwards 0.1s;
}
@keyframes fadeInLogo {
to {
opacity: 1;
}
}
.hero-content {
text-align: center;
max-width: 1200px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
}
.hero h1 {
font-size: 3.8rem;
font-weight: 700;
margin-bottom: 3px;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--dark-gray);
text-shadow: 0 0 15px rgba(34, 34, 34, 0.3);
position: relative;
padding: 0 30px;
}
.hero h1::before,
.hero h1::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border: 3px solid var(--primary-red);
opacity: 0;
animation: fadeInBrackets 0.5s ease forwards 0.8s;
}
.hero h1::before {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
.hero h1::after {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}
@keyframes fadeInBrackets {
to {
opacity: 0.8;
}
}
/* Hero Content Animation */
.hero-content > * {
opacity: 0;
animation: slideUpFadeIn 0.8s ease forwards;
}
.hero-content h1 { animation-delay: 0.2s; }
.hero-content .hero-subtitle { animation-delay: 0.4s; }
.hero-content .feature-icons { animation-delay: 0.6s; }
.hero-content .cta-button { animation-delay: 0.8s; }
@keyframes slideUpFadeIn {
to {
opacity: 1;
}
}
.hero-subtitle {
font-size: 1.4rem;
margin-bottom: var(--spacing-xs);
font-weight: 300;
color: var(--dark-gray);
}
/* Feature Icons Grid */
.feature-icons {
display: flex;
justify-content: center;
align-items: center;
margin: var(--spacing-xs) auto;
gap: var(--spacing-lg);
width: 100%;
max-width: 900px;
flex-wrap: wrap;
}
.feature-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all var(--transition-normal);
width: 140px;
cursor: pointer;
}
.feature-icon:hover {
transform: translateY(-5px);
}
.feature-icon i {
color: var(--primary-red);
font-size: 2.3rem;
margin-bottom: 15px;
background-color: rgba(255, 255, 255, 0.1);
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-normal);
}
.feature-icon:hover i {
background-color: var(--primary-red);
color: var(--white);
box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);
transform: scale(1.05);
}
.feature-icon span {
color: var(--dark-gray);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
width: 100%;
}
/* Modern CTA Button */
.cta-button {
display: inline-block;
background: linear-gradient(45deg, var(--primary-red), var(--light-red));
color: var(--white);
padding: var(--spacing-sm) var(--spacing-md);
min-width: 180px;
text-align: center;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
margin-top: 15px;
transition: all var(--transition-normal);
text-transform: uppercase;
letter-spacing: 1.5px;
box-shadow: 0 4px 12px rgba(230, 0, 0, 0.4);
position: relative;
overflow: hidden;
animation: pulseGlow 2.5s infinite ease-in-out;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 4px 12px rgba(230, 0, 0, 0.4);
}
50% {
box-shadow: 0 6px 18px rgba(230, 0, 0, 0.6);
}
}
.cta-button i {
margin-right: 8px;
font-size: 1rem;
}
.cta-button:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 6px 18px rgba(230, 0, 0, 0.6);
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: var(--spacing-sm);
left: 50%;
transform: translateX(-50%);
color: var(--dark-gray);
animation: bounce 2s infinite;
font-size: 1.5rem;
z-index: 5;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-20px);
}
60% {
transform: translateX(-50%) translateY(-10px);
}
}
/* ================================
GALLERY SECTION
================================ */
.gallery-section {
min-height: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
margin: 0 0 60px 0;
background: rgba(230, 0, 0, 0.03);
position: relative;
}
.gallery-container {
max-width: 1150px;
width: 100%;
}
.pill-badge {
display: block;
width: fit-content;
margin: 0 auto 25px;
background-color: rgba(230, 0, 0, 0.15);
color: var(--primary-red);
padding: 6px 18px;
border-radius: 20px;
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 1px;
border: 1px solid rgba(230, 0, 0, 0.3);
box-shadow: var(--shadow-sm);
}
.gallery-header {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.gallery-title {
font-size: 2.5rem;
color: var(--dark-gray);
margin-bottom: 25px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
position: relative;
display: inline-block;
padding-bottom: var(--spacing-md);
}
.gallery-title .title-highlight {
color: var(--primary-red);
text-shadow: 0 0 8px rgba(230, 0, 0, 0.4);
}
.gallery-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 75%;
height: 3px;
background: linear-gradient(to right, var(--primary-red), var(--light-red));
border-radius: 2px;
box-shadow: 0 2px 10px rgba(230, 0, 0, 0.5);
}
.gallery-subtitle {
color: var(--gray-text);
font-size: 1.1rem;
font-weight: 300;
letter-spacing: 0.8px;
max-width: 600px;
margin: 15px auto 0;
}
/* Content Box */
.content-box {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 50px;
background: rgba(255, 255, 255, 0.9);
border-radius: var(--radius-xl);
padding: 50px;
position: relative;
overflow: hidden;
border: 1px solid rgba(230, 0, 0, 0.25);
box-shadow: var(--shadow-lg);
}
.content-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 0%, rgba(230, 0, 0, 0.18) 0%, transparent 70%);
z-index: -1;
}
.content-box::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary-red), transparent);
animation: slideEffect 4s linear infinite;
box-shadow: 0 0 5px var(--primary-red);
}
@keyframes slideEffect {
0% { left: -100%; }
100% { left: 200%; }
}
.gallery-left,
.gallery-right {
flex: 1;
min-width: 300px;
}
.gallery-right {
display: flex;
flex-direction: column;
}
/* Main Image Container */
.main-image-container {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 15px;
overflow: hidden;
background: var(--light-gray);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
box-shadow: var(--shadow-md);
border: 1px solid #dddddd;
}
.main-image {
display: block;
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: opacity var(--transition-normal);
border-radius: 15px;
}
/* 360 Viewer */
.viewer-360 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--white);
border-radius: 15px;
overflow: hidden;
}
.viewer-360 iframe {
width: 100%;
height: 100%;
border: none;
}
.viewer-360-tag {
position: absolute;
top: 15px;
right: 15px;
background: rgba(230, 0, 0, 0.7);
color: var(--white);
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: 600;
z-index: 10;
letter-spacing: 0.5px;
box-shadow: var(--shadow-sm);
}
/* Thumbnails */
.thumbnails-container {
display: flex;
gap: var(--spacing-sm);
justify-content: center;
flex-wrap: wrap;
margin-top: 25px;
}
.thumbnail {
width: 80px;
height: 80px;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
border: 1px solid #cccccc;
background-color: var(--white);
transition: all var(--transition-normal);
padding: 4px;
position: relative;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
}
.thumbnail.active,
.thumbnail:hover {
border-color: var(--primary-red);
transform: translateY(-5px) scale(1.05);
box-shadow: var(--shadow-md), 0 0 10px rgba(230, 0, 0, 0.3);
}
.thumbnail::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-red);
transition: width var(--transition-normal);
box-shadow: 0 0 5px var(--primary-red);
}
.thumbnail:hover::after,
.thumbnail.active::after {
width: 100%;
}
.thumbnail img {
width: 90%;
height: 90%;
object-fit: contain;
display: block;
border-radius: var(--radius-sm);
}
.thumbnail-360-indicator {
position: absolute;
bottom: 5px;
right: 5px;
background: var(--primary-red);
color: var(--white);
padding: 3px 6px;
border-radius: 4px;
font-size: 0.65rem;
font-weight: bold;
line-height: 1;
z-index: 1;
pointer-events: none;
}
/* Product Info */
.product-info-title {
color: var(--primary-red);
margin-bottom: 18px;
font-size: 1.9rem;
border-bottom: 1px solid rgba(230, 0, 0, 0.4);
padding-bottom: var(--spacing-md);
letter-spacing: 1px;
text-shadow: 0 0 8px rgba(230, 0, 0, 0.4);
text-align: center;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.product-description {
text-align: center;
color: var(--gray-text);
margin-bottom: 30px;
font-size: 1.1rem;
line-height: 1.75;
font-weight: 300;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
color: var(--dark-gray);
}
.features-list li {
margin-bottom: var(--spacing-md);
text-align: center;
font-size: 1.05rem;
font-weight: 400;
}
.features-list i {
color: var(--primary-red);
margin: 0 auto 10px;
width: auto;
display: block;
font-size: 1.5rem;
text-shadow: 0 0 10px rgba(230, 0, 0, 0.5);
text-align: center;
transition: all var(--transition-normal);
}
.features-list li:hover i {
transform: scale(1.1);
color: var(--light-red);
text-shadow: 0 0 12px rgba(255, 51, 51, 0.7);
}
/* ================================
SOFTWARE SHOWCASE SECTION
================================ */
.software-showcase-container {
margin-bottom: 60px;
padding: 60px 20px;
overflow: hidden;
}
.page-title-section {
text-align: center;
padding: 0 var(--spacing-md) 40px;
margin-bottom: 40px;
}
.page-title-section h1 {
font-size: var(--font-size-3xl);
color: var(--dark-gray);
margin-bottom: 25px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
position: relative;
display: inline-block;
padding-bottom: var(--spacing-md);
}
.page-title-section h1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 75%;
height: 3px;
background: linear-gradient(to right, var(--primary-red), var(--light-red));
border-radius: 2px;
box-shadow: 0 2px 10px rgba(230, 0, 0, 0.5);
}
.page-title-section p {
font-size: 1.15rem;
color: var(--gray-text);
max-width: 750px;
margin: 0 auto;
}
/* Software Feature Sections */
.software-feature-section {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0;
position: relative;
}
.software-feature-section:not(:last-child) {
border-bottom: 1px solid #eeeeee;
margin-bottom: 40px;
}
.feature-content-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
max-width: 1200px;
width: 100%;
}
.software-feature-section:nth-of-type(even) .feature-content-wrapper .feature-text {
order: 1;
padding-left: 30px;
padding-right: 0;
}
.software-feature-section:nth-of-type(even) .feature-content-wrapper .feature-image-container {
order: -1;
}
.software-feature-section:nth-of-type(odd) .feature-content-wrapper .feature-text {
padding-right: 30px;
padding-left: 0;
}
.feature-text {
text-align: center;
}
.feature-text h2 {
font-size: 2.2rem;
color: var(--dark-gray);
margin-bottom: var(--spacing-md);
font-weight: 600;
letter-spacing: 1px;
display: flex;
flex-direction: column;
align-items: center;
}
.feature-text h2 i {
color: var(--primary-red);
font-size: 2.5rem;
margin-bottom: 15px;
}
.feature-text p {
font-size: 1.05rem;
color: var(--gray-text);
margin-bottom: 15px;
line-height: 1.75;
text-align: center;
}
.feature-text ul {
list-style: none;
padding-left: 0;
text-align: center;
display: inline-block;
}
.feature-text ul li {
font-size: 0.95rem;
color: var(--gray-text);
margin-bottom: 8px;
padding-left: 25px;
position: relative;
text-align: left;
}
.feature-text ul li::before {
content: "f058";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--light-red);
position: absolute;
left: 0;
top: 1px;
}
.feature-image-container {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid #dddddd;
}
.feature-image-container img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16/10;
object-fit: cover;
}
/* ================================
GRID SECTION (CAPABILITIES)
================================ */
.grid-section {
padding: 60px 20px;
margin-bottom: 60px;
color: var(--dark-gray);
}
.grid-header {
text-align: center;
margin-bottom: 50px;
}
.grid-title {
font-size: var(--font-size-3xl);
color: var(--dark-gray);
margin-bottom: 25px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
position: relative;
display: inline-block;
padding-bottom: var(--spacing-md);
}
.grid-title .title-highlight {
color: var(--primary-red);
text-shadow: 0 0 8px rgba(230, 0, 0, 0.4);
}
.grid-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 75%;
height: 3px;
background: linear-gradient(to right, var(--primary-red), var(--light-red));
border-radius: 2px;
box-shadow: 0 2px 10px rgba(230, 0, 0, 0.5);
}
.grid-subtitle {
color: var(--gray-text);
font-size: 1.05rem;
font-weight: 300;
max-width: 750px;
margin: 15px auto 0;
}
/* Modern Card Grid */
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 25px;
}
.grid-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 25px var(--spacing-md);
text-align: center;
border: 1px solid #dddddd;
box-shadow: var(--shadow-md);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.grid-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.grid-card-icon {
margin-bottom: 15px;
}
.grid-card-icon i {
font-size: 2.5rem;
color: var(--light-red);
background: rgba(255, 51, 51, 0.08);
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
border: 1px solid rgba(255, 51, 51, 0.3);
display: inline-block;
transition: all var(--transition-normal);
}
.grid-card:hover .grid-card-icon i {
background: var(--light-red);
color: var(--white);
transform: scale(1.08);
box-shadow: 0 0 20px var(--light-red);
}
.grid-card-title {
font-size: 1.35rem;
color: var(--dark-gray);
margin-bottom: var(--spacing-sm);
font-weight: 600;
}
.grid-card-description {
font-size: 1rem;
color: var(--gray-text);
line-height: 1.6;
flex-grow: 1;
font-weight: 500;
}
/* ================================
FOCUSED FEATURES SECTION (Tech Tree)
================================ */
.focused-features-section {
padding: 60px 20px;
margin: 0 0 60px 0;
background: linear-gradient(135deg, #f5f7fa 0%, #e0e5ec 100%);
position: relative;
overflow: hidden;
min-height: 800px;
}
.feature-tree-header {
text-align: center;
margin-bottom: 70px;
padding: 0 20px;
position: relative;
z-index: 25;
}
.feature-tree-title {
font-size: var(--font-size-3xl);
color: var(--dark-gray);
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.feature-tree-title .title-highlight {
color: var(--primary-red);
text-shadow: 0 0 10px rgba(230, 0, 0, 0.5);
}
.feature-tree-subtitle {
font-size: 1.1rem;
color: var(--gray-text);
max-width: 650px;
margin: 0 auto;
font-weight: 300;
}
.feature-tree-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 850px;
height: 760px;
margin: 120px auto 0;
display: flex;
justify-content: center;
align-items: center;
}
.feature-lines-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.feature-lines-svg line {
stroke: var(--primary-red);
stroke-width: 2.5px;
stroke-linecap: round;
opacity: 0;
transition: opacity var(--transition-slow);
}
.focused-features-section.visible .feature-lines-svg line {
opacity: 0.85;
}
.feature-gallery-centerpiece {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
}
.feature-main-image-container {
width: 320px;
height: 320px;
aspect-ratio: 1/1;
border-radius: var(--spacing-md);
overflow: hidden;
background: var(--light-gray);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
border: 1px solid #cccccc;
transition: transform 0.4s ease;
}
.feature-main-image-container:hover {
transform: scale(1.08);
}
.feature-main-image-container .main-image {
display: block;
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: opacity var(--transition-normal);
border-radius: 15px;
}
.feature-thumbnails-container {
display: flex;
gap: var(--spacing-sm);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--spacing-sm);
}
.feature-thumbnail {
width: 70px;
height: 70px;
border-radius: var(--spacing-sm);
overflow: hidden;
cursor: pointer;
border: 1px solid #cccccc;
background-color: var(--white);
transition: all var(--transition-normal);
padding: 4px;
position: relative;
box-shadow: var(--shadow-sm);
}
.feature-thumbnail.active,
.feature-thumbnail:hover {
border-color: var(--primary-red);
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-md), 0 0 8px rgba(230, 0, 0, 0.3);
}
.feature-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 6px;
}
/* Feature Branch Positioning */
.feature-branch {
position: absolute;
background: var(--white);
padding: 15px 18px;
border-radius: var(--spacing-sm);
box-shadow: var(--shadow-md);
border: 1px solid #d8dde4;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
min-width: 200px;
transition: all 0.35s ease;
z-index: 5;
opacity: 0;
}
.focused-features-section.visible .feature-branch {
opacity: 1;
}
/* Individual branch animations */
.focused-features-section.visible .branch-1 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.27s; }
.focused-features-section.visible .branch-2 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.34s; }
.focused-features-section.visible .branch-3 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.41s; }
.focused-features-section.visible .branch-4 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.48s; }
.focused-features-section.visible .branch-5 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.55s; }
.focused-features-section.visible .branch-6 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.62s; }
.focused-features-section.visible .branch-7 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.69s; }
.focused-features-section.visible .branch-8 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.76s; }
.focused-features-section.visible .branch-9 { animation: popInBranch 0.5s ease forwards; animation-delay: 0.83s; }
@keyframes popInBranch {
0% {
opacity: 0;
transform: scale(0.5) translate(-50%, -50%);
}
100% {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
}
}
.feature-branch:hover {
transform: scale(1.1) translate(-50%, -50%);
box-shadow: 0 8px 25px rgba(230, 0, 0, 0.2);
border-color: var(--primary-red);
z-index: 20;
}
.feature-branch .icon {
margin-bottom: 5px;
}
.feature-branch .icon i {
font-size: 1.8rem;
color: var(--primary-red);
transition: transform var(--transition-normal);
}
.feature-branch:hover .icon i {
transform: scale(1.2);
}
.feature-branch .content {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.feature-branch .content .title {
font-size: 1rem;
font-weight: 600;
color: var(--dark-gray);
}
.feature-branch .content .value {
font-size: 1.05rem;
color: var(--gray-text);
font-weight: 600;
}
/* Circular positioning for 9 branches */
.branch-1 { top: calc(50% - 380px); left: 50%; transform: translate(-50%, -50%); }
.branch-2 { top: calc(50% - 380px * 0.766); left: calc(50% + 380px * 0.642); transform: translate(-50%, -50%); }
.branch-3 { top: calc(50% - 380px * 0.173); left: calc(50% + 380px * 0.984); transform: translate(-50%, -50%); }
.branch-4 { top: calc(50% + 380px * 0.5); left: calc(50% + 380px * 0.866); transform: translate(-50%, -50%); }
.branch-5 { top: calc(50% + 380px * 0.939); left: calc(50% + 380px * 0.342); transform: translate(-50%, -50%); }
.branch-6 { top: calc(50% + 380px * 0.939); left: calc(50% - 380px * 0.342); transform: translate(-50%, -50%); }
.branch-7 { top: calc(50% + 380px * 0.5); left: calc(50% - 380px * 0.866); transform: translate(-50%, -50%); }
.branch-8 { top: calc(50% - 380px * 0.173); left: calc(50% - 380px * 0.984); transform: translate(-50%, -50%); }
.branch-9 { top: calc(50% - 380px * 0.766); left: calc(50% - 380px * 0.642); transform: translate(-50%, -50%); }
/* ================================
FAQ SECTION
================================ */
.faq-section {
min-height: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
margin: 0;
color: var(--dark-gray);
background: rgba(230, 0, 0, 0.02);
position: relative;
}
.faq-container {
max-width: 1000px;
width: 100%;
z-index: 5;
position: relative;
}
.faq-header {
text-align: center;
margin-bottom: 50px;
}
.faq-title {
font-size: var(--font-size-3xl);
color: var(--dark-gray);
margin-bottom: 25px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
position: relative;
display: inline-block;
padding-bottom: var(--spacing-md);
}
.faq-title .title-highlight {
color: var(--primary-red);
text-shadow: 0 0 8px rgba(230, 0, 0, 0.4);
}
.faq-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 75%;
height: 3px;
background: linear-gradient(to right, var(--primary-red), var(--light-red));
border-radius: 2px;
box-shadow: 0 2px 10px rgba(230, 0, 0, 0.5);
}
.faq-subtitle {
color: var(--gray-text);
font-size: 1.1rem;
font-weight: 300;
letter-spacing: 0.6px;
max-width: 750px;
margin: 15px auto 0;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: var(--spacing-md);
}
.faq-item {
border: 1px solid #e0e0e0;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--white);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.faq-item:hover {
box-shadow: 0 6px 15px rgba(230, 0, 0, 0.1);
border-color: rgba(230, 0, 0, 0.3);
}
.faq-question {
padding: var(--spacing-md);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-weight: 600;
font-size: 1.1rem;
color: var(--dark-gray);
transition: all var(--transition-normal);
text-align: center;
gap: var(--spacing-sm);
}
.faq-question:hover {
color: var(--primary-red);
}
.faq-question i {
color: var(--primary-red);
font-size: 1.2rem;
transition: transform var(--transition-normal);
flex-shrink: 0;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
padding: 0 var(--spacing-md);
color: var(--gray-text);
font-size: 1.15rem;
line-height: 1.7;
font-weight: 500;
text-align: center;
}
.faq-item.active .faq-question {
color: var(--primary-red);
border-bottom: 1px solid rgba(230, 0, 0, 0.2);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-item.active .faq-answer {
max-height: 500px;
padding-top: 15px;
padding-bottom: var(--spacing-md);
}
/* Contact Info */
.contact-info {
text-align: center;
margin-top: 50px;
padding: 25px var(--spacing-md);
background: linear-gradient(135deg, rgba(230, 0, 0, 0.05), rgba(230, 0, 0, 0.1));
border-radius: 15px;
border: 1px solid rgba(230, 0, 0, 0.25);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.contact-info p {
font-size: 1.15rem;
color: var(--dark-gray);
margin-bottom: 0;
}
.contact-info .contact-links {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.contact-info a {
background: var(--primary-red);
color: var(--white);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all var(--transition-normal);
display: inline-flex;
align-items: center;
box-shadow: var(--shadow-sm);
}
.contact-info a i {
margin-right: 8px;
font-size: 1.1rem;
}
.contact-info a:hover {
background: var(--light-red);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
/* ================================
RESPONSIVE DESIGN
================================ */
/* Large Tablets & Small Desktops */
@media (max-width: 992px) {
/* Software Features */
.feature-content-wrapper {
grid-template-columns: 1fr;
gap: 35px;
}
.software-feature-section:nth-of-type(even) .feature-content-wrapper .feature-text,
.software-feature-section:nth-of-type(odd) .feature-content-wrapper .feature-text {
order: 0;
padding: 0;
text-align: center;
}
.feature-text ul {
display: inline-block;
text-align: left;
}
.feature-text h2 {
font-size: 2.2rem;
}
.feature-image-container {
margin-top: 25px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.page-title-section h1 {
font-size: 2.5rem;
}
.page-title-section p {
font-size: 1.1rem;
}
/* Tech Tree Mobile Adjustments */
.feature-lines-svg {
display: none;
}
.focused-features-section {
min-height: auto;
padding: 50px var(--spacing-md);
}
.feature-tree-container {
height: auto;
flex-direction: column;
margin-top: 30px;
max-width: 500px;
}
.feature-gallery-centerpiece {
margin-bottom: var(--spacing-lg);
}
.feature-main-image-container {
width: 200px;
height: 200px;
}
.feature-thumbnail {
width: 60px;
height: 60px;
}
.feature-branches-mobile-container {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
width: 100%;
}
.feature-branch-mobile-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.feature-branch-mobile-row.first-row {
grid-template-columns: 1fr;
}
.feature-branch {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0;
width: 100%;
opacity: 1 !important;
animation: none !important;
min-width: auto;
}
.feature-tree-title {
font-size: 2.2rem;
}
.feature-tree-subtitle {
font-size: 1rem;
}
}
/* Tablets */
@media (max-width: 768px) {
/* Hero Section */
.hero {
justify-content: flex-start;
padding-top: 15px;
padding-bottom: var(--spacing-md);
min-height: auto;
margin: 0;
}
.hero-logo {
margin-top: var(--spacing-md);
margin-bottom: 18px;
max-width: 160px;
}
.hero h1 {
font-size: 2.4rem;
padding: 0 15px;
margin: 0 0 8px;
}
.feature-icons {
flex-direction: column;
gap: 18px;
margin: var(--spacing-md) auto;
align-items: center;
width: 100%;
}
.feature-icon {
width: 100%;
max-width: 260px;
}
.feature-icon i {
font-size: 1.9rem;
width: 62px;
height: 62px;
margin-bottom: 8px;
}
.feature-icon span {
font-size: 0.82rem;
}
.cta-button {
width: 100%;
max-width: 260px;
margin-top: 0;
padding: 9px 16px;
font-size: 0.88rem;
}
.cta-button i {
font-size: 0.9rem;
}
.scroll-indicator {
bottom: 1px;
}
.hero-subtitle {
font-size: 1.25rem;
padding: 0 var(--spacing-xs);
}
/* Gallery Section */
.gallery-section {
padding: 30px 2px;
margin: 0;
}
.gallery-title {
font-size: 1.8rem;
}
.gallery-subtitle {
font-size: 1rem;
max-width: 95%;
}
.content-box {
flex-direction: column;
padding: var(--spacing-sm);
gap: 15px;
}
.gallery-left,
.gallery-right {
min-width: 100%;
padding: var(--spacing-xs) 0;
}
.thumbnail {
width: 65px;
height: 65px;
}
.product-info-title {
font-size: 1.6rem;
}
.product-description {
font-size: 1rem;
}
.features-list li {
font-size: 1rem;
}
/* Software Showcase */
.software-showcase-container {
margin: 0;
}
.software-feature-section {
padding: 25px 2px;
}
.feature-text h2 {
font-size: 1.9rem;
}
.feature-text h2 i {
font-size: 1.8rem;
}
.feature-text p {
font-size: 0.95rem;
}
.feature-text ul li {
font-size: 0.9rem;
}
.page-title-section {
padding: 30px var(--spacing-xs) var(--spacing-sm);
}
.page-title-section h1 {
font-size: 2.2rem;
}
.page-title-section p {
font-size: 1rem;
}
/* FAQ Section */
.faq-section {
padding: 30px 2px;
margin: 0;
}
.faq-title {
font-size: var(--font-size-2xl);
}
.faq-subtitle {
font-size: 1rem;
}
.faq-question {
font-size: 1rem;
padding: var(--spacing-md);
}
.faq-answer {
font-size: 0.9rem;
padding: 0 3px;
}
.faq-item.active .faq-answer {
padding-top: 8px;
padding-bottom: var(--spacing-md);
}
.contact-info {
padding: var(--spacing-md) var(--spacing-xs);
gap: var(--spacing-sm);
}
.contact-info p {
font-size: 1rem;
}
.contact-info a {
padding: 8px 15px;
font-size: 0.9rem;
}
.contact-info a i {
font-size: 1rem;
}
/* Grid Section */
.grid-section {
padding: 30px 2px;
margin: 0;
}
.grid-cards {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 3px;
}
.grid-card {
padding: var(--spacing-md) var(--spacing-xs);
}
.grid-card-icon i {
font-size: 2.2rem;
width: 65px;
height: 65px;
line-height: 65px;
}
.grid-card-title {
font-size: 1.25rem;
}
/* Tech Features */
.focused-features-section {
padding: 25px 2px;
margin: 0;
}
}
/* Mobile Devices */
@media (max-width: 480px) {
.hero {
padding: 15px 0 var(--spacing-sm);
}
.hero-logo {
margin: 15px 0;
max-width: 140px;
}
.hero h1 {
font-size: var(--font-size-2xl);
padding: 0 15px;
margin-bottom: 8px;
}
.hero h1::before,
.hero h1::after {
width: 15px;
height: 15px;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 15px;
}
.scroll-indicator {
bottom: 1px;
font-size: 1.2rem;
}
.feature-icons {
gap: 15px;
}
.feature-icon i {
font-size: 1.8rem;
width: 55px;
height: 55px;
margin-bottom: 6px;
}
.feature-icon span {
font-size: 0.8rem;
}
.cta-button {
padding: 8px 15px;
font-size: var(--font-size-sm);
max-width: 240px;
}
.cta-button i {
font-size: var(--font-size-sm);
}
.gallery-title {
font-size: 1.5rem;
}
.content-box {
padding: 15px;
}
.thumbnail {
width: 50px;
height: 50px;
}
.product-info-title {
font-size: 1.4rem;
}
.product-description {
font-size: 0.95rem;
}
.features-list li {
font-size: 0.95rem;
}
.focused-features-section {
padding: 0;
margin: 0;
}
.feature-tree-header {
margin-bottom: var(--spacing-lg);
}
.feature-tree-title {
font-size: 1.9rem;
}
.feature-tree-subtitle {
font-size: 0.9rem;
}
.feature-main-image-container {
width: 160px;
height: 160px;
}
.feature-thumbnail {
width: 50px;
height: 50px;
}
.feature-branch {
padding: var(--spacing-sm) 15px;
gap: var(--spacing-sm);
}
.feature-branch .icon i {
font-size: 1.3rem;
}
.feature-branch .content .title {
font-size: 0.9rem;
}
.feature-branch .content .value {
font-size: 0.8rem;
}
.grid-cards {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.grid-card-icon i {
font-size: 2rem;
width: 60px;
height: 60px;
line-height: 60px;
}
.grid-card-title {
font-size: 1.15rem;
}
.grid-card-description {
font-size: 0.8rem;
min-height: 40px;
}
}
DBScar 5 DS201
Profesyonel Seviye Arıza Tespit Cihazı
Gelişmiş Kablosuz Bağlantı
Geniş Kapsamlı Marka Desteği
Yüksek Hızlı Teşhis
Satın Al
Launch Teknolojisi
Launch DBScar 5 DS201: Teknik Özellikler
Launch DBScar 5 DS201, araç elektroniği için üst düzey teşhis, kapsamlı özel fonksiyonlar ve dayanıklı bir Bluetooth adaptörü sunar.
360°
360°
DBScar 5 DS201 Öne Çıkanlar
Launch DBScar 5 DS201, aracınızın tüm elektronik sistemlerine derinlemesine erişim sağlayan, en yeni teknolojiye sahip profesyonel bir arıza tespit cihazıdır. Genişletilmiş marka desteği, gelişmiş fonksiyonları ve kullanıcı dostu arayüzü ile atölyeniz için ideal çözümdür.
- Gelişmiş ECU Kodlama ve Programlama
- Detaylı Canlı Veri Akışı ve Kaydı
- 45+ Özel Servis Fonksiyonu
- Hata Kodu Okuma ve Silme
Launch X-Diag Pro Yazılımı
Launch DBScar 5 DS201 ile tam uyumlu X-Diag Pro yazılımı, kapsamlı teşhis ve profesyonel bakım fonksiyonlarını gelişmiş bir arayüzle sunar.
Gelişmiş X-Diag Pro Arayüzü
Launch X-Diag Pro yazılımı, DBScar 5 DS201'in tüm yeteneklerini ortaya çıkaran, modern, hızlı ve son derece kullanıcı dostu bir arayüze sahiptir. Ana menü üzerinden tüm modüllere, özel fonksiyonlara ve online programlama seçeneklerine kolayca ulaşabilirsiniz.
- Optimize edilmiş menü yapısı ve hızlı navigasyon
- Yüksek çözünürlüklü ekranlar için tasarlanmış arayüz
- Akıllı arama ve filtreleme fonksiyonları
- Entegre teknik veri ve yardım kılavuzları
Kapsamlı Özel Fonksiyonlar
Yetkili servis düzeyinde birçok özel fonksiyonu ve online ECU kodlama/programlama işlemlerini X-Diag Pro yazılımı ile kolayca gerçekleştirin. En karmaşık bakım ve onarım işlemlerini profesyonelce tamamlayın.
- Gelişmiş servis ve yağ sıfırlama seçenekleri
- Online ECU programlama ve adaptasyonlar
- ADAS kalibrasyon desteği (ek donanım gerekebilir)
- Komponent aktivasyon testleri ve parametre ayarları
Akıllı Araç Tanıma ve Raporlama
X-Diag Pro, VIN (Şasi Numarası) üzerinden aracınızı otomatik olarak tanır ve doğru sistemlere hızla erişmenizi sağlar. Kapsamlı teşhis raporları oluşturarak bulut üzerinde saklayabilir, müşterilerinizle paylaşabilir veya kendi kayıtlarınıza ekleyebilirsiniz.
- OBD2, ISO, CAN, K-Line protokol desteği ile hızlı araç tespiti
- Detaylı ve özelleştirilebilir tam sistem tarama raporu
- Bulut tabanlı rapor yönetimi ve paylaşımı
DBScar 5 DS201 Üstün Yetenekleri
Launch DBScar 5 DS201, temel arıza tespitinden en gelişmiş profesyonel bakım ve programlama işlemlerine kadar geniş bir yelpazede size rakipsiz güç katar.
Otomatik Araç Tespiti
Otomatik araç tespiti ve sistem topoloji haritası.
Canlı Veri İzleme
Sensör verilerini grafiksel, metinsel ve karşılaştırmalı izleme.
ECU Programlama
Desteklenen markalarda ECU online kodlama ve programlama.
Gelişmiş Protokoller
OBD2, ISO, CAN, K-Line dahil en yeni protokoller ve geniş marka/model desteği.
X-Diag Pro Arayüzü
Hızlı, sezgisel ve özelleştirilebilir X-Diag Pro arayüzü.
45+ Servis Fonksiyonu
Yağ, EPB, SAS, BMS, DPF, Enjektör, IMMO ve daha fazlası.
Akü Yönetimi
Akü kaydı, testi ve sağlık durumu analizi.
ADAS Kalibrasyonu
Gelişmiş sürücü destek sistemleri kalibrasyonu (ek ekipmanla).
İmmobilizer & Anahtar
Gelişmiş immobilizer ve anahtar programlama fonksiyonları.
Araç Özellik Yönetimi
Araç özelliklerini etkinleştirme/devre dışı bırakma.
Bulut Tabanlı Güncelleme
Otomatik yazılım güncellemeleri ve bulut üzerinden veri senkronizasyonu desteği.
Ve Daha Fazlası...
Launch DBScar 5 DS201 ile birçok ek modül ve fonksiyona erişim sağlayın.
Teknolojik Mükemmellik
Launch DBScar 5 DS201'in teknolojik mükemmelliğini sergileyen ve onu rakiplerinden ayıran temel donanım özelliklerine göz atın.
İşletim Sistemi
Android 11
İşlemci
MTK 8168 Quad Core
Ram Bellek
6GB
Depolama
128GB Dahili
Ekran
10.1 IPS
Çözünürlük
800*1280px
Kamera
20MP Ön & 5.0MP Arka + Flaş
Bağlantı
Wifi 5.0 GHz, Bluetooth 5.0
Batarya & Ekstra
3.7V 5000mAh, Kılıf
DBScar 5 DS201 Hakkında Merak Edilenler
Launch DBScar 5 DS201 hakkında profesyonel kullanıcılarımızın en çok merak ettiği teknik detaylar ve uzman cevapları.
Launch DBScar 5 DS201'i satın aldığımda kutu içeriğinde neler bulunur?
Launch DBScar 5 DS201 profesyonel paketinizde: DBScar 5 DS201 Ana Ünite (Bluetooth VCI), OBD-II Ana Bağlantı Kablosu, Yazılım Aktivasyon Bilgileri (WhatsApp üzerinden iletilir) bulunmaktadır.
Launch DBScar 5 DS201 cihazı hangi araçlarla uyumludur ve hangi protokolleri destekler?
Launch DBScar 5 DS201, 1996 sonrası üretilen ve OBD-II standardını destekleyen neredeyse pek çok model ile uyumludur. Avrupa, Asya ve Amerika menşeili 120'den fazla araç markasını destekler.
Cihazın yazılım güncelleme süresi ne kadardır?
Launch DBScar 5 DS201 cihazı zaten tablet le geldiği için kurulum tablete geldiği için karmaşık bir durum yoktur. Cihaz bir yıl ücretsiz güncelleme ile gelir.
Online ECU programlama ve kodlama için ek bir ücret veya abonelik gerekir mi?
Hayır gerekmez. Launch DBScar 5 DS201 ile sunulan temel ECU programlama ve kodlama fonksiyonları aktif yazılım aboneliği kapsamında sunulur.
Launch DBScar 5 DS201 Türkçe dil desteği sunuyor mu?
Evet, varsayılan dil Türkçe gelecektir. Müşteri isterse iletişime geçerek kurulum yapılırken farklı dil seçenekleri için destek alabilir. Ayrıca müşteri ayarlar bölümündeki dil seçeneklerinden yazılımı istediği dilde kullanabilir.
Launch DBScar 5 DS201 cihazının garanti kapsamı ve süresi nasıldır?
Launch DBScar 5 DS201 tablet 2 yıl ithalatçı garantili, VCI (Bluetooth adaptörü) ise 6 ay ithalatçı garantilidir. Garanti kapsamında donanım arızaları, üretim hataları ve yazılım sorunları yer almaktadır. Fiziksel darbe ve yanlış kullanımdan kaynaklanan hasarlar garanti kapsamı dışındadır.
Launch DBScar 5 DS201 ile hangi özel servis fonksiyonları kullanılabilir?
Launch DBScar 5 DS201 ile 45+ özel servis fonksiyonu kullanılabilir: Yağ sıfırlama, EPB (Elektronik Park Freni), SAS (Direksiyon Açısı Sensörü), BMS (Akü Yönetim Sistemi), DPF (Partikül Filtresi), Enjektör kodlaması, İmmobilizer, ADAS kalibrasyonu ve daha birçok profesyonel fonksiyon mevcuttur.
Daha fazla bilgi veya teknik destek için bize ulaşın:
0850 532 0550
WhatsApp
info@otoeko.com
12 Installment
12 Installment
12 Installment
12 Installment
12 Installment
12 Installment
12 Installment
12 Installment
Türkçe
English
العربية