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


:root {
     --primary-color: #FF6900;
     --secondary-color: #171717;
     --light-text: #fff;
     --green-color: #00BF36;
     /* Mobile Tyre Fusion has no blue in its palette, so this is a standalone
        accent used only where a blue highlight is explicitly wanted. Kept
        separate from --secondary-color so it can be retuned on its own. */
     --blue-accent: #253d98;
}

body {
     font-family: "Rubik", sans-serif;
}

.wrapper {
     overflow: hidden;
}

.width-fixed {
     max-width: 1100px;
     margin: 0 auto;
}

.text-60 {
     font-size: 60px;
     font-weight: 800;
}

.text-50 {
     font-size: 50px;
     font-weight: 800;
}

.text-42 {
     font-size: 42px;
     font-weight: 800;
     line-height: 1.15;
     /* line-height: 54.6px; */
}

.text-36 {
     font-size: 36px;
     font-weight: 600;
}

.text-32 {
     font-size: 32px;
     font-weight: 500;
}

.text-26 {
     font-size: 26px;
     font-weight: 700;
}

.text-24 {
     font-size: 24px;
     font-weight: 800;
}

.text-22 {
     font-size: 22px;
     font-weight: 500;
     line-height: 36px;
     margin: 3px 0;
}

.text-20 {
     font-size: 20px;
     font-weight: 500;
}

.text-18 {
     font-size: 18px;
     font-weight: 300;

}

.text-16 {
     font-size: 16px;
     font-weight: 300;
}

.text-14 {
     font-size: 14px;
}

.btn-link {
     width: auto;
     min-width: 320px;
     max-width: 100%;
     min-height: 72px;
     display: flex;
     width: fit-content;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     background-color: var(--primary-color);
     color: var(--light-text);
     text-decoration: none;
     padding: 14px 32px;
     border-radius: 12px;
     position: relative;
     /* Neutral shadow. An orange-tinted shadow on a white page reads as a
        smudge rather than depth. */
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
     /* Only animate transform/shadow — transitioning `all` would also animate
        the background on every repaint and cost frames on mobile. */
     transition: transform .18s ease, box-shadow .18s ease;
}

.btn-link:hover {
     color: var(--light-text);
     background-color: var(--primary-color);
     transform: translateY(-2px);
     box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.btn-link:active {
     transform: translateY(1px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}

/* Keyboard focus ring — the old button had none. */
.btn-link:focus-visible {
     outline: 3px solid var(--blue-accent);
     outline-offset: 3px;
}

.btn-link .btn-number {
     display: block;
     font-size: 26px;
     line-height: 1.1;
     font-weight: 800;
     letter-spacing: -0.01em;
}

/* Small uppercase caption — widens the size gap against the number so the
   hierarchy actually reads. 22/14 was too close to register. */
.btn-link small {
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .14em;
     line-height: 1.4;
     color: rgba(255, 255, 255, 0.72);
}

/* Ads run mobile-only, so the primary CTA goes full-width below 768px —
   a bigger tap target and no orphaned gap beside a fixed 320px box. */
@media (max-width: 767px) {
     .btn-link {
          width: calc(100% - 20px);
          min-width: 0;
          max-width: 420px;
          padding: 16px 20px;
     }

     .btn-link .btn-number {
          font-size: 28px;
     }


     .btn-link small {
          font-size: 12px;
     }
}

@media (prefers-reduced-motion: reduce) {
     .btn-link { transition: none; }
     .btn-link:hover,
     .btn-link:active { transform: none; }
}

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

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

.blue-accent-text {
     color: var(--blue-accent);
}

.ulstyle {
     padding-left: 0px;
}

ul.ulstyle li {
     margin-bottom: 8px;
     /* adjust spacing as needed */
}

@media (max-width: 768px) {

     .text-60 {
          font-size: 50px;
          font-weight: 800;
     }

     .text-50 {
          font-size: 35px;
          font-weight: 800;
     }

     .text-42 {
          font-size: 32px;
     }

     .text-36 {
          font-size: 28px;
          font-weight: 600;
     }

     .text-32 {
          font-size: 24px;
          font-weight: 500;
     }

     .text-26 {
          font-size: 22px;
          font-weight: 700;
     }

     .text-24 {
          font-size: 20px;
          font-weight: 800;
     }

     .text-22 {
          font-size: 18px;
          line-height: 20px;
          margin: 3px 0;
     }

     .text-20 {
          font-size: 16px;
          font-weight: 500;
     }

     .text-18 {
          font-size: 16px;
          font-weight: 300;

     }

     .ulstyle {
          padding-left: 0px;
     }

     ul.ulstyle li {
          margin-bottom: 8px;
          /* adjust spacing as needed */
     }
}

@media (max-width: 575px) {

     .text-60 {
          font-size: 25px;
          font-weight: 800;
     }

     .text-50 {
          font-size: 24px;
          font-weight: 800;
     }

     .text-42 {
          font-size: 24px;
     }

     /* Hero headline only. .text-42 is shared with the "Convenient ..." and
        "WHY CHOOSE US" headings, which stay at 24px — the extra specificity
        keeps this bump scoped to the hero. */
     .hero-section .text-42 {
          font-size: 31px;
     }

     .text-36 {
          font-size: 20px;
          font-weight: 600;
     }

     .text-32 {
          font-size: 18px;
          font-weight: 500;
     }

     .text-26 {
          font-size: 16px;
          font-weight: 700;
     }

     .text-24 {
          font-size: 16px;
          font-weight: 800;
     }

     .text-22 {
          font-size: 14px;
          line-height: 20px;
          margin: 3px 0;
     }

     .text-20 {
          font-size: 14px;
          font-weight: 500;
     }

     .text-18 {
          font-size: 14px;
          font-weight: 300;

     }

     .pnum {
          font-size: 18px;
          font-weight: 600;
     }

     .ulstyle {
          padding-left: 0px;
     }

     ul.ulstyle li {
          margin-bottom: 8px;
          /* adjust spacing as needed */
     }
}

/* 
=======================================================
     HEADER SECTION START
=======================================================
*/
.header-section {
     padding: 5px;
     background-color: rgb(255, 253, 0);
     position: sticky;
     top: 0;
     z-index: 100;
}

.header-section .para {
     line-height: 1;
     margin-top: 5px;
     font-size: 14px;
}

.header-btn {
     min-width: 280px;
     max-width: 500px;
     /* Fully-rounded pill rather than the 12px card used by the body CTAs. */
     border-radius: 100px;
}

.header-btn .btn-number {
     font-size: 22px;
}

.header-btn-icon {
     display: none;
}

@media (max-width: 767px) {
     .header-btn-icon {
          display: inline-block;
     }


}

.header-btn p {
     line-height: 1;
}



/* 
=======================================================
     HEADER SECTION END
=======================================================
*/

/* 
=======================================================
     HERO SECTION START
=======================================================
*/
.hero-section {
     padding: 50px 10px;
     margin-bottom: 20px
}

.hero-section ul {
     list-style: none;
     padding-right: 20px
}

.hero-section ul li svg {
     width: 28px;
     fill: var(--green-color);
     border: none;
     outline: none;
}


.hero-img {
     position: relative;
     max-width: 700px;
     margin: auto;
     margin-bottom: 10px;
}

.hero-img img {
     max-width: 100%;
     height: auto;
     display: block;
     object-fit: contain;
}

/* 
=======================================================
     HERO SECTION END
=======================================================
*/

/* 
=======================================================
     STEP SECTION START
=======================================================
*/
.step-section {
     margin-top: 100px;
     padding: 32px 10px;

}

.step-section .step-card {
     max-width: 400px;
     margin: 20px auto;
}

@media (max-width: 767px) {
     .step-section {
          margin-top: 10px;
          padding: 32px 10px;

     }
}

.step-section .step-img {
     /* width: 320px; */
     margin: auto;
     margin-bottom: 20px;
}

.step-section .step-img img {
     width: 120px;
     /* width: 100%; */
     /* width;: 100%; */
     /* aspect-ratio: 1/1; */
}

.step-section .step-img.step-lg-img img {
     width: 200px;
}

/* 
=======================================================
     STEP SECTION END
=======================================================
*/

/* 
=======================================================
     SERVICE SECTION START
=======================================================
*/
.service-section {
     padding: 100px 10px;
     /* Previous reference (../imgs/mtf2-scaled-1.webp) 404'd, so this section
        rendered as flat black. Now backed by the real job photo. Overlay eased
        from 0.8 to 0.6 so the image reads through while white/orange headings
        keep enough contrast. */
     background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../imgs/optimized/supercar-tyre-fitting-1600.webp") !important;
     background-size: auto, cover !important;
     background-position: 50% 50%, 50% 50% !important;
     background-attachment: scroll, scroll !important;
     background-repeat: no-repeat, no-repeat !important;

}

/* 
=======================================================
     SERVICE SECTION END
=======================================================
*/

/* 
=======================================================
     FITTING SECTION START
=======================================================
*/
.fitting-section {
     margin: 50px 0px 0px 0px;
     padding: 10px;
}

.fitting-section .fitting-img {
     max-width: 100%;
     overflow: hidden;
     border-radius: 10px;
}

/* Bootstrap 5 does not constrain bare <img>, so wide source images would
   overflow the column. Scale them to the container instead. */
.fitting-section .fitting-img img {
     max-width: 100%;
     height: auto;
     display: block;
}

.fitting-section .fitting-img + .fitting-img {
     margin-top: 16px;
}

.fitting-section .fitting-text-item {
     margin-bottom: 20px;
}

.fitting-section .fitting-text-item .icon {
     font-size: 20px;
     margin-right: 12px;
     color: var(--green-color);
}

/* 
=======================================================
     FITTING SECTION END
=======================================================
*/

/* 
=======================================================
     CUSTOMER SECTION START
=======================================================
*/
.customer-section {
     padding: 70px 10px;
}

.customer-section .customer-card {
     background-color: #252727;
     max-width: 345px;
     margin: auto;
     border-radius: 5px;
     position: relative;
     padding-top: 120px;
     margin-top: 70px;
}

.customer-section .customer-card .c-profile {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     margin: auto;
     overflow: hidden;
     border: 7px solid var(--primary-color);
     position: absolute;
     left: 50%;
     top: 10px;
     transform: translate(-50%, -50%);
}

.customer-section .customer-card .c-profile img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.customer-section .customer-card .c-card-text {
     padding: 10px 20px;
     position: relative;
     word-spacing: 3px;
     min-height: 330px;
}

.customer-section .customer-card .c-card-text .quote-icon {
     font-size: 90px;
     color: #ffffff39;
     position: absolute;
     left: 30px;
     top: -20px;
}

.customer-section .customer-card .c-card-foot {
     border-top: 1px solid #ffffff1e;
     padding: 15px 5px;
}

.customer-section .customer-card .c-card-foot .stars {
     color: rgb(240, 196, 25);
     font-size: 15px;
}

@media (max-width: 575px) {
     .customer-section {
          padding: 30px 10px;
     }

     .customer-section .customer-card .c-card-text {
          min-height: auto;
     }


}

/* 
=======================================================
     CUSTOMER SECTION END
=======================================================
*/

/* 
=======================================================
     WHY CHOOSE US SECTION START
=======================================================
*/
.why-choose-us {
     padding: 60px 10px 0px 10px;
}

.why-choose-us .choose-img {
     position: relative;
}

.why-choose-us .choose-img svg {
     position: absolute;
     border-radius: 10px;
     height: 200px;
     bottom: -30px;
     z-index: -1;
     fill: var(--secondary-color);

}

.why-choose-us .choose-img .img-wrap {
     width: calc(100% - 70px);
     height: 450px;
     overflow: hidden;
     border-radius: 10px;
     margin: auto;

}

.why-choose-us .choose-img .img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center right;
}

.choose-text-item .icon {
     color: var(--green-color);
     font-size: 24px;
     opacity: 0.8;
     margin-right: 15px;
}

@media (max-width: 575px) {
     .why-choose-us .choose-img .img-wrap {
          width: calc(100% - 25px);
          height: 400px;
     }
}

/* 
=======================================================
     WHY CHOOSE US SECTION END
=======================================================
*/

/* 
=======================================================
     FOOTER SECTION START
=======================================================
*/
.footer-section {
     /* Was a hardcoded rgb(1, 33, 105) navy left over from the previous brand.
        Now uses the palette so it tracks --secondary-color. */
     background-color: var(--secondary-color);
     padding: 56px 10px 32px;
     margin-top: 50px;
     color: #fff;
}

.footer-section .ft-content {
     max-width: 1140px;
     margin: 0 auto;
}

.footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 32px;
     padding-bottom: 28px;
}

@media (max-width: 767px) {
     .footer-grid {
          grid-template-columns: 1fr;
          gap: 24px;
          text-align: center;
     }
}

.footer-brand {
     font-size: 22px;
     font-weight: 700;
     color: #fff;
     margin: 0;
}

.footer-heading {
     font-size: 13px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--primary-color);
     margin: 0 0 10px;
}

.footer-muted {
     font-size: 15px;
     line-height: 1.6;
     color: rgba(255, 255, 255, .68);
}

.footer-contact {
     /* inline-flex + min-height gets these to the 44px minimum touch target;
        they measured 19px tall before. */
     display: inline-flex;
     align-items: center;
     min-height: 44px;
     color: #fff;
     text-decoration: none;
     font-size: 16px;
     font-weight: 600;
     transition: color .2s ease;
}

.footer-contact:hover,
.footer-contact:focus-visible {
     color: var(--primary-color);
}

.footer-contact i {
     color: var(--primary-color);
     margin-right: 6px;
}

.footer-section .footer-links {
     display: flex;
     flex-direction: column;
     gap: 8px;
}

@media (max-width: 767px) {
     .footer-section .footer-links {
          align-items: center;
     }
}

.footer-section .footer-links a {
     display: inline-flex;
     align-items: center;
     min-height: 44px;
     text-decoration: none;
     font-size: 15px;
     color: rgba(255, 255, 255, .78);
     transition: color .2s ease;
}

.footer-section .footer-links a:hover,
.footer-section .footer-links a:focus-visible {
     color: var(--primary-color);
}

.footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .14);
     padding-top: 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
     gap: 12px;
}

@media (max-width: 767px) {
     .footer-bottom {
          justify-content: center;
          text-align: center;
     }
}

/* Statutory company details — intentionally quieter than the rest. */
.footer-legal {
     font-size: 13px;
     line-height: 1.7;
     color: rgba(255, 255, 255, .55);
     max-width: 620px;
}

.footer-legal strong {
     color: rgba(255, 255, 255, .8);
     font-weight: 600;
}

.footer-bottom .footer-muted {
     font-size: 13px;
}


/* 
=======================================================
     COVERAGE SECTION
=======================================================
*/
.coverage-section {
     padding: 56px 16px 48px;
     background: #f7f7f7;
}

.coverage-title {
     color: var(--secondary-color);
     font-weight: 800;
     margin: 0 0 6px;
}

.coverage-sub {
     font-size: 16px;
     color: #595959;
     margin: 0 0 28px;
}

.coverage-grid {
     list-style: none;
     padding: 0;
     margin: 0 auto 26px;
     display: grid;
     /* Two columns on phones, filling out to four on wider screens. */
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px;
     max-width: 900px;
}

@media (min-width: 576px) {
     .coverage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.coverage-chip {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2px;
     /* 44px+ so each chip is a comfortable touch target. */
     min-height: 76px;
     padding: 12px 8px;
     background: #fff;
     border: 1px solid #e6e6e6;
     border-top: 3px solid var(--primary-color);
     border-radius: 10px;
}

.coverage-code {
     font-size: 24px;
     font-weight: 800;
     line-height: 1;
     color: var(--secondary-color);
}

.coverage-name {
     font-size: 12px;
     line-height: 1.3;
     color: #6b6b6b;
     text-align: center;
}

.coverage-note {
     font-size: 15px;
     color: #595959;
     margin: 0;
}

.coverage-call {
     color: var(--primary-color);
     font-weight: 700;
     text-decoration: none;
     white-space: nowrap;
}

.coverage-call:hover,
.coverage-call:focus-visible {
     text-decoration: underline;
     color: var(--primary-color);
}

/* 
=======================================================
     FOOTER SECTION END
=======================================================
*/
/* ===== QUOTE FORM SECTION ===== */
.quote-form-section {
     padding: 60px 0;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.quote-form-section h2 {
     color: var(--secondary-color);
}

.form-input {
     border: 2px solid #e0e0e0;
     border-radius: 10px;
     padding: 14px 18px;
     font-size: 16px;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     background: #fff;
}

.form-input:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
     outline: none;
}

.form-input::placeholder {
     color: #999;
}

.btn-quote-submit {
     background: linear-gradient(135deg, #FF6900 0%, #FF8833 100%);
     color: #fff;
     border: none;
     padding: 16px 40px;
     border-radius: 50px;
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
}

.btn-quote-submit:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
}

.btn-quote-submit:active {
     transform: translateY(0);
}



/* ===== FIX SPACING ISSUES ===== */
.hero-section {
     padding-top: 30px !important;
     padding-bottom: 40px !important;
}

.steps-section {
     padding-top: 40px !important;
     padding-bottom: 40px !important;
}

.location-section {
     padding-top: 40px !important;
     padding-bottom: 40px !important;
}

.services-section {
     padding-top: 40px !important;
     padding-bottom: 40px !important;
}

.customer-card {
     margin-bottom: 0 !important;
}

section {
     overflow: hidden;
}



/* ===== ALERT SUCCESS ===== */
.alert-success {
     background: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
     padding: 15px 20px;
     border-radius: 10px;
     font-size: 16px;
}

/* ===== FAQ SECTION ===== */
.faq-section {
     padding: 50px 0;
     background: #fff;
}

.faq-item {
     background: #f8f9fa;
     border-radius: 12px;
     margin-bottom: 12px;
     overflow: hidden;
     border: 1px solid #e9ecef;
     transition: box-shadow 0.3s ease;
}

.faq-item:hover {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.faq-question {
     padding: 18px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     transition: background 0.2s ease;
     user-select: none;
}

.faq-question:hover {
     background: #f0f0f0;
}

.faq-question h3 {
     font-weight: 600;
     color: var(--secondary-color);
     margin: 0;
     font-size: 17px;
     flex: 1;
     padding-right: 15px;
}

.faq-question i {
     color: var(--primary-color);
     transition: transform 0.3s ease;
     font-size: 14px;
     flex-shrink: 0;
}

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

.faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
     max-height: 500px;
}

.faq-answer p {
     color: #555;
     line-height: 1.7;
     margin: 0;
     padding: 0 24px 18px;
     font-size: 16px;
}

/* FAQ Responsive */
@media (max-width: 767px) {
     .faq-section {
          padding: 35px 15px;
     }

     .faq-question {
          padding: 14px 16px;
     }

     .faq-question h3 {
          font-size: 15px;
     }

     .faq-answer p {
          padding: 0 16px 14px;
          font-size: 14px;
     }

     .faq-section h2 {
          font-size: 26px !important;
     }
}

/* ===== FOOTER LINKS ===== */
.footer-links {
     margin-top: 10px;
}

.footer-links a {
     text-decoration: none;
     color: #fff;
     background: rgba(255, 255, 255, 0.15);
     padding: 6px 16px;
     border-radius: 20px;
     font-size: 13px;
     transition: all 0.2s ease;
     display: inline-block;
     margin: 4px;
}

.footer-links a:hover {
     background: rgba(255, 255, 255, 0.3);
     color: #fff;
}

/* 
=======================================================
     WHATSAPP FLOATING BUTTON
=======================================================
*/
#wa {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 9999;
}

.whatsapp-button {
     display: flex;
     align-items: center;
     justify-content: center;
     /* Icon-only: fixed circle rather than a label-width pill. */
     width: 60px;
     height: 60px;
     padding: 0;
     background: #25d366;
     color: #fff;
     text-decoration: none;
     border-radius: 50%;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-button:hover {
     transform: scale(1.06);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     color: #fff;
     text-decoration: none;
}

.whatsapp-button img {
     width: 34px;
     height: 34px;
     flex-shrink: 0;
}

@media (max-width: 576px) {
     .whatsapp-button h5 {
          display: none;
     }

     .whatsapp-button {
          padding: 12px;
          border-radius: 50%;
     }

     .whatsapp-button img {
          width: 32px;
          height: 32px;
     }
}