/*   
Theme Name: Chao Yang Singapore 2026 Theme
Description: Wordpress Theme for Chao Yang Singapore 2026 website
Author: MGE
Version: 1
*/

/* ========================
   VARIABLES
======================== */
:root {
  /* Colors */
  --color-primary: #cc1414;
  --color-secondary: rgb(249 230 230);
  --color-black: #000;
  --color-bg: #fafafa;
  --white: #fff;
  --color-border: #666;
  --color-muted: #737373;
  --color-yellow: #d09725;

  /* Typography */
  --font-base: 14px;
  --font-regular: 'Inter-Regular', Arial, sans-serif;
  --font-medium: 'Inter-Medium', Arial, sans-serif;
  --font-semibold: 'Inter-Semibold', Arial, sans-serif;
  --font-bold: 'Inter-Bold', Arial, sans-serif;
  --font-playfair: "Playfair-Bold", Georgia, "Times New Roman", serif;

  /* Spacing */
  --space-sm: 10px;
  --space-md: 20px;

  --icon-arrow: url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>');
}

/* ========================
   FONTS
======================== */
@font-face {
  font-family: 'Inter-Semibold';
  src: url('fonts/Inter-SemiBold.ttf');
}
@font-face {
  font-family: 'Inter-Medium';
  src: url('fonts/Inter-Medium.ttf');
}
@font-face {
  font-family: 'Inter-Regular';
  src: url('fonts/Inter-Regular.ttf');
}
@font-face {
  font-family: 'Inter-Bold';
  src: url('fonts/Inter-Bold.ttf');
}
@font-face {
  font-family: 'PlayFair-Bold';
  src: url('fonts/PlayfairDisplay-Bold.ttf');
}

/* ========================
   GLOBAL
======================== */
* {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--font-base);
  font-family: var(--font-regular);
}

/* Scrollbar width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
  border-radius: 10px;
}

/* Hover effect (optional) */
::-webkit-scrollbar-thumb:hover {
  background-color: #a6a6a6;
}


/* ========================
   TYPOGRAPHY
======================== */
h1, h2, h3 {
  font-weight: normal;
  margin-bottom: var(--space-sm);
}

p {
  font-size: 16px;
  margin-bottom: var(--space-sm);
  line-height: 1.625;
}

a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
}

/* ========================
   COMMENTS
======================== */
ol.commentlist {
  list-style: none;
}

ol.commentlist li.comment {
  border-bottom: 1px dotted var(--color-border);
  padding: var(--space-sm);
}

ol.commentlist li.comment div.comment-meta {
  font-size: 10px;
}

ol.commentlist li.comment div.comment-meta a {
  color: var(--color-muted);
}

ol.commentlist li.even {
  background: var(--color-bg);
}

ol.commentlist li.odd {
  background: #f6f6f6;
}

ol.commentlist li.parent {
  border-left: 5px solid var(--color-text);
}

ol.commentlist li.depth-2 {
  border-left: 5px solid #555;
}
ol.commentlist li.depth-3 {
  border-left: 5px solid #999;
}
ol.commentlist li.depth-4 {
  border-left: 5px solid #bbb;
}

/* ========================
   UTILITIES
======================== */
.nm { margin: 0 !important; }
.np { padding: 0; }
.np-right { padding-right: 0; }
.np-left { padding-left: 0; }
.mt-10 { margin-top: 10%; }
.mt-15 { margin-top: 15%; }

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


.main, .page { padding-top: 20px; }
.btn { padding: 15px 30px; margin: 10px 0; border-radius: 50px; font-size: 16px;  cursor: pointer;
  display: inline-flex;  align-items: center;  gap: 10px; text-decoration: none; margin-right: 15px; }
.btn-main { background-color: var(--color-primary);}
.btn-secondary, .btn-secondary:hover { background-color: #f0f0f0cc; border: solid 1px #e0e0e0; color: var(--color-black) }
.btn-main:hover {  box-shadow: 0 8px 20px rgba(204,20,20,0.2);  }

.round-tag { display: inline-block; border-radius: 40px; padding: 5px 15px; }
.round-tag.main-red { border: solid 1px; background-color: var(--color-secondary); 
	border-color: rgb(204 20 20 / 20%); font-size: 16px;}


/* Arrow */
.arrow { width: 15px; height: 24px; transition: transform 0.3s ease; display: inline-block; }


/* Hover animation */
.btn:hover .arrow, .tyres .card:hover .arrow {
  transform: translateX(3px); 
}


.category-badge { display: inline-block; position: absolute; top: 15px; left: 15px;
   border-radius: 30px; padding: 0 10px; font-size: 13px; z-index: 1;}
.attr-badge { background-color: #f0f0f0; padding: 0 5px;  border-radius: 30px; font-size: 12px; }
.star { color: var(--color-yellow); fill: var(--color-yellow); margin-right: 2px;}

/* Alignment */
.alignright { float: right; margin-left: var(--space-sm); }
.alignleft { float: left; margin-right: var(--space-sm); }
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Font helpers */
.light { font-family: var(--font-light); }
.semibold { font-family: var(--font-semibold);}
.medium { font-family: var(--font-medium); }
.strong, strong { font-family: var(--font-bold); }
.playfair { font-family: var(--font-playfair);}

.main-red, .main-red:hover { color: var(--color-primary) !important;}
.black { color: var(--color-black); }
.white, .white:hover { color: var(--white) !important;}
.yellow { color: var(--color-yellow);}

.bg-red, .bg-red:hover { background: var(--color-primary) !important;}
.bg-white { background-color: white;}

.header { padding: 12px 0; width: 100%; position: sticky; top:0; background: var(--white); z-index: 1; border: #e0e0e0 solid 1px; }
.logo img { height: 3.5rem; width: auto; margin-right: 5px; }
.logo .text { font-size: 10px; letter-spacing: 3.5px;} 

/* .header .menu { list-style: none; text-align: right; padding: 17px 0; margin-bottom: 0;}
.header .menu li {  display: inline-block; font-family: var(--font-medium);  }
.header .menu li a { color: var(--color-muted); padding: .5rem 1.25rem;  border-radius: 9999px; font-size: 15px;  transition: all 0.3s ease;  }
.header .menu li a:hover { color: var(--color-black); background: #f0f0f0;  transition-delay: 0.1s;  }
.header .menu li:last-child a { margin-left: 10px; color: var(--white) !important; background: var(--color-primary) !important; padding: .7rem 1.5rem; }
.header .menu li:last-child a:hover { background: var(--color-primary);  color: var(--white);  box-shadow: 0 8px 20px rgba(204,20,20,0.2); }
.header .menu li.current-menu-item a { color: var(--color-primary); background: var(--color-secondary); } */
/* 
.header .menu > li  { padding: 20px 0;} */

/* ==========================================
   MAIN MENU
========================================== */

.header .menu { list-style: none; padding: 0; margin: 10px 0 0; margin-left: -40px; }
.header .menu > li { display: inline-block; position: relative; font-family: var(--font-medium); }
.header .menu li a { display: block; color: var(--color-muted); padding: .5rem 1.25rem; border-radius: 999px;
    font-size: 15px;  transition: all .3s ease; text-decoration: none; }
.header .menu li a:hover { color: var(--color-black); background: #f0f0f0; }

.header .menu > li:last-child > a { margin-left: 10px; color: var(--white) !important;
    background: var(--color-primary) !important;  padding: .7rem 1.5rem;
}

.header .menu > li:last-child > a:hover { box-shadow: 0 8px 20px rgba(204,20,20,.2); }

.header .menu > li.current-menu-item > a, .header .menu > li.current-page-parent > a { 
  color: var(--color-primary); background: var(--color-secondary); 
}


/* ==========================================
   FIRST LEVEL SUBMENU
========================================== */

.header .menu .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: fit-content; padding: 0;margin: 12px 0 0; list-style: none;
    opacity: 0;visibility: hidden; transition: .25s ease; z-index: 999;
}


/* Show submenu */
.header .menu li:hover > .sub-menu { opacity: 1; visibility: visible; margin-top: 0; }
.header .menu .sub-menu li { display: block; position: relative; }
.header .menu .sub-menu li a { text-align: left;  display: block;  color: #fff;  border-radius: 0;
    background: transparent !important; white-space: nowrap; }
.header .menu .sub-menu li a:hover { color: var(--color-primary); }
.header .menu .sub-menu .sub-menu { top: 0; left: 100%; transform: none; 
  margin: 0 0 0 10px; opacity: 0; visibility: hidden;
}

.header .menu .sub-menu .menu-item-has-children > a::after { content: "›"; position: absolute; right: 5px; top: 50%; 
  transform: translateY(-50%); opacity: 0; transition: opacity .2s ease;
}

.header .menu .sub-menu .menu-item-has-children:hover > a::after { opacity: 1; }
.header .menu .sub-menu .menu-item-has-children > a { position: relative; padding-right: 40px; }

.header .menu > li > .sub-menu {  padding-top: 30px; position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden;
transform: translateY(-10px) scale(.98);
    transition: all .3s cubic-bezier(.22,.61,.36,1); }

.header .menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
}


.menu-mobile { display: none; color: var(--color-black) !important;}

.home-banner h1 { font-size: 4.5rem; line-height: 1; }
.home-banner .text, .subtext { font-size: 1.125rem; letter-spacing: 0.3px; line-height: 30px; display: block; margin: 0 auto; }
.stats .number, .stats-section .number { font-size: 30px; font-family: var(--font-playfair);}

.hero-section .kicker, .kicker { font-size: .875rem; line-height: 1.25rem; letter-spacing: .1em; }
.hero-section h1, .hero-section h2, .page h1 { font-size: 3rem; line-height: 1;}
.hero-section .subtext { width: 100%;}
.bouncing-mascot img {
    animation: float 6s ease-in-out infinite;
    width: 150px; position: absolute; bottom: -80%; right: 40%; 
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.card-container .list { padding: 15px 13px;}
.card { padding: 30px; border-radius: 15px;}
.card h3 { font-size: 1.25rem;  line-height: 1.75rem;}
.icon { border-radius: 15px; padding: 15px; background: var(--color-secondary); width: 55px; }
.card, .card-slide-up {
    /* opacity: 0; */
    transform: translateY(20px);
    transition: opacity var(--dur, 0.5s) ease, transform var(--dur, 0.5s) ease;
}

.card.show,
.card-slide-up.active {
    opacity: 1;
    transform: translateY(0);
}


/* second motion */
.card.slide {
    transform: translateY(-10px);
}



.hover-card .card .icon { transition: background 0.4s ease, transform 0.3s ease; }
.hover-card .card:hover { border: 1px solid #cc14144d; }
.hover-card .card:hover .icon { background: #cc141433; }

.our-range .link { margin-top: 50px; text-align: right; font-size: 16px;}
.link .text { transition: transform 0.3s ease; }
.link:hover .text { transform: translateX(-3px); }
.link a { display: inline-flex; align-items: center; gap: 5px; }
.link:hover a::after { transform: translateX(3px); transition: transform 0.3s ease; }


.tyres .card { padding: 0;}
.tyres .card img { width: 90%; }
.tyre-card { position: relative; overflow: hidden; border-radius: 15px; }
.tyre-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0.9) 85%,
    rgba(255,255,255,1) 100%
  );
}

.tyre-card img {
    display: block; margin: 0 auto;
    width: 100%;
    transition: transform 0.9s ease;
    transform: scale(1);
    will-change: transform;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tyres .card:hover img { transform: scale(1.05); }

.tyre-content { padding: 20px;}
.tyre-content h3 { margin-bottom: 5px; font-size: 1.5rem; line-height: 2rem 32px; }
.tyre-content .text { margin-top: 5px; }
.tyre-content .attr-badge { padding: 3px 10px !important; font-size: 11px; }

.tyre-listing .tyres .card img { width: 70%; }
.tyre-listing .tyre-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0.5) 85%,
    rgba(255,255,255,1) 100%
  );
}

.tyre-listing .img-container { background-color: #efefef;}
.tyre-listing p { font-size: 14px; }

.tyre-filter-buttons .btn { background: #fff; margin-right: 5px; border: solid 1px #e0e0e0;  border-radius: 999px; padding: 10px 20px; font-size: 14px; box-shadow: none; }
.tyre-filter-buttons .btn.active{ background: var(--color-primary) !important; box-shadow: 0 8px 20px rgba(204,20,20,0.2);   }
.tyre-filter-buttons .btn:hover { background-color: #fff; color: #000; border: solid 1px #ffbebe; }
.tyre-search { width: 260px; }
.tyre-search input { border-radius: 999px; padding-left: 20px; }
.tyre-item { opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.tyre-item.show { opacity: 1; transform: translateY(0); }
.tyre-item.hide { opacity: 0; transform: translateY(30px); pointer-events: none; position: absolute; visibility: hidden; }
.subcategory-list .btn.active{
    background: var(--color-primary) !important;
    color: #fff;
}

.parent-filter.active{
    background: var(--color-primary) !important;
    color: #fff;
}

.category-chevron{
    display:inline-flex;
    align-items:center;
    margin-left:8px;
    transition:transform .25s ease;
}

.subcategory-list.show + .category-chevron,
.parent-filter.active .category-chevron{
    transform:rotate(180deg);
}

.category-chevron.rotate{
    transform:rotate(180deg);
}

.testimonial { padding: 30px; }
.testimonial .text { line-height: 24px;}
.testimonial .quote { color: #cc14141a; position: absolute; right: 20px; top: 20px; }
.testimonial .avatar { width:40px; height:40px; background-color:#cc14141a; font-weight:600;}
.testimonial .author .text { line-height: 18px;}

.get-started { background: radial-gradient(circle at top left, #ffd6d6 0%, #ffecec 40%, #f8eded 70%, #ffffff 100% ); 
  padding: 50px 0; border-radius: 20px; border: solid 1px #cc141433; }
.get-started .mascot img { width: 150px; position: absolute; bottom: 0; right: 30px;}

.about { padding-bottom: 80px;}
.about .left-content { padding-right: 50px;  }
.about .right-content { padding: 0 30px; border-radius: 20px; display: flex;}

.about .right-content .image-container { background-size: cover; background-position: center; 
 background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  border-radius: 20px;}

.about .right-content .stats { border-radius: 20px; left: 30px; right: 30px; bottom: -8% !important; }
.about .right-content .stats p:not(:first-child) { line-height: 12px;}


.stats-section { border: solid 1px #e0e0e0; padding: 50px 0 40px;}
.stats-section p { font-size: 15px;}

.contact-form { padding: 30px; border: solid 1px #e6e6e6; }
.contact-form .form-control { background-color: #f4f4f4;}
.contact .list .attr-badge { background-color: var(--color-secondary); padding: 5px 8px; }
.contact .list p { font-size: 14px;}
.contact .list .number a:hover { color: var(--color-primary);}
.contact .list .external-link { position: absolute; top: 20px; right: 20px; background-color: #e9e9e9; 
  padding: 8px; border-radius: 10px; }
.contact .list .external-link:hover { background-color: var(--color-secondary);  }
.contact .list .external-link:hover a { color: var(--color-primary) !important;}

.footer { padding: 30px 0; border: solid 1px #e1e0e0; }
.footer p { font-size: 14px; }
.footer .logo img { height: 5rem; width: auto; margin-right: 5px; }
.footer .tracking-wider { letter-spacing: .05em; color: #141414; font-size: .875rem; line-height: 1.25rem; }
.footer .menu { padding: 0; }
.footer .menu li { list-style: none; padding-bottom: 10px; }
.footer .menu li a, .footer .legal-footer a { color: var(--color-muted);}
.footer .menu li:hover a{ color: var(--color-primary); }
.footer .contact p { line-height: 32px;}
.footer .legal-footer { border-top: solid 1px #e1e0e0; padding-top: 30px; font-size: 13px; }
.footer .legal-footer .menu { text-align: right;}
.footer .legal-footer li { display: inline; margin: 0 15px; }
.footer .legal-footer li:hover a { color: #000;}

.sunny-pages img { width: 180px; position: absolute; right: 0; }
.sunny-about img { bottom: -15%;}

.wp-block-embed,
.wp-block-embed iframe,
.wp-block-video video,
iframe {
    width: 100% !important;
    max-width: 100%;
}

.wp-block-embed iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.custom-pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.custom-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    margin: 0 4px;
    padding: 0 18px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s ease;
}

.custom-pagination .page-numbers:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.custom-pagination .page-numbers.current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    cursor: default;
}

.custom-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    min-width: auto;
    padding: 0 8px;
}

.custom-pagination .page-numbers.prev,
.custom-pagination .page-numbers.next {
    padding: 0 20px;
}

@media (max-width: 576px) {
    .custom-pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .custom-pagination .page-numbers {
        min-width: 42px;
        height: 42px;
        font-size: 14px;
        padding: 0 14px;
    }

    .custom-pagination .page-numbers.prev,
    .custom-pagination .page-numbers.next {
        padding: 0 16px;
    }
}


  .country-details {
        border: solid 1px var(--color-primary);
        border-radius: 10px; padding: 20px;  min-height: 300px;
        position: absolute;  top: 20%; width: 30%; left: 10%;
        z-index: 10;
    }

    .country-details dl dt h6 {  color: var(--color-primary); text-transform: uppercase;
        text-align: center; font-weight: bold; font-size: 24px; letter-spacing: 1px;
    }

    .country-details dl dt span { display: block;  border: solid 1px #ccc;
       }

    .country-details dl dt span { display: block;  border: solid 1px #ccc;
       border-left: none; border-right: none; padding: 10px 0; margin-bottom: 10px; }

    .country-details dl dt strong { margin-top: 24px;  font-size: 24px;
      color: #000;  line-height: 28px; }
    
    .country-details dl dd { margin-bottom: 20px; }

    .country-details dl dd p { display: flex; align-items: flex-start;
    gap: 10px; margin: 0; line-height: 24px;
}

    .country-details dl dd p::before {
        content: "➤"; color: var(--color-primary);
        font-size: 12px;
        line-height: 1;
        flex-shrink: 0;
        margin-top: 3px; /* adjust if needed */
    }

.services .content-block p em { display: block; position: relative; padding-left: 18px;	}
.services .content-block p em::before { content: ""; position: absolute; left: 0;
		top: 15px; width: 10px; height: 3px; background: var(--color-primary);
		transform: translateY(-50%);
	}
.services h2.service-heading  { display: inline-block; padding: 10px 20px; 
    background: #252525;  color: #fff; font-size: 18px; 
}

.services .content-block {  margin-top: 5px; padding: 30px 20px; background: #ebebeb; }

/* vehicle tabs  */
.tabs{ display:flex; background:#fff; overflow:hidden; }

.tab{ flex:1; position:relative; text-align:center; font-size:15px; color:#000; 
    text-transform: uppercase; cursor:pointer; transition:.3s; user-select:none;
    border:1px solid rgba(173,34,34,.35); padding:0; }

.tab > a { display: flex; width: 100%; height: 100%;
    padding: 15px 25px; align-items: center; justify-content: center;
    text-decoration: none; color: inherit; }

.services .tabs .tab > a { padding: 15px 10px; }

/* separator */
.tab:not(:last-child){
    border-right:none;
}

/* bottom line */
.tab::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:#cc1414;
    transform:scaleX(0);  transform-origin:center;  transition:transform .35s ease; } 
    
/* Hover animation */
.tab:hover:not(.active)::after{
    transform:scaleX(1);
}

/* Active */
.tab.active{
    background:#cc1414;
    
}
.tab .tab-title { color:#000; }
.tab.active .tab-title { color:#fff; }

.tab.active::after{
    transform:scaleX(1);
}

@media (max-width: 768px){

    .tabs{  flex-direction:column; }

    .tab{ width:100%; padding:18px 20px;
        font-size:18px; border:1px solid rgba(173,34,34,.35); }

    .tab:last-child{
        border:1px solid rgba(173,34,34,.35);
    }

    /* Remove horizontal hover line on mobile */
    .tab::after{
        height:100%;
        width:4px;
        left:0;
        top:0;
        bottom:auto;
        transform:scaleY(0);
    }

    .tab:hover:not(.active)::after,
    .tab.active::after{
        transform:scaleY(1);
    }

}


.tyre-table{
    border:1px solid #dee2e6;
    border-radius:8px;
   overflow-x:auto;
    overflow-y:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.tyre-table table{
    display:table !important;
    width:100% !important;
    /* min-width:1100px; */
    table-layout:auto !important;
    margin-bottom:0;
}

.tyre-table thead{
    display:table-header-group !important;
}

.tyre-table tbody{
    display:table-row-group !important;
}

.tyre-table tr{
    display:table-row !important;
}

.tyre-table th,
.tyre-table td{
    display:table-cell !important;
    padding:14px 16px;
    vertical-align:middle;
    word-break:break-word;
    border-color:#ececec;
}

.tyre-table.tyre-guide th { background:#cc1414; color: #fff; border: solid 1px #ccc; }

/* Header */
.tyre-table thead th{
    background:#cc1414;
    color:#fff;
    font-weight:600;
    white-space:nowrap;
}

/* Alternate row colors */
.tyre-table tbody tr:nth-child(odd){
    background:#f7f7f7;
}

.tyre-table tbody tr:nth-child(even){
    background:#ffe9e9;
}

/* Hover */
.tyre-table tbody tr:hover{
    background:#ffe8e8;
    transition:.2s;
}

/* Column widths */
.tyre-table th:nth-child(1),
.tyre-table td:nth-child(1){
    min-width:180px;
    white-space:nowrap;
}


.tyre-table th:nth-child(2),
.tyre-table td:nth-child(2){
    min-width:260px;
    white-space:normal;
}

.tyre-table th:nth-child(3),
.tyre-table td:nth-child(3){
    min-width:180px;
}

.tyre-table th:nth-child(4),
.tyre-table td:nth-child(4){
    min-width:140px;
    white-space:nowrap;
}

.tyre-table th:nth-child(5),
.tyre-table td:nth-child(5){
    min-width:350px;
    white-space:normal;
}

.tyre-table th:nth-child(1),
.tyre-table td:nth-child(1){
    min-width:50px;
    white-space:nowrap;
}


.tyre-table th:nth-child(2),
.tyre-table td:nth-child(2){
    min-width:50px;
    white-space:normal;
}

.tyre-table th:nth-child(3),
.tyre-table td:nth-child(3){
    min-width:50px;
}

.tyre-table th:nth-child(4),
.tyre-table td:nth-child(4){
    min-width:50px;
}

.tyre-table th:nth-child(5),
.tyre-table td:nth-child(5){
    min-width:50px;
}



.tyre-category {
    position: relative;
    overflow: hidden;
}

.tyre-category-image {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.tyre-category-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

/* Overlay */
.tyre-category-overlay {
    position: absolute;
    inset: 0;

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

    padding: 30px;

    background: rgba(0, 0, 0, 0.75);

    opacity: 0;
    visibility: hidden;

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

/* Hover image zoom */
.tyre-category-image:hover img {
    transform: scale(1.08);
}

/* Show overlay */
.tyre-category-image:hover .tyre-category-overlay {
    opacity: 1;
    visibility: visible;
}

/* Overlay content */
.tyre-category-overlay-content {
    text-align: center;
    color: #fff;

    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.tyre-category-image:hover .tyre-category-overlay-content {
    transform: translateY(0);
}

/* Title */
.tyre-category-title {
    margin: 0 0 15px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Description */
.tyre-category-description {
    margin-bottom: 20px;

    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

/* Link */
.tyre-category-link {
    display: inline-block;

    padding: 10px 25px;

    background: #cc1414;
    color: #fff;

    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;

    transition: background 0.3s ease;
}

.tyre-category-link:hover {
    background: #fff;
    color: #cc1414;
}

/* Mobile */
/* @media (max-width: 991.98px){

    .tyre-table table{
        min-width:1100px;
    }

} */

/* ========================
   RESPONSIVE
======================== */

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1225px;
    }
}

@media screen and (max-width: 1200px) {
    /* .bouncing-mascot img  { bottom: 40%; } */
} 

@media screen and (max-width: 991px) {

  	.menu-mobile { display: inline-block; float:right; margin-top:10px;}
    
	
	.header .menu { margin-top: 20px; display: none;}
  
    .container, .container-md, .container-sm {
        max-width: 100% !important;
		   padding: 0 25px;
    }
    .home-banner .second-column { display: none;}
  .container.hero-section { padding: 0; }
  .get-started { padding: 50px 20px 150px !important; }
	.menu { text-align: left; }
}

@media screen and (max-width: 782px) {

	.menu-mobile { display: inline-block; float:right; margin-top:10px;}
    .mega-menu { display: none !important;}
	
	.header .menu, .sunny-pages { margin-top: 20px; display: none;}
	.header .menu li { position: relative; display: block; width: 100%; padding: 12px 8px; border-radius: 10px; margin-left: 3px; margin-bottom: 7px; text-align: left;}
  
   .header .menu li:not(:last-child)::after { content: ""; position: absolute; right: 15px; top: 50%; width: 6px;
		height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(-45deg);
	}
	.header .menu li a, .header .menu li a:hover { background: none !important; padding: 0 10px; font-size: 17px;  display: block; width: 100%; box-sizing: border-box;}
	.header .menu li.current-menu-item { background-color: var(--color-secondary);}
	.header .menu li.current-menu-item:after { color: var(--color-primary);}
	.header .menu li:last-child { background: var(--color-primary); text-align: center; padding: 0;}

  .footer .legal-footer, .footer .legal-footer .menu  { text-align: center;}
	

  .about .right-content .image-container { height: 400px;}
}


@media (max-width: 590px) {
  .sm-hide { display: none !important; }
  .sm-show { display: block !important; }

  .our-range .link { margin: 0; text-align: left;}
  .hero-section h2, .home-banner h1 { font-size: 2.5rem; }

  .bouncing-mascot img  { bottom: -60%; right: 35%; }
}