html {
     scroll-behavior: smooth;
 }

 /* footer */
 .diagonal-bg {
     position: absolute;
     left: -10%;
     bottom: 0;
     width: 120%;
     height: 120%;
     background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #ffffff 60%, #ffffff 65%, transparent 65%);
     clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
     z-index: 0;
 }

 /* Custom Colors */
 .bg-navy {
     background-color: #1b2236;
 }

 .bg-navy-dark {
     background-color: #111727;
 }

 .text-navy-light {
     color: #8c98ad;
 }

 .border-navy-light {
     border-color: #2a344d;
 }

 /* Social Hover Effects */
 .social-btn {
     transition: all 0.3s ease;
 }

 .social-btn:hover {
     background-color: #ef4444;
     /* Tailwind red-500 */
     transform: translateY(-3px);
     box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
 }

 /* Why choose us */
 /* Subtle Background Floating Animations */
 @keyframes blob {
     0% {
         transform: translate(0px, 0px) scale(1);
     }

     33% {
         transform: translate(30px, -50px) scale(1.1);
     }

     66% {
         transform: translate(-20px, 20px) scale(0.9);
     }

     100% {
         transform: translate(0px, 0px) scale(1);
     }
 }

 .animate-blob {
     animation: blob 15s infinite alternate ease-in-out;
 }

 .animation-delay-2000 {
     animation-delay: 2s;
 }

 .animation-delay-4000 {
     animation-delay: 4s;
 }

 /* About us */
 /* --- Custom Shapes & Animations --- */

 @media (min-width: 1024px) {
     .slanted-bg {
         clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
     }
 }

 @keyframes float-diamond {

     0%,
     100% {
         transform: translate(-50%, -50%) rotate(45deg);
     }

     50% {
         transform: translate(-50%, calc(-50% - 15px)) rotate(45deg);
     }
 }

 .floating-diamond {
     animation: float-diamond 6s ease-in-out infinite;
 }

 .diamond-img {
     transform: rotate(-45deg) scale(1.45);
 }

 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
 }

 .reveal.active {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-delay-1 {
     transition-delay: 100ms;
 }

 .reveal-delay-2 {
     transition-delay: 200ms;
 }

 .reveal-delay-3 {
     transition-delay: 300ms;
 }

 /* Smooth expand animation for the extra text */
 .expandable-content {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.5s ease-in-out;
 }

 .expandable-content.expanded {
     grid-template-rows: 1fr;
 }

 .expandable-inner {
     overflow: hidden;
 }

 /* Services */
 /* Custom textured background */
 .bg-pattern {
     background-color: #fcfcfc;
     background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
 }

 /* Smooth floating animation */
 @keyframes float {
     0% {
         transform: translateY(-10px);
     }

     50% {
         transform: translateY(10px);
     }

     100% {
         transform: translateY(-10px);
     }
 }

 .floating-car {
     animation: float 4s ease-in-out infinite;
 }

 /* Hover utility for cards */
 .service-card {
     transition: all 0.3s ease;
 }

 .service-card:hover {
     transform: scale(1.03);
 }

 .service-card:hover .icon-container {
     box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
 }

 .bg-patter-img {
     background-image: url('../images/texture-layout.jpg');
     background-position: center;
     background-size: cover;
     width: 100%;
     height: 100%;
 }

 /* gallery */
 /* Subtle Light Textured Background */
 .bg-textured {
     background-color: #F8F9FA;
     background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.02' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3Ccircle cx='13' cy='13' r='1'/%3E%3C/g%3E%3C/svg%3E");
 }

 /* Custom Transitions for Overlay and Image Zoom */
 .gallery-card {
     overflow: hidden;
     border-radius: 0.75rem;
 }

 .gallery-img {
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .gallery-card:hover .gallery-img {
     transform: scale(1.05);
 }

 .gallery-overlay {
     opacity: 0;
     transition: all 0.3s ease-in-out;
 }

 .gallery-card:hover .gallery-overlay {
     opacity: 1;
 }

 .icon-container-gallery {
     transform: translateY(20px);
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     transition-delay: 0.1s;
 }

 .gallery-card:hover .icon-container {
     transform: translateY(0);
     opacity: 1;
 }

 /* Modal Animations */
 #lightbox {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 }

 #lightbox.active {
     visibility: visible;
     opacity: 1;
     z-index: 1000;
 }

 #lightbox-img {
     transform: scale(0.95);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 #lightbox.active #lightbox-img {
     transform: scale(1);
 }

 /* FAQ */
 /* Subtle textured background */
 .bg-texture {
     background-color: #f8fafc;
     background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cbd5e1' fill-opacity='0.15' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E");
 }

 /* Smooth accordion transitions */
 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
     opacity: 0;
 }

 .faq-item.active .faq-answer {
     opacity: 1;
 }

 /* Smooth arrow rotation */
 .arrow-icon {
     transition: transform 0.3s ease-in-out;
 }

 /*Mobile menu*/
 /* Base Hamburger Lines (Default: White) */
 .hamburger-line {
     display: block;
     width: 100%;
     height: 2px;
     background-color: white;
     border-radius: 9999px;
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
     transform-origin: center;
 }

 /* When header is scrolled (turns white) -> Hamburger turns dark */
 header.is-scrolled .hamburger-line {
     background-color: #050a14;
 }

 /* FORCE the 'X' to be white when the menu is OPEN (overrides the dark color above) */
 .hamburger-btn.is-active .hamburger-line {
     background-color: white !important;
 }

 /* X Transformation States */
 .hamburger-btn.is-active .line-1 {
     transform: translateY(7px) rotate(45deg);
 }

 .hamburger-btn.is-active .line-2 {
     opacity: 0;
 }

 .hamburger-btn.is-active .line-3 {
     transform: translateY(-7px) rotate(-45deg);
 }

 /* Prevent background scrolling when menu is open */
 body.menu-open {
     overflow: hidden;
 }


 #read-more-icon {
     display: inline-block;
     /* Required for transforms to work on <i> tags */
     transition: transform 0.5s ease;
 }

 .rotate-180 {
     transform: rotate(180deg);
 }

 /* When header is scrolled, make hamburger lines dark */
 #main-header.bg-white\/95 .hamburger-line {
     background-color: #0f172a;
     /* slate-900 */
 }

 /* When menu is open, force lines to be white again (for the dark drawer) */
 #mobile-menu-btn.is-active .hamburger-line {
     background-color: #ffffff !important;
 }

 .hamburger-line {
     display: block;
     height: 2px;
     width: 100%;
     background-color: #ffffff;
     /* Default */
     transition: all 0.3s ease;
 }

 /* Force the drawer to stay above the blur */
 #mobile-drawer {
     z-index: 1000;
 }

 /* Ensure the hamburger button is the top-most element */
 #mobile-menu-btn {
     z-index: 1001;
 }

 /* Optional: Prevent the logo from being blurred if it's outside the drawer */
 #logo-link {
     z-index: 1001;
 }

 /* 1. Use hardware acceleration for the drawer */
 #mobile-drawer {
     backface-visibility: hidden;
     perspective: 1000px;
     will-change: transform;
     /* Speed up the transition from 300ms to 200ms for snappiness */
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* 2. Optimize the overlay blur */
 #drawer-overlay {
     will-change: opacity;
     transition: opacity 0.2s ease-out;
     /* Prevent the blur from re-calculating 60 times a second during the move */
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
 }

 /* 3. Smooth out the header color swap */
 #main-header {
     transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
 }

 .carbon-bg {
     background-image: url('../images/carbon-bg.jpg');
     background-size: contain;
     background-position: center;
     height: 100%;
     background-repeat: repeat;
 }

 .carbon-bg-3 {
     background-size: 50%;
 }

 .slanted-bg::before,
 .gallery-bg::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #000000bf;
     /* Your choice of color */
     z-index: -1;
     /* Keeps it behind the main content */
 }

 .carbon-bg-4::before, .carbon-bg-5::before {
     background-color: #00000000;
     /* Your choice of color */
 }

 .carbon-bg-4 {
     background-size: 150%;
 }