/* ================================================================================================================= */
/* ================================================================================================================= */
/* ================================================================================================================= */
/* ================================================================================================================= */
/* ================================================================================================================= */






/* ================================================================================================================= */
/*    💡 SECTION 1: GLOBAL CONTROLS & MASTER KEYFRAME DEFINITIONS                                                    */
/*    Adjust values here to MANUALLY FORCE CHANGES on ALL buttons. This is now the ONLY place for these styles.      */
/* ================================================================================================================= */

/* --- Master Animation Definitions (Defined ONCE) --- */
@keyframes pulse {
  0%, 100% {
    transform: scale(var(--pulse-min-size)); /* Uses the MIN size variable from the button styles below */
  }
  50% {
    transform: scale(var(--pulse-max-size)); /* Uses the MAX size variable from the button styles below */
  }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes flipHoriz { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } }
@keyframes flipVert { from { transform: perspective(400px) rotateX(0deg); } to { transform: perspective(400px) rotateX(360deg); } }
@keyframes flipOut { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(180deg); } }
@keyframes fadeInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }


/* --- Global Button Controls --- */
/* This rule targets ALL sidebar buttons across your entire site */
.sidebar-cta,
.cta-section a {
    /* --- PULSE ANIMATION CONTROLS --- */
    --pulse-min-size: 0.1;                  /*<-- ADJUST GLOBAL PULSE MIN SIZE (0 = disappear) */
    --pulse-max-size: 1.07;               /*<-- ADJUST GLOBAL PULSE MAX SIZE */
    animation-name: pulse !important;
    animation-duration: 4.5s !important;  /*<-- ADJUST GLOBAL PULSE SPEED */
    animation-iteration-count: infinite !important;

    /* --- SIZING --- */
    width: 300px !important;       /*<-- ADJUST GLOBAL WIDTH */
    height: 60px !important;       /*<-- ADJUST GLOBAL HEIGHT */
    
    /* --- PADDING & CORNERS --- */
    padding: 10px 20px !important; /*<-- ADJUST GLOBAL PADDING */
    border-radius: 30px !important;  /*<-- ADJUST GLOBAL CORNERS */

    /* --- Text Alignment (Forces text to be centered) --- */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    backface-visibility: hidden;
    text-decoration: none !important;
}

/* --- Global Container Controls --- */
/* This rule targets ALL sidebar button CONTAINERS across your site */
.cta-small,
.cta-section {
    /* --- SPACING --- */
    margin-top: 20px !important;     /*<-- ADJUST GLOBAL TOP SPACING */
    margin-bottom: 20px !important;  /*<-- ADJUST GLOBAL BOTTOM SPACING */
}




/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements */
/* Location: Import into assets/css/custom-functions.css for site-wide use on 404.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #080707 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}



/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements on index.html */
/* Location: Import into assets/css/custom-functions.css for site-wide use on index.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #070707 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}



/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements on accident-towing-recovery.html */
/* Location: Import into assets/css/custom-functions.css for site-wide use on accident-towing-recovery.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #010101 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}



/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements on air-hydraulic-brake-systems.html */
/* Location: Import into assets/css/custom-functions.css for site-wide use on air-hydraulic-brake-systems.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #060606 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}



/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements on belts-hoses-replacement.html */
/* Location: Import into assets/css/custom-functions.css for site-wide use on belts-hoses-replacement.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #080808 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}




/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements on blog-details.html */
/* Location: Import into assets/css/custom-functions.css for site-wide use on blog-details.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #050505 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}




/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements on blog.html */
/* Location: Import into assets/css/custom-functions.css for site-wide use on blog.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #080808 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}




/* ============================================================ */
/* 💡 Section Divider: Animation Styles (To be imported into custom-functions.css) */
/* Purpose: Defines animations for fadeIn, slideIn, pulse, and flipOut for sidebar elements on body-work-painting.html */
/* Location: Import into assets/css/custom-functions.css for site-wide use on body-work-painting.html */
/* ============================================================ */

/* Animation: fadeIn - Fades in elements over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - Slides elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - Scales button slightly for attention every 2 seconds */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipOut - Flips element horizontally over 1.5 seconds */
@keyframes flipOut {
    from { transform: perspective(400px) rotateY(0deg); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* Inline styles extracted for .text-justify */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* Inline styles extracted for .cta-section */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* Inline styles extracted for .cta-section a */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button (#ffd700) */
    color: #040404 !important; /* White text (#ffffff) forced */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    animation: pulse 2s infinite;
}

/* Hover state for .cta-section a */
.cta-section a:hover {
    color: #ffffff !important; /* Ensure white text on hover forced */
}



/* ============================================================ */
/* 💡 Section Divider: Animation & Sidebar Styles   CONTACT PAGE */
/* Purpose: Defines animations and styles for contact.html      */
/* Location: Import into assets/css/custom-functions.css       */
/* ============================================================ */

/* Animation: fadeIn - fade elements in over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animation: slideIn - slide elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Animation: pulse - scale button for attention every 2 seconds */
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipHoriz - full 360° horizontal rotation */
@keyframes flipHoriz {
    from { transform: perspective(400px) rotateY(0deg); }
    to   { transform: perspective(400px) rotateY(360deg); }
}

/* Animation: flipVert - full 360° vertical rotation (optional) */
@keyframes flipVert {
    from { transform: perspective(400px) rotateX(0deg); }
    to   { transform: perspective(400px) rotateX(360deg); }
}

/* Text block styling for contact.html */
.text-justify {
    color: #ffffff;
    animation: fadeIn 2s;
}

/* CTA container styling for contact.html */
.cta-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: slideIn 1.5s;
}

/* CTA button styling for contact.html */
.cta-section a {
    display: inline-block;
    background-color: #ffd700; /* Gold CTA button */
    color: #ffffff !important; /* White text forced */
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    animation: pulse 2s infinite;
    backface-visibility: hidden;
}

/* Hover state for contact.html CTA: triggers horizontal flip */
.cta-section a:hover {
    animation: flipHoriz 1.5s forwards;
    color: #ffffff !important;
}




/* ============================================================
   💡 Section Divider: Animation & Sidebar Styles   DIFFERENTIAL-AXLE-REPAIR PAGE
   Purpose: Defines keyframes and sidebar animations for differential-axle-repair.html
   Location: Import into assets/css/custom-functions.css
   ============================================================ */

/* Animation: fadeIn - fade elements in over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Animation: slideIn - slide elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Animation: pulse - scale button for attention every 2 seconds */
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipHoriz - full 360° horizontal rotation */
@keyframes flipHoriz {
    from { transform: perspective(400px) rotateY(0deg); }
    to   { transform: perspective(400px) rotateY(360deg); }
}

/* Text block styling */
.text-justify {
    animation: fadeIn 2s;
}

/* CTA container styling */
.cta-section {
    animation: slideIn 1.5s;
}

/* CTA button styling */
.cta-section a {
    animation: pulse 2s infinite;
    backface-visibility: hidden;
}

/* Hover state triggers horizontal flip */
.cta-section a:hover {
    animation: flipHoriz 1.5s forwards;
}




/* ============================================================
   💡 Section Divider: Animation & Sidebar Styles   DIFFERENTIAL-AXLE-REPAIR PAGE
   Purpose: Sidebar animations and styling for differential-axle-repair.html
   Location: Import into assets/css/custom-functions.css
   ============================================================ */

/* Animation: fadeIn — fade elements in over 2 seconds */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Animation: slideIn — slide elements in from right over 1.5 seconds */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Animation: pulse — scale button for attention every 2 seconds */
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation: flipHoriz — full 360° horizontal rotation */
@keyframes flipHoriz {
    from { transform: perspective(400px) rotateY(0deg); }
    to   { transform: perspective(400px) rotateY(360deg); }
}

/* Text block styling */
#targetElement .text-justify {
    animation: fadeIn 2s;
}

/* CTA container styling */
#targetElement .cta-section {
    animation: slideIn 1.5s;
}

/* CTA button styling */
#targetElement .cta-section a {
    animation: pulse 2s infinite;
    backface-visibility: hidden;
}

/* Hover state triggers horizontal flip */
#targetElement .cta-section a:hover {
    animation: flipHoriz 1.5s forwards;
}



/* ============================================================
   💡 Section Divider: Animation & Sidebar Styles  (all pages)
   Purpose: Sidebar animations + randomized CTA flips & colors
   Location: assets/css/custom-functions.css
   ============================================================ */

/* existing keyframes */
@keyframes fadeIn   { from {opacity:0;}      to {opacity:1;} }
@keyframes slideIn  { from {transform:translateX(100%);} to {transform:translateX(0);} }
@keyframes pulse    { 0%,100% {transform:scale(1);} 50% {transform:scale(1.05);} }

/* new vertical flip */
@keyframes flipVert {
  from {transform: perspective(400px) rotateX(0deg);}
  to   {transform: perspective(400px) rotateX(360deg);}
}

/* horizontal flip (already present) */
@keyframes flipHoriz {
  from {transform: perspective(400px) rotateY(0deg);}
  to   {transform: perspective(400px) rotateY(360deg);}
}

/* apply to sidebar container */
#targetElement .text-justify {
    animation: fadeIn 2s;
}
#targetElement .cta-section {
    animation: slideIn 1.5s;
}
/* CTA button uses JS to set background + flip axis */
#targetElement .cta-section a {
    animation: pulse 2s infinite;
    backface-visibility: hidden;
}
/* keep hover override in JS */



/* ============================================================
   💡 Section Divider: Animation & Sidebar Styles (all pages)
   Purpose: Randomized CTA flips & colors + shared keyframes
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Existing keyframes */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* Horizontal flip already in place */
@keyframes flipHoriz {
    from { transform: perspective(400px) rotateY(0deg); }
    to   { transform: perspective(400px) rotateY(360deg); }
}
/* New vertical flip */
@keyframes flipVert {
    from { transform: perspective(400px) rotateX(0deg); }
    to   { transform: perspective(400px) rotateX(360deg); }
}

/* Sidebar container animations */
#targetElement .text-justify {
    animation: fadeIn 2s;
}
#targetElement .cta-section {
    animation: slideIn 1.5s;
}

/* Base CTA button styling (color + flip axis set via JS) */
#targetElement .cta-section a {
    animation: pulse 2s infinite;
    backface-visibility: hidden;
}

/* The actual flip on hover is triggered in-page via the script */







/* ============================================================
   Section Divider: Animation & Sidebar Styles — exhaust-system-dpf-service.html
   Purpose: Sidebar + CTA styles for exhaust-system-dpf-service.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}

@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* Sidebar text */
#targetElement .text-justify {
  animation: fadeIn 2s ease-in-out;
  color: #ffffff;
}

/* CTA container */
#targetElement .cta-section {
  animation: slideIn 1.5s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  animation: pulse 2s infinite ease-in-out;
  backface-visibility: hidden;
  color: #0d0d0d !important;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}



/* ============================================================
   Section Divider: Animation & Sidebar Styles — flat-tire-change-repair.html
   Purpose: Sidebar + CTA styles for flat-tire-change-repair.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;      /* fade in text */
  color: #ffffff;            /* white text */
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;   /* slide in CTA */
}

/* CTA button styling */
#targetElement .sidebar-cta {
  animation: pulse 2s infinite; /* pulsing button */
  backface-visibility: hidden;   /* prevent flicker */
  color: #ffffff !important;     /* white text */
  padding: 12px 24px;            /* spacing */
  border-radius: 4px;            /* rounded corners */
  text-decoration: none;         /* no underline */
  font-weight: 600;
}



/* ============================================================
   Section Divider: Animation & Sidebar Styles — flatbed-towing.html
   Purpose: Sidebar + CTA styles for flatbed-towing.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;      /* fade in text */
  color: #ffffff;            /* white text */
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;   /* slide in CTA */
}

/* CTA button styling */
#targetElement .sidebar-cta {
  animation: pulse 2s infinite; /* pulsing button */
  backface-visibility: hidden;   /* prevent flicker */
  color: #ffffff !important;     /* white text */
  padding: 12px 24px;            /* spacing */
  border-radius: 4px;            /* rounded corners */
  text-decoration: none;         /* no underline */
  font-weight: 600;
}



/* ============================================================
   Section Divider: Animation & Sidebar Styles — fleet-service-contracts.html
   Purpose: Sidebar + CTA styles for fleet-service-contracts.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;      /* fade in text */
  color: #ffffff;            /* white text */
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;   /* slide in CTA */
}

/* CTA button styling */
#targetElement .sidebar-cta {
  animation: pulse 2s infinite; /* pulsing button */
  backface-visibility: hidden;   /* prevent flicker */
  color: #ffffff !important;     /* white text */
  padding: 12px 24px;            /* spacing */
  border-radius: 4px;            /* rounded corners */
  text-decoration: none;         /* no underline */
  font-weight: 600;
}



/* ============================================================
   Animation & Sidebar Styles — frame-welding-service.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;
  color: #ffffff;
}

/* CTA container */
#targetElement .cta-section {
  animation: slideIn 1.5s;
}

/* CTA button */
#targetElement .sidebar-cta {
  animation: pulse 2s infinite;
  backface-visibility: hidden;
  color: #ffffff !important;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}




/* ============================================================
   Animations & Sidebar CTA — fuel‑fluid‑delivery.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 1.8s ease-out;
  color: #ffeaa7;
}

/* CTA wrapper */
#targetElement .cta-section {
  text-align: center;
  animation: slideIn 1.5s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  backface-visibility: hidden;
  animation: pulse 2s infinite;
}



/* ============================================================
   Animations & Sidebar CTA — heavy‑duty‑towing.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 1.8s ease-out;
  color: #74b9ff;
}

/* CTA wrapper */
#targetElement .cta-section {
  text-align: center;
  animation: slideIn 1.5s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  backface-visibility: hidden;
  animation: pulse 2s infinite;
}



/* ============================================================
   Animations & Sidebar CTA — hourly-labor-wait-time.html
   ============================================================ */

/* Keyframes */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* Supercharged text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.6s ease-out;
  color: #fdcb6e;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 15px;
  animation: fadeInUp 1.8s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}



/* ============================================================
   Animations & Sidebar CTA — hvac-service.html
   ============================================================ */

/* Keyframes */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* Supercharged text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.6s ease-out;
  color: #0984e3;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.8s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}




/* ============================================================
   Animations & Sidebar CTA — hydraulic-system-service.html
   ============================================================ */

/* Keyframes */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* Supercharged text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.6s ease-out;
  color: #e17055;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.8s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}



/* ============================================================
   Animations & Sidebar CTA — jump-starts-battery-service.html
   ============================================================ */

/* Keyframes */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* Supercharged sidebar text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.6s ease-out;
  color: #d63031;
  font-weight: 500;
}

/* CTA wrapper */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.8s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}




/* ============================================================
   SUPERCHARGED Sidebar CTA & Text — light-duty-towing.html -->
   ============================================================ */

/* Animations */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* Highlighted SEO text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.5s ease-out;
  color: #00b894;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.7s ease-out;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}





/* ============================================================
   SUPERCHARGED Sidebar CTA & Text — lube-oil-filter-changes.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* fade-in and pulse animations */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* highlighted SEO text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.5s ease-out;
  color: #6c5ce7;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.7s ease-out;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}




/* ============================================================
   SUPERCHARGED Sidebar CTA & Text — medium-duty-towing.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* fade-in and pulse animations */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* highlighted SEO text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.5s ease-out;
  color: #0984e3;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.7s ease-out;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}



/* ============================================================
   SUPERCHARGED Sidebar CTA & Text — motorcycle-towing.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* fade-in and pulse animations */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* highlighted SEO text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.5s ease-out;
  color: #d63031;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.7s ease-out;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}




/* ============================================================
   SUPERCHARGED Sidebar CTA & Text — police-municipal-towing.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* fade-in and pulse animations */
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* highlighted SEO text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.5s ease-out;
  color: #0984e3;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.7s ease-out;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}



/* ============================================================
   SUPERCHARGED Sidebar CTA & Text — preventive‑maintenance‑programs.html
   Location: assets/css/custom-functions.css
   ============================================================ */

/* fade-in + pulse */
@keyframes fadeInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* highlighted SEO text */
#targetElement .supercharge-text {
  animation: fadeInUp 1.5s ease-out;
  color: #00b894;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.7s ease-out;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 4px;
  color: #2d3436 !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}



/* ============================================================
   Section Divider: Animation & Sidebar Styles — rv-towing.html
   Purpose: Sidebar + CTA styles for RV Towing page
   Location: assets/css/custom-functions.css
   ============================================================ */
/* Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes flipHoriz { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } }
@keyframes flipVert  { from { transform: perspective(400px) rotateX(0deg); } to { transform: perspective(400px) rotateX(360deg); } }

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;
  color: #ffffff; /* white for contrast */
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 0;               /* full-size corners */
  color: #ffffff !important;      /* white text */
  text-decoration: none;
  font-weight: 600;
  animation: pulse 2s infinite;   /* pulsing */
  backface-visibility: hidden;    /* prevents flicker on flip */
}




/* ============================================================
   Section Divider: Animation & Sidebar Styles — secondary-towing-relocation.html
   Purpose: Sidebar + CTA styles for Secondary Towing page
   Location: assets/css/custom-functions.css
   ============================================================ */
/* Keyframes */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn   { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes flipHoriz { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } }
@keyframes flipVert  { from { transform: perspective(400px) rotateX(0deg); } to { transform: perspective(400px) rotateX(360deg); } }

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;
  color: #ffffff;
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 0;               /* full-size corners */
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  animation: pulse 2s infinite;
  backface-visibility: hidden;    /* prevents flicker */
}



/* ============================================================
   Section Divider: Animation & Sidebar Styles — starting-charging-systems.html
   Purpose: Sidebar + CTA styles for Starting & Charging page
   Location: assets/css/custom-functions.css
   ============================================================ */
/* Keyframes */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn   { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes flipHoriz { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } }
@keyframes flipVert  { from { transform: perspective(400px) rotateX(0deg); } to { transform: perspective(400px) rotateX(360deg); } }

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;
  color: #ffffff;
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 0;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  animation: pulse 2s infinite;
  backface-visibility: hidden;
}



/* ============================================================
   Section Divider: Animation & Sidebar Styles — storage-per-night.html
   Purpose: Sidebar + CTA styles for Per-Night Storage page
   Location: assets/css/custom-functions.css
   ============================================================ */
/* Keyframes */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn   { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes flipHoriz { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } }
@keyframes flipVert  { from { transform: perspective(400px) rotateX(0deg); } to { transform: perspective(400px) rotateX(360deg); } }

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;
  color: #222222;
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 0;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  animation: pulse 2s infinite;
  backface-visibility: hidden;
}



/* ============================================================
   storage-per-night.html Section Divider: Animation & CTA Styles
   suspension-repair.html
   Location: assets/css/custom-functions.css
   ============================================================ */
/* Keyframes */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn   { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes flipHoriz { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } }
@keyframes flipVert  { from { transform: perspective(400px) rotateX(0deg); } to { transform: perspective(400px) rotateX(360deg); } }

/* Sidebar text styling */
#targetElement .text-justify {
  animation: fadeIn 2s;
  color: #222222;
}

/* CTA container styling */
#targetElement .cta-section {
  animation: slideIn 1.5s;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 0;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  animation: pulse 2s infinite;
  backface-visibility: hidden;
}



/* ============================================================
💡 Section Divider: Animation & Sidebar Styles   TEAM-DETAIL PAGE
Purpose: Defines animations and styles for team-detail.html
Location: Import into assets/css/custom-functions.css
============================================================ */

/* Fade upward with soft bounce */
@keyframes fadeInUp {
  from { transform: translateY(25px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Gentle pulse for CTA */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Text styling */
#targetElement .team-seo-text {
  animation: fadeInUp 1.6s ease-out;
  font-weight: 500;
  color: #16a085; /* Default — overridden by inline color js on CTA */
}

/* CTA container */
#targetElement .cta-small {
  text-align: center;
  margin-top: 12px;
  animation: fadeInUp 1.8s ease-out;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 5px;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.8s infinite;
}



/* ============================================================
💡 Section Divider: Animation & Sidebar Styles   TEAM.HTML PAGE
Purpose: Defines animations and styles for team.html
Location: Import into assets/css/custom-functions.css
============================================================ */

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* SEO text styling */
#targetElement .team-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #34495e; /* fallback text color */
  font-weight: 500;
}

/* CTA box */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  animation: pulse 2.8s infinite;
  text-decoration: none;
}



/* ============================================================
💡 Section Divider: Animation & Sidebar Styles   TEAM-DETAIL.HTML
Purpose: Sidebar + CTA styles for team-detail.html
Location: assets/css/custom-functions.css
============================================================ */

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* SEO text styling */
#targetElement .team-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #34495e; /* fallback text color */
  font-weight: 500;
}

/* CTA box */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  animation: pulse 2.8s infinite;
  text-decoration: none;
}





/* ============================================================
💡 Section Divider: Animation & Sidebar Styles   TESTIMONIAL.HTML
Purpose: Defines animations and styles for testimonial.html sidebar
Location: assets/css/custom-functions.css
============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}

@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* SEO Text */
#targetElement .testi-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #34495e;
  font-weight: 500;
}

/* CTA container */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  animation: pulse 2.8s infinite;
  text-decoration: none;
  backface-visibility: hidden;
}




/* ============================================================
💡 Section Divider: Animation & Sidebar Styles — transmission-repair.html
Purpose: Sidebar + CTA styles for transmission-repair.html
Location: assets/css/custom-functions.css
============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* SEO text styling */
#targetElement .trans-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #34495e;
  font-weight: 500;
}

/* CTA wrapper */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button styling */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.8s infinite;
  backface-visibility: hidden;
}



/* ============================================================
💡 Section Divider: Animation & Sidebar Styles — truck-road-service.html
Purpose: Scoped styling for sidebar & CTA animations
Location: assets/css/custom-functions.css
============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* SEO text */
#targetElement .truckroad-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #0574e2;
  font-weight: 500;
}

/* CTA wrapper */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.8s infinite;
  backface-visibility: hidden;
}




/* ============================================================
💡 Section Divider: Animation & Sidebar Styles — tune-up.html
Purpose: Sidebar + CTA styles for tune-up.html
Location: assets/css/custom-functions.css
============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* SEO text */
#targetElement .tuneup-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #f05c06;
  font-weight: 500;
}

/* CTA wrapper */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.8s infinite;
  backface-visibility: hidden;
}



/* ============================================================
💡 Section Divider: Animation & Sidebar Styles — welding-fabrication.html
Purpose: Sidebar + CTA styles for welding-fabrication.html
Location: assets/css/custom-functions.css
============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* SEO text */
#targetElement .weldfab-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #34495e;
  font-weight: 500;
}

/* CTA wrapper */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.8s infinite;
  backface-visibility: hidden;
}




/* ============================================================
💡 Section Divider: Animation & Sidebar Styles — wheel-alignment.html
Purpose: Scoped styles for wheel-alignment.html CTA and SEO block
Location: assets/css/custom-functions.css
============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* SEO text */
#targetElement .align-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #34495e;
  font-weight: 500;
}

/* CTA wrapper */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.8s infinite;
  backface-visibility: hidden;
}




/* ============================================================
💡 Section Divider: Animation & Sidebar Styles — winter-roadside-assistance.html
Purpose: Sidebar + CTA styles for winter roadside assistance
Location: assets/css/custom-functions.css
============================================================ */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes flipHoriz {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes flipVert {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(360deg); }
}

/* SEO text */
#targetElement .winter-seo-text {
  animation: fadeIn 1.5s ease-in;
  color: #34495e;
  font-weight: 500;
}

/* CTA wrapper */
#targetElement .cta-small {
  animation: fadeIn 2s ease-in;
  text-align: center;
  margin-top: 14px;
}

/* CTA button */
#targetElement .sidebar-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  animation: pulse 2.8s infinite;
  backface-visibility: hidden;
}