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

   TASC Property Appraisals - Main Stylesheet

   Modern, Sophisticated, Business-Focused Design

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



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

   1. ROOT VARIABLES & RESET

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

   :root {

    /* Primary Colors */

    --primary-color: #00ABF0;

    --primary-dark: #0088C0;

    --primary-light: #33BFFF;

    

    /* Secondary Colors */

    --secondary-color: #F0D72B;

    --secondary-dark: #F0D72B;

    --secondary-light: #f2c94c;

    

    /* Neutral Colors */

    --dark: #1a1a1a;

    --gray-900: #2d3748;

    --gray-800: #3e4854;

    --gray-700: #4a5568;

    --gray-600: #718096;

    --gray-500: #a0aec0;

    --gray-400: #cbd5e0;

    --gray-300: #e2e8f0;

    --gray-200: #edf2f7;

    --gray-100: #f7fafc;

    --white: #ffffff;

    

    /* Functional Colors */

    --success: #48bb78;

    --warning: #ed8936;

    --danger: #f56565;

    --info: #4299e1;

    

    /* Typography */

    --font-primary: 'Inter', sans-serif;

    --font-secondary: 'Inter', sans-serif;

    

    /* Spacing */

    --section-padding: 100px;

    --section-padding-mobile: 60px;

    

    /* Transitions - Material Design */

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

    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    

    /* Material Design Elevation (for reference, MDB handles shadows) */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);

    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);

    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    

    /* Border Radius */

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;

    --radius-xl: 16px;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    scroll-padding-top: 80px;

}



body {

    font-family: var(--font-secondary);

    color: var(--gray-800);

    line-height: 1.7;

    font-size: 16px;

    overflow-x: hidden;

    background-color: var(--white);

    position: relative;

}



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

   2. TYPOGRAPHY

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

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-primary);

    font-weight: 700;

    line-height: 1.2;

    color: var(--gray-900);

    margin-bottom: 1rem;

    letter-spacing: -0.02em;

}



h1 {

    font-size: 3.5rem;

}



h2 {

    font-size: 2.75rem;

}



h3 {

    font-size: 2rem;

}



h4 {

    font-size: 1.5rem;

}



h5 {

    font-size: 1.25rem;

}



h6 {

    font-size: 1rem;

}



p {

    margin-bottom: 1rem;

    color: var(--gray-700);

}



a {

    color: var(--primary-color);

    text-decoration: none;

    transition: var(--transition-base);

}



a:hover {

    color: var(--primary-dark);

}



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

   3. NAVIGATION

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

.navbar {

    padding: 1rem 0;

    background-color: var(--primary-color);

    transition: var(--transition-base);

    z-index: 1000;

    box-shadow: 0 2px 4px rgba(0, 171, 240, 0.2);

}



.navbar.scrolled {

    background-color: rgba(255, 255, 255, 0.98);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(10px);

}



.navbar-brand {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-family: var(--font-primary);

    color: var(--white);

    transition: var(--transition-base);

}



.navbar.scrolled .navbar-brand {

    color: var(--primary-color);

}



.brand-logo {

    height: 70px;

    width: auto;

    object-fit: contain;

    transition: var(--transition-base);

}



.brand-icon {

    font-size: 1.75rem;

    font-weight: 800;

    letter-spacing: -1px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.brand-text {

    font-size: 1.1rem;

    font-weight: 600;

}



.navbar-nav .nav-link {

    color: rgba(255, 255, 255, 0.95);

    font-family: var(--font-primary);

    font-weight: 500;

    font-size: 0.95rem;

    padding: 0.5rem 1rem;

    margin: 0 0.25rem;

    position: relative;

    transition: var(--transition-base);

    border-radius: 4px;

}



.navbar.scrolled .navbar-nav .nav-link {

    color: var(--gray-700);

}



.navbar:not(.scrolled) .navbar-nav .nav-link {

    color: rgba(255, 255, 255, 0.95);

}



.navbar-nav .nav-link:hover,

.navbar-nav .nav-link.active {

    color: var(--secondary-color);

}



.navbar.scrolled .navbar-nav .nav-link:hover,

.navbar.scrolled .navbar-nav .nav-link.active {

    color: var(--primary-color);

}



.navbar:not(.scrolled) .navbar-nav .nav-link:hover,

.navbar:not(.scrolled) .navbar-nav .nav-link.active {

    color: var(--white);

    background-color: rgba(255, 255, 255, 0.1);

}



/* Navbar Button Styling */

.navbar:not(.scrolled) .btn-primary {

    background-color: var(--white);

    color: var(--primary-color);

    border-color: var(--white);

}



.navbar:not(.scrolled) .btn-primary:hover {

    background-color: rgba(255, 255, 255, 0.9);

    color: var(--primary-dark);

    border-color: rgba(255, 255, 255, 0.9);

}



.navbar .btn-primary {

    font-weight: 600;

    padding: 0.5rem 1.25rem;

    border-radius: 6px;

    transition: var(--transition-base);

}



.navbar .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 171, 240, 0.3);

}



.navbar-light.navbar .navbar-toggler {

    border-color: rgba(255, 255, 255, 0.4);

}



.navbar-light .navbar-toggler-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}



.navbar-light.navbar.scrolled .navbar-toggler {

    border-color: rgba(0, 0, 0, 0.15);

}



.navbar-light.navbar.scrolled .navbar-toggler-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}




.hero-rics-logo {

    height: 52px !important;

    width: auto !important;

    vertical-align: middle;

    margin-left: 0.5rem;

}



@media (max-width: 575.98px) {

    .hero-rics-logo {

        display: block;

        margin: 0.5rem 0 0;

    }

}

.navbar-nav .nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 2px;

    background: var(--secondary-color);

    transform: translateX(-50%);

    transition: var(--transition-base);

}



.navbar-nav .nav-link:hover::after,

.navbar-nav .nav-link.active::after {

    width: 80%;

}



.dropdown-menu {

    border: none;

    box-shadow: var(--shadow-lg);

    border-radius: var(--radius-md);

    padding: 0.5rem 0;

    margin-top: 0.5rem;

}



.dropdown-item {

    padding: 0.75rem 1.5rem;

    font-family: var(--font-primary);

    font-weight: 500;

    color: var(--gray-700);

    transition: var(--transition-base);

}



.dropdown-item:hover {

    background-color: var(--gray-100);

    color: var(--primary-color);

}



/* Hero Section */

#home {

    background-color: transparent;

    background-image: url("../img/Websitephoto.jpeg");
    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding-top: 140px;

    position: relative;

}



#home::before {

    content: '';

    position: absolute;

    inset: 0;

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

    z-index: 0;

}



#home > .container {

    position: relative;

    z-index: 1;

}



.hero-stat-number {

    font-size: 3rem;

    line-height: 1.1;

    font-family: var(--font-primary);

}



.hero-stat-suffix {

    font-size: 1.5rem;

    vertical-align: super;

}



.hero-stat-label {

    font-size: 0.9rem;

    font-weight: 500;

    letter-spacing: 0.3px;

    opacity: 0.95;

}



#home .hero-image {

    margin-top: 35px;

}



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

   4. BUTTONS

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

.btn {

    font-family: var(--font-primary);

    font-weight: 600;

    padding: 0.75rem 2rem;

    border-radius: 4px;

    transition: var(--transition-base);

    border: 2px solid transparent;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-size: 0.9rem;

    position: relative;

    overflow: hidden;

}



.btn-primary {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

}



.btn-primary:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 171, 240, 0.3);

}



.btn-outline-light {

    border-color: var(--white);

    color: var(--white);

    background-color: transparent;

}



.btn-outline-light:hover {

    background-color: var(--white);

    color: var(--primary-color);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);

}



.btn-light {

    background-color: var(--white);

    color: var(--primary-color);

    border-color: var(--white);

}



.btn-light:hover {

    background-color: var(--white);

    color: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.btn-dark {

    background-color: var(--primary-dark);

    border-color: var(--primary-dark);

    color: var(--white);

}



.btn-dark:hover {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 136, 192, 0.3);

}



.btn-lg {

    padding: 1rem 2.5rem;

    font-size: 1rem;

}



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

   5. HERO SECTION - Using Bootstrap/MDB defaults only

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



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

   6. SECTIONS

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

.section-padding {

    padding: var(--section-padding) 0;

    position: relative;

    background-color: var(--white);

}



.services-section {

    position: relative;

    background-color: var(--white);

    background-image: linear-gradient(135deg, rgba(13, 25, 30, 0.7), rgba(9, 25, 32, 0.7)),

        url("https://images.unsplash.com/photo-1502005097973-6a7082348e28?w=1600&h=900&fit=crop");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.services-section .section-title,

.services-section .section-description {

    color: var(--white);

}



.services-section .section-description {

    opacity: 0.95;

}



.section-badge {

    display: inline-block;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));

    color: var(--white);

    padding: 0.5rem 1.5rem;

    border-radius: 50px;

    font-family: var(--font-primary);

    font-weight: 600;

    font-size: 0.875rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 1rem;

    box-shadow: 0 2px 4px rgba(0, 171, 240, 0.2);

}



.section-title {

    font-size: 2.75rem;

    font-weight: 800;

    color: var(--gray-900);

    margin-bottom: 1rem;

}



.section-description {

    font-size: 1.125rem;

    color: var(--gray-600);

    line-height: 1.8;

    max-width: 700px;

    margin: 0 auto;

}



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

   7. SERVICE CARDS

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

.service-card {

    background: var(--white);

    padding: 2.5rem;

    border-radius: 16px;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    height: 100%;

    border: 2px solid transparent;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);

}



.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.service-card:hover::before {

    transform: scaleX(1);

}



.service-card:hover {

    transform: translateY(-12px) scale(1.02);

    border-color: var(--primary-color);

    box-shadow: 0 12px 24px rgba(0, 171, 240, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);

    background: var(--white);

}



/* Alternate cards with primary blue background */

.services-section .row > div:nth-child(2) .service-card,

.services-section .row > div:nth-child(4) .service-card,

.services-section .row > div:nth-child(6) .service-card {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    border-color: var(--primary-dark);

    color: var(--white);

}



.services-section .row > div:nth-child(2) .service-card::before,

.services-section .row > div:nth-child(4) .service-card::before,

.services-section .row > div:nth-child(6) .service-card::before {

    background: linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0.7));

}



.services-section .row > div:nth-child(2) .service-card:hover,

.services-section .row > div:nth-child(4) .service-card:hover,

.services-section .row > div:nth-child(6) .service-card:hover {

    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);

    border-color: var(--white);

    box-shadow: 0 12px 24px rgba(0, 171, 240, 0.3), 0 6px 12px rgba(0, 0, 0, 0.15);

}



/* Text colors for blue cards */

.services-section .row > div:nth-child(2) .service-title,

.services-section .row > div:nth-child(4) .service-title,

.services-section .row > div:nth-child(6) .service-title {

    color: var(--white);

}



.services-section .row > div:nth-child(2) .service-card:hover .service-title,

.services-section .row > div:nth-child(4) .service-card:hover .service-title,

.services-section .row > div:nth-child(6) .service-card:hover .service-title {

    color: var(--white);

}



.services-section .row > div:nth-child(2) .service-description,

.services-section .row > div:nth-child(4) .service-description,

.services-section .row > div:nth-child(6) .service-description {

    color: rgba(255, 255, 255, 0.9);

}



.services-section .row > div:nth-child(2) .service-card:hover .service-description,

.services-section .row > div:nth-child(4) .service-card:hover .service-description,

.services-section .row > div:nth-child(6) .service-card:hover .service-description {

    color: var(--white);

}



/* Icon styling for blue cards */

.services-section .row > div:nth-child(2) .service-icon,

.services-section .row > div:nth-child(4) .service-icon,

.services-section .row > div:nth-child(6) .service-icon {

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.services-section .row > div:nth-child(2) .service-card:hover .service-icon,

.services-section .row > div:nth-child(4) .service-card:hover .service-icon,

.services-section .row > div:nth-child(6) .service-card:hover .service-icon {

    background: rgba(255, 255, 255, 0.3);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.2);

    border-color: rgba(255, 255, 255, 0.4);

}



/* Link styling for blue cards */

.services-section .row > div:nth-child(2) .service-link,

.services-section .row > div:nth-child(4) .service-link,

.services-section .row > div:nth-child(6) .service-link {

    color: var(--white);

}



.services-section .row > div:nth-child(2) .service-link::after,

.services-section .row > div:nth-child(4) .service-link::after,

.services-section .row > div:nth-child(6) .service-link::after {

    background: var(--white);

}



.services-section .row > div:nth-child(2) .service-link:hover,

.services-section .row > div:nth-child(4) .service-link:hover,

.services-section .row > div:nth-child(6) .service-link:hover {

    color: rgba(255, 255, 255, 0.9);

}



.service-image {

    overflow: hidden;

    border-radius: 12px;

    margin-bottom: 1.5rem;

}



.service-image img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.service-card:hover .service-image img {

    transform: scale(1.1) rotate(1deg);

}



.service-icon {

    width: 90px;

    height: 90px;

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.75rem;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    box-shadow: 0 8px 16px rgba(0, 171, 240, 0.2);

    border: 3px solid transparent;

}



.service-card:hover .service-icon {

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 12px 24px rgba(0, 171, 240, 0.3), 0 0 0 4px rgba(0, 171, 240, 0.1);

    border-color: rgba(255, 255, 255, 0.3);

}



.service-icon i {

    font-size: 2.75rem;

    color: var(--white);

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 1;

}



.service-card:hover .service-icon i {

    transform: scale(1.1);

}



.service-title {

    font-size: 1.625rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 1rem;

    transition: color 0.3s ease;

    line-height: 1.3;

}



.service-card:hover .service-title {

    color: var(--primary-color);

}



.service-description {

    color: var(--gray-600);

    line-height: 1.8;

    margin-bottom: 1.75rem;

    font-size: 0.95rem;

    transition: color 0.3s ease;

}



.service-card:hover .service-description {

    color: var(--gray-700);

}



.service-link {

    color: var(--primary-color);

    font-family: var(--font-primary);

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

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

    position: relative;

    padding: 0.5rem 0;

    font-size: 1rem;

}



.service-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary-color);

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.service-link:hover {

    gap: 0.75rem;

    color: var(--primary-dark);

    transform: translateX(4px);

}



.service-link:hover::after {

    width: 100%;

}



.service-link i {

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.service-link:hover i {

    transform: translateX(4px);

}



/* Service Cards Responsive */

@media (max-width: 991.98px) {

    .service-card {

        padding: 2rem;

    }

    

    .service-icon {

        width: 80px;

        height: 80px;

        margin-bottom: 1.5rem;

    }

    

    .service-icon i {

        font-size: 2.5rem;

    }

    

    .service-title {

        font-size: 1.5rem;

    }

}



@media (max-width: 575.98px) {

    .service-card {

        padding: 1.75rem;

    }

    

    .service-icon {

        width: 70px;

        height: 70px;

    }

    

    .service-icon i {

        font-size: 2.25rem;

    }

}



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

   8. WHY CHOOSE US SECTION

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

.why-choose-section {

    background-color: var(--gray-100);

}



.split-panel {

    position: relative;

    overflow: hidden;

    background: var(--gray-100);

}



.split-panel .container {

    position: relative;

    z-index: 2;

}



.split-panel-bg {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 52%;

    right: -6%;

    background-image: url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1400&h=900&fit=crop");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    transform: skewX(-6deg);

    z-index: 1;

}



.split-text {

    padding-right: 2rem;

}



.split-side-content {

    position: relative;

    min-height: 460px;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    gap: 1rem;

    padding: 2rem;

    z-index: 2;

}



.floating-card {

    position: absolute;

    bottom: 20px;

    left: -20px;

    background: var(--white);

    padding: 0.75rem 1.25rem;

    border-radius: 999px;

    box-shadow: var(--shadow-md);

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.floating-card .floating-label {

    font-size: 0.8rem;

    color: var(--gray-600);

    letter-spacing: 0.3px;

    text-transform: uppercase;

    font-weight: 600;

}



.floating-card strong {

    color: var(--primary-dark);

    font-size: 1.1rem;

}



.feature-list {

    margin-top: 2rem;

}



.feature-item {

    display: flex;

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.feature-icon i {

    font-size: 1.75rem;

    color: var(--primary-color);

}



.feature-content h4 {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 0.5rem;

}



.feature-content p {

    color: var(--gray-600);

    margin-bottom: 0;

}



.why-choose-image {

    position: relative;

}



.why-choose-image img {

    border-radius: var(--radius-lg);

}



.image-badge {

    position: absolute;

    bottom: -20px;

    right: 30px;

    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));

    padding: 1.5rem 2rem;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-xl);

    display: flex;

    align-items: center;

    gap: 1rem;

    color: var(--white);

}



.image-badge i {

    font-size: 2.5rem;

}



.image-badge strong {

    display: block;

    font-size: 2rem;

    font-weight: 800;

    font-family: var(--font-primary);

    line-height: 1;

}



.image-badge span {

    display: block;

    font-size: 0.875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}



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

   9. PROCESS CARDS

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

.process-card {

    text-align: center;

    padding: 2rem;

    background-color: var(--white);

    border-radius: 8px;

    transition: var(--transition-base);

    position: relative;

    height: 100%;

    cursor: pointer;

}



.process-card:hover {

    transform: translateY(-8px);

}



.process-number {

    position: absolute;

    top: -20px;

    right: 20px;

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--font-primary);

    font-weight: 800;

    font-size: 1.25rem;

    color: var(--white);

}



.process-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 1rem auto 1.5rem;

    transition: var(--transition-base);

}



.process-card:hover .process-icon {

    transform: scale(1.1) rotate(5deg);

}



.process-icon i {

    font-size: 2rem;

    color: var(--white);

}



.process-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 1rem;

}



.process-description {

    color: var(--gray-600);

    line-height: 1.7;

    margin-bottom: 0;

}



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

   10. CTA SECTION

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

.cta-section {

    position: relative;

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);

    overflow: hidden;

}



.cta-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&h=800&fit=crop');

    background-size: cover;

    background-position: center;

    opacity: 0.1;

    z-index: 0;

}



.cta-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(0, 171, 240, 0.95) 0%, rgba(0, 136, 192, 0.95) 100%);

    z-index: 1;

}



.cta-section .container {

    position: relative;

    z-index: 2;

}



.cta-title {

    color: var(--white);

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 1rem;

}



.cta-description {

    color: rgba(255, 255, 255, 0.9);

    font-size: 1.25rem;

    margin-bottom: 2.5rem;

}



.cta-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    justify-content: center;

}



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

   11. TESTIMONIALS

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

.testimonials-section {

    position: relative;

    background-image: linear-gradient(135deg, rgba(247, 250, 252, 0.92), rgba(247, 250, 252, 0.92)),

        url("https://images.unsplash.com/photo-1502005097973-6a7082348e28?w=1600&h=900&fit=crop");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.testimonial-card {

    background-color: var(--white);

    padding: 2.5rem;

    border-radius: 8px;

    height: 100%;

    transition: var(--transition-base);

    cursor: pointer;

}



.testimonial-card:hover {

    transform: translateY(-5px);

}



.testimonial-rating {

    margin-bottom: 1.5rem;

}



.testimonial-rating i {

    color: var(--secondary-color);

    font-size: 1.125rem;

    margin-right: 0.25rem;

}



.testimonial-text {

    font-size: 1.125rem;

    line-height: 1.8;

    color: var(--gray-700);

    font-style: italic;

    margin-bottom: 2rem;

}



.testimonial-author {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.author-avatar {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--font-primary);

    font-weight: 700;

    color: var(--white);

    font-size: 1.125rem;

}



.author-name {

    font-size: 1.125rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 0.25rem;

}



.author-title {

    font-size: 0.9rem;

    color: var(--gray-600);

    margin-bottom: 0;

}



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

   12. PAGE HEADER

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

.page-header {

    position: relative;

    background: var(--white);

    padding: 150px 0 100px;

    margin-bottom: 0;

}



.page-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-size: cover;

    background-position: center;

    opacity: 0.1;

    z-index: 0;

}



.page-header-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: transparent;

    z-index: 1;

}



.page-header .container {

    position: relative;

    z-index: 2;

}



.page-title {

    color: var(--primary-dark);

    font-size: 3.5rem;

    font-weight: 800;

    margin-bottom: 1rem;

}



.page-description {

    color: var(--primary-color);

    font-size: 1.25rem;

    margin-bottom: 2rem;

}



.breadcrumb {

    background-color: transparent;

    margin-bottom: 0;

    padding: 0;

}



.breadcrumb-item {

    color: var(--primary-color);

}



.breadcrumb-item a {

    color: var(--primary-dark);

}



.breadcrumb-item.active {

    color: var(--primary-color);

}



.breadcrumb-item + .breadcrumb-item::before {

    color: var(--primary-light);

}





.breadcrumb-pill {

    display: inline-block;

    background-color: var(--white);

    color: var(--primary-dark);

    padding: 0.2rem 0.6rem;

    border-radius: 999px;

    font-weight: 600;

    letter-spacing: 0.2px;

}



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

   13. ABOUT PAGE SPECIFIC

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

.about-image-wrapper {

    position: relative;

}



.about-section.about-section-gradient {

    background-color: transparent;

    background-image: linear-gradient(135deg, rgba(0, 171, 240, 0.12) 0%, rgba(255, 255, 255, 0.98) 65%);

}



.about-overview-section {

    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),

        url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1600&h=900&fit=crop");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.about-overview-section .section-title,

.about-overview-section p {

    color: var(--white);

}



.about-overview-section .mvv-card .mvv-title,

.about-overview-section .mvv-card .mvv-description {

    color: var(--white);

}



.about-overview-section .mvv-card {

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

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);

}



.certifications-bg {

    background-image: linear-gradient(135deg, rgba(0, 136, 192, 0.75), rgba(0, 171, 240, 0.75)),

        url("https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=1600&h=900&fit=crop");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.certifications-bg .section-title,

.certifications-bg .section-description {

    color: var(--white);

}



.certifications-bg .section-description {

    opacity: 0.95;

}



.services-overview-bg {

    background-image: linear-gradient(135deg, rgba(0, 136, 192, 0.7), rgba(0, 171, 240, 0.7)),

        url("https://images.unsplash.com/photo-1502005097973-6a7082348e28?w=1600&h=900&fit=crop");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.services-page .services-overview-bg {

    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),

        url("https://images.unsplash.com/photo-1502005097973-6a7082348e28?w=1600&h=900&fit=crop");

}



.services-overview-text .section-title,

.services-overview-text .lead,

.services-overview-text p {

    color: var(--white);

}



.services-overview-text .lead,

.services-overview-text p {

    opacity: 0.95;

}



.gallery-section-bg {

    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),

        url("https://images.unsplash.com/photo-1502005097973-6a7082348e28?w=1600&h=900&fit=crop");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.about-experience-badge {

    position: absolute;

    bottom: 30px;

    right: 30px;

    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));

    padding: 2rem;

    border-radius: var(--radius-lg);

    text-align: center;

    box-shadow: var(--shadow-xl);

}



.experience-number {

    display: block;

    font-family: var(--font-primary);

    font-size: 3rem;

    font-weight: 800;

    color: var(--white);

    line-height: 1;

}



.experience-text {

    display: block;

    color: var(--white);

    font-weight: 600;

    font-size: 0.875rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-top: 0.5rem;

}



.mvv-card {

    background-color: var(--white);

    padding: 2.5rem;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    text-align: center;

    height: 100%;

    transition: var(--transition-base);

}



.mvv-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-xl);

}



.mvv-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

}



.mvv-icon i {

    font-size: 2.5rem;

    color: var(--white);

}



.mvv-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 1rem;

}



.mvv-description {

    color: var(--gray-600);

    line-height: 1.7;

    margin-bottom: 0;

}



/* Stats Section */

.stats-section {

    position: relative;

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);

}



.stats-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1920&h=600&fit=crop');

    background-size: cover;

    background-position: center;

    opacity: 0.1;

    z-index: 0;

}



.stats-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(0, 171, 240, 0.95) 0%, rgba(0, 136, 192, 0.95) 100%);

    z-index: 1;

}



.stats-section .container {

    position: relative;

    z-index: 2;

}



.stat-box {

    padding: 2rem;

}



.stat-icon {

    font-size: 3rem;

    color: var(--secondary-color);

    margin-bottom: 1rem;

}



.stat-box .stat-number {

    color: var(--white);

    font-size: 4rem;

}



.stat-box .stat-label {

    color: rgba(255, 255, 255, 0.9);

    font-size: 1rem;

}



/* Team Cards */

.team-section {

    background: linear-gradient(to bottom, var(--white) 0%, var(--gray-50) 100%);

}



.team-card {

    background-color: var(--white);

    border-radius: var(--radius-lg);

    overflow: hidden;

    transition: var(--transition-base);

    height: 100%;

    display: flex;

    flex-direction: column;

    border: 1px solid var(--gray-200);

}



.team-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    border-color: var(--primary-color);

}



.team-image {

    position: relative;

    overflow: hidden;

    background: var(--gray-100);

    height: 350px;

}



.team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 30%;

    transition: var(--transition-base);

}



.team-card:hover .team-image img {

    transform: scale(1.08);

}



.team-content {

    padding: 2rem;

    text-align: center;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.team-name {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 0.5rem;

}



.team-position {

    color: var(--primary-color);

    font-weight: 600;

    font-size: 1rem;

    margin-bottom: 1.25rem;

}



.team-description-preview {

    color: var(--gray-600);

    line-height: 1.7;

    margin-bottom: 0;

    flex-grow: 1;

    font-size: 0.95rem;

}



.team-modal-bio {

    color: var(--gray-700);

    line-height: 1.8;

    font-size: 1.05rem;

}



.team-modal-bio p {

    text-align: justify;

}



.modal-content {

    border-radius: var(--radius-lg);

    border: none;

    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



.modal-title {

    font-size: 2rem;

    font-weight: 700;

    color: var(--gray-900);

}



@media (max-width: 991.98px) {

    .team-image img {

        height: 300px;

    }

    

    .team-content {

        padding: 1.5rem;

    }

}



/* Certification Cards */

.certification-card {

    text-align: center;

    padding: 2rem;

    background-color: var(--white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    transition: var(--transition-base);

    height: 100%;

}



.certification-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-xl);

}



.certification-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

}



.certification-icon i {

    font-size: 2.5rem;

    color: var(--white);

}



.certification-card h4 {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 1rem;

}



.certification-card p {

    color: var(--gray-600);

    line-height: 1.7;

    margin-bottom: 0;

}



/* Feature Box (Large) */

.feature-box {

    display: flex;

    gap: 2rem;

    padding: 2rem;

    background-color: var(--white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    transition: var(--transition-base);

}



.feature-box:hover {

    box-shadow: var(--shadow-lg);

}



.feature-icon-large {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));

    border-radius: var(--radius-lg);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.feature-icon-large i {

    font-size: 2rem;

    color: var(--white);

}



.feature-content-large h4 {

    font-size: 1.375rem;

    font-weight: 700;

    color: var(--gray-900);

    margin-bottom: 0.75rem;

}



.feature-content-large p {

    color: var(--gray-600);

    line-height: 1.7;

    margin-bottom: 0;

}



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

   14. FOOTER

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

.footer {

    background-color: #0088c0;

    color: rgba(255, 255, 255, 0.9);

    padding: 2rem 0 1rem;

    position: relative;

    overflow: hidden;

}



.footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);

}



.footer-brand {

    font-family: var(--font-primary);

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--white);

    margin-bottom: 0.75rem;

}



.footer-description {

    color: rgba(255, 255, 255, 0.85);

    line-height: 1.6;

    margin-bottom: 1rem;

    font-size: 0.95rem;

}



.footer-social {

    display: flex;

    gap: 1rem;

}



.social-link {

    width: 40px;

    height: 40px;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    transition: var(--transition-base);

    position: relative;

    overflow: hidden;

}



.social-link:hover {

    background-color: var(--primary-color);

    color: var(--white);

    transform: translateY(-3px);

    box-shadow: 0 4px 8px rgba(0, 171, 240, 0.3);

}



.footer-title {

    font-family: var(--font-primary);

    font-size: 1.125rem;

    font-weight: 700;

    color: var(--white);

    margin-bottom: 0.75rem;

}



.footer-links {

    list-style: none;

    padding: 0;

}



.footer-links li {

    margin-bottom: 0.4rem;

}



.footer-links a {

    color: rgba(255, 255, 255, 0.8);

    transition: var(--transition-base);

    display: inline-block;

    border-radius: 4px;

    padding: 0.25rem 0.5rem;

    margin: -0.25rem -0.5rem;

}



.footer-links a:hover {

    color: var(--white);

    background-color: rgba(255, 255, 255, 0.05);

}



.footer-contact {

    list-style: none;

    padding: 0;

}



.footer-contact li {

    display: flex;

    gap: 0.75rem;

    margin-bottom: 0.5rem;

    color: rgba(255, 255, 255, 0.85);

    font-size: 0.95rem;

    line-height: 1.5;

}



.footer-contact i {

    color: var(--white);

    font-size: 1.125rem;

    margin-top: 3px;

    opacity: 0.9;

}



.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, 0.2);

    margin-top: 1.5rem;

    padding-top: 1rem;

}



.copyright {

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 0;

}



.footer-bottom-links {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    gap: 2rem;

    justify-content: flex-end;

}



.footer-bottom-links a {

    color: rgba(255, 255, 255, 0.75);

    transition: var(--transition-base);

}



.footer-bottom-links a:hover {

    color: var(--white);

}



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

   15. BACK TO TOP BUTTON

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

.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    background: var(--primary-color);

    color: var(--white);

    border: none;

    border-radius: 50%;

    font-size: 1.25rem;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 171, 240, 0.4);

    opacity: 0;

    visibility: hidden;

    transition: var(--transition-base);

    z-index: 999;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.back-to-top.show {

    opacity: 1;

    visibility: visible;

}



.back-to-top:hover {

    transform: translateY(-5px) scale(1.1);

    box-shadow: 0 6px 16px rgba(0, 171, 240, 0.5);

    background: var(--primary-dark);

}



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

   16. RESPONSIVE DESIGN

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

@media (max-width: 991.98px) {

    :root {

        --section-padding: 60px;

    }

    

    .section-title {

        font-size: 2rem;

    }

    

    .page-title {

        font-size: 2.5rem;

    }

    

    .cta-title {

        font-size: 2rem;

    }

    

    .navbar-nav .nav-link {

        color: var(--gray-700);

        padding: 0.75rem 0;

    }

    

    .navbar-nav .nav-link::after {

        display: none;

    }

    

    .feature-box {

        flex-direction: column;

        text-align: center;

    }

    

    .feature-icon-large {

        margin: 0 auto;

    }



    .split-panel-bg {

        left: 0;

        right: 0;

        transform: skewX(0deg);

    }



    .split-side-content {

        min-height: 360px;

        padding: 1.5rem;

    }



    #home {

        padding-top: 80px;

    }



    #home .display-4 {

        font-size: 2.5rem;

    }



    #home .lead {

        font-size: 1.05rem;

    }



    #home .col-lg-6 + .col-lg-6 {

        margin-top: 2rem;

    }

}



@media (max-width: 767.98px) {

    h1 {

        font-size: 2rem;

    }

    

    h2 {

        font-size: 1.75rem;

    }

    

    .stat-number {

        font-size: 2rem;

    }

    

    .image-badge {

        position: static;

        margin-top: 2rem;

    }

    

    .about-experience-badge {

        position: static;

        margin-top: 2rem;

        display: inline-block;

    }

    

    .cta-buttons {

        flex-direction: column;

    }

    

    .cta-buttons .btn {

        width: 100%;

    }



    #home .display-4 {

        font-size: 2.1rem;

    }



    #home .lead {

        font-size: 1rem;

    }



    .hero-stat-number {

        font-size: 2.25rem;

    }

    

    .footer-bottom-links {

        justify-content: flex-start;

        margin-top: 1rem;

    }

}



@media (max-width: 575.98px) {

    #home {

        padding-top: 70px;

    }



    #home .display-4 {

        font-size: 1.9rem;

    }



    #home .lead {

        font-size: 0.95rem;

    }



    .hero-stat-label {

        font-size: 0.8rem;

    }



    .floating-card {

        position: static;

        margin-top: 1rem;

        border-radius: var(--radius-lg);

        align-items: flex-start;

    }

}



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

   17. UTILITIES

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

.bg-light {

    background-color: var(--gray-100) !important;

}



.text-center {

    text-align: center !important;

}



.shadow {

    box-shadow: var(--shadow-md) !important;

}



.shadow-lg {

    box-shadow: var(--shadow-lg) !important;

}



.rounded {

    border-radius: var(--radius-md) !important;

}



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

   18. MATERIAL DESIGN ENHANCEMENTS

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



/* Enhanced Ripple Effects */

.ripple-surface {

    position: relative;

    overflow: hidden;

}



.ripple-surface::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.5);

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}



.ripple-surface:active::before {

    width: 300px;

    height: 300px;

}



/* Material Design Card Enhancements */

.service-card,

.process-card,

.testimonial-card {

    will-change: transform;

    backface-visibility: hidden;

}



/* Material Design Button Enhancements */

.btn {

    will-change: transform;

    backface-visibility: hidden;

}



.btn:active {

    transform: scale(0.98);

}



/* Material Design Smooth Transitions */

* {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* Material Design Focus States */

.btn:focus,

.nav-link:focus,

.service-link:focus {

    outline: 2px solid var(--primary-color);

    outline-offset: 2px;

}



/* Material Design Elevation on Hover */

.service-card:hover,

.process-card:hover,

.testimonial-card:hover {

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),

                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



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

   19. PERFORMANCE OPTIMIZATIONS

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



/* GPU Acceleration for Animations */

.service-card,

.process-card,

.testimonial-card,

.btn,

.nav-link {

    transform: translateZ(0);

    -webkit-transform: translateZ(0);

}



/* Reduce Motion for Accessibility */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



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

   20. ACCESSIBILITY ENHANCEMENTS

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



/* Focus Visible for Keyboard Navigation */

*:focus-visible {

    outline: 2px solid var(--primary-color);

    outline-offset: 2px;

    border-radius: 4px;

}



/* Skip to Content Link */

.skip-to-content {

    position: absolute;

    top: -40px;

    left: 0;

    background: var(--primary-color);

    color: var(--white);

    padding: 8px;

    text-decoration: none;

    z-index: 10000;

}



.skip-to-content:focus {

    top: 0;

}



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

   21. CONTACT PAGE STYLES

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

.contact-info-card {

    background-color: var(--white);

    border: 1px solid var(--gray-200);

}



.contact-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 1.25rem;

    flex-shrink: 0;

}



.contact-item h5 {

    color: var(--gray-900);

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.contact-item p {

    color: var(--gray-700);

    margin-bottom: 0;

}



.contact-item a {

    color: var(--primary-color);

    transition: var(--transition-base);

}



.contact-item a:hover {

    color: var(--primary-dark);

}



.contact-form-card {

    background-color: var(--white);

    border: 1px solid var(--gray-200);

}



.contact-form .form-label {

    font-weight: 600;

    color: var(--gray-900);

    margin-bottom: 0.5rem;

}



.contact-form .form-control,

.contact-form .form-select {

    border: 2px solid var(--gray-300);

    border-radius: 8px;

    padding: 0.75rem 1rem;

    transition: var(--transition-base);

}



.contact-form .form-control:focus,

.contact-form .form-select:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 0.2rem rgba(0, 171, 240, 0.1);

    outline: none;

}



.request-form-card {

    background-color: var(--white);

    border: 1px solid var(--gray-200);

}



.appraisal-form .form-label {

    font-weight: 600;

    color: var(--gray-900);

    margin-bottom: 0.5rem;

}



.appraisal-form .form-label .text-danger {

    color: var(--danger) !important;

}



.appraisal-form .form-control,

.appraisal-form .form-select {

    border: 2px solid var(--gray-300);

    border-radius: 8px;

    padding: 0.75rem 1rem;

    transition: var(--transition-base);

}



.appraisal-form .form-control:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 0.2rem rgba(0, 171, 240, 0.1);

    outline: none;

}



.appraisal-form .form-check {

    margin-bottom: 0.75rem;

}



.appraisal-form .form-check-input {

    width: 1.25rem;

    height: 1.25rem;

    margin-top: 0.25rem;

    border: 2px solid var(--gray-400);

    cursor: pointer;

}



.appraisal-form .form-check-input:checked {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

}



.appraisal-form .form-check-input:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 0.2rem rgba(0, 171, 240, 0.1);

}



.appraisal-form .form-check-label {

    margin-left: 0.5rem;

    cursor: pointer;

    color: var(--gray-700);

}



.appraisal-form textarea {

    resize: vertical;

}



.map-section {

    margin-top: 0;

}



.map-wrapper {

    width: 100%;

    height: 450px;

    overflow: hidden;

}



.map-wrapper iframe {

    width: 100%;

    height: 100%;

    border: none;

}



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

   22. PRINT STYLES

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

@media print {

    .navbar,

    .back-to-top,

    .cta-buttons {

        display: none !important;

    }

}


/* Homepage certifications and affiliations logo cloud */
.affiliations-section .logo-cloud {
    row-gap: 3rem;
}

.affiliations-section .logo-cloud-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.affiliations-section .affiliation-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    padding: 0.5rem;
}

.affiliations-section .affiliation-logo img {
    display: block;
    width: auto;
    max-width: min(100%, 240px);
    max-height: 150px;
    object-fit: contain;
    transform: scale(var(--logo-scale, 1));
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.affiliations-section .affiliation-logo:hover img {
    transform: scale(calc(var(--logo-scale, 1) * 1.04));
    opacity: 0.9;
}

/* The first uploaded logo has substantial whitespace baked into its JPEG. */
.affiliations-section .logo-cloud-item-1 {
    --logo-scale: 1.42;
}

@media (max-width: 575.98px) {
    .affiliations-section .logo-cloud {
        row-gap: 2rem;
    }

    .affiliations-section .affiliation-logo {
        min-height: 110px;
        padding: 0;
    }

    .affiliations-section .affiliation-logo img {
        max-width: min(100%, 180px);
        max-height: 110px;
    }
}

/* Homepage "News & Articles" story images (ported from inline <style> in the original index.html) */
.news-story img { width: 100%; margin-bottom: 1rem; border-radius: 0.375rem; }
/* Approved Panels: preserve each logo's natural aspect ratio. */
.approved-panel-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.approved-panel-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.approved-panel-logo img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 110px;
    object-fit: contain;
}

.footer-contact a {
    color: inherit;
}

.footer-contact a:hover {
    color: var(--white);
}

.gallery-media {
    cursor: pointer;
}

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.gallery-filter {
    padding: 0.65rem 1.35rem;
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.gallery-filter:hover,
.gallery-filter:focus,
.gallery-filter.active {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.gallery-grid-item[hidden] {
    display: none !important;
}

.gallery-tile {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: var(--gray-900);
    border: 0;
    border-radius: var(--radius-md);
    aspect-ratio: 4 / 3;
}

.gallery-tile .gallery-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.gallery-tile:hover .gallery-media,
.gallery-tile:focus .gallery-media {
    transform: scale(1.045);
}

.gallery-tile-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(10, 20, 35, 0.86) 100%);
}

.gallery-tile-title {
    position: absolute;
    right: 1.25rem;
    bottom: 1.1rem;
    left: 1.25rem;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 700;
}

.gallery-play,
.gallery-expand {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    color: #fff;
    font-size: 2rem;
    background: rgba(0, 171, 240, 0.92);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
}

.gallery-expand {
    top: 1rem;
    right: 1rem;
    left: auto;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    transform: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-tile:hover .gallery-expand,
.gallery-tile:focus .gallery-expand {
    opacity: 1;
}

.gallery-lightbox-shell {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #111927;
    border-radius: var(--radius-md);
}

.gallery-lightbox-close {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;
    padding: 0.8rem;
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
}

.gallery-lightbox-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    max-height: 72vh;
    background: #080d14;
}

.gallery-lightbox-element {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 72vh;
    object-fit: contain;
}

video.gallery-lightbox-element {
    width: 100%;
}

.gallery-lightbox-caption {
    padding: 1.25rem 1.5rem 1.5rem;
}

.gallery-lightbox-caption p {
    color: rgba(255, 255, 255, 0.75);
}

.team-read-more {
    align-self: center;
    width: auto;
    white-space: nowrap;
}

.team-modal-photo {
    width: 200px;
    height: 200px;
    max-width: 200px;
    object-fit: cover;
    object-position: center;
}

.team-modal-bio p:empty {
    display: none;
}

/* Database-driven team modal matching the original split-panel design. */
.team-member-modal .modal-dialog {
    width: auto;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

.team-member-modal .modal-content {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 18px;
}

.team-modal-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 548px;
}

.team-modal-image-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background: linear-gradient(180deg, #12b5ee 0%, #20a9dc 100%);
}

.team-member-modal .team-modal-photo {
    width: 200px;
    height: 133px;
    max-width: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.team-modal-copy {
    padding: 48px 56px 40px;
}

.team-modal-heading {
    display: inline-block;
    margin-bottom: 52px;
    padding-bottom: 16px;
    border-bottom: 3px solid #f0cc15;
}

.team-member-modal .modal-title {
    margin: 0 0 10px;
    color: #252b3a;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
}

.team-modal-position {
    margin: 0;
    color: #00a9ed;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
}

.team-modal-close {
    position: absolute;
    z-index: 2;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    background: #09aceb;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0, 174, 239, 0.28);
}

.team-modal-close:hover,
.team-modal-close:focus {
    color: #fff;
    background: #079bd3;
}

.team-member-modal .team-modal-bio p {
    margin: 0 0 1.25rem;
    color: #30394c;
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
}

.team-member-modal .team-modal-bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .team-member-modal .modal-dialog {
        margin: 0.75rem;
    }

    .team-modal-layout {
        display: block;
        min-height: 0;
    }

    .team-modal-image-panel {
        min-height: 220px;
        padding: 35px 20px;
    }

    .team-member-modal .team-modal-photo {
        width: 220px;
        height: 147px;
        max-width: 100%;
    }

    .team-modal-copy {
        padding: 32px 24px;
    }

    .team-modal-heading {
        margin-bottom: 28px;
        padding-right: 42px;
    }

    .team-member-modal .modal-title {
        font-size: 1.6rem;
    }

    .team-modal-close {
        top: 16px;
        right: 16px;
    }
}

.news-card {
    overflow: hidden;
}

.news-card > a {
    display: block;
    overflow: hidden;
}

.news-card .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.news-card .card-body {
    padding: 1.5rem;
}

.news-card .service-link {
    padding-top: 0.25rem;
}

.news-card .badge {
    width: fit-content;
    max-width: 100%;
}

/* Keep homepage article artwork uniform regardless of the uploaded image ratio. */
.home-news-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
}

.home-news-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* WordPress footer widgets should inherit the original footer link design. */
.footer-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-quick-links-widget > .footer-title:not(.footer-column-title) {
    display: none;
}

.footer-widget li {
    margin-bottom: 0.75rem;
}

.footer-widget li a {
    color: var(--gray-400);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-widget li a:hover,
.footer-widget li a:focus {
    color: #fff;
    padding-left: 0.25rem;
}

/* WordPress responsive hardening. */
img,
video,
iframe {
    max-width: 100%;
}

.wp-block-image img,
.entry-content img,
.team-modal-bio img {
    height: auto;
}

@media (max-width: 991.98px) {
    .navbar {
        padding: 0.65rem 0;
    }

    .brand-logo {
        height: 54px;
    }

    .navbar-collapse {
        max-height: calc(100vh - 78px);
        margin-top: 0.65rem;
        padding: 0.75rem 1rem 1rem;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    .navbar-collapse .navbar-nav {
        margin-right: 0 !important;
    }

    .navbar-collapse .nav-link,
    .navbar:not(.scrolled) .navbar-collapse .nav-link {
        color: var(--gray-800);
        margin: 0;
        padding: 0.65rem 0;
    }

    .navbar-collapse .dropdown-menu {
        margin: 0 0 0.5rem;
        padding: 0.25rem 0 0.25rem 0.75rem;
        border: 0;
        box-shadow: none;
        background: var(--gray-100);
    }

    .navbar-collapse > .btn {
        width: 100%;
        margin-top: 0.5rem;
        color: var(--white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .split-panel-bg,
    .split-side-content {
        min-height: 320px;
    }
}

@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .section-padding {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .page-header {
        min-height: 360px;
        padding: 130px 0 65px;
    }

    .page-title,
    .section-title,
    .cta-title {
        overflow-wrap: anywhere;
    }

    .page-title {
        font-size: clamp(2rem, 10vw, 2.5rem);
    }

    .page-description,
    .section-description,
    .cta-description {
        font-size: 1rem;
    }

    .hero-buttons,
    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .hero-buttons .btn,
    .cta-buttons .btn {
        width: 100%;
        margin: 0 !important;
    }

    .service-card,
    .process-card,
    .certification-card {
        padding: 1.5rem;
    }

    .service-image img,
    .gallery-media,
    .news-card .card-img-top {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .team-image,
    .team-image img {
        height: 290px;
    }

    .team-content {
        padding: 1.5rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body.p-4,
    .modal-body.p-lg-5 {
        padding: 1.25rem !important;
    }

    .team-modal-photo {
        width: 160px;
        height: 160px;
    }

    .approved-panel-logo {
        min-height: 90px;
    }

    .approved-panel-logo img {
        max-height: 80px;
    }

    .contact-card,
    .appraisal-form,
    .contact-form {
        overflow-wrap: anywhere;
    }

    .map-wrapper,
    .map-wrapper iframe {
        height: 320px;
    }

    .footer .row > [class*="col-"] {
        margin-bottom: 1.5rem;
    }

    .footer-bottom .row > [class*="col-"] {
        margin-bottom: 0;
    }

    .footer-contact a,
    .footer-links a {
        overflow-wrap: anywhere;
    }

    .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 575.98px) {
    .brand-logo {
        height: 46px;
    }

    .brand-text {
        display: none;
    }

    .navbar-toggler {
        padding: 0.3rem 0.5rem;
    }

    .breadcrumb {
        row-gap: 0.4rem;
        font-size: 0.9rem;
    }

    .card-body,
    .news-card .card-body {
        padding: 1.25rem;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
}