/* Page Specific Custom Styles for service-detail.html */

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    width: 100%;
    max-width: 100%;
    background-color: #ffffff;
    color: #1f2937;
    overflow-x: hidden !important;
    position: relative;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background: #0a4280;
    border-radius: 4px;
}

/* Blueprint Grid Background (Light Theme) */
.blueprint-bg {
    background-image:
        linear-gradient(rgba(10, 66, 128, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 66, 128, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Timeline Styles */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #e5e7eb, #0a4280, #e5e7eb);
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .timeline-line {
        left: 24px;
        transform: none;
    }
}

/* Theme Font & Color Tokens */
.font-sans { font-family: "Inter", sans-serif; }
.font-display { font-family: "Syncopate", sans-serif; }

.bg-tm-navy { background-color: #052a5a; }
.bg-tm-blue { background-color: #0a4280; }
.bg-tm-silver { background-color: #c4c8cc; }
.bg-tm-light { background-color: #e8eaed; }
.bg-tm-dark { background-color: #021124; }

.text-tm-navy { color: #052a5a; }
.text-tm-blue { color: #0a4280; }
.text-tm-silver { color: #c4c8cc; }
.text-tm-light { color: #e8eaed; }
.text-tm-dark { color: #021124; }
.border-tm-blue { border-color: #0a4280; }

.bg-orange-100 { background-color: #ffedd5; }
.text-orange-500 { color: #f97316; }
.text-gray-100 { color: #f3f4f6; }
.bg-tm-blue\/10 { background-color: rgba(10, 66, 128, 0.1); }
.bg-tm-dark\/60 { background-color: rgba(2, 17, 36, 0.6); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-\[\#25D366\] { background-color: #25D366; }

.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/5 { border-color: rgba(255, 255, 255, 0.05); }

.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

.z-\[60\] { z-index: 60; }
.z-\[70\] { z-index: 70; }
.z-\[80\] { z-index: 80; }
.z-\[100\] { z-index: 100; }
.z-\[110\] { z-index: 110; }
.z-\[9999\] { z-index: 9999; }
.z-\[10000\] { z-index: 10000; }

.shadow-\[0_0_15px_rgba\(10\,66\,128\,0\.5\)\] { box-shadow: 0 0 15px rgba(10, 66, 128, 0.5); }
.shadow-\[0_0_20px_rgba\(37\,211\,102\,0\.4\)\] { box-shadow: 0 0 20px rgba(37, 211, 102, 0.4); }

.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.shrink-0 { flex-shrink: 0; }
.leading-none { line-height: 1; }

.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.max-h-8 { max-height: 2rem; }
.max-h-9 { max-height: 2.25rem; }
.max-w-\[140px\] { max-width: 140px; }

.h-48 { height: 12rem; }
.h-\[400px\] { height: 400px; }
.h-\[2px\] { height: 2px; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.pl-20 { padding-left: 5rem; }
.gap-1\.5 { gap: 0.375rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.-translate-y-10 { transform: translateY(-2.5rem); }
.translate-y-\[150\%\] { transform: translateY(150%); }

.text-white\/5 { color: rgba(255, 255, 255, 0.05); }
.text-tm-silver\/50 { color: rgba(196, 200, 204, 0.5); }

/* Responsive Grids & Layouts */
@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:h-\[500px\] { height: 500px; }
    .md\:mb-32 { margin-bottom: 8rem; }
    .md\:w-5\/12 { width: 41.666667%; }
    .md\:pl-0 { padding-left: 0; }
    .md\:justify-normal { justify-content: normal; }
    .md\:left-1\/2 { left: 50%; }
    .md\:-translate-x-1\/2 { transform: translateX(-50%); }
    .md\:left-auto { left: auto; }
    .md\:-right-2 { right: -0.5rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
    .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
    .gs-timeline-item:nth-child(odd) { flex-direction: row-reverse; }
}

@media (min-width: 1024px) {
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

/* Hover & Group States */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:scale-125 { transform: scale(1.25); }
.group:hover .group-hover\:shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.group:hover .group-hover\:border-tm-blue\/30 { border-color: rgba(10, 66, 128, 0.3); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:-translate-y-full { transform: translateY(-100%); }

.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-tm-blue:hover { background-color: #0a4280; }
.hover\:bg-tm-navy:hover { background-color: #052a5a; }
.hover\:border-tm-blue\/30:hover { border-color: rgba(10, 66, 128, 0.3); }
.hover\:grayscale-0:hover { filter: grayscale(0); }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.hover\:text-tm-blue:hover { color: #0a4280; }
.hover\:text-tm-navy:hover { color: #052a5a; }
.hover\:text-white:hover { color: #ffffff; }
.hover\:translate-x-2:hover { transform: translateX(0.5rem); }

/* Mobile Drawer Utilities */
.w-\[88vw\] { width: 88vw; }
.max-w-sm { max-width: 24rem; }
.duration-400 { transition-duration: 400ms; }
.ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.gap-3\.5 { gap: 0.875rem; }
.bg-tm-navy\/5 { background-color: rgba(5, 42, 90, 0.05); }
.bg-tm-navy\/10 { background-color: rgba(5, 42, 90, 0.1); }
.border-tm-navy\/10 { border-color: rgba(5, 42, 90, 0.1); }
.border-tm-blue\/20 { border-color: rgba(10, 66, 128, 0.2); }
.bg-tm-blue\/10 { background-color: rgba(10, 66, 128, 0.1); }
.hover\:bg-tm-blue\/10:hover { background-color: rgba(10, 66, 128, 0.1); }
.hover\:border-tm-blue\/20:hover { border-color: rgba(10, 66, 128, 0.2); }
.translate-x-0 { transform: translateX(0); }
.translate-y-1 { transform: translateY(0.25rem); }
.-translate-y-1 { transform: translateY(-0.25rem); }

.w-\[85vw\] { width: 85vw; }
.max-w-xs { max-width: 20rem; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.hover\:pl-8:hover { padding-left: 2rem; }

/* Custom Responsive Breakpoint for 820px Navigation Switching */

/* Hide desktop nav links & show mobile button at 820px or smaller */
@media (max-width: 820px) {
    .nav-desktop-menu {
        display: none !important;
    }
    .nav-mobile-btn {
        display: flex !important;
    }
}

/* Show desktop nav links & hide mobile button above 820px */
@media (min-width: 821px) {
    .nav-desktop-menu {
        display: flex !important;
    }
    .nav-mobile-btn {
        display: none !important;
    }
}