/* =========================================================
   TRACTOR PARTS PAGE
   Modern / Creative Responsive CSS
========================================================= */
         /* ---------------------------------------------------------
   ROOT VARIABLES
--------------------------------------------------------- */
         :root {
           --primary: #aaa0d2;
           --primary-dark: #655a9b;
           --primary-light: #eeeaf8;
           --yellow: #f4c400;
           --yellow-dark: #dcae00;
           --text: #111111;
           --muted: #777777;
           --light-bg: #f7f7f7;
           --border: #e9e9e9;
           --white: #ffffff;
           --container: 1380px;
           --shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
           --transition: all 0.35s ease;
         }

         /* ---------------------------------------------------------
   BASIC RESET
--------------------------------------------------------- */
         .page-banner *,
         .products-section * {
           box-sizing: border-box;
         }

         .page-banner a,
         .products-section a {
           text-decoration: none;
         }

         /* =========================================================
   HERO / PAGE BANNER
========================================================= */
         .page-banner {
           position: relative;
           min-height: 240px;
           display: flex;
           align-items: center;
           overflow: hidden;
           background:
             linear-gradient(110deg, #456ecc 0%, #5198ab 50%, #77afbd 100%);
         }

         /* Decorative circles */
         .page-banner::before {
           content: "";
           position: absolute;
           width: 520px;
           height: 520px;
           right: -170px;
           top: -190px;
           border: 90px solid rgba(255, 255, 255, 0.08);
           border-radius: 50%;
         }

         /* Decorative dotted globe */
         .page-banner::after {
           content: "";
           position: absolute;
           width: 600px;
           height: 400px;
           right: -70px;
           bottom: -160px;
           opacity: 0.35;
           background-image:
             radial-gradient(circle,
               rgba(83, 69, 135, 0.42) 1.4px,
               transparent 1.5px);
           background-size: 8px 8px;
           border-radius: 50%;
           transform: rotate(-12deg);
         }

         /* ---------------------------------------------------------
   BANNER CONTAINER
--------------------------------------------------------- */
         .banner-container {
           width: 100%;
           max-width: var(--container);
           margin: auto;
           padding: 0 30px;
           position: relative;
           z-index: 2;
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 30px;
         }

         /* ---------------------------------------------------------
   PAGE TITLE
--------------------------------------------------------- */
         .page-banner h1 {
           margin: 0;
           color: #fff;
           font-size: clamp(38px, 4vw, 50px);
           font-weight: 400;
           letter-spacing: 0.5px;
           line-height: 1.2;
         }

         /* Small decorative line */
         .page-banner h1::after {
           content: "";
           display: block;
           width: 65px;
           height: 3px;
           margin-top: 15px;
           background: var(--yellow);
         }

         /* =========================================================
   BREADCRUMB
========================================================= */
         .breadcrumb {
           display: flex;
           align-items: center;
           gap: 8px;
           padding: 13px 20px;
           background: rgba(255, 255, 255, 0.96);
           border-radius: 5px;
           box-shadow: 0 8px 25px rgba(54, 45, 90, 0.12);
           font-size: 17px;
           white-space: nowrap;
           transition: var(--transition);
         }

         .breadcrumb:hover {
           transform: translateY(-3px);
           box-shadow:
             0 12px 30px rgba(54, 45, 90, 0.18);
         }

         .breadcrumb a {
           color: #21159c;
           transition: var(--transition);
         }

         .breadcrumb a:hover {
           color: var(--primary-dark);
         }

         .breadcrumb span {
           color: #999;
         }

         /* =========================================================
   MAIN PRODUCTS SECTION
========================================================= */
         .products-section {
           position: relative;
           padding: 80px 0 100px;
           background: #fff;
         }

         /* subtle background decoration */
         .products-section::before {
           content: "";
           position: absolute;
           top: 50px;
           left: -200px;
           width: 400px;
           height: 400px;
           border-radius: 50%;
           background: var(--primary-light);
           opacity: 0.35;
           pointer-events: none;
         }

         /* ---------------------------------------------------------
   MAIN CONTAINER
--------------------------------------------------------- */
         .products-section>.container {
           width: 100%;
           max-width: var(--container);
           margin: auto;
           padding: 0 30px;
           display: grid;
           grid-template-columns: 305px minmax(0, 1fr);
           gap: 45px;
           position: relative;
           z-index: 1;
         }

         /* =========================================================
   SIDEBAR
========================================================= */
         .sidebar {
           width: 100%;
         }

         /* ---------------------------------------------------------
   CATEGORY BUTTON
--------------------------------------------------------- */
         .category {
           position: relative;
           display: flex;
           align-items: center;
           min-height: 64px;
           margin-bottom: 11px;
           padding: 16px 25px 16px 38px;
           background: #f7f7f7;
           color: #111;
           font-size: 16px;
           font-weight: 600;
           line-height: 1.45;
           border: 1px solid transparent;
           overflow: hidden;
           transition: var(--transition);
         }

         /* Left yellow indicator */
         .category::before {
           content: "";
           position: absolute;
           left: 0;
           top: 0;
           width: 4px;
           height: 0;
           background: var(--yellow);
           transition: var(--transition);
         }

         /* Arrow */
         .category::after {
           content: "›";
           position: absolute;
           right: 18px;
           font-size: 24px;
           color: #aaa;
           opacity: 0;
           transform: translateX(-8px);
           transition: var(--transition);
         }

         /* Hover */
         .category:hover {
           color: var(--primary-dark);
           background: #fff;
           border-color: #e6e2f2;
           transform: translateX(5px);
           box-shadow: 0 7px 22px rgba(70, 60, 120, 0.08);
         }

         .category:hover::before {
           height: 100%;
         }

         .category:hover::after {
           opacity: 1;
           transform: translateX(0);
         }

         /* Active */
         .category.active {
           color: #fff;
           background:
             linear-gradient(100deg, #1bb2ca, #13aec6);
           border-color: transparent;
           box-shadow:
             0 10px 25px rgba(101, 90, 155, 0.25);
         }

         .category.active::before {
           width: 5px;
           height: 100%;
           background: var(--yellow);
         }

         .category.active::after {
           content: "→";
           color: #fff;
           opacity: 1;
           transform: translateX(0);
         }

         /* =========================================================
   PRODUCTS CONTENT
========================================================= */
         .products-content {
           min-width: 0;
         }

         /* ---------------------------------------------------------
   SECTION HEADING
--------------------------------------------------------- */
         .products-content h2 {
           position: relative;
           margin: 0 0 17px;
           font-size: 35px;
           line-height: 1.2;
           font-weight: 400;
           color: #111;
         }

         .products-content h2 strong {
           font-weight: 700;
         }

         /* ---------------------------------------------------------
   YELLOW UNDERLINE
--------------------------------------------------------- */
         .yellow-line {
           position: relative;
           width: 65px;
           height: 3px;
           margin-bottom: 30px;
           background: var(--yellow);
         }

         /* Longer subtle line */
         .yellow-line::after {
           content: "";
           position: absolute;
           left: 0;
           top: 0;
           width: 130px;
           height: 1px;
           background: #dedede;
           z-index: -1;
         }

         /* =========================================================
   PRODUCT GRID
========================================================= */
         .product-grid {
           display: grid;
           grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 30px;
         }

         /* =========================================================
   PRODUCT CARD
========================================================= */
         .product-card {
           position: relative;
           aspect-ratio: 1.58 / 1;
           overflow: hidden;
           background:
             linear-gradient(145deg,
               #fafafa,
               #f3f3f3);
           border: 1px solid #eeeeee;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.025);
           transition:
             transform 0.4s ease,
             box-shadow 0.4s ease,
             border-color 0.4s ease;
         }

         /* Image */
         .product-card img {
           width: 100%;
           height: 100%;
           display: block;
           object-fit: contain;
           padding: 0;
           transition:
             transform 0.55s cubic-bezier(.2, .7, .3, 1);
         }

         /* Bottom decoration */
         .product-card::after {
           content: "";
           position: absolute;
           width: 45px;
           height: 45px;
           right: 0;
           bottom: 0;
           border-right: 3px solid transparent;
           border-bottom: 3px solid transparent;
           transition: var(--transition);
           z-index: 2;
         }

         /* ---------------------------------------------------------
   CARD HOVER
--------------------------------------------------------- */
         .product-card:hover {
           transform: translateY(-8px);
           border-color: #ded9ed;
           box-shadow:
             0 18px 40px rgba(69, 60, 110, 0.15);
         }

         .product-card:hover img {
           transform: scale(1.08);
         }

         .product-card:hover::before {
           border-color: var(--yellow);
         }

         .product-card:hover::after {
           border-color: var(--yellow);
         }

         /* =========================================================
   IMAGE SHINE EFFECT
========================================================= */
         .product-card {
           isolation: isolate;
         }

         .product-card .shine {
           position: absolute;
           top: 0;
           left: -100%;
           width: 60%;
           height: 100%;
           background:
             linear-gradient(90deg,
               transparent,
               rgba(255, 255, 255, .5),
               transparent);
           transform: skewX(-20deg);
           transition: left 0.7s ease;
           z-index: 3;
           pointer-events: none;
         }

         .product-card:hover .shine {
           left: 140%;
         }

         /* =========================================================
   OPTIONAL PRODUCT LABEL
========================================================= */
         /*
If later you want product names, use:


    <div class="product-card">
        <img src="..." alt="">
            <div class="product-name">Tractor Housing</div>
        </div>
*/
         .product-name {
           position: absolute;
           left: 0;
           right: 0;
           bottom: 0;
           padding: 12px 15px;
           color: #fff;
           background: rgba(50, 43, 82, 0.88);
           text-align: center;
           font-size: 15px;
           font-weight: 600;
           transform: translateY(100%);
           transition: var(--transition);
         }

         .product-card:hover .product-name {
           transform: translateY(0);
         }

         /* =========================================================
   BACK TO TOP
========================================================= */
         .back-to-top {
           position: fixed;
           right: 25px;
           bottom: 22px;
           width: 42px;
           height: 42px;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 0;
           border-radius: 3px;
           background: var(--yellow);
           color: #fff;
           font-size: 23px;
           cursor: pointer;
           box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
           transition: var(--transition);
           z-index: 99;
         }

         .back-to-top:hover {
           background: var(--yellow-dark);
           transform: translateY(-5px);
           box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
         }

         /* =========================================================
   LARGE TABLET
========================================================= */
         @media (max-width: 1100px) {
           .products-section>.container {
             grid-template-columns: 240px minmax(0, 1fr);
             gap: 30px;
           }

           .category {
             padding-left: 25px;
           }

           .product-grid {
             gap: 22px;
           }
         }

         /* =========================================================
   TABLET
========================================================= */
         @media (max-width: 850px) {
           .page-banner {
             min-height: 220px;
           }

           .banner-container {
             padding-left: 25px;
             padding-right: 25px;
           }

           .page-banner h1 {
             font-size: 38px;
           }

           .products-section {
             padding: 60px 0 80px;
           }

           .products-section>.container {
             grid-template-columns: 1fr;
           }

           /* Sidebar becomes horizontal grid */
           .sidebar {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 10px;
           }

           .category {
             margin-bottom: 0;
           }

           /* Two product columns */
           .product-grid {
             grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 25px;
           }
         }

         /* =========================================================
   MOBILE
========================================================= */
         @media (max-width: 600px) {
           .page-banner {
             min-height: 260px;
           }

           .banner-container {
             flex-direction: column;
             align-items: flex-start;
             justify-content: center;
             padding: 40px 20px;
             gap: 28px;
           }

           .page-banner h1 {
             font-size: 34px;
           }

           .breadcrumb {
             font-size: 15px;
             padding: 12px 16px;
           }

           .products-section {
             padding: 45px 0 70px;
           }

           .products-section>.container {
             padding: 0 20px;
           }

           .sidebar {
             grid-template-columns: 1fr;
           }

           .category {
             min-height: 58px;
           }

           .products-content h2 {
             font-size: 30px;
           }

           .product-grid {
             grid-template-columns: 1fr;
             gap: 22px;
           }

           .product-card {
             aspect-ratio: 1.6 / 1;
           }

           .back-to-top {
             width: 38px;
             height: 38px;
             right: 15px;
             bottom: 15px;
           }
         }

         /* =========================================================
   SMALL MOBILE
========================================================= */
         @media (max-width: 400px) {
           .page-banner h1 {
             font-size: 30px;
           }

           .products-content h2 {
             font-size: 27px;
           }

           .category {
             font-size: 15px;
             padding-left: 22px;
           }
         }
    
 /* =========================================
   PRODUCT GRID
========================================= */

.product-grid {
    width: 100%;
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 28px;

    margin-top: 30px;
}


/* =========================================
   PRODUCT CARD
========================================= */

.product-card {
    position: relative;
    width: 100%;
    height: 300px;

    overflow: hidden;

    border-radius: 8px;

    background: #f2f2f2;

    cursor: pointer;
}


/* =========================================
   IMAGE
========================================= */

.product-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}


/* =========================================
   OVERLAY
========================================= */

.machine-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    background:rgb(69 109 204 / 84%);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

    z-index: 5;
}


/* =========================================
   CONTENT
========================================= */

.machine-content {
    width: 100%;

    padding: 25px;

    transform: translateY(25px);

    transition: transform 0.45s ease;
}


/* =========================================
   CATEGORY
========================================= */

.machine-content span {
    display: block;

    margin-bottom: 10px;

    color: #f4c400;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================
   MACHINE NAME
========================================= */

.machine-content h3 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================
   VIEW MACHINE
========================================= */

.machine-content a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;
}

.machine-content a i {
    transition: transform 0.3s ease;
}


/* =========================================
   DESKTOP HOVER
========================================= */

.product-card:hover .machine-overlay,
.machine-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.product-card:hover .machine-content {
    transform: translateY(0);
}

.product-card:hover img {
    transform: scale(1.08);
}

.product-card:hover .machine-content a {
    color: #f4c400;
}

.product-card:hover .machine-content a i {
    transform: translateX(5px);
}


/* =========================================
   BORDER EFFECT
========================================= */

.product-card::before {
    content: "";

    position: absolute;

    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;

    border: 1px solid rgba(255, 255, 255, 0.55);

    opacity: 0;

    transition: opacity 0.4s ease;

    z-index: 10;

    pointer-events: none;
}

.product-card:hover::before {
    opacity: 1;
}


/* =========================================
   LARGE TABLET
   992px - 1199px
========================================= */

@media (max-width: 1199px) {

    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 20px;
    }

    .product-card {
        height: 280px;
    }

    .machine-content h3 {
        font-size: 21px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (max-width: 991px) {

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .product-card {
        height: 280px;
    }

    .machine-content {
        padding: 20px;
    }

    .machine-content h3 {
        font-size: 21px;
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .product-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 25px;
    }

    .product-card {
        width: 100%;

        height: 280px;

        border-radius: 7px;
    }

    .machine-content {
        padding: 20px;
    }

    .machine-content h3 {
        font-size: 21px;

        margin-bottom: 15px;
    }

}


/* =========================================
   SMALL MOBILE
   BELOW 480px
========================================= */

@media (max-width: 480px) {

    .product-grid {
        gap: 16px;
    }

    .product-card {
        height: 245px;
    }

    .machine-content {
        padding: 18px;
    }

    .machine-content span {
        font-size: 9px;

        letter-spacing: 1.5px;

        margin-bottom: 8px;
    }

    .machine-content h3 {
        font-size: 18px;

        line-height: 1.35;

        margin-bottom: 12px;
    }

    .machine-content a {
        font-size: 12px;
    }

}


/* =========================================
   MOBILE ACTIVE CLASS
========================================= */

@media (max-width: 767px) {

    .product-card.show-machine .machine-overlay {
        opacity: 1;

        visibility: visible;
    }

    .product-card.show-machine .machine-content {
        transform: translateY(0);
    }

    .product-card.show-machine img {
        transform: scale(1.06);
    }

    .product-card.show-machine::before {
        opacity: 1;
    }

}