/* --- SECTION SPACING --- */
.function-section {
    padding: 100px 0; /* Malaking space sa taas at baba para sa Header/Footer */
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center; /* Sinisiguro na lahat ng flex items ay nasa gitna */
}



/* --- IMAGE CENTERED --- */
.function-image-wrapper {
    width: 100%;
    margin: 40px 0 60px 0;
    display: flex;
    justify-content: center;
}

.center-tire-only {
    width: 100%;
    max-width: 950px;
    height: auto;
}

/* --- CENTERED CONTENT BLOCKS --- */
.function-content {
    max-width: 750px; /* Mas makitid para magmukhang professional ang margin sa gilid */
    margin: 0 auto;
    text-align: left; /* Ibabalik natin sa left alignment ang text sa loob ng block para malinis */
}

/* --- MAIN TYPOGRAPHY --- */
.page-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.intro-text, .footer-note {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- INFO BLOCK (CONTAINER) --- */
.info-block {
    /* Naka-set sa 0 ang padding-left para sagad sa dulo ang header */
    padding: 20px 0 30px 0px; 
    margin-bottom: 20px;
    border-left: 0px solid transparent; 
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    overflow: hidden;
}

/* --- HOVER EFFECT WITH MOVEMENT --- */
.info-block:hover {
    /* Magkakaroon ng pulang border at uusog pakanan */
    border-left: 5px solid #d32f2f;
    background-color: #fcfcfc;
    padding-left: 20px; /* Ang "galaw" na effect */
}

/* --- HEADER (NUM + TITLE) --- */
.info-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 5px; /* Sinisigurong sagad sa dulo */
}

.info-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: red; /* Light red/pink base sa image_149221 */
    transition: all 0.3s ease;
    display: inline-block;
}

.info-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    transition: all 0.3s ease;
}

/* --- DESCRIPTION --- */
.info-desc {
    /* Ang 55px indent ay para sa description at content sa ilalim */
    margin: 10px 0 0 55px; 
    color: #555;
    font-size: 1.rem;
    line-height: 1.6;
    max-width: 850px;
    transition: all 0.3s ease;
}

/* --- HOVER TRANSFORMATIONS --- */
.info-block:hover .info-title {
    transform: translateX(5px);
}

.info-block:hover .info-num {
    color: red;
    transform: scale(1.1);
}

.info-block:hover .info-desc {
    color: #222;
}

.tire-check-guide {
    max-width: 900px;
    margin: 0 auto;
    font-family: sans-serif; /* Palitan base sa iyong font preference */
}
/* --- STEP CARD (Dating info-block) --- */
.step-card {
    /* Naka-set sa 0 ang padding-left para sagad sa dulo ang header */
    padding: 10px 0 10px 0px; 
    margin-bottom: 00px;
    border-left: 0px solid transparent; 
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    overflow: hidden;
}

/* --- HOVER EFFECT WITH MOVEMENT --- */
.step-card:hover {
    /* Magkakaroon ng pulang border at uusog pakanan */
    border-left: 5px solid #d32f2f;
    background-color: #fcfcfc;
    padding-left: 20px; /* Ang "galaw" na effect */
}

/* --- HEADER (NUM + TEXT) --- */
.step-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 5px; /* Sinisigurong sagad sa dulo */
}

.step-index {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ff0000; /* Pure red base sa iyong requirement */
    transition: all 0.3s ease;
    display: inline-block;
}

.step-text {
    margin: 0;
    font-size: 1.0rem;
    font-weight: 500; /* Ito ang "Normal" weight */
    line-height: 1.4;
    transition: all 0.3s ease;
    color: #333;      /* Ginawa kong dark gray para mas swabe sa mata dahil hindi na siya bold */
}

/* --- DESCRIPTION (Kung gagamit ka nito sa loob ng step-card) --- */
.step-desc {
    /* Ang 55px indent ay para sa description at content sa ilalim */
    margin: 10px 0 0 55px; 
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 850px;
    transition: all 0.3s ease;
}

/* --- HOVER TRANSFORMATIONS --- */
.step-card:hover .step-text {
    transform: translateX(5px);
}

.step-card:hover .step-index {
    color: #d32f2f; /* Darker red on hover */
    transform: scale(1.1);
}

.step-card:hover .step-desc {
    color: #222;
}
/* --- IMAGE GRID ALIGNMENT --- */
.anatomy-section-container, 
.tire-damage-container {
    /* Pantay sa info-desc (55px) */
    margin-left: 55px;
    margin-top: 20px;
    transition: all 0.4s ease;
}

/* --- RESPONSIVE ADJUSTMENT --- */
@media (max-width: 768px) {
    .info-block:hover {
        padding-left: 10px;
    }
    .info-desc, 
    .anatomy-section-container {
        margin-left: 30px; /* Mas maliit na indent para sa mobile */
    }
}

/* Para sa spacing ng Intro at Footer text */
.intro-text {
    margin-bottom: 40px;
}

.footer-note {
    margin-top: 40px;
}

/* --- RELATED LINKS STYLING --- */
.related-links-container {
    max-width: 1600px;
    margin: 50px auto;
    padding: 0 20px;
}

.related-title {
    font-family: 'Arial Black', sans-serif;
    font-size: 24px;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc; /* Ang mahabang manipis na linya */
}

/* Ang makapal na linya sa ilalim ng text */
.related-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 60px; /* Sukat ng makapal na underline */
    height: 4px;
    background-color: #E21B24;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dalawang columns gaya ng nasa image */
    gap: 20px;
    margin-top: 30px;
}

.related-card {
    background-color: #2e2e2e; /* Grey background gaya ng nasa sample */
    height: 80px; /* Taas ng box */
    display: flex;
    align-items: center;
    padding-left: 20px;
    text-decoration: none;
    color: white;
    transition: 0.3s;
}

.related-card span {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

.related-card:hover {
    background-color: #E21B24; /* Bahagyang didilim pag na-hover */
    transform: translateX(5px); /* Konting galaw pakanan */
}

/* Responsive para sa Mobile */
@media (max-width: 600px) {
    .related-grid {
        grid-template-columns: 1fr; /* Isang column na lang pag mobile */
    }
}

/* cCeanatomy section*/

.table-dropdown {
    margin: 15px 0 0 55px; /* Naka-align sa simula ng title text */
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    transition: all 0.3s ease;
}

.dropdown-button {
    padding: 10px 15px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #444;
}

/* Para sa arrow animation */
.table-dropdown[open] .arrow {
    transform: rotate(180deg);
}

.table-wrapper {
    padding: 15px;
    border-top: 1px solid #eee;
    overflow-x: auto; /* Para hindi masira ang layout sa mobile */
    animation: slideDown 0.3s ease-out;
}

/* Table Styling na sakto sa width */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.comparison-table th, .comparison-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.comparison-table th {
    background: #f8f8f8;
    color: #000;
}

.feat-name {
    font-weight: bold;
    background: #fafafa;
}



/* Animation */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Siguraduhin na hindi gagalaw ng masyado ang block sa hover pag bukas ang table */
.info-block:hover .table-dropdown {
    border-color: #d32f2f;
}
/* Tinatanggal ang default indent ng listahan sa loob ng table */
.cell-list {
    margin: 5px 0;
    padding-left: 20px; /* Space para sa bullet/dash */
    list-style-type: "- "; /* Gumagamit ng gitling (dash) gaya ng nasa image */
}

.cell-list li {
    margin-bottom: 2px;
    font-size: 0.9rem;
}

/* Optional: Kung gusto mong lahat ng text sa loob ng cell ay sumunod sa font style */
.adv-tube {
    line-height: 1.4;
    vertical-align: top;
}
/* --- MOBILE RESPONSIVE --- */
@media screen and (max-width: 768px) {
    /* Binabawasan ang margin ng container para sa maliit na screen */
    .function-content {
        max-width: 100%;
        padding: 0 10px;
    }

    /* Inaadjust ang alignment ng info-block sa mobile */
    .info-block {
        padding-left: 15px;
    }

    .info-desc, .table-dropdown {
        margin-left: 0; /* Tinatanggal ang malaking indent para magkasya ang text */
        margin-top: 10px;
    }

    /* --- THE TABLE SCROLL --- */
    .table-wrapper {
        padding: 10px;
        overflow-x: auto; /* Pinaka-importante: Pinapayagan ang pag-swipe pakanan */
        -webkit-overflow-scrolling: touch;
    }

    .comparison-table {
        min-width: 600px; /* Sinisiguro na hindi mag-squish ang columns */
        font-size: 0.8rem; /* Mas maliit na font para sa mobile */
    }

    .comparison-table th, .comparison-table td {
        padding: 8px;
    }
}
.cell-list {
    margin: 5px 0;
    padding-left: 15px;
    list-style-type: "- "; /* Mula sa image */
}

.cell-list li {
    font-size: 0.85rem;
    line-height: 1.2;
}

/* specifications tab */

/* --- 1. DROPDOWN CONTAINER MAY BORDER NA --- */
.speed-table-dropdown {
    margin: 20px 0 0 0px;
    background: #ffffff;
    /* Nagdagdag tayo ng border at border-radius para kurbada ang kanto */
    border: 1px solid #ddd; 
    border-radius: 8px;
    overflow: hidden; /* Para hindi lumampas ang table sa kurbada ng border */
    width: 100%;
    transition: border-color 0.3s ease;
}

/* Kapag naka-hover sa buong dropdown box */
.speed-table-dropdown:hover {
    border-color: #d32f2f; /* Mag-iiba ang kulay ng border pag tinapatan */
}

/* --- 2. DROPDOWN BUTTON (SUMMARY) --- */
.speed-dropdown-btn {
    padding: 15px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background-color: #fcfcfc; /* Light background para sa button */
}

/* Lalagyan ng line sa ilalim ng button kapag BUKAS ang dropdown */
.speed-table-dropdown[open] .speed-dropdown-btn {
    border-bottom: 1px solid #eee;
}

/* --- 3. ANIMATION & TABLE --- */
.speed-table-dropdown[open] .speed-table-wrapper {
    animation: anatomyFadeIn 0.5s ease-out;
}

@keyframes anatomyFadeIn {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

.speed-table-wrapper {
    overflow-x: auto;
    background: #ffffff;
    padding: 10px; /* Space sa loob ng border */
}

/* --- 4. SPEED INDEX TABLE (WHITE BORDER ROWS) --- */
.speed-index-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
    font-size: 0.8rem;
    text-align: center;
}

.speed-index-table th {
    background-color: #1e2749;
    color: #ffffff;
    padding: 12px 5px;
    font-weight: 900;
}

.speed-index-table td {
    padding: 10px 5px;
    background-color: #ffffff;
    border-bottom: 2px solid #ffffff; /* Ang white divider */
    transition: background-color 0.2s ease;
}

/* Row Hover gaya ng Anatomy tab */
.speed-index-table tbody tr:hover td {
    background-color: #f2f2f2 !important;
}
/* Arrow Icon Rotation */
.speed-table-dropdown[open] .arrow {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Gray column (Index) */
.bg-gray {
    background-color: #bdc3c7 !important;
    font-weight: bold;
    border-right: 2px solid #ffffff !important;
}

/* Mobile responsive margin reset */
@media screen and (max-width: 768px) {
    .speed-table-dropdown {
        margin-left: 0;
    }
}

/* Ang box na itatapat natin sa margin ng mga dropdown tables */
.markings-container-box {
    margin: 15px 0 0 55px; /* Itinatapat sa simula ng title text */
    background-color: whitesmoke;
    border: 1px solid #ddd; /* Katulad ng border ng dropdown box */
    border-radius: 8px;
    overflow: hidden;
    padding: 10px 15px;
}

.markings-list-final {
    list-style: none;
    padding: 0;
    margin: 0;
}

.markings-list-final li {
    font-size: 0.8rem; /* Compact size gaya ng table content */
    line-height: 1.6;
    color: #333;
    padding: 6px 0;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #f0f0f0; /* Divider line sa bawat item */
}

/* Para sa labels (T/TL, DOT, etc.) */
.markings-list-final li span {
    font-weight: 800;
    color: #1e2749; /* Dark blue matching table headers */
    min-width: 190px; /* Pantay na alignment ng descriptions */
    display: inline-block;
}

/* Alisin ang border sa huli para malinis */
.markings-list-final li:last-child {
    border-bottom: none;
}

/* Hover effect para maging interactive */
.markings-list-final li:hover {
    background-color: #f9f9f9;
    color: #d32f2f;
    padding-left: 5px; /* Kaunting galaw pag hover */
    transition: all 0.2s ease;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .markings-container-box {
        margin-left: 0; /* Full width sa mobile */
    }
    
    .markings-list-final li {
        flex-direction: column; /* Mag-stack ang label at desc sa phone */
    }
}
/* types of tires tab */
/* Container Alignment - Itatapat sa ilalim ng title text */
.simple-image-dropdown {
    margin: 15px 0 0 55px; /* Alignment base sa margin ng table */
    width: fit-content;
}

/* Container Alignment */
.simple-image-dropdown {
    margin: 15px 0 0 55px; /* Aligned sa title */
    width: fit-content;
}

/* Button Design */
.simple-image-btn {
    list-style: none;
    cursor: pointer;
    font-size: 0.75rem; /* Mas maliit para sa minimalist look */
    font-weight: 800;
    color: #1e2749; /* Dark Blue */
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* SVG Icon Size */
.see-image-icon {
    width: 16px;
    height: 16px;
    color: #1e2749;
    transition: color 0.2s ease;
}

.simple-image-btn:hover {
    background-color: #1e2749;
    color: #ffffff;
    border-color: #1e2749;
}

/* Icon change color on hover */
.simple-image-btn:hover .see-image-icon {
    color: #ffffff;
}

/* Image Reveal Box */
.simple-image-box {
    margin-top: 12px;
    padding: 8px;
    border: 1px solid #eee;
    background: #fff;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    animation: simpleFade 0.3s ease-out; /* */
}

@keyframes simpleFade {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.simple-image-box img {
    width: 100%;
    border-radius: 2px;
}

/* Browser default arrow removal */
.simple-image-dropdown summary::-webkit-details-marker {
    display: none;
}
/* piso test tab  */

.piso-test-container {
    margin-left: 55px; /* Saktong tapat sa title margin */
    margin-top: 5px;
}

.piso-intro {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Steps List Alignment */
.piso-steps-list {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside; /* Para dikit ang numero sa text gaya ng screenshot */
}

.piso-steps-list li {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Mobile Adjustment para hindi masyadong malaki ang gap sa phone */
@media screen and (max-width: 768px) {
    .piso-test-container {
        margin-left: 45px; /* Kaunting adjustment para sa maliit na screen */
    }
}

.piso-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
    max-width: 800px;
}

.piso-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.piso-img-wrapper {
    width: 100%;
    height: 250px;
    overflow: hidden; /* Para hindi lumabas ang image sa box */
    cursor: zoom-in;
    position: relative;
}

.piso-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s ease-out; /* Mabilis na response sa mouse */
    pointer-events: none; /* Para hindi ma-disturb ang mouse event */
}

/* Styling para sa buong label (Default ay Black) */
.piso-label {
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: #333; /* Ito ang kulay ng "It covers Rizal’s name and Tie" */
    font-weight: 500;
    border-top: 1px solid #eee;
    line-height: 1.4;
}

/* Kulay para sa PASSED lang */
.status-passed {
    color: #2e7d32; /* Green color */
    font-weight: 800; /* Mas makapal para madaling mapansin */
    margin-right: 5px;
}

/* Kulay para sa FAILED lang (Optional kung gusto mo ng Red) */
.status-failed {
    color: #d32f2f; /* Red color */
    font-weight: 800;
    margin-right: 5px;
}

/* cce when to replace yout tire tab */
/* GRID SYSTEM - 3 COLUMNS BASE SA REFERENCE */
        .pattern-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px 20px;
            max-width: 900px;
        }

        /* INDIVIDUAL CARD */
        .pattern-card {
            text-align: center;
            background: transparent;
        }

        /* IMAGE WRAPPER WITH ZOOM LOGIC */
        .pattern-image {
            width: 100%;
            margin-bottom: 15px;
            overflow: hidden; /* Pinipigilan ang pag-lapas ng image pag lumaki */
            border-radius: 4px;
            background: #f4f4f4;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .pattern-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.4s ease; /* Smooth transition para sa hover zoom */
        }

        /* HOVER EFFECT - LALAKI ANG IMAGE */
        .pattern-card:hover .pattern-image img {
            transform: scale(1.1); /* 10% magnification zoom */
        }

        /* LABEL STYLING BASE SA REFERENCE */
        .pattern-label {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .label-main {
            font-size: 0.95rem;
            font-weight: 700; /* Bold Category */
            color: #000;
            margin: 0;
        }

        .label-sub {
            font-size: 0.85rem;
            font-weight: 400; /* Regular weight para sa description */
            color: #555;
            margin: 0;
        }

        /* RESPONSIVE DESIGN FOR MOBILE & TABLET */
        @media screen and (max-width: 768px) {
            .pattern-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns sa tablet */
            }
            .anatomy-section-container {
                margin-left: 20px; /* Bawasan ang margin sa maliit na screen */
            }
        }

        @media screen and (max-width: 480px) {
            .pattern-grid {
                grid-template-columns: 1fr; /* 1 column sa phone */
            }
            .anatomy-section-container {
                margin-left: 0;
                padding: 0 10px;
            }
        }

        /* MAIN CONTAINER - SINUSUNOD ANG 55PX MARGIN ALIGNMENT */
        .tire-damage-container {
            margin-left: 55px; 
            margin-top: 30px;
            max-width: 900px;
        }

        .section-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #000;
            margin-bottom: 10px;
        }

        .section-desc {
            font-size: 0.95rem;
            color: #333;
            line-height: 1.5;
            margin-bottom: 30px;
        }

        /* GRID SYSTEM - 2 COLUMNS PARA SA CRACKING AT LEAK */
        .damage-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .damage-card {
            text-align: center;
        }

        /* IMAGE WRAPPER WITH ZOOM LOGIC */
        .damage-image {
            width: 100%;
            overflow: hidden; 
            border-radius: 4px;
            background: #f4f4f4;
            margin-bottom: 15px;
        }

        .damage-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.4s ease; /* Smooth transition para sa zoom */
        }

        /* HOVER EFFECT */
        .damage-card:hover .damage-image img {
            transform: scale(1.15); /* Zoom in effect */
        }

        /* LABEL STYLING */
        .damage-label {
            font-size: 0.95rem;
            font-weight: 700;
            color: #000;
            margin: 0;
        }

        /* RESPONSIVE DESIGN */
        @media screen and (max-width: 600px) {
            .damage-grid {
                grid-template-columns: 1fr; /* 1 column sa mobile */
            }
            .tire-damage-container {
                margin-left: 0;
                padding: 0 10px;
            }
        }
/* CONTAINER LAYOUT */
.dot-guide-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

/* IMAGE SECTION */
.dot-visual {
    flex: 1;
    position: relative;
}

.zoom-wrapper {
    position: relative;
    cursor: crosshair;
    overflow: hidden;
    border-radius: 4px;
}

.base-img {
    display: block;
    width: 100%;
    /* Mula 600px, tinaas natin sa 850px para maging "hero image" ang laki */
    max-width: 850px; 
    height: auto;
    border-radius: 8px;
    margin: 0 auto; /* Ginawa ko na ring center para balance tignan sa laki niya */
}
/* THE CIRCULAR ZOOM LENS */
.zoom-lens {
    position: absolute;
    width: 150px; /* Laki ng bilog na zoom */
    height: 150px;
    border: 2px solid #d32f2f;
    border-radius: 50%; /* Hugis bilog */
    pointer-events: none; /* Para hindi maistorbo ang mousemove */
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
    background-size: 800px; /* Zoom magnification level (mas malaki, mas zoom) */
    transition: opacity 0.2s ease;
    z-index: 10;
}

.zoom-wrapper:hover .zoom-lens {
    visibility: visible;
    opacity: 1;
}

/* TEXT CONTENT STYLING */
.dot-text-content {
    flex: 1;
}

.dot-title {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 20px;
}

.dot-step {
    margin-bottom: 25px;
}

.dot-step strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.dot-step p {
    margin: 0;
    color: #444;
    line-height: 1.4;
}

.dot-example {
    margin-top: 10px !important;
    font-weight: bold;
}

/* How to choose the right tire tab */
/* Container para sa buong section */
.tire-label-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 40px; /* Spacing sa pagitan ng image at text */
    max-width: 1100px;
    margin: 20px auto;
    padding: 20px;
}

/* Para sa Image */
.label-image-container {
    flex: 1; /* Kumukuha ng sapat na espasyo */
    position: sticky; /* Mananatili sa pwesto habang nag-scro-scroll ang text (optional) */
    top: 20px;
}

.label-image-container img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Para sa Text Info */
.label-info-container {
    flex: 1.5; /* Mas malapad ang text area kaysa sa image */
}

/* --- Mula sa dating design mo --- */
.label-section {
    /* Mula 20px/30px, ginawang 5px/10px para mas siksik */
    padding: 5px 0 10px 0px; 
    margin-bottom: 5px; /* Halos dikit-dikit na sila */
    border-left: 0px solid transparent; 
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    overflow: hidden;
}
.label-section:hover {
    border-left: 3px solid #d32f2f; /* Nilipisan din ang border para balanse sa maliit na font */
    background-color: #fcfcfc;
    padding-left: 15px; /* Binawasan ang pag-usog para hindi masyadong malayo */
}

.label-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- NUMBER (Liliitan mula 1.6rem/1.4rem) --- */
.label-num {
    font-size: 1.1rem;    /* Halos kapantay na lang ng text */
    font-weight: 700;     /* Pinanatiling bold para madaling mahanap */
    color:  red;
    transition: all 0.3s ease;
    display: inline-block;
}

/* --- TITLE (Liliitan mula 1.0rem) --- */
.label-title {
    margin: 0;
    font-size: 0.85rem;   /* Mas maliit para magmukhang caption-style */
    font-weight: 400;     /* Hindi bold gaya ng request mo */
    line-height: 1.2;
    text-transform: uppercase;
    color: #333;          /* Bahagyang gray para hindi masyadong matapang */
    transition: all 0.3s ease;
}

/* --- DESCRIPTION (Liliitan din para balanse) --- */
.label-desc {
    margin: 0px 0 0 20px; /* Ginawang 2px na lang mula sa header */
    color: #666;
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 800px;
    transition: all 0.3s ease;
}
/* --- ADJUSTMENT SA HEADER SPACING --- */
.label-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Mas maliit na gap sa pagitan ng number at title */
    padding: 2px 0;
}

/* Responsive: Pag selpon na, pagpapatungin sila */
@media (max-width: 768px) {
    .tire-label-wrapper {
        flex-direction: column;
    }
    .label-image-container {
        position: static;
        margin-bottom: 20px;
    }
}
/* how to maximize your tire tab */
/* --- CONTAINER --- */
.info-block {
    padding: 5px 0 10px 0;
    margin-bottom: 5px;
    border-left: 0px solid transparent;
    transition: all 0.3s ease;
}

/* --- HEADER --- */




.info-list {
    margin: 5px 0 0 90px; /* Indent para sa bullets */
    padding: 0;
    list-style-type: disc;
    color: #555;
    font-size: 0.95rem;
}

.info-list li {
    margin-bottom: 5px; /* Dikit-dikit na bullets */
}
.footer-notes {
  
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
   
     margin: 10px 0 0 55px;
}

/* --- CONTAINER LAYOUT --- */
.tire-rotation-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 5px; /* Pinaliit para dikit ang text sa image */
    max-width: 1000px;
    margin: 10px auto 10px 45px; /* Margin-left na 55px gaya ng request mo */
    padding: 10px;
}

/* --- IMAGE SIDE WITH HOVER --- */
.rotation-image {
    flex: 0 0 50%; 
    text-align: right; 
    overflow: hidden; /* Para hindi lumampas ang zoom effect */
    border-radius: 12px;
}

.base-img {
    display: inline-block;
    width: 100%;
    max-width: 500px; 
    height: auto;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth spring effect */
    cursor: pointer;
}

/* IMAGE HOVER EFFECT */
.base-img:hover {
    transform: scale(1.05); /* Bahagyang paglaki gaya ng ibang images */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Shadow effect */
    filter: brightness(1.1); /* Bahagyang pagliwanag */
}

/* --- TEXT SIDE (DIKIT VERSION) --- */
.rotation-details {
    flex: 1;
    margin-left: -5px; /* Hila para mas dumikit pa sa image */
    padding-top: 5px; 
}

/* --- TEXT BLOCK HOVER EFFECT --- */
.tire-step-container {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-left: 4px solid transparent; /* Guide para sa hover border */
    transition: all 0.3s ease;
    cursor: pointer;
}

.tire-step-container:hover {
    border-left: 4px solid #d32f2f; /* Pulang linya sa hover */
    background-color: #fcfcfc; /* Light gray highlight */
    padding-left: 20px; /* Usog effect */
}

/* --- TYPOGRAPHY --- */
.tire-step-heading {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    font-weight: 400; /* Hindi bold ang kabuuan (e.g. Forward Cross) */
    text-transform: uppercase;
    color: #1a1a1a;
    line-height: 1.2;
}

/* Para sa BOLD na part lang ng heading */
.tire-step-heading strong {
    font-weight: 800; /* Bold lang ang "ROTATION TYPE:" */
}

.tire-step-info {
    margin: 0;
    font-size: 0.86rem;
    color: #444;
    line-height: 1.6; /* Siksik na line height */
    letter-spacing: -0.2px; 
}

.tire-step-info strong {
    font-weight: 800;
    color: #000;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .tire-rotation-wrapper {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
        padding: 10px;
    }
    .rotation-details {
        margin-left: 0;
        padding: 20px 10px;
        text-align: left;
    }
    .base-img {
        width: 100%;
    }
}
.piso-link {
    color:#2e2e2e ; /* Kapareho ng pula ng iyong buttons */
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.piso-link:hover {
    color: #d32f2f; /* Magpapalit ng kulay sa hover (Dark Blue) */
  
    text-decoration: none;
}