/*==============================================================================
    PITRAD IBAMBA - MASTER STYLESHEET
    Brand Colors: #1d4078 (blue), #f05323 (orange)
==============================================================================*/

/*------------------------------------*\
    #MASTER TABLE OF CONTENTS
\*------------------------------------*/

/*
    #1.  ROOT VARIABLES & GLOBAL SETTINGS
    #2.  ANIMATIONS & KEYFRAMES
    #3.  BUTTON & LINK STYLES
    #4.  FORM ELEMENTS & INPUT STYLES
    #5.  BREADCRUMB STYLES
    #6.  PAGE TITLE STYLES
    #7.  HEADER & NAVIGATION STYLES
        - 7.1 Top Bar
        - 7.2 Main Header
        - 7.3 Mega Menu
        - 7.4 Mobile Menu
    #8.  HERO SLIDER STYLES
    #9.  SECTION HEADERS & COMMON COMPONENTS
    #10. HERO/COMPANY OVERVIEW SECTIONS
    #11. LOGISTICS PAGE STYLES
    #12. CORPORATE RESPONSIBILITY PAGE STYLES
    #13. CAREERS PAGE STYLES
    #14. REQUEST QUOTE PAGE STYLES
    #15. BLOG & NEWS PAGES STYLES
        - 15.1 Blog Grid
        - 15.2 Blog Single
    #16. PROJECTS PAGES STYLES
        - 16.1 Projects Grid
        - 16.2 Project Single
    #17. CORE SERVICES PAGES STYLES
        - 17.1 Services Grid
        - 17.2 Service Detail
    #18. CONTACT PAGE STYLES
        - 18.1 Map Section
        - 18.2 Contact Info
        - 18.3 Contact Form
        - 18.4 FAQ Section
    #19. FOOTER STYLES
    #20. UTILITY CLASSES & HELPER STYLES
*/

/*------------------------------------*\
    #1. ROOT VARIABLES & GLOBAL SETTINGS
\*------------------------------------*/

:root {
    /* Primary Brand Colors */
    --primary-blue: #1d4078;
    --primary-blue-light: #2a5298;
    --primary-blue-dark: #15315c;
    --primary-orange: #f05323;
    --primary-orange-light: #ff6b3d;

    --global--color-primary   : #F05323;
    --global--color-primary-90: rgba(50, 195, 108, 0.9);
    --global--color-primary-70: rgba(109, 190, 199, 0.7);
    --global--color-heading   : #212529;
    --global--color-secondary : #1B4279;
    --global--color-body      : #666666;
    --global--color-white     : #ffffff;
    --global--color-white-90  : rgba(255, 255, 255, 0.9);
    --global--color-gray      : #f9f9f9;
    --global--font-body       : 'Inter',sans-serif;
    --global--font-heading    : 'Inter', sans-serif;
    --global--font-secondary  : 'Inter', sans-serif;

    /* Dark overlays */
    --dark-1: rgba(27, 26, 26, 0.1);
    --dark-2: rgba(27, 26, 26, 0.5);
    --dark-3: rgba(27, 26, 26, 0.8);

    /* Theme colors */
    --theme-primary: #1B4279;
    --theme-primary-rgb: 27, 66, 121;
    --theme-secondary: #32c36c;

    /* White overlays */
    --white: #ffffff;
    --off-white: #F6F7F8;

    /* Grayscale */
    --gray-dark: #474747;
    --gray-light: #6c757d;
    --gray-soft: #929ba2;
    --gray-bg: #f8f9fa;

    /* Gradients */
    --gradient-primary: linear-gradient(179deg, #1d4078 0.46%, #15315c 87.03%);
    --gradient-accent: linear-gradient(135deg, #f05323 0%, #ff6b3d 100%);
    --gradient-blue: linear-gradient(135deg, #1d4078 0%, #2a5298 100%);

    /* Shadows */
    --shadow-sm: 0 5px 20px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-orange: 0 10px 30px rgba(240, 83, 35, 0.2);

    /* Border Radius */
    --border-radius: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* Global Typography & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*------------------------------------*\
    #RESET
\*------------------------------------*/
*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
a,
dl,
dt,
dd,
ol,
ul,
li {
    list-style: none;
    margin    : 0;
    padding   : 0;
}

*,
:active,
:focus {
    outline: none !important;
}

ul,
ol {
    list-style: none;
    margin    : 0;
    padding   : 0;
}

textarea {
    resize: none;
}

::-moz-selection {
    text-shadow: none;
}

::selection {
    text-shadow: none;
}

::-moz-selection {
    text-shadow: none;
}

::-webkit-selection {
    text-shadow: none;
}

.form-control {
    -webkit-box-shadow: none;
    box-shadow        : none;
}

button {
    background-color  : transparent;
    -webkit-box-shadow: none;
    box-shadow        : none;
    border            : none;
    outline           : none;
    padding           : 0;
}

textarea {
    resize: none;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6rem;
    color: var(--gray-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.3;
    margin-top: 0;
}

/* Links */
a {
    text-decoration: none;
    transition: var(--transition);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container adjustments */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-white { color: white !important; }
.text-orange { color: var(--primary-orange) !important; }
.text-blue { color: var(--primary-blue) !important; }

.bg-white { background: white; }
.bg-light { background: var(--gray-bg); }
.bg-primary { background: var(--gradient-primary) !important; }
.bg-accent { background: var(--gradient-accent) !important; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 2.5rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }

.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-5 { padding: 2.5rem !important; }

/* Order classes */
.order-0 { order: 0; }
.order-1 { order: 1; }

@media (min-width: 992px) {
    .order-lg-2 { order: 2 !important; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/*------------------------------------*\
    #2. ANIMATIONS & KEYFRAMES
    Reusable animations across all pages
\*------------------------------------*/

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Slide Animations */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(15%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideContentIn {
    from {
        opacity: 0;
        transform: translateY(40px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Title Animation */
@keyframes titleFloat {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse Animations */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    70% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

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

@keyframes pulseCta {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

/* Rotate Animations */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bounce Animation */
@keyframes modernBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translate3d(-50%, 0, 0) translateZ(0);
    }
    40% {
        transform: translate3d(-50%, -12px, 0) translateZ(0);
    }
    60% {
        transform: translate3d(-50%, -6px, 0) translateZ(0);
    }
}

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

@keyframes floatShape {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(5%, -5%) scale(1.1); }
    66% { transform: translate(-5%, 5%) scale(0.9); }
}

/* Shimmer Animation */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Pattern Move Animation */
@keyframes patternMove {
    from { transform: translateX(0) translateY(0); }
    to { transform: translateX(50px) translateY(50px); }
}

/* Spin Animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scroll Partner Animation */
@keyframes scrollPartners {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* AOS Scroll Animation Classes */
[data-aos] {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0, 0);
}

[data-aos="fade-up"] {
    transform: translateY(50px);
}

[data-aos="fade-down"] {
    transform: translateY(-50px);
}

[data-aos="fade-left"] {
    transform: translateX(50px);
}

[data-aos="fade-right"] {
    transform: translateX(-50px);
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
}

/*------------------------------------*\
    #3. BUTTON & LINK STYLES
    Reusable button and link components
\*------------------------------------*/

/* Base Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    width: fit-content;
    position: relative;
    overflow: hidden;
    line-height: 1;
    justify-content: center;
}

.btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn:hover i {
    transform: translateX(5px);
}

/* Primary Button */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(29, 64, 120, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(29, 64, 120, 0.4);
}

/* Secondary Button */
.btn-secondary {
    background: rgba(29, 64, 120, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-secondary:hover {
    background: rgba(240, 83, 35, 0.3);
    transform: translateY(-3px);
    border-color: var(--primary-orange);
}

.btn--secondary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn--secondary:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.btn--secondary i {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: var(--primary-blue);
    font-size: 12px;
    transition: var(--transition);
}

.btn--secondary:hover i {
    background-color: var(--primary-blue);
    color: white;
    transform: translateX(5px);
}

/* Bordered Button */
.btn-bordered,
.btn--bordered {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.btn-bordered:hover,
.btn--bordered:hover {
    background: var(--gradient-accent);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.btn--bordered.btn--white {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.btn--bordered.btn--white:hover {
    background: var(--primary-blue);
    color: white;
}

/* Outline Button */
.btn-outline {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-outline:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-3px);
}

/* White Button */
.btn-white,
.btn--white {
    background: white;
    color: var(--primary-orange);
    box-shadow: var(--shadow-md);
}

.btn-white:hover,
.btn--white:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

/* CTA Button */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 45px;
    background: white;
    color: var(--primary-orange);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    border-radius: 60px;
    transition: var(--transition);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(240, 83, 35, 0.1), transparent);
    transition: left 0.6s ease;
}

.cta-btn:hover::before {
    left: 100%;
}

.cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    gap: 20px;
    color: var(--primary-blue);
}

.cta-btn i {
    transition: var(--transition);
}

.cta-btn:hover i {
    transform: translateX(8px);
}

/* Mega Menu Read More Link */
.mega-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.mega-read-more:hover {
    gap: 12px;
    color: var(--primary-orange-light);
}

/* Career Button */
.career-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-orange);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: var(--transition);
    padding: 10px 0;
    width: fit-content;
    border-bottom: 2px solid transparent;
}

.career-more i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.career-more:hover {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-orange);
}

.career-more:hover i {
    transform: translateX(5px);
}

/* Featured Link */
.featured-link {
    color: var(--primary-orange);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    padding: 5px 0;
    border-bottom: 2px solid transparent;
}

.featured-link:hover {
    gap: 12px;
    color: var(--primary-blue);
    border-bottom-color: var(--primary-orange);
}

.featured-link i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.featured-link:hover i {
    transform: translateX(5px);
}

/* Load More Button */
#load-more {
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 40px;
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
}

#load-more:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

#load-more i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

#load-more:hover i {
    transform: translateX(5px);
}

#load-more .spinner-border {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

/* More Tools Link */
.more-tools a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
    text-transform: capitalize;
    padding: 12px 30px;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    border-radius: 50px;
    border: 1px solid rgba(240, 83, 35, 0.2);
}

.more-tools a i {
    color: var(--primary-orange);
    transition: var(--transition);
}

.more-tools a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: transparent;
}

.more-tools a:hover i {
    color: white;
    transform: translateX(5px);
}

/* Back to Top Button */
.back-top,
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--primary-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
    z-index: var(--z-toast);
    opacity: 0;
    visibility: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.back-top.visible,
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    animation: fadeInUp 0.3s ease forwards;
}

.back-top:hover,
.back-to-top:hover {
    background: var(--primary-orange-light);
    transform: translateY(-5px);
    box-shadow: var(--shadow-orange);
}


/*------------------------------------*\
    #BUTTONS (Additional)
\*------------------------------------*/
.btn.no-shadow {
    -webkit-box-shadow: none;
    box-shadow        : none;
}

/* Button Primary Variations */
.btn--primary.btn--inversed::before {
    background-color: var(--global--color-white);
}

.btn--primary.btn--inversed i {
    color: var(--global--color-white);
}

.btn--primary.btn--inversed:active,
.btn--primary.btn--inversed:focus,
.btn--primary.btn--inversed:hover {
    color: var(--global--color-heading);
}

.btn--primary.btn--inversed:active i,
.btn--primary.btn--inversed:focus i,
.btn--primary.btn--inversed:hover i {
    color: var(--global--color-heading);
}

/* Button Secondary Variations*/
.btn--secondary.btn--inversed::before {
    background-color: var(--global--color-secondary);
}

.btn--secondary.btn--inversed:active,
.btn--secondary.btn--inversed:focus,
.btn--secondary.btn--inversed:hover {
    color: var(--global--color-white);
}

/* Button Transparent */
.btn--transparent {
    background-color           : transparent;
    color                      : var(--global--color-white);
    border                     : 2px solid var(--global--color-primary);
    -webkit-transition-property: background, color, border-color;
    -o-transition-property     : background, color, border-color;
    transition-property        : background, color, border-color;
}

.btn--transparent::before {
    background-color: var(--global--color-primary);
}

.btn--transparent:active,
.btn--transparent:focus,
.btn--transparent:hover {
    color       : var(--global--color-white);
    border-color: var(--global--color-primary);
}

.btn--transparent.btn--inversed::before {
    background-color: var(--global--color-secondary);
}

.btn--transparent.btn--inversed:active,
.btn--transparent.btn--inversed:focus,
.btn--transparent.btn--inversed:hover {
    color       : var(--global--color-white);
    border-color: var(--global--color-secondary);
}

/* Buttons Shadow */
.btn-shadow {
    -webkit-box-shadow: 0px 9px 30px 0px rgba(40, 40, 40, 0.15);
    box-shadow        : 0px 9px 30px 0px rgba(40, 40, 40, 0.15);
}

.btn-shadow-hover:hover,
.btn-shadow-hover:active,
.btn-shadow-hover:focus {
    -webkit-box-shadow: 0px 9px 30px 0px rgba(40, 40, 40, 0.15);
    box-shadow        : 0px 9px 30px 0px rgba(40, 40, 40, 0.15);
}

/* Button Bordered Variations */
.btn--bordered.btn--primary {
    color       : var(--global--color-primary);
    border-color: var(--global--color-primary);
}

.btn--bordered.btn--primary::before {
    background-color: var(--global--color-primary);
}

.btn--bordered.btn--primary:active,
.btn--bordered.btn--primary:focus,
.btn--bordered.btn--primary:hover {
    color       : var(--global--color-white);
    border-color: var(--global--color-primary);
}

.btn--bordered.btn--secondary {
    color       : var(--global--color-secondary);
    border-color: var(--global--color-secondary);
}

.btn--bordered.btn--secondary::before {
    background-color: var(--global--color-secondary);
}

.btn--bordered.btn--secondary:active,
.btn--bordered.btn--secondary:focus,
.btn--bordered.btn--secondary:hover {
    color       : var(--global--color-white);
    border-color: var(--global--color-secondary);
}

.btn--bordered.btn--white {
    color       : var(--global--color-white);
    border-color: var(--global--color-white);
}

.btn--bordered.btn--white::before {
    background-color: var(--global--color-white);
}

.btn--bordered.btn--white i {
    color: var(--global--color-white);
}

.btn--bordered.btn--white:active,
.btn--bordered.btn--white:focus,
.btn--bordered.btn--white:hover {
    color       : var(--global--color-primary);
    border-color: var(--global--color-white);
}

.btn--bordered.btn--white:active i,
.btn--bordered.btn--white:focus i,
.btn--bordered.btn--white:hover i {
    color: var(--global--color-primary);
}

/* Video Button */
.btn-video {
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    width             : 170px;
    height            : 96px;
    padding           : 0 30px;
    border-radius     : 32px 32px 0 32px;
    background-color  : #435ba1;
    color             : var(--global--color-white);
    -webkit-transition: 300ms ease-in-out;
    -o-transition     : 300ms ease-in-out;
    transition        : 300ms ease-in-out;
    cursor            : pointer;
    position          : relative;
}

.btn-video i {
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -ms-flex-negative : 0;
    flex-shrink       : 0;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    width             : 54px;
    height            : 36px;
    background-color  : var(--global--color-white);
    z-index           : 5;
    color             : var(--global--color-heading);
    font-size         : 16px;
    -webkit-box-shadow: 2.121px 2.121px 6px 0px rgba(3, 21, 50, 0.05);
    box-shadow        : 2.121px 2.121px 6px 0px rgba(3, 21, 50, 0.05);
    border-radius     : 8px;
    -webkit-transition: 300ms ease-in-out;
    -o-transition     : 300ms ease-in-out;
    transition        : 300ms ease-in-out;
    margin-right      : 15px;
}

.btn-video span {
    font-family   : var(--global--font-body);
    font-weight   : 700;
    font-size     : 15px;
    line-height   : 21px;
    text-transform: capitalize;
    color         : var(--global--color-white);
}

.btn-video.btn-video-2 {
    border-radius   : 0;
    background-color: transparent;
    padding         : 0;
    width           : auto;
    height          : auto;
}

.btn-video.btn-video-2 i {
    position        : relative;
    display         : -webkit-inline-box;
    display         : -ms-inline-flexbox;
    display         : inline-flex;
    width           : 88px;
    height          : 88px;
    padding         : 0;
    border-radius   : 50%;
    background-color: var(--global--color-white);
    margin-right    : 0;
    color           : var(--global--color-heading);
}

.btn-video.btn-video-2 i::after {
    content          : '';
    height           : 100%;
    width            : 100%;
    position         : absolute;
    top              : 0;
    left             : 0;
    right            : 0;
    border           : 2px solid rgba(255, 255, 255, 0.5);
    border-radius    : 100%;
    -webkit-transform: scale(1);
    -ms-transform    : scale(1);
    transform        : scale(1);
    opacity          : 1;
    -webkit-animation: pulse 0.8s ease-out 0s infinite;
    animation        : pulse 0.8s ease-out 0s infinite;
    z-index          : -1;
}

.btn-video.btn-video-2:hover i {
    background-color: var(--global--color-primary);
    color           : var(--global--color-white);
}





/*------------------------------------*\
    #4. FORM ELEMENTS & INPUT STYLES
    Reusable form components
\*------------------------------------*/

/* Form Base Styles */
.form-control {
    width: 100%;
    height: 55px;
    padding: 0 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: var(--transition);
    background: #f9f9f9;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-orange);
    background: white;
    box-shadow: var(--shadow-orange);
}

textarea.form-control {
    height: 130px;
    padding: 15px 20px;
    resize: vertical;
}

/* Form Labels */
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

/* Select Input */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d4078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}

/* Radio & Checkbox Groups */
.custom-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.custom-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-control-input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-orange);
    cursor: pointer;
}

.custom-control label {
    font-size: 14px;
    color: var(--gray-light);
    cursor: pointer;
}

.custom-control label a {
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.custom-control label a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Search Form */
.search-wrap {
    display: block;
}

.search-wrap .form-group {
    position: relative;
}

.search-wrap .form-group input {
    background: #f9f9f9;
    padding: 12px 15px;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
    width: 100%;
    height: 45px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: var(--transition);
}

.search-wrap .form-group input:focus {
    outline: none;
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-orange);
}

.search-wrap .form-group .icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--primary-orange);
    font-size: 14px;
    pointer-events: none;
}

/* Contact Form Specific */
.contactForm .row {
    margin-bottom: 0;
}

/* Form Error States */
.text-danger {
    color: var(--primary-orange);
    font-size: 12px;
    margin-top: -15px;
    display: block;
    margin-bottom: 10px;
}

/* Form Success/Error Messages */
.contact-result {
    margin-top: 20px;
    font-size: 14px;
    color: var(--gray-light);
}

.contact-result .alert {
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin: 0;
}

.contact-result .alert-success {
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.1), rgba(29, 64, 120, 0.05));
    color: var(--primary-blue);
    border: 1px solid rgba(29, 64, 120, 0.2);
}

.contact-result .alert-danger {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    color: var(--primary-orange);
    border: 1px solid rgba(240, 83, 35, 0.2);
}

/* Quote Request Form */
.mb-20 {
    margin-bottom: 20px !important;
}

/* Input Placeholder */
::placeholder {
    color: var(--gray-light);
    opacity: 0.7;
    font-size: 14px;
}

:-ms-input-placeholder {
    color: var(--gray-light);
    opacity: 0.7;
    font-size: 14px;
}

::-ms-input-placeholder {
    color: var(--gray-light);
    opacity: 0.7;
    font-size: 14px;
}

/* Disabled State */
.form-control:disabled,
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* Form Groups */
.form-group {
    margin-bottom: 1rem;
}

/* Inline Forms */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

/* Responsive Form Adjustments */
@media (max-width: 768px) {
    .form-control {
        height: 50px;
        font-size: 14px;
    }

    textarea.form-control {
        height: 100px;
    }

    .custom-radio-group {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .form-control {
        height: 45px;
        font-size: 13px;
    }

    .contact-card {
        padding: 25px 15px;
    }
}

/*------------------------------------*\
    #FORMS (Additional)
\*------------------------------------*/
form .col-12 {
    position: relative;
}

.form-control.nice-select {
    width            : 100%;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
}

.form-control.nice-select::after {
    width       : 6px;
    height      : 6px;
    border-color: var(--global--color-body);
    right       : 20px;
}

.form-control.nice-select.open .list {
    width: 100%;
}

.form-control.nice-select .current {
    text-transform: capitalize;
}

.form-control.nice-select .list li {
    text-transform: capitalize;
}

.form-control+.error {
    position: absolute;
    bottom  : 3px;
    left    : 16px;
    color   : #f05323;
}

.form-control.error {
    border-color: #f05323;
}

/* Input Checkbox */
.input-checkbox {
    margin-bottom: 30px;
}

.input-checkbox p {
    display      : block;
    position     : relative;
    font-size    : 13px;
    padding-left : 30px;
    line-height  : 20px;
    text-align   : left;
    margin-bottom: 0;
}

.label-checkbox {
    display    : block;
    position   : relative;
    cursor     : pointer;
    font-size  : 18px;
    line-height: 18px;
    z-index    : 2;
}

.label-checkbox input {
    position: absolute;
    z-index : -1;
    opacity : 0;
}

.label-checkbox .check-indicator {
    position     : absolute;
    top          : 2px;
    left         : 0;
    height       : 17px;
    width        : 17px;
    background   : transparent;
    border       : 1px solid #e1e3e3;
    border-radius: 2px;
}

.label-checkbox .check-indicator:after {
    content          : "";
    position         : absolute;
    display          : none;
    left             : 4px;
    top              : 1px;
    width            : 6px;
    height           : 12px;
    border           : solid var(--global--color-primary);
    border-width     : 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform    : rotate(45deg);
    transform        : rotate(45deg);
}

.label-checkbox input:checked~.check-indicator {
    background: var(--global--color-white);
}

.label-checkbox input:checked~.check-indicator:after {
    display: block;
}

/* Form Select */
.form-select {
    position: relative;
}

.form-select i {
    position      : absolute;
    font-size     : 19px;
    font-weight   : 400;
    line-height   : 49px;
    right         : 20px;
    top           : 0;
    z-index       : 1;
    pointer-events: none;
    cursor        : pointer;
    color         : var(--global--color-body);
}

.form-select select {
    line-height       : 1;
    color             : var(--global--color-body);
    cursor            : pointer;
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
}


/*------------------------------------*\
    #5. BREADCRUMB STYLES
    Breadcrumb navigation components
\*------------------------------------*/
/* Base Breadcrumb */
.breadcrumb-wrap {
    background: white;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    padding: 15px 0;
}

/* Breadcrumb List */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
}

/* Breadcrumb Items */
.breadcrumb-item {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-light);
    display: flex;
    align-items: center;
}

/* Separator - Using the modern approach (preferred) */
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: var(--primary-orange);
    font-family: inherit;
    font-weight: inherit;
}

/* Alternative separator using Font Awesome (if needed) */
.breadcrumb-item + .breadcrumb-item.font-awesome-separator::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
    font-size: 12px;
}

/* Breadcrumb Links */
.breadcrumb-item a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
}

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

/* Active/Breadcrumb-item */
.breadcrumb-item.active {
    color: var(--primary-orange);
}

/*====================================
  Light Breadcrumb (for dark backgrounds)
====================================*/
.breadcrumb-light .breadcrumb-wrap {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.breadcrumb-light .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    color: var(--primary-orange);
}

.breadcrumb-light .breadcrumb-item a {
    color: white;
}

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

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

/*====================================
  Page Title Breadcrumb Variants
====================================*/
.page-title .breadcrumb-wrap {
    position: relative;
    z-index: 2;
    background: transparent;
    border-bottom: none;
    padding: 20px 0 0;
}

.page-title-11 .breadcrumb-wrap {
    padding: 25px 0 0;
}

.page-title-13 .breadcrumb {
    margin: 20px 0 0;
    justify-content: center;
}

/* Blank Page Title Breadcrumb */
.page-title-blank .breadcrumb-wrap,
.page-title-blank-2 .breadcrumb-wrap {
    padding: 0;
    background: transparent;
    border-bottom: none;
}

/* Project Single Breadcrumb */
.project-single .breadcrumb-wrap {
    padding: 0;
}

/*====================================
  Blog Breadcrumb
====================================*/
.blog-breadcrumb {
    margin: 20px 0 0;
    justify-content: center;
}

/*====================================
  Responsive
====================================*/
@media (max-width: 767px) {
    .breadcrumb-wrap {
        padding: 12px 0;
    }

    .breadcrumb-item {
        font-size: 13px;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 6px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-item {
        font-size: 12px;
    }
}


/*------------------------------------*\
    #6. PAGE TITLE STYLES
    Hero title sections for all pages
\*------------------------------------*/

/* Base Page Title */
.page-title {
    position: relative;
    margin-top: 0;
}

.page-title .page-title-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.page-title .bg-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.page-title .bg-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 64, 120, 0.2);
    opacity: 0.85;
}

.page-title .title {
    position: relative;
    z-index: 2;
}

.page-title .title-heading {
    font-weight: 600;
    color: white;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease;
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
    line-height: 1.2;
}

.page-title .title-heading::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.page-title .title-desc {
    color: rgba(255, 255, 255, 0.95);
    animation: fadeInUp 1s ease 0.2s both;
    max-width: 800px;
}

/* Background Overlays */
.bg-overlay-dark-2::before,
.bg-overlay-dark-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.85) 0%,
    rgba(21, 49, 92, 0.9) 100%);
    z-index: 1;
}

.page-title-11 .bg-overlay-dark-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.85) 0%,
    rgba(21, 49, 92, 0.9) 100%);
    z-index: 1;
}
/* Bottom Divider */
.bottom_divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 3;
}

/* ====================================
   Page Title Variant 1 (Default)
==================================== */
.page-title-1 .page-title-wrap {
    min-height: 600px;
}

.page-title-1 .title-heading {
    font-size: 56px;
}

.page-title-1 .title-desc {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 30px;
}

/* ====================================
   Page Title Variant 8 (Careers)
==================================== */
.page-title-8 .page-title-wrap {
    background-color: var(--primary-blue) !important;
    height: 440px;
}

.page-title-8 .page-title-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 60px 60px;
    pointer-events: none;
}

.page-title-8 .title {
    max-width: 900px;
}

.page-title-8 .title-heading {
    font-size: 56px;
    margin-bottom: 25px;
}

.page-title-8 .title-heading::after {
    left: 0;
}

.page-title-8 .title-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 30px;
}

/* ====================================
   Page Title Variant 11 (Services, Projects)
==================================== */
.page-title-11 .page-title-wrap {
    min-height: 500px;
}

.page-title-11 .title {
    max-width: 900px;
    padding: 60px 0 30px;
}

.page-title-11 .title-heading {
    font-size: 56px;
    margin-bottom: 35px;
}

.page-title-11 .title-heading::after {
    left: 0;
}

.page-title-11 .title-desc {
    font-size: 16px;
    line-height: 1.8rem;
    max-width: 800px;
    margin-top: 40px;
}

/* ====================================
   Page Title Variant 13 (Blog)
==================================== */
.page-title-13 .page-title-wrap {
    min-height: 400px;
}

.page-title-13 .title {
    padding: 60px 0;
    text-align: center;
}

.page-title-13 .title-heading {
    font-size: 56px;
    margin-bottom: 25px;
}

.page-title-13 .title-heading::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ====================================
   Page Title Variant 14 (Request Quote)
==================================== */
.page-title-14 .page-title-wrap {
    min-height: 400px;
}

.page-title-14 .title {
    padding: 60px 0;
}

.page-title-14 .title-heading {
    font-size: 56px;
    margin-bottom: 0;
    text-transform: capitalize;
}

.page-title-14 .title-heading::after {
    left: 0;
}

/* ====================================
   Blank Page Title (No background image)
==================================== */
.page-title-blank,
.page-title-blank-2 {
    padding: 20px 0;
    background: white;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

.page-title-blank .title-heading,
.page-title-blank-2 .title-heading {
    color: var(--primary-blue);
    text-shadow: none;
    margin-bottom: 0;
}

.page-title-blank .title-heading::after,
.page-title-blank-2 .title-heading::after {
    display: none;
}

/* ====================================
   Corporate Responsibility Page Title
==================================== */
#page-title .page-title-wrap {
    min-height: 560px;
}

#page-title .title-heading {
    font-size: 48px;
}

/* ====================================
   Responsive Page Titles
==================================== */
@media (max-width: 1200px) {
    .page-title-1 .title-heading,
    .page-title-8 .title-heading,
    .page-title-11 .title-heading,
    .page-title-13 .title-heading,
    .page-title-14 .title-heading {
        font-size: 48px;
    }
}

@media (max-width: 991px) {
    .page-title-1 .page-title-wrap {
        min-height: 500px;
    }

    .page-title-1 .title-heading,
    .page-title-8 .title-heading,
    .page-title-11 .title-heading,
    .page-title-13 .title-heading,
    .page-title-14 .title-heading {
        font-size: 42px;
    }

    .page-title-8 .page-title-wrap {
        height: 380px;
    }

    .page-title .title {
        padding: 40px 0;
    }
}

@media (max-width: 767px) {
    .page-title-1 .page-title-wrap {
        min-height: 450px;
    }

    .page-title-1 .title-heading,
    .page-title-8 .title-heading,
    .page-title-11 .title-heading,
    .page-title-13 .title-heading,
    .page-title-14 .title-heading {
        font-size: 36px;
    }

    .page-title-1 .title-desc {
        font-size: 16px;
        text-align: justify;
    }

    .page-title-8 .page-title-wrap {
        height: 340px;
    }

    .page-title-8 .title-desc,
    .page-title-11 .title-desc {
        font-size: 15px;
    }

    .page-title .title-heading::after {
        width: 80px;
    }
}

@media (max-width: 480px) {
    .page-title-1 .page-title-wrap {
        min-height: 400px;
    }

    .page-title-1 .title-heading,
    .page-title-8 .title-heading,
    .page-title-11 .title-heading,
    .page-title-13 .title-heading,
    .page-title-14 .title-heading {
        font-size: 36px !important;
    }

    .page-title-1 .title-desc,
    .page-title-8 .title-desc {
        font-size: 16px;
        text-align: justify;
    }
}


/*------------------------------------*\
    #7. HEADER & NAVIGATION STYLES
    Top bar, main header, mega menu, and mobile menu
\*------------------------------------*/

/* ====================================
   Top Bar
==================================== */
.top-bar {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    position: relative;
    z-index: var(--z-sticky);
    background: var(--gradient-primary);
    box-shadow: 0 2px 15px rgba(29, 64, 120, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width:100%;
}

.top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-accent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.top-bar .container {
    width: 100%;
    max-width: 1320px; /* Match header's max-width */
    margin: 0 auto;
    padding: 0 15px;
}

.top-bar .container .blocks-holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.top-bar .top-bar-left,
.top-bar .top-bar-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.top-bar .top-contact {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-bar .contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 5px 0;
    margin: 0;
}

.top-bar .contact-info::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-orange);
    transition: width 0.3s ease;
}

.top-bar .contact-info:hover::after {
    width: 100%;
}

.top-bar .contact-info i {
    color: #f8f6f1;
    font-size: 16px;
    width: 20px;
    text-align: center;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.top-bar .contact-info:hover i {
    color: var(--primary-orange);
    transform: translateY(-2px);
}

.top-bar .contact-info a,
.top-bar .contact-info p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    transition: all 0.3s ease;
    text-decoration: none;
}

.top-bar .contact-info a:hover {
    color: var(--primary-orange-light);
    text-shadow: 0 0 10px rgba(240, 83, 35, 0.3);
}

.top-bar .social-links {
    display: flex;
    align-items: center;
    gap: 15px;
    /*padding: 0 20px 0 0;*/
    /*border-right: 1px solid rgba(255, 255, 255, 0.1); -- temporary commented as the language switcher is disabled*/
    /*margin-right: 20px;*/
}

.top-bar .social-links a {
    position: relative;
    color: #ffffff;
    font-size: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(29, 64, 120, 0.3);
    backdrop-filter: blur(5px);
    transition: var(--transition);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar .social-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.top-bar .social-links a:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: var(--shadow-orange);
    border-color: var(--primary-orange);
}

.top-bar .social-links a:hover::before {
    opacity: 1;
}

.top-bar .social-links a i {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.top-bar .social-links a:hover i {
    color: #ffffff;
    transform: rotate(360deg);
}

.top-bar .topbar-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar .topbar-links a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: capitalize;
    font-weight: 500;
    position: relative;
    padding: 5px 0;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.top-bar .topbar-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transition: width 0.3s ease;
    border-radius: 1px;
}

.top-bar .topbar-links a:hover {
    color: #ffffff;
}

.top-bar .topbar-links a:hover::after {
    width: 100%;
}

.top-bar .topbar-links a i {
    margin-right: 5px;
    font-size: 11px;
    transition: all 0.3s ease;
}

.top-bar .topbar-links a:hover i {
    color: var(--primary-orange);
    transform: translateX(2px);
}

/* Language Module */
.top-bar .module-language {
    display: none !important; /*temporary hidding language selector*/
    position: relative;
    height: 100%;
    /*display: flex;*/
    align-items: center;
}

.top-bar .module-language .selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(29, 64, 120, 0.3);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar .module-language .selected:hover {
    background: rgba(29, 64, 120, 0.4);
    transform: translateY(-1px);
    border-color: rgba(240, 83, 35, 0.3);
}

.top-bar .module-language .selected img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.top-bar .module-language .selected:hover img {
    border-color: var(--primary-orange);
    transform: scale(1.1);
}

.top-bar .module-language .selected span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    margin-right: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-bar .module-language .selected i {
    font-size: 10px;
    color: var(--primary-orange);
    transition: transform 0.3s ease;
}

.top-bar .module-language:hover .selected i {
    transform: rotate(180deg);
}

.top-bar .module-language .lang-list {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--z-dropdown);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.top-bar .module-language:hover .lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.top-bar .module-language .lang-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-bar .module-language .lang-list ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    transition: all 0.2s ease;
}

.top-bar .module-language .lang-list ul li:hover {
    background: linear-gradient(90deg, rgba(240, 83, 35, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

.top-bar .module-language .lang-list ul li img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.top-bar .module-language .lang-list ul li a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--gray-dark);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
}

.top-bar .module-language .lang-list ul li:hover a {
    color: var(--primary-orange);
    padding-left: 5px;
}

.top-bar .gradient-divider {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--primary-orange) 50%, rgba(255, 255, 255, 0) 100%);
    margin: 0 15px;
}


/*------------------------------------*\
    #MODULE (Additional)
\*------------------------------------*/
/* Module Language */
.module-language {
    display          : -webkit-inline-box;
    display          : -ms-inline-flexbox;
    display          : inline-flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    position         : relative;
    height           : 100%;
}

.module-language.module-active .lang-list,
.module-language:hover .lang-list {
    opacity          : 1;
    visibility       : visible;
    -webkit-transform: translateY(0);
    -ms-transform    : translateY(0);
    transform        : translateY(0);
}

.module-language .selected {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
}

.module-language .selected img {
    margin-right: 10px;
}

.module-language .selected span {
    font-family   : var(--global--font-body);
    font-size     : 13px;
    font-weight   : 400;
    text-transform: capitalize;
    color         : #929ba2;
    margin-right  : 5px;
    cursor        : pointer;
}

.module-language .selected i {
    font-size: 10px;
    color    : #929ba2;
}

.module-language .lang-list {
    background-color  : var(--global--color-white);
    color             : var(--global--color-heading);
    position          : absolute;
    top               : 100%;
    padding           : 6px 22px;
    -webkit-box-shadow: 0px 5px 41.5px rgba(9, 29, 62, 0.11);
    box-shadow        : 0px 5px 41.5px rgba(9, 29, 62, 0.11);
    z-index           : 5555;
    left              : -22px;
    visibility        : hidden;
    opacity           : 0;
    -webkit-transform : translateY(15px);
    -ms-transform     : translateY(15px);
    transform         : translateY(15px);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    border-radius     : 0 0 8px 8px;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .module-language .lang-list {
        top: 140%;
    }
}

.module-language .lang-list ul li {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
}

.module-language .lang-list ul li:last-of-type a {
    border-bottom: none;
}

.module-language .lang-list ul li:last-of-type a::after {
    content: none;
}

.module-language .lang-list ul li img {
    margin-right: 10px;
}

.module-language .lang-list ul li a {
    font-size         : 14px;
    display           : block;
    color             : var(--global--color-body);
    text-transform    : capitalize;
    border-bottom     : 1px solid #eaeaea;
    padding           : 8px 0px;
    cursor            : pointer;
    -webkit-transition: 0.3s ease;
    -o-transition     : 0.3s ease;
    transition        : 0.3s ease;
    position          : relative;
}

.module-language .lang-list ul li a::after {
    content           : '';
    position          : absolute;
    bottom            : 0;
    left              : 0;
    height            : 1px;
    width             : 0px;
    -webkit-transition: 0.3s ease;
    -o-transition     : 0.3s ease;
    transition        : 0.3s ease;
    background-color  : transparent;
}

.module-language .lang-list ul li a:hover {
    color: var(--global--color-primary);
}

.module-language .lang-list ul li a:hover::after {
    width           : 100%;
    background-color: var(--global--color-primary);
}

/* Module Social */
.module-social {
    line-height  : 100px;
    height       : 100px;
    margin-right : 20px;
    margin-bottom: 0;
}

@media screen and (max-width: 991.98px) {
    .module-social {
        border-bottom: 0;
    }
}

.module-social:last-child {
    margin-right: 0;
}

.module-social a {
    color             : var(--global--color-white);
    font-size         : 17px;
    font-weight       : 400;
    margin-right      : 10px;
    position          : relative;
    overflow          : hidden;
    width             : 35px;
    height            : 35px;
    background-color  : var(--global--color-primary);
    border-radius     : 50%;
    display           : -webkit-inline-box;
    display           : -ms-inline-flexbox;
    display           : inline-flex;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    -webkit-transition: 300ms ease-in-out;
    -o-transition     : 300ms ease-in-out;
    transition        : 300ms ease-in-out;
}

.module-social a:hover {
    -webkit-transform: scale(0.9);
    -ms-transform    : scale(0.9);
    transform        : scale(0.9);
}

.module-social.module-social-2 {
    line-height : 70px;
    height      : 70px;
    border-right: 2px solid #292929;
    margin-right: 0;
}

.module-social.module-social-2:last-child {
    margin-right: 0;
}

.module-social.module-social-2 a {
    color           : var(--global--color-white);
    background-color: transparent;
    margin-right    : 20px;
    width           : auto;
    height          : auto;
    border-radius   : 0;
}

.module-social.module-social-2 a:hover {
    color            : var(--global--color-primary);
    -webkit-transform: scale(1);
    -ms-transform    : scale(1);
    transform        : scale(1);
}

/* Module Cart */
.module-cart.active .module-cart-warp {
    opacity          : 1;
    visibility       : visible;
    -webkit-transform: translateY(0);
    -ms-transform    : translateY(0);
    transform        : translateY(0);
    opacity          : 1;
}

.module.module-active .module-cart-warp,
.module.module-active .search-box {
    display: block !important;
}

.module-cart.module-active .module-cart-warp .cart-control {
    margin-right: auto;
    margin-left : auto;
    text-align  : center;
}

.module-cart.module-active .module-cart-warp .cart-control .pull-right {
    float: none !important;
}

.module-consultation {
    padding: 10px 0;
}

.module-consultation .btn {
    border-color: var(--global--color-heading);
    color       : var(--global--color-heading);
    margin      : 0;
}

.module-sidearea .module-sidearea-wrap {
    width  : 320px;
    padding: 40px;
}

/*------------------------------------*\
    #7. HEADER STYLES
    Main
\*------------------------------------*/

.navigation-bar {
    position: relative;
    z-index: 999;
    box-shadow: 0 5px 83px 0 rgba(29, 64, 120, 0.13);
}

.header {
    border-bottom: 3px solid rgba(240, 83, 35, 0.1);
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    min-height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    width: 100%;
}

.header .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1320px; /* Match container max-width */
    margin: 0 auto;
    position: relative;
    padding: 0 15px;
}

.header.navbar-sticky {
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.5s ease;
    transition: var(--transition);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Navbar Fixed */
.header.navbar-fixed {
    position: fixed;
    top: 0px !important;
    right: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-animation: fadeInDown 0.5s ease-in-out;
    animation: fadeInDown 0.5s ease-in-out;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.header .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    padding: 0 15px;
}

/* ====================================
   Logo Section
   ==================================== */
.header .header-row .header-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: 60px;
}

.header .header-row .header-left .logo a {
    display: block;
    transition: transform 0.3s ease;
}

.header .header-row .header-left .logo a:hover {
    transform: scale(1.02);
}

.header .header-row .header-left .logo img {
    max-width: 260px;
    max-height: 84px;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
}

/* ====================================
   Desktop Menu
   ==================================== */

.header .header-row .header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 40px;
    position: static;
}

.header .header-row .header-right .main-menu {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header .header-row .header-right .main-menu li.menu-item {
    position: relative;
}

/* Make mega menu items static for full-width positioning */
.header .header-row .header-right .main-menu li.menu-item.mega-menu {
    position: static;
}

.header .header-row .header-right .main-menu li.menu-item:not(:last-child) {
    margin: 0 5px;
}

.header .header-row .header-right .main-menu li.menu-item > a {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: var(--gray-dark);
    padding: 40px 15px;
    display: inline-block;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    position: relative;
    transition: var(--transition);
}

/* FIXED: Removed left:50% and used left:0 instead */
.header .header-row .header-right .main-menu li.menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-accent);
    transition: var(--transition);
}

.header .header-row .header-right .main-menu li.menu-item > a:hover::after,
.header .header-row .header-right .main-menu li.menu-item > a.active::after {
    width: 100%;
}

.header .header-row .header-right .main-menu li.menu-item > a:hover,
.header .header-row .header-right .main-menu li.menu-item > a.active {
    color: var(--primary-orange);
}

/* Dropdown Arrow */
.header .header-row .header-right .main-menu li.menu-item.mega-menu > a:after,
.header .header-row .header-right .main-menu li.menu-item.dropdown > a:after {
    content: '\f078';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    margin-left: 8px;
    font-size: 12px;
    color: var(--primary-orange);
    transition: transform 0.3s ease;
    border: none;
    background: transparent;
    top: 0;
}

.header .header-row .header-right .main-menu li.menu-item.mega-menu:hover > a:after {
    transform: rotate(180deg);
}


/*====================================
    Container alignment for all screen sizes
====================================*/

/* Small devices */
@media (min-width: 576px) {
    .top-bar .container,
    .header .header-row {
        max-width: 540px;
    }
}

/* Medium devices */
@media (min-width: 768px) {
    .top-bar .container,
    .header .header-row {
        max-width: 720px;
    }
}

/* Large devices */
@media (min-width: 992px) {
    .top-bar .container,
    .header .header-row {
        max-width: 960px;
    }
}

/* Extra large devices */
@media (min-width: 1200px) {
    .top-bar .container,
    .header .header-row {
        max-width: 1140px;
    }
}

/* XXL devices */
@media (min-width: 1400px) {
    .top-bar .container,
    .header .header-row {
        max-width: 1320px;
    }
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .top-bar .container,
    .header .header-row {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .top-bar .container,
    .header .header-row {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .top-bar .container,
    .header .header-row {
        padding: 0 12px;
    }
}

/* ====================================
   Mega Menu Styles - IMPROVED POSITIONING
   ==================================== */

/* Remove any hover bridges that might cause issues */
.header .header-row .header-right .main-menu li.mega-menu {
    position: static;
    padding-bottom: 0;
    margin-bottom: 0;
}

.header .header-row .header-right .main-menu li.mega-menu::after {
    display: none;
}

/* Mega menu wrapper - precise positioning */
.header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: calc(100vw - 40px);
    max-width: 1280px;
    min-width: 1000px;
    top: 98px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: 30px;
    background: white;
    border-top: 3px solid var(--primary-orange);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s ease;
}

/* Show mega menu when hovering the menu item */
.header .header-row .header-right .main-menu li.mega-menu:hover > .mega-menu-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
    display: inline-grid;
}

/* Keep mega menu visible when hovering the mega menu itself */
.header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

/* Create a small invisible bridge only when menu is active */
.header .header-row .header-right .main-menu li.mega-menu:hover::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: 15px;
    background: transparent;
    z-index: 1001;
    pointer-events: all;
}

/* Responsive adjustments for mega menu */
@media (max-width: 1400px) {
    .header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper {
        min-width: 1100px;
        max-width: 1100px;
    }
}

@media (max-width: 1200px) {
    .header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper {
        min-width: 950px;
        max-width: 950px;
    }
}

/* Services Mega Menu Grid */
.header .header-row .header-right .main-menu li.mega-menu .services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Who We Are Mega Menu Grid - Height adjusted to fit content */
.header .header-row .header-right .main-menu li.mega-menu .who_we_are {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-height: none;
    height: auto;
    overflow: visible;
}

/* Ensure the mega menu wrapper height fits content for who_we_are */
.header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper.who_we_are {
    max-height: 380px;
    height: auto;
    overflow: visible;
    padding: 30px;
    display: none;
}

/* Make sure the columns don't force extra height */
.header .header-row .header-right .main-menu .mega-menu .who_we_are .mega-menu-col {
    height: auto;
    max-height: none;
}

/* ====================================
   Featured Content Blocks - FIXED VERSION
   ==================================== */

.mega-featured .featured-content {
    position: relative;
    min-height: 380px;
    width: 100%;
}

.mega-featured .content-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    border-radius: var(--border-radius);
    background: white;
    box-shadow: var(--shadow-sm);
    padding: 15px;
}

/* Default Video Content Styles */
.mega-featured .content-block.default-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
    z-index: 5;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* When any content block becomes active */
.mega-featured .content-block.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    background: white !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 15px !important;
}

/* Hide all non-active content blocks */
.mega-featured .content-block:not(.active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 1 !important;
}

/* Video Component Styles */
.mega-video-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.mega-video-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

.mega-video-container {
    position: relative;
}

.mega-video-thumbnail {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--primary-blue-dark);
}

.mega-video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mega-video-thumbnail:hover .mega-video-preview {
    transform: scale(1.05);
}

.mega-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(240, 83, 35, 0.3) 0%,
    rgba(29, 64, 120, 0.5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mega-video-thumbnail:hover .mega-video-overlay {
    opacity: 1;
}

.mega-play-button {
    width: 56px;
    height: 56px;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: var(--transition);
    box-shadow: var(--shadow-orange);
    position: relative;
    z-index: 2;
}

.mega-play-button:hover {
    transform: scale(1.1);
}

.mega-play-button::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(240, 83, 35, 0.4);
    animation: pulse 2s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    70% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.mega-video-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(29, 64, 120, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.mega-video-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(29, 64, 120, 0.6), transparent);
    pointer-events: none;
    z-index: 1;
}

.mega-video-info {
    padding: 16px;
    background: white;
}

.mega-video-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mega-video-title::before {
    content: '▶';
    color: var(--primary-orange);
    font-size: 12px;
}

.mega-video-desc {
    font-size: 13px;
    color: var(--gray-light);
    line-height: 1.5;
    margin: 0;
}

.mega-video-stats {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid rgba(29, 64, 120, 0.05);
    border-bottom: 1px solid rgba(29, 64, 120, 0.05);
}

.mega-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-light);
    font-size: 12px;
    font-weight: 500;
}

.mega-stat-item i {
    color: var(--primary-orange);
    font-size: 12px;
}

.mega-video-watch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--gradient-accent);
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    width: 100%;
}

.mega-video-watch:hover {
    background: var(--gradient-primary);
    padding-left: 22px;
    padding-right: 22px;
}

.mega-video-watch i {
    transition: transform 0.3s ease;
}

.mega-video-watch:hover i {
    transform: translateX(5px);
}

/* Featured Image Styles */
.mega-featured .featured-image {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
}

.mega-featured .featured-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mega-featured .featured-image:hover img {
    transform: scale(1.05);
}

/* Badge Styles */
.mega-featured .featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--gradient-accent);
    color: white;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: var(--shadow-orange);
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

/* Content Block Headings */
.mega-featured .content-block h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--primary-blue);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
}

/* Content Block Paragraphs */
.mega-featured .content-block p {
    font-size: 14px;
    color: var(--gray-light);
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Featured Link Styles */
.mega-featured .featured-link {
    color: var(--primary-orange);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    padding: 5px 0;
    border-bottom: 2px solid transparent;
}

.mega-featured .featured-link:hover {
    gap: 12px;
    color: var(--primary-blue);
    border-bottom-color: var(--primary-orange);
}

.mega-featured .featured-link i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.mega-featured .featured-link:hover i {
    transform: translateX(5px);
}

/* ====================================
   Mega Menu Columns
   ==================================== */
.mega-menu-wrapper .mega-menu-col {
    position: relative;
    padding: 0 15px;
}

.mega-menu-wrapper .mega-menu-col:not(:last-child)::after {
    content: "";
    background: linear-gradient(180deg, rgba(29, 64, 120, 0.1) 0%, rgba(29, 64, 120, 0) 100%);
    width: 1px;
    height: 80%;
    position: absolute;
    top: 10%;
    right: -10px;
}

.mega-menu-wrapper .mega-menu-col h4 {
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-left: 0;
    font-size: 11px;
    color: var(--gray-light);
    letter-spacing: 1px;
    font-weight: 600;
}

.mega-menu-wrapper .mega-menu-col h4 i {
    margin-right: 8px;
    color: var(--primary-orange);
}

/* Who We Are Content */
.who_we_are_title {
    font-size: 28px;
    line-height: 1.35;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 15px;
    padding-right: 20px;
}

.who_we_are_desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-light);
    margin-bottom: 20px;
    width: 85%;
}


/* Mega Menu Sub Menu */
.mega-menu-wrapper .mega-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-wrapper .mega-sub-menu li {
    margin-bottom: 0;
    transition: background 0.3s ease;
    cursor: pointer;
}

.mega-menu-wrapper .mega-sub-menu li[data-content]:hover {
    background: linear-gradient(90deg, rgba(240, 83, 35, 0.05) 0%, rgba(255, 107, 61, 0.02) 100%);
}

.mega-menu-wrapper .mega-sub-menu li a {
    text-decoration: none;
    padding: 12px 15px;
    font-size: 15px;
    color: var(--gray-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    border-radius: 8px;
    margin-bottom: 5px;
}

.mega-menu-wrapper .mega-sub-menu li a span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mega-menu-wrapper .mega-sub-menu li a i:first-child {
    font-size: 15px;
    color: var(--primary-orange);
    opacity: 0.6;
    transition: var(--transition);
    width: 20px;
}

.mega-menu-wrapper .mega-sub-menu li a .fa-chevron-right {
    font-size: 12px;
    color: var(--primary-orange);
    opacity: 0.5;
    transition: var(--transition);
}

.mega-menu-wrapper .mega-sub-menu li:hover a {
    background: linear-gradient(90deg, rgba(240, 83, 35, 0.1) 0%, rgba(255, 107, 61, 0.05) 100%);
    color: var(--primary-orange);
    transform: translateX(5px);
}

.mega-menu-wrapper .mega-sub-menu li:hover a i:first-child {
    opacity: 1;
}

.mega-menu-wrapper .mega-sub-menu li:hover a .fa-chevron-right {
    opacity: 1;
    transform: translateX(5px);
}

.mega-menu-wrapper .mega-sub-menu li.current a {
    background: linear-gradient(90deg, rgba(240, 83, 35, 0.15) 0%, rgba(255, 107, 61, 0.1) 100%);
    color: var(--primary-orange);
    font-weight: 600;
}

/* ====================================
   Service Cards - COMPLETE FIXED VERSION
   service-content is INSIDE the service card
   ==================================== */

/* Services Mega Menu Grid */
.header .header-row .header-right .main-menu li.mega-menu .services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    overflow: visible;
}

/* Service Card Container - This contains everything including service-content */
.mega_service_card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    background: white;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.mega_service_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Image Wrapper - Inside service card */
.mega_service_card .service-image-wrapper {
    position: relative;
    height: 180px;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.mega_service_card .service_mega_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega_service_card:hover .service_mega_image {
    transform: scale(1.15) rotate(1deg);
}

/* Service Overlay - Inside service card */
.mega_service_card .service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg,
    rgba(240, 83, 35, 0.8) 0%,
    rgba(29, 64, 120, 0.7) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.mega_service_card:hover .service-overlay {
    opacity: 1;
}

/* Service Badge - Inside service card */
.mega_service_card .service-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gradient-accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: var(--shadow-orange);
}

/* SERVICE CONTENT - This is INSIDE the service card */
/* Make sure it's visible and properly positioned */
.mega_service_card .service-content {
    flex: 1;
    padding: 20px;
    display: flex !important;
    flex-direction: column;
    background: white;
    position: relative;
    z-index: 2;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Service Title - Inside service-content */
.mega_service_card .service_mega_text {
    font-size: 18px;
    line-height: 1.3;
    color: var(--primary-blue);
    margin: 0 0 12px 0;
    font-weight: 700;
    transition: var(--transition);
    display: block !important;
    visibility: visible !important;
}

.mega_service_card:hover .service_mega_text {
    color: var(--primary-orange);
}

/* Service CTA Button - Inside service-content */
.mega_service_card .service-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: var(--primary-orange);
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
    margin-top: auto;
    padding-top: 12px;
    visibility: visible !important;
}

.mega_service_card:hover .service-cta {
    gap: 12px;
}

.mega_service_card .service-cta i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.mega_service_card:hover .service-cta i {
    transform: translateX(5px);
}

/* Active Service Card */
.mega_service_card.active_service {
    border: 2px solid var(--primary-orange);
    box-shadow: var(--shadow-orange);
}

/* Mega Menu Wrapper */
.header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper.services {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: calc(100vw - 40px);
    max-width: 1280px;
    min-width: 1000px;
    top: 98px;
    padding: 30px;
    background: white;
    border-top: 3px solid var(--primary-orange);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s ease;
    overflow: visible !important;
    max-height: none !important;
}

/* Show mega menu on hover */
.header .header-row .header-right .main-menu li.mega-menu:hover > .mega-menu-wrapper.services {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Keep mega menu visible when hovering the mega menu itself */
.header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper.services:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Create hover bridge */
.header .header-row .header-right .main-menu li.mega-menu:hover::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: 15px;
    background: transparent;
    z-index: 1001;
    pointer-events: all;
}

/* Fix columns */
.services .mega-menu-col {
    padding: 0;
    overflow: visible;
}

.services .mega-menu-col::after {
    display: none;
}

/* Ensure all service card children are properly contained */
.mega_service_card * {
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper.services {
        min-width: 1100px;
        max-width: 1100px;
    }
}

@media (max-width: 1200px) {
    .header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper.services {
        min-width: 950px;
        max-width: 950px;
    }
    
    .mega_service_card .service_mega_text {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    .header .header-row .header-right .main-menu .mega-menu .mega-menu-wrapper.services {
        display: none !important;
    }
}

/* ====================================
   Contact Button
   ==================================== */
.module-contact.module-contact-2 {
    margin-left: 20px;
    flex-shrink: 0;
}

.module-contact.module-contact-2 .btn {
    width: 165px;
    background: var(--gradient-accent);
    border: none;
    transition: var(--transition);
    box-shadow: var(--shadow-orange);
    padding: 20px;
    border-radius: 6px;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
}

.module-contact.module-contact-2 .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(240, 83, 35, 0.4);
}

/* ====================================
   Mobile Toggler Button
   ==================================== */
.header .mobile-toggler {
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--gradient-blue);
    cursor: pointer;
    padding: 12px 18px;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    font-size: 18px;
    min-width: 48px;
    min-height: 48px;
    margin: 8px 0;
}

.header .mobile-toggler:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.header .mobile-toggler:focus {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

.header .mobile-toggler i {
    font-size: 20px;
    pointer-events: none;
}

/* ====================================
   Mobile Menu - IMPROVED SMOOTH SLIDE
   ==================================== */
/* ====================================
   Mobile Menu - FIXED VERSION
   ==================================== */
.header .header-row .mobile-menu {
    position: fixed;
    top: 98px;
    right: -100%;
    width: 100%;
    height: calc(100vh - 98px);
    background: white;
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 30px rgba(29, 64, 120, 0.15);
    border-left: 3px solid var(--primary-orange);
    -webkit-overflow-scrolling: touch;
    display: block !important; /* Force display */
}

.header .header-row .mobile-menu.active {
    right: 0 !important;
}

.header .header-row .mobile-menu.hidden {
    right: -100% !important;
}

/* Mobile menu body */
.header .header-row .mobile-menu .mobile-menu-body {
    padding: 20px 25px;
    display: block !important;
}

.header .header-row .mobile-menu .mobile-menu-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block !important;
}

.header .header-row .mobile-menu .mobile-menu-body ul li {
    margin-bottom: 5px;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: block !important;
}

.header .header-row .mobile-menu .mobile-menu-body ul li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-dark);
    text-decoration: none;
    border-radius: 10px;
    transition: var(--transition);
    background: rgba(248, 249, 250, 0.7);
    border-left: 4px solid transparent;
}

.header .header-row .mobile-menu .mobile-menu-body ul li a i:first-child {
    width: 24px;
    color: var(--primary-orange);
    font-size: 18px;
    text-align: center;
    display: inline-block !important;
}

.header .header-row .mobile-menu .mobile-menu-body ul li a .dropdown-icon {
    margin-left: auto;
    color: var(--primary-orange);
    font-size: 14px;
    transition: transform 0.3s ease;
    display: inline-block !important;
}

.header .header-row .mobile-menu .mobile-menu-body ul li a:hover,
.header .header-row .mobile-menu .mobile-menu-body ul li a.active {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1) 0%, rgba(255, 107, 61, 0.05) 100%);
    color: var(--primary-orange);
    border-left-color: var(--primary-orange);
    transform: translateX(5px);
}

/* Mobile dropdown */
.header .header-row .mobile-menu .mobile-menu-body ul li.mobile-dropdown.active > a .dropdown-icon {
    transform: rotate(180deg);
}

.header .header-row .mobile-menu .mobile-menu-body .mobile-sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background: rgba(248, 249, 250, 0.5);
    border-radius: 10px;
    margin: 2px 0 2px 15px;
    display: block !important;
}

.header .header-row .mobile-menu .mobile-menu-body ul li.mobile-dropdown.active .mobile-sub-menu {
    max-height: 500px !important;
}

.header .header-row .mobile-menu .mobile-menu-body .mobile-sub-menu ul {
    padding: 10px 0;
}

.header .header-row .mobile-menu .mobile-menu-body .mobile-sub-menu ul li a {
    padding: 12px 20px 12px 45px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border-left: 2px solid transparent;
}

.header .header-row .mobile-menu .mobile-menu-body .mobile-sub-menu ul li a i {
    font-size: 14px;
    width: 20px;
    color: var(--gray-light);
}

.header .header-row .mobile-menu .mobile-menu-body .mobile-sub-menu ul li a:hover i {
    color: var(--primary-orange);
}

/* Mobile menu footer */
.header .header-row .mobile-menu .mobile-menu-footer {
    padding: 25px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 2px solid rgba(240, 83, 35, 0.1);
    margin-top: 20px;
    display: block !important;
}

.header .header-row .mobile-menu .mobile-contact-info {
    margin-bottom: 20px;
    display: block !important;
}

.header .header-row .mobile-menu .contact-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: white;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.05);
}

.header .header-row .mobile-menu .contact-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(240, 83, 35, 0.2);
}

.header .header-row .mobile-menu .contact-item i {
    width: 30px;
    height: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
}

.header .header-row .mobile-menu .contact-item a {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
    word-break: break-word;
    display: inline-block !important;
}

.header .header-row .mobile-menu .contact-item a:hover {
    color: var(--primary-orange);
}

.header .header-row .mobile-menu .mobile-social-links {
    display: flex !important;
    justify-content: center;
    gap: 15px;
    padding-top: 15px;
    border-top: 2px solid rgba(240, 83, 35, 0.1);
}

.header .header-row .mobile-menu .mobile-social-links a {
    width: 45px;
    height: 45px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--primary-blue);
    border-radius: 50%;
    font-size: 18px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.header .header-row .mobile-menu .mobile-social-links a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-5px);
    border-color: var(--primary-orange);
}

/* Hide desktop elements on mobile */
@media (max-width: 991px) {
    .header .header-row .header-right .main-menu {
        display: none !important;
    }

    .module-contact.module-contact-2 {
        display: none !important;
    }

    .header .mobile-toggler {
        display: flex !important;
    }

    .mega-menu-wrapper {
        display: none !important;
    }
}

/* Adjust for mobile header height */
@media (max-width: 767px) {
    .header {
        min-height: 70px;
    }

    .header .header-row {
        padding: 10px 15px;
    }

    .header .header-row .header-left .logo img {
        max-width: 200px;
        max-height: 60px;
    }

    .header .mobile-toggler {
        padding: 10px 15px;
        min-width: 44px;
        min-height: 44px;
    }

    .header .header-row .mobile-menu {
        top: 70px !important;
        height: calc(100vh - 70px) !important;
    }

    .header .header-row .mobile-menu .mobile-menu-body {
        padding: 15px 20px;
    }

    .header .header-row .mobile-menu .mobile-menu-body ul li a {
        padding: 12px 15px;
        font-size: 15px;
    }

    .header .header-row .mobile-menu .mobile-menu-body .mobile-sub-menu ul li a {
        padding: 10px 15px 10px 40px;
        font-size: 13px;
    }

    .header .header-row .mobile-menu .contact-item {
        padding: 8px 12px;
    }

    .header .header-row .mobile-menu .mobile-social-links a {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .header .header-row .header-left{
        margin-left: 40px;
    }
    .header .header-row .header-left .logo img {
        max-width: 220px;
    }

    .header .mobile-toggler {
        padding: 8px 12px;
        min-width: 40px;
        min-height: 40px;
    }

    .header .mobile-toggler i {
        font-size: 18px;
    }

    .header .header-row .mobile-menu {
        top: 80px !important;
        height: calc(100vh - 60px) !important;
    }
}

/* Hide topbar on mobile */
@media (max-width: 991px) {
    .top-bar {
        display: none !important;
    }
}


/*====================================
    Medium Screens (13-14 inch laptops)
====================================*/
@media (min-width: 992px) and (max-width: 1366px) {

    .header .header-row .header-left {
        margin-left: 20px;
        margin-right: 40px;
    }
    .header .header-row .header-left .logo img {
        max-width: 220px;
    }

    .header .header-row .header-right .main-menu {
        gap: 0 !important;
    }

    .header .header-row .header-right .main-menu li.menu-item > a {
        padding: 40px 10px;
        font-size: 14px;
    }


}

/*------------------------------------*\
   #8. HERO SLIDER STYLES - UNIQUE SELECTORS
\*------------------------------------*/

/* Unique container for the slider - using a very specific class */
.homepage-main-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    max-height: 1080px;
    overflow: hidden;
    background-color: #1a3650;
    z-index: 10;
}

/* Responsive Height Adjustments */
@media (min-width: 1921px) {
    .homepage-main-slider { height: 85vh; max-height: 1200px; }
}
@media (max-width: 1200px) {
    .homepage-main-slider { height: 90vh; min-height: 600px; }
}
@media (max-width: 768px) {
    .homepage-main-slider { height: 100vh; min-height: -webkit-fill-available; min-height: 100svh; }
}

/* Swiper Container - Scoped to our unique class */
.homepage-main-slider .slider-carousel-container {
    height: 100%;
    width: 100%;
    position: relative;
}

.homepage-main-slider .slider-carousel-container .swiper-wrapper {
    height: 100%;
}

/* CRITICAL FIX: Make slides absolute for fade effect */
.homepage-main-slider .slider-carousel-container .swiper-slide {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    opacity: 0 !important;
    transition: opacity 0.8s ease-in-out !important;
}

.homepage-main-slider .slider-carousel-container .swiper-slide-active {
    opacity: 1 !important;
}

/* Fix for Swiper fade mode */
.homepage-main-slider .slider-carousel-container.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}

.homepage-main-slider .slider-carousel-container.swiper-fade .swiper-slide-active {
    pointer-events: auto;
}

/* Individual Slide */
.homepage-main-slider .slide-item {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #1a3650;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Gradient Overlay */
.homepage-main-slider .slide-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.3) 0%,
    rgba(21, 49, 92, 0.3) 50%,
    rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Loading Spinner */
.homepage-main-slider .slide-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 64, 120, 0.95);
    z-index: 20;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(5px);
}

.homepage-main-slider .spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #f05f3e;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.homepage-main-slider .slide-item.loaded .slide-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Slide Content */
.homepage-main-slider .slide-content-box {
    position: relative;
    z-index: 2;
    padding: clamp(30px, 5vw, 50px);
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.9) 0%,
    rgba(21, 49, 92, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border-left: 4px solid #f05f3e;
    margin-top: 60px;
    max-width: min(600px, 90%);
    opacity: 0;
    transform: translateY(40px);
    animation: slideContentIn 0.8s ease 0.2s forwards;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}

@keyframes slideContentIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Content */
@media (max-width: 768px) {
    .homepage-main-slider .slide-content-box {
        margin-top: 40px; padding: 25px; text-align: center;
        margin-left: auto; margin-right: auto;
    }
    .homepage-main-slider .slide-tags,
    .homepage-main-slider .slide-actions { justify-content: center; }
}

/* Slide Tags */
.homepage-main-slider .slide-tags { display: flex; gap: 12px; margin-bottom: 25px; flex-wrap: wrap; }

.homepage-main-slider .tag-item {
    padding: 8px 18px; border-radius: 100px; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase;
    letter-spacing: 0.5px; white-space: nowrap;
}

.homepage-main-slider .tag-latest {
    background: linear-gradient(135deg, #f05f3e, #ff8c5a);
    color: white;
    box-shadow: 0 10px 20px -5px rgba(240,95,62,0.3);
}

.homepage-main-slider .tag-date,
.homepage-main-slider .tag-location {
    background: rgba(255, 255, 255, 0.12); color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

/* Slide Title */
.homepage-main-slider .slide-title {
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: clamp(28px, 5vw, 28px);
    line-height: 1.2; color: white; margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Slide Description */
.homepage-main-slider .slide-description {
    font-family: 'Inter', sans-serif; font-size: clamp(14px, 1.5vw, 14px);
    line-height: 1.7; color: rgba(255, 255, 255, 0.95); margin-bottom: 35px;
    max-width: 550px;
}

/* Slide Actions */
.homepage-main-slider .slide-actions { display: flex; gap: 20px; flex-wrap: wrap; }

.homepage-main-slider .slide-actions .btn {
    min-width: 180px; height: 56px; border-radius: 12px; font-weight: 600;
    font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
    gap: 12px; transition: all 0.3s ease; border: none; text-decoration: none;
    cursor: pointer; font-family: 'Inter', sans-serif;
}

.homepage-main-slider .btn-primary {
    background: linear-gradient(135deg, #f05f3e, #ff8c5a);
    color: white;
}

.homepage-main-slider .btn-secondary {
    background: rgba(255, 255, 255, 0.1); color: white;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.homepage-main-slider .btn-secondary:hover { background: #f05f3e; }

/* Progress Bar */
.homepage-main-slider .slider-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 30;
}

.homepage-main-slider .progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(135deg, #f05f3e, #ff8c5a);
    transition: width 0.1s linear;
}

/* Slide Counter */
.homepage-main-slider .slide-counter {
    position: absolute;
    bottom: 120px;
    right: 30px;
    background: rgba(29, 64, 120, 0.5);
    backdrop-filter: blur(10px);
    padding: 10px 24px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: white;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 30;
}

@media (max-width: 768px) {
    .homepage-main-slider .slide-counter {
        bottom: 100px;
        right: 50%;
        transform: translateX(50%);
    }
}

.homepage-main-slider .slide-counter .current {
    color: #f05f3e;
    font-size: 20px;
    font-weight: 700;
}

/* Scroll Indicator */
.homepage-main-slider .scroll-indicator {
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%);
    animation: bounce 2.5s infinite; z-index: 30; cursor: pointer;
    width: 40px; height: 40px; background: rgba(29, 64, 120, 0.3);
    backdrop-filter: blur(5px); border-radius: 50%; display: flex;
    align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.homepage-main-slider .scroll-indicator:hover {
    background: rgba(240, 83, 35, 0.3);
    border-color: #f05f3e;
}

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

/* Swiper Navigation - SCOPED */
.homepage-main-slider .slider-carousel-container .swiper-button-prev,
.homepage-main-slider .slider-carousel-container .swiper-button-next {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(29, 64, 120, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s ease !important;
    color: white !important;
    margin-top: -28px !important;
    z-index: 40 !important;
}

.homepage-main-slider .slider-carousel-container .swiper-button-prev:hover,
.homepage-main-slider .slider-carousel-container .swiper-button-next:hover {
    background: rgba(240, 83, 35, 0.9) !important;
    transform: scale(1.15) !important;
}

.homepage-main-slider .slider-carousel-container .swiper-button-prev:after,
.homepage-main-slider .slider-carousel-container .swiper-button-next:after {
    font-size: 20px !important;
    font-weight: bold !important;
}

.homepage-main-slider .slider-carousel-container .swiper-button-prev {
    left: 30px !important;
}

.homepage-main-slider .slider-carousel-container .swiper-button-next {
    right: 30px !important;
}

@media (max-width: 992px) {
    .homepage-main-slider .slider-carousel-container .swiper-button-prev,
    .homepage-main-slider .slider-carousel-container .swiper-button-next {
        display: none !important;
    }
}

/* Swiper Pagination - SCOPED */
.homepage-main-slider .slider-carousel-container .swiper-pagination {
    position: absolute !important;
    bottom: 60px !important;
    right: 60px !important;
    left: auto !important;
    width: auto !important;
    display: flex !important;
    gap: 12px !important;
    z-index: 40 !important;
}

.homepage-main-slider .slider-carousel-container .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

.homepage-main-slider .slider-carousel-container .swiper-pagination-bullet-active {
    background: #f05f3e !important;
    transform: scale(1.2) !important;
}

@media (max-width: 768px) {
    .homepage-main-slider .slider-carousel-container .swiper-pagination {
        bottom: 100px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
    }
}

/* ====================================
   MOBILE OPTIMIZATIONS
==================================== */

@media (max-width: 768px) {
    /* Adjust content box for mobile */
    .homepage-main-slider .slide-content-box {
        margin-top: 40px;
        padding: 25px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
        background: linear-gradient(135deg,
        rgba(29, 64, 120, 0.95) 0%,
        rgba(21, 49, 92, 0.9) 100%);
        border-left: none;
        border-top: 4px solid #f05f3e;
        border-radius: 16px;
    }

    /* Hide tags on mobile */
    .homepage-main-slider .slide-tags {
        display: none !important;
    }

    /* Hide description on mobile */
    .homepage-main-slider .slide-description {
        display: none !important;
    }

    /* Adjust title for mobile */
    .homepage-main-slider .slide-title {
        font-size: 24px;
        margin-bottom: 20px;
        line-height: 1.3;
    }

    /* Center buttons on mobile */
    .homepage-main-slider .slide-actions {
        justify-content: center;
        flex-direction: column;
        gap: 12px;
    }

    /* Make buttons full width on mobile */
    .homepage-main-slider .slide-actions .btn {
        width: 100%;
        min-width: unset;
        height: 50px;
        font-size: 14px;
    }

    /* Position pagination on left and counter on right */
    .homepage-main-slider .slider-carousel-container .swiper-pagination {
        bottom: 30px !important;
        left: 20px !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        gap: 8px !important;
    }

    .homepage-main-slider .slide-counter {
        bottom: 30px;
        right: 20px;
        left: auto;
        transform: none;
        padding: 8px 16px;
        font-size: 13px;
        background: rgba(29, 64, 120, 0.7);
        backdrop-filter: blur(5px);
        border-radius: 30px;
    }

    /* Hide scroll indicator on mobile */
    .homepage-main-slider .scroll-indicator {
        display: none;
    }

    /* Hide Swiper navigation on mobile */
    .homepage-main-slider .slider-carousel-container .swiper-button-prev,
    .homepage-main-slider .slider-carousel-container .swiper-button-next {
        display: none !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .homepage-main-slider .slide-content-box {
        padding: 20px;
        margin-top: 30px;
    }

    .homepage-main-slider .slide-title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .homepage-main-slider .slide-actions .btn {
        height: 45px;
        font-size: 13px;
    }

    /* Adjust pagination and counter for smaller screens */
    .homepage-main-slider .slider-carousel-container .swiper-pagination {
        bottom: 25px !important;
        left: 15px !important;
        gap: 6px !important;
    }

    .homepage-main-slider .slider-carousel-container .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }

    .homepage-main-slider .slide-counter {
        bottom: 25px;
        right: 15px;
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Small devices */
@media (max-width: 360px) {
    .homepage-main-slider .slide-title {
        font-size: 20px;
    }

    .homepage-main-slider .slide-content-box {
        padding: 15px;
    }

    /* Further adjust for very small screens */
    .homepage-main-slider .slider-carousel-container .swiper-pagination {
        bottom: 20px !important;
        left: 10px !important;
    }

    .homepage-main-slider .slide-counter {
        bottom: 20px;
        right: 10px;
        padding: 4px 10px;
        font-size: 11px;
    }
}
/*------------------------------------*\
    #9. SECTION HEADERS & COMMON SECTION COMPONENTS
    Reusable section headers, headings, and common section patterns
\*------------------------------------*/

/* ====================================
   Section Header - Base
==================================== */
.section-header {
    margin-bottom: 40px;
    position: relative;
}

.section-header.text-center {
    text-align: center;
}

.section-header.text-left {
    text-align: left;
}

.section-header.text-right {
    text-align: right;
}

/* Section Subtitle */
.section-subtitle,
.section-header .heading-subtitle,
.section-header__subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(240, 83, 35, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    animation: fadeInDown 0.8s ease;
}

.section-subtitle i,
.section-header .heading-subtitle i,
.section-header__subtitle i {
    margin-right: 8px;
    color: var(--primary-orange);
}

/* Section Title */
.section-title,
.section-header .heading-title,
.section-header__title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-blue);
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    animation: fadeInUp 0.8s ease 0.2s both;
    width: 100%;
}

.section-title::after,
.section-header .heading-title::after,
.section-header__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.section-title.text-center::after,
.section-header .heading-title.text-center::after,
.section-header__title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.section-title--light,
.section-header__title--light {
    color: white;
}

.section-title--light::after,
.section-header__title--light::after {
    background: var(--gradient-accent);
}

/* Section Description */
.section-desc,
.section-header .heading-desc,
.section-header__desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-light);
    max-width: 700px;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease 0.4s both;
}

.section-desc--light,
.section-header__desc--light {
    color: rgba(255, 255, 255, 0.9);
}

/*------------------------------------*\
    #Heading (Additional)
\*------------------------------------*/
.heading {
    margin-bottom: 48px;
}

@media screen and (max-width: 991.98px) {
    .heading {
        text-align: center;
    }
}

.heading .heading-subtitle {
    font-family   : var(--global--font-body);
    text-transform: capitalize;
    color         : var(--global--color-primary);
    font-size     : 14px;
    font-weight   : 600;
    line-height   : 1;
    margin-bottom : 12px;
}

@media screen and (max-width: 991.98px) {
    .heading .heading-subtitle {
        line-height: 1.5;
    }
}

.heading .heading-subtitle.heading-subtitle-bg {
    display         : inline-block;
    width           : -webkit-max-content;
    width           : -moz-max-content;
    width           : max-content;
    padding         : 12px 20px;
    border-radius   : 4px;
    background-color: #ffe6de;
}

@media screen and (max-width: 991.98px) {
    .heading .heading-subtitle.heading-subtitle-bg {
        width: auto;
    }
}

.heading .heading-title {
    font-family   : var(--global--font-heading);
    text-transform: capitalize;
    font-size     : 32px;
    line-height   : 3rem;
    margin-bottom : 25px;
    font-weight   : 600;
    color         : var(--global--color-heading);
}

@media (min-width: 992px) and (max-width: 1200px) {
    .heading .heading-title {
        font-size  : 28px;
        line-height: 1.4rem;
    }
}

@media screen and (max-width: 767.98px) {
    .heading .heading-title {
        font-size  : 26px;
        line-height: 2.2rem;
    }
}

.heading .heading-desc {
    font-family  : var(--global--font-body);
    color        : var(--global--color-body);
    font-size    : 16px;
    font-weight  : 400;
    line-height  : 1.8rem;
    margin-bottom: 25px;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .heading .heading-desc {
        font-size  : 16px;
        line-height: 1.8rem;
    }
}

.heading .paragraph {
    font-weight  : 700;
    font-size    : 16px;
    line-height  : 27px;
    color        : #283b6a;
    margin-bottom: 0px;
}

.heading.heading-light .heading-subtitle {
    color: var(--global--color-primary);
}

.heading.heading-light .heading-title {
    color: var(--global--color-white);
}

.heading.heading-light .heading-desc {
    color: var(--global--color-gray);
}

.heading.heading-light .paragraph {
    color: var(--global--color-gray);
}

.heading.heading-1 {
    margin-bottom: 40px;
}

.heading.heading-1 .heading-title {
    margin-bottom: 0;
}

/* ====================================
   Heading Variants (from various pages)
==================================== */

/* Heading 1 Style */
.heading-1 .heading-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(240, 83, 35, 0.2);
}

.heading-1 .heading-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 25px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

.heading-1 .heading-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

/* Heading 6 Style */
.heading-6 {
    padding: 50px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    height: 100%;
    border-right: 1px solid rgba(29, 64, 120, 0.1);
}

@media (max-width: 991px) {
    .heading-6 {
        padding: 40px 30px;
        border-right: none;
        border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    }
}

@media (max-width: 480px) {
    .heading-6 {
        padding: 30px 20px;
    }
}

/* Heading 12 Style */
.heading-12 {
    margin-bottom: 30px;
}

.heading-12 .heading-subtitle-bg {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(240, 83, 35, 0.2);
}

.heading-12 .heading-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 25px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

/* Heading Light Styles */
.heading-light2 {
    color: white;
}

.heading-light2 .heading-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.heading-light2 .heading-title {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin-bottom: 25px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

.heading-light2 .heading-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.heading-light2 .heading-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.heading-light2 .heading-desc b,
.heading-light2 .heading-desc strong {
    color: white;
    font-weight: 700;
}

/* ====================================
   Advantages & Features Lists
==================================== */
.advantages-list-holder {
    margin-bottom: 32px;
}

.advantages-list-3 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advantages-list-3 li {
    font-size: 15px;
    color: var(--gray-light);
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

.advantages-list-3 li::before {
    content: '✓';
    color: var(--primary-orange);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: -1px;
}

/* ====================================
   Stats Section Pattern
==================================== */
.stats-section,
.stats-section-modern {
    padding: 80px 0;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.stats-section::before,
.stats-section-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    animation: rotateSlow 30s linear infinite;
}

.stats-section::after,
.stats-section-modern::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(29, 64, 120, 0.2), transparent);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-item,
.stat-card-modern {
    text-align: center;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-item::before,
.stat-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.stat-item:hover,
.stat-card-modern:hover {
    transform: translateY(-10px);
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-orange);
}

.stat-item:hover::before,
.stat-card-modern:hover::before {
    left: 100%;
}

.stat-number,
.stat-number-modern {
    font-size: 48px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    line-height: 1;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: countPulse 2s ease infinite;
}

.stat-label,
.stat-label-modern {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ====================================
   CTA Banner Pattern
==================================== */
.cta-banner,
.cta-section-modern,
.contact-cta {
    padding: 80px 0;
    background: var(--gradient-accent);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-banner::before,
.cta-section-modern::before,
.contact-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    animation: rotate 30s linear infinite;
}

.cta-content,
.cta-content-modern {
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

.cta-title,
.cta-title-modern {
    font-size: 42px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-text,
.cta-text-modern {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 35px;
}

/* ====================================
   Process Grid Pattern
==================================== */
.process-section {
    padding: 100px 0;
    background: white;
    position: relative;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

@media (max-width: 991px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
}

.process-step {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius);
    position: relative;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.process-step:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-orange);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
    box-shadow: var(--shadow-orange);
    border: 2px solid white;
}

.step-icon {
    width: 80px;
    height: 80px;
    background: rgba(240, 83, 35, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 25px;
    color: var(--primary-orange);
    font-size: 32px;
    transition: var(--transition);
}

.process-step:hover .step-icon {
    background: var(--gradient-accent);
    color: white;
    transform: rotateY(360deg);
}

.process-step h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 15px;
}

.process-step p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-light);
    margin: 0;
}

/* ====================================
   Quote Block Pattern
==================================== */
.blockquote-bloc {
    padding: 40px 0 40px 0;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    display: table;
    margin: 0 0 60px 0;
    width: 100%;
}

.blockquote-bloc .quote-text {
    font-size: 26px;
    font-family: 'Inter', serif;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    padding-right: 26px;
    text-align: justify;
    color: var(--primary-blue);
    position: relative;
}

.blockquote-bloc .quote-text::before {
    content: '"';
    font-size: 60px;
    color: var(--primary-orange);
    opacity: 0.2;
    position: absolute;
    top: -20px;
    left: -10px;
    font-family: serif;
}

@media (max-width: 991px) {
    .blockquote-bloc .quote-text {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .blockquote-bloc .quote-text {
        font-size: 20px;
        padding-right: 0;
    }
    .blockquote-bloc {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .blockquote-bloc .quote-text {
        font-size: 18px;
    }
}

/* ====================================
   Action Panel & Sort Panel (Blog/Projects)
==================================== */
.action-panel {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    padding-bottom: 1rem;
}

.sort-panel {
    display: flex;
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
    flex-wrap: wrap;
    gap: 1rem;
}

.sort-panel li {
    margin-right: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.sort-panel li a {
    text-decoration: none;
    color: var(--gray-light);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}

.sort-panel li:hover {
    border-bottom-color: var(--primary-orange);
}

.sort-panel li:hover a {
    color: var(--primary-orange);
}

.sort-panel li.active {
    border-bottom-color: var(--primary-orange);
}

.sort-panel li.active a {
    color: var(--primary-orange);
}

/* ====================================
   Pagination
==================================== */
.pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination .page-item {
    display: inline-block;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: white;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
    color: var(--gray-light);
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}

.pagination .page-link:hover,
.pagination .active .page-link {
    background: var(--primary-orange);
    color: white;
    border-color: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

/* ====================================
   Alert Messages
==================================== */
.alert {
    padding: 20px 30px;
    border-radius: var(--border-radius);
    background: var(--gradient-primary) !important;
    color: white;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: none;
}

.alert h4 {
    color: white;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.alert.alert-secondary {
    background: var(--gradient-primary) !important;
}

/* ====================================
   Section Responsive
==================================== */
@media (max-width: 1200px) {
    .section-title,
    .section-header .heading-title,
    .section-header__title {
        font-size: 42px;
    }
}

@media (max-width: 991px) {
    .section-title,
    .section-header .heading-title,
    .section-header__title {
        font-size: 36px;
    }

    .section-desc,
    .section-header .heading-desc,
    .section-header__desc {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .section-title,
    .section-header .heading-title,
    .section-header__title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .section-subtitle,
    .section-header .heading-subtitle,
    .section-header__subtitle {
        font-size: 12px;
        padding: 6px 18px;
    }

    .process-grid {
        gap: 20px;
    }

    .process-step {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .section-title,
    .section-header .heading-title,
    .section-header__title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .stat-item,
    .stat-card-modern {
        padding: 30px 20px;
    }

    .stat-number,
    .stat-number-modern {
        font-size: 36px;
    }

    .cta-title,
    .cta-title-modern {
        font-size: 28px;
    }

    .cta-text,
    .cta-text-modern {
        font-size: 16px;
    }
}


/*------------------------------------*\
    #10. HERO/COMPANY OVERVIEW SECTIONS
    Company overview, about sections, and hero content blocks
\*------------------------------------*/

/* ====================================
   Hero Section (Homepage)
==================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-section__slide {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-section__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-section__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-section__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.9) 0%, rgba(21, 49, 92, 0.85) 100%);
    z-index: 1;
}

.hero-section__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 60px 0;
    color: white;
}

.hero-section__tags {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.hero-section__tag {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
}

.hero-section__tag i {
    color: var(--primary-orange);
    margin-right: 8px;
}

.hero-section__title {
    font-size: 64px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 25px;
    color: white;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-section__title span {
    color: var(--primary-orange);
    position: relative;
    display: inline-block;
}

.hero-section__title span::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(240, 83, 35, 0.3);
    z-index: -1;
}

.hero-section__desc {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
}

.hero-section__actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* ====================================
   Company Overview
==================================== */
.company-overview {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.company-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

@media (max-width: 991px) {
    .company-overview__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.company-overview__content {
    position: relative;
}

.company-overview__highlight {
    font-size: 16px;
    line-height: 1.8;
    color: var(--primary-blue);
    margin-bottom: 30px;
    padding: 30px;
    text-align: justify;
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.03) 0%, transparent 100%);
    border-radius: 5px;
    border-left: 4px solid var(--primary-orange);
    box-shadow: var(--shadow-sm);
}

.company-overview__text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-dark);
    margin-bottom: 25px;
}

.company-overview__media {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.company-overview__image-wrapper {
    overflow: hidden;
}

.company-overview__image {
    width: 100%;
    height: auto;
    transition: transform 10s ease;
}

.company-overview__media:hover .company-overview__image {
    transform: scale(1.1);
}

.company-overview__badge {
    position: absolute;
    bottom: 40px;
    left: 40px;
    background: var(--gradient-accent);
    padding: 25px 30px;
    border-radius: var(--border-radius-md);
    color: white;
    box-shadow: var(--shadow-orange);
    animation: float 6s ease-in-out infinite;
}

.company-overview__badge-number {
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
}

.company-overview__badge-text {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

@media screen and (max-width: 480px){
    .company-overview {
        padding: 70px 0;
    }

    .services-showcase__intro {
        padding-right: 0px !important;
    }

    .company-overview__text{
        text-align: justify;
        font-size: 15px;
    }

    .services-showcase__desc{
        text-align: justify;
    }

    .services-showcase__list{
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/* ====================================
   About Section (with slider)
==================================== */
.about-section-modern {
    padding: 100px 0;
    background: #fff;
}

.about-subtitle-modern {
    display: inline-block;
    padding: 8px 24px;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(29, 64, 120, 0.05));
    color: var(--primary-orange);
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    border: 1px solid rgba(240, 83, 35, 0.2);
    max-width: fit-content;
}

.about-title-modern {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 60px;
    line-height: 1.2;
    position: relative;
}

.about-title-modern::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.about-description-modern p {
    font-size: 15px;
    line-height: 1.6rem;
    color: var(--gray-dark);
    margin-bottom: 20px;
    transition: var(--transition);
    max-width: 95%;
    text-align: justify;
}

.about-description-modern p:hover {
    border-left-color: var(--primary-orange);
    transform: translateX(5px);
}

/* About Slider */
.about-slider-modern {
    position: relative;
    height: 100%;
    min-height: 500px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.slider-container-modern {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-slide-modern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    background-size: cover;
    background-position: center;
}

.slider-slide-modern.active {
    opacity: 1;
    visibility: visible;
}

.slider-slide-modern::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(29, 64, 120, 0.9), transparent);
}

.slider-controls-modern {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 10;
    display: flex;
    gap: 10px;
}

.slider-control-modern {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(29, 64, 120, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 18px;
}

.slider-control-modern:hover {
    background: var(--primary-orange);
    border-color: var(--primary-orange);
    transform: scale(1.1);
}

.slider-dots-modern {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 10;
    display: flex;
    gap: 8px;
}

.slider-dot-modern {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: var(--transition);
}

.slider-dot-modern.active {
    background: var(--primary-orange);
    transform: scale(1.3);
    width: 30px;
    border-radius: 10px;
}

/* ====================================
   Services Showcase
==================================== */
.services-showcase {
    padding: 120px 0 180px;
    position: relative;
    background: var(--gradient-primary);
    overflow: visible;
    margin-bottom: -80px;
}

.services-showcase__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.services-showcase__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
}

.services-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .services-showcase__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.services-showcase__intro {
    padding-right: 40px;
}

.services-showcase__subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.services-showcase__subtitle i {
    margin-right: 8px;
}

.services-showcase__title {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
}

.services-showcase__desc {
    font-size: 15px;
    line-height: 1.6rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.services-showcase__list {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-md);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 70px;
    margin-bottom: 50px;
}

.services-showcase__list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 16px;
    transition: var(--transition);
}

.services-showcase__list-item:last-child {
    border-bottom: none;
}

.services-showcase__list-item:hover {
    padding-left: 15px;
    background: rgba(240, 83, 35, 0.1);
    border-radius: 10px;
}

.services-showcase__list-item i {
    color: var(--primary-orange);
    font-size: 18px;
}

/* ====================================
   Mission Section
==================================== */
.mission-section-modern {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.mission-card-modern {
    background: white;
    padding: 50px 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.mission-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg), var(--shadow-orange);
    border-color: var(--primary-orange);
}

.mission-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(179deg, #1d4078 0.46%, #15315c 87.03%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.mission-card-modern:hover::before {
    transform: scaleX(1);
}

.mission-icon-modern {
    width: 90px;
    height: 90px;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 15px 30px rgba(240,83,35,0.3);
    transition: var(--transition);
}

.mission-card-modern:hover .mission-icon-modern {
    transform: rotateY(180deg);
    background: linear-gradient(179deg, #1d4078 0.46%, #15315c 87.03%);
}

.mission-icon-modern i {
    font-size: 40px;
    color: white;
}

.mission-card-modern h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.mission-card-modern p {
    font-size: 15px;
    line-height: 1.6rem;
    color: var(--gray-dark);
    margin-bottom: 0;
}

/* ====================================
   Features Section with Background
==================================== */
.features-section-modern {
    position: relative;
    padding: 120px 0 200px;
    background: #1d4078;
    overflow: hidden;
}

.features-bg-modern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../images/background/2.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.features-overlay-modern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.97) 0%, rgba(29, 64, 120, 0.92) 100%);
    backdrop-filter: blur(2px);
}

.features-content-modern {
    position: relative;
    z-index: 3;
}

.features-subtitle-modern {
    color: var(--primary-orange);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
    display: inline-block;
}

.features-title-modern {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin-bottom: 25px;
    line-height: 1.2;
}

.features-desc-modern {
    font-size: 15px;
    line-height: 1.6rem;
    color: rgba(255,255,255,0.95);
    margin-bottom: 20px;
}

@media screen and (max-width: 480px){
    .team-title-modern {
        font-size: 28px !important;
    }
    .feature-desc-modern{
        text-align: justify;
    }
}

/*display none the after icon  because we have another one */
.dropdown-toggle:after{
    display: none !important;
}
/*------------------------------------*\
    #Features (Additional)
\*------------------------------------*/
.features {
    padding-top   : 130px;
    padding-bottom: 100px;
    overflow      : visible;
}

@media screen and (max-width: 767.98px) {
    .features {
        padding-top   : 70px;
        padding-bottom: 70px;
    }
}

.features .feature-panel-holder {
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.features .feature-panel-holder:hover .feature-panel {
    background-color: var(--global--color-white);
}

.features .feature-panel-holder:hover .feature-panel .feature-icon {
    -webkit-animation: bounce 0.5s ease-in-out;
    animation        : bounce 0.5s ease-in-out;
}

.features .feature-panel-holder:hover .feature-panel a {
    background-color: var(--global--color-primary);
    padding-left    : 15px;
    padding-right   : 15px;
}

.features .feature-panel-holder:hover .feature-panel a i {
    color: var(--global--color-white);
}

.features .feature-panel-holder:hover .feature-panel a span {
    font-size  : 14px;
    opacity    : 1;
    margin-left: 10px;
}

.features .feature-panel-holder:hover .feature-panel.feature-panel-2 {
    -webkit-box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.21);
    box-shadow        : 0px 5px 83px 0px rgba(40, 40, 40, 0.21);
}

.features .feature-panel-holder .feature-panel {
    position             : relative;
    padding              : 39px 35px 40px;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    text-align           : center;
    overflow             : hidden;
    background-color     : var(--global--color-white);
    border-radius        : 8px;
    -webkit-box-shadow   : 0px 5px 83px 0px rgba(40, 40, 40, 0.21);
    box-shadow           : 0px 5px 83px 0px rgba(40, 40, 40, 0.21);
    cursor               : pointer;
    margin-bottom        : 30px;
    -webkit-transition   : 0.3s ease-in-out;
    -o-transition        : 0.3s ease-in-out;
    transition           : 0.3s ease-in-out;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .features .feature-panel-holder .feature-panel {
        padding: 39px 19px 40px;
    }
}

@media screen and (max-width: 991.98px) {
    .features .feature-panel-holder .feature-panel {
        max-width: 370px;
        margin   : 0 auto 30px;
    }
}

.features .feature-panel-holder .feature-panel .feature-icon {
    margin-bottom: 17px;
}

.features .feature-panel-holder .feature-panel .feature-icon i::before {
    color             : var(--global--color-primary);
    margin-left       : 0;
    font-size         : 65px;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.features .feature-panel-holder .feature-panel .feature-content {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    text-align           : center;
}

.features .feature-panel-holder .feature-panel .feature-content h4 {
    font-family       : var(--global--font-heading);
    font-weight       : 600;
    font-size         : 19px;
    line-height       : 27px;
    text-transform    : capitalize;
    margin-bottom     : 16px;
    color             : var(--global--color-secondary);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.features .feature-panel-holder .feature-panel .feature-content p {
    font-family       : var(--global--font-body);
    font-size         : 15px;
    line-height       : 25px;
    margin-bottom     : 20px;
    color             : var(--global--color-body);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.features .feature-panel-holder .feature-panel a {
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    padding           : 10px;
    height            : 32px;
    border-radius     : 16px;
    background-color  : var(--global--color-heading);
    font-size         : 12px;
    color             : var(--global--color-white);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    -webkit-box-shadow: 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
    box-shadow        : 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
}

.features .feature-panel-holder .feature-panel a i {
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.features .feature-panel-holder .feature-panel a span {
    font-size         : 0;
    opacity           : 0;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    display           : -webkit-inline-box;
    display           : -ms-inline-flexbox;
    display           : inline-flex;
    text-transform    : capitalize;
    font-family       : var(--global--font-body);
    font-weight       : 700;
    font-size         : 0px;
    color             : var(--global--color-white);
}

.features .feature-panel-holder .feature-panel.feature-panel-2 {
    -webkit-box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.11);
    box-shadow        : 0px 5px 83px 0px rgba(40, 40, 40, 0.11);
}

.features .actions-holder {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
}

@media screen and (max-width: 991.98px) {
    .features .actions-holder {
        -webkit-box-pack: center;
        -ms-flex-pack   : center;
        justify-content : center;
    }
}

@media screen and (max-width: 767.98px) {
    .features .actions-holder {
        -webkit-box-orient   : vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction   : column;
        flex-direction       : column;
    }
}

.features .actions-holder .btn {
    margin-right: 30px;
}

.features .actions-holder .btn:first-child {
    width: 170px;
}

.features .actions-holder .btn:last-child {
    width       : 180px;
    margin-right: 0;
    padding     : 0 28px;
}

@media screen and (max-width: 767.98px) {
    .features .actions-holder .btn {
        margin-right : 0;
        margin-bottom: 20px;
    }
}

.features .carousel-dots .owl-dots {
    margin-top   : 10px;
    margin-bottom: 70px;
}

.features.features-1 {
    padding-bottom: 0;
}

.features-bar {
    padding-top   : 0;
    padding-bottom: 0px;
    overflow      : visible;
}

.features-bar .features-holder {
    position         : relative;
    z-index          : 55;
    -webkit-transform: translateY(-80px);
    -ms-transform    : translateY(-80px);
    transform        : translateY(-80px);
    margin-bottom    : -80px;
    border-radius    : 4px;
    overflow         : hidden;
}

.features-bar .features-holder .col{
    margin-right: 10px;
}

@media screen and (max-width: 567px) {
    .features-bar .features-holder {
        max-width: 370px;
    }
}

@media screen and (min-width: 992px) {
    .features-bar .features-holder {
        -webkit-box-shadow: 0px 5px 83px 0px rgba(9, 29, 62, 0.15);
        box-shadow        : 0px 5px 83px 0px rgba(9, 29, 62, 0.15);
    }
}

@media screen and (max-width: 767.98px) {
    .features-bar .features-holder {
        margin: 0 auto -80px;
    }
}

@media screen and (max-width: 767px) {
    .features-bar .features-holder {
        padding-bottom: 40px;
    }
}

.features-bar .features-holder .feature-panel {
    background: #fff;
    padding: 34px 40px 40px;
    min-height: 240px;
    border:1px solid #fff;
    border-radius: 15px;
    transition: .3s all ease-in-out;
}

.features-bar .features-holder .feature-panel:hover {
    cursor: pointer;
    border:1px solid #f05323;
    transition: .3s all ease-in-out;
}

@media screen and (max-width: 767px) {
    .features-bar .features-holder .feature-panel {
        padding-bottom: 0;
    }
}

@media screen and (min-width: 992px) {
    .features-bar .features-holder .feature-panel {
        -webkit-box-shadow: 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
        box-shadow        : 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
    }
}

@media screen and (max-width: 991.98px) {
    .features-bar .features-holder .feature-panel {
        max-width: 370px;
        margin   : 0 auto;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .features-bar .features-holder .feature-panel {
        padding-left : 30px;
        padding-right: 30px;
    }
}

.features-bar .features-holder .feature-panel:hover .feature-content i {
    color            : var(--global--color-white);
    background-color : var(--global--color-primary);
    -webkit-transform: rotate(360deg);
    -ms-transform    : rotate(360deg);
    transform        : rotate(360deg);
}

.features-bar .features-holder .feature-panel .feature-content {
    position             : relative;
    z-index              : 3;
    text-align           : center;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
}

.features-bar .features-holder .feature-panel .feature-content i {
    margin-bottom     : 7px;
    width             : 94px;
    height            : 94px;
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    border-radius     : 50%;
    background-color  : var(--global--color-white);
    color             : var(--global--color-primary);
    position          : relative;
    overflow          : hidden;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.features-bar .features-holder .feature-panel .feature-content i::before {
    font-size: 65px;
    z-index  : 2;
}

.features-bar .features-holder .feature-panel .feature-content h5 {
    text-transform: capitalize;
    font-family   : var(--global--font-heading);
    font-weight   : 600;
    font-size     : 16px;
    line-height   : 1.6rem;
    color         : var(--global--color-secondary);
    margin-bottom : 0px;
}

.features-bar .actions-holder {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
}

@media screen and (max-width: 991.98px) {
    .features-bar .actions-holder {
        -webkit-box-pack: center;
        -ms-flex-pack   : center;
        justify-content : center;
    }
}

@media screen and (max-width: 767.98px) {
    .features-bar .actions-holder {
        -webkit-box-orient   : vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction   : column;
        flex-direction       : column;
    }
}

.features-bar .actions-holder .btn {
    width       : 170px;
    height      : 60px;
    margin-right: 30px;
}

@media screen and (max-width: 767.98px) {
    .features-bar .actions-holder .btn {
        margin-right : 0;
        margin-bottom: 20px;
    }
}

.features-bar .actions-holder .btn:last-child {
    border-color               : #687696;
    border                     : 2px solid;
    -webkit-transition-property: background, color, border-color;
    -o-transition-property     : background, color, border-color;
    transition-property        : background, color, border-color;
}

.features-bar .actions-holder .btn:last-child::before {
    background-color: var(--global--color-primary);
    width           : calc(100% + 4px);
    height          : calc(100% + 4px);
    top             : -2px;
    left            : -2px;
}

.features-bar .actions-holder .btn:last-child:hover {
    border-color: var(--global--color-secondary);
}

/* ====================================
   Values Grid
==================================== */
.values-grid-modern {
    margin-top: 60px;
}

.value-card-modern {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    padding: 35px 25px;
    border-radius: var(--border-radius);
    text-align: center;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.value-card-modern::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(240, 83, 35, 0.15);
    transition: height 0.4s ease;
    z-index: 0;
}

.value-card-modern:hover {
    transform: translateY(-10px);
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-orange);
    background: rgba(255, 255, 255, 0.12);
}

.value-card-modern:hover::before {
    height: 100%;
}

.value-icon-modern {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f05323 0%, #ff6b3d 100%);
    border-radius: 50%;
    transition: var(--transition);
}

.value-card-modern:hover .value-icon-modern {
    transform: scale(1.1) rotate(360deg);
    background: linear-gradient(135deg, #1d4078 0%, #2a5298 100%);
}

.value-icon-modern i {
    font-size: 32px;
    color: white;
}

.value-card-modern h5 {
    position: relative;
    z-index: 2;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.6rem;
}

/* ====================================
   Client Partners
==================================== */
.client-partners {
    padding: 60px 0 80px;
    position: relative;
    overflow: visible;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    z-index: 10;
}

.client-partners__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

@media (max-width: 991px) {
    .client-partners__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.client-partners__slider {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.client-partners__track {
    display: flex;
    animation: scrollPartners 30s linear infinite;
    gap: 40px;
}

.client-partners__track:hover {
    animation-play-state: paused;
}

.client-partners__logo {
    height: 100px;
    width: auto;
    object-fit: contain;
    transition: var(--transition);
    cursor: pointer;
    filter: grayscale(30%);
    opacity: 0.7;
}

.client-partners__logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1) translateY(-5px);
}

.client-partners__card {
    background: var(--gradient-primary);
    padding: 50px;
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    margin-top: -150px;
    z-index: 20;
}

@media (max-width: 991px) {
    .client-partners__card {
        margin-top: 0;
    }
}

.client-partners__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px rgba(29, 64, 120, 0.3);
}

.client-partners__card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.client-partners__card-icon {
    font-size: 50px;
    color: white;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.client-partners__card-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.client-partners__card-desc {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

/* ====================================
   Team Section
==================================== */
.team-section-modern,
.contact-team {
    padding: 100px 0;
    background: #fff;
}

.team-header-modern {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-subtitle-modern {
    display: inline-block;
    padding: 8px 25px;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(29, 64, 120, 0.05));
    color: var(--primary-orange);
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
    max-width: max-content;
}

.team-title-modern {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}

.team-title-modern::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.team-grid-modern,
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

@media (max-width: 991px) {
    .team-grid-modern,
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .team-grid-modern,
    .team-grid {
        grid-template-columns: 1fr;
    }
}

.team-card-modern,
.team-member {
    text-align: center;
    padding: 40px 25px;
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: 1px solid #e9ecef;
    box-shadow: var(--shadow-sm);
}

.team-card-modern:hover,
.team-member:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg), 0 10px 30px rgba(29, 64, 120, 0.15);
    border-color: var(--primary-orange);
}

.team-icon-modern {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #1d4078 0%, #2a5298 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: var(--transition);
}

.team-card-modern:hover .team-icon-modern {
    background: linear-gradient(135deg, #f05323 0%, #ff6b3d 100%);
    transform: rotateY(360deg);
}

.team-icon-modern i {
    font-size: 35px;
    color: white;
}

.team-card-modern h4,
.team-member h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 15px;
}

.team-card-modern p,
.team-member p {
    font-size: 15px;
    line-height: 1.6rem;
    color: var(--gray-dark);
    margin-bottom: 0;
}

/* Member Image */
.member-image {
    height: 280px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.member-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.2), rgba(29, 64, 120, 0.2));
    opacity: 0;
    transition: var(--transition);
}

.team-member:hover .member-image::before {
    opacity: 1;
}

.member-info {
    padding: 25px 20px;
    text-align: center;
}

.member-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.member-info p {
    color: var(--primary-orange);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

.member-social {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.member-social a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 83, 35, 0.1);
    color: var(--primary-orange);
    border-radius: 50%;
    transition: var(--transition);
}

.member-social a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
}

/* ====================================
   Why Choose Us Section
==================================== */
.why-choose-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    position: relative;
    overflow: hidden;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

@media (max-width: 991px) {
    .why-choose-grid {
        grid-template-columns: 1fr;
    }
}

.why-choose-content {
    padding-right: 40px;
}

.why-choose-list {
    margin-top: 30px;
}

.why-choose-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    transition: var(--transition);
}

.why-choose-item:hover {
    transform: translateX(10px);
}

.why-choose-item:last-child {
    border-bottom: none;
}

.why-choose-icon {
    width: 60px;
    height: 60px;
    background: rgba(240, 83, 35, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-orange);
    font-size: 24px;
    flex-shrink: 0;
    transition: var(--transition);
}

.why-choose-item:hover .why-choose-icon {
    background: var(--gradient-accent);
    color: white;
    transform: rotate(360deg);
}

.why-choose-text h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.why-choose-text p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-light);
    margin: 0;
}

.why-choose-image {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.why-choose-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease;
}

.why-choose-image:hover img {
    transform: scale(1.05);
}

.why-choose-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.2), rgba(240, 83, 35, 0.2));
    z-index: 1;
}

.experience-badge {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: var(--gradient-accent);
    padding: 20px;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 2;
    box-shadow: var(--shadow-orange);
    animation: pulse 2s infinite;
}

.experience-badge .years {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.experience-badge .text {
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
}

/* ====================================
   Responsive Adjustments
==================================== */
@media (max-width: 1200px) {
    .hero-section__title {
        font-size: 54px;
    }

    .services-showcase__title {
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    .hero-section__title {
        font-size: 48px;
    }

    .hero-section__content {
        padding: 40px;
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .hero-section__tags {
        justify-content: center;
    }

    .hero-section__desc {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-section__actions {
        justify-content: center;
    }

    .services-showcase {
        padding: 80px 0 80px;
        margin-bottom: 0;
    }

    .company-overview__badge {
        bottom: 20px;
        left: 20px;
        padding: 15px 20px;
    }

    .company-overview__badge-number {
        font-size: 32px;
    }

    .about-slider-modern {
        min-height: 400px;
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .hero-section {
        min-height: 80vh;
    }

    .hero-section__title {
        font-size: 36px;
    }

    .hero-section__desc {
        font-size: 16px;
    }

    .hero-section__tag {
        font-size: 12px;
        padding: 6px 15px;
    }

    .services-showcase__title {
        font-size: 28px;
    }

    .services-showcase__list {
        padding: 25px;
    }

    .client-partners__logo {
        height: 50px;
    }

    .client-partners__card {
        padding: 30px;
    }

    .client-partners__card-title {
        font-size: 24px;
    }

    .about-title-modern {
        font-size: 32px;
        margin-bottom: 45px;
    }

    .about-slider-modern {
        min-height: 350px;
    }

    .mission-card-modern {
        padding: 40px 25px;
    }

    .mission-card-modern h3 {
        font-size: 24px;
    }

    .features-title-modern {
        font-size: 32px;
    }

    .value-card-modern {
        padding: 30px 20px;
    }

    .value-card-modern h5 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero-section__title {
        font-size: 28px;
    }

    .hero-section__desc {
        font-size: 15px;
    }

    .hero-section__actions {
        flex-direction: column;
        gap: 15px;
    }

    .hero-section__btn {
        width: 100%;
    }

    .hero-section .owl-nav {
        display: none;
    }

    .hero-section .owl-dots {
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }

    .company-overview__highlight {
        font-size: 15px;
        padding: 20px;
    }

    .services-showcase__title {
        font-size: 24px;
    }

    .services-showcase__subtitle {
        font-size: 12px;
        padding: 6px 15px;
    }

    .client-partners__card {
        padding: 25px;
    }

    .client-partners__card-title {
        font-size: 22px;
    }

    .client-partners__card-desc {
        font-size: 14px;
    }

    .about-title-modern {
        font-size: 28px;
    }

    .about-subtitle-modern {
        font-size: 11px;
        padding: 5px 15px;
    }

    .mission-card-modern {
        padding: 35px 20px;
    }

    .mission-card-modern h3 {
        font-size: 22px;
    }

    .mission-icon-modern {
        width: 70px;
        height: 70px;
    }

    .mission-icon-modern i {
        font-size: 30px;
    }

    .features-title-modern {
        font-size: 28px;
    }

    .features-subtitle-modern {
        font-size: 13px;
    }

    .value-card-modern {
        padding: 25px 15px;
    }

    .value-icon-modern {
        width: 60px;
        height: 60px;
    }

    .value-icon-modern i {
        font-size: 28px;
    }

    .team-card-modern {
        padding: 30px 20px;
    }

    .team-icon-modern {
        width: 70px;
        height: 70px;
    }

    .team-icon-modern i {
        font-size: 30px;
    }

    .slider-controls-modern {
        bottom: 20px;
        right: 20px;
    }

    .slider-control-modern {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .slider-dots-modern {
        bottom: 20px;
        left: 20px;
    }
}

/*------------------------------------*\
    #11. LOGISTICS PAGE STYLES
    Logistics and capabilities page specific styles
\*------------------------------------*/

/* ====================================
   Logistics Section Base
==================================== */
.logistic-section {
    padding: 80px 0;
}

/* Dark Background Variant */
.logistic-section.bg-primary {
    background: var(--gradient-primary) !important;
    position: relative;
    overflow: hidden;
}

.logistic-section.bg-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../images/background/wavy-pattern.png');
    opacity: 0.1;
    pointer-events: none;
}

/* Dark Section Content Spacing */
.dark-section-content {
    padding-right: 40px;
}

@media (max-width: 991px) {
    .dark-section-content {
        padding-right: 0;
    }
}

/* ====================================
   Featured Images Grid
==================================== */
.featured-images {
    display: grid;
    margin: 2rem 0;
    gap: 15px;
}

.featured-images figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
}

.featured-images figure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.2), rgba(240, 83, 35, 0.2));
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
    pointer-events: none;
}

.featured-images figure:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.featured-images figure:hover::before {
    opacity: 1;
}

.feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.featured-images figure:hover .feature-img {
    transform: scale(1.1);
}

/* Grid Layouts */
.feature-image-row-1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 250px);
}

.feature-image-row-2 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 280px);
}

.feature-image-row-3 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px);
}

/* Responsive Grid */
@media (max-width: 991px) {
    .feature-image-row-1 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 220px);
    }

    .feature-image-row-2 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 280px);
    }

    .feature-image-row-3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 180px);
    }
}

@media (max-width: 576px) {
    .feature-image-row-1,
    .feature-image-row-2,
    .feature-image-row-3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .featured-images figure {
        height: 250px;
    }
}

/* ====================================
   Content Styles
==================================== */
.about-block p {
    font-size: 15px;
    line-height: 1.6rem;
    color: var(--gray-light);
    margin-bottom: 20px;
}

.bg-primary .about-block p {
    color: rgba(255, 255, 255, 0.9);
}

/* ====================================
   More Tools Link
==================================== */
.more-tools {
    text-align: left;
    margin-top: 40px;
}

.more-tools a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
    text-transform: capitalize;
    padding: 12px 30px;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    border-radius: 50px;
    border: 1px solid rgba(240, 83, 35, 0.2);
}

.more-tools a i {
    color: var(--primary-orange);
    transition: var(--transition);
}

.more-tools a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: transparent;
}

.more-tools a:hover i {
    color: white;
    transform: translateX(5px);
}

/* ====================================
   Logistics Page Title
==================================== */
.logistics-page-title .page-title-wrap {
    min-height: 500px;
}

.logistics-page-title .title-heading {
    font-size: 56px;
}

.logistics-page-title .title-desc {
    font-size: 15px;
    line-height: 1.6rem;
    max-width: 800px;
    margin-top: 30px;
}

/* ====================================
   Logistics Section Header
==================================== */
.logistics-section-header {
    margin-bottom: 40px;
}

.logistics-section-header .heading-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.logistics-section-header .heading-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 25px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

.logistics-section-header .heading-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.logistics-section-header .heading-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.logistics-section-header p {
    font-size: 15px;
    line-height: 1.6rem;
    text-align: justify;
    color: var(--gray-light);
    margin-top: 15px;
}

/* Light Text for Dark Background */
.text-light .logistics-section-header .heading-title {
    color: white;
}

.text-light .logistics-section-header p {
    color: rgba(255, 255, 255, 0.9);
}

/* ====================================
   Text Color Utilities
==================================== */
/*------------------------------------*\
    #Backgrounds (Additional)
\*------------------------------------*/
.bg-theme {
    background-color: var(--global--color-primary) !important;
}

.bg-theme2 {
    background-color: var(--global--color-heading) !important;
}

.bg-gray {
    background-color: var(--global--color-gray) !important;
}

.bg-grey {
    background-color: #f6f7f8 !important;
}

.bg-dark-gray {
    background-color: #3a3a3a;
}

.bg-dark {
    background-color: #222222 !important;
}

.bg-secondary {
    background-color: var(--global--color-secondary);
}

/* Background Image */
.bg-section {
    position           : relative;
    overflow           : hidden;
    z-index            : 1;
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: center center;
    width              : 100%;
    height             : 100%;
}

.bg-parallax {
    background-attachment: fixed;
}

.bg-overlay:before {
    content : "";
    display : inline-block;
    height  : 100%;
    left    : 0;
    position: absolute;
    top     : 0;
    width   : 100%;
    z-index : -1;
}

.bg-overlay-light:before {
    background-color: var(--global--color-white);
    opacity         : 0.8;
}

.bg-overlay-dark:before {
    background-color: rgba(29, 42, 77, 0.45);
}

.bg-overlay-dark-2:before {
    background: linear-gradient(180deg, var(--dark-2) 0%, transparent 100%);
    opacity: 0.55;
}

.bg-overlay-dark-3:before {
    background: linear-gradient(180deg, var(--dark-2) 0%, transparent 100%);
}

.bg-overlay-dark-slider:before,
.bg-overlay-dark-slider-2:before {
    background: linear-gradient(180deg, #14191c 0%, transparent 82%);
}

.bg-overlay-theme:before {
    background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.8) 0%, var(--theme-primary) 82%);
}

.bg-overlay-theme2:before {
    background: linear-gradient(180deg, var(--theme-primary) 20%, rgba(var(--theme-primary-rgb), 0.8) 80%);
}

.bg-overlay-theme3:before {
    background: linear-gradient(180deg, #252525 50%, rgba(37, 37, 37, 0.9) 100%);
}

.bg-overlay-theme4 {
    background-color: var(--global--color-heading);
}

.bg-overlay-theme4:before {
    background: linear-gradient(180deg, transparent 0%, #1F313F 70%);
}

.bg-overlay-theme5:before {
    background: linear-gradient(180deg, var(--theme-secondary) 46%, rgba(50, 195, 108, 0.4) 144%);
}

.bg-overlay-video:before {
    background: linear-gradient(180deg, rgba(29, 42, 77, 0.01) 42%, #1D2A4D 90%);
    opacity: 0.8;
}

.bg-overlay-white:before {
    background: linear-gradient(180deg, var(--white) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.bg-overlay-white2:before {
    background: linear-gradient(0deg, var(--white) 34%, rgba(255, 255, 255, 0) 44%);
}

.bg-overlay-white3:before {
    background: linear-gradient(180deg, transparent 0%, var(--off-white) 90%);
}

/* Background Video */
.bg-video {
    position: relative;
}

.bg-video iframe {
    position         : absolute;
    top              : 0;
    left             : 0;
    right            : 0;
    -o-object-fit    : cover;
    object-fit       : cover;
    width            : 100%;
    height           : 100%;
    -webkit-transform: rotateZ(0);
    -ms-transform    : rotate(0);
    transform        : rotateZ(0);
}

.bg-video h2 {
    text-transform   : capitalize;
    position         : absolute;
    top              : 50%;
    left             : 50%;
    -webkit-transform: translate(-50%);
    -ms-transform    : translate(-50%);
    transform        : translate(-50%);
    z-index          : 5;
}

.bg-animate {
    background-size    : cover;
    background-position: 0px 0px;
    background-repeat  : repeat-x;
    -webkit-animation  : animatedBackground 30s linear infinite;
    animation          : animatedBackground 30s linear infinite;
}

@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

/*------------------------------------*\
    #Lists (Additional)
\*------------------------------------*/
ul.list-icons {
    padding        : 0;
    font-size      : 14px;
    list-style-type: none;
}

ul.list-icons li {
    font-family: var(--global--font-body);
    color      : var(--global--color-body);
    font-size  : 16px;
    font-weight: 400;
    line-height: 29px;
    position   : relative;
}

ul.list-icons li i {
    font-size   : 14px;
    color       : var(--global--color-heading);
    margin-right: 10px;
}

.advantages-list {
    text-align: left;
    margin    : 0;
    padding   : 0;
    list-style: none;
}

.advantages-list li {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    font-family      : var(--global--font-body);
    font-weight      : 600;
    font-size        : 16px;
    line-height      : 1.8rem;
    color            : var(--global--color-body);
    text-transform   : capitalize;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .advantages-list li {
        font-size: 16px;
    }
}

@media screen and (max-width: 991.98px) {
    .advantages-list li {
        display     : -webkit-inline-box;
        display     : -ms-inline-flexbox;
        display     : inline-flex;
        margin-right: 20px;
    }
}

@media screen and (max-width: 767.98px) {
    .advantages-list li {
        display     : -webkit-box;
        display     : -ms-flexbox;
        display     : flex;
        margin-right: 0px;
    }
}

.advantages-list li::before {
    content          : '\f00c';
    font-family      : "Font Awesome 5 Free";
    font-weight      : 700;
    width            : 20px;
    height           : 20px;
    display          : -webkit-inline-box;
    display          : -ms-inline-flexbox;
    display          : inline-flex;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    background-color : var(--global--color-primary);
    color            : var(--global--color-white);
    margin-right     : 15px;
    border-radius    : 50%;
    font-size        : 10px;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .advantages-list li::before {
        margin-right: 8px;
    }
}

.advantages-list.advantages-list-2 li {
    color: var(--global--color-white);
}

.advantages-list.advantages-list-2 li::before {
    background-color: var(--global--color-heading);
}

.advantages-list.advantages-list-3 li::before {
    background-color: var(--global--color-heading);
}

.advantages-list.advantages-list-white li {
    color: var(--global--color-white);
}

.advantages-list.advantages-list-white li::before {
    color           : var(--global--color-primary);
    background-color: var(--global--color-white);
}

/*------------------------------------*\
    #PAGINATION (Additional)
\*------------------------------------*/
.pagination li {
    margin-right: 10px;
    display     : inline-block;
}

.pagination li a,
.pagination li span {
    display           : -webkit-inline-box;
    display           : -ms-inline-flexbox;
    display           : inline-flex;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    background-color  : var(--global--color-white);
    color             : var(--global--color-heading);
    font-family       : var(--global--font-body);
    font-size         : 16px;
    font-weight       : 700;
    text-transform    : uppercase;
    padding           : 0;
    width             : 50px;
    height            : 50px;
    border-radius     : 4px;
    border            : 2px solid #929ba2;
    -webkit-transition: 300ms ease-in-out;
    -o-transition     : 300ms ease-in-out;
    transition        : 300ms ease-in-out;
}

.pagination li a:hover,
.pagination li span:hover {
    background-color: var(--global--color-heading);
    color           : var(--global--color-white);
    border-color    : var(--global--color-heading);
}

.pagination li a i,
.pagination li span i {
    font-size: 12px;
}

.pagination li a.current,
.pagination li span.current {
    background-color: var(--global--color-heading);
    color           : var(--global--color-white);
    border-color    : var(--global--color-heading);
}
.text-white {
    color: white !important;
}

.text-white-90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.text-white-80 {
    color: rgba(255, 255, 255, 0.8) !important;
}


.text-white-70 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-justified {
    text-align: justify;
}

/* Section header white title */
.logistics-section-header .heading-title.text-white {
    color: white;
}

.logistics-section-header .heading-title.text-white::after {
    background: var(--gradient-accent);
}

/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .logistic-section {
        padding: 60px 0;
    }

    .logistics-page-title .title-heading {
        font-size: 42px;
    }

    .logistics-section-header .heading-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .logistic-section {
        padding: 40px 0;
    }

    .logistics-page-title .title-heading {
        font-size: 36px;
    }

    .logistics-section-header .heading-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    [class*="col-lg-"] {
        margin-bottom: 30px;
    }

    [class*="col-lg-"]:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .logistics-page-title .title-heading {
        font-size: 28px;
    }

    .logistics-section-header .heading-title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .about-block p,
    .logistics-section-header p {
        font-size: 15px;
    }
}


/*------------------------------------*\
    #12. CORPORATE RESPONSIBILITY PAGE STYLES
    Corporate responsibility, ethics, and sustainability sections
\*------------------------------------*/

/* ====================================
   Corporate Responsibility Page Title
==================================== */
.corporate-title .page-title-wrap {
    min-height: 340px;
}

.corporate-title .title-heading {
    font-size: 48px;
}

/* ====================================
   Corporate Sections Base
==================================== */
.corporate-section {
    padding: 80px 0;
    position: relative;
}

.corporate-section:first-of-type {
    padding-top: 0;
}

.corporate-section.about-1 {
    background-color: #f8f6f1;
}

/* ====================================
   Quote Block
==================================== */
.corporate-quote {
    padding: 40px 0 40px 0;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    display: table;
    margin: 0 0 60px 0;
    width: 100%;
}

.corporate-quote .quote-text {
    font-size: 26px;
    font-family: 'Inter', serif;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    padding-right: 26px;
    text-align: justify;
    color: var(--primary-blue);
    position: relative;
}

.corporate-quote .quote-text::before {
    content: '"';
    font-size: 60px;
    color: var(--primary-orange);
    opacity: 0.2;
    position: absolute;
    top: -20px;
    left: -10px;
    font-family: serif;
}

/* ====================================
   About Content
==================================== */
.corporate-content {
    padding-right: 40px;
}

.corporate-content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    margin-bottom: 20px;
}

.corporate-content p b,
.corporate-content p strong {
    color: var(--primary-blue);
    font-weight: 600;
}

.corporate-content h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 25px 0 15px;
}

/* ====================================
   About Images
==================================== */
.corporate-image {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 100%;
    min-height: 400px;
}

.corporate-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    border-radius: var(--border-radius-lg);
}

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

.corporate-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.2), rgba(240, 83, 35, 0.2));
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
    border-radius: var(--border-radius-lg);
    pointer-events: none;
}

.corporate-image:hover::before {
    opacity: 1;
}

/* ====================================
   Section Specific Styles
==================================== */

/* Community Empowerment Section */
.community-section {
    padding: 0px 0px 80px 0px;
}

/* Ethics and Integrity Section */
.integrity-section {
    background-color: #f8f6f1;
}

/* Sustainability Section */
.sustainability-section {
    padding: 80px 0;
}

/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .corporate-title .title-heading {
        font-size: 42px;
    }

    .corporate-section {
        padding: 60px 0;
    }

    .corporate-image {
        min-height: 350px;
        margin-top: 30px;
    }

    .corporate-quote .quote-text {
        font-size: 22px;
    }

    .corporate-content {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .corporate-title .title-heading {
        font-size: 36px;
    }

    .corporate-section {
        padding: 40px 0;
    }

    .corporate-image {
        min-height: 300px;
    }

    [class*="col-lg-"] {
        margin-bottom: 30px;
    }

    [class*="col-lg-"]:last-child {
        margin-bottom: 0;
    }

    .corporate-quote .quote-text {
        font-size: 20px;
        padding-right: 0;
    }

    .corporate-quote {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .corporate-title .title-heading {
        font-size: 28px;
    }

    .corporate-content p {
        font-size: 15px;
    }

    .corporate-quote .quote-text {
        font-size: 18px;
    }

    .corporate-image {
        min-height: 250px;
    }
}





/*------------------------------------*\
    #13.6 AWARDS PAGE STYLES
    Awards and recognition sections
\*------------------------------------*/

.awards {
    padding-top   : 130px;
    padding-bottom: 80px;
}

@media screen and (max-width: 991.98px) {
    .awards {
        padding-top   : 70px;
        padding-bottom: 30px;
    }
}

.awards .award {
    margin-bottom: 30px;
}

.awards .award:hover .award-img {
    background-color: var(--global--color-primary);
}

.awards .award .award-img {
    padding           : 30px 40px;
    background-color  : #f3f3f3;
    border-radius     : 8px;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .awards .award .award-img {
        padding-left : 45px;
        padding-right: 45px;
    }
}

@media screen and (max-width: 991.98px) {
    .awards .award .award-img {
        padding-left : 40px;
        padding-right: 40px;
    }
}

.awards .award .award-img img {
    max-width: 100%;
    width:400px;
}

.awards .award .award-content {
    padding: 29px 30px 12px;
}

@media screen and (max-width: 991.98px) {
    .awards .award .award-content {
        text-align: center;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .awards .award .award-content {
        padding-left : 20px;
        padding-right: 20px;
    }
}

.awards .award .award-content .award-title {
    margin-bottom: 17px;
}

.awards .award .award-content .award-title a {
    font-family       : var(--global--font-heading);
    font-weight       : 700;
    font-size         : 18px;
    line-height       : 26px;
    color             : var(--global--color-secondary);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    text-transform    : capitalize;
}

.awards .award .award-title a:hover {
    color: var(--global--color-primary);
}

.awards .award .award-content .award-desc {
    font-family  : var(--global--font-body);
    font-weight  : 400;
    font-size    : 15px;
    line-height  : 25px;
    color        : var(--global--color-body);
    margin-bottom: 0;
}

/* ====================================
   Why Work With Us Section
==================================== */
.why-work-section {
    background-image: url('../../images/about/profile-cover.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
    padding: 100px 0;
}

.why-work-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.92) 0%,
    rgba(21, 49, 92, 0.88) 100%);
    pointer-events: none;
}

.why-work-section .container {
    position: relative;
    z-index: 2;
}

/* Heading Light Styles */
.why-work-heading {
    color: white;
}

.why-work-heading .heading-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.why-work-heading .heading-title {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin-bottom: 25px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

.why-work-heading .heading-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.why-work-heading .heading-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.why-work-heading .heading-desc b,
.why-work-heading .heading-desc strong {
    color: white;
    font-weight: 700;
}

.more-features p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
}

.more-features p a {
    color: var(--primary-orange);
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.more-features p a:hover {
    color: white;
    text-decoration: underline;
}

/* ====================================
   Owl Carousel Customization
==================================== */
.careers-carousel .owl-dots {
    margin-top: 40px;
    text-align: center;
}

.careers-carousel .owl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(29, 64, 120, 0.2) !important;
    border-radius: 50%;
    margin: 0 5px;
    transition: var(--transition);
}

.careers-carousel .owl-dot.active {
    background: var(--primary-orange) !important;
    transform: scale(1.3);
    width: 30px;
    border-radius: 10px;
}

/*------------------------------------*\
    #8.5 CAROUSEL STYLES
    Owl Carousel customizations
\*------------------------------------*/

.owl-nav.disabled {
    display: none;
}

.carousel-dots {
    position: relative;
}

.carousel-dots button.owl-dot,
.carousel-dots button.owl-dot:focus {
    padding           : 0;
    background-color  : transparent;
    border            : none;
    outline           : none;
    -webkit-box-shadow: none;
    box-shadow        : none;
}

.carousel-dots .owl-dots {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    -webkit-box-align: end;
    -ms-flex-align   : end;
    align-items      : flex-end;
    z-index          : 5;
}

.carousel-dots .owl-dots .owl-dot {
    margin-right: 10px;
    display     : -webkit-inline-box;
    display     : -ms-inline-flexbox;
    display     : inline-flex;
}

.carousel-dots .owl-dots .owl-dot:last-child {
    margin-right: 0;
}

.carousel-dots .owl-dots .owl-dot.active span {
    background-color: var(--global--color-primary);
    height          : 6px;
}

.carousel-dots .owl-dots .owl-dot span {
    display           : inline-block;
    width             : 35px;
    height            : 3px;
    border-top        : 3px solid transparent;
    background-color  : #6b7475;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    margin-right      : 0;
    position          : relative;
}

@media screen and (max-width: 767.98px) {
    .carousel-dots .owl-dots .owl-dot span {
        width: 25px;
    }
}

@media screen and (min-width: 992px) {
    .carousel-dots.dots-side .owl-dots {
        position: absolute;
        bottom  : -17px;
        right   : 0;
    }
}

@media screen and (max-width: 991.98px) {
    .carousel-dots.dots-side .owl-dots {
        margin-bottom: 35px;
    }
}

.owl-carousel .owl-stage-outer {
    overflow: visible;
}

.owl-carousel .owl-stage-outer .owl-item {
    opacity: 0;
}

.owl-carousel .owl-stage-outer .owl-item.active {
    opacity: 1;
}

.carousel-navs {
    position: relative;
}

.carousel-navs .owl-nav span {
    font-size: 0;
}

@media screen and (min-width: 992px) {
    .carousel-navs .owl-nav {
        position         : absolute;
        top              : 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform    : translateY(-50%);
        transform        : translateY(-50%);
        right            : 0;
        left             : 0;
    }
}

.carousel-navs .owl-next,
.carousel-navs .owl-prev {
    position: absolute;
}

.carousel-navs .owl-next:hover::before,
.carousel-navs .owl-prev:hover::before {
    color: var(--global--color-primary);
}

.carousel-navs .owl-next:before,
.carousel-navs .owl-prev:before {
    font-family       : 'carousel';
    font-size         : 43px;
    font-weight       : 600;
    color             : #687596;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.carousel-navs .owl-prev {
    left: 50px;
}

.carousel-navs .owl-prev:before {
    content: "\e990";
}

.carousel-navs .owl-next {
    right: 50px;
}

.carousel-navs .owl-next:before {
    content: "\e991";
}

.carousel-navs .owl-dots {
    position: absolute;
    bottom  : 30px;
    width   : 100%;
}


/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .careers-title .title-heading {
        font-size: 42px;
    }

    .why-work-heading .heading-title {
        font-size: 36px;
    }

    .careers-section {
        padding: 60px 0;
    }

    .why-work-section {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .careers-title .title-heading {
        font-size: 36px;
    }

    .careers-title .page-title-wrap {
        height: 380px;
    }

    .why-work-heading .heading-title {
        font-size: 32px;
    }

    .careers-section {
        padding: 40px 0;
    }

    .why-work-section {
        padding: 60px 0;
        text-align: center;
    }

    .why-work-heading .heading-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .why-work-heading .heading-subtitle {
        text-align: center;
    }

    .more-features {
        text-align: center;
    }

    .more-features .btn {
        margin: 0 auto;
    }

    [class*="col-lg-"] {
        margin-bottom: 30px;
    }

    [class*="col-lg-"]:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .careers-title .title-heading {
        font-size: 28px;
    }

    .careers-title .page-title-wrap {
        height: 340px;
    }

    .careers-title .title-desc {
        font-size: 14px;
    }

    .why-work-heading .heading-title {
        font-size: 28px;
    }

    .career-title {
        font-size: 20px;
    }

    .career-desc {
        font-size: 14px;
    }

    .career-meta {
        gap: 10px;
    }

    .career-type,
    .career-place {
        font-size: 11px;
        padding: 4px 12px;
    }
}

/*------------------------------------*\
    #14. REQUEST QUOTE PAGE STYLES
    Quote request form and related sections
\*------------------------------------*/

/* ====================================
   Quote Page Title
==================================== */
.quote-title .page-title-wrap {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.quote-title .title {
    position: relative;
    z-index: 2;
    padding: 60px 0;
}

.quote-title .title-heading {
    font-size: 56px;
    font-weight: 600;
    color: white;
    margin-bottom: 0;
    line-height: 1.2;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease;
    position: relative;
    display: inline-block;
    text-transform: capitalize;
}

.quote-title .title-heading::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

/* ====================================
   Quote Section
==================================== */
.quote-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

/* Quote Panel */
.quote-panel {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
}

@media (max-width: 991px) {
    .quote-panel {
        grid-template-columns: 1fr;
    }
}

/* Left Panel - Information */
.quote-info {
    padding: 50px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    height: 100%;
    border-right: 1px solid rgba(29, 64, 120, 0.1);
}

@media (max-width: 991px) {
    .quote-info {
        padding: 40px 30px;
        border-right: none;
        border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    }
}

@media (max-width: 480px) {
    .quote-info {
        padding: 30px 20px;
    }
}

.quote-info .heading-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(240, 83, 35, 0.2);
}

.quote-info .heading-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 20px;
    line-height: 1.3;
    position: relative;
    padding-bottom: 15px;
}

.quote-info .heading-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.quote-info .heading-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    margin-bottom: 30px;
}

/* Advantages List */
.quote-advantages {
    margin-bottom: 30px;
}

.quote-advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quote-advantages-list li {
    font-size: 15px;
    color: var(--gray-light);
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

.quote-advantages-list li::before {
    content: '✓';
    color: var(--primary-orange);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: -1px;
}

/* Quote Actions */
.quote-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Quote Contact */
.quote-contact {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(240, 83, 35, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-orange);
}

.quote-contact img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.quote-contact p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-light);
    margin: 0;
    flex: 1;
}

.quote-contact p a {
    color: var(--primary-orange);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.quote-contact p a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Right Panel - Quote Form */
.quote-form-panel {
    padding: 50px;
    background: white;
    height: 100%;
}

@media (max-width: 991px) {
    .quote-form-panel {
        padding: 40px 30px;
    }
}

@media (max-width: 480px) {
    .quote-form-panel {
        padding: 30px 20px;
    }
}

.quote-form-panel .card-heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 15px;
    text-transform: capitalize;
}

.quote-form-panel .card-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.quote-form-panel .card-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    margin-bottom: 30px;
}

/* Form Sections */
.quote-form-section {
    margin-bottom: 20px;
}

.quote-form-section .form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

/* Radio Groups */
.quote-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.quote-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-radio-item input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-orange);
    cursor: pointer;
}

.quote-radio-item label {
    font-size: 14px;
    color: var(--gray-light);
    cursor: pointer;
}

.quote-radio-item label a {
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.quote-radio-item label a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Terms Checkbox */
.quote-terms {
    margin-top: 10px;
}

.quote-terms .custom-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-terms .custom-control-input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-orange);
}

.quote-terms .custom-control label {
    font-size: 14px;
    color: var(--gray-light);
}

.quote-terms .custom-control label a {
    color: var(--primary-orange);
    font-weight: 600;
    text-decoration: none;
}

.quote-terms .custom-control label a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Submit Button */
.quote-submit {
    width: 100%;
    margin-top: 20px;
}

.quote-submit .btn--secondary {
    width: 100%;
}

/* ====================================
   Form Row Spacing
==================================== */
.quote-form-panel .row {
    margin-bottom: 0;
}

.quote-form-panel .row > [class*="col-"] {
    margin-bottom: 0;
}

/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .quote-title .title-heading {
        font-size: 42px;
    }

    .quote-info .heading-title {
        font-size: 28px;
    }

    .quote-actions {
        flex-direction: column;
    }

    .quote-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .quote-title .title-heading {
        font-size: 36px;
    }

    .quote-info .heading-title {
        font-size: 26px;
    }

    .quote-radio-group {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .quote-title .title-heading {
        font-size: 28px;
    }

    .quote-info .heading-title {
        font-size: 24px;
    }

    .quote-info {
        padding: 25px 15px;
    }

    .quote-form-panel {
        padding: 25px 15px;
    }

    .quote-form-panel .form-control {
        height: 45px;
        font-size: 13px;
    }
}



/*------------------------------------*\
    #15. BLOG & NEWS PAGES STYLES
    Blog grid, blog single, and related components
\*------------------------------------*/

/* ====================================
   Blog Page Title
==================================== */
.blog-title .page-title-wrap,
.page-title-13 .page-title-wrap {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.blog-title .bg-section img,
.page-title-13 .bg-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.bg-overlay-dark-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.85) 0%,
    rgba(21, 49, 92, 0.9) 100%);
    z-index: 1;
}

.blog-title .title,
.page-title-13 .title {
    position: relative;
    z-index: 2;
    padding: 60px 0;
    text-align: center;
}

.blog-title .title-heading,
.page-title-13 .title-heading {
    font-size: 56px;
    font-weight: 600;
    color: white;
    margin-bottom: 25px;
    line-height: 1.2;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease;
    position: relative;
    display: inline-block;
}

.blog-title .title-heading::after,
.page-title-13 .title-heading::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

/* Blog Breadcrumb */
.blog-breadcrumb,
.breadcrumb {
    margin: 20px 0 0;
    justify-content: start;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    background: transparent;
}

.breadcrumb-light .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}

.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: var(--primary-orange);
}

.breadcrumb-light .breadcrumb-item a {
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

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

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

/* ====================================
   Blog Grid Section
==================================== */
.blog-grid-section,
.blog-grid-5 {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Action Panel */
.action-panel {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    padding-bottom: 1rem;
}

/* Sort Panel */
.sort-panel {
    display: flex;
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
    flex-wrap: wrap;
    gap: 1rem;
}

.sort-panel li {
    margin-right: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.sort-panel li a {
    text-decoration: none;
    color: var(--gray-light);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}

.sort-panel li:hover {
    border-bottom-color: var(--primary-orange);
}

.sort-panel li:hover a {
    color: var(--primary-orange);
}

.sort-panel li.active {
    border-bottom-color: var(--primary-orange);
}

.sort-panel li.active a {
    color: var(--primary-orange);
}

/* Blog Grid Layout */
.blog-grid-5 .row {
    margin-right: -15px;
    margin-left: -15px;
}

.blog-grid-5 [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 30px;
}

/* Blog Entry Card */
.blog-entry {
    position: relative;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.blog-entry:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-orange);
}

.blog-entry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-orange), var(--primary-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 1;
}

.blog-entry:hover::before {
    transform: scaleX(1);
}

.blog-entry .entry-content {
    padding: 25px 25px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Entry Meta */
.entry-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.entry-date {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-block;
    transition: var(--transition);
}


/* Entry Title */
.entry-title {
    margin-bottom: 20px;
}

.entry-title h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.entry-title h4 a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
    display: inline-block;
}

.entry-title h4 a:hover {
    color: var(--primary-orange);
    transform: translateX(3px);
}

/* Entry Image */
.entry-img-wrap {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.entry-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.entry-img a {
    display: block;
    width: 100%;
    height: 100%;
}

.entry-img .blog-image {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    border-radius: var(--border-radius);
}

.blog-entry:hover .entry-img .blog-image {
    transform: scale(1.1);
}

/* Entry Category */
.entry-category {
    position: absolute;
    left: 15px;
    bottom: -12px;
    display: inline-flex;
    align-items: center;
    background: var(--gradient-accent);
    padding: 6px 18px;
    border-radius: 30px;
    box-shadow: var(--shadow-orange);
    z-index: 2;
    transition: var(--transition);
}

.entry-category:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange), 0 5px 15px rgba(240, 83, 35, 0.3);
}

.entry-category span {
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Entry Bio */
.entry-bio {
    margin-bottom: 20px;
    flex: 1;
}

.entry-bio p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-light);
    margin: 0;
    transition: var(--transition);
}

.blog-entry:hover .entry-bio p {
    color: var(--gray-dark);
}

/* Entry More Button */
.entry-more {
    margin-top: auto;
}

.entry-more .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: transparent;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 5px;
    transition: var(--transition);
    border: 2px solid var(--primary-blue);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.entry-more .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.entry-more .btn:hover::before {
    left: 100%;
}

.entry-more .btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
    color: var(--primary-orange);
    position: relative;
    z-index: 2;
}

.entry-more .btn span {
    position: relative;
    z-index: 2;
}

.entry-more .btn:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
}

.entry-more .btn:hover i {
    color: white;
    transform: translateX(5px);
}

/* No Articles Alert */
.alert {
    padding: 50px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius-lg);
    text-align: center;
    color: var(--gray-light);
    font-size: 16px;
    width: 100%;
    box-shadow: var(--shadow-sm);
}

.alert.alert-secondary {
    background: var(--gradient-primary) !important;
    color: white;
}

.alert.alert-secondary h4 {
    color: white;
    margin-bottom: 15px;
}

.alert.alert-secondary i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.8;
}

/* Pagination */
.pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.pagination .page-item {
    display: inline-block;
    margin: 0 3px;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: white;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
    color: var(--gray-light);
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
    font-size: 15px;
}

.pagination .page-link:hover,
.pagination .active .page-link {
    background: var(--primary-orange);
    color: white;
    border-color: var(--primary-orange);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}





/*------------------------------------*\
    #15.5 BLOG SINGLE PAGE STYLES
    Complete styles for blog detail pages
\*------------------------------------*/

:root {
    --primary-blue: #1d4078;
    --primary-blue-light: #2a5298;
    --primary-blue-dark: #15315c;
    --primary-orange: #f05323;
    --primary-orange-light: #ff6b3d;
    --gray-dark: #474747;
    --gray-light: #6c757d;
    --gradient-primary: linear-gradient(179deg, #1d4078 0.46%, #15315c 87.03%);
    --gradient-accent: linear-gradient(135deg, #f05323 0%, #ff6b3d 100%);
    --shadow-sm: 0 5px 20px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-orange: 0 10px 30px rgba(240, 83, 35, 0.2);
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================================
   Breadcrumb - Blank Page Title
==================================== */
.page-title-blank-2 {
    padding: 20px 0;
    background: white;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

.breadcrumb-wrap {
    padding: 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
}

.breadcrumb-item {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-light);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: var(--primary-orange);
}

.breadcrumb-item a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
}

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

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

/* ====================================
   Blog Single
==================================== */
.blog-single {
    padding-top: 40px;
    padding-bottom: 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

@media screen and (max-width: 991.98px) {
    .blog-single {
        padding-bottom: 60px;
    }
}

.blog-single .blog-entry {
    box-shadow: none;
    margin-top: 0;
    background: white;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: none;
    transition: var(--transition);
}

.blog-single .blog-entry:hover {
    box-shadow: var(--shadow-lg);
}

.blog-single .blog-entry::before {
    display: none;
}

/* Entry Image */
.blog-single .blog-entry .entry-img {
    position: relative;
    overflow: hidden;
}

.blog-single .blog-entry .entry-img img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    transition: transform 0.8s ease;
}

.blog-single .blog-entry:hover .entry-img img {
    transform: scale(1.02);
}

/* Entry Meta Overlay */
.blog-single .blog-entry .entry-img .entry-meta {
    position: absolute;
    background: white;
    border-radius: 0 var(--border-radius-lg) 0 0;
    bottom: -6px;
    left: 0;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--shadow-md);
    z-index: 2;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .blog-single .blog-entry .entry-img .entry-meta {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media screen and (max-width: 767.98px) {
    .blog-single .blog-entry .entry-img .entry-meta {
        position: relative;
        bottom: auto;
        left: auto;
        padding: 20px;
        min-width: 100%;
        border-radius: 0;
        flex-wrap: wrap;
    }
}

.blog-single .blog-entry .entry-img .entry-meta .entry-date {
    margin-right: 20px;
}

.blog-single .blog-entry .entry-img .entry-meta .entry-date span {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-light);
    text-transform: capitalize;
}

/* Entry Category Overlay */
.blog-single .blog-entry .entry-img .entry-meta .entry-category {
    position: absolute;
    display: flex;
    align-items: center;
    background: var(--gradient-accent);
    height: 35px;
    padding: 0 20px;
    top: -17px;
    left: 40px;
    border-radius: 30px;
    box-shadow: var(--shadow-orange);
    transition: var(--transition);
}

.blog-single .blog-entry .entry-img .entry-meta .entry-category:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange), 0 5px 15px rgba(240, 83, 35, 0.3);
}

@media (min-width: 992px) and (max-width: 1200px) {
    .blog-single .blog-entry .entry-img .entry-meta .entry-category {
        left: 25px;
    }
}

@media screen and (max-width: 767.98px) {
    .blog-single .blog-entry .entry-img .entry-meta .entry-category {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 10px;
        width: 100%;
        justify-content: center;
    }
}

.blog-single .blog-entry .entry-img .entry-meta .entry-category a {
    color: white;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.blog-single .blog-entry .entry-img .entry-meta .entry-category a:hover {
    color: var(--primary-blue);
}

.blog-single .blog-entry .entry-img .entry-meta .entry-category a::after {
    content: ',';
    margin-right: 5px;
}

.blog-single .blog-entry .entry-img .entry-meta .entry-category a:last-child::after {
    content: '';
}

/* Entry Content */
.blog-single .blog-entry .entry-content {
    padding: 50px 40px 40px;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

@media (min-width: 992px) and (max-width: 1200px) {
    .blog-single .blog-entry .entry-content {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media screen and (max-width: 991.98px) {
    .blog-single .blog-entry .entry-content {
        padding: 30px 20px;
    }
}

@media screen and (max-width: 480px) {
    .blog-single .blog-entry .entry-content {
        padding: 25px 15px;
    }
}

/* Entry Title */
.blog-single .blog-entry .entry-content .entry-title {
    margin-bottom: 30px;
}

.blog-single .blog-entry .entry-content .entry-title h4 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

.blog-single .blog-entry .entry-content .entry-title h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .blog-single .blog-entry .entry-content .entry-title h4 {
        font-size: 35px;
    }
}

@media screen and (max-width: 767.98px) {
    .blog-single .blog-entry .entry-content .entry-title h4 {
        font-size: 28px;
    }
}

@media screen and (max-width: 480px) {
    .blog-single .blog-entry .entry-content .entry-title h4 {
        font-size: 24px;
    }
}

/* Entry Bio */
.blog-single .blog-entry .entry-content .entry-bio {
    margin-bottom: 30px;
}

.blog-single .blog-entry .entry-content .entry-bio p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-light);
    margin-bottom: 20px;
}

.blog-single .blog-entry .entry-content .entry-bio p:last-child {
    margin-bottom: 0;
}

.blog-single .blog-entry .entry-content .entry-bio h1,
.blog-single .blog-entry .entry-content .entry-bio h2,
.blog-single .blog-entry .entry-content .entry-bio h3,
.blog-single .blog-entry .entry-content .entry-bio h4,
.blog-single .blog-entry .entry-content .entry-bio h5,
.blog-single .blog-entry .entry-content .entry-bio h6 {
    color: var(--primary-blue);
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.blog-single .blog-entry .entry-content .entry-bio ul,
.blog-single .blog-entry .entry-content .entry-bio ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.blog-single .blog-entry .entry-content .entry-bio li {
    color: var(--gray-light);
    margin-bottom: 8px;
}

.blog-single .blog-entry .entry-content .entry-bio a {
    color: var(--primary-orange);
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}

.blog-single .blog-entry .entry-content .entry-bio a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

.blog-single .blog-entry .entry-content .entry-bio img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin: 20px 0;
    box-shadow: var(--shadow-md);
}

.blog-single .blog-entry .entry-content .entry-bio blockquote {
    margin: 30px 0;
    padding: 20px 30px;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.05), rgba(255, 107, 61, 0.02));
    border-left: 4px solid var(--primary-orange);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-style: italic;
    position: relative;
}

.blog-single .blog-entry .entry-content .entry-bio blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 60px;
    color: var(--primary-orange);
    opacity: 0.1;
    font-family: serif;
}

.blog-single .blog-entry .entry-content .entry-bio blockquote p {
    margin-bottom: 0;
    color: var(--primary-blue);
    font-size: 18px;
    line-height: 1.6;
}

/* Entry Tags */
.entry-tags {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.entry-tags span {
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: capitalize;
    font-size: 15px;
    margin-right: 5px;
}

.entry-tags a {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    transition: var(--transition);
    color: var(--gray-light);
    text-decoration: none;
    padding: 5px 15px;
    background: rgba(240, 83, 35, 0.05);
    border-radius: 30px;
    border: 1px solid rgba(240, 83, 35, 0.1);
}

.entry-tags a:hover {
    color: white;
    background: var(--primary-orange);
    border-color: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

/* Entry Share */
.entry-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius-lg);
    padding: 25px 30px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(29, 64, 120, 0.1);
    margin-top: 30px;
}

@media screen and (max-width: 767.98px) {
    .entry-share {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }
}

.entry-share span {
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-blue);
    text-transform: capitalize;
}

@media screen and (max-width: 767.98px) {
    .entry-share span {
        margin-bottom: 0;
    }
}

.social-share {
    display: flex;
    gap: 10px;
}

.social-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    color: var(--primary-blue);
    font-size: 16px;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.social-share a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: transparent;
}

/* Post Navigation */
.nav-posts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    gap: 20px;
}

@media screen and (max-width: 991.98px) {
    .nav-posts {
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }
}

.nav-posts .prev-post,
.nav-posts .next-post {
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    padding: 15px;
    background: white;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
    text-decoration: none;
    max-width: 300px;
    flex: 1;
}

.nav-posts .prev-post:hover,
.nav-posts .next-post:hover {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.05), rgba(255, 107, 61, 0.02));
    border-color: var(--primary-orange);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.nav-posts .prev-post .post-img,
.nav-posts .next-post .post-img {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.nav-posts .prev-post .post-img {
    margin-right: 15px;
}

.nav-posts .next-post .post-img {
    margin-left: 15px;
}

.nav-posts .prev-post .post-img img,
.nav-posts .next-post .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nav-posts .prev-post:hover .post-img img,
.nav-posts .next-post:hover .post-img img {
    transform: scale(1.1);
}

.nav-posts .prev-post .post-body,
.nav-posts .next-post .post-body {
    flex: 1;
}

.nav-posts .prev-post .post-body span,
.nav-posts .next-post .post-body span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-light);
    margin-bottom: 5px;
}

.nav-posts .prev-post .post-body .post-link,
.nav-posts .next-post .post-body .post-link {
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.4;
}

.nav-posts .prev-post:hover .post-body .post-link,
.nav-posts .next-post:hover .post-body .post-link {
    color: var(--primary-orange);
}

.nav-posts .next-post {
    text-align: right;
}

@media screen and (max-width: 767.98px) {
    .nav-posts .prev-post,
    .nav-posts .next-post {
        max-width: 100%;
        width: 100%;
    }
}

/* Entry Widget */
.entry-widget {
    padding-top: 50px;
}

.entry-widget .entry-widget-title {
    margin-bottom: 30px;
}

.entry-widget .entry-widget-title h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
    position: relative;
    padding-bottom: 15px;
}

.entry-widget .entry-widget-title h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

/* Author Bio Widget */
.entry-widget-bio {
    margin-top: 30px;
    padding: 40px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 1px solid rgba(29, 64, 120, 0.1);
    position: relative;
    overflow: hidden;
}

.entry-widget-bio::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 4px;
    width: 150px;
    background: var(--gradient-accent);
    border-radius: 2px 0 0 0;
}

.entry-widget-bio .entry-widget-content {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767.98px) {
    .entry-widget-bio .entry-widget-content {
        flex-direction: column;
        text-align: center;
    }
}

.entry-widget-bio .entry-widget-content img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 30px;
    border: 3px solid var(--primary-orange);
    padding: 3px;
    object-fit: cover;
}

@media screen and (max-width: 767.98px) {
    .entry-widget-bio .entry-widget-content img {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.entry-widget-bio .entry-widget-content .entry-bio-desc h4 {
    color: var(--primary-blue);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.entry-widget-bio .entry-widget-content .entry-bio-desc p {
    color: var(--gray-light);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.entry-widget-bio .entry-widget-content .entry-bio-desc .social-links {
    display: flex;
    gap: 10px;
}

@media screen and (max-width: 767.98px) {
    .entry-widget-bio .entry-widget-content .entry-bio-desc .social-links {
        justify-content: center;
    }
}

.entry-widget-bio .entry-widget-content .entry-bio-desc .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    color: var(--primary-blue);
    font-size: 14px;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.entry-widget-bio .entry-widget-content .entry-bio-desc .social-links a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

/* Comments Section */
.entry-comments .entry-widget-content .comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comments-list .comment-body {
    display: flex;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

.comments-list .comment-body:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.comments-list .comment-body .avatar {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    border: 2px solid var(--primary-orange);
    padding: 2px;
}

.comments-list .comment-body .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.comments-list .comment-body .comment {
    flex: 1;
}

.comments-list .comment-body .comment h6 {
    color: var(--primary-blue);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}

.comments-list .comment-body .comment .date {
    color: var(--gray-light);
    font-size: 12px;
    margin-bottom: 10px;
    display: block;
}

.comments-list .comment-body .comment p {
    color: var(--gray-light);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 10px;
}

.comments-list .comment-body .comment a.reply {
    color: var(--primary-orange);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comments-list .comment-body .comment a.reply:hover {
    color: var(--primary-blue);
    transform: translateX(5px);
}

.comments-list .comment-body .comment a.reply i {
    font-size: 11px;
}

.comments-list .replies-list {
    list-style: none;
    padding-left: 80px;
    margin-top: 30px;
}

@media screen and (max-width: 767.98px) {
    .comments-list .replies-list {
        padding-left: 40px;
    }
}

.comments-list .replies-list .comment-body {
    border-bottom: none;
    padding-bottom: 0;
}

/* Add Comment Form */
.entry-add-comment {
    padding-top: 40px;
}

.entry-add-comment .form-control {
    width: 100%;
    height: 55px;
    padding: 0 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: var(--transition);
    background: #f9f9f9;
}

.entry-add-comment .form-control:focus {
    outline: none;
    border-color: var(--primary-orange);
    background: white;
    box-shadow: var(--shadow-orange);
}

.entry-add-comment textarea.form-control {
    height: 120px;
    padding: 15px 20px;
    resize: vertical;
}

.entry-add-comment .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 35px;
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.entry-add-comment .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.entry-add-comment .btn:hover::before {
    left: 100%;
}

.entry-add-comment .btn:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.entry-add-comment .btn span,
.entry-add-comment .btn i {
    position: relative;
    z-index: 2;
}

.entry-add-comment .btn i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.entry-add-comment .btn:hover i {
    transform: translateX(5px);
}

/* ====================================
   No Articles Alert
==================================== */
.no-articles {
    padding: 50px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius-lg);
    text-align: center;
    color: var(--gray-light);
    font-size: 16px;
    width: 100%;
    box-shadow: var(--shadow-sm);
}

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

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

/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .blog-single .blog-entry .entry-content .entry-title h4 {
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    .blog-single .blog-entry .entry-content .entry-title h4 {
        font-size: 28px;
    }

    .entry-widget-bio {
        padding: 30px 20px;
    }

    .nav-posts .prev-post,
    .nav-posts .next-post {
        max-width: 100%;
        width: 100%;
    }

    .blog-single .blog-entry .entry-img .entry-meta .entry-category {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .entry-share {
        flex-direction: column;
        text-align: center;
    }

    .social-share {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .blog-single .blog-entry .entry-content {
        padding: 25px 15px;
    }

    .blog-single .blog-entry .entry-content .entry-title h4 {
        font-size: 24px;
    }

    .entry-widget-bio .entry-widget-content {
        flex-direction: column;
    }

    .entry-widget-bio .entry-widget-content img {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .comments-list .comment-body {
        flex-direction: column;
    }

    .comments-list .comment-body .avatar {
        margin-bottom: 15px;
    }

    .entry-add-comment .btn {
        width: 100%;
        justify-content: center;
    }
}



/*------------------------------------*\
    #16. PROJECTS PAGES STYLES
    Projects grid and project single pages
\*------------------------------------*/

/* ====================================
   Projects Page Title
==================================== */
.projects-title .page-title-wrap {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.projects-title .bg-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.projects-title .bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.85) 0%,
    rgba(21, 49, 92, 0.9) 100%);
    z-index: 1;
}

.projects-title .title {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 60px 0 30px;
}

.projects-title .title-heading {
    font-size: 56px;
    font-weight: 600;
    color: white;
    margin-bottom: 35px;
    line-height: 1.2;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease;
    position: relative;
    display: inline-block;
}

.projects-title .title-heading::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.projects-title .title-desc {
    font-size: 15px;
    line-height: 1.6rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 800px;
    margin-top: 40px;
    animation: fadeInUp 1s ease 0.2s both;
}

/* Projects Breadcrumb */
.projects-breadcrumb {
    position: relative;
    z-index: 2;
    padding: 25px 0 0;
}

.projects-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
}

.projects-breadcrumb .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}

.projects-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: var(--primary-orange);
}

.projects-breadcrumb .breadcrumb-item a {
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

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

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

/* ====================================
   Projects Section
==================================== */
.projects-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Action Panel */
.projects-action-panel {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    padding-bottom: 1rem;
}

/* Sort Panel */
.projects-sort-panel {
    display: flex;
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
    flex-wrap: wrap;
    gap: 1rem;
}

.projects-sort-panel li {
    margin-right: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.projects-sort-panel li a {
    text-decoration: none;
    color: var(--gray-light);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}

.projects-sort-panel li:hover {
    border-bottom-color: var(--primary-orange);
}

.projects-sort-panel li:hover a {
    color: var(--primary-orange);
}

.projects-sort-panel li.active {
    border-bottom-color: var(--primary-orange);
}

.projects-sort-panel li.active a {
    color: var(--primary-orange);
}

/* Search Wrap */
.projects-search-wrap {
    display: block;
}

.projects-search-wrap .form-group {
    position: relative;
    margin-bottom: 0;
}

.projects-search-wrap .form-group input {
    background: #f9f9f9;
    padding: 12px 45px 12px 15px;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
    width: 100%;
    height: 45px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: var(--transition);
}

.projects-search-wrap .form-group input:focus {
    outline: none;
    border-color: var(--primary-orange);
    background: white;
    box-shadow: var(--shadow-orange);
}

.projects-search-wrap .form-group input::placeholder {
    color: var(--gray-light);
    opacity: 0.7;
}

.projects-search-wrap .form-group .icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--primary-orange);
    font-size: 14px;
    pointer-events: none;
    transition: var(--transition);
}

.projects-search-wrap .form-group input:focus + .icon {
    color: var(--primary-blue);
}

/* Projects Grid */
.projects-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.projects-grid > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* Project Panel */
.project-panel {
    margin-bottom: 30px;
    background-color: white;
    transition: var(--transition);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    display: flex;
    flex-direction: column;
}

.project-panel:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
    border-color: var(--primary-orange);
}

.project-panel .project-panel-holder {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-panel .project-panel-holder .project-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    height: 260px;
    flex-shrink: 0;
}

.project-panel .project-panel-holder .project-img::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    content: '';
    z-index: 1;
    transition: transform 0.6s;
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
    pointer-events: none;
}

.project-panel:hover .project-panel-holder .project-img::after {
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}

.project-panel .project-panel-holder .project-img a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: block;
}

.project-panel .project-panel-holder .project-img .project-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.project-panel:hover .project-panel-holder .project-img .project-image {
    transform: scale(1.1);
}

.project-panel .project-panel-holder .project-content {
    background-color: white;
    padding: 25px 25px 30px;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    transition: var(--transition);
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-panel:hover .project-panel-holder .project-content {
    background-color: var(--primary-orange);
}

@media (min-width: 992px) and (max-width: 1200px) {
    .project-panel .project-panel-holder .project-content {
        padding: 20px 15px 25px;
    }
}

.project-panel .project-panel-holder .project-content .project-title {
    margin-bottom: 8px;
}

.project-panel .project-panel-holder .project-content .project-title h4 {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.project-panel .project-panel-holder .project-content .project-title h4 a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
    display: inline-block;
}

.project-panel .project-panel-holder .project-content .project-title h4 a:hover {
    color: var(--primary-orange);
}

.project-panel:hover .project-panel-holder .project-content .project-title h4 a {
    color: white;
}

.project-panel .project-panel-holder .project-content .project-cat {
    margin-bottom: 0;
}

.project-panel .project-panel-holder .project-content .project-cat a {
    color: var(--primary-orange);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: var(--transition);
    display: inline-block;
}

.project-panel .project-panel-holder .project-content .project-cat a::before {
    content: '';
    height: 1px;
    width: 100%;
    background-color: var(--primary-orange);
    position: absolute;
    bottom: -2px;
    left: 0;
    opacity: 0;
    transition: var(--transition);
}

.project-panel .project-panel-holder .project-content .project-cat a:hover {
    color: var(--primary-blue);
}

.project-panel .project-panel-holder .project-content .project-cat a:hover::before {
    opacity: 1;
    background-color: var(--primary-blue);
}

.project-panel:hover .project-panel-holder .project-content .project-cat a {
    color: white;
}

.project-panel:hover .project-panel-holder .project-content .project-cat a::before {
    background-color: white;
}

/* Load More Button */
#projects-load-more {
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 40px;
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
    position: relative;
    overflow: hidden;
}

#projects-load-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

#projects-load-more:hover::before {
    left: 100%;
}

#projects-load-more:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

#projects-load-more span,
#projects-load-more i {
    position: relative;
    z-index: 2;
}

#projects-load-more i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

#projects-load-more:hover i {
    transform: translateX(5px);
}

#projects-load-more .spinner-border {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: white transparent transparent transparent;
    animation: spin 0.8s linear infinite;
    position: relative;
    z-index: 2;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* No Projects Alert */
.no-projects {
    padding: 50px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius-lg);
    text-align: center;
    color: var(--gray-light);
    font-size: 16px;
    width: 100%;
    box-shadow: var(--shadow-sm);
}

.no-projects.alert-secondary {
    background: var(--gradient-primary) !important;
    color: white;
}

/* Project Item - For equal height cards */
.project-item {
    display: flex;
    margin-bottom: 30px;
}

.project-item .project-panel {
    width: 100%;
    margin-bottom: 0;
}

/* ====================================
   Project Single Page
==================================== */

/* Project Single Breadcrumb */
.project-single-breadcrumb {
    padding: 20px 0;
    background: white;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

/* Project Intro */
.project-intro {
    padding: 40px 0 0;
}

.project-intro .project-img {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    min-height: 400px;
}

.project-intro .project-img img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

@media screen and (max-width: 767.98px) {
    .project-intro .project-img img {
        height: 300px;
    }
}

/* Project Panel (floating card) */
.project-intro .project-img .project-panel {
    position: absolute;
    right: 50px;
    bottom: 20px;
    max-width: 500px;
    max-height: 360px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    margin-bottom: 0;
    background: white;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    z-index: 10;
}

@media screen and (max-width: 991.98px) {
    .project-intro .project-img .project-panel {
        right: 30px;
        bottom: -40px;
        max-width: 450px;
    }
}

@media screen and (max-width: 767.98px) {
    .project-intro .project-img .project-panel {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        max-width: 100%;
    }
}


.project-intro .project-img .project-panel .project-content {
    padding: 35px 40px 40px;
}

@media screen and (max-width: 991.98px) {
    .project-intro .project-img .project-panel .project-content {
        padding: 25px 30px 30px;
    }
}

.project-intro .project-img .project-panel .project-content .project-cat {
    margin-bottom: 10px;
}

.project-intro .project-img .project-panel .project-content .project-cat a {
    color: var(--primary-orange);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: var(--transition);
}

.project-intro .project-img .project-panel .project-content .project-cat a:hover {
    color: var(--primary-blue);
}

.project-intro .project-img .project-panel .project-content .project-title {
    margin-bottom: 15px;
}

.project-intro .project-img .project-panel .project-content .project-title h4 {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-blue);
}

.project-intro .project-img .project-panel .project-content .project-desc {
    margin-bottom: 20px;
}

.project-intro .project-img .project-panel .project-content .project-desc p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    margin-bottom: 0;
}

/* Project Overview */
.project-overview {
    padding-top: 100px;
    padding-bottom: 80px;
}

@media screen and (max-width: 991.98px) {
    .project-overview {
        padding-top: 70px;
        padding-bottom: 60px;
    }
}

/* Project Details Table */
.project-details {
    margin-bottom: 30px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius-lg);
    padding: 25px;
    border: 1px solid rgba(29, 64, 120, 0.1);
}

@media screen and (min-width: 992px) {
    .project-details {
        transform: translateY(-6px);
        margin-bottom: 25px;
    }
}

.project-details .table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.project-details .table td {
    border: none;
    padding: 10px 0;
}

.project-details .table .name {
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-blue);
    text-transform: capitalize;
    width: 100px;
}

.project-details .table .value {
    font-weight: 400;
    font-size: 15px;
    color: var(--gray-light);
    text-transform: capitalize;
}

/* Return Button */
.return-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: transparent;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    border: 2px solid var(--primary-blue);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.return-btn:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.return-btn i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.return-btn:hover i {
    transform: translateX(5px);
}

/* Work Done List */
.work-done-sub-title {
    margin: 1.5rem 0 1rem;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-orange);
}

.work-done-list {
    text-align: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-done-list li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    margin-bottom: 15px;
    text-align: justify;
    padding-left: 25px;
    position: relative;
}

.work-done-list li::before {
    content: '•';
    color: var(--primary-orange);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}

.work-done-list li .highlighted {
    font-weight: 700;
    color: var(--primary-blue);
    margin-right: 8px;
}

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

/* ====================================
   Responsive
==================================== */
@media (max-width: 1200px) {
    .projects-title .title-heading {
        font-size: 48px;
    }
}

@media (max-width: 991px) {
    .projects-title .title-heading {
        font-size: 42px;
    }

    .projects-section {
        padding: 60px 0;
    }

    .project-panel {
        max-width: 370px;
        margin: 0 auto 30px;
    }

    .projects-sort-panel {
        justify-content: center;
    }

    .projects-action-panel .row.align-items-center {
        flex-direction: column;
        gap: 20px;
    }

    .projects-action-panel .col-12.col-md-8,
    .projects-action-panel .col-12.col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .project-overview .heading-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .projects-title .title-heading {
        font-size: 36px;
    }

    .projects-title .title-desc {
        font-size: 15px;
    }

    .projects-section {
        padding: 40px 0;
    }

    .projects-action-panel .row {
        flex-direction: column;
    }

    .projects-sort-panel {
        margin-top: 0.5rem;
        justify-content: flex-start;
    }

    .projects-sort-panel li {
        margin-right: 0.8rem;
    }

    .projects-sort-panel li a {
        font-size: 13px;
    }

    .projects-search-wrap {
        margin-top: 15px;
    }

    .project-overview .heading-title {
        font-size: 32px;
    }

    .project-overview {
        padding-top: 60px;
    }

    .offset-lg-1 {
        margin-left: 0;
        margin-top: 30px;
    }

    .project-intro .project-img {
        min-height: 300px;
    }
}

@media (max-width: 576px) {
    .projects-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .projects-title .title-heading {
        font-size: 28px;
    }

    .project-panel .project-panel-holder .project-img {
        height: 220px;
    }

    .project-panel .project-panel-holder .project-content {
        padding: 20px 15px 25px;
    }

    .project-panel .project-panel-holder .project-content .project-title h4 {
        font-size: 18px;
    }

    #projects-load-more {
        min-width: 160px;
        padding: 12px 30px;
        font-size: 14px;
    }

    .project-overview .heading-title {
        font-size: 28px;
    }

    .project-intro .project-img .project-panel .project-content {
        padding: 20px 20px 25px;
    }

    .project-intro .project-img img {
        height: 250px;
    }

    .return-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .projects-sort-panel {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .projects-sort-panel li {
        margin-right: 0.5rem;
    }
}



/*------------------------------------*\
    #16.5 PROJECT SINGLE PAGE STYLES
    Complete styles for project detail pages
\*------------------------------------*/

/* ====================================
   Breadcrumb - Blank Page Title
==================================== */
.page-title-blank {
    padding: 20px 0;
    background: white;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

.breadcrumb-wrap {
    padding: 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
}

.breadcrumb-item {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-light);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: var(--primary-orange);
}

.breadcrumb-item a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
}

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

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

/* ====================================
   Project Single Section
==================================== */
.project-single {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* ====================================
   Project Intro
==================================== */
.project-intro {
    padding: 40px 0 0;
    position: relative;
}

.project-intro .container {
    position: relative;
}

.project-intro .project-img {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    min-height: 400px;
    box-shadow: var(--shadow-lg);
}

.project-intro .project-img img {
    width: 100%;
    height: auto;
    max-height: 600px;
    min-height: 400px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    transition: transform 0.8s ease;
}

.project-intro .project-img:hover img {
    transform: scale(1.02);
}

@media screen and (max-width: 767.98px) {
    .project-intro .project-img {
        min-height: 300px;
    }
    .project-intro .project-img img {
        height: 300px;
    }
}

/* Image Overlay */
.project-intro .project-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.3) 0%,
    rgba(240, 83, 35, 0.2) 100%);
    z-index: 1;
    border-radius: var(--border-radius-lg);
    pointer-events: none;
}

/* ====================================
   Project Panel (Floating Card)
==================================== */
.project-intro .project-img .project-panel {
    position: absolute;
    right: 50px;
    bottom: 20px;
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    margin-bottom: 0;
    background: white;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    z-index: 10;
    transition: var(--transition);
    animation: slideInRight 0.8s ease forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (max-width: 991.98px) {
    .project-intro .project-img .project-panel {
        right: 30px;
        bottom: -40px;
        max-width: 450px;
    }
}

@media screen and (max-width: 767.98px) {
    .project-intro .project-img .project-panel {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        max-width: 100%;
        animation: slideInUp 0.6s ease forwards;
    }

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

.project-intro .project-img .project-panel .project-content {
    padding: 35px 40px 40px;
}

@media screen and (max-width: 991.98px) {
    .project-intro .project-img .project-panel .project-content {
        padding: 25px 30px 30px;
    }
}

@media screen and (max-width: 480px) {
    .project-intro .project-img .project-panel .project-content {
        padding: 20px 20px 25px;
    }
}

/* Category */
.project-intro .project-img .project-panel .project-content .project-cat {
    margin-bottom: 10px;
}

.project-intro .project-img .project-panel .project-content .project-cat a {
    color: var(--primary-orange);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: var(--transition);
    display: inline-block;
    background: rgba(240, 83, 35, 0.1);
    padding: 5px 15px;
    border-radius: 30px;
}

.project-intro .project-img .project-panel .project-content .project-cat a:hover {
    color: white;
    background: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

/* Title */
.project-intro .project-img .project-panel .project-content .project-title {
    margin-bottom: 15px;
}

.project-intro .project-img .project-panel .project-content .project-title h4 {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-blue);
}

.project-intro .project-img .project-panel .project-content .project-title h4 a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.project-intro .project-img .project-panel .project-content .project-title h4 a:hover {
    color: var(--primary-orange);
}

/* Description */
.project-intro .project-img .project-panel .project-content .project-desc {
    margin-bottom: 20px;
}

.project-intro .project-img .project-panel .project-content .project-desc p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    margin-bottom: 0;
}

/* More Button */
.project-intro .project-img .project-panel .project-content .project-more .btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.project-intro .project-img .project-panel .project-content .project-more .btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.project-intro .project-img .project-panel .project-content .project-more .btn--primary:hover::before {
    left: 100%;
}

.project-intro .project-img .project-panel .project-content .project-more .btn--primary:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.project-intro .project-img .project-panel .project-content .project-more .btn--primary span,
.project-intro .project-img .project-panel .project-content .project-more .btn--primary i {
    position: relative;
    z-index: 2;
}

.project-intro .project-img .project-panel .project-content .project-more .btn--primary i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.project-intro .project-img .project-panel .project-content .project-more .btn--primary:hover i {
    transform: translateX(5px);
}

/* ====================================
   Project Overview
==================================== */
.project-overview {
    padding-top: 100px;
    padding-bottom: 80px;
}

@media screen and (max-width: 991.98px) {
    .project-overview {
        padding-top: 70px;
        padding-bottom: 60px;
    }
}

/* Heading */
.heading-20 {
    margin-bottom: 30px;
}

.heading-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(240, 83, 35, 0.2);
}

.heading-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 30px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

.heading-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.heading-desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-light);
    margin-bottom: 30px;
}

.heading-desc p {
    margin-bottom: 20px;
}

.heading-desc p:last-child {
    margin-bottom: 0;
}

/* Project Details Table */
.project-details {
    margin-bottom: 30px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius-lg);
    padding: 25px;
    border: 1px solid rgba(29, 64, 120, 0.1);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.project-details:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-orange);
}

@media screen and (min-width: 992px) {
    .project-details {
        transform: translateY(-6px);
        margin-bottom: 25px;
    }
}

.project-details .table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.project-details .table tr {
    border-bottom: 1px solid rgba(29, 64, 120, 0.05);
}

.project-details .table tr:last-child {
    border-bottom: none;
}

.project-details .table td {
    border: none;
    padding: 12px 0;
}

.project-details .table .name {
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-blue);
    text-transform: capitalize;
    width: 100px;
}

.project-details .table .value {
    font-weight: 400;
    font-size: 15px;
    color: var(--gray-light);
    text-transform: capitalize;
}

/* Return Button */
.return-btn,
.btn--secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: transparent;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    border: 2px solid var(--primary-blue);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
}

.return-btn::before,
.btn--secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(29, 64, 120, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.return-btn:hover::before,
.btn--secondary:hover::before {
    left: 100%;
}

.return-btn:hover,
.btn--secondary:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
}

.return-btn span,
.return-btn i,
.btn--secondary span,
.btn--secondary i {
    position: relative;
    z-index: 2;
}

.return-btn i,
.btn--secondary i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.return-btn:hover i,
.btn--secondary:hover i {
    transform: translateX(5px);
    color: white;
}

/* Work Done List */
.work-done-sub-title {
    margin: 1.5rem 0 1rem;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-orange);
    position: relative;
    padding-left: 15px;
}

.work-done-sub-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.list-of-job-done,
.work-done-list {
    text-align: left;
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
}

.list-of-job-done li,
.work-done-list li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    margin-bottom: 15px;
    text-align: justify;
    padding-left: 30px;
    position: relative;
    transition: var(--transition);
}

.list-of-job-done li:hover,
.work-done-list li:hover {
    transform: translateX(5px);
    color: var(--primary-blue);
}

.list-of-job-done li::before,
.work-done-list li::before {
    content: '•';
    color: var(--primary-orange);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
    transition: var(--transition);
}

.list-of-job-done li:hover::before,
.work-done-list li:hover::before {
    color: var(--primary-blue);
    transform: scale(1.2);
}

.list-of-job-done li .highlighted,
.work-done-list li .highlighted {
    font-weight: 700;
    color: var(--primary-blue);
    margin-right: 8px;
}

/* ====================================
   Related Projects Section (Optional)
==================================== */
.related-projects {
    padding: 60px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-top: 1px solid rgba(29, 64, 120, 0.1);
}

.related-projects .section-title {
    text-align: left;
    margin-bottom: 40px;
}

.related-projects .section-title h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-blue);
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
}

.related-projects .section-title h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

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

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

/* Apply animations */
.project-intro .project-img img {
    animation: fadeIn 1s ease forwards;
}

.heading-subtitle {
    animation: fadeInUp 0.8s ease forwards;
}

.heading-title {
    animation: fadeInUp 0.8s ease 0.2s both;
}

.heading-desc {
    animation: fadeInUp 0.8s ease 0.3s both;
}

.project-details {
    animation: fadeInUp 0.8s ease 0.4s both;
}

/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .heading-title {
        font-size: 36px;
    }

    .heading-desc {
        font-size: 15px;
    }

    .project-details .table .name {
        width: 90px;
    }
}

@media (max-width: 767px) {
    .heading-title {
        font-size: 32px;
    }

    .project-overview {
        padding-top: 60px;
    }

    .offset-lg-1 {
        margin-left: 0;
        margin-top: 30px;
    }

    .heading-20 .row {
        flex-direction: column;
    }

    .work-done-sub-title {
        font-size: 20px;
        margin: 1.2rem 0 0.8rem;
    }

    .list-of-job-done li,
    .work-done-list li {
        font-size: 14px;
        margin-bottom: 12px;
    }
}

@media (max-width: 576px) {
    .project-details {
        padding: 20px;
    }

    .project-details .table td {
        padding: 8px 0;
    }

    .project-details .table .name {
        font-size: 14px;
    }

    .project-details .table .value {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .heading-title {
        font-size: 28px;
    }

    .project-intro .project-img img {
        height: 250px;
    }

    .return-btn,
    .btn--secondary {
        padding: 12px 25px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }

    .heading-subtitle {
        font-size: 12px;
        padding: 6px 18px;
    }

    .work-done-sub-title {
        font-size: 18px;
    }
}

/* ====================================
   Utility Classes
==================================== */
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }




/*------------------------------------*\
    #17. CORE SERVICES PAGES STYLES
    Services grid and service detail pages
\*------------------------------------*/

/* ====================================
   Services Page Title
==================================== */
.services-title .page-title-wrap {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.services-title .bg-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.services-title .bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.85) 0%,
    rgba(21, 49, 92, 0.9) 100%);
    z-index: 1;
}

.services-title .title {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 60px 0 30px;
}

.services-title .title-heading {
    font-size: 56px;
    font-weight: 600;
    color: white;
    margin-bottom: 35px;
    line-height: 1.2;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease;
    position: relative;
    display: inline-block;
}

.services-title .title-heading::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.services-title .title-desc {
    font-size: 15px;
    line-height: 1.6rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 700px;
    margin-top: 40px;
    animation: fadeInUp 1s ease 0.2s both;
}

/* Services Breadcrumb */
.services-breadcrumb {
    position: relative;
    z-index: 2;
    padding: 25px 0 0;
}

.services-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
}

.services-breadcrumb .breadcrumb-item {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.services-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: var(--primary-orange);
}

.services-breadcrumb .breadcrumb-item a {
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

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

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

/* ====================================
   Core Services Grid
==================================== */
.services-grid-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.services-grid-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(29, 64, 120, 0.03), transparent);
    pointer-events: none;
}

.services-4{
    padding: 120px 0px;
}

.services-container {
    display: grid;
    gap: 30px;
    text-align: left;
    max-width: 1400px;
    margin: 0 auto;
}

.services-4 .service-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.services-4 .service-box {
    flex: 0 0 calc(50% - 15px); /* 2 columns with gap */
    position: relative;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .services-4 .service-box {
        flex: 0 0 100%; /* Full width on mobile */
    }
}

@media (min-width: 640px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Service Box */
.service-box {
    position: relative;
    padding: 0;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-orange);
}

/* Image Container */
.service-image-container {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.service-box:hover .service-image {
    transform: scale(1.1);
}

.service-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(29, 64, 120, 0.2) 0%,
    rgba(240, 83, 35, 0.2) 100%);
    z-index: 1;
    opacity: 0;
    transition: var(--transition);
}

.service-box:hover .service-image-overlay {
    opacity: 1;
}

/* Service Badge */
.service-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--gradient-accent);
    color: white;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    z-index: 3;
    box-shadow: var(--shadow-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Service Content */
.service-content {
    position: relative;
    z-index: 3;
    padding: 2rem 1.5rem;
    background: white;
    transition: var(--transition);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Title */
.service-content .title {
    margin-bottom: 1rem;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-blue);
    transition: var(--transition);
    position: relative;
    padding-bottom: 12px;
}

.service-content .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 2px;
    transition: var(--transition);
}

.service-box:hover .title {
    color: var(--primary-blue);
}

.service-box:hover .title::after {
    width: 60px;
}

/* Description */
.service-content .description {
    color: var(--gray-light);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    transition: var(--transition);
    flex: 1;
}

/* Entry More */
.service-entry-more {
    margin-top: auto;
}

.service-entry-more .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.service-entry-more .btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(29, 64, 120, 0.3);
}

.service-entry-more .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.service-entry-more .btn-primary:hover::before {
    left: 100%;
}

.service-entry-more .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(29, 64, 120, 0.4);
}

.service-entry-more .btn-primary i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.service-entry-more .btn-primary:hover i {
    transform: translateX(5px);
}

/* ====================================
   Service Detail Page
==================================== */
.service-detail-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Sidebar */
.service-sidebar {
    position: sticky;
    top: 30px;
}

@media (max-width: 991px) {
    .service-sidebar {
        position: static;
        margin-bottom: 40px;
    }
}

/* Widget Base */
.service-widget {
    margin-bottom: 40px;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    transition: var(--transition);
}

.service-widget:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-orange);
}

.service-widget .widget-title {
    padding: 20px 25px;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.05), rgba(255, 107, 61, 0.02));
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

.service-widget .widget-title h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-left: 15px;
}

.service-widget .widget-title h5::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.service-widget .widget-content {
    padding: 25px;
}

/* Services Widget */
.services-list-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-list-widget ul li {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
    padding-bottom: 10px;
}

.services-list-widget ul li:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.services-list-widget ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: var(--gray-dark);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: var(--transition);
    background: rgba(248, 249, 250, 0.5);
}

.services-list-widget ul li a span {
    line-height: 1.4;
}

.services-list-widget ul li a i {
    color: var(--primary-orange);
    font-size: 12px;
    opacity: 0.5;
    transition: var(--transition);
}

.services-list-widget ul li a:hover,
.services-list-widget ul li a.active_service {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    color: var(--primary-orange);
    transform: translateX(5px);
}

.services-list-widget ul li a:hover i,
.services-list-widget ul li a.active_service i {
    opacity: 1;
    transform: translateX(5px);
}

/* Reservation Widget */
.reservation-widget {
    position: relative;
    text-align: center;
}

.reservation-widget img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.reservation-widget .widget-content {
    position: relative;
    background: var(--gradient-primary);
    padding: 30px 25px;
}

.reservation-widget .widget-content i {
    font-size: 20px;
    color: var(--primary-orange);
    margin-bottom: 20px;
    display: inline-block;
}

.reservation-widget .widget-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.reservation-widget .widget-content .btn {
    margin-bottom: 20px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    background: transparent;
    border: 2px solid white;
    color: white;
}

.reservation-widget .widget-content .btn:hover {
    background: var(--gradient-accent);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.reservation-widget .widget-content a[href^="tel"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
}

.reservation-widget .widget-content a[href^="tel"]:hover {
    background: var(--primary-orange);
    transform: translateY(-2px);
}

.reservation-widget .widget-content a[href^="tel"] i {
    color: white;
    margin: 0;
}

/* Download Widget */
.download-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.download-widget ul li {
    margin-bottom: 15px;
}

.download-widget ul li:last-child {
    margin-bottom: 0;
}

.download-widget ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.download-widget ul li a:hover {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.05), rgba(255, 107, 61, 0.02));
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: var(--primary-orange);
}

.download-widget ul li a span {
    flex: 1;
    color: var(--primary-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.download-widget ul li a svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-orange);
    transition: var(--transition);
}

.download-widget ul li a:hover svg {
    transform: translateY(-2px);
}

/* Service Entry Content */
.service-entry {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 45px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.entry-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 45px 0 25px;
    position: relative;
    padding-bottom: 15px;
    text-transform: capitalize;
    line-height: 1.3;
}

.entry-heading:first-of-type {
    margin-top: 0;
}

.entry-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.entry-heading.mt-4 {
    margin-top: 45px !important;
}

.entry-heading.mt-5 {
    margin-top: 55px !important;
}

.entry-desc {
    font-size: 15px;
    line-height: 1.7rem;
    color: var(--gray-light);
    margin-bottom: 25px;
}

.entry-desc:last-of-type {
    margin-bottom: 0;
}

.entry-desc.m-0 {
    margin: 0 !important;
}

.highlighted-text {
    color: var(--primary-orange);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6rem;
    margin-bottom: 20px;
    font-style: italic;
    padding-left: 15px;
    border-left: 3px solid var(--primary-orange);
}

/* Images in service entry */
.service-entry .row {
    margin-top: 30px;
    margin-bottom: 30px;
}

.service-entry img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    margin-bottom: 0;
}

.service-entry img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.service-entry .row [class*="col-"] {
    margin-bottom: 20px;
}

.service-entry .row [class*="col-"]:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .service-entry .row [class*="col-"] {
        margin-bottom: 0;
    }
}

/* ====================================
   Service Features
==================================== */
.service-features-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.service-features-list li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    color: var(--gray-light);
    font-size: 15px;
    border-bottom: 1px solid rgba(29, 64, 120, 0.05);
}

.service-features-list li:last-child {
    border-bottom: none;
}

.service-features-list li::before {
    content: '✓';
    color: var(--primary-orange);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 10px;
}

.service-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.service-stat-item {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.service-stat-number {
    font-size: 36px;
    font-weight: 600;
    color: var(--primary-orange);
    line-height: 1;
    margin-bottom: 5px;
}

.service-stat-label {
    font-size: 13px;
    color: var(--gray-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.service-box {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.service-box:nth-child(1) { animation-delay: 0.1s; }
.service-box:nth-child(2) { animation-delay: 0.2s; }
.service-box:nth-child(3) { animation-delay: 0.3s; }
.service-box:nth-child(4) { animation-delay: 0.4s; }
.service-box:nth-child(5) { animation-delay: 0.5s; }
.service-box:nth-child(6) { animation-delay: 0.6s; }

/* ====================================
   Responsive
==================================== */
@media (max-width: 1200px) {
    .services-title .title-heading {
        font-size: 48px;
    }
}

@media (max-width: 991px) {
    .services-title .title-heading {
        font-size: 42px;
    }

    .services-grid-section {
        padding: 80px 0;
    }

    .service-image-container {
        height: 240px;
    }

    .service-entry {
        padding: 35px;
    }
}

@media (max-width: 767px) {
    .services-title .title-heading {
        font-size: 36px;
    }

    .services-title .title-desc {
        font-size: 15px;
        margin-top: 30px;
    }

    .services-breadcrumb {
        padding: 15px 0 0;
    }

    .services-grid-section {
        padding: 60px 0;
    }

    .service-image-container {
        height: 220px;
    }

    .service-content {
        padding: 1.5rem;
    }

    .service-content .title {
        font-size: 20px;
    }

    .service-detail-section {
        padding: 60px 0;
    }

    .service-entry {
        padding: 25px;
    }

    .entry-heading {
        font-size: 22px;
        margin: 35px 0 20px;
    }

    .entry-heading.mt-4 {
        margin-top: 35px !important;
    }

    .entry-heading.mt-5 {
        margin-top: 45px !important;
    }

    .order-1 {
        order: 1 !important;
    }

    .order-0 {
        order: 0 !important;
    }

    .service-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .services-title .title-heading {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .services-title .title-heading::after {
        width: 80px;
        bottom: -10px;
    }

    .service-image-container {
        height: 200px;
    }

    .service-content .title {
        font-size: 18px;
    }

    .service-content .description {
        font-size: 14px;
    }

    .service-entry-more .btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .service-entry {
        padding: 20px;
    }

    .entry-heading {
        font-size: 20px;
        margin: 30px 0 18px;
    }

    .entry-heading.mt-4 {
        margin-top: 30px !important;
    }

    .entry-heading.mt-5 {
        margin-top: 40px !important;
    }

    .entry-desc {
        font-size: 14px;
        line-height: 1.6rem;
        margin-bottom: 20px;
    }

    .highlighted-text {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .service-widget .widget-title h5 {
        font-size: 16px;
    }

    .service-widget .widget-content {
        padding: 20px;
    }

    .services-list-widget ul li a {
        padding: 10px;
        font-size: 14px;
    }

    .reservation-widget .widget-content {
        padding: 20px;
    }

    .reservation-widget .widget-content a[href^="tel"] {
        font-size: 16px;
    }
}

/* ====================================
   Utility Classes
==================================== */
.order-1 { order: 1; }
.order-0 { order: 0; }

@media (min-width: 992px) {
    .order-lg-2 { order: 2 !important; }
}

.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2.5rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }
.m-0 { margin: 0 !important; }


/* Accessibility Improvements */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Focus states for accessibility */
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--primary-orange);
    outline-offset: 3px;
}

/* Section description style */
.section-description {
    color: var(--gray-light);
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
}

/* Process section heading hierarchy */
.process-step h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 15px;
}

/* Why choose section heading hierarchy */
.why-choose-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

/* Add spacing between title paragraphs */
.title-desc.mt-3 {
    margin-top: 1rem;
}

/* Print styles */
@media print {
    .bg-section {
        display: none;
    }

    .service-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .cta-banner {
        background: #f5f5f5 !important;
        color: black !important;
    }

    .cta-title,
    .cta-text {
        color: black !important;
    }
}

/*------------------------------------*\
    #SERVICE DETAIL PAGE - ADDITIONS
    These styles ensure service detail pages display correctly
\*------------------------------------*/

/* ====================================
   Service Single Section - Ensure proper targeting
==================================== */
.service-single {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}


/* Service Entry Styles */
.service-entry {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 45px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

/* Entry Headings */
.entry-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 45px 0 25px;
    position: relative;
    padding-bottom: 15px;
}

.entry-heading:first-of-type {
    margin-top: 0;
}

.entry-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.entry-heading.mt-5 {
    margin-top: 55px !important;
}

/* Entry Description */
.entry-desc {
    font-size: 15px;
    line-height: 1.7rem;
    color: var(--gray-light);
    margin-bottom: 25px;
}

.entry-desc:last-of-type {
    margin-bottom: 0;
}

/* Image Wrapper */
.service-image-wrapper {
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    height: 100%;
}

.service-image-wrapper:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

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

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

/* Bootstrap utility overrides for spacing */
.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.g-3 {
    --bs-gutter-y: 1rem;
}

.g-4 {
    --bs-gutter-y: 1.5rem;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .service-single {
        padding: 60px 0;
    }

    .service-entry {
        padding: 35px;
    }

    /* Sidebar should appear after content on mobile */
    .order-2 {
        order: 2 !important;
        margin-top: 40px;
    }

    .order-1 {
        order: 1 !important;
    }
}

@media (max-width: 767px) {
    .service-single {
        padding: 40px 0;
    }

    .service-entry {
        padding: 25px;
    }

    .entry-heading {
        font-size: 22px;
        margin: 35px 0 20px;
    }

    .entry-heading.mt-5 {
        margin-top: 45px !important;
    }

    .entry-desc {
        font-size: 14px;
        line-height: 1.6rem;
        margin-bottom: 20px;
    }

    /* Stack images on mobile */
    .row.g-3.g-md-4.my-4 .col-sm-6 {
        margin-bottom: 15px;
    }

    .row.g-3.g-md-4.my-4 .col-sm-6:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .service-entry {
        padding: 20px;
    }

    .entry-heading {
        font-size: 20px;
        margin: 30px 0 18px;
    }

    .entry-heading.mt-5 {
        margin-top: 40px !important;
    }

    .entry-desc {
        font-size: 14px;
        margin-bottom: 18px;
    }
}

/* ====================================
   Sidebar Specific - More specific selectors
==================================== */
.sidebar-service {
    position: sticky;
    top: 120px; /* Add this if missing */
}

/* Widget - More specific to override any generic .widget styles */
.sidebar-service .widget {
    margin-bottom: 40px;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    transition: var(--transition);
    padding: 40px 25px;
}

.sidebar-service .widget:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-orange);
}

.sidebar-service .widget-services .widget-title {
    margin-bottom: 20px;
}

/* Services Widget List - More specific */
.sidebar-service .widget-services ul li{
    margin-bottom: 10px;
}
.sidebar-service .widget-services ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: var(--gray-dark);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: var(--transition);
    background: rgba(248, 249, 250, 0.5);
}

.sidebar-service .widget-services ul li a i {
    color: var(--primary-orange);
    font-size: 12px;
    opacity: 0.5;
    transition: var(--transition);
}

.sidebar-service .widget-services ul li a:hover,
.sidebar-service .widget-services ul li a.active_service {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    color: var(--primary-orange);
    transform: translateX(5px);
}

/* ====================================
   Reservation Widget - Ensure styles apply
==================================== */
.sidebar-service .widget-reservation .widget-content {
    position: relative;
    background: var(--gradient-primary);
    padding: 30px 25px;
}

.sidebar-service .widget-reservation .widget-content i {
    font-size: 20px;
    color: var(--primary-orange);
    margin-bottom: 20px;
    display: inline-block;
}

.sidebar-service .widget-reservation .widget-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.sidebar-service .widget-reservation .widget-content a[href^="tel"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
}

/* ====================================
   Download Widget - Ensure styles apply
==================================== */
/* Download Widget */
.widget-download ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-download ul li {
    margin-bottom: 15px;
}

.widget-download ul li:last-child {
    margin-bottom: 0;
}

.widget-download ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.widget-download ul li a:hover {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.05), rgba(255, 107, 61, 0.02));
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: var(--primary-orange);
}

.widget-download ul li a span {
    flex: 1;
    color: var(--primary-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.widget-download ul li a svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-orange);
    transition: var(--transition);
}

.widget-download ul li a:hover svg {
    transform: translateY(-2px);
}

/* ====================================
   Service Entry - Ensure proper spacing
==================================== */
.service-entry .entry-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 45px 0 25px;
    position: relative;
    padding-bottom: 15px;
    text-transform: capitalize;
    line-height: 1.3;
}

.service-entry .entry-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.service-entry .entry-desc {
    font-size: 15px;
    line-height: 1.7rem;
    color: var(--gray-light);
    margin-bottom: 25px;
}

.service-entry .highlighted-text {
    color: var(--primary-orange);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6rem;
    margin-bottom: 20px;
    font-style: italic;
    padding-left: 15px;
    border-left: 3px solid var(--primary-orange);
}

/* ====================================
   Image Rows - Ensure proper spacing
==================================== */
.service-entry .row {
    margin-top: 30px;
    margin-bottom: 30px;
}

.service-entry img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

/* ====================================
   Page Title - Ensure proper spacing for service pages
==================================== */
.page-title-11 .title-heading {
    margin-bottom: 35px;
}

.page-title-11 .title-desc {
    margin-top: 40px;
}

.page-title-11 .title-heading::after {
    bottom: -15px;
}

/* ====================================
   Breadcrumb - Ensure proper styling
==================================== */
.breadcrumb-wrap {
    padding: 25px 0 0;
}

.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 10px;
    color: var(--primary-orange);
}

/* ====================================
   Responsive adjustments for service pages
==================================== */
@media (max-width: 991px) {
    .sidebar-service {
        position: static;
        margin-bottom: 40px;
    }

    .service-entry {
        padding: 35px;
    }
}

@media (max-width: 767px) {
    .service-entry {
        padding: 25px;
    }

    .service-entry .entry-heading {
        font-size: 22px;
        margin: 35px 0 20px;
    }
}

@media (max-width: 480px) {
    .service-entry {
        padding: 20px;
    }

    .service-entry .entry-heading {
        font-size: 20px;
        margin: 30px 0 18px;
    }

    .service-entry .entry-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

/* Reservation Widget */
.reservation-widget {
    position: relative;
    text-align: center;
}

.reservation-widget img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.reservation-widget .widget-content {
    position: relative;
    background: var(--gradient-primary);
    padding: 30px 25px;
}

.reservation-widget .widget-content i {
    font-size: 20px;
    color: var(--primary-orange);
    margin-bottom: 20px;
    display: inline-block;
}

.reservation-widget .widget-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.reservation-widget .widget-content .btn {
    margin-bottom: 20px;
    width: 100%;
}

.reservation-widget .widget-content a[href^="tel"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
}

.reservation-widget .widget-content a[href^="tel"]:hover {
    background: var(--primary-orange);
    transform: translateY(-2px);
}

/* Download Widget */
.download-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.download-widget ul li {
    margin-bottom: 15px;
}

.download-widget ul li:last-child {
    margin-bottom: 0;
}

.download-widget ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.download-widget ul li a:hover {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.05), rgba(255, 107, 61, 0.02));
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: var(--primary-orange);
}

.download-widget ul li a span {
    flex: 1;
    color: var(--primary-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.download-widget ul li a svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-orange);
    transition: var(--transition);
}

.download-widget ul li a:hover svg {
    transform: translateY(-2px);
}

/* Service Entry */
.service-entry {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 45px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

/* Entry Headings */
.entry-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 45px 0 25px;
    position: relative;
    padding-bottom: 15px;
    text-transform: capitalize;
    line-height: 1.3;
}

.entry-heading:first-of-type {
    margin-top: 0;
}

.entry-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.entry-heading.mt-4 {
    margin-top: 45px !important;
}

.entry-heading.mt-5 {
    margin-top: 55px !important;
}

/* Entry Description */
.entry-desc {
    font-size: 15px;
    line-height: 1.7rem;
    color: var(--gray-light);
    margin-bottom: 25px;
}

.entry-desc:last-of-type {
    margin-bottom: 0;
}

.entry-desc.m-0 {
    margin: 0 !important;
}

/* Highlighted Text */
.highlighted-text {
    color: var(--primary-orange);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6rem;
    margin-bottom: 20px;
    font-style: italic;
    padding-left: 15px;
    border-left: 3px solid var(--primary-orange);
}

/* Entry Images */
.service-entry .row {
    margin-top: 30px;
    margin-bottom: 30px;
}

.service-entry img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    margin-bottom: 0;
}

.service-entry img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.service-entry .row [class*="col-"] {
    margin-bottom: 20px;
}

.service-entry .row [class*="col-"]:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .service-entry .row [class*="col-"] {
        margin-bottom: 0;
    }
}

/* ====================================
   Service Detail Variations
==================================== */

/* Overview Section */
.service-overview {
    margin-bottom: 30px;
}

/* Features List */
.service-features-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.service-features-list li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    color: var(--gray-light);
    font-size: 15px;
    border-bottom: 1px solid rgba(29, 64, 120, 0.05);
}

.service-features-list li:last-child {
    border-bottom: none;
}

.service-features-list li::before {
    content: '✓';
    color: var(--primary-orange);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 10px;
}

/* Service Stats */
.service-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.service-stat-item {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.service-stat-number {
    font-size: 36px;
    font-weight: 600;
    color: var(--primary-orange);
    line-height: 1;
    margin-bottom: 5px;
}

.service-stat-label {
    font-size: 13px;
    color: var(--gray-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .services-title .title-heading {
        font-size: 42px;
    }

    .service-sidebar {
        position: static;
        margin-bottom: 40px;
    }

    .service-entry {
        padding: 35px;
    }

    .service-image-container {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .services-title .title-heading {
        font-size: 36px;
    }

    .services-title .title-desc {
        font-size: 15px;
    }

    .service-detail-section {
        padding: 40px 0;
    }

    .service-entry {
        padding: 25px;
    }

    .entry-heading {
        font-size: 22px;
        margin: 35px 0 20px;
    }

    .entry-heading.mt-4 {
        margin-top: 35px !important;
    }

    .entry-heading.mt-5 {
        margin-top: 45px !important;
    }

    .service-image-container {
        height: 220px;
    }

    .service-content {
        padding: 1.5rem;
    }

    .service-content .title {
        font-size: 20px;
    }

    .order-1 {
        order: 1 !important;
    }

    .order-0 {
        order: 0 !important;
    }

    .reservation-widget .widget-content {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .services-title .title-heading {
        font-size: 28px;
    }

    .service-entry {
        padding: 20px;
    }

    .entry-heading {
        font-size: 20px;
        margin: 30px 0 18px;
    }

    .entry-heading.mt-4 {
        margin-top: 30px !important;
    }

    .entry-heading.mt-5 {
        margin-top: 40px !important;
    }

    .entry-desc {
        font-size: 14px;
        line-height: 1.6rem;
        margin-bottom: 20px;
    }

    .highlighted-text {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .service-widget .widget-title h5 {
        font-size: 15px;
    }

    .service-widget .widget-content {
        padding: 20px;
    }

    .services-list-widget ul li a {
        padding: 10px;
        font-size: 14px;
    }

    .service-image-container {
        height: 200px;
    }

    .service-content .title {
        font-size: 18px;
    }

    .service-content .description {
        font-size: 14px;
    }

    .service-stats {
        grid-template-columns: 1fr;
    }
}

/* Order classes */
.order-1 { order: 1; }
.order-0 { order: 0; }

@media (min-width: 992px) {
    .order-lg-2 { order: 2 !important; }
}


/*------------------------------------*\
    #18. CONTACT PAGE STYLES
    Contact page with map, contact form, and info sections
\*------------------------------------*/

/* ====================================
   Map Section
==================================== */
.contact-map,
.map-2 {
    position: relative;
    height: 460px;
    overflow: hidden;
}

.contact-map iframe,
.map-2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border: none;
    transition: var(--transition);
}


.map-overlay {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
    border-left: 4px solid var(--primary-orange);
    animation: fadeInUp 1s ease;
}

.map-overlay i {
    color: var(--primary-orange);
    font-size: 20px;
}

.map-overlay span {
    color: var(--primary-blue);
    font-weight: 600;
}

@media (max-width: 768px) {
    .map-overlay {
        display: none;
    }
}

/* ====================================
   Contact Section
==================================== */
.contact-section {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 0 0 80px;
    overflow: hidden;
}

.contact-section .bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

.contact-section .bg-pattern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contact Panel */
.contact-panel {
    transform: translateY(-60px);
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

.contact-panel-2 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 70px;
    background-color: white;
    box-shadow: 0px 5px 83px 0px rgba(9, 29, 62, 0.15);
    border-radius: 12px;
}

@media (max-width: 991px) {
    .contact-panel-2 {
        padding: 40px 30px;
    }
}

@media (max-width: 767px) {
    .contact-panel-2 {
        padding: 30px 20px;
    }
}

/* ====================================
   Contact Info Card
==================================== */
.contact-info-card,
.img-card-2 {
    min-height: 550px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: baseline;
    padding: 40px;
    background: var(--gradient-primary);
}

.img-card-holder {
    display: flex;
    flex-direction: column;
}

.contact-info-card .bg-image,
.img-card-2 .bg-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.contact-info-card .bg-image img,
.img-card-2 .bg-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-overlay-theme::before,
.contact-info-card .card-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

.contact-info-card .card-content,
.img-card-2 .card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    color: white;
}

.contact-info-card .content-top,
.img-card-2 .content-top {
    text-align: left;
    margin-bottom: 40px;
}

.contact-info-card .content-top a,
.img-card-2 .content-top a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.contact-info-card .content-top a:hover,
.img-card-2 .content-top a:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: transparent;
}

.contact-info-card .content-top a i,
.img-card-2 .content-top a i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.contact-info-card .content-top a:hover i,
.img-card-2 .content-top a:hover i {
    transform: translateX(5px);
}

/* Contact Info List */
.contact-info-list,
.contact-infos {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.contact-info-item,
.contact-info {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    transition: var(--transition);
}

.contact-info-item:hover,
.contact-info:hover {
    transform: translateX(5px);
}

.contact-info-item:last-child,
.contact-info:last-child {
    margin-bottom: 0;
}

.contact-info-item i,
.contact-info i {
    color: #f4f4f4;
    font-size: 16px;
    margin-right: 10px;
    width: 20px;
    transition: var(--transition);
}

.contact-info-item:hover i,
.contact-info:hover i {
    color: var(--primary-orange);
}

.contact-info-item p,
.contact-info p {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #f4f4f4;
    text-transform: capitalize;
    padding: 0;
}

.contact-info-item strong,
.contact-info strong {
    color: white;
    font-weight: 700;
}

/* ====================================
   Contact Form Card
==================================== */
.contact-form-card,
.contact-card {
    background-color: white;
    border-radius: 12px;
    padding: 47px 50px 40px;
    box-shadow: 0px 1px 73px 0px rgba(40, 40, 40, 0.15);
    height: 100%;
    position: relative;
    transition: var(--transition);
}

.contact-form-card:hover,
.contact-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

@media (max-width: 991px) {
    .contact-form-card,
    .contact-card {
        padding: 37px 30px 30px;
    }
}

@media (max-width: 480px) {
    .contact-form-card,
    .contact-card {
        padding: 30px 20px;
    }
}

.contact-form-card .card-heading,
.contact-card .contact-body .card-heading {
    color: var(--primary-blue);
    font-size: 24px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

.contact-form-card .card-heading::after,
.contact-card .contact-body .card-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.contact-form-card .card-desc,
.contact-card .contact-body .card-desc {
    font-size: 15px;
    line-height: 25px;
    color: var(--gray-light);
    margin-bottom: 28px;
}

/* Contact Form */
.contact-form .form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    height: 45px;
    padding: 0 20px;
    margin-bottom: 0px;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: var(--transition);
    background: #f9f9f9;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-orange);
    background: white;
    box-shadow: var(--shadow-orange);
}

textarea.form-control {
    height: 130px;
    padding: 15px 20px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d4078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}

.form-control::placeholder {
    color: var(--gray-light);
    opacity: 0.7;
}

/* Form Validation */
.text-danger {
    color: var(--primary-orange);
    font-size: 12px;
    margin-top: -15px;
    display: block;
    margin-bottom: 10px;
}

/* Contact Result */
.contact-result {
    margin-top: 20px;
    font-size: 14px;
    color: var(--gray-light);
}

.contact-result .alert {
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin: 0;
    animation: fadeIn 0.5s ease;
}

.contact-result .alert-success {
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.1), rgba(29, 64, 120, 0.05));
    color: var(--primary-blue);
    border: 1px solid rgba(29, 64, 120, 0.2);
}

.contact-result .alert-danger {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    color: var(--primary-orange);
    border: 1px solid rgba(240, 83, 35, 0.2);
}

/* Submit Button */
.contact-submit {
    margin-top: 10px;
}

/* Button Styles */
.btn--white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: white;
    color: var(--primary-orange);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: fit-content;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.btn--white::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(240, 83, 35, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.btn--white:hover::before {
    left: 100%;
}

.btn--white:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.btn--white i {
    transition: transform 0.3s ease;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.btn--white:hover i {
    transform: translateX(5px);
    color: white;
}

.btn--secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 35px;
    background: var(--gradient-primary);
    color: white;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.btn--secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.btn--secondary:hover::before {
    left: 100%;
}

.btn--secondary:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
}

.btn--secondary i {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: var(--primary-blue);
    font-size: 12px;
    transition: var(--transition);
    position: relative;
    z-index: 2;
}

.btn--secondary:hover i {
    background-color: var(--primary-blue);
    color: white;
    transform: translateX(5px);
}

/* ====================================
   Contact Features
==================================== */
.contact-features {
    padding: 60px 0;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.contact-features::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    animation: rotate 30s linear infinite;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-item {
    text-align: center;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.feature-item:hover {
    transform: translateY(-10px);
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-orange);
}

.feature-item:hover::before {
    left: 100%;
}

.feature-number {
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin-bottom: 10px;
    line-height: 1;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse 2s ease infinite;
}

.feature-label {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ====================================
   Contact FAQ
==================================== */
.contact-faq-section {
    padding: 80px 0;
    background: white;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    margin-top: 50px;
}

@media (max-width: 991px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.faq-left .section-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.1), rgba(255, 107, 61, 0.05));
    padding: 8px 25px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(240, 83, 35, 0.2);
}

.faq-left .section-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 25px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

.faq-left .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.faq-left p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-light);
    margin-bottom: 30px;
}

/* FAQ Contact Card */
.faq-contact-card {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    padding: 40px;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(29, 64, 120, 0.1);
    text-align: center;
    transition: var(--transition);
}

.faq-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-orange);
}

.faq-contact-card i {
    font-size: 48px;
    color: var(--primary-orange);
    margin-bottom: 20px;
}

.faq-contact-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 15px;
}

.faq-contact-card p {
    margin-bottom: 25px;
    color: var(--gray-light);
}

.faq-contact-card .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 35px;
    background: var(--gradient-accent);
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    border: none;
}

.faq-contact-card .btn:hover {
    background: var(--gradient-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* FAQ Accordion */
.faq-accordion {
    background: white;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(29, 64, 120, 0.1);
}

.faq-item {
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question:hover {
    background: rgba(240, 83, 35, 0.02);
}

.faq-question h5 {
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0;
    transition: var(--transition);
}

.faq-question i {
    color: var(--primary-orange);
    transition: transform 0.3s ease;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(248, 249, 250, 0.5);
}

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

.faq-answer p {
    padding: 0 25px 20px;
    margin: 0;
    color: var(--gray-light);
    font-size: 15px;
    line-height: 1.7;
}

/* ====================================
   Contact CTA
==================================== */
.contact-cta,
.contact-cta-section {
    padding: 80px 0;
    background: var(--gradient-accent);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.contact-cta::before,
.contact-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    animation: rotate 30s linear infinite;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-size: 42px;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.cta-text {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 35px;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 45px;
    background: white;
    color: var(--primary-orange);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    border-radius: 60px;
    transition: var(--transition);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(240, 83, 35, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.cta-btn:hover::before {
    left: 100%;
}

.cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    gap: 20px;
    color: var(--primary-blue);
    background: white;
}

.cta-btn span,
.cta-btn i {
    position: relative;
    z-index: 2;
}

.cta-btn i {
    transition: var(--transition);
}

.cta-btn:hover i {
    transform: translateX(8px);
}

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

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

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

/* ====================================
   Responsive
==================================== */
@media (max-width: 991px) {
    .contact-panel {
        transform: translateY(-40px);
        margin-top: -40px;
    }

    .contact-info-card,
    .img-card-2 {
        min-height: 500px;
        margin-bottom: 30px;
    }

    .contact-info-card .card-content,
    .img-card-2 .card-content {
        padding: 30px;
    }

    .contact-form-card .card-heading,
    .contact-card .contact-body .card-heading {
        font-size: 24px;
    }

    .btn--secondary,
    .btn--white {
        width: 100%;
        justify-content: center;
    }

    .faq-left .section-title {
        font-size: 36px;
    }

    .cta-title {
        font-size: 36px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .contact-panel {
        transform: translateY(-20px);
        margin-top: -20px;
    }

    .contact-info-card,
    .img-card-2 {
        min-height: 450px;
    }

    .contact-info-card .card-content,
    .img-card-2 .card-content {
        padding: 25px;
    }

    .contact-info-item,
    .contact-info {
        gap: 12px;
    }

    .contact-info-item i,
    .contact-info i {
        font-size: 16px;
    }

    .contact-info-item p,
    .contact-info p {
        font-size: 14px;
    }

    .faq-left .section-title {
        font-size: 32px;
    }

    .cta-title {
        font-size: 32px;
    }

    .cta-text {
        font-size: 16px;
    }

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

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .contact-info-card,
    .img-card-2 {
        min-height: 400px;
    }

    .contact-info-card .content-top a,
    .img-card-2 .content-top a {
        font-size: 13px;
        padding: 8px 15px;
    }

    .contact-info-item,
    .contact-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .contact-info-item i,
    .contact-info i {
        margin-bottom: 5px;
    }

    .contact-form-card .card-heading,
    .contact-card .contact-body .card-heading {
        font-size: 22px;
    }

    .form-control {
        height: 50px;
        font-size: 13px;
    }

    textarea.form-control {
        height: 100px;
    }

    .faq-left .section-title {
        font-size: 28px;
    }

    .cta-title {
        font-size: 28px;
    }

    .cta-btn {
        padding: 14px 30px;
        font-size: 16px;
    }

    .faq-contact-card {
        padding: 30px 20px;
    }

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

/*------------------------------------*\
    #13.5 FAQS PAGE STYLES
    Frequently asked questions sections
\*------------------------------------*/

.faqs {
    padding-top   : 130px;
    padding-bottom: 110px;
}

@media screen and (max-width: 991.98px) {
    .faqs {
        padding-top   : 70px;
        padding-bottom: 70px;
    }
}

.faqs .faqs-action {
    margin-bottom: 0px;
}

@media screen and (max-width: 767.98px) {
    .faqs .faqs-action {
        display              : -webkit-box;
        display              : -ms-flexbox;
        display              : flex;
        -webkit-box-orient   : vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction   : column;
        flex-direction       : column;
        -webkit-box-align    : center;
        -ms-flex-align       : center;
        align-items          : center;
    }
}

.faqs .faqs-action .btn {
    font-family : var(--global--font-body);
    font-size   : 15px;
    font-weight : 700;
    display     : -webkit-inline-box;
    display     : -ms-inline-flexbox;
    display     : inline-flex;
    width       : 170px;
    height      : 65px;
    margin-right: 30px;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .faqs .faqs-action .btn {
        margin-right: 10px;
    }
}

@media screen and (max-width: 991.98px) {
    .faqs .faqs-action .btn {
        margin: 0 30px 0 0;
    }
}

@media screen and (max-width: 767.98px) {
    .faqs .faqs-action .btn {
        margin-right : 0;
        margin-bottom: 15px;
        height       : 50px;
    }
}

.faqs .faqs-action .btn:first-child i {
    color: var(--global--color-heading);
}

.faqs .faqs-action .btn:first-child:hover i {
    color: var(--global--color-white);
}

.faqs .faqs-action .btn:last-child {
    padding: 0 28px;
}

.faqs .faqs-action .btn.btn--white {
    -webkit-box-shadow: 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
    box-shadow        : 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
}

.faqs .more-faqs {
    text-align: center;
    margin-top: 3px;
}

.faqs .more-faqs p {
    font-family: var(--global--font-body);
    font-weight: 700;
    font-size  : 15px;
    color      : var(--global--color-body);
}

.faqs .more-faqs p a {
    position          : relative;
    font-weight       : 700;
    color             : var(--global--color-heading);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    text-transform    : capitalize;
    padding-bottom    : 6px;
}

.faqs .more-faqs p a:hover::before {
    width: calc(100% - 20%);
}

.faqs .more-faqs p a::before {
    content           : '';
    -webkit-transition: 0.3s ease-in-out;
    -o-transition     : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
    position          : absolute;
    bottom            : 0;
    left              : 50%;
    -webkit-transform : translateX(-50%);
    -ms-transform     : translateX(-50%);
    transform         : translateX(-50%);
    width             : 100%;
    height            : 2px;
    background-color  : var(--global--color-primary);
}

.faqs.faqs-2 {
    padding-top   : 130px;
    padding-bottom: 100px;
}

@media screen and (max-width: 991.98px) {
    .faqs.faqs-2 {
        padding-top   : 70px;
        padding-bottom: 70px;
    }
}

/*------------------------------------*\
    #19. FOOTER STYLES - 4 COLUMN LAYOUT
    Brand Colors: #1d4078 (blue), #f05323 (orange)
\*------------------------------------*/

/* ====================================
   Footer Base - Keeping original colors
==================================== */
.footer {
    background: linear-gradient(113deg, #303030 60%, #252525 45%) !important;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

/* Footer Top Wave Shape */
.footer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
    opacity: 0.3;
}

/* ====================================
   Footer Top - 4 Column Layout
==================================== */
.footer .footer-top {
    padding-top: 100px;
    padding-bottom: 68px;
    position: relative;
}

@media screen and (max-width: 991.98px) {
    .footer .footer-top {
        padding-top: 70px;
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 767.98px) {
    .footer .footer-top {
        padding-top: 50px;
        padding-bottom: 20px;
    }
}

/* 4 Column Grid System */
.footer .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.footer .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.footer .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.footer .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.footer .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

@media (max-width: 991px) {
    .footer .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .footer .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .footer .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ====================================
   Footer Widgets
==================================== */
.footer .footer-widget {
    text-align: left;
    position: relative;
    margin-bottom: 30px;
}

@media screen and (max-width: 991.98px) {
    .footer .footer-widget {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 767.98px) {
    .footer .footer-widget {
        text-align: center;
    }
}

/* Widget Title */
.footer .footer-widget .footer-widget-title {
    position: relative;
    margin-bottom: 30px;
}

.footer .footer-widget .footer-widget-title h5 {
    font-family: 'Inter', sans-serif;
    color: white;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
    position: relative;
    display: inline-block;
}

.footer .footer-widget .footer-widget-title h5::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

@media screen and (max-width: 767.98px) {
    .footer .footer-widget .footer-widget-title h5::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ====================================
   Widget Links
==================================== */
.footer .widget-links ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

.footer .widget-links ul li {
    display: block;
    margin-bottom: 12px;
}

.footer .widget-links ul li:last-child {
    margin-bottom: 0;
}

.footer .widget-links ul li a {
    color: #929ba2;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8rem;
    text-transform: capitalize;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
    position: relative;
    padding-left: 0;
    text-decoration: none;
}

.footer .widget-links ul li a::before {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--primary-orange);
    margin-right: 8px;
    opacity: 0;
    transform: translateX(-5px);
    transition: var(--transition);
}

.footer .widget-links ul li a:hover {
    color: white;
    padding-left: 15px;
}

.footer .widget-links ul li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width: 767.98px) {
    .footer .widget-links ul li a {
        justify-content: center;
    }
}

/* ====================================
   Widget Contact - Fixed
==================================== */
.footer .widget-contact {
    transform: translateY(12px);
}

.footer .widget-contact .widget-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .widget-contact .widget-content li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}

.footer .widget-contact .widget-content li:last-child {
    margin-bottom: 0;
}

.footer .widget-contact .widget-content li i {
    color: var(--primary-orange);
    font-size: 16px;
    width: 25px;
    margin-right: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Phone */
.footer .widget-contact .widget-content li.phone a {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5rem;
    color: #929ba2;
    transition: var(--transition);
    text-decoration: none;
}

.footer .widget-contact .widget-content li.phone a:hover {
    color: var(--primary-orange);
}

/* Email */
.footer .widget-contact .widget-content li.email a {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5rem;
    color: #929ba2;
    text-decoration: none;
    transition: var(--transition);
}

.footer .widget-contact .widget-content li.email a:hover {
    color: var(--primary-orange);
}

/* Address */
.footer .widget-contact .widget-content li.address p {
    font-family: 'Inter', sans-serif;
    color: #929ba2;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6rem;
    margin-bottom: 0;
}

/* Directions */
.footer .widget-contact .widget-content li.directions {
    margin-top: 15px;
}

.footer .widget-contact .widget-content li.directions a {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: white;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    background: rgba(240, 83, 35, 0.1);
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid rgba(240, 83, 35, 0.2);
    text-decoration: none;
}

.footer .widget-contact .widget-content li.directions a i {
    color: var(--primary-orange);
    transition: var(--transition);
    width: auto;
    margin-right: 0;
}

.footer .widget-contact .widget-content li.directions a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-orange);
    border-color: transparent;
}

.footer .widget-contact .widget-content li.directions a:hover i {
    color: white;
    transform: translateX(5px);
}

/* Responsive Contact Widget */
@media screen and (max-width: 767.98px) {
    .footer .widget-contact .widget-content li {
        justify-content: center;
        text-align: center;
    }

    .footer .widget-contact .widget-content li i {
        margin-right: 8px;
    }

    .footer .widget-contact .widget-content li.directions a {
        width: 100%;
        justify-content: center;
    }
}

/* ====================================
   Footer Copyright
==================================== */
.footer-copyright {
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(240, 83, 35, 0.1);
}
.footer-copyright .row .col-12{
    margin-bottom: 0;
}

.footer-copyright .copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

@media screen and (max-width: 991.98px) {
    .footer-copyright .copyright {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

.footer-copyright .copyright span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #929ba2;
    text-transform: capitalize;
}

.footer-copyright .copyright span a {
    color: var(--primary-orange);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.footer-copyright .copyright span a:hover {
    color: white;
    text-decoration: underline;
}

/* ====================================
   Social Icons
==================================== */
.footer-copyright .copyright .social-icons {
    margin-bottom: 0;
    display: flex;
    gap: 12px;
    padding: 0;
    list-style: none;
}

.footer-copyright .copyright .social-icons li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-size: 16px;
    color: #929ba2;
    transition: var(--transition);
    border: 1px solid rgba(240, 83, 35, 0.1);
    text-decoration: none;
}

.footer-copyright .copyright .social-icons li a i {
    font-size: 16px;
    color: #929ba2;
    transition: var(--transition);
}

.footer-copyright .copyright .social-icons li a:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-orange);
    border-color: transparent;
}

.footer-copyright .copyright .social-icons li a:hover i {
    color: white;
}

@media screen and (max-width: 767.98px) {
    .footer-copyright .copyright .social-icons {
        justify-content: center;
    }
}

/* ====================================
   Container Support
==================================== */
.container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-xl {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-xl {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-xl {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-xl {
        max-width: 1320px;
    }
}

/* ====================================
   Back to Top Button
==================================== */
.back-top,
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--primary-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
    z-index: var(--z-toast);
    opacity: 0;
    visibility: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.back-top.visible,
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    animation: fadeInUp 0.3s ease forwards;
}

.back-top:hover,
.back-to-top:hover {
    background: var(--primary-orange-light);
    transform: translateY(-5px);
    box-shadow: var(--shadow-orange);
}

/* ====================================
   Utility Classes
==================================== */
.list-unstyled {
    list-style: none !important;
    padding-left: 0 !important;
}

/* ====================================
   Responsive Footer
==================================== */
@media screen and (max-width: 991.98px) {
    .footer .footer-widget {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 767.98px) {
    .footer .footer-widget .footer-widget-title h5 {
        text-align: center;
        display: block;
    }

    .footer .footer-widget .footer-widget-title h5::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer .widget-links ul li a {
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .footer .footer-top {
        padding-top: 50px;
    }

    .footer .footer-widget .footer-widget-title h5 {
        font-size: 16px;
    }

    .footer .widget-contact .widget-content li.phone a {
        font-size: 14px;
    }

    .footer .widget-contact .widget-content li.directions a {
        padding: 8px 16px;
        font-size: 13px;
    }

    .footer-copyright .copyright span {
        font-size: 12px;
    }

    .footer-copyright .copyright .social-icons a {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

/*------------------------------------*\
    #20. UTILITY CLASSES & HELPER STYLES
    Reusable utility classes, helper styles, and overrides
\*------------------------------------*/

/* ====================================
   Text Utilities
==================================== */
/* Color Utilities */
.text-primary { color: var(--primary-blue) !important; }
.text-secondary { color: var(--primary-orange) !important; }
.text-white { color: white !important; }
.text-dark { color: var(--gray-dark) !important; }
.text-light { color: var(--gray-light) !important; }
.text-muted { color: #929ba2 !important; }

.text-white-90 { color: rgba(255, 255, 255, 0.9) !important; }
.text-white-80 { color: rgba(255, 255, 255, 0.8) !important; }
.text-white-70 { color: rgba(255, 255, 255, 0.7) !important; }
.text-white-60 { color: rgba(255, 255, 255, 0.6) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

/* Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Transformation */
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* Weight */
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }

/* Size */
.text-xs { font-size: 12px !important; line-height: 1.5 !important; }
.text-sm { font-size: 14px !important; line-height: 1.5 !important; }
.text-md { font-size: 16px !important; line-height: 1.6 !important; }
.text-lg { font-size: 18px !important; line-height: 1.7 !important; }
.text-xl { font-size: 20px !important; line-height: 1.7 !important; }
.text-2xl { font-size: 24px !important; line-height: 1.4 !important; }
.text-3xl { font-size: 32px !important; line-height: 1.3 !important; }
.text-4xl { font-size: 42px !important; line-height: 1.2 !important; }
.text-5xl { font-size: 56px !important; line-height: 1.1 !important; }

/* ====================================
   Background Utilities
==================================== */
.bg-primary { background: var(--gradient-primary) !important; }
.bg-accent { background: var(--gradient-accent) !important; }
.bg-white { background: white !important; }
.bg-light { background: var(--gray-bg) !important; }
.bg-dark { background: var(--gray-dark) !important; }
.bg-transparent { background: transparent !important; }

.bg-primary-solid { background: var(--primary-blue) !important; }
.bg-accent-solid { background: var(--primary-orange) !important; }

/* ====================================
   Spacing Utilities
==================================== */
/* Margin */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 2.5rem !important; }
.m-6 { margin: 3.5rem !important; }
.m-7 { margin: 4.5rem !important; }
.m-8 { margin: 5.5rem !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2.5rem !important; }
.mt-6 { margin-top: 3.5rem !important; }
.mt-7 { margin-top: 4.5rem !important; }
.mt-8 { margin-top: 5.5rem !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }
.mb-6 { margin-bottom: 3.5rem !important; }
.mb-7 { margin-bottom: 4.5rem !important; }
.mb-8 { margin-bottom: 5.5rem !important; }

/* Margin Left */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 2.5rem !important; }

/* Margin Right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 2.5rem !important; }

/* Margin Horizontal */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }

/* Margin Vertical */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 2.5rem !important; }
.p-6 { padding: 3.5rem !important; }
.p-7 { padding: 4.5rem !important; }
.p-8 { padding: 5.5rem !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 2.5rem !important; }
.pt-6 { padding-top: 3.5rem !important; }
.pt-7 { padding-top: 4.5rem !important; }
.pt-8 { padding-top: 5.5rem !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 2.5rem !important; }
.pb-6 { padding-bottom: 3.5rem !important; }
.pb-7 { padding-bottom: 4.5rem !important; }
.pb-8 { padding-bottom: 5.5rem !important; }

/* Padding Left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 2.5rem !important; }

/* Padding Right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 2.5rem !important; }

/* Padding Horizontal */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }

/* Padding Vertical */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

/* ====================================
   Display Utilities
==================================== */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Flex Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.flex-1 { flex: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* ====================================
   Position Utilities
==================================== */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.position-static { position: static !important; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }
.z-4 { z-index: 4 !important; }
.z-5 { z-index: 5 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }

/* ====================================
   Width & Height Utilities
==================================== */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* ====================================
   Border Utilities
==================================== */
.border-none { border: none !important; }
.border-0 { border-width: 0 !important; }
.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.border-4 { border-width: 4px !important; }

.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }

.border-primary { border-color: var(--primary-blue) !important; }
.border-accent { border-color: var(--primary-orange) !important; }
.border-white { border-color: white !important; }
.border-light { border-color: rgba(255, 255, 255, 0.1) !important; }
.border-dark { border-color: rgba(0, 0, 0, 0.1) !important; }

/* Border Radius */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--border-radius) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-full { border-radius: 9999px !important; }

/* ====================================
   Shadow Utilities
==================================== */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-orange { box-shadow: var(--shadow-orange) !important; }

/* ====================================
   Overflow Utilities
==================================== */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }

.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ====================================
   Visibility Utilities
==================================== */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ====================================
   Opacity Utilities
==================================== */
.opacity-0 { opacity: 0 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }

/* ====================================
   Cursor Utilities
==================================== */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }

/* ====================================
   Hover Effects
==================================== */
.hover-lift {
    transition: transform var(--transition);
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-scale {
    transition: transform var(--transition);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-opacity {
    transition: opacity var(--transition);
}

.hover-opacity:hover {
    opacity: 0.8;
}

/* ====================================
   Clearfix
==================================== */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* ====================================
   Screen Reader Only
==================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ====================================
   Responsive Utilities
==================================== */
@media (max-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

@media (max-width: 991px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

@media (max-width: 767px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (max-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

@media (max-width: 480px) {
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }
}

/* ====================================
   Print Styles
==================================== */
@media print {
    .no-print,
    .header .mobile-toggler,
    .header .header-row .mobile-menu,
    .module-contact,
    .back-to-top,
    .scroll-indicator,
    .footer .back-to-top {
        display: none !important;
    }

    .header .header-row .header-right .main-menu {
        display: flex !important;
    }

    a[href]:after {
        content: none !important;
    }
}



/* Add this to your existing quote-radio-wrapper */
.quote-radio-wrapper {
    width: 100%;
}

.quote-radio-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-right: 0;
}

.quote-radio-item input[type="radio"],
.quote-radio-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--quote-accent);
    cursor: pointer;
    margin: 0;
}

.quote-radio-item span {
    font-size: 14px;
    color: var(--quote-gray);
    line-height: 1.5;
}

/*------------------------------------*\
    #Health and Safety Page
    Brand Colors: #1d4078 (blue), #f05323 (orange)
\*------------------------------------*/

/*====================================
    Page Title Overrides
====================================*/
.page-title-safety .page-title-wrap {
    min-height: 460px;
}

.page-title-safety .title-heading {
    font-size: 56px;
}

/*====================================
    Safety Quote Block
====================================*/
.safety-quote {
    margin: 0 0 50px 0;
    width: 100%;
}

.safety-quote-text {
    font-size: 26px;
    font-family: 'Inter', serif;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    padding: 30px 40px;
    text-align: left;
    color: var(--primary-blue);
    position: relative;
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.03), rgba(29, 64, 120, 0.03));
    box-shadow: var(--shadow-sm);
}

.safety-quote-text::before {
    content: '"';
    font-size: 120px;
    color: var(--primary-orange);
    opacity: 0.1;
    position: absolute;
    top: -20px;
    left: 20px;
    font-family: serif;
    pointer-events: none;
}

.safety-quote-text::after {
    content: '"';
    font-size: 120px;
    color: var(--primary-orange);
    opacity: 0.1;
    position: absolute;
    bottom: -60px;
    right: 20px;
    font-family: serif;
    pointer-events: none;
    transform: rotate(180deg);
}

/*====================================
    Safety Sidebar
====================================*/
.safety-sidebar {
    position: sticky;
    top: 120px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.safety-sidebar img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease;
}

.safety-sidebar:hover img {
    transform: scale(1.05);
}

.safety-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(29, 64, 120, 0.3), rgba(240, 83, 35, 0.3));
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
    pointer-events: none;
}

.safety-sidebar:hover::before {
    opacity: 1;
}

.safety-sidebar-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 600;
    color: var(--primary-blue);
    transform: translateY(100%);
    opacity: 0;
    transition: var(--transition);
    z-index: 2;
    border-left: 3px solid var(--primary-orange);
}

.safety-sidebar:hover .safety-sidebar-caption {
    transform: translateY(0);
    opacity: 1;
}

/*====================================
    Safety Content
====================================*/
.safety-content p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-dark);
}
.crs-content p:first-of-type,
.jobs-content p:first-of-type,
.safety-content p:first-of-type {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-blue);
    border-left: 3px solid var(--primary-orange);
    padding-left: 20px;
}

/*====================================
    Safety Section Title
====================================*/
.safety-section-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 30px 0 30px;
    position: relative;
    padding-bottom: 15px;
    width: 100%;
}

.safety-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

/*====================================
    Safety Accordion
====================================*/
.safety-accordion {
    margin-top: 20px;
}

.safety-accordion .card {
    border: none;
    margin-bottom: 15px;
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    background: white;
}

.safety-accordion .card:hover {
    box-shadow: var(--shadow-md);
}

.safety-accordion .card-link {
    position: relative;
    display: block;
    padding: 20px 25px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-blue);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    background: white;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius);
}

.safety-accordion .card-link::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-orange);
    transition: var(--transition);
    font-size: 14px;
}

.safety-accordion .card-link[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(240, 83, 35, 0.02), rgba(29, 64, 120, 0.02));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.safety-accordion .card-link[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
}

.safety-accordion .card-link:hover {
    color: var(--primary-orange);
    background: rgba(240, 83, 35, 0.02);
    border-color: rgba(240, 83, 35, 0.3);
}

.safety-accordion .collapse {
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background: white;
}

.safety-accordion .card-body {
    padding: 25px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-light);
    background: #fafbfc;
}

.safety-accordion .card-body p {
    margin-bottom: 15px;
}

.safety-accordion .card-body p:last-child {
    margin-bottom: 0;
}

.safety-accordion .card-body p b,
.safety-accordion .card-body p strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Role-specific styling in accordion */
.safety-role-list {
    list-style: none;
    padding: 0;
}

.safety-role-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

.safety-role-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-orange);
    font-size: 14px;
}

/*====================================
    Safety Stats
====================================*/
.safety-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0 20px;
}

.safety-stat-item {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--border-radius);
    border: 1px solid rgba(29, 64, 120, 0.1);
    transition: var(--transition);
}

.safety-stat-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-orange);
}

.safety-stat-number {
    font-size: 36px;
    font-weight: 600;
    color: var(--primary-orange);
    line-height: 1;
    margin-bottom: 5px;
}

.safety-stat-label {
    font-size: 14px;
    color: var(--gray-light);
    font-weight: 500;
}

/*====================================
    Responsive
====================================*/
@media (max-width: 991px) {
    .page-title-safety .title-heading {
        font-size: 42px;
    }

    .safety-section-title {
        font-size: 28px;
    }

    .safety-quote-text {
        font-size: 22px;
        padding: 25px 30px;
    }

    .safety-quote-text::before,
    .safety-quote-text::after {
        font-size: 80px;
    }

    .safety-sidebar {
        position: static;
        margin-bottom: 30px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .safety-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .page-title-safety .title-heading {
        font-size: 36px;
    }

    .safety-section-title {
        font-size: 26px;
        margin: 20px 0 25px;
    }

    .safety-quote-text {
        font-size: 20px;
        padding: 20px 25px;
    }

    .safety-quote-text::before,
    .safety-quote-text::after {
        font-size: 60px;
    }

    .safety-accordion .card-link {
        font-size: 16px;
        padding: 15px 20px;
    }

    .safety-accordion .card-body {
        padding: 20px;
    }

    .safety-content p:first-of-type {
        font-size: 16px;
    }

    .order-1 {
        order: 1 !important;
    }
    .order-0 {
        order: 0 !important;
    }

    .safety-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .page-title-safety .title-heading {
        font-size: 28px;
    }

    .safety-section-title {
        font-size: 22px;
        margin: 15px 0 20px;
    }

    .safety-quote-text {
        font-size: 18px;
        padding: 20px;
    }

    .safety-accordion .card-link {
        font-size: 15px;
        padding-right: 40px;
    }

    .safety-accordion .card-link::after {
        right: 15px;
    }
}


/*------------------------------------*\
    #QUOTE REQUEST PAGE - MODERN DESIGN
    Using global root variables
    Brand Colors: #1d4078 (blue), #f05323 (orange)
\*------------------------------------*/

/* ====================================
   Hero Section - Simplified
==================================== */
.quote-hero-simple {
    background: var(--gradient-primary);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.quote-hero-simple::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.quote-hero-title-simple {
    font-size: 42px;
    font-weight: 800;
    color: var(--global--color-white);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.quote-hero-title-simple span {
    color: var(--primary-orange);
}

.quote-hero-breadcrumb {
    position: relative;
    z-index: 2;
}

.quote-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 15px;
    transition: var(--transition);
}

.quote-hero-breadcrumb a:hover {
    color: var(--primary-orange);
}

.quote-hero-breadcrumb span {
    color: var(--global--color-white);
    font-size: 15px;
    margin: 0 8px;
}

.quote-hero-breadcrumb .active {
    color: var(--primary-orange);
    font-weight: 600;
}

/* ====================================
   Form Section - Full Width
==================================== */
.quote-section-full {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--gray-bg) 0%, var(--global--color-white) 100%);
}

/* Form Card */
.quote-card-full {
    background: var(--global--color-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid rgba(29, 64, 120, 0.1);
    margin: 0 auto;
    transition: var(--transition);
}

.quote-card-full:hover {
    box-shadow: var(--shadow-orange);
    border-color: var(--primary-orange);
}

/* Form Header */
.quote-form-header {
    padding: 40px 50px 20px;
    border-bottom: 1px solid rgba(29, 64, 120, 0.1);
}

@media (max-width: 768px) {
    .quote-form-header {
        padding: 30px 25px 15px;
    }
}

.quote-form-header-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.quote-form-header-subtitle {
    font-size: 16px;
    color: var(--gray-light);
    line-height: 1.6;
}

/* Form Body */
.quote-form-body {
    padding: 30px 50px 50px;
}

@media (max-width: 768px) {
    .quote-form-body {
        padding: 25px 25px 40px;
    }
}

/* Form Sections */
.quote-form-section {
    margin-bottom: 35px;
}

.quote-form-section:last-child {
    margin-bottom: 0;
}

.quote-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 20px;
    padding-left: 12px;
    border-left: 4px solid var(--primary-orange);
}

/* Form Controls */
.quote-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.quote-input,
.quote-select,
.quote-textarea {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(29, 64, 120, 0.1);
    border-radius: var(--border-radius-md);
    font-family: var(--global--font-body);
    font-size: 14px;
    transition: var(--transition);
    background: var(--gray-bg);
}

.quote-textarea {
    height: 100px;
    padding: 12px 16px;
    resize: vertical;
}

.quote-input:focus,
.quote-select:focus,
.quote-textarea:focus {
    outline: none;
    border-color: var(--primary-orange);
    background: var(--global--color-white);
    box-shadow: var(--shadow-orange);
}

.quote-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d4078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

/* Radio & Checkbox */
.quote-radio-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 15px;
}

.quote-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.quote-radio-item input[type="radio"],
.quote-radio-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-orange);
    cursor: pointer;
}

.quote-radio-item span {
    font-size: 14px;
    color: var(--gray-light);
}

.quote-radio-item a {
    color: var(--primary-orange);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.quote-radio-item a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Submit Button */
.quote-submit-btn {
    width: 100%;
    padding: 16px 32px;
    background: var(--gradient-accent);
    color: var(--global--color-white);
    font-weight: 700;
    font-size: 16px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-orange);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    font-family: var(--global--font-body);
}

.quote-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.quote-submit-btn:hover::before {
    left: 100%;
}

.quote-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 30px -5px rgba(240, 83, 35, 0.4);
    background: var(--gradient-primary);
}

.quote-submit-btn i {
    transition: transform 0.3s ease;
    font-size: 14px;
}

.quote-submit-btn:hover i {
    transform: translateX(5px);
}

/* Contact Result */
.contact-result {
    margin-top: 20px;
    font-size: 14px;
    color: var(--gray-light);
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .quote-hero-title-simple {
        font-size: 32px;
    }

    .quote-form-header-title {
        font-size: 28px;
    }

    .quote-radio-wrapper {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .quote-hero-simple {
        padding: 40px 0;
    }

    .quote-hero-title-simple {
        font-size: 28px;
    }

    .quote-form-header-title {
        font-size: 24px;
    }

    .quote-section-full {
        padding: 40px 0;
    }

    .quote-input,
    .quote-select {
        height: 45px;
        font-size: 13px;
    }
}

/* ====================================
   PRELOADER
==================================== */

/* Ensure preloader styles are properly defined */
.preloader-minimal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader-minimal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-minimal__content {
    text-align: center;
}

.preloader-minimal__name {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #1d4078 0%, #f05323 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: minimalPulse 2s ease-in-out infinite;
}

@media (max-width: 768px) {
    .preloader-minimal__name {
        font-size: 28px;
        letter-spacing: 3px;
    }
}

@media (max-width: 480px) {
    .preloader-minimal__name {
        font-size: 22px;
        letter-spacing: 2px;
    }
}

.preloader-minimal__spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid rgba(29, 64, 120, 0.1);
    border-top-color: #f05323;
    border-right-color: #1d4078;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes minimalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}