:root {
    --primary-color: #00BFFF;
    --secondary-color: #2563EB;
    --primary-dk-color: #0099CC;
    --secondary-dk-color: #1D4ED8;
    --gradient-color: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    --gradient-dk-color: linear-gradient(90deg, var(--primary-dk-color), var(--secondary-dk-color));
    --bg-base-color: #080C14;
    --bg-layer-2-color: #0D1420;
    --bg-layer-3-color: #111827;
    --surface-color: #162032;
    --surface-2-color: #1E2D42;
    --text-color: #F0F6FF;
    --muted-color: #7A94B0;
    --faint-color: #3D5470;
    --success-color: #22C55E;
    --success-dk-color: #16A34A;
    --danger-color: #EF4444;
    --danger-dk-color: #DC2626;
    --warning-color: #F59E0B;
    --warning-dk-color: #D97706;
    --info-color: #00BFFF;
    --info-dk-color: #0099CC;
    --font-barlow: 'Barlow', sans-serif;
    --font-barlow-condensed: 'Barlow Condensed', sans-serif;
    --font-mono: 'DM Mono', monospace;
    --scrollbar-color: #3D5470;
    --header-height: 80px;
    --mobile-header-height: 54px;
}

/* ─── Custom cursor ───────────────────────────────────────────────────────── */
* {
    cursor: none !important;
}

#cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

#cursor-ring {
    position: fixed;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease;
}

/* Hover state on clickable elements */
a:hover~#cursor-dot,
button:hover~#cursor-dot,
[class*="btn"]:hover~#cursor-dot {
    transform: translate(-50%, -50%) scale(2);
}

body.cursor--hover #cursor-dot {
    width: 6px;
    height: 6px;
    opacity: 0.6;
}

body.cursor--hover #cursor-ring {
    width: 48px;
    height: 48px;
    opacity: 0.3;
    border-color: var(--primary-color);
}

body.cursor--clicking #cursor-dot {
    transform: translate(-50%, -50%) scale(0.5);
}

body.cursor--clicking #cursor-ring {
    width: 20px;
    height: 20px;
    opacity: 1;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 99px;
}

/*===============Slick Slider===============*/
.slick-slider .slick-dots {
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 0 0;
    list-style: none;
    margin: 0;
    bottom: -40px;
}

.slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--muted-color);
    text-indent: -9999px;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

/* active dot stretches into a pill */
.slick-dots li.slick-active button {
    width: 24px;
    border-radius: 4px;
    background: var(--primary-color);
}

.slick-slide {
    margin: 0 5px;
}

/*===============Progress Bar===============*/
progress {
    appearance: none;
    width: 100%;
    height: 10px;
}

/* Chrome/Safari */
progress::-webkit-progress-bar {
    background-color: var(--text-color);
    border-radius: 99px;
}

progress.progress-gradient::-webkit-progress-value {
    background: var(--gradient-color);
    border-radius: 99px;
}

/* Firefox */
progress.progress-gradient::-moz-progress-bar {
    background-color: var(--gradient-color);
    border-radius: 99px;
}

/*===============Typography===============*/
.logo--font {
    font-family: var(--font-barlow-condensed), sans-serif;
    font-size: 36px;
    font-weight: 700;
}

.hero--xl--font {
    font-family: var(--font-barlow-condensed), sans-serif;
    font-size: 72px;
    font-weight: 700;
}

.hero--l--font {
    font-family: var(--font-barlow-condensed), sans-serif;
    font-size: 64px;
    font-weight: 700;
}

.hero--m--font {
    font-family: var(--font-barlow-condensed), sans-serif;
    font-size: 56px;
    font-weight: 600;
}

.section--xl--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 48px;
    font-weight: 700;
}

.section--l--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 40px;
    font-weight: 600;
}

.section--m--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 32px;
    font-weight: 600;
}

.section--s--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 28px;
    font-weight: 500;
}

.card--xl--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 24px;
    font-weight: 600;
}

.card--l--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.card--m--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.body--l--font {
    font-family: var(--font-mono), sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.body--m--font {
    font-family: var(--font-mono), sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.body--s--font {
    font-family: var(--font-mono), sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.caption--font {
    font-family: var(--font-mono), sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.micro--font {
    font-family: var(--font-mono), sans-serif;
    font-size: 10px;
    font-weight: 400;
}

.btn--label--font {
    font-family: var(--font-barlow), sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.error-font {
    font-family: var(--font-barlow-condensed), sans-serif;
    font-size: 160px;
    font-weight: 600;
    color: var(--primary-color);
    text-shadow: 4px 4px 0 var(--secondary-color);
}

.subheading {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    padding: 0 0 5px;
    gap: 10px;
}

.subheading::before {
    content: "";
    width: 70px;
    height: 1px;
    background: var(--primary-color);
    flex-shrink: 0;
}

/*===============Buttons===============*/
a[class*="btn--"] {
    text-decoration: none;
}

a[class*="btn--"]:hover {
    color: inherit;
    border-bottom: none;
}

.btn--xl,
.btn--l,
.btn--m,
.btn--s,
.btn--xs,
.btn--full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.btn--xl {
    padding: 18px 50px;
}

.btn--l {
    padding: 14px 28px;
}

.btn--m {
    padding: 10px 20px;
}

.btn--s {
    padding: 7px 14px;
}

.btn--xs {
    padding: 4px 10px;
}

.btn--full {
    padding: 10px 0;
    width: 100%;
}

.btn--primary {
    background-color: var(--primary-color);
    color: var(--text-color);
}

.btn--primary:hover {
    background-color: var(--primary-dk-color);
}

.btn--gradient {
    position: relative;
    background: var(--gradient-color);
    color: var(--text-color);
    z-index: 0;
}

.btn--gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gradient-dk-color);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

.btn--gradient:hover::after {
    opacity: 1;
}

.btn--secondary {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.btn--secondary:hover {
    background-color: var(--secondary-dk-color);
}

.btn--outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn--outline-primary:hover {
    background-color: var(--primary-color);
    color: #000;
}

.btn--outline-secondary {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.btn--outline-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.btn--success {
    background-color: var(--success-color);
    color: var(--text-color);
}

.btn--success:hover {
    background-color: var(--success-dk-color);
}

.btn--danger {
    background-color: var(--danger-color);
    color: #000;
}

.btn--danger:hover {
    background-color: var(--danger-dk-color);
}

.btn--warning {
    background-color: var(--warning-color);
    color: #000;
}

.btn--warning:hover {
    background-color: var(--warning-dk-color);
}

.btn--info {
    background-color: var(--info-color);
    color: #000;
}

.btn--info:hover {
    background-color: var(--info-dk-color);
}

.btn--disabled {
    background-color: var(--surface-color);
    color: var(--faint-color);
    cursor: not-allowed;
}

/*===============Link Styles===============*/
a {
    color: inherit;
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

.secondary--link {
    color: var(--secondary-color);
}

/*===============Utility Classes===============*/
.bg-surface {
    background-color: var(--surface-color);
}

.bg-surface-2 {
    background-color: var(--surface-2-color);
}

.text-muted {
    color: var(--muted-color);
}

.text-faint {
    color: var(--faint-color);
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.text-warning {
    color: var(--warning-color);
}

.text-info {
    color: var(--info-color);
}

.text-gradient {
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/*===============flex Styles===============*/
.flex {
    display: flex;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex--column {
    flex-direction: column;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--center {
    justify-content: center;
    align-items: center;
}

.align-items-center {
    align-items: center;
}

/* Mobile First */
[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/*===============Alert Styles===============*/
.alert {
    padding: 10px;
    border-radius: 8px;
    border-left: 3px solid;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.alert__icon {
    margin-right: 10px;
    flex-shrink: 0;
    display: flex;
}

.alert--success {
    background-color: color-mix(in srgb, var(--success-color) 10%, transparent);
    color: var(--success-color);
    border-color: var(--success-color);
}

.alert--danger {
    background-color: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.alert--warning {
    background-color: color-mix(in srgb, var(--warning-color) 10%, transparent);
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.alert--info {
    background-color: color-mix(in srgb, var(--info-color) 10%, transparent);
    color: var(--info-color);
    border-color: var(--info-color);
}

/*===============Badge Styles===============*/
.badge {
    padding: 5px 20px;
    border-radius: 999px;
}

.badge--success {
    background-color: color-mix(in srgb, var(--success-color) 10%, transparent);
    color: var(--success-color);
    border: 1px solid color-mix(in srgb, var(--success-color) 25%, transparent);
}

.badge--warning {
    background-color: color-mix(in srgb, var(--warning-color) 10%, transparent);
    color: var(--warning-color);
    border: 1px solid color-mix(in srgb, var(--warning-color) 25%, transparent);
}

.badge--danger {
    background-color: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.badge--info {
    background-color: color-mix(in srgb, var(--info-color) 10%, transparent);
    color: var(--info-color);
    border: 1px solid color-mix(in srgb, var(--info-color) 25%, transparent);
}

/*===============Input Styles===============*/
.required::after {
    content: ' *';
    color: var(--danger-color);
}

.input {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    background-color: var(--surface-2-color);
    color: var(--text-color);
    font-family: var(--font-barlow), sans-serif;
    transition: border-color 0.4s ease-in-out;
}

input[type="checkbox"] {
    display: none;
}

.input--full {
    width: 100%;
}

.input--search {
    background-color: color-mix(in srgb, var(--surface-color) 75%, transparent);
    background-image: var(--search-icon-url);
    background-repeat: no-repeat;
    background-position: 12px center;
    padding-left: 40px;
}

.input::placeholder {
    color: var(--muted-color);
}

.input:focus {
    border-color: var(--primary-color);
    outline: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--select-arrow-url);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 30px;
    padding-right: 36px;
    color: var(--muted-color);
}

select:has(option:checked:not([value=""])) {
    color: var(--text-color);
}

select option {
    color: var(--text-color);
}

textarea {
    min-height: 150px;
    resize: none;
}

/*===============Animation Styles===============*/

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

/*===============Base Styles===============*/
body {
    background-color: var(--bg-base-color);
    color: var(--text-color);
    font-family: var(--font-mono), sans-serif;
    padding-top: var(--header-height);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/*===============Header Styles===============*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.3s ease;
}

header.scrolled {
    padding: 10px 0;
    /* slightly tighter when scrolled */
}

header .nav-menu {
    transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, padding 0.3s ease;
}

header.scrolled .nav-menu {
    background-color: var(--bg-layer-2-color);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
    border-radius: 999px;
    padding: 15px 24px;
}

nav .logo a img {
    max-width: 150px;
    height: auto;
}

nav .logo a:hover {
    color: inherit;
    border-bottom: none;
}

.nav-menu {
    align-items: center;
    justify-content: space-between;
}

.nav-menu ul {
    display: flex;
    gap: 25px;
    color: var(--muted-color)
}

.nav-menu ul li.current-menu-item {
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

.mobile-cta {
    color: var(--text-color);
    display: none;
}

/* hamburger button — hidden on desktop */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* hamburger open state */
.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/*===============Footer Styles===============*/
footer {
    background-color: var(--bg-layer-2-color)
}

footer .footer-wrap {
    padding: 50px 0;
}

footer .footer-logo a:hover {
    color: inherit;
    border-bottom: none;
}

footer .footer-logo img {
    max-width: 300px;
    height: auto;
}

footer .footer-menus .menu-item .description {
    padding: 10px 0 30px;
}

footer .footer-menus .menu-item .social-links {
    gap: 20px;
}

footer .footer-menus .menu-item .contact-list {
    padding: 35px 0 25px;
}

footer .footer-menus .menu-item .contact-list li {
    padding-bottom: 15px;
}

footer .footer-menus .menu-item .contact-list li:nth-last-child(1) {
    padding-bottom: 0;
}

footer .footer-menus .menu-item .contact-list li a {
    gap: 20px;
    align-items: center;
}

footer .menu-item .menu-title {
    padding: 25px 0 0;
}

footer .menu-item .menu-list {
    padding: 30px 0 0;
    gap: 20px;
    color: var(--muted-color);
}

footer .newsletter .description {
    color: var(--muted-color);
    padding-bottom: 5px !important;
}

footer .newsletter-form {
    gap: 15px;
}

/*===============Modal Styles===============*/
.inquiry-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: calc(var(--header-height) + 16px);
}

.inquiry-modal-overlay.active {
    display: flex;
}

.inquiry-modal-overlay.active .inquiry-modal {
    transform: translateY(0);
    opacity: 1;
}

.inquiry-modal {
    width: 100%;
    max-width: 954px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.inquiry-modal .modal {
    border-radius: 20px;
    overflow: hidden;
}

.inquiry-modal .modal .modal-header {
    justify-content: space-between;
    align-items: center;
}

.inquiry-modal .modal .modal-header,
.inquiry-modal .modal .modal-footer {
    padding: 25px;
    background-color: var(--bg-layer-3-color);
}

.inquiry-modal .modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 15px 25px;
}

.modal-form {
    background-color: var(--surface-color);
    padding: 20px 45px;
}

/*===============HOME PAGE CSS===============*/


/*===============Hero Styles===============*/
.hero {
    position: relative;
    overflow: hidden;
}

.hero .container {
    position: relative;
    z-index: 1;
}

/* Shared styles */
.hero-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;

    background: radial-gradient(circle,
            var(--surface-2-color) 0%,
            var(--bg-base-color) 60%);
}

/* Top Right Circle */
.hero-bg-circle--right {
    width: 878px;
    height: 878px;

    top: -250px;
    right: -70px;
}

/* Bottom Left Circle */
.hero-bg-circle--left {
    width: 663px;
    height: 663px;

    bottom: -250px;
    left: -250px;
}

.hero-wrap {
    padding: 100px 0;
    align-items: center;
}

.hero-content .subheading {
    padding-bottom: 15px;
}

.hero-content .hero-description {
    padding: 15px 0 25px;
    color: var(--muted-color);
    max-width: 700px;
}

.hero-image {
    padding-top: 20px;
}

.hero-image-slider,
.hero-image-slider .slick-list,
.hero-image-slider .slick-track {
    border-radius: 8px;
    overflow: hidden;
}

.hero-image-slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
    animation: bounce 3s ease-in-out infinite;
}

/*===============Brand Carousel Styles===============*/
.brand-carousel {
    background-color: var(--bg-layer-2-color);
}

.brand-carousel-wrap {
    padding: 20px 0;
}

.brand-carousel .brand-list {
    color: var(--muted-color);
    gap: 50px;
    overflow-x: auto;
}

.brand-list li {
    margin: 0 40px;
    white-space: nowrap;
}

.brand-list .slick-track {
    display: flex;
    align-items: center;
}

.brand-list .slick-slide {
    width: auto !important;
}

/*===============general section Styles===============*/
.section-wrap {
    padding: 48px 0;
}

.section-heading {
    justify-content: space-between;
}

.section-heading .header-cta {
    padding-top: 48px;
    color: var(--primary-color);
}

.section-heading .header-cta a {
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease-in-out;

}

.section-heading .header-cta a::after {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--cta-arrow-url) no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    z-index: 2;
}

.section-heading .header-cta a:hover {
    color: var(--primary-dk-color);
    border-bottom: 1px solid var(--primary-dk-color);
    gap: 10px;
}

.section-heading .subheading {
    padding-bottom: 15px;
}

.section-heading .section-title {
    padding-bottom: 48px;
}

.section-wrap .cta.view-all {
    display: none;
    margin: 50px 0 0;
}

.section-wrap .cta.view-all a {
    color: var(--text-color);

}

.rich-text {
    background: linear-gradient(0deg, var(--bg-layer-2-color), var(--bg-base-color));
    text-align: center;
}

.rich-text .subtitle {
    color: var(--primary-color)
}

.rich-text .description {
    color: var(--muted-color);
    max-width: 853px;
    width: 100%;
}

/*=============== Image Card Base (shared) ===============*/
.img-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.img-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--bg);
    background-size: cover;
    background-position: center;

    transform: scale(1);
    transition: transform 0.5s ease;

    z-index: 0;
}

.img-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(to top,
            var(--surface-color),
            rgba(0, 0, 0, 0));

    z-index: 1;
}

.img-card:hover::before {
    transform: scale(1.1);
}

.img-card-content {
    position: relative;
    z-index: 2;
}

/*===============collection Styles===============*/
.collection {
    background-color: var(--bg-layer-3-color);
}

.collection .card .card-content {
    padding: 200px 25px 25px;
}

.collection .card .title {
    color: var(--primary-color);
}

.collection .card .description {
    color: var(--text-color);
    padding: 10px 0;
}

.collection .card .cta a {
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease-in-out;
}

.collection .card .cta a::after {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--cta-arrow-url) no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    z-index: 2;
}

.collection .card .cta a:hover {
    color: var(--primary-dk-color);
    border-bottom: 1px solid var(--primary-dk-color);
    gap: 10px;
}

/**===============PC cards Styles===============*/
.featured-products {
    background: linear-gradient(var(--bg-layer-3-color), var(--bg-base-color));
}
/* Hide default slick arrow text/icon */
.featured-products-carousel .slick-prev,
.featured-products-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    background-color: var(--surface-color);
    border: 1px solid var(--faint-color);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.featured-products-carousel .slick-prev:hover,
.featured-products-carousel .slick-next:hover {
    background-color: var(--surface-2-color);
    border-color: var(--primary-color);
}

/* Hide slick's default ::before pseudo-element icon */
.featured-products-carousel .slick-prev::before,
.featured-products-carousel .slick-next::before {
    display: none;
}

/* Chevron via ::after */
.featured-products-carousel .slick-prev::after,
.featured-products-carousel .slick-next::after {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background-color: var(--text-color);
    -webkit-mask: var(--chevron-url) no-repeat center / contain;
    mask: var(--chevron-url) no-repeat center / contain;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: background-color 0.2s ease;
}

.featured-products-carousel .slick-prev:hover::after,
.featured-products-carousel .slick-next:hover::after {
    background-color: var(--primary-color);
}

/* Prev = chevron rotated to point left, Next = right */
.featured-products-carousel .slick-prev::after {
    rotate: 90deg;
}

.featured-products-carousel .slick-next::after {
    rotate: -90deg;
}

/* Position outside the card track */
.featured-products-carousel .slick-prev {
    left: -56px;
}

.featured-products-carousel .slick-next {
    right: -56px;
}
.pc-card {
    background-color: var(--surface-2-color);
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.pc-card.slick-slide .card-content .title{
    padding-top: 15px;
}
.pc-card .card-content .title{
    padding-top: 0;
}
.pc-card .card-image img {
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.pc-card li {
    justify-content: space-between;
    border-bottom: 1px solid var(--faint-color);
    padding-top: 15px;
}

.pc-card li .type {
    color: var(--muted-color);
}

.pc-card .cta {
    padding: 25px 0 0;
    align-items: end;
    justify-content: space-between;
}

.price .compare-at-price {
    color: var(--muted-color);
    text-decoration: line-through;
}

.price .actual-price {
    color: var(--primary-color);
}

/*===============Promotional Carousel Styles===============*/
.promotional-carousel {
    background-color: var(--bg-layer-2-color);
    padding: 20px 0;
}

.promotional-carousel .promotional-list {
    gap: 50px;
    overflow-x: auto;
    color: var(--secondary-color);
}

.promotional-carousel .promotional-list li {
    margin: 0 40px;
    white-space: nowrap;
}

/*===============Info Content Styles===============*/
.info-content {
    background: linear-gradient(0deg, var(--bg-base-color), var(--bg-layer-3-color));
}

.info-content .info-content-image img {
    max-width: 588px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    animation: bounce 3s ease-in-out infinite;
}

.info-content .info-content-text>.description {
    padding: 48px 0 35px;
    color: var(--muted-color);
}

.info-content .info-content-text .list li {
    padding-bottom: 25px;
    gap: 25px;
}

.info-content .info-content-text .list li:nth-last-child(1) {
    padding: 0;
}

.info-content .info-content-text .list li .title {
    padding-bottom: 5px;
}

.info-content .info-content-text .list li .description {
    color: var(--muted-color);
}

/*===============Blogs Styles===============*/
.blogs-section {
    background: linear-gradient(0deg, var(--bg-base-color), var(--bg-layer-3-color));
}

.blogs-list .blog-item {
    background-color: var(--surface-color);
    border-radius: 20px;
    overflow: hidden;
}

.blogs-list .blog-item img {
    border-radius: 0 0 8px 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.blogs-list .blog-item:hover img {
    transform: scale(1.1);
}

.blogs-list .blog-item .blog-content {
    padding: 25px;
}

.blogs-list .blog-item .blog-content .blog-meta {
    gap: 15px;
    padding-bottom: 15px;
}

.blogs-list .blog-item .blog-content .blog-meta .author,
.blogs-list .blog-item .blog-content .blog-meta .date {
    color: var(--muted-color);
    gap: 10px;
}

.blogs-list .blog-item .blog-content .description {
    padding: 15px 0;
}

.blogs-list .blog-item .blog-cta a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-color);
}

.blogs-list .blog-item .blog-cta a::after {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--cta-arrow-url) no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    z-index: 2;
}

.blogs-list .blog-item .blog-cta a:hover {
    color: var(--primary-dk-color);
    border-bottom: 1px solid var(--primary-dk-color);
    gap: 10px;
}

.main-blog .blogs-row .blogs-list .blog-item .blog-content {
    padding: 15px;
}

.main-blog .blogs-row .blogs-list .blog-item .blog-content .blog-meta {
    gap: 5px;
    ;
}

.main-blog .blogs-row .blogs-list .blog-item .blog-content .blog-meta .author,
.main-blog .blogs-row .blogs-list .blog-item .blog-content .blog-meta .date {
    gap: 5px;
}

/*===============CTA Styles===============*/
.cta-box {
    background-color: color-mix(in srgb, var(--surface-2-color) 50%, transparent);
    border-radius: 20px;
    padding: 50px 0;
    justify-content: center;
    align-items: center;
}

.cta-box .subtitle {
    color: var(--primary-color);
}

.cta-box .title {
    padding: 0 0 25px;
}

.cta-box .cta-btns {
    gap: 50px;
}

.cta-box hr {
    margin: 35px 0 25px;
    padding: 0 25px;
    border: none;
    border-top: 1px solid var(--faint-color);
    width: 100%;
    max-width: 1195px;
}

.cta-box .cta-footer .cta-footer-items {
    align-items: center;
    gap: 50px;
}

.cta-box .cta-footer .cta-footer-items .item {
    gap: 15px;
    color: var(--muted-color);
}

/*===============ABOUT US PAGE CSS===============*/

/*===============Banner Styles===============*/
.image-banner {
    padding: 200px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.image-banner .banner-title {
    padding: 15px 0 10px;
}

.image-banner .banner-description {
    color: var(--muted-color);
    border-left: 4px solid var(--primary-color);
    padding: 0 0 0 15px;
    max-width: 693px;
}

/*===============Our Values Styles===============*/
.our-values {
    background: linear-gradient(0deg, var(--bg-layer-3-color), var(--bg-base-color));
}

.our-values .our-values-list .our-values-item .content {
    padding: 50px;
}

.our-values .our-values-list .our-values-item {
    background-color: var(--surface-color);
    border-radius: 20px;
    overflow: hidden;
}

.our-values .our-values-list .our-values-item .icon {
    width: fit-content;
    padding: 20px;
    background-color: var(--surface-2-color);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
}

.our-values .our-values-list .our-values-item .title {
    padding: 25px 0 15px;
}

.our-values .our-values-list .our-values-item .description {
    color: var(--muted-color);
}

/*===============Meet the EAM Styles===============*/
.meet-the-team {
    background: linear-gradient(0deg, var(--bg-base-color), var(--bg-layer-3-color));
}

.meet-the-team .team-list .team-item {
    background-color: var(--surface-2-color);
    border-radius: 8px;
    overflow: hidden;
}

.meet-the-team .team-list .team-item .image img {
    object-fit: cover;
    width: 100%;
    border-bottom: 2px solid var(--secondary-color);
    transition: transform 0.3s ease-in-out;
}

.meet-the-team .team-list .team-item .image img:hover {
    transform: scale(1.1);
}

.meet-the-team .team-list .team-item .content {
    padding: 25px;
}

.meet-the-team .team-list .team-item .content .designation {
    color: var(--primary-color);
}

/*===============GET A QUOTE PAGE CSS===============*/


/*===============Get A Quote Styles===============*/
.get-a-quote {
    background: linear-gradient(0deg, var(--bg-base-color), var(--bg-layer-3-color));
}

label {
    display: block;
    margin-bottom: 15px;
    color: var(--muted-color);
    margin-bottom: 15px;
}

.form-group {
    padding-bottom: 25px;
}

.form-wrap {
    background-color: var(--surface-color);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    padding: 25px 45px;
    justify-content: center;
    align-items: center;
}

.info-list-slider {
    gap: 20px;
}

.info .info-box {
    background-color: var(--surface-color);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    padding: 25px;
}

.info .info-box>.content>.title {
    padding: 15px 0;
}

.info .info-box>.content>.description {
    color: var(--muted-color);
}

.info .info-box>.content>.timing {
    color: var(--primary-color);
}

.info-list {
    padding: 15px 0;
}

.info-list li {
    padding-bottom: 15px;
}

.info-list li:last-child {
    padding-bottom: 0;
}

.info-list .content {
    padding-left: 20px;
}

.info-list .content .title {
    color: var(--muted-color);
}

.info-list .content .description {
    color: var(--faint-color);
}

/*===============FAQ Styles===============*/
.faq-list {
    gap: 15px;
}

.faq-list .question,
.faq-list .answer {
    background-color: var(--surface-2-color);
    border-radius: 8px;
    padding: 8px 15px;
}

.faq-list .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 15px;
    border-radius: 0 0 8px 8px;
}

.faq-list .question-item.active .answer {
    max-height: 300px;
    padding: 8px 15px;
}

.faq-list .question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.faq-list .question-item.active .question {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--faint-color);
}

.faq-list .question-item.active .answer {
    border-radius: 0 0 8px 8px;
}

.faq-list .question::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: var(--select-arrow-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-list .question-item.active .question::after {
    transform: rotate(180deg);
}

.faq-section {
    background: linear-gradient(0deg, var(--bg-base-color), var(--bg-layer-2-color));
}

.faq-section .faq-list .question::after {
    width: 40px;
    height: 40px;
}

.faq-section .faq-list .question,
.faq-section .faq-list .question-item.active .answer {
    padding: 25px;
}

.faq-section .faq-list {
    gap: 25px;
}

/*===============FIND A PC PAGE CSS===============*/

/*===============PC category Styles===============*/
.pc-category {
    background: linear-gradient(0deg, var(--bg-base-color), var(--bg-layer-2-color));
}

.pc-category-list .pc-category-item .img-card-content {
    padding: 350px 25px 25px;
}

.pc-category-list .pc-category-item .title {
    color: var(--primary-color);
}

.pc-category-list .pc-category-item .description {
    color: var(--text-color);
    padding: 10px 0;
}

/*===============PRODUCT PAGE CSS===============*/

/*===============Main Product Styles===============*/
.main-product {
    background: linear-gradient(0deg, var(--bg-layer-2-color), var(--bg-base-color));
}

.featured-img img {
    overflow: hidden;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

.product-media {
    min-width: 0;
    overflow: hidden;
}

.product-thumbnails {
    padding-top: 20px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    width: 100%;
    min-width: 0;
}

.product-thumbnails::-webkit-scrollbar {
    display: none;
}

.product-thumbnails img {
    min-width: 225px;
    width: 120px;
    max-width: unset;
    height: 170px;
    object-fit: cover;
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    flex-shrink: 0;
}

.product-thumbnails img:hover {
    border: 1px solid var(--primary-color);
}

.product-thumbnails img.active {
    border: 1px solid var(--primary-color);
}

.product-info {
    padding: 0 10px;
}

.product-info .product-price {
    padding: 25px 0;
    align-items: center;
    gap: 20px;
}

.product-info .product-price .compare-at-price {
    text-decoration: line-through;
    color: var(--faint-color);
}

.product-info .spec-cards-list {
    padding: 25px 0;
}

.product-info .spec-cards-list .spec-card {
    background-color: var(--surface-color);
    border-radius: 8px;
    padding: 20px;
}

.product-info .spec-cards-list .spec-card .subtitle {
    color: var(--muted-color);
}

/*===============PC benchmark styles===============*/
.pc-benchmark {
    background: var(--bg-layer-2-color);
}

.pc-benchmark .benchmark-card-list {}

.pc-benchmark .benchmark-card-list .benchmark-card-item {
    background-color: var(--surface-color);
    border-radius: 8px;
    padding: 25px 35px;
}

.pc-benchmark .benchmark-card-list .benchmark-card-item .heading {
    justify-content: space-between;
    align-items: center;
}

.pc-benchmark .benchmark-card-list .benchmark-card-item .heading .title {
    color: var(--muted-color);
}

.pc-benchmark .benchmark-card-list .benchmark-card-item .heading .score {
    color: var(--primary-color);
}

.pc-benchmark .benchmark-card-list .benchmark-card-item .setting-type {
    padding-top: 15px;
    color: var(--muted-color);
}

/*===============detailed Specs styles===============*/
.detailed-specs {
    background: linear-gradient(0deg, var(--bg-base-color), var(--bg-layer-2-color));
}

.detailed-specs .full-specs .specification-list {
    padding: 45px 25px;
    border-radius: 20px;
    background: linear-gradient(to right,
            var(--surface-color) 0%,
            var(--surface-color) 50%,
            var(--surface-2-color) 50%,
            var(--surface-2-color) 100%);
}

.detailed-specs .full-specs .specification-list li {
    justify-content: space-between;
    border-bottom: 1px solid var(--faint-color);
    padding-bottom: 10px;
}

.detailed-specs .full-specs .specification-list li .type {
    color: var(--muted-color);
}

.detailed-specs .full-specs .specification-list li:nth-child(odd) {
    padding-right: 25px;
}

.detailed-specs .full-specs .specification-list li:nth-child(even) {
    padding-left: 25px;
}

/*===============why this build styles===============*/
.why-this-build {
    background: linear-gradient(0deg, var(--bg-layer-3-color), var(--bg-base-color));
}

.why-this-build .wtb-card-big {
    padding: 563px 25px 25px;
    border-radius: 20px;
}

.why-this-build .wtb-card-big .title {
    padding-bottom: 15px;
    color: var(--primary-color);
}

.why-this-build .wtb-card {
    background-color: var(--surface-color);
    border-radius: 20px;
    padding: 25px;
    justify-content: center;
}

.why-this-build .wtb-card .title {
    padding: 25px 0 15px;
}

.why-this-build .wtb-card .description {
    color: var(--muted-color);
}

/*===============BLOG LIST PAGE styles===============*/
/*===============main blog styles===============*/
.main-blog {
    background: linear-gradient(to bottom,
            var(--bg-base-color) 0%,
            var(--bg-layer-3-color) 50%,
            var(--bg-base-color) 100%);
}

.main-blog .blog-sidebar {
    gap: 20px;
}

.main-blog .blog-sidebar .sidebar-box {
    background-color: var(--surface-2-color);
    border-radius: 8px;
    padding: 15px;
}

.main-blog .blog-sidebar .sidebar-box.search {
    padding: 25px 15px;
}

.sidebar-box.category .category-list {
    padding-top: 15px;
}

.sidebar-box.category .category-list .category-item {
    justify-content: space-between;
    border-bottom: 1px solid var(--faint-color);
    padding: 10px 0;
    align-items: center;
}

.sidebar-box.category .category-list .category-item .cat-name {
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.sidebar-box.category .category-list .category-item .cat-name label {
    color: var(--text-color);
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-box.category .category-list .category-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sidebar-box.category .category-list .category-item .cat-name label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 16px;
    border: 1px solid var(--muted-color);
    border-radius: 4px;
    background-color: var(--surface-2-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sidebar-box.category .category-list .category-item input[type="checkbox"]:checked+label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23080C14' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.sidebar-box.category .category-list .category-item label:hover::before {
    border-color: var(--primary-color);
}

.sidebar-box.category .category-list .category-item .cat-count {
    padding: 3px 15px;
    border-radius: 20px;
    border: 1px solid var(--muted-color);
}

.sidebar-box.popular-post .post-list {
    padding-top: 15px;
}

.sidebar-box.popular-post .post-list .post-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--faint-color);
    gap: 15px;
    align-items: center;
}

.sidebar-box.popular-post .post-list .post-item img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.sidebar-box.newsletter {
    gap: 15px;
}

.sidebar-box.newsletter .description {
    color: var(--muted-color);
}

.sidebar-box.newsletter form {
    gap: 15px;
}

.sidebar-box.newsletter form input {
    background-color: color-mix(in srgb, var(--surface-color) 75%, transparent);
}

/*===============BLOG DETAIL PAGE styles===============*/

.blog-header .content {
    padding: 433px 0 25px;
}

.blog-header .title {
    max-width: 1000px;
    padding-bottom: 15px;
}

.blog-header.img-card::after {
    background: linear-gradient(to top,
            var(--bg-base-color),
            rgba(0, 0, 0, 0));
}

.blog-header .blog-meta {
    gap: 30px;
}

.blog-header .blog-meta .author,
.blog-header .blog-meta .date {
    align-items: center;
    gap: 10px;
    color: var(--muted-color);
}

.blog-header .blog-meta svg {
    width: 35px;
    height: 35px;
}

.blog-detail p,
.blog-detail ul {
    font-size: 18px;
    padding-bottom: 25px;
}

.blog-detail ul li {
    list-style: disc !important;
    padding-left: 0;
}

.blog-detail ul li::marker {
    color: var(--primary-color)
}

.blog-detail ul {
    padding-left: 40px;
}

.blog-detail ul li {
    padding-bottom: 15px;
}

.blog-detail ul li:last-child {
    padding-bottom: 0;
}

.blog-detail h2 {
    font-size: 28px;
    padding-bottom: 15px;
}

.blog-detail h3 {
    font-size: 24px;
    padding-bottom: 15px;
}

.blog-detail h4 {
    font-size: 20px;
    padding-bottom: 15px;
}

.blog-detail h5 {
    font-size: 18px;
    padding-bottom: 15px;
}

.blog-detail img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    padding-bottom: 25px;
    object-fit: cover;
}

.blog-detail .quote-box {
    margin-bottom: 15px;
    padding: 25px;
    background-color: color-mix(in srgb, var(--surface-color) 50%, transparent);
    border-left: 5px solid var(--secondary-color);
}
.blog-detail .quote-box p{
    padding: 0;
}
.main-blog .blog-detail a {
    color: var(--primary-color);
}

.main-blog .blog-detail a:visited {
    color: var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
}

/* ── SPECS TABLE ── */
.specs-table {
    padding: 20px 0;
}

.specs-table__title {
    margin-bottom: 12px;
}

.specs-table table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 1px 4px 6px rgba(47, 47, 47, 0.25);
}

.specs-table thead tr {
    background-color: var(--secondary-color);
}

.specs-table thead th {
    padding: 12px 16px;
    text-align: left;
}

.specs-table tbody tr {
    border-bottom: 1px solid var(--faint-color);
    transition: background-color 0.2s ease;
    background-color: var(--surface-color);
}

.specs-table tbody tr:last-child {
    border-bottom: none;
}

.specs-table tbody tr:hover {
    background-color: rgba(0, 191, 255, 0.06);
}

.specs-table tbody td {
    padding: 12px 16px;
}

.specs-table tbody td:first-child {
    color: var(--primary-color);
}


/* ── PROS CONS ── */
.pros-cons {
    padding: 20px 0;
}

.pros-cons__col {
    padding: 25px;
    border: 1px solid var(--faint-color);
    border-radius: 12px;
    box-shadow: 1px 4px 6px rgba(47, 47, 47, 0.25);
}

.pros-cons__heading {
    padding-bottom: 4px;
    margin-bottom: 4px;
    font-weight: 600;
}

.pros-cons__heading--pro {
    color: #22c55e;
    border-bottom: 2px solid #22c55e;
}

.pros-cons__heading--con {
    color: #ef4444;
    border-bottom: 2px solid #ef4444;
}

.pros-cons__col ul {
    padding: 10px 0 0 20px;
}

.pros-cons__col ul li::marker {
    color: inherit;
}

.pros-cons__col:first-child ul li::marker {
    color: #22c55e;
}

.pros-cons__col:last-child ul li::marker {
    color: #ef4444;
}

.comparision-box {
    padding: 20px 0;
}

.comparision-box .comparision-item {
    padding: 25px;
    border: 1px solid var(--faint-color);
    border-radius: 12px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 4px 6px rgba(47, 47, 47, 0.25);
}

.comparision-box .comparision-item ul {
    padding: 10px 0 0 20px;
}

/* ── 404 PAGE ── */
.error-row a {
    max-width: 260px;
    display: block;
}

.error-row .error-description {
    margin: 10px 0 30px;
    padding: 10px 0 10px 30px;
    border-left: 4px solid var(--primary-color);
}

.error-row .error-cta {
    gap: 20px;
}

.error-row img {
    width: 100%;
    height: auto;
}

.breadcrumb {
    margin: 5px 0;
    color: var(--primary-color);
}

.breadcrumb span a,
.breadcrumb span.breadcrumb_last {
    background-color: color-mix(in srgb, var(--secondary-color) 10%, transparent);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--secondary-color) 70%, transparent);
    padding: 4px 8px;
}