/* 
 * Custom Branding CSS - Logo-based Color Scheme
 * Primary Navy: #1B2251
 * Primary Red: #ff4136
 * Accent Maroon: #6B1D3A
 */

/* ========================================
   CSS Variables for Easy Color Management
   ======================================== */
:root {
    --primary-navy: #1B2251;
    --primary-red: #ff4136;
    --accent-maroon: #6B1D3A;
    --light-blue: #F0F4F8;
    --light-red: #FEE8EB;
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #F5F5F5;
}

/* ========================================
   Navigation & Header
   ======================================== */
.globalNav a {
    color: var(--primary-navy);
}

.globalNav a:hover {
    color: var(--primary-red);
}

.globalNav .rootLink.colorize:hover {
    color: var(--primary-red) !important;
}

/* Navigation dropdown arrow */
.globalNav .dropdownArrow {
    background: #fff;
}

/* Active navigation items */
.globalNav .rootLink.active,
.globalNav .navRoot .rootLink:hover {
    color: var(--primary-red);
}

/* ========================================
   MODERN BUTTON SYSTEM - STANDARDIZED UI
   ======================================== */

/* Base button reset and normalization */
.slider-button,
.slider-button1,
.slider-button2,
.btn-primary,
.btn,
.btn-common,
button[type="submit"],
.learn-more-btn,
input[type="submit"],
input[type="button"],
.button,
.submit-btn,
.cta-button,
.action-btn,
a.btn-common,
a.slider-button2,
a.slider-button {
    /* Core styling */
    background: linear-gradient(135deg, var(--primary-red) 0%, #d93026 100%) !important;
    border: none !important;
    color: #ffffff !important;
    
    /* Standardized dimensions - Medium (Default) */
    height: 48px !important;
    min-width: 160px !important;
    padding: 0 32px !important;
    line-height: 48px !important;
    
    /* Typography */
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap !important;
    
    /* Display & positioning */
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Modern UI effects */
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(255, 65, 54, 0.25),
                0 2px 6px rgba(255, 65, 54, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    
    /* Smooth transitions */
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Prevent text wrapping issues */
    box-sizing: border-box !important;
}

/* Hover state - Enhanced interaction */
.slider-button:hover,
.slider-button1:hover,
.slider-button2:hover,
.btn-primary:hover,
.btn:hover,
.btn-common:hover,
button[type="submit"]:hover,
.learn-more-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.submit-btn:hover,
.cta-button:hover,
.action-btn:hover,
a.btn-common:hover,
a.slider-button2:hover,
a.slider-button:hover {
    background: linear-gradient(135deg, #ff6b61 0%, var(--primary-red) 50%, var(--accent-maroon) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(255, 65, 54, 0.4),
                0 4px 12px rgba(255, 65, 54, 0.3),
                0 0 20px rgba(255, 65, 54, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-decoration: none !important;
}

/* Active/Click state */
.slider-button:active,
.slider-button1:active,
.slider-button2:active,
.btn-primary:active,
.btn:active,
.btn-common:active,
button[type="submit"]:active,
.learn-more-btn:active,
input[type="submit"]:active,
input[type="button"]:active,
.button:active,
.submit-btn:active,
.cta-button:active,
.action-btn:active,
a.btn-common:active,
a.slider-button2:active,
a.slider-button:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(255, 65, 54, 0.3),
                0 1px 4px rgba(255, 65, 54, 0.2) !important;
    transition: all 0.1s ease !important;
}

/* ========================================
   BUTTON SIZE VARIANTS
   ======================================== */

/* Small buttons - 40px height */
.btn-sm,
.button-small,
.btn.btn-sm,
.slider-button2 {
    height: 40px !important;
    min-width: 140px !important;
    padding: 0 24px !important;
    line-height: 40px !important;
    font-size: 13px !important;
    letter-spacing: 0.6px !important;
}

/* Large buttons - 56px height */
.btn-lg,
.button-large,
.btn.btn-lg {
    height: 56px !important;
    min-width: 180px !important;
    padding: 0 40px !important;
    line-height: 56px !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

/* Full width buttons */
.btn-block {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* ========================================
   BUTTON STYLE VARIANTS
   ======================================== */

/* Secondary buttons - Outline style */
.btn-secondary,
.btn-outline,
.btn-outline-primary,
a.btn-white {
    background: transparent !important;
    border: 2px solid var(--primary-red) !important;
    color: var(--primary-red) !important;
    box-shadow: 0 2px 8px rgba(255, 65, 54, 0.1) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
a.btn-white:hover {
    background: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(255, 65, 54, 0.35),
                0 4px 12px rgba(255, 65, 54, 0.25) !important;
}

/* Ghost buttons - Transparent with minimal border */
.btn-ghost {
    background: transparent !important;
    border: 1px solid var(--primary-red) !important;
    color: var(--primary-red) !important;
    box-shadow: none !important;
}

.btn-ghost:hover {
    background: rgba(255, 65, 54, 0.08) !important;
    border-color: var(--accent-maroon) !important;
    color: var(--accent-maroon) !important;
    box-shadow: 0 4px 12px rgba(255, 65, 54, 0.15) !important;
}

/* Premium CTA buttons - Extra prominent with gradient */
.cta-button,
.btn-cta {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--accent-maroon) 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 65, 54, 0.35),
                0 3px 10px rgba(255, 65, 54, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    animation: subtle-pulse 3s ease-in-out infinite !important;
}

.cta-button:hover,
.btn-cta:hover {
    background: linear-gradient(135deg, var(--accent-maroon) 0%, var(--primary-red) 100%) !important;
    box-shadow: 0 10px 30px rgba(255, 65, 54, 0.45),
                0 5px 15px rgba(255, 65, 54, 0.3) !important;
    animation: none !important;
}

/* Rounded pill buttons */
.btn-rounded {
    border-radius: 50px !important;
}

/* ========================================
   BUTTON STATES
   ======================================== */

/* Disabled state */
.btn:disabled,
.btn.disabled,
button:disabled,
input[type="submit"]:disabled,
.button:disabled {
    background: #e0e0e0 !important;
    border: none !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Loading state */
.btn-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}

.btn-loading::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    border-top-color: transparent !important;
    animation: button-spinner 0.6s linear infinite !important;
}

/* ========================================
   BUTTON GROUPS & LAYOUTS
   ======================================== */

/* Button groups */
.btn-group {
    display: inline-flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.btn-group .btn {
    margin: 0 !important;
}

/* Button with icon */
.btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 28px !important;
}

.btn-icon i,
.btn-icon svg,
.btn-icon .fa {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes button-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes subtle-pulse {
    0%, 100% { 
        box-shadow: 0 6px 20px rgba(255, 65, 54, 0.35),
                    0 3px 10px rgba(255, 65, 54, 0.2);
    }
    50% { 
        box-shadow: 0 8px 28px rgba(255, 65, 54, 0.45),
                    0 4px 14px rgba(255, 65, 54, 0.3);
    }
}

@keyframes button-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 65, 54, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 65, 54, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 65, 54, 0);
    }
}

.btn-pulse {
    animation: button-pulse 2s infinite !important;
}


/* ========================================
   SPECIAL BUTTON: HEADER SUPPORT BUTTON
   Modern Premium Design with Advanced Effects
   ======================================== */

.slider-button1.rootLink,
.navSection .slider-button1 {
    /* Premium gradient background */
    background: linear-gradient(135deg, #ff4136 0%, #d93026 100%) !important;
    border: none !important;
    color: #ffffff !important;
    
    /* Standardized sizing for header */
    height: 44px !important;
    min-width: 150px !important;
    padding: 0 30px !important;
    line-height: 44px !important;
    
    /* Premium typography */
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    
    /* Display properties */
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    
    /* Premium styling */
    border-radius: 50px !important;
    box-shadow: 0 8px 20px rgba(255, 65, 54, 0.35), 
                0 4px 10px rgba(255, 65, 54, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    
    /* Smooth animation */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    margin: 0 0 0 20px !important;
}

/* Animated shine effect overlay */
.slider-button1.rootLink::before,
.navSection .slider-button1::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -150% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 60%
    ) !important;
    transform: rotate(35deg) !important;
    transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Glow effect on hover */
.slider-button1.rootLink::after,
.navSection .slider-button1::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 50px !important;
    background: radial-gradient(circle at center, rgba(255, 107, 107, 0.3), transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Hover animations */
.slider-button1.rootLink:hover::before,
.navSection .slider-button1:hover::before {
    left: 150% !important;
}

.slider-button1.rootLink:hover::after,
.navSection .slider-button1:hover::after {
    opacity: 1 !important;
}

.slider-button1.rootLink:hover,
.navSection .slider-button1:hover {
    background: linear-gradient(135deg, #ff6b61 0%, #ff4136 50%, #d93026 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(255, 65, 54, 0.5), 
                0 8px 20px rgba(255, 23, 68, 0.4),
                0 0 25px rgba(255, 65, 54, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                inset 0 -2px 8px rgba(196, 18, 48, 0.3) !important;
    transform: translateY(-3px) scale(1.05) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.slider-button1.rootLink:active,
.navSection .slider-button1:active {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(255, 65, 54, 0.45),
                0 3px 10px rgba(255, 65, 54, 0.3) !important;
    transition: all 0.15s ease !important;
    color: #ffffff !important;
}

/* ========================================
   CAROUSEL CONTROL BUTTONS
   Modern rounded buttons matching CTA style - MAXIMUM SPECIFICITY
   ======================================== */

/* Override ALL carousel control styles with high specificity */
#myCarousel .carousel-control,
.carousel.slide .carousel-control,
.carousel-control {
    opacity: 1 !important;
    width: auto !important;
    background: none !important;
    background-image: none !important;
    filter: none !important;
    text-shadow: none !important;
}

#myCarousel .carousel-control.left,
#myCarousel .carousel-control.right,
.carousel.slide .carousel-control.left,
.carousel.slide .carousel-control.right,
.carousel-control.left,
.carousel-control.right {
    background-image: none !important;
    background: transparent !important;
    filter: none !important;
}

/* Main carousel control icons - SMALL ROUND BUTTONS */
#myCarousel .carousel-control .icon-prev,
#myCarousel .carousel-control .icon-next,
.carousel.slide .carousel-control .icon-prev,
.carousel.slide .carousel-control .icon-next,
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #ff4136 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 25px rgba(255, 65, 54, 0.3) !important;
    transition: all 0.3s ease !important;
    font-size: 16px !important;
    line-height: 40px !important;
    margin-top: -20px !important;
    backdrop-filter: blur(10px) !important;
    position: absolute !important;
    top: 50% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#myCarousel .carousel-control .icon-prev:before,
#myCarousel .carousel-control .icon-next:before,
.carousel-control .icon-prev:before,
.carousel-control .icon-next:before {
    color: #ff4136 !important;
    font-weight: bold !important;
    line-height: 40px !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* Hover effects */
#myCarousel .carousel-control:hover .icon-prev,
#myCarousel .carousel-control:hover .icon-next,
.carousel-control:hover .icon-prev,
.carousel-control:hover .icon-next,
.carousel-control:hover .glyphicon-chevron-left,
.carousel-control:hover .glyphicon-chevron-right {
    background: linear-gradient(135deg, #ff4136 0%, #d93026 100%) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 12px 35px rgba(255, 65, 54, 0.5) !important;
    border-color: #ff4136 !important;
}

#myCarousel .carousel-control:hover .icon-prev:before,
#myCarousel .carousel-control:hover .icon-next:before,
.carousel-control:hover .icon-prev:before,
.carousel-control:hover .icon-next:before {
    color: white !important;
}

/* Positioning */
#myCarousel .carousel-control .icon-prev,
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
    left: 30px !important;
    right: auto !important;
}

#myCarousel .carousel-control .icon-next,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
    right: 30px !important;
    left: auto !important;
}

/* ========================================
   FORM SPECIFIC BUTTONS
   Enhanced styling for form submissions
   ======================================== */

form button[type="submit"],
form input[type="submit"],
.submit-btn {
    background: linear-gradient(135deg, var(--primary-red) 0%, #d93026 100%) !important;
    height: 50px !important;
    min-width: 180px !important;
    padding: 0 40px !important;
    line-height: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    box-shadow: 0 4px 16px rgba(255, 65, 54, 0.3),
                0 2px 8px rgba(255, 65, 54, 0.2) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover,
.submit-btn:hover {
    background: linear-gradient(135deg, #ff6b61 0%, var(--primary-red) 100%) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(255, 65, 54, 0.4),
                0 4px 12px rgba(255, 65, 54, 0.3) !important;
}

/* ========================================
   LEARN MORE & SPECIALTY BUTTONS
   For homepage and landing pages
   ======================================== */

.learn-more-btn,
.ask-expert-btn {
    height: 50px !important;
    min-width: 170px !important;
    padding: 0 36px !important;
    line-height: 50px !important;
    background: linear-gradient(135deg, var(--primary-red) 0%, #d93026 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    box-shadow: 0 4px 14px rgba(255, 65, 54, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.35s ease !important;
}

.ask-expert-btn {
    background: transparent !important;
    border: 2px solid var(--primary-red) !important;
    color: var(--primary-red) !important;
    box-shadow: 0 2px 8px rgba(255, 65, 54, 0.15) !important;
}

.learn-more-btn:hover {
    background: linear-gradient(135deg, #ff6b61 0%, var(--primary-red) 100%) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(255, 65, 54, 0.35) !important;
}

.ask-expert-btn:hover {
    background: var(--primary-red) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(255, 65, 54, 0.35) !important;
}

/* ========================================
   RESPONSIVE BUTTON ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Reduce button sizes on mobile */
    .btn,
    .btn-common,
    .slider-button,
    button[type="submit"],
    input[type="submit"] {
        height: 44px !important;
        min-width: 140px !important;
        padding: 0 24px !important;
        line-height: 44px !important;
        font-size: 14px !important;
        letter-spacing: 0.6px !important;
    }
    
    .btn-lg,
    .button-large {
        height: 50px !important;
        min-width: 160px !important;
        padding: 0 32px !important;
        line-height: 50px !important;
        font-size: 15px !important;
    }
    
    .btn-sm,
    .button-small {
        height: 38px !important;
        min-width: 120px !important;
        padding: 0 20px !important;
        line-height: 38px !important;
        font-size: 12px !important;
    }
    
    /* Stack button groups on mobile */
    .btn-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    .btn-group .btn {
        width: 100% !important;
    }
    
    /* Header support button adjustments */
    .slider-button1.rootLink,
    .navSection .slider-button1 {
        height: 40px !important;
        min-width: 130px !important;
        padding: 0 24px !important;
        line-height: 40px !important;
        font-size: 12px !important;
        margin-left: 10px !important;
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .btn,
    .btn-common,
    button[type="submit"] {
        height: 42px !important;
        min-width: 120px !important;
        padding: 0 20px !important;
        line-height: 42px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   Headings & Text
   ======================================== */
h1, h2, h3, h4, h5, h6,
.section-title,
.page-title,
.nav-ico-tx {
    color: var(--primary-navy);
}

/* Links */
a {
    color: var(--primary-navy);
}

a:hover {
    color: var(--primary-red);
}

/* ========================================
   Dropdown Menus
   ======================================== */
.super-mega-menu .nav-item-drop-grd2 a:hover .nav-ico-tx,
.drop-item-tx h5 {
    color: var(--primary-navy);
}

.super-mega-menu .nav-item-drop-grd2 a:hover {
    background-color: var(--light-blue);
}

.super-mega-menu .drop-ico-bg {
    background-color: var(--light-blue);
}

.super-mega-menu .nav-item-drop-grd2 a:hover .drop-ico-bg {
    background-color: var(--light-red);
}

/* ========================================
   Icons & SVG Elements
   ======================================== */
.hover-fillDark {
    fill: var(--primary-navy) !important;
}

.hover-fillLight {
    fill: var(--primary-red) !important;
}

svg path[fill="#3d7ef1"],
svg path[fill="#2671ed"] {
    fill: var(--primary-navy);
}

/* Icon hover states */
.drop:hover svg path.hover-fillDark {
    fill: var(--primary-red) !important;
}

.drop:hover svg path.hover-fillLight {
    fill: var(--accent-maroon) !important;
}

/* ========================================
   Sections & Backgrounds
   ======================================== */
.section-even-odd:nth-child(even) {
    background-color: var(--bg-light);
}

.mega-menu-left-img {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--accent-maroon) 100%);
}

/* ========================================
   Footer
   ======================================== */
footer,
.footer-section,
.globalFooter {
    background-color: var(--primary-navy);
    color: #fff;
}

footer a,
.footer-section a {
    color: #fff;
}

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

/* ========================================
   Form Elements
   ======================================== */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-red);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255, 65, 54, 0.25);
}

/* ========================================
   Animations & Hover Effects
   ======================================== */
.colorize {
    transition: color 0.3s ease;
}

.drop {
    transition: all 0.3s ease;
}

.drop:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 34, 81, 0.15);
}

/* ========================================
   Social Media Icons
   ======================================== */
.fusion-social-network-icon {
    color: var(--primary-navy);
    transition: all 0.3s ease;
}

.fusion-social-network-icon:hover {
    color: var(--primary-red);
    transform: translateY(-3px);
}

/* ========================================
   Cards & Panels
   ======================================== */
.card,
.panel,
.service-box {
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.card:hover,
.panel:hover,
.service-box:hover {
    border-color: var(--primary-red);
    box-shadow: 0 8px 24px rgba(27, 34, 81, 0.12);
}

/* ========================================
   Back to Top Button - Fixed Positioning with Chatbot Space
   ======================================== */
#back-to-top,
.back-to-top {
    /* Fixed positioning - bottom right */
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    z-index: 9999 !important;
    
    /* Modern button styling */
    background: linear-gradient(135deg, var(--primary-red) 0%, #d93026 100%) !important;
    color: #ffffff !important;
    border: none !important;
    
    /* Standardized size - circular button */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    line-height: 50px !important;
    
    /* Circular shape */
    border-radius: 50% !important;
    
    /* Center icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* Premium shadow */
    box-shadow: 0 4px 20px rgba(255, 65, 54, 0.35),
                0 2px 10px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    
    /* Smooth animation */
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    
    /* Icon styling */
    font-size: 18px !important;
    text-decoration: none !important;
}

#back-to-top i,
.back-to-top i,
#back-to-top .fa {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #ffffff !important;
}

#back-to-top:hover,
.back-to-top:hover {
    background: linear-gradient(135deg, #ff6b61 0%, var(--primary-red) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 8px 30px rgba(255, 65, 54, 0.5),
                0 4px 15px rgba(0, 0, 0, 0.2),
                0 0 25px rgba(255, 65, 54, 0.3) !important;
    text-decoration: none !important;
}

#back-to-top:active,
.back-to-top:active {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(255, 65, 54, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   Chatbot Button Positioning
   ======================================== */
.chatbot-button,
#chatbot-trigger {
    /* Fixed positioning - bottom right, below back-to-top */
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9998 !important;
    
    /* Modern button styling */
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0f1640 100%) !important;
    color: #ffffff !important;
    border: none !important;
    
    /* Standardized size - circular button */
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    padding: 0 !important;
    line-height: 60px !important;
    
    /* Circular shape */
    border-radius: 50% !important;
    
    /* Center icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* Premium shadow with pulse animation */
    box-shadow: 0 4px 20px rgba(27, 34, 81, 0.35),
                0 2px 10px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    
    /* Smooth animation */
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    
    /* Subtle pulse animation */
    animation: chatbot-pulse 2.5s ease-in-out infinite !important;
}

.chatbot-button:hover,
#chatbot-trigger:hover {
    background: linear-gradient(135deg, #2a3670 0%, var(--primary-navy) 100%) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 30px rgba(27, 34, 81, 0.5),
                0 4px 15px rgba(0, 0, 0, 0.2),
                0 0 25px rgba(27, 34, 81, 0.3) !important;
    animation: none !important;
}

/* Chatbot pulse animation */
@keyframes chatbot-pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(27, 34, 81, 0.35),
                    0 2px 10px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 4px 25px rgba(27, 34, 81, 0.45),
                    0 2px 12px rgba(0, 0, 0, 0.2),
                    0 0 20px rgba(27, 34, 81, 0.25);
    }
}

/* Responsive adjustments for back-to-top and chatbot */
@media (max-width: 768px) {
    #back-to-top,
    .back-to-top {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        line-height: 45px !important;
        bottom: 90px !important;
        right: 20px !important;
        font-size: 16px !important;
    }
    
    #back-to-top i,
    .back-to-top i {
        font-size: 16px !important;
    }
    
    .chatbot-button,
    #chatbot-trigger {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
        line-height: 55px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

@media (max-width: 480px) {
    #back-to-top,
    .back-to-top {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        line-height: 42px !important;
        bottom: 80px !important;
        right: 15px !important;
        font-size: 14px !important;
    }
    
    #back-to-top i,
    .back-to-top i {
        font-size: 14px !important;
    }
    
    .chatbot-button,
    #chatbot-trigger {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        line-height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
    }
}

/* ========================================
   Slider & Carousel
   ======================================== */
.carousel-indicators .active {
    background-color: var(--primary-red);
}

.carousel-control-prev,
.carousel-control-next {
    color: var(--primary-red);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    color: var(--accent-maroon);
}

/* ========================================
   Responsive Utilities
   ======================================== */
/* Handled in button section above for proper button responsiveness */

/* Additional responsive utilities for general layout */
@media (max-width: 992px) {
    .btn-group {
        justify-content: center !important;
    }
}

@media (max-width: 576px) {
    /* Force full width buttons on extra small screens if needed */
    .btn-mobile-block {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* ========================================
   Support Button (Header)
   ======================================== */
/* Handled in Buttons section above */

/* ========================================
   Dropdown Content Styling
   ======================================== */
.dropdownBackground {
    border: 1px solid rgba(27, 34, 81, 0.1);
}

.dropdownContent {
    color: var(--text-dark);
}

/* ========================================
   Mobile Menu
   ======================================== */
.fat-nav {
    background-color: var(--primary-navy);
}

.fat-nav a {
    color: #fff;
}

.fat-nav a:hover {
    color: var(--primary-red);
}

/* ========================================
   Breadcrumbs & Navigation Items
   ======================================== */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item.active {
    color: var(--primary-red);
}

.breadcrumb-item a {
    color: var(--primary-navy);
}

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

/* ========================================
   Loading & Loader
   ======================================== */
.custom-ajax_loader {
    background: rgba(27, 34, 81, 0.9);
}

/* ========================================
   Text Selection
   ======================================== */
::selection {
    background-color: var(--primary-red);
    color: #fff;
}

::-moz-selection {
    background-color: var(--primary-red);
    color: #fff;
}

/* ========================================
   Scrollbar Styling (Webkit)
   ======================================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-navy);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-red);
}
/* ========================================
   TESTIMONIALS SECTION - MODERN CARDS
   ======================================== */

/* Testimonials section background decorations animation */
#testimonials-section {
    position: relative;
    overflow: visible !important;
    padding: 100px 0 140px !important;
    min-height: 700px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

#testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 65, 54, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(27, 34, 81, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

#testimonials-section .container {
    overflow: visible !important;
}

#testimonials-carousel {
    overflow: visible !important;
    padding-bottom: 80px !important;
    min-height: 400px !important;
}

#testimonials-carousel .carousel-inner {
    overflow: visible !important;
    min-height: 350px;
}

#testimonials-carousel .carousel-indicators {
    bottom: -60px !important;
    position: absolute !important;
    z-index: 15;
}

.testimonial-card {
    margin-bottom: 40px !important;
    min-height: 300px;
    position: relative;
}

#testimonials-section h1 {
    position: relative;
    display: inline-block;
}

#testimonials-section h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #ff4136, #1B2251);
    border-radius: 2px;
    animation: underline-expand 2s ease-in-out infinite;
}

@keyframes underline-expand {
    0%, 100% {
        width: 80px;
        opacity: 1;
    }
    50% {
        width: 100px;
        opacity: 0.8;
    }
}


/* Section header icon pulse animation */
@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(255, 65, 54, 0.3);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 15px 40px rgba(255, 65, 54, 0.5);
    }
}

#testimonials-section .wow > div:first-child {
    animation: pulse-icon 2.5s ease-in-out infinite;
}

/* Testimonial carousel indicators styling */
#testimonials-carousel .carousel-indicators li {
    background: var(--primary-red) !important;
    border: 2px solid var(--primary-red) !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 5px !important;
    border-radius: 50% !important;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

#testimonials-carousel .carousel-indicators li:hover {
    opacity: 0.7;
    transform: scale(1.15);
}

#testimonials-carousel .carousel-indicators li.active {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(255, 65, 54, 0.2);
}

/* Testimonial card hover effect */
.testimonial-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    background: white !important;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    right: 100%;
    height: 5px;
    background: linear-gradient(90deg, #ff4136 0%, #1B2251 50%, #ff4136 100%);
    transition: all 0.6s ease;
    z-index: 10;
}

.testimonial-card:hover::before {
    left: 0;
    right: 0;
}

.testimonial-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 25px 70px rgba(0,0,0,0.18) !important;
}

/* Testimonial text styling */
.testimonial-card p {
    position: relative;
    z-index: 1;
}

/* Star rating animation */
.star-rating {
    display: inline-flex;
    gap: 5px;
    margin-bottom: 25px;
}

.star-rating i {
    color: #FFC107;
    font-size: 18px;
    animation: star-twinkle 3s ease-in-out infinite;
}

.star-rating i:nth-child(1) {
    animation-delay: 0s;
}

.star-rating i:nth-child(2) {
    animation-delay: 0.2s;
}

.star-rating i:nth-child(3) {
    animation-delay: 0.4s;
}

.star-rating i:nth-child(4) {
    animation-delay: 0.6s;
}

.star-rating i:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes star-twinkle {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.testimonial-card:hover .star-rating i {
    animation: star-bounce 0.6s ease-in-out;
}

@keyframes star-bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.1);
    }
}

/* Navigation controls hover effect */
.carousel-control:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(27, 34, 81, 0.5) !important;
}

/* Verified badge styling */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    border-radius: 20px;
    font-size: 13px;
    color: #2E7D32;
    font-weight: 600;
    margin-top: 15px;
}

.verified-badge i {
    color: #4CAF50;
    font-size: 16px;
}

/* Quote icon enhancement */
.testimonial-card > div:first-child {
    animation: quote-float 3s ease-in-out infinite;
}

@keyframes quote-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-3px) rotate(3deg);
    }
}

/* Testimonial author name effect */
.testimonial-card h4 {
    transition: color 0.3s ease;
}

.testimonial-card:hover h4 {
    color: #ff4136 !important;
}

/* Call to action buttons group */
.btn-group {
    display: inline-flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-secondary {
    background: transparent;
    color: #1B2251;
    border: 2px solid #1B2251;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #1B2251;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(27, 34, 81, 0.3);
}

/* Responsive improvements */
@media (max-width: 768px) {
    #testimonials-section {
        padding: 60px 0 100px !important;
    }
    
    .testimonial-card {
        padding: 40px 25px !important;
        margin-bottom: 50px !important;
    }
    
    #testimonials-section h1 {
        font-size: 32px !important;
    }
    
    .carousel-control {
        display: none !important;
    }
    
    #testimonials-carousel .carousel-indicators {
        bottom: -50px !important;
    }
}

/* Quote decorative background */
.testimonial-card p::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120px;
    color: rgba(255, 65, 54, 0.05);
    font-family: Georgia, serif;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

/* Quote icon animation on hover */
.testimonial-card:hover .fa-quote-left {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.testimonial-card .fa-quote-left {
    transition: transform 0.3s ease;
}

/* Star rating styling */
.star-rating {
    text-align: center;
    margin-bottom: 25px;
    font-size: 20px;
    color: #fbbf24;
}

.testimonial-card .fa-star {
    color: #fbbf24;
    margin: 0 3px;
    font-size: 18px;
    transition: all 0.2s ease;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.testimonial-card:hover .fa-star {
    color: #f59e0b;
    transform: scale(1.1);
    text-shadow: 0 3px 8px rgba(245, 158, 11, 0.5);
}

@keyframes star-shine {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.testimonial-card .fa-star:nth-child(1) {
    animation: star-shine 2s ease-in-out infinite;
}

.testimonial-card .fa-star:nth-child(2) {
    animation: star-shine 2s ease-in-out 0.2s infinite;
}

.testimonial-card .fa-star:nth-child(3) {
    animation: star-shine 2s ease-in-out 0.4s infinite;
}

.testimonial-card .fa-star:nth-child(4) {
    animation: star-shine 2s ease-in-out 0.6s infinite;
}

.testimonial-card .fa-star:nth-child(5) {
    animation: star-shine 2s ease-in-out 0.8s infinite;
}

/* Navigation controls hover effects */

/* ========================================
   CLIENT SECTION - MODERN DESIGN
   ======================================== */

/* Client section animations */
@keyframes client-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 12px 35px rgba(255, 65, 54, 0.35);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 18px 50px rgba(255, 65, 54, 0.5);
    }
}

#client {
    position: relative;
    overflow: hidden;
}

/* Client logo cards enhancement */
#client .team-single-wrapper {
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#client .team-single {
    background: white;
    padding: 35px 25px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#client .team-single::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ff4136 0%, #1B2251 100%);
    transition: left 0.5s ease;
}

#client .team-single:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 65, 54, 0.3);
}

#client .team-single:hover::before {
    left: 0;
}

#client .person-thumb {
    transition: all 0.4s ease;
    padding: 15px;
}

#client .person-thumb img {
    transition: all 0.4s ease;
    filter: grayscale(0%);
    opacity: 0.85;
    max-height: 100px;
    width: auto !important;
    object-fit: contain;
}

#client .team-single:hover .person-thumb img {
    transform: scale(1.1);
    filter: grayscale(0%);
    opacity: 1;
}

#client .person-info {
    padding-top: 20px;
    border-top: 2px solid #f5f5f5;
    margin-top: 20px;
    transition: all 0.3s ease;
}

#client .person-info h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1B2251;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

#client .team-single:hover .person-info h2 {
    color: #ff4136;
}

/* Carousel controls styling for client section */
#team-carousel .carousel-control {
    background: linear-gradient(135deg, #1B2251 0%, #0f1640 100%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(27, 34, 81, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
}

#team-carousel .carousel-control.left {
    left: -25px;
}

#team-carousel .carousel-control.right {
    right: -25px;
}

#team-carousel .carousel-control:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 30px rgba(27, 34, 81, 0.5);
}

#team-carousel .carousel-control .fa {
    font-size: 20px;
    color: white;
}

/* Carousel indicators for clients */
#team-carousel .carousel-indicators {
    bottom: -50px;
}

#team-carousel .carousel-indicators li {
    background: #ff4136;
    border: 2px solid #ff4136;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    opacity: 0.4;
    transition: all 0.3s ease;
}

#team-carousel .carousel-indicators li.active,
#team-carousel .carousel-indicators li:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* Add badge for featured clients */
#client .featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff4136 0%, #d93026 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

#client .team-single:hover .featured-badge {
    opacity: 1;
    transform: scale(1);
}

/* Grid animation on load */
#client .team-single-wrapper {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

#client .team-single-wrapper:nth-child(1) {
    animation-delay: 0.1s;
}

#client .team-single-wrapper:nth-child(2) {
    animation-delay: 0.2s;
}

#client .team-single-wrapper:nth-child(3) {
    animation-delay: 0.3s;
}

#client .team-single-wrapper:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design for client section */
@media (max-width: 768px) {
    #client {
        padding: 60px 0 !important;
    }
    
    #client .team-single {
        padding: 25px 20px;
        min-height: 180px;
    }
    
    #client .person-thumb img {
        max-height: 80px;
    }
    
    #team-carousel .carousel-control {
        display: none;
    }
}
#testimonials-carousel .carousel-control {
    transition: all 0.3s ease !important;
}

#testimonials-carousel .carousel-control:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

#testimonials-carousel .carousel-control .fa {
    transition: all 0.3s ease;
}

#testimonials-carousel .carousel-control:hover .fa {
    transform: scale(1.2);
}

/* Carousel smooth transitions */
#testimonials-carousel .carousel-inner .item {
    transition: all 0.6s ease-in-out;
}

/* Fade-in animation for carousel content */
@keyframes fadeInContent {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#testimonials-carousel .item.active .testimonial-card {
    animation: fadeInContent 0.8s ease-out;
}

/* CTA section at bottom of testimonials */
#testimonials-section .btn-group {
    display: inline-flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

#testimonials-section .btn-group .btn-common,
#testimonials-section .btn-group .btn-secondary {
    margin: 5px;
}

/* Client name and company styling */
.testimonial-card h4 {
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
}

.testimonial-card h4::after {
    content: '\f058';
    font-family: FontAwesome;
    color: #22c55e;
    font-size: 14px;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.testimonial-card:hover h4::after {
    opacity: 1;
    transform: scale(1);
}

.testimonial-card:hover h4 {
    color: var(--primary-red) !important;
}

.testimonial-card > div:last-child {
    position: relative;
    background: linear-gradient(to right, rgba(27, 34, 81, 0.02), transparent, rgba(255, 65, 54, 0.02));
    margin: 0 -10px -10px -10px;
    padding: 20px 10px 10px 10px !important;
    border-radius: 0 0 20px 20px;
}

/* Responsive adjustments for testimonials */
@media (max-width: 992px) {
    #testimonials-carousel .carousel-control.left {
        left: -50px !important;
    }
    
    #testimonials-carousel .carousel-control.right {
        right: -50px !important;
    }
}

@media (max-width: 768px) {
    #testimonials-section {
        padding: 50px 0 !important;
    }
    
    #testimonials-section h1 {
        font-size: 32px !important;
    }
    
    #testimonials-section p {
        font-size: 16px !important;
    }
    
    .testimonial-card {
        padding: 40px 30px !important;
        margin-bottom: 40px !important;
    }
    
    .testimonial-card p {
        font-size: 15px !important;
    }
    
    #testimonials-carousel .carousel-control {
        display: none !important;
    }
    
    #testimonials-carousel .carousel-indicators {
        bottom: -40px !important;
    }
    
    .star-rating {
        margin-bottom: 20px;
    }
    
    .star-rating .fa-star {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    #testimonials-section {
        padding: 40px 0 !important;
    }
    
    #testimonials-section h1 {
        font-size: 28px !important;
    }
    
    .testimonial-card {
        padding: 30px 20px !important;
    }
    
    .testimonial-card p {
        font-size: 14px !important;
    }
    
    .testimonial-card h4 {
        font-size: 16px !important;
    }
    
    .star-rating {
        margin-bottom: 15px;
    }
    
    .star-rating .fa-star {
        font-size: 14px;
        margin: 0 2px;
    }
}

/* Print styles for testimonials */
@media print {
    #testimonials-carousel .carousel-control,
    #testimonials-carousel .carousel-indicators {
        display: none !important;
    }
    
    .testimonial-card {
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}

/* ========================================
   FEATURES SECTION - MODERN DESIGN
   ======================================== */

/* Features section animations */
@keyframes feature-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(255, 65, 54, 0.35);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(255, 65, 54, 0.5);
    }
}

#features {
    position: relative;
}

/* Feature image wrapper hover effects */
.feature-image-wrapper {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-image-wrapper:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25) !important;
}

.feature-image-wrapper img {
    transition: all 0.4s ease;
}

.feature-image-wrapper:hover img {
    transform: scale(1.05);
}

/* Features section icon boxes */
#features .single-features > div > div > div:first-child {
    transition: all 0.3s ease;
}

#features .single-features > div > div > div:first-child:hover {
    transform: rotate(5deg) scale(1.1);
}

/* Features list checkmarks animation */
#features ul li {
    transition: all 0.3s ease;
}

#features ul li:hover {
    padding-left: 10px;
    background: rgba(255, 65, 54, 0.02);
    border-radius: 8px;
}

#features ul li i {
    transition: all 0.3s ease;
}

#features ul li:hover i {
    transform: scale(1.2);
}

/* Response time badges animation */
#features .single-features > div > div > div:last-child > div {
    transition: all 0.3s ease;
    cursor: default;
}

#features .single-features > div > div > div:last-child > div:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Quality commitment quote box */
#features .single-features > div > div > div:last-child {
    transition: all 0.3s ease;
}

#features .single-features > div > div > div:last-child:hover {
    transform: translateX(5px);
}

/* Badge hover effects */
#features span {
    transition: all 0.3s ease;
    cursor: pointer;
}

#features span:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Responsive design for features */
@media (max-width: 992px) {
    #features {
        padding: 60px 0 !important;
    }
    
    #features .single-features {
        flex-direction: column !important;
        margin-bottom: 50px !important;
    }
    
    #features .single-features > div {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
    }
    
    #features .single-features > div:first-child {
        margin-bottom: 30px !important;
    }
    
    #features h2 {
        font-size: 26px !important;
    }
    
    #features .single-features > div > div > div:last-child > div {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    #features h2 {
        font-size: 24px !important;
    }
    
    #features p {
        font-size: 15px !important;
    }
    
    .feature-image-wrapper > div:first-child {
        font-size: 12px !important;
        padding: 8px 15px !important;
    }
}

/* ==========================================
   PRODUCTS PAGE ENHANCEMENTS
   ========================================== */

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

/* Product card hover effects */
.single-service {
    transition: all 0.4s ease !important;
}

.single-service:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    border-color: #ff4136 !important;
}

/* Gradient top bar slide animation */
.single-service:hover > div:first-child {
    left: 0 !important;
}

/* Product title hover */
.single-service h2 {
    transition: color 0.3s ease;
}

.single-service:hover h2 {
    color: #ff4136 !important;
}

/* Product image zoom on hover */
.single-service img {
    transition: transform 0.4s ease;
    display: block;
    max-width: 100%;
}

.single-service:hover img {
    transform: scale(1.08);
}

/* Learn More button hover */
.single-service a[href$=".php"]:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 20px rgba(255, 65, 54, 0.4) !important;
}

/* Badge styles for products */
.product-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    animation: badge-appear 0.5s ease;
}

.badge-popular {
    background: linear-gradient(135deg, #ff4136 0%, #d93026 100%);
    box-shadow: 0 5px 15px rgba(255, 65, 54, 0.3);
}

.badge-featured {
    background: linear-gradient(135deg, #1B2251 0%, #0f1635 100%);
    box-shadow: 0 5px 15px rgba(27, 34, 81, 0.3);
}

@keyframes badge-appear {
    0% { 
        opacity: 0;
        transform: translateY(-10px) scale(0.8);
    }
    100% { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Product section responsive */
@media (max-width: 768px) {
    .single-service {
        margin-bottom: 30px;
    }
    
    .single-service h2 {
        font-size: 22px !important;
    }
    
    .product-badge {
        top: 15px;
        right: 15px;
        padding: 6px 12px;
        font-size: 11px;
    }
}