body {
   background: var(--bg-surface);
}

.breadcrumb {
   background: var(--bg-body);
   padding: 30px clamp(1.5rem, 5vw, 3rem);
}

.breadcrumb ol {
   list-style: none;
   max-width: 1200px;
   margin: auto;
   padding: 0;
   display: flex;
   gap: 0.5rem;
   overflow-x: auto;
   white-space: nowrap;
}

.breadcrumb li::after {
   content: ">";
   margin-left: 0.5rem;
   color: var(--text-muted);
}

.breadcrumb li:last-child::after {
   content: "";
}

.breadcrumb li a {
   color: var(--link-default);
}




.header {
   position: relative;
   background: linear-gradient(#0009, #0009), url('../../assets/img/e-commerce banner.jpg') no-repeat center / cover;
   margin-top: 97px;
   padding: 150px clamp(1.5rem, 5vw, 3rem);
   text-align: center;
}

.header .container {
   max-width: 1200px;
   margin: auto;
}

.header h1 {
   color: var(--text-light);
   margin-bottom: 0.5rem;
}

.header p {
   color: var(--text-light);
   font-size: var(--h5-size);
}

.social-links {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 20px;
}

.social-links a {
   color: var(--text-light);
}






.intro {
   background: var(--bg-body);
   padding: 60px clamp(1.5rem, 5vw, 3rem);
   padding-top: 20px;
   margin: 0;
}

.intro .container {
   max-width: 1200px;
   margin: auto;
}

.intro h2 {
   margin-bottom: 1.5rem;
}

.intro h2 span {
   color: var(--accent);
}

.intro p {
   color: var(--text-body);
   font-size: var(--h6-size);
}




.services h2,
.why-us h2,
.cta h2 {
   color: var(--text-secondary);
   margin-bottom: 1.5rem;
}


.services {
   padding: 100px clamp(1.5rem, 5vw, 3rem);
}

.services .container {
   max-width: 1200px;
   margin: auto;
}

.cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 2rem;
}

.card {
   font-size: var(--p-size);
   background-color: var(--bg-body);
   padding: 2rem;
   border-radius: var(--radius-md);
   color: var(--text-body);
   box-shadow: var(--shadow-elevation);
   border: 1px solid var(--border-default);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   overflow: hidden;
   border-left: 4px solid var(--accent);
}

.card:hover {
   transform: scale(1.05);
   box-shadow: var(--shadow-elevation);
}

.card h3 {
   font-size: 1.2em;
   color: var(--text-secondary);
   margin-bottom: 1rem;
}

.card h3 i {
   color: var(--accent);
   margin-right: 10px;
}

.card p {
   font-size: 1em;
   color: var(--text-muted);
}



.card__features li {
   margin-bottom: 1rem;
}

.card__features li::before {
   content: "✓";
   color: var(--accent);
   margin-right: 0.5em;
}

.highlight {
   background: var(--bg-surface);
   border-left: 4px solid var(--accent);
   padding: 10px 20px;
   font-size: 0.8em;
   font-weight: 500;
   border-radius: var(--radius-sm);
}




.why-us {
   background: var(--bg-body);
   padding: 100px clamp(1.5rem, 5vw, 3rem);
}

.why-us .container {
   max-width: 1200px;
   margin: auto;
}

.why-us li {
   margin-bottom: 1rem;
   color: var(--text-body);
}




.cta-section {
   background: var(--btn-pri-bg);
   text-align: center;
   padding: 60px clamp(1.5rem, 5vw, 3rem);
}

.cta-section .container {
   max-width: 1200px;
   margin: auto;
}

.cta-section h2 {
   color: var(--text-light);
   margin-bottom: 20px;
}

.cta-section p {
   margin-bottom: 20px;
   color: var(--text-light);
}

.cta-section .btn {
   display: inline-block;
   margin: 0.5rem;
}