/* TN ENGINEERS & SURVEYORS — responsive utilities & breakpoints */

/* ================= RESPONSIVE UTILITY COMPLETION =================
   Classes used in the markup that are absent from the pre-compiled
   Tailwind build (v3.4.17) shipped in this file. Values match the
   Tailwind v3 default scale exactly. */
.fixed{position:fixed}
.z-\[100\]{z-index:100}
.top-3{top:.75rem}
.top-full{top:100%}
.right-4{right:1rem}
.overflow-y-auto{overflow-y:auto}
.object-contain{object-fit:contain}
.invisible{visibility:hidden}
.justify-end{justify-content:flex-end}
.leading-none{line-height:1}
.whitespace-nowrap{white-space:nowrap}
.h-9{height:2.25rem}
.h-24{height:6rem}
.h-auto{height:auto}
.max-h-\[85vh\]{max-height:85vh}
.max-h-\[90vh\]{max-height:90vh}
.w-9{width:2.25rem}
.w-24{width:6rem}
.w-36{width:9rem}
.w-40{width:10rem}
.w-56{width:14rem}
.max-w-xl{max-width:36rem}
.max-w-3xl{max-width:48rem}
.max-w-full{max-width:100%}
.mb-12{margin-bottom:3rem}
.mt-3{margin-top:.75rem}
.mt-6{margin-top:1.5rem}
.pb-1{padding-bottom:.25rem}
.pl-4{padding-left:1rem}
.px-12{padding-left:3rem;padding-right:3rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.gap-1\.5{gap:.375rem}
.gap-5{gap:1.25rem}
.gap-x-2{column-gap:.5rem}
.gap-y-1{row-gap:.25rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.col-span-2{grid-column:span 2/span 2}
.bg-black\/60{background-color:rgb(0 0 0 / .6)}
.bg-white\/80{background-color:rgb(255 255 255 / .8)}
.bg-yellow-50{background-color:#fefce8}
.border-4{border-width:4px}
.border-yellow-200{border-color:#fef08a}
.text-red-500{color:#ef4444}
.text-blue-200{color:#bfdbfe}
.translate-y-2{transform:translateY(.5rem)}
.hover\:bg-\[\#0e7a46\]:hover{background-color:#0e7a46}
.hover\:bg-\[\#1e7d4e\]:hover{background-color:#1e7d4e}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1)}
.hover\:text-red-500:hover{color:#ef4444}
.focus\:border-\[\#0a5c36\]:focus{border-color:#0a5c36}
.focus\:border-\[\#0c2461\]:focus{border-color:#0c2461}
.focus\:ring-\[\#0c2461\]:focus{box-shadow:0 0 0 3px rgb(12 36 97 / .35)}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:visible{visibility:visible}
.group:hover .group-hover\:rotate-180{transform:rotate(180deg)}
.group:hover .group-hover\:translate-y-0{transform:translateY(0)}
@media (min-width:640px){
.sm\:w-32{width:8rem}
.sm\:w-48{width:12rem}
.sm\:h-32{height:8rem}
.sm\:p-8{padding:2rem}
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm\:col-span-2{grid-column:span 2/span 2}
}
@media (min-width:768px){
.md\:w-36{width:9rem}
.md\:w-44{width:11rem}
.md\:w-4\/5{width:80%}
.md\:h-36{height:9rem}
.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}
.md\:gap-6{gap:1.5rem}
.md\:gap-8{gap:2rem}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.md\:text-base{font-size:1rem;line-height:1.5rem}
}
@media (min-width:1024px){
.lg\:w-52{width:13rem}
.lg\:w-3\/4{width:75%}
.lg\:flex{display:flex}
.lg\:hidden{display:none}
.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg\:col-span-3{grid-column:span 3/span 3}
}
@media (min-width:1280px){
.xl\:w-60{width:15rem}
}
@media (prefers-color-scheme:dark){.dark\:text-white{color:#fff}}
/* Ultra-small phones (<=360px): cap the tall fixed-height feature images */
@media (max-width:360px){
.h-\[450px\]{height:300px}
.h-\[500px\]{height:340px}
}