* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #141519
;
            color: #ffffff
;
            overflow-x: hidden;
        }
        a {
            color: #fff;
            text-decoration: none;
        }
        .product-page-category:hover{
            width: 52%;
            color: aquamarine;
            transition: width 0.6s;
        }
        .product-detail-title:hover{
            color: aquamarine;
            transition: width 0.6s;
        }
        /* ===== NAVIGATION ===== */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(20, 21, 25, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 16px 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-logo {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 6px;
            text-transform: uppercase;
        }
        .nav-logo img{
            width: 160px;
        }
        .nav-links {
            display: flex;
            gap: 36px;
            list-style: none;
        }

        .nav-links a {
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            opacity: 0.8;
            transition: opacity 0.3s;
            
        }

        .nav-links a:hover,
        .nav-links a.active {
            opacity: 1;
            border-bottom: 1px solid;
            font-weight: bold;
        }

        .nav-cta {
            padding: 10px 24px;
            border: 1px solid #ffffff;
            border-radius: 50px;
            font-size: 13px;
            color: #ffffff;
            text-decoration: none;
            transition: background 0.3s, color 0.3s;
        }

        .nav-cta:hover {
            background: #ffffff;
            color: #141519;
        }

        .nav-cta-mob {
            display: none;
            padding: 10px 24px;
            border: 1px solid #ffffff;
            border-radius: 50px;
            font-size: 13px;
            color: #ffffff;
            text-decoration: none;
            transition: background 0.3s, color 0.3s;
        }

        .nav-cta-mob:hover {
            background: #ffffff;
            color: #141519;
        }

        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }

        .nav-hamburger span {
            width: 24px;
            height: 2px;
            background: #ffffff
;
            transition: transform 0.3s;
        }

        /* ===== PAGE 1: HERO ===== */
        .hero-section {
            min-height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            padding: 100px 60px 60px;
            overflow: hidden;
            background: url(../images/hero-bg.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
        }

        

        .hero-overlay {
            position: absolute;
            top: 0;
            right: 0;
            width: 60%;
            height: 100%;
            background: #141519
;
            clip-path: polygon(30% 10%, 100% 10%, 100% 100%, 10% 100%);
            transform: rotate(0deg);
            z-index: 1;
            opacity: 0;
        }

        .hero-content {
            position: relative;
            z-index: 5;
            max-width: 800px;
        }

        .hero-tagline {
            font-size: 18px;
            font-style: italic;
            opacity: 0.85;
            margin-bottom: 60px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .hero-tagline::before {
            content: '';
            width: 40px;
            height: 40px;
            background: url(../images/small-logo.svg );
            background-size: cover;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .hero-logo-text {
            font-size: clamp(60px, 8vw, 120px);
            font-weight: 300;
            letter-spacing: 12px;
            text-transform: uppercase;
            margin-bottom: 24px;
            line-height: 1;
        }
        .hero-logo-text img{
            width: 70%;
        }
        .hero-subtitle {
            font-size: clamp(18px, 2vw, 29px);
            font-weight: 400;
            opacity: 0.9;
            margin-bottom: 80px;
        }

        .hero-footer {
            position: absolute;
            bottom: 40px;
            left: 60px;
            z-index: 5;
        }

        .hero-footer-bar {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 250px;
            background: linear-gradient(to top, #2d2e34
, transparent);
            z-index: 2;
            pointer-events: none;
        }

        .hero-footer p {
            font-size: 15px;
            opacity: 0.7;
        }

        /* ===== PAGE 2: ABOUT ===== */
        .about-section {
            min-height: 90vh;
            padding: 120px 60px 60px;
            position: relative;
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1600px;
            margin: 0 auto;
        }

        .about-left {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .about-headline {
            font-size: clamp(28px, 3.5vw, 52px);
            font-weight: 700;
            line-height: 1.1;
        }

        /* Cards */
        .card {
            background-color: #202127
;
            border-radius: 16px;
            padding: 36px;
        }

        .card-icon {
            width: 65px;
            height: 65px;
            background-color: #2b622a
;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }

        .card-icon svg {
            width: 26px;
            height: 26px;
            stroke: #ffffff
;
            fill: none;
            stroke-width: 1.5;
        }

        .card-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .card-text {
            font-size: 16px;
            line-height: 1.5;
            opacity: 0.9;
        }

        .about-right {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        /* Values */
        .values-card {
            background: linear-gradient(to bottom, #1a424d
, #305934
);
            border-radius: 16px;
            padding: 30px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .value-item {
            text-align: center;
        }

        .value-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .value-icon svg {
            width: 44px;
            height: 44px;
            stroke: #ffffff
;
            fill: none;
            stroke-width: 1.5;
        }

        .value-label {
            font-size: 15px;
            font-weight: 700;
            line-height: 1.3;
        }

        /* Quote */
        .about-quote {
            font-size: 15px;
            font-style: italic;
            line-height: 1.6;
            opacity: 0.85;
            margin-top: 40px;
            max-width: 1600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Logo in top-right of page 2 */
        .section-logo {
            position: absolute;
            top: 40px;
            right: 60px;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .about-grid {
                grid-template-columns: 1fr;
            }

            .values-card {
                grid-template-columns: repeat(2, 1fr);
            }

            .navbar {
                padding: 16px 30px;
            }

            .hero-section,
            .about-section {
                padding-left: 30px;
                padding-right: 30px;
            }

            .hero-footer {
                left: 30px;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background:#2b622a;
                flex-direction: column;
                padding: 24px 30px;
                gap: 20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .nav-links.open {
                display: flex;
            }

            .nav-hamburger {
                display: flex;
            }

            .nav-cta {
                display: none;
            }
            .nav-cta-mob{
                display: block;
                width: max-content;
            }


            .hero-logo-text {
                letter-spacing: 6px;
            }

            .values-card {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .hero-section {
                padding-top: 120px;
            }

            .hero-logo-text {
                font-size: 48px;
                letter-spacing: 4px;
            }
        }

/* ===== PAGE 3: OUR TEAM ===== */
.team-section {
    min-height: 100vh;
    padding-top: 140px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.team-bg-accent {
    position: absolute;
    width: 600px;
    height: 100%;
    top: 0;
    pointer-events: none;
    z-index: 0;
}

.team-bg-left {
    left: 0;
    background: linear-gradient(to right, rgba(26, 66, 77, 0.3), transparent);
}

.team-bg-right {
    right: 0;
    background: linear-gradient(to left, rgba(26, 66, 77, 0.3), transparent);
}

.team-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.team-title {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    font-style: italic;
    background: linear-gradient(to right, #1a424d, #305934);
    padding: 60px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: -320px;
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-photo {
    width:48%;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 20px;
    border:3px solid rgb(255 255 255);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: center;
}

.team-role {
    font-size: 14px;
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 30px;
    text-align: center;
}

.team-bio {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.9;
    text-align:left;
    width: 88%;
}

.team-bio strong {
    font-weight: 700;
}

/* Responsive for Page 3 */
@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .team-title{
        background: none;
    }
    .team-grid {
    margin-top: -20px;
    }
}

@media (max-width: 768px) {
    .team-section {
        padding: 100px 30px 40px;
        background-size: cover;
    }

    .team-photo {
        width: 100%;
    }
}


/* ===== PAGE 3: DIFFERENTIATORS ===== */
/* ===== PAGE 4: DIFFERENTIATORS ===== */
.differentiators-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #000000
;
    display: flex;
    align-items: center;
}

.diff-container {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}

.diff-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 28px;
}

.diff-left {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.diff-header {
    background: linear-gradient(to bottom, #1a424d
, #305934
);
    border-radius: 16px;
    padding: 50px 60px;
}

.diff-title {
    font-size: clamp(32px, 3.5vw, 49px);
    font-weight: 700;
    line-height: 1.1;
}

.diff-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    height: 100%;
}

.diff-card {
    background-color: #202127
;
    border-radius: 16px;
    padding: 36px 32px;
}

.diff-card-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.diff-card-text {
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.9;
}

/* Right image spans full height of header + cards */
.diff-image {
    border-radius: 16px;
    overflow: hidden;
}

.diff-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Responsive for Page 3 */
@media (max-width: 1024px) {
    .diff-layout {
        grid-template-columns: 1fr;
    }

    .diff-image {
        height: 350px;
    }
}

@media (max-width: 768px) {
    .diff-cards {
        grid-template-columns: 1fr;
    }

    .differentiators-section {
        padding: 100px 30px 40px;
    }

    .diff-header {
        padding: 36px 30px;
    }
}

/* ===== PAGE 5: PRODUCT PORTFOLIO ===== */
.portfolio-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519
;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-container {
    text-align: center;
    width: 100%;
    max-width: 1500px;
}

.portfolio-title {
    font-size: clamp(48px, 6vw, 96px);
    font-weight: 700;
    margin-bottom: 30px;
}

.portfolio-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 60px;
}

.portfolio-cards, .portfolio-cards-2w {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
.portfolio-cards a, .portfolio-cards-2w a{
    text-decoration: none;
    color: #fff;
}
.portfolio-cards-2w{grid-template-columns: repeat(7, 1fr);}
.portfolio-card {
    background: linear-gradient(to bottom, #1a424d, #305934);
    border-radius: 16px;
    padding: 56px 28px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
    text-align: left;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(43, 98, 42, 0.25);
}

.portfolio-card-title {
    font-size: clamp(20px, 1.5vw, 26px);
    font-weight: 700;
    line-height: 1.2;
}

.portfolio-card-number {
    font-size: 21px;
    font-weight: 700;
    align-self: center;
    margin-top: auto;
    padding-top: 40px;
}

/* Responsive for Page 4 */
@media (max-width: 1024px) {
    .portfolio-cards, .portfolio-cards-2w {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio-cards, .portfolio-cards-2w {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-section {
        padding: 100px 30px 40px;
    }
}

@media (max-width: 480px) {
    .portfolio-cards, .portfolio-cards-2w {
        grid-template-columns: 1fr;
    }
}

/* ===== PAGE 5: PRODUCT DETAIL ===== */
.product-detail-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.product-detail-bg-accent {
    position: absolute;
    top: -200px;
    right: -62%;
    width: 1200px;
    height: 1200px;
    background: linear-gradient(to bottom, #14151900, #2b622a);
    transform: rotate(294deg);
    opacity: 3.15;
    pointer-events: none;
    z-index: 0;
}


.product-detail-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.product-detail-title {
    font-size: clamp(24px, 2.5vw, 40px);
    font-weight: 700;
    margin-bottom: 40px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: start;
}

.product-image-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    /* aspect-ratio: 608 / 698; */
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.product-image-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, #121216bf
, transparent);
    z-index: 1;
    border-radius: 0 0 16px 16px;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-list-item {
    background-color: #202127;
    border-radius: 12px;
    padding: 34px 28px;
    font-size: 22px;
    font-weight: 500;
    transition: background-color 0.3s, transform 0.2s;
}

.product-list-item:hover {
    background-color: #2a2b33
;
    transform: translateX(4px);
}

/* Responsive for Page 5 */
@media (max-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-image-wrapper {
        max-width: 500px;
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 768px) {
    .product-detail-section {
        padding: 100px 30px 40px;
    }
}


/* ===== PAGE 8: FOOTER ===== */
.footer-section {
    background: linear-gradient(to bottom, #141519
 0%, #0d1a1d
 50%, #1a3a2a
 100%);
    padding: 80px 60px 40px;
    position: relative;
    overflow: hidden;
}

.footer-container {
    max-width: 1500px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
    gap: 60px;
    margin-bottom: 50px;
}

/* Brand Column */
.footer-brand {
    max-width: 360px;
}

.footer-logo {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.footer-slogan {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.75;
    margin-bottom: 24px;
}

.footer-socials {
    display: flex;
    gap: 16px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff
;
    transition: background 0.3s, border-color 0.3s;
}

.footer-socials a:hover {
    background: #2b622a
;
    border-color: #2b622a
;
}

/* Nav Columns */
.footer-nav h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-nav-title {
    position: relative;
    padding-bottom: 12px;
}

.footer-nav-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #2b622a
;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
}

.footer-nav ul li {
    margin-bottom: 12px;
}

.footer-nav ul li a {
    color: #ffffff
;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.75;
    transition: opacity 0.3s;
}

.footer-nav ul li a:hover {
    opacity: 1;
}

/* Contact List */
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact-list li svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.footer-contact-list li span {
    font-size: 14px;
    opacity: 0.75;
}

/* Divider */
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
}

/* Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 13px;
    opacity: 0.6;
}

.footer-dev-link {
    color: #27dddf
;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s;
}

.footer-dev-link:hover {
    opacity: 0.8;
}

/* Responsive for Footer */
@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-section {
        padding: 60px 30px 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}


/* ===== PAGE 9: PRODUCT DETAIL PAGE ===== */
.product-page-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.product-page-accent-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-accent-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.product-page-category {
    display: inline-block;
    background: linear-gradient(to right, #1a424d, #305934);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
    width: 50%;
}

.product-page-name {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    margin-bottom: 50px;
}

.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left: Images */
.product-page-images {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.product-page-img-main {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.product-page-img-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}


.product-page-img-secondary img {
    width: 180%;
    height: auto;
    object-fit: contain;
    border-radius: 90px;
}

/* Right: Info */
.product-page-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-page-block-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.product-page-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #2b622a
;
}

.product-page-list {
    list-style: none;
    padding: 0;
}

.product-page-list li {
    font-size: 20px;
    line-height: 1.6;
    opacity: 0.9;
    padding-left: 24px;
    position: relative;
    margin-bottom: 12px;
}

.product-page-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #27dddf
;
    font-size: 20px;
    line-height: 1.4;
}

/* Responsive for Page 9 */
@media (max-width: 1024px) {
    .product-page-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .product-page-images {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .product-page-img-main,
    .product-page-img-secondary {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .product-page-section {
        padding: 100px 30px 40px;
    }

    .product-page-images {
        flex-direction: column;
    }
    .product-page-img-secondary img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
}

/* Products css by team */



/* //first aid kit  */
/* Section Wrapper */
.product-page-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.product-page-accent-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-accent-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.product-page-category {
    display: inline-block;
    background: linear-gradient(to right, #1a424d
, #305934
);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
}

.product-page-name {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    margin-bottom: 50px;
}

.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left: Images */

.product-page-img-main {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.product-page-img-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}



/* Right: Info */
.product-page-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-page-block-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.product-page-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #2b622a
;
}

.product-page-list {
    list-style: none;
    padding: 0;
}


/* //tool-kit */
/* Section Wrapper */
.product-page-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.product-page-accent-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-accent-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.product-page-category {
    display: inline-block;
    background: linear-gradient(to right, #1a424d
, #305934
);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
}

.product-page-name {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    margin-bottom: 50px;
}

.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left: Images */

.product-page-img-main {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.product-page-img-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

/* Right: Info */
.product-page-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-page-block-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.product-page-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #2b622a
;
}

.product-page-list {
    list-style: none;
    padding: 0;
}



/* Responsive */
@media (max-width: 992px) {
  .product-page-grid {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .product-page-grid {
    flex-direction: column;
  }

  .product-page-img-secondary img {
    max-width: 100%;
  }
}
/* //Tyre Pressure Monitoring System */
/* Section Wrapper */
.product-page-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.product-page-accent-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-accent-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.product-page-category {
    display: inline-block;
    background: linear-gradient(to right, #1a424d
, #305934
);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
}

.product-page-name {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    margin-bottom: 50px;
}

.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left: Images */

.product-page-img-main {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.product-page-img-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

/* Right: Info */
.product-page-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-page-block-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.product-page-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #2b622a
;
}

.product-page-list {
    list-style: none;
    padding: 0;
}



/* //puncture kit */
/* Section Wrapper */
.product-page-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.product-page-accent-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-accent-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.product-page-category {
    display: inline-block;
    background: linear-gradient(to right, #1a424d
, #305934
);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
}

.product-page-name {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    margin-bottom: 50px;
}

.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left: Images */

.product-page-img-main {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.product-page-img-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

/* Right: Info */
.product-page-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-page-block-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.product-page-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #2b622a
;
}

.product-page-list {
    list-style: none;
    padding: 0;
}


/* //jumper cable */
/* Section Wrapper */
.product-page-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519;
    overflow: hidden;
    background: url(../images/page-bg.png) no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top right;
}

.product-page-accent-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-accent-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #27dddf
, #2b622a
);
    z-index: 0;
}

.product-page-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.product-page-category {
    display: inline-block;
    background: linear-gradient(to right, #1a424d
, #305934
);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
}

.product-page-name {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    margin-bottom: 50px;
}

.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left: Images */

.product-page-img-main {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.product-page-img-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.product-page-img-secondary {
    width: 100%;
    max-width: 360px;
}


/* Right: Info */
.product-page-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-page-block-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.product-page-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #2b622a
;
}

.product-page-list {
    list-style: none;
    padding: 0;
}



/* Responsive */
@media (max-width: 992px) {
  .product-page-grid {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .product-page-grid {
    flex-direction: column;
  }

  .product-page-img-secondary img {
    max-width: 100%;
  }
}


/* Responsive */
@media (max-width: 992px) {
  .product-page-grid {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .product-page-grid {
    flex-direction: column;
  }

  .product-page-img-secondary img {
    max-width: 100%;
  }
}


/* Responsive */
@media (max-width: 992px) {
  .product-page-grid {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .product-page-grid {
    flex-direction: column;
  }

  .product-page-img-secondary img {
    max-width: 100%;
  }
}



/* Responsive */
@media (max-width: 768px) {
  .emergency-safety .container {
    flex-direction: column;
  }

  .kit-gallery img {
    width: 100%;
  }
}


/* Responsive for Page 9 */
@media (max-width: 1024px) {
    .product-page-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .product-page-images {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .product-page-img-main,
    .product-page-img-secondary {
        border-radius: 58px;
        overflow: auto;
    }
}

@media (max-width: 768px) {
    .product-page-section {
        padding: 100px 30px 40px;
    }

    .product-page-images {
        flex-direction: column;
    }
    .product-page-img-secondary img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
}


/* ===== PAGE 10: 3D BADGES ===== */
.badges-section {
    min-height: 100vh;
    padding: 120px 60px 60px;
    position: relative;
    background-color: #141519
;
    overflow: hidden;
}

.badges-bg-glow {
    position: absolute;
    top: 0;
    right: -200px;
    width: 600px;
    height: 100%;
    background: linear-gradient(to left, rgba(39, 221, 223, 0.12), transparent);
    pointer-events: none;
    z-index: 0;
}

.badges-category {
    display: inline-block;
    background: linear-gradient(to right, #1a424d
, #305934
);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.badges-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.badges-title {
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

.badges-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
}

.badges-left,
.badges-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.badge-img-card {
    border-radius: 12px;
    overflow: hidden;
    background-color: #1e1f25
;
}

.badge-img-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.badges-description {
    font-size: 24px;
    line-height: 1.7;
    opacity: 0.85;
}

/* Responsive for Page 10 */
@media (max-width: 1024px) {
    .badges-grid {
        grid-template-columns: 1fr;
    }

    .badges-left {
        flex-direction: row;
        gap: 20px;
    }

    .badges-left .badge-img-card {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .badges-section {
        padding: 100px 30px 40px;
    }

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

    .badges-right {
        gap: 20px;
    }
}


/* Section Wrapper for Styling & Branding*/
/* Section Wrapper */
.Styling-Branding .product-page-section {
  min-height: 100vh;
  padding: 120px 60px 60px;
  position: relative;
  background-color: #141519;
  overflow: hidden;
  background: url(images/page-bg.png) no-repeat;
  background-size: cover;
  background-position: top right;
}

/* Accent Bars */
.Styling-Branding .product-page-accent-left,
.Styling-Branding .product-page-accent-right {
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, #27dddf, #2b622a);
  z-index: 0;
}
.Styling-Branding .product-page-accent-left { left: 0; }
.Styling-Branding .product-page-accent-right { right: 0; }

/* Container */
.Styling-Branding .product-page-container {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Category Label */
.Styling-Branding .product-page-category {
  display: inline-block;
  background: linear-gradient(to right, #1a424d, #305934);
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #fff;
}

/* Product Name */
.Styling-Branding .product-page-name {
  font-size: clamp(28px, 3vw, 42px);
  text-align: center;
  font-weight: 700;
  margin-bottom: 40px;
  color: #fefafa;
}

/* Grid Layouts */
.Styling-Branding .product-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
}

.Styling-Branding .product-page-grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: flex-start;
}
.Styling-Branding .product-page-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
}

/* Image Blocks */
.Styling-Branding .branding-image-block,
.Styling-Branding .product-page-images {
  text-align: center;
}

.Styling-Branding .branding-image-block img,
.Styling-Branding .product-page-img-secondary img {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  object-fit: cover;
  margin: auto;
  border-radius: 90px;
}
.Styling-Branding .product-page-img1-secondary img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  object-fit: cover;
  margin: auto;
}

/* Right Column Images */
.Styling-Branding .right-image-top img {
  transform: translateX(-355px); /* desktop shift left */
  margin-bottom: 15px;
}

.Styling-Branding .right-image-bottom img {
  transform: translateX(100px); /* desktop shift right */
  margin-top: 15px;
}

/* Content Block Wrapper */
.Styling-Branding .product-page-block1 {
  padding: 25px 20px;
  margin-top: 20px;
  margin-left: -350px;   /* desktop left alignment */
  margin-right: auto;
  text-align: left;
}
.Styling-Branding .product-page-text {
  font-size: 24px;        /* slightly larger than body text */
  line-height: 1.6;         /* comfortable spacing */
  color: #e0e0e0;           /* light text for dark background */
  max-width: 1500px;         /* keeps text readable */
  margin: 20px auto;        /* centers text with spacing */
  text-align: left;       /* centered by default */
}

/* Text Content */
.Styling-Branding .product-page-text1 {
  font-size: 24px;
  line-height: 1.6;
  color: #e0e0e0;
  max-width: 800px;
  margin: auto;
}

.product-page-img-secondary.desktop-img-size {
    max-width: fit-content;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .Styling-Branding .product-page-grid,
  .Styling-Branding .product-page-grid2 {
    grid-template-columns: 1fr; /* stack columns */
    gap: 30px;
  }

  .Styling-Branding .product-page-grid1 {
    grid-template-columns: repeat(2, 1fr); /* two columns on tablets */
  }

  .Styling-Branding .product-page-block1 {
    margin-left: 0; /* reset left shift */
    text-align: center; /* center text on tablets */
  }
}

@media (max-width: 768px) {
  .Styling-Branding .product-page-grid1 {
    grid-template-columns: 1fr; /* single column on mobile */
  }

  .Styling-Branding .branding-image-block img,
  .Styling-Branding .product-page-img-secondary img,
  .Styling-Branding .product-page-img1-secondary img {
    max-width: 100%;
    margin: auto;
  }

  .Styling-Branding .right-image-top img,
  .Styling-Branding .right-image-bottom img {
    transform: none; /* reset shifts on mobile */
    margin: 10px auto; /* consistent spacing */
  }

  .Styling-Branding .product-page-block1 {
    margin-left: 0; /* reset block alignment */
    text-align: center; /* center block on mobile */
    padding: 20px 15px;
  }

  .Styling-Branding .product-page-text1 {
    font-size: 24px;
    line-height: 1.5;
  }
}


/* mamoon CSS */


/* ===== CRASH GUARD & LEG GUARDS ===== */
.crashguard-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
background-color: #1e2025
;
overflow: hidden;
}
 
.crashguard-accent {
position: absolute;
top: 0;
right: -100px;
width: 400px;
height: 100%;
background: linear-gradient(to left, rgba(39, 221, 223, 0.08), transparent);
pointer-events: none;
z-index: 0;
}
 
.crashguard-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
 
.crashguard-container {
position: relative;
z-index: 1;
max-width: 1500px;
margin: 0 auto;
}
 
.crashguard-name {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
margin-bottom: 40px;
}
 
.crashguard-grid {
display: grid;
grid-template-columns: 1.2fr 1.5fr 1.3fr;
gap: 40px;
align-items: start;
}
 
/* Left Images */
.crashguard-images {
display: flex;
flex-direction: column;
gap: 20px;
}
 
.crashguard-img-main {
border-radius: 12px;
overflow: hidden;
}
 
.crashguard-img-main img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 12px;
}
 
.crashguard-img-parts {
background-color: #f0f0f0
;
border-radius: 12px;
overflow: hidden;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
 
.crashguard-img-parts img {
width: 100%;
max-width: 280px;
height: auto;
object-fit: contain;
}
 
/* Center Image */
.crashguard-img-center {
border-radius: 12px;
overflow: hidden;
height: 100%;
}
 
.crashguard-img-center img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
 
/* Right Info */
.crashguard-info {
display: flex;
flex-direction: column;
gap: 40px;
}
 
.crashguard-block-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
padding-bottom: 8px;
position: relative;
}
 
.crashguard-block-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 2px;
background: #2b622a
;
}
 
.crashguard-list {
list-style: none;
padding: 0;
}
 
.crashguard-list li {
font-size: 20px;
line-height: 1.6;
opacity: 0.9;
padding-left: 20px;
position: relative;
margin-bottom: 10px;
}
 
.crashguard-list li::before {
content: '•';
position: absolute;
left: 0;
color: #27dddf
;
font-size: 18px;
}
 
/* Responsive for Page 11 */
@media (max-width: 1024px) {
.crashguard-grid {
grid-template-columns: 1fr 1fr;
}
 
.crashguard-img-center {
height: 400px;
}
 
.crashguard-info {
grid-column: 1 / -1;
}
}
 
@media (max-width: 768px) {
.crashguard-grid {
grid-template-columns: 1fr;
}
 
.crashguard-section {
padding: 100px 30px 40px;
}
 
.crashguard-img-center {
height: 300px;
}
}



/* ===== PAGE 12: HELMET LOCK ===== */
.helmet-lock-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
background-color: #1c1e24
;
overflow: hidden;
}
 
.helmet-lock-accent {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, #27dddf
, #2b622a
);
z-index: 0;
}
 
/* Category Bar */
.helmet-lock-category-bar {
position: relative;
margin-bottom: 30px;
z-index: 1;
}
 
.helmet-lock-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
}
 
.helmet-lock-category-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, #2b622a
, transparent);
z-index: -1;
transform: translateY(-50%);
}
 
.helmet-lock-container {
position: relative;
z-index: 1;
max-width: 1500px;
margin: 0 auto;
}
 
.helmet-lock-name {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
margin-bottom: 40px;
}
 
.helmet-lock-grid {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr;
gap: 30px;
align-items: start;
}
 
/* Image Cards */
.helmet-lock-img-card {
background-color: #c8dce0
;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
 
.helmet-lock-img-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
 
/* Right Column */
.helmet-lock-right {
display: flex;
flex-direction: column;
gap: 24px;
}
 
.helmet-lock-info-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 18px;
}
 
.helmet-lock-list {
list-style: none;
padding: 0;
}
 
.helmet-lock-list li {
font-size: 20px;
line-height: 1.7;
opacity: 0.9;
padding-left: 20px;
position: relative;
margin-bottom: 8px;
}
 
.helmet-lock-list li::before {
content: '•';
position: absolute;
left: 0;
color: #27dddf
;
font-size: 18px;
}
 
.helmet-lock-img-small {
/* aspect-ratio: 16 / 9; */
max-width: 360px;
border-radius: 75px;
}
 
/* Responsive for Page 12 */
@media (max-width: 1024px) {
.helmet-lock-grid {
grid-template-columns: 1fr 1fr;
}
 
.helmet-lock-right {
grid-column: 1 / -1;
}
}
 
@media (max-width: 768px) {
.helmet-lock-grid {
grid-template-columns: 1fr;
}
 
.helmet-lock-section {
padding: 100px 30px 40px;
}
 
.helmet-lock-img-card {
aspect-ratio: 4 / 3;
}
}


/* ===== PAGE 62: BAGS & BOXES ===== */
.bags-boxes-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
background-color: #1c1e24
;
overflow: hidden;
}
 
.bags-boxes-accent {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, #27dddf
, #2b622a
);
z-index: 0;
}
 
/* Category Bar */
.bags-boxes-category-bar {
position: relative;
margin-bottom: 10px;
z-index: 1;
}
 
.bags-boxes-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
font-style: italic;
}
 
.bags-boxes-category-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, #2b622a
, transparent);
z-index: -1;
transform: translateY(-50%);
}
 
.bags-boxes-container {
position: relative;
z-index: 1;
max-width: 1500px;
margin: 0 auto;
}
 
.bags-boxes-name {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
text-align: center;
margin-bottom: 40px;
}
 
/* Grid Layout */
.bags-boxes-grid {
display: grid;
grid-template-columns: 1.3fr 1.4fr 1fr;
gap: 28px;
align-items: start;
}
 
/* Image Cards */
.bags-boxes-card {
position: relative;
border-radius: 16px;
overflow: hidden;
}
 
.bags-boxes-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
 
.bags-boxes-card-large {
height: 420px;
}
 
.bags-boxes-card-tall {
height: 520px;
align-self: center;
}
 
.bags-boxes-card-small {
height: 200px;
}
 
.bags-boxes-card-medium {
height: 280px;
}
 
/* Label inside card */
.bags-boxes-label {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(0, 0, 0, 0.7);
padding: 8px 16px;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
}
 
/* Right Column */
.bags-boxes-right {
display: flex;
flex-direction: column;
gap: 24px;
}
 
/* Responsive for Page 13 */
@media (max-width: 1024px) {
.bags-boxes-grid {
grid-template-columns: 1fr 1fr;
}
 
.bags-boxes-right {
grid-column: 1 / -1;
flex-direction: row;
}
 
.bags-boxes-card-small,
.bags-boxes-card-medium {
flex: 1;
height: 250px;
}
}
 
@media (max-width: 768px) {
.bags-boxes-grid {
grid-template-columns: 1fr;
}
 
.bags-boxes-section {
padding: 100px 30px 40px;
}
 
.bags-boxes-card-large,
.bags-boxes-card-tall {
height: 300px;
}
 
.bags-boxes-right {
flex-direction: column;
}
}



/* ===== PAGE 69: SPEEDOMETER SCREENS ===== */
.speedometer-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
/* background: linear-gradient(135deg, #141519
0%, #1a2e30
50%, #1c3a2e
100%); */
overflow: hidden;
}
 
.speedometer-accent {
position: absolute;
top: 0;
right: -100px;
width: 500px;
height: 100%;
background: linear-gradient(to left, rgba(39, 221, 223, 0.1), transparent);
pointer-events: none;
z-index: 0;
}
 
/* Category Bar */
.speedometer-category-bar {
position: relative;
margin-bottom: 30px;
z-index: 1;
}
 
.speedometer-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
}
 
.speedometer-category-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, #2b622a
, transparent);
z-index: -1;
transform: translateY(-50%);
}
 
.speedometer-container {
position: relative;
z-index: 1;

}
 
/* Grid Layout */
.speedometer-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
 
/* Left Column */
.speedometer-left {
display: flex;
flex-direction: column;
gap: 30px;
}
 
.speedometer-name {
font-size: clamp(24px, 2.5vw, 34px);
font-weight: 700;
}
 
.speedometer-img-card {
background-color: #c8e8ec
;
border-radius: 20px;
overflow: hidden;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
}
 
.speedometer-img-card img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 12px;
}
 
/* Right Column */
.speedometer-right {
display: flex;
flex-direction: column;
gap: 20px;
}
 
.speedometer-right-title {
font-size: 24px;
font-weight: 700;
/* font-style: italic; */
text-align: center;
margin-bottom: 10px;
}
 
/* Feature Cards */
.speedometer-feature {
display: flex;
align-items: stretch;
gap: 0;
}
 
.speedometer-feature-number {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
min-width: 60px;
font-size: 24px;
font-weight: 700;
color: #ffffff
;
background: #27dddf
;
border-radius: 8px 0 0 8px;
}
 
.speedometer-feature-content {
flex: 1;
padding: 20px 24px;
border-radius: 0 12px 12px 0;
}
 
.speedometer-feature-content h4 {
font-size: 18px;
font-weight: 700;
color: #1a1a2e
;
margin-bottom: 8px;
}
 
.speedometer-feature-content ul {
list-style: disc;
padding-left: 18px;
margin: 0;
}
 
.speedometer-feature-content ul li {
font-size: 17px;
line-height: 1.6;
color: #1a1a2e
;
margin-bottom: 4px;
}
 
/* Feature Color Variants */
.speedometer-feature-purple {
background-color: #e8d5f5
;
}
 
.speedometer-feature-pink {
background-color: #fcd5d5
;
}
 
.speedometer-feature-teal {
background-color: #c8f0ef
;
}
 
.speedometer-feature-yellow {
background-color: #f5e6a3
;
}
 
/* Responsive for Page 14 */
@media (max-width: 1024px) {
.speedometer-grid {
grid-template-columns: 1fr;
gap: 40px;
}
 
.speedometer-img-card {
max-width: 500px;
margin: 0 auto;
}
}
 
@media (max-width: 768px) {
.speedometer-section {
padding: 100px 30px 40px;
}
 
.speedometer-feature-number {
width: 44px;
min-width: 44px;
font-size: 18px;
}
 
.speedometer-feature-content {
padding: 14px 16px;
}
}


/* ===== PAGE 77: DIY & SERVICE - DIRT BIKE SERVICE TOOL ===== */
.diy-service-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
background-color: #1c1e24
;
overflow: hidden;
}
 
.diy-accent {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, #27dddf
, #2b622a
);
z-index: 0;
}
 
/* Category Bar */
.diy-category-bar {
position: relative;
margin-bottom: 10px;
z-index: 1;
}
 
.diy-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
}
 
.diy-category-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, #2b622a
, transparent);
z-index: -1;
transform: translateY(-50%);
}
 
.diy-container {
position: relative;
z-index: 1;
}
 
.diy-product-name {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
margin-bottom: 40px;
}
 
/* Grid Layout */
.diy-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: start;
}
 
/* Left: Images */
.diy-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
 
.diy-img-card {
background-color: #c8e8ec
;
border-radius: 20px;
overflow: hidden;
/* aspect-ratio: 3 / 4; */
display: flex;
align-items: center;
justify-content: center;
/* padding: 20px; */
}
 
.diy-img-card img {
width: 100%;
height: 100%;
object-fit: contain;
}
 
/* Right: Info */
.diy-info {
display: flex;
flex-direction: column;
gap: 40px;
}
 
.diy-block-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 18px;
padding-bottom: 10px;
position: relative;
}
 
.diy-block-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 2px;
background: #2b622a
;
}
 
.diy-list {
list-style: none;
padding: 0;
}
 
.diy-list li {
font-size: 16px;
line-height: 1.7;
opacity: 0.9;
padding-left: 20px;
position: relative;
margin-bottom: 10px;
}
 
.diy-list li::before {
content: '•';
position: absolute;
left: 0;
color: #27dddf
;
font-size: 18px;
}
 
/* Responsive for Page 15 */
@media (max-width: 1024px) {
.diy-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
 
@media (max-width: 768px) {
.diy-service-section {
padding: 100px 30px 40px;
}
 
.diy-images {
grid-template-columns: 1fr;
}
 
.diy-img-card {
aspect-ratio: 4 / 3;
}
}

/* ===== PAGE 79: BODY GRAPHICS / DECALS ===== */
.decals-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
background-color: #1c1e24
;
overflow: hidden;
}
 
.decals-accent {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, #27dddf
, #2b622a
);
z-index: 0;
}
 
/* Category Bar */
.decals-category-bar {
position: relative;
margin-bottom: 10px;
z-index: 1;
}
 
.decals-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
font-style: italic;
}
 
.decals-category-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, #2b622a
, transparent);
z-index: -1;
transform: translateY(-50%);
}
 
.decals-container {
position: relative;
z-index: 1;
max-width: 1500px;
margin: 0 auto;
}
 
.decals-name {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
text-align: center;
margin-bottom: 40px;
}
 
/* Comparison Card */
.decals-comparison {
margin-bottom: 40px;
}
 
.decals-comparison-card {
display: flex;
align-items: stretch;
border-radius: 20px;
overflow: hidden;
position: relative;
}
 
.decals-half {
flex: 1;
position: relative;
overflow: hidden;
}
 
.decals-half img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 125px;
}
 
.decals-label {
position: absolute;
top: 24px;
left: 24px;
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
color: #ffffff
;
opacity: 0.85;
z-index: 2;
}
 
/* Center Divider */
.decals-divider {
width: 3px;
background-color: rgba(255, 255, 255, 0.5);
z-index: 2;
flex-shrink: 0;
}
 
/* Description */
.decals-description {
font-size: 24px;
line-height: 1.7;
text-align: center;
margin: 0 auto;
}
 
/* Responsive for Page 16 */
@media (max-width: 1024px) {
.decals-comparison-card {
flex-direction: column;
}
 
.decals-divider {
width: 100%;
height: 3px;
}
}
 
@media (max-width: 768px) {
.decals-section {
padding: 100px 30px 40px;
}
 
.decals-description {
font-size: 16px;
}
}


/* ===== PAGE 82: 3D BADGES ===== */
.badges3d-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
background-color: #141519
;
overflow: hidden;
}
 
.badges3d-accent {
position: absolute;
top: 0;
right: -100px;
width: 500px;
height: 100%;
background: linear-gradient(to left, rgba(39, 221, 223, 0.12), transparent);
pointer-events: none;
z-index: 0;
}
 
/* Category Bar */
.badges3d-category-bar {
position: relative;
margin-bottom: 10px;
z-index: 1;
}
 
.badges3d-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
font-style: italic;
}
 
.badges3d-category-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, #2b622a
, transparent);
z-index: -1;
transform: translateY(-50%);
}
 
.badges3d-container {
position: relative;
z-index: 1;
max-width: 1500px;
margin: 0 auto;
}
 
.badges3d-title {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
text-align: center;
margin-bottom: 40px;
}
 
/* Grid Layout */
.badges3d-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
 
/* Left Column */
.badges3d-left {
display: flex;
flex-direction: column;
gap: 24px;
}
 
.badges3d-img-large {
border-radius: 16px;
overflow: hidden;
height: 340px;
}
 
.badges3d-img-large img {
width: 100%;
height: 100%;
object-fit: cover;
}
 
.badges3d-logo {
display: flex;
align-items: center;
justify-content: flex-start;
}
 
.badges3d-logo img {
width: 100%;
object-fit: contain;
border-radius: 40px;
}
 
/* Right Column */
.badges3d-right {
display: flex;
flex-direction: column;
gap: 24px;
}
 
.badges3d-img-card {
border-radius: 16px;
overflow: hidden;
flex: 1;
}
 
.badges3d-img-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
 
/* Description */
.badges3d-description {
font-size: 24px;
line-height: 1.7;
opacity: 0.85;
text-align: left;
max-width: 100%;
}
 
/* Responsive for Page 17 */
@media (max-width: 1024px) {
.badges3d-grid {
grid-template-columns: 1fr;
}
 
.badges3d-right {
flex-direction: row;
}
}
 
@media (max-width: 768px) {
.badges3d-section {
padding: 100px 30px 40px;
}
 
.badges3d-right {
flex-direction: column;
}
 
.badges3d-img-large {
height: 260px;
}
}


/* ===== PAGE 82: RIM TAPE ===== */
.rimtape-section {
min-height: 100vh;
padding: 120px 60px 60px;
position: relative;
background-color: #1c1e24
;
overflow: hidden;
}
 
.rimtape-accent {
position: absolute;
top: 0;
right: -100px;
width: 500px;
height: 100%;
background: linear-gradient(to left, rgba(39, 221, 223, 0.1), transparent);
pointer-events: none;
z-index: 0;
}
 
/* Category Bar */
.rimtape-category-bar {
position: relative;
margin-bottom: 10px;
z-index: 1;
}
 
.rimtape-category {
display: inline-block;
background: linear-gradient(to right, #1a424d
, #305934
);
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
font-style: italic;
}
 
.rimtape-category-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, #2b622a
, transparent);
z-index: -1;
transform: translateY(-50%);
}
 
.rimtape-container {
position: relative;
z-index: 1;
max-width: 1500px;
margin: 0 auto;
}
 
.rimtape-name {
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 700;
text-align: center;
margin-bottom: 40px;
}
 
/* Image Grid */
.rimtape-grid {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: 30px;
align-items: center;
margin-bottom: 50px;
}
 
.rimtape-img-card {
border-radius: 20px;
overflow: hidden;
position: relative;
aspect-ratio: 4 / 3;
}
 
.rimtape-img-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
 
/* Glow badge on center image */
.rimtape-img-glow {
position: relative;
}
 
.rimtape-glow-badge {
position: absolute;
top: 16px;
right: 16px;
width: 60px;
height: 60px;
background-color: #2e7d32
;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
 
.rimtape-glow-badge img {
width: 36px;
height: 36px;
object-fit: contain;
}
 
/* Description */
.rimtape-description {
font-size: 24px;
line-height: 1.7;
text-align: center;
opacity: 0.85;
}
 
/* Responsive for Page 18 */
@media (max-width: 1024px) {
.rimtape-grid {
grid-template-columns: 1fr 1fr;
}
 
.rimtape-img-card:first-child {
grid-column: 1 / -1;
}
}
 
@media (max-width: 768px) {
.rimtape-section {
padding: 100px 30px 40px;
}
 
.rimtape-grid {
grid-template-columns: 1fr;
}
 
.rimtape-description {
font-size: 16px;
}
}



/* for lazy load */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img:not([data-src]) {
    opacity: 1;
}