/* Enhanced Brochure Integration Styles */

 /* Service Highlights in Hero Section */
 .service-highlights {
     margin-top: 20px;
     padding: 15px 20px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

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

 .service-list li {
     display: flex;
     align-items: center;
     margin-bottom: 8px;
     color: #ffffff;
     font-size: 14px;
     font-weight: 500;
 }

 .service-list li:last-child {
     margin-bottom: 0;
 }

 .service-list li i {
     margin-right: 10px;
     color: #87CEEB;
     font-size: 10px;
     width: 14px;
     flex-shrink: 0;
 }

 /* Product Features Highlight */
 .product-features-highlight {
     margin-top: 40px;
     padding: 40px 0;
 }

 .feature-item {
     padding: 25px 15px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
     border-radius: 15px;
     border: 1px solid rgba(135, 206, 235, 0.3);
     transition: all 0.3s ease;
     height: 100%;
 }

 .feature-item:hover {
     transform: translateY(-5px);
     background: linear-gradient(135deg, rgba(135, 206, 235, 0.1), rgba(135, 206, 235, 0.05));
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 .feature-item i {
     font-size: 32px;
     color: #87CEEB;
     margin-bottom: 15px;
 }

 .feature-item h4 {
     font-size: 18px;
     font-weight: 600;
     color: #192324;
     margin-bottom: 10px;
 }

 .feature-item p {
     font-size: 14px;
     color: #666;
     margin-bottom: 0;
 }

 /* Enhanced Warehousing Details */
 .warehousing-details {
     margin-top: 25px;
     padding: 20px;
     background: linear-gradient(135deg, rgba(135, 206, 235, 0.1), rgba(135, 206, 235, 0.05));
     border-radius: 10px;
     border-left: 4px solid #87CEEB;
 }

 .warehousing-details h4 {
     font-size: 18px;
     font-weight: 600;
     color: #192324;
     margin-bottom: 12px;
 }

 .warehousing-details p {
     font-size: 15px;
     color: #666;
     margin-bottom: 0;
     line-height: 1.6;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .service-highlights {
         margin-top: 15px;
         padding: 12px 15px;
     }

     .service-list li {
         font-size: 13px;
         margin-bottom: 6px;
     }

     .service-list li i {
         font-size: 9px;
         width: 12px;
         margin-right: 8px;
     }

     .product-features-highlight {
         margin-top: 30px;
         padding: 30px 0;
     }

     .feature-item {
         margin-bottom: 20px;
         padding: 20px 15px;
     }

     .feature-item i {
         font-size: 28px;
     }

     .warehousing-details {
         padding: 15px;
     }
 }

 /* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Why Choose Us css
07. Our Services css
08. Intro Video css
09. Latest Project css
10. How We Work css
11. Our Skills css
12. Our Testimonials css
13. Our Blog css
14. Footer css
15. About Us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Image Gallery css
23. FAQs Page css
24. Contact Us Page css
25. 404 Error Page css 
26. Responsive css
-------------------------------------------------------------------------------------- */

 /************************************/
 /*** 	 01. Global Variables	  ***/
 /************************************/

 :root {
     --primary-color: #192324;
     --secondery-color: #F8F8F8;
     --text-color: #2E2E2E;
     /* Premium Graphite Gray */
     --accent-color: #4284d6;
     --white-color: #F9F6F0;
     /* Deeper Premium Ivory */
     --divider-color: #EAF0EC;
     --dark-divider-color: #FFFFFF1A;
     --error-color: rgb(230, 87, 87);
     --default-font: "Outfit", sans-serif;
     --heading-font: "Playfair Display", serif;
     --pure-white: #FFFFFF;

     /* RGB values for transparency effects */
     --primary-color-rgb: 25, 35, 36;
     --accent-color-rgb: 66, 132, 214;
 }


 /************************************/
 /*** 	   02. General css		  ***/
 /************************************/

 body {
     font-family: var(--default-font);
     font-size: 17px;
     font-weight: 400;
     line-height: 1.6em;
     background-color: var(--white-color);
     color: var(--text-color);
 }

 p {
     line-height: 1.7em;
     margin-bottom: 1.6em;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--heading-font);
     margin: 0;
     font-weight: 700;
     line-height: 1.2em;
     color: var(--primary-color);
     letter-spacing: -0.02em;
 }

 figure {
     margin: 0;
 }

 img {
     max-width: 100%;
 }

 a {
     text-decoration: none;
 }

 a:hover {
     text-decoration: none;
     outline: 0;
 }

 a:focus {
     text-decoration: none;
     outline: 0;
 }

 html,
 body {
     width: 100%;
     overflow-x: clip;
     scroll-behavior: smooth;
     scroll-padding-top: 100px;
     /* Compensate for sticky header height */
 }

 /* Additional scroll offset for better section visibility */
 section[id] {
     scroll-margin-top: 120px;
     /* Extra margin for sections with IDs */
 }

 /* Ensure smooth scrolling for anchor links */
 a[href^="#"] {
     scroll-behavior: smooth;
 }

 .container {
     max-width: 1300px;
 }

 .container,
 .container-fluid,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl,
 .container-xxl {
     padding-right: 15px;
     padding-left: 15px;
 }

 .image-anime {
     position: relative;
     overflow: hidden;
 }

 .image-anime:after {
     content: "";
     position: absolute;
     width: 200%;
     height: 0%;
     left: 50%;
     top: 50%;
     background-color: rgba(255, 255, 255, .3);
     transform: translate(-50%, -50%) rotate(-45deg);
     z-index: 1;
 }

 .image-anime:hover:after {
     height: 250%;
     transition: all 600ms linear;
     background-color: transparent;
 }

 .reveal {
     position: relative;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     visibility: hidden;
     overflow: hidden;
 }

 .reveal img {
     height: 100%;
     width: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     -webkit-transform-origin: left;
     transform-origin: left;
 }

 .row {
     margin-right: -15px;
     margin-left: -15px;
 }

 .row>* {
     padding-right: 15px;
     padding-left: 15px;
 }

 .row.no-gutters {
     margin-right: 0px;
     margin-left: 0px;
 }

 .row.no-gutters>* {
     padding-right: 0px;
     padding-left: 0px;
 }

 .btn-default {
     position: relative;
     display: inline-block;
     background: var(--accent-color);
     color: var(--white-color);
     font-size: 16px;
     font-weight: 700;
     line-height: 1em;
     text-transform: capitalize;
     border: none;
     padding: 17px 46px 17px 20px;
     border-radius: 10px;
     transition: all 0.5s ease-in-out;
     overflow: hidden;
     z-index: 0;
 }

 .btn-default:hover {
     background: transparent;
     color: var(--white-color);
 }

 .btn-default::before {
     content: '';
     position: absolute;
     top: 50%;
     right: 0;
     width: 16px;
     height: 16px;
     background-image: url(../images/arrow-white.svg);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     transform: translate(-20px, -50%);
     transition: all 0.4s ease-in-out;
 }

 .btn-default:hover::before {
     transform: translate(-18px, -50%);
 }

 .btn-default::after {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     bottom: 0;
     left: -15%;
     right: 0;
     width: 0;
     height: 106%;
     background: var(--primary-color);
     transform: skew(45deg);
     transition: all 0.4s ease-in-out;
     z-index: -1;
 }

 .btn-default:hover:after {
     width: 100%;
     transform: skew(0deg);
     left: 0;
 }

 .btn-default.btn-highlighted {
     background-color: var(--white-color);
     color: var(--accent-color);
 }

 .btn-default.btn-highlighted:hover {
     color: var(--white-color);
 }

 .btn-default.btn-highlighted::before {
     background-image: url(../images/arrow-accent.svg);
 }

 .btn-default.btn-highlighted:hover::before {
     filter: brightness(0) invert(1);
 }

 .btn-default.btn-highlighted::after {
     background-color: var(--accent-color);
 }


 /* High-performance CSS Custom Cursor (Static Icon) */
 html,
 body {
     cursor: url('/images/cursor-arrow.svg') 0 0, auto !important;
 }

 /* Ensure links and buttons show standard pointer */
 a,
 button,
 [role="button"],
 input[type="submit"],
 .btn-default {
     cursor: pointer !important;
 }


 /* Additional responsive height rules for hero slider */
 @media (max-height: 600px) {
     .hero.hero-slider-layout .hero-slide {
         height: 100vh;
         height: 100dvh;
         min-height: 640px;
     }

     .hero.hero-slider-layout .row.align-items-center {
         min-height: 100vh;
         min-height: 100dvh;
         height: 100vh;
         height: 100dvh;
         padding-bottom: 60px;
     }
 }

 /* Dark Header Button Styles */
 header.main-header .header-sticky.active .btn-default {
     color: var(--white-color);
     border-color: rgba(255, 255, 255, 0.3);
 }

 header.main-header .header-sticky.active .btn-default:hover {
     border-color: var(--accent-color);
     color: var(--white-color);
     background: var(--accent-color);
 }

 @media (max-height: 500px) {
     .hero.hero-slider-layout .hero-slide {
         height: 100vh;
         height: 100dvh;
         min-height: 540px;
     }
 }

 @media (max-height: 400px) and (orientation: landscape) {
     .hero.hero-slider-layout .hero-slide {
         height: 100vh;
         height: 100dvh;
         min-height: 440px;
     }

     .hero-content .section-title h1 {
         font-size: 1.75rem !important;
     }

     .hero-content .section-title p {
         font-size: 14px !important;
     }
 }



 .loading-container,
 .loading {
     height: 100px;
     position: relative;
     width: 100px;
     border-radius: 100%;
 }

 .loading-container {
     margin: 40px auto;
 }

 .loading {
     border: 1px solid transparent;
     border-color: transparent var(--white-color) transparent var(--white-color);
     animation: rotate-loading 1.5s linear 0s infinite normal;
     transform-origin: 50% 50%;
 }

 .loading-container:hover .loading,
 .loading-container .loading {
     transition: all 0.5s ease-in-out;
 }

 #loading-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     max-width: 66px;
     transform: translate(-50%, -50%);
 }

 @keyframes rotate-loading {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .section-row {
     margin-bottom: 120px;
     /* Increased from 80px for premium whitespace */
 }

 .section-row .section-title {
     margin-bottom: 0;
     margin-right: 30px;
 }

 .section-btn {
     text-align: end;
 }

 .section-title-content {
     margin-left: 120px;
 }

 .section-title-content p {
     margin: 0;
 }

 .section-title {
     margin-bottom: 40px;
 }

 .section-title h3 {
     display: inline-block;
     position: relative;
     font-family: var(--default-font);
     /* Contrast with Serif headings */
     font-size: 14px;
     font-weight: 600;
     line-height: 1.6em;
     text-transform: uppercase;
     letter-spacing: 2px;
     /* Premium spacing */
     color: var(--accent-color);
     padding-left: 35px;
     margin-bottom: 20px;
 }

 .section-title h3::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
     background: url('../images/icon-sub-heading.svg');
     background-repeat: no-repeat;
     background-position: left center;
     background-size: cover;
     width: 24px;
     height: 5px;
 }

 .section-title h1 {
     font-size: 64px;
     font-weight: 700;
     letter-spacing: -0.02em;
     margin-bottom: 0;
 }

 .section-title h2 {
     font-size: 38px;
     font-weight: 700;
     letter-spacing: -0.02em;
     margin-bottom: 0;
 }

 .section-title h1 span,
 .section-title h2 span {
     color: var(--accent-color);
 }

 .section-title p {
     margin-top: 30px;
     margin-bottom: 0;
 }

 .main-header .main-menu .nav-link,
 .main-header .submenu-card .card-content h4,
 .main-header .submenu-card .card-content p {
     font-family: "Manrope", sans-serif;
 }

 .main-header .main-menu .nav-link {
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 0.04em;
 }

 .main-header .submenu-card .card-content h4 {
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 0.01em;
 }

 .main-header .submenu-card .card-content p {
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.01em;
 }


 .section-title-content.dark-section p,
 .section-title.dark-section p,
 .section-title.dark-section h2,
 .section-title.dark-section h3 {
     color: var(--white-color);
 }

 .help-block.with-errors ul {
     margin: 0;
     text-align: left;
 }

 .help-block.with-errors ul li {
     color: var(--error-color);
     font-weight: 500;
     font-size: 14px;
 }

 /************************************/
 /**** 	   03. Header css		 ****/
 /************************************/

 header.main-header {
     position: relative;
     z-index: 100;
 }

 /* Ensure absolute position for transparent type so it doesn't push sections below it */
 header.main-header.transparent-header {
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 0 !important;
     overflow: visible !important;
 }

 header.main-header .container-fluid {
     padding-left: 0;
     padding-right: 0;
 }

 header.main-header .header-sticky {
     /* Invisible Split - Base State */
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;

     /* Zero UI -> Subtle Glass */
     background: rgba(0, 0, 0, 0.15);
     /* Slight opaque */
     backdrop-filter: blur(5px);
     /* Subtle blur */
     -webkit-backdrop-filter: blur(5px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     /* Very faint border */
     box-shadow: none;
     border-radius: 0;

     padding: 6px 15px;
     padding-left: 5px;
     /* Push elements to corners */
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     z-index: 1000;
 }

 header.main-header .header-sticky::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 450px;
     /* Ample area for logo */
     height: 100%;
     background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
     pointer-events: none;
     z-index: 1;
     /* Below logo text (z-index 2) */
 }

 /* Logo Shield — Transparent, animation-only container */
 header.main-header .navbar-brand {
     position: relative;
     z-index: 2;
     background: transparent;
     padding: 6px 0;
     margin-left: -5px;
     border-radius: 8px;
     border: none;
     transition: background 0.4s ease, box-shadow 0.4s ease;
 }

 /* 2. Animated Border Light Trace */
 header.main-header .navbar-brand::after {}

 @property --border-angle {
     syntax: '<angle>';
     initial-value: 0deg;
     inherits: false;
 }

 @keyframes border-trace {
     to {
         --border-angle: 360deg;
     }
 }

 header.main-header .navbar-brand:hover {

     box-shadow: none;
 }



 header.main-header .navbar-brand:hover::after {
     /*animation-duration: 1.5s;*/
     /* Speed up trace on hover */
 }

 /* When scrolled, keep transparent */
 header.main-header .header-sticky.active.is-scrolled .navbar-brand {
     background: transparent;
     border-color: transparent;
 }

 header.main-header .header-sticky.active.is-scrolled .navbar-brand:hover {
     background: rgba(0, 0, 0, 0.03);
     box-shadow: none;
 }

 header.main-header .header-sticky.hide {
     transform: translateY(-100%);
     transition: transform 0.3s ease-in-out;
     border-radius: 0;
 }

 header.main-header .header-sticky.active {
     /* Inherit base styles */
     top: 0;
     border-radius: 0;
 }

 /* Consistent Scrolled State: Same Glass as Base */
 header.main-header .header-sticky.active.is-scrolled {
     background: rgba(0, 0, 0, 0.15) !important;
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     padding: 6px 15px;
     padding-left: 5px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .navbar {
     padding: 1px 0;
     align-items: center;
     border-bottom: none;
 }

 header.main-header .header-sticky.active .navbar {
     border-bottom: none;
     padding: 1px 0;
     /* Minimized Navbar Padding */
     transition: all 0.3s ease-in-out;
 }

 header.main-header .header-sticky.active .main-menu ul li a {
     color: #fff !important;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.5px;
     padding: 10px 14px !important;
     /* Aggressively reduced vertical padding */
     position: relative;
     transition: all 0.3s ease;
 }

 /* Hover Underline Effect Removed */
 header.main-header .header-sticky.active .main-menu ul li a::after {
     content: none;
     display: none;
 }

 header.main-header .header-sticky.active .main-menu ul li a:hover::after,
 header.main-header .header-sticky.active .main-menu ul li a.active::after,
 header.main-header .header-sticky.active .main-menu ul li.current-menu-item>a::after,
 header.main-header .header-sticky.active .main-menu ul li.current_page_item>a::after {
     width: 0;
 }

 header.main-header .header-sticky.active .main-menu ul li a:hover,
 header.main-header .header-sticky.active .main-menu ul li a:focus {
     /* Simple Accent Hover for White Header */
     color: var(--accent-color) !important;
     background: none;
     -webkit-text-fill-color: initial;
     opacity: 1;
 }

 header.main-header .header-sticky.active .main-menu ul li a.active,
 header.main-header .header-sticky.active .main-menu ul li.current-menu-item>a,
 header.main-header .header-sticky.active .main-menu ul li.current_page_item>a {
     color: var(--accent-color) !important;
     background: none;
     -webkit-text-fill-color: initial;
 }

 /* Force Dark Text on Sticky Header even if Transparent Header class is present */
 header.main-header.transparent-header .header-sticky.active .main-menu ul li a,
 header.main-header .header-sticky.active .main-menu ul li a {
     color: #fff !important;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }

 /* Override transparent header styles for active menu items when sticky */
 header.main-header.transparent-header .header-sticky.active .main-menu ul li a.active,
 header.main-header.transparent-header .header-sticky.active .main-menu ul li.current-menu-item>a,
 header.main-header.transparent-header .header-sticky.active .main-menu ul li.current_page_item>a {
     color: var(--accent-color) !important;
     text-shadow: none !important;
     font-weight: 600 !important;
 }

 header.main-header .header-sticky.active .navbar-brand img {
     max-height: 50px;
     width: auto;
     transition: all 0.3s ease-in-out;
     /* Logo Reset: Removed white filter per request */
     filter: none;
     mix-blend-mode: normal;
 }

 header.main-header .header-sticky.active .navbar-brand {
     padding: 6px 0;
     margin-left: -5px;
 }

 /* Transparent Header Styles */
 header.main-header.transparent-header .header-sticky {
     /* Ensure Invisible Split persists with subtle bg */
     background: rgba(0, 0, 0, 0.15);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 0;
     box-shadow: none;
     top: 0;
     width: 100%;
     margin: 0;
 }

 header.main-header.transparent-header .navbar {
     border-bottom: none;
 }

 header.main-header.transparent-header .main-menu ul li a {
     color: #fff !important;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     font-weight: 600;
     transition: all 0.3s ease;
 }

 header.main-header.transparent-header .main-menu ul li a:hover,
 header.main-header.transparent-header .main-menu ul li a:focus {
     color: rgba(255, 255, 255, 0.95) !important;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
     transform: translateY(-1px);
 }

 /* Kill text-shadow inside submenu dropdown */
 .submenu-mega-wrapper,
 .submenu-mega-wrapper * {
     text-shadow: none !important;
 }

 /* Logo Background Effect: True Floating Seamless */
 header.main-header.transparent-header .navbar-brand {

     /* Slightly higher alpha for legibility */
     /* padding: 8px 16px;*/

     /* Removed box-shadow to avoid "card" look */



     /* Stronger blur */

     border: none;
     /* No Border - Seamless */
     /* Subtle inner vignette to contain the blur */
     /* box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);*/
 }

 header.main-header.transparent-header .navbar-brand img {
     max-height: 50px;
     /* Tighter, sharper white outline for crisp text contrast */

 }

 header.main-header.transparent-header .navbar-brand:hover {}

 /* When sticky, revert to standard seamless look */
 header.main-header.transparent-header .header-sticky.active .navbar-brand {
     background: transparent;
     padding: 6px 0;
     margin-left: -5px;
     box-shadow: none;
     border-radius: 0;
     backdrop-filter: none;
     border: none;
 }

 header.main-header.transparent-header .header-sticky.active .navbar-brand img {
     filter: none;
     /* Remove glow on white header */
 }

 header.main-header.transparent-header .navbar-brand img {
     max-height: 50px;
     /* Ensure consistent size inside pill */
     /* No filters - keeping original colors */
     transition: all 0.3s ease;
 }

 header.main-header.transparent-header .navbar-brand:hover {}

 /* When sticky, remove the pill effect since contrast is handled by the bar */
 header.main-header.transparent-header .header-sticky.active .navbar-brand {
     background: transparent;
     padding: 6px 0;
     margin-left: -5px;
     /* Reset to match sticky padding */
     box-shadow: none;
     border-radius: 0;
 }

 /* When transparent header becomes sticky, keep transparent style */
 header.main-header.transparent-header .header-sticky.active {
     background: rgba(0, 0, 0, 0.15);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
 }

 header.main-header.transparent-header .header-sticky.active .main-menu ul li a {
     color: #fff !important;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     font-weight: 600 !important;
     transform: none !important;
     font-size: 14px !important;
 }

 header.main-header.transparent-header .header-sticky.active .main-menu ul li a:hover,
 header.main-header.transparent-header .header-sticky.active .main-menu ul li a:focus {
     color: var(--accent-color) !important;
     text-shadow: none !important;
     transform: translateY(-1px) !important;
 }

 header.main-header.transparent-header .header-sticky.active .navbar-brand img {
     /*filter: brightness(0) invert(1) drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5)) !important;*/
     transition: all 0.3s ease-in-out;
 }

 .navbar-brand {
     padding: 5px 15px;
     margin: 0;
 }

 .navbar-brand img {
     max-height: 50px;
     width: auto;
 }

 .main-menu .nav-menu-wrapper {
     flex: 1;
     text-align: center;
     margin-left: 40px;
 }

 .main-menu .nav-menu-wrapper>ul {
     align-items: center;
     display: inline-flex;
 }

 .main-menu ul li {
     margin: 0 6px;
     position: relative;
 }

 .main-menu ul li a {
     font-family: var(--accent-font);
     font-size: 14px;
     font-weight: 500;
     padding: 10px 14px !important;
     color: #1a1a1a;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease-in-out;
     position: relative;
     text-decoration: none;
 }

 .main-menu ul li.submenu>a:after {
     content: '\f107';
     font-family: 'FontAwesome';
     font-weight: 900;
     font-size: 14px;
     margin-left: 8px;
 }

 .main-menu ul li a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0;
     height: 2px;
     background: var(--accent-color);
     transition: all 0.3s ease-in-out;
     transform: translateX(-50%);
 }

 .main-menu ul li a:hover,
 .main-menu ul li a:focus {
     color: var(--accent-color);
     font-weight: 600;
 }

 .main-menu ul li a:hover::after,
 .main-menu ul li a:focus::after {
     width: 80%;
 }

 /* Active state styling */
 .main-menu ul li a.active,
 .main-menu ul li.current-menu-item>a,
 .main-menu ul li.current_page_item>a {
     color: var(--accent-color);
     font-weight: 600;
 }

 .main-menu ul li a.active::after,
 .main-menu ul li.current-menu-item>a::after,
 .main-menu ul li.current_page_item>a::after {
     width: 80%;
 }

 /* ============================================
    Premium Frosted-Glass Mega Menu
    ============================================ */

 /* Shimmer keyframe for card hover */
 @keyframes submenu-shimmer {
     0% {
         left: -100%;
     }

     100% {
         left: 100%;
     }
 }

 /* Gradient border glow animation */
 @keyframes border-glow {

     0%,
     100% {
         opacity: 0.5;
     }

     50% {
         opacity: 1;
     }
 }

 .submenu-mega-wrapper {
     visibility: hidden;
     opacity: 0;
     transform: translateY(15px) scale(0.97);
     transform-origin: top center;
     position: absolute;
     left: -20px;
     top: 100%;
     width: 600px;
     margin-top: 15px;

     /* Frosted White Glass */
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: blur(24px) saturate(180%);
     -webkit-backdrop-filter: blur(24px) saturate(180%);

     /* Refined border & shadow */
     border: 1px solid rgba(66, 132, 214, 0.15);
     box-shadow:
         0 20px 60px rgba(25, 35, 36, 0.12),
         0 8px 24px rgba(66, 132, 214, 0.08),
         inset 0 1px 0 rgba(255, 255, 255, 0.8);
     border-radius: 20px;
     padding: 22px;
     transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
     z-index: 100;
 }

 /* Animated gradient accent line at top */
 .submenu-mega-wrapper::after {
     content: '';
     position: absolute;
     top: 0;
     left: 20px;
     right: 20px;
     height: 3px;
     background: linear-gradient(90deg, #4284d6, #87CEEB, #4284d6);
     background-size: 200% 100%;
     border-radius: 0 0 3px 3px;
     animation: border-glow 3s ease-in-out infinite;
 }

 /* Pseudo-bridge to prevent closing */
 .submenu-mega-wrapper::before {
     content: '';
     position: absolute;
     top: -20px;
     left: 0;
     width: 100%;
     height: 20px;
 }

 /* Show State */
 .main-menu ul li:hover .submenu-mega-wrapper {
     visibility: visible;
     opacity: 1;
     transform: translateY(0) scale(1);
 }

 /* Grid Layout */
 .submenu-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
 }

 /* Submenu Card Style */
 .submenu-card {
     display: flex;
     align-items: center;
     padding: 14px 16px;
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid rgba(66, 132, 214, 0.08);
     border-radius: 14px;
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 /* Shimmer sweep on hover */
 .submenu-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 60%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
     transition: none;
     pointer-events: none;
 }

 .submenu-card:hover::after {
     animation: submenu-shimmer 0.6s ease-out forwards;
 }

 /* Hover Effect: Lift & Glow */
 .submenu-card:hover {
     background: rgba(255, 255, 255, 0.95);
     transform: translateY(-3px);
     border-color: rgba(66, 132, 214, 0.25);
     box-shadow:
         0 8px 24px rgba(66, 132, 214, 0.12),
         0 2px 8px rgba(25, 35, 36, 0.06);
 }

 /* Icon Style — Gradient Fill */
 .card-icon {
     width: 44px;
     height: 44px;
     min-width: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, rgba(66, 132, 214, 0.1), rgba(135, 206, 235, 0.15));
     border-radius: 12px;
     margin-right: 14px;
     color: #4284d6;
     font-size: 18px;
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .submenu-card:hover .card-icon {
     background: linear-gradient(135deg, #4284d6, #2a5a9e);
     color: #fff;
     transform: scale(1.08);
     box-shadow: 0 4px 12px rgba(66, 132, 214, 0.35);
 }

 /* Content Styles */
 .card-content h4 {
     color: #1a2332;
     font-size: 14px;
     font-weight: 600;
     margin: 0 0 3px 0;
     text-transform: capitalize;
     letter-spacing: 0.3px;
     transition: color 0.3s ease;
 }

 .card-content p {
     color: #6b7a8d;
     font-size: 12px;
     margin: 0;
     line-height: 1.4;
     font-weight: 400;
     transition: color 0.3s ease;
 }

 .submenu-card:hover .card-content h4 {
     color: #4284d6;
 }

 .submenu-card:hover .card-content p {
     color: #4a5a6a;
 }

 /* View All Special Card — CTA Style */
 .submenu-card.view-all-card {
     /* Regular single tile for 2x2 grid */
     background: linear-gradient(135deg, rgba(66, 132, 214, 0.06), rgba(135, 206, 235, 0.08));
     border: 1px solid rgba(66, 132, 214, 0.15);
     justify-content: center;
     margin-top: 4px;
 }

 .submenu-card.view-all-card .card-content {
     text-align: left;
 }

 .submenu-card.view-all-card:hover {
     background: linear-gradient(135deg, #4284d6, #2a5a9e);
     border-color: transparent;
     box-shadow: 0 8px 24px rgba(66, 132, 214, 0.3);
 }

 .submenu-card.view-all-card:hover h4,
 .submenu-card.view-all-card:hover p {
     color: #fff;
 }

 .submenu-card.view-all-card .card-icon {
     background: transparent;
     color: #4284d6;
 }

 .submenu-card.view-all-card:hover .card-icon {
     color: #fff;
     background: rgba(255, 255, 255, 0.15);
     transform: translateX(4px);
 }

 .main-menu ul li:hover>ul {
     visibility: visible;
     opacity: 1;
     transform: translateY(10px);
     transform-origin: top center;
     padding: 10px 0;
     margin: 0;
     list-style: none;
     width: 260px;
     border-radius: 12px;
     position: absolute;
     left: -20px;
     top: 100%;
     /* Glassmorphism Background */
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.4);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     text-align: left;
     margin-top: 15px;
     /* Spacing from parent */
 }

 /* Add a pseudo-element to bridge the gap so menu doesn't close */
 .main-menu ul ul::before {
     content: '';
     position: absolute;
     top: -20px;
     left: 0;
     width: 100%;
     height: 20px;
     background: transparent;
 }

 .main-menu ul li.submenu:first-child ul {
     width: 260px;
 }

 .main-menu ul ul ul {
     left: 100%;
     top: 0;
     text-align: left;
 }

 .main-menu ul li:hover>ul {
     visibility: visible;
     opacity: 1;
     transform: translateY(0);
 }

 .main-menu ul li.submenu ul li.submenu>a:after {
     content: '\f105';
     float: right;
 }

 .main-menu ul ul li {
     margin: 0;
     padding: 0;
     display: block;
 }

 .main-menu ul ul li a {
     color: #192324;
     padding: 12px 20px !important;
     font-size: 14px;
     font-weight: 500;
     text-transform: capitalize;
     /* Changed from uppercase for cleaner look */
     letter-spacing: 0.3px;
     transition: all 0.2s ease-in-out;
     position: relative;
     text-decoration: none;
     display: flex;
     align-items: center;
     border-radius: 8px;
     margin: 2px 6px;
 }

 /* Remove default underline effect for submenu items */
 .main-menu ul ul li a::after {
     content: none !important;
     display: none !important;
 }

 .main-menu ul ul li a i {
     width: 24px;
     text-align: center;
     margin-right: 10px;
     color: var(--accent-color);
     font-size: 14px;
     margin-left: 6px;
     transition: all 0.2s ease;
 }

 /* Space out the down arrow on top-level desktop menu items */
 .main-menu .nav-item.has-submenu>.nav-link {
     display: inline-flex;
     align-items: center;
     gap: 18px !important;
 }

 .main-menu .nav-item.has-submenu .nav-link .submenu-icon {
     position: relative !important;
     display: inline-block;
     flex: 0 0 auto;
     width: 7px;
     height: 7px;
     margin-left: 8px !important;
     top: -2px;
     border-right: 2px solid rgba(255, 255, 255, 0.92);
     border-bottom: 2px solid rgba(255, 255, 255, 0.92);
     color: transparent;
     transform: rotate(45deg);
     transform-origin: 50% 50%;
     transition: transform 0.28s ease, border-color 0.28s ease, opacity 0.28s ease;
     opacity: 0.95;
 }

 .main-menu .nav-item.has-submenu:hover .nav-link .submenu-icon {
     border-color: var(--accent-color);
     opacity: 1;
 }

 /* --- Certification Cards Mobile Alignment --- */
 @media (max-width: 767px) {
     .certification-card {
         text-align: center !important;
         padding: 40px 20px !important;
     }

     .certification-card .col-md-4 {
         margin-bottom: 25px;
     }

     .certification-card img {
         margin: 0 auto !important;
         display: block !important;
         max-width: 140px !important;
     }

     .certification-card h3 {
         margin-top: 0;
         margin-bottom: 15px;
         font-size: 22px;
     }

     .certification-card ul {
         display: inline-block;
         text-align: left;
         margin: 15px auto 0;
         padding-left: 20px !important;
     }

     .certification-card ul li {
         margin-bottom: 8px;
     }
 }

 /* Hover effect for submenu items */
 .main-menu ul ul li a:hover {
     background: rgba(66, 132, 214, 0.08);
     /* Accent color fade */
     color: var(--accent-color);
     padding-left: 20px !important;
     /* Reset to match default */
     transform: translateX(5px);
     /* Smooth slide using transform */
 }

 /* View All button special style */
 .main-menu ul ul li a.view-all {
     margin-top: 5px;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 0 0 8px 8px;
     font-weight: 600;
     color: var(--accent-color);
 }

 .main-menu ul ul li a.view-all:hover {
     background: var(--accent-color);
     color: #fff;
     padding-left: 20px !important;
     transform: translateX(0);
     /* No movement for this one, just fill */
 }

 .main-menu ul ul li a.view-all:hover i {
     color: #fff;
 }

 .main-menu ul li:hover>ul {
     visibility: visible;
     opacity: 1;
     transform: scaleY(1);
     padding: 5px 0;
 }

 .main-menu ul ul li a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--primary-color);
     transition: all 0.3s ease-in-out;
 }

 .main-menu ul ul li a:hover,
 .main-menu ul ul li a:focus {
     color: var(--primary-color);
     background-color: transparent;
     padding: 6px 20px 6px 23px !important;
     font-weight: 600;
 }

 .main-menu ul ul li a:hover::after,
 .main-menu ul ul li a:focus::after {
     width: 100%;
 }

 /* Active state for dropdown items */
 .main-menu ul ul li a.active,
 .main-menu ul ul li.current-menu-item>a,
 .main-menu ul ul li.current_page_item>a {
     color: var(--primary-color);
     font-weight: 600;
 }

 .main-menu ul ul li a.active::after,
 .main-menu ul ul li.current-menu-item>a::after,
 .main-menu ul ul li.current_page_item>a::after {
     width: 100%;
 }

 .responsive-menu,
 .navbar-toggle {
     display: none;
 }

 .responsive-menu {
     top: 0;
     position: relative;
 }

 .slicknav_btn {
     background: transparent !important;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     margin: 5px 15px 5px 0;
     border-radius: 8px;
     transition: all 0.3s ease;
 }

 .slicknav_icon {
     position: relative;
     width: 24px;
     height: 18px;
 }

 .slicknav_icon .slicknav_icon-bar {
     display: block;
     position: absolute;
     left: 0;
     width: 100%;
     height: 2px;
     background-color: var(--white-color);
     border-radius: 2px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Standard Hero Header state - white bars */
 header.main-header.transparent-header .slicknav_icon .slicknav_icon-bar {
     background-color: #fff;
 }

 /* Sticky Header state - dark bars */
 header.main-header .header-sticky.active .slicknav_icon .slicknav_icon-bar {
     background-color: var(--primary-color);
 }

 .slicknav_icon .slicknav_icon-bar:nth-child(1) {
     top: 0;
 }

 /* Middle bar slightly shorter for style */
 .slicknav_icon .slicknav_icon-bar:nth-child(2) {
     top: 8px;
     width: 16px;
 }

 .slicknav_icon .slicknav_icon-bar:nth-child(3) {
     top: 16px;
 }

 /* Hover Effect on Hamburger */
 .slicknav_btn:hover .slicknav_icon-bar:nth-child(2) {
     width: 100%;
 }

 /* Opened State (The X animation) */
 .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1) {
     transform: rotate(45deg);
     top: 8px;
 }

 .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2) {
     opacity: 0;
     transform: translateX(-10px);
 }

 .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) {
     transform: rotate(-45deg);
     top: 8px;
 }

 /**********************
  MOBILE DROPDOWN MENU
 **********************/
 .slicknav_menu {
     position: absolute;
     width: 100%;
     top: 100%;
     z-index: 100;
     background: transparent !important;
     padding: 0 !important;
 }

 .slicknav_nav {
     padding: 10px 15px 20px;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px) saturate(180%);
     -webkit-backdrop-filter: blur(20px) saturate(180%);
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
 }

 .slicknav_menu ul {
     margin: 0;
     padding: 0;
 }

 .slicknav_nav .slicknav_row,
 .slicknav_nav>li>a {
     position: relative;
     font-family: var(--accent-font);
     font-size: 15px;
     font-weight: 600;
     text-transform: capitalize;
     letter-spacing: 0.5px;
     padding: 14px 20px;
     color: #1a2332;
     border-bottom: 1px solid rgba(0, 0, 0, 0.04);
     margin: 0;
     border-radius: 8px;
     transition: all 0.3s ease;
 }

 .slicknav_nav>li:last-child>a {
     border-bottom: none;
 }

 .slicknav_nav a:hover,
 .slicknav_nav a:focus,
 .slicknav_nav .slicknav_row:hover {
     background-color: rgba(66, 132, 214, 0.05);
     color: var(--accent-color);
     padding-left: 24px;
 }

 .slicknav_menu ul ul li a {
     padding: 12px 20px 12px 35px;
     font-size: 14px;
     color: #4a5568;
     font-weight: 500;
     border-bottom: 1px solid rgba(0, 0, 0, 0.02);
 }

 .slicknav_menu ul ul li a:hover {
     color: var(--accent-color);
     padding-left: 40px !important;
     background: transparent;
 }

 .slicknav_arrow {
     font-size: 0 !important;
 }

 .slicknav_arrow:after {
     content: '\f107';
     font-family: 'FontAwesome';
     font-weight: 900;
     font-size: 14px;
     color: #6b7a8d;
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .slicknav_open>.slicknav_row .slicknav_arrow:after {
     transform: translateY(-50%) rotate(-180deg);
     color: var(--accent-color);
 }

 /* Handle FA icon in our custom mega wrapper */
 .nav-item.has-submenu>a .submenu-icon {
     position: absolute;
     right: 20px;
     top: 50%;
     width: 8px;
     height: 8px;
     border-right: 1.6px solid currentColor;
     border-bottom: 1.6px solid currentColor;
     color: #6b7a8d;
     transform: translateY(-60%) rotate(45deg);
     transform-origin: 50% 50%;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
 }

 .nav-item.has-submenu.submenu-open>a .submenu-icon {
     transform: translateY(-40%) rotate(225deg);
     color: var(--accent-color);
 }

 /************************************/
 /***        04. Hero css	      ***/
 /************************************/

 .hero {
     position: relative;
     background: url('../images/hero-bg.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     padding: 280px 0 250px;
     min-height: 100vh;
     min-height: 100dvh;
     margin-top: 0;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
     height: 100%;
     width: 100%;
     z-index: 1;
 }

 .hero.hero-video .hero-bg-video {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
 }

 .hero.hero-video .hero-bg-video video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hero.hero-slider-layout {
     background: none;
     padding: 0;
 }

 .hero.hero-slider-layout .hero-slide {
     position: relative;
     padding: 0;
     height: 100vh;
     height: 100dvh;
     min-height: 100vh;
     min-height: 100dvh;
     display: flex;
     align-items: center;
 }

 .hero.hero-slider-layout .hero-slide::before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .hero.hero-slider-layout .hero-slide .hero-slider-image {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
 }

 .hero.hero-slider-layout .hero-slide .hero-slider-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hero.hero-slider-layout .hero-pagination {
     position: absolute;
     bottom: 20px;
     text-align: center;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
 }

 .hero-slider-toggle {
     position: absolute;
     bottom: 72px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     min-height: 40px;
     padding: 0 16px;
     border: 1px solid rgba(255, 255, 255, 0.24);
     border-radius: 999px;
     background: rgba(18, 26, 38, 0.42);
     color: #ffffff;
     font-size: 13px;
     font-weight: 700;
     line-height: 1;
     backdrop-filter: blur(12px);
     transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
 }

 .hero-slider-toggle:hover {
     background: rgba(18, 26, 38, 0.62);
     border-color: rgba(255, 255, 255, 0.42);
 }

 .hero-slider-toggle__icon {
     position: relative;
     display: inline-block;
     width: 12px;
     height: 12px;
 }

 .hero-slider-toggle__icon::before,
 .hero-slider-toggle__icon::after {
     content: "";
     position: absolute;
     top: 0;
     width: 3px;
     height: 12px;
     border-radius: 2px;
     background: currentColor;
 }

 .hero-slider-toggle__icon::before {
     left: 1px;
 }

 .hero-slider-toggle__icon::after {
     right: 1px;
 }

 .hero-slider-toggle.is-paused .hero-slider-toggle__icon::before {
     left: 3px;
     width: 0;
     height: 0;
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
     border-left: 9px solid currentColor;
     border-radius: 0;
     background: transparent;
 }

 .hero-slider-toggle.is-paused .hero-slider-toggle__icon::after {
     opacity: 0;
 }

 .hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: var(--white-color);
     opacity: 1;
     transition: all 0.3s ease-in-out;
     margin: 0 5px;
 }

 .hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active {
     background-color: var(--accent-color);
 }

 .hero-content {
     position: relative;
     z-index: 2;
     --hero-heading-font: "Cormorant Garamond", serif;
     --hero-body-font: "Manrope", sans-serif;
 }

 .hero.hero-slider-layout .row.align-items-center {
     align-items: flex-end !important;
     min-height: 100vh;
     min-height: 100dvh;
     height: 100vh;
     height: 100dvh;
     padding-bottom: 80px;
 }

 .hero-content .section-title h3,
 .hero-content .section-title h1,
 .hero-content .section-title h2,
 .hero-content .section-title h1 *,
 .hero-content .section-title h2 *,
 .hero-content .section-title h1 div,
 .hero-content .section-title h2 div,
 .hero-content .section-title h1 span,
 .hero-content .section-title h2 span {
     color: var(--white-color) !important;
 }

 .hero-content .section-title h1 {
     font-family: var(--hero-heading-font);
     font-size: 42px;
     font-weight: 600;
     line-height: 0.98em;
     letter-spacing: -0.04em;
     margin-bottom: 0;
 }

 .hero-content .section-title h3 {
     font-family: var(--hero-body-font);
     margin-bottom: 12px;
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 0.22em;
     text-transform: uppercase;
 }

 .hero-content .section-title p {
     font-family: var(--hero-body-font);
     font-size: 18px;
     font-weight: 500;
     line-height: 1.8em;
     letter-spacing: 0.01em;
     color: var(--white-color);
     width: 100%;
     max-width: 600px;
     margin-top: 15px;
 }

 .hero-content .section-title h2 {
     font-family: var(--hero-heading-font);
     font-weight: 600;
     line-height: 1em;
     letter-spacing: -0.04em;
 }

 .hero-content .btn-default {
     font-family: var(--hero-body-font);
     font-weight: 700;
     letter-spacing: 0.01em;
 }

 .hero-content .section-title h3::before {
     filter: brightness(0) invert(1);
 }

 .hero-content .btn-default.btn-highlighted {
     margin-left: 30px;
 }

 /* Hide CTA buttons in hero slider */
 .hero.hero-slider-layout .hero-btn {
     display: none;
 }

 /* Hide CTA button in header */
 .header-btn {
     display: none !important;
 }

 /* Hero Scroll Arrow */
 .hero-scroll-arrow {
     position: absolute;
     bottom: 20px;
     right: calc(((100vw - 1300px) / 2) + 15px);
     z-index: 3;
 }

 .hero-scroll-arrow a {
     position: relative;
     display: inline-block;
     width: 24px;
     height: 24px;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .hero-scroll-arrow a::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(90deg);
     background: url('../images/icon-sub-heading.svg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     filter: brightness(0) invert(1);
     width: 24px;
     height: 5px;
     animation: bounce 2s infinite;
 }

 .hero-scroll-arrow a:hover::before {
     transform: translate(-50%, -50%) rotate(90deg) translateY(-2px);
 }

 .hero-scroll-arrow a i {
     display: none;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-5px);
     }

     60% {
         transform: translateY(-3px);
     }
 }

 /************************************/
 /***       05. About Us css 	  ***/
 /************************************/

 .about-us {
     background-color: transparent !important;
     background-image: none !important;
     padding: 100px 0;
 }

 .about-us-images {
     position: relative;
     background-image: url(../images/about-us-bg-shape.svg);
     background-repeat: no-repeat;
     background-position: left 60px bottom 40px;
     background-size: auto;
     padding-right: 100px;
     padding-bottom: 180px;
     margin-right: 30px;
 }

 .about-img-1 figure,
 .about-img-2 figure {
     display: block;
 }

 .about-img-1 img {
     width: 100%;
     object-fit: cover;
     aspect-ratio: 1 / 0.76;
 }

 .about-img-2 {
     position: absolute;
     width: 100%;
     max-width: 385px;
     bottom: 0;
     right: 0;
 }

 .about-img-2 img {
     width: 100%;
     object-fit: cover;
     aspect-ratio: 1 / 0.76;
 }

 .experience-counter {
     position: absolute;
     top: 0;
     left: 0;
     height: 152px;
     width: 152px;
     display: flex;
     flex-wrap: wrap;
     align-content: center;
     justify-content: center;
     align-items: center;
     background-color: var(--accent-color);
     border: 6px solid var(--white-color);
     transform: translate(-50%, -6px);
     border-radius: 50%;
 }

 .experience-counter h3 {
     font-size: 34px;
     color: var(--white-color);
     text-align: center;
     width: 100%;
     margin-bottom: 5px;
 }

 .experience-counter p {
     font-weight: 600;
     line-height: 1.4em;
     text-transform: capitalize;
     color: var(--white-color);
     text-align: center;
     margin-bottom: 0;
 }

 .feedback-counter {
     position: absolute;
     top: 0;
     right: 0;
     transform: rotate(-180deg) translate(20px, -20px);
     writing-mode: vertical-rl;
     display: flex;
     align-items: center;
 }

 .feedback-counter p {
     font-size: 16px;
     font-weight: 500;
     color: var(--white-color);
     height: 60px;
     width: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--accent-color);
     border-radius: 50%;
     margin: 0 0 15px 0;
     transition: all 0.3s ease-in-out;
 }

 .feedback-counter:hover p {
     background-color: var(--primary-color);
 }

 .feedback-counter h3 {
     font-size: 18px;
     font-weight: 500;
     text-transform: capitalize;
     width: calc(100% - 75px);
 }

 /* About Us Text Color Override */
 .about-us-content .section-title h3,
 .about-us-content .section-title h2,
 .about-us-content .section-title p {
     color: var(--text-color);
 }

 .about-us-content-body {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     gap: 80px;
 }

 .about-us-content-body::before {
     content: '';
     position: absolute;
     right: 50%;
     top: 0;
     bottom: 0;
     transform: translateX(-50%);
     border: 1px solid var(--divider-color);
     width: 1px;
     height: 100%;
 }

 .about-us-content-info {
     width: calc(50% - 40px);
 }

 .about-us-content-list {
     margin-bottom: 40px;
 }

 .about-us-content-list ul {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 .about-us-content-list ul li {
     position: relative;
     font-weight: 500;
     color: var(--primary-color);
     padding-left: 30px;
     margin-bottom: 15px;
 }

 .about-us-content-list ul li:last-child {
     margin-bottom: 0;
 }

 .about-us-content-list ul li::before {
     content: '\f058';
     position: absolute;
     font-family: 'FontAwesome';
     font-size: 20px;
     font-weight: 900;
     line-height: normal;
     color: var(--accent-color);
     display: inline-block;
     top: 2px;
     left: 0;
 }

 .about-us-content-list ul li:last-child {
     margin-bottom: 0;
 }

 .about-us-content-list ul li::before {
     content: '\f058';
     position: absolute;
     font-family: 'FontAwesome';
     font-size: 20px;
     font-weight: 900;
     line-height: normal;
     color: var(--accent-color);
     display: inline-block;
     top: 2px;
     left: 0;
 }

 .about-us-contact-list {
     width: calc(50% - 40px);
 }

 .about-contact-item {
     display: flex;
     align-items: center;
     margin-bottom: 40px;
     text-decoration: none !important;
     transition: all 0.3s ease;
 }

 a.about-contact-item:hover {
     transform: translateX(10px);
 }


 .about-contact-item:last-child {
     margin-bottom: 0;
 }

 .about-contact-item .icon-box {
     width: 40px;
     height: 40px;
     background-color: var(--accent-color);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 15px;
     transition: all 0.3s ease-in-out;
 }

 .about-contact-item:hover .icon-box {
     background-color: var(--primary-color);
 }

 .about-contact-item .icon-box figure {
     display: block;
     border-radius: 50%;
     overflow: hidden;
 }

 .about-contact-item .icon-box img {
     max-width: 40px;
     border-radius: 50%;
 }

 .about-contact-item .icon-box i {
     font-size: 18px;
     color: var(--white-color);
 }

 .about-contact-content {
     width: calc(100% - 55px);
     color: var(--body-color);
 }

 .about-contact-item:hover .about-contact-content h3 {
     color: var(--accent-color);
     transition: color 0.3s ease;
 }


 .about-contact-content h3 {
     font-size: 20px;
     text-transform: capitalize;
 }

 .about-contact-content p {
     font-weight: 500;
     color: var(--primary-color);
     text-transform: capitalize;
     margin-bottom: 0;
 }

 /************************************/
 /***     06. Why Choose Us css    ***/
 /************************************/

 .why-choose-us {
     padding: 100px 0;
     background-color: transparent !important;
 }

 /* Specific Graphite Text for Why Choose */
 .why-choose-content .section-title h3,
 .why-choose-content .section-title h2,
 .why-choose-content .section-title p {
     color: var(--text-color);
 }

 .why-choose-us {
     padding: 100px 0;
     background-color: #F0EADE;
     /* Deep Rich Ivory */
     background-image: url('../images/section-bg-shape-2.svg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 .why-choose-item {
     display: flex;
     border-bottom: 1px solid var(--divider-color);
     margin-bottom: 20px;
     padding-bottom: 20px;
 }

 .why-choose-item:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .why-choose-item .icon-box {
     position: relative;
     width: 60px;
     height: 60px;
     background-color: #0a2838;
     -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 20px;
     transform: rotate(90deg);
     transition: all 0.4s ease-in-out;
 }

 /*.why-choose-item:hover .icon-box {
     background-color: transparent;
 }*/

 .why-choose-item .icon-box::before {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: var(--primary-color);
     -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     height: 100%;
     width: 100%;
     transform: scale(0);
     transition: all 0.3s ease-in-out;
 }

 /*.why-choose-item:hover .icon-box::before {
     transform: scale(1);
 }*/

 .why-choose-item .icon-box img {
     max-width: 24px;
     z-index: 1;
     transition: all 0.3s ease-in-out;
 }

 /*.why-choose-item:hover .icon-box img {
     filter: brightness(0) invert(1);
 }*/

 .why-choose-item-content {
     width: calc(100% - 80px);
 }

 .why-choose-item-content h3 {
     font-size: 20px;
     text-transform: capitalize;
     margin-bottom: 10px;
 }

 .why-choose-item-content p {
     color: var(--primary-color);
     margin-bottom: 0;
 }

 .why-choose-images {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin-left: 30px;
 }

 .why-choose-img-box-1,
 .why-choose-img-box-2 {
     display: flex;
     gap: 20px;
     width: 100%;
 }

 .why-choose-img-1 figure,
 .why-choose-img-2 figure,
 .why-choose-img-3 figure,
 .why-choose-img-4 figure {
     display: block;
 }

 .why-choose-img-1 {
     width: calc(57% - 10px);
 }

 .why-choose-img-1 img {
     width: 100%;
     aspect-ratio: 1 / 0.756;
     object-fit: cover;
 }

 .why-choose-img-2 {
     width: calc(43% - 10px);
 }

 .why-choose-img-2 img {
     width: 100%;
     aspect-ratio: 1 / 1.01;
     object-fit: cover;
 }

 .why-choose-img-3 {
     width: calc(67% - 10px);
 }

 .why-choose-img-3 img {
     width: 100%;
     aspect-ratio: 1 / 0.746;
     object-fit: cover;
 }

 .why-choose-img-4 {
     width: calc(33% - 10px);
 }

 .why-choose-img-4 img {
     width: 100%;
     aspect-ratio: 1 / 1.55;
     object-fit: cover;
 }

 /************************************/
 /***     07. Our Services css     ***/
 /************************************/

 .our-services {
     padding: 100px 0;
 }

 .service-item {
     position: relative;
     height: calc(100% - 30px);
     max-height: 350px;
     margin-bottom: 30px;
     -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     overflow: hidden;
     transition: all 0.4s ease-in-out;
     box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
 }

 .service-item:hover {
     transform: rotate(3deg);
 }

 .service-image a {
     display: block;
 }

 .service-image a figure::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 105%);
     height: 100%;
     width: 100%;
     z-index: 1;
     transition: all 0.3s ease-in-out;
 }

 .service-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     aspect-ratio: 1 / 1.1;
     transition: all 0.4s ease-in-out;
 }

 .service-item:hover .service-image img {
     transform: scale(1.1) rotate(5deg);
 }

 .service-item:hover .service-content p {
     opacity: 1;
     transform: translateY(0);
 }

 /* HEXaREL Style Layout - 3 Routers */
 .product-features {
     position: relative;
     overflow: hidden;
 }

 .hexaouter {
     position: relative;
     float: left;
     width: 32.3%;
     min-height: 430px;
     height: 430px;
     left: 100px;
 }

 .hex {
     position: absolute;
     margin: 10px;
     width: 113px;
     top: 0;
     height: 197px;
     transition: 0.5s;
     border-radius: 1em/.5em;
     background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
     border: 2px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(35, 63, 136, 0.3);
 }

 .hex:hover {
     top: -10px;
     transform: scale(1.05);
     box-shadow: 0 12px 40px rgba(35, 63, 136, 0.4);
 }

 /* Icon animation enhancement */
 .hex .tekst i {
     transition: transform 0.3s ease;
 }

 .hex:hover .tekst i {
     transform: scale(1.2) rotate(5deg);
 }

 /* Category-specific hex colors */
 .hex.production {
     background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
 }

 .hex.sustainability {
     background: linear-gradient(135deg, #228B22 0%, #32CD32 100%);
 }

 .hex.quality {
     background: linear-gradient(135deg, #8B4513 0%, #CD853F 100%);
 }

 .hex.performance {
     background: linear-gradient(135deg, #4B0082 0%, #8A2BE2 100%);
 }

 .hex.infrastructure {
     background: linear-gradient(135deg, #2F4F4F 0%, #708090 100%);
 }

 .hex.btmmove {
     background: #233f88;
     top: 205px;
 }

 .hex.btmmove:hover {
     top: 215px;
 }

 .hex.btmmove.center {
     position: absolute;
     left: 179px;
     top: 102px;
 }

 .hex.btmmove.center:hover {
     position: absolute;
     left: 179px;
     top: 102px;
 }

 .hex:before,
 .hex:after {
     position: absolute;
     width: inherit;
     height: inherit;
     border-radius: inherit;
     background: inherit;
     content: '';
 }

 .hex:before {
     -webkit-transform: rotate(60deg);
     transform: rotate(60deg);
 }

 .hex:after {
     -webkit-transform: rotate(-60deg);
     transform: rotate(-60deg);
 }

 .hoverborder {
     opacity: 0;
     background: url(/images/dotted-hexa.png) left top no-repeat;
     width: 209px;
     z-index: 9;
     left: -48px;
     top: 11px;
     height: 179px;
     transition: 0.5s;
     position: absolute;
 }

 .hex:hover .hoverborder {
     opacity: 1;
 }

 .tekst {
     position: absolute;
     z-index: 1;
     justify-content: center;
     display: block;
     text-align: center;
     transition: 0.5s;
     padding-top: 45px;
     height: 100%;
     width: 100%;
     opacity: 1;

     color: #fff;
     font-size: 14px;
     line-height: 1.2;
     text-transform: uppercase;
 }

 /* Text color for different hexagon types */
 .hex .tekst {
     color: #fff;
     /* White text for dark hexagons */
 }

 .hex.greencolor .tekst {
     color: #000;
     /* Black text for green hexagons */
 }

 .hex.btmmove .tekst {
     color: #fff;
     /* White text for dark blue hexagons */
 }

 .tekst i {
     width: auto;
     margin-bottom: 10px;
     display: block;
 }

 /* Icon colors for different hexagon types */
 .hex .tekst i {
     color: #fff;
     /* White icons for dark hexagons */
     font-size: 30px;
     margin-bottom: 10px;
     display: block;
 }

 .hex.greencolor .tekst i {
     color: #000;
     /* Black icons for green hexagons */
     font-size: 30px;
     margin-bottom: 10px;
     display: block;
 }

 .hex.btmmove .tekst i {
     color: #fff;
     /* White icons for dark blue hexagons */
     font-size: 30px;
     margin-bottom: 10px;
     display: block;
 }

 .content {
     position: absolute;
     z-index: 1;
     justify-content: center;
     display: flex;
     font-size: 13px;
     text-align: center;
     align-items: center;
     transition: 0.5s;
     height: 100%;
     width: 100%;
     opacity: 0;
     line-height: 1.4;
 }

 /* Content text color for different hexagon types */
 .hex .content {
     color: #fff;
     /* White text for dark hexagons */
 }

 .hex.greencolor .content {
     color: #000;
     /* Black text for green hexagons */
 }

 .hex.btmmove .content {
     color: #fff;
     /* White text for dark blue hexagons */
 }

 .hex:hover .tekst {
     opacity: 0;
 }

 .hex:hover .content {
     opacity: 1;
 }

 .hex.greencolor {
     background: var(--accent-color);
 }

 .hex.greencolor .tekst.fontcolor {
     color: var(--white-color);
 }

 .hex.greencolor .content.fontcolor {
     color: var(--white-color);
 }

 /* Responsive adjustments */
 @media only screen and (max-width: 1200px) {
     .hexaouter {
         width: 39%;
     }
 }

 @media only screen and (max-width: 768px) {
     .hexaouter {
         width: 90%;
     }
 }

 @media only screen and (max-width: 480px) {
     .hexaouter {
         width: 70%;
         min-height: 615px;
         height: 615px;
         left: 30%;
     }

     .hex.btmmove {
         top: 410px;
     }

     .hex.btmmove.center {
         left: 0px;
         top: 205px;
     }

     .hex.btmmove.center:hover {
         left: 60px !important;
         top: 206px !important;
     }

     .hex:hover {
         left: 60px;
         top: 0;
     }

     .hex.btmmove:hover {
         top: 411px;
         left: 60px !important;
     }
 }

 .service-btn {
     position: absolute;
     top: 40px;
     right: 40px;
     z-index: 1;
 }

 .service-btn a {
     background-color: var(--accent-color);
     height: 60px;
     width: 60px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.4s ease-in-out;
 }

 .service-btn a:hover {
     background-color: var(--primary-color);
 }

 .service-btn a img {
     max-width: 20px;
     transform: rotate(-45deg);
     transition: all 0.4s ease-in-out;
 }

 .service-btn a:hover img {
     transform: rotate(0)
 }

 .service-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1;
     transition: all 0.4s ease-in-out;
     text-align: center;
     width: 80%;
 }

 .service-content h3 {
     font-size: 20px;
     text-transform: capitalize;
     color: var(--white-color);
     margin-bottom: 10px;
 }

 .service-content h3 a {
     color: inherit;
 }

 .service-content p {
     color: var(--white-color);
     margin-bottom: 0;
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.4s ease-in-out;
 }

 .all-services-btn {
     text-align: center;
     margin-top: 20px;
 }

 /************************************/
 /***      08. Intro Video css     ***/
 /************************************/

 .intro-video .container-fluid {
     padding: 0;
 }

 .intro-video-box {
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .intro-video-image a {
     display: block;
 }

 .intro-video-image figure::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.6) 80.94%);
     height: 100%;
     width: 100%;
     z-index: 1;
 }

 .intro-video-image img {
     width: 100%;
     aspect-ratio: 1 / 0.41;
     object-fit: cover;
 }

 .video-play-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
 }

 .video-play-button a {
     position: relative;
     font-size: 16px;
     font-weight: 600;
     text-transform: capitalize;
     color: var(--white-color);
     border: 1px solid var(--white-color);
     border-radius: 50%;
     width: 100px;
     height: 100px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease-in-out;
 }

 .video-play-button a:hover {
     border-color: var(--primary-color);
     color: var(--primary-color);
 }

 /************************************/
 /***    09. Latest Project css    ***/
 /************************************/

 .our-project {
     padding: 100px 0 70px;
 }

 .our-Project-nav {
     text-align: center;
     margin-bottom: 60px;
 }

 .our-Project-nav ul {
     list-style: none;
     text-align: center;
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 15px 30px;
     padding: 0;
     margin: 0;
 }

 .our-Project-nav ul li a {
     position: relative;
     display: inline-block;
     color: var(--primary-color);
     font-weight: 500;
     line-height: 1.2em;
     text-transform: capitalize;
     transition: all 0.3s ease-in-out;
 }

 .main-header .navbar-nav .nav-link {
     color: #fff;
     font-weight: 500;
     padding: 10px 15px;
     font-size: 16px;
     text-transform: capitalize;
     transition: all 0.3s ease-in-out;
 }

 /* Sticky Header Dark Text */
 .header-sticky.active.is-scrolled .navbar-nav .nav-link,
 .header-sticky.active.is-scrolled .navbar-brand {
     color: #192324;
 }

 .header-sticky.active.is-scrolled .navbar-nav .nav-link:hover,
 .header-sticky.active.is-scrolled .navbar-nav .nav-link.active {
     color: var(--accent-color);
 }

 .our-Project-nav ul li a:after,
 .our-Project-nav ul li a:before {
     content: '';
     position: absolute;
     left: 0px;
     bottom: -8px;
     width: 100%;
     height: 2px;
     background-color: var(--accent-color);
     transform-origin: bottom right;
     transition: transform 0.4s ease-in-out;
     transform: scaleX(0);
 }

 .our-Project-nav ul li a:after {
     top: -8px;
     bottom: auto;
     left: 0px;
 }

 .our-Project-nav ul li a:hover:before,
 .our-Project-nav ul li a.active-btn:before,
 .our-Project-nav ul li a:hover:after,
 .our-Project-nav ul li a.active-btn:after {
     transform-origin: bottom left;
     transform: scaleX(1);
 }

 .project-item {
     position: relative;
     height: calc(100% - 30px);
     margin-bottom: 30px;
 }

 .project-featured-image figure::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 111.33%);
     z-index: 0;
 }

 .project-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     opacity: 0;
     visibility: hidden;
     backdrop-filter: blur(20px);
     border-radius: 50%;
     transform: translate(-50%, -30%);
     transition: all 0.3s ease-in-out;
     z-index: 1;
 }

 .project-item:hover .project-btn {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, -50%);
 }

 .project-btn a {
     width: 100px;
     height: 100px;
     background: var(--dark-divider-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s ease-in-out;
 }

 .project-btn img {
     max-width: 24px;
     transform: rotate(-45deg);
     transition: all 0.4s ease-in-out;
 }

 .project-btn a:hover {
     background: var(--primary-color);
 }

 .project-btn a:hover img {
     transform: rotate(0deg);
 }

 .project-featured-image img {
     width: 100%;
     aspect-ratio: 1 / 0.79;
     object-fit: cover;
 }

 .project-content {
     position: absolute;
     left: 40px;
     bottom: 40px;
     right: 40px;
 }

 .project-content h3,
 .project-content h2 {
     color: var(--white-color);
     text-transform: capitalize;
     position: relative;
     z-index: 1;
 }

 .project-content h3 {
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 10px;
 }

 .project-content h2 {
     font-size: 20px;
     font-weight: 700;
 }

 .project-content h2 a {
     color: inherit;
 }

 /************************************/
 /***      10. How We Work css     ***/
 /************************************/

 /* .how-we-work rule moved to line 8166 to consolidate styles */
 .how-we-work-list {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     justify-content: center;
     max-width: 1200px;
     margin: 50px auto 0;
     /* Added margin for stagger */
     align-items: center;
 }

 .how-we-work-list .how-we-work-item {
     width: calc(25% - 15px);
 }

 .how-we-work-item {
     /* width: calc(25% - 15px); Moved to specific selector above */
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     margin-bottom: 30px;
 }



 /* Force 4 items in second row for 8 total items */
 .how-we-work-item:nth-child(5),
 .how-we-work-item:nth-child(6),
 .how-we-work-item:nth-child(7),
 .how-we-work-item:nth-child(8) {
     width: calc(25% - 15px);
 }

 .how-we-work-item .icon-box {
     margin-bottom: 30px;
 }

 /* Force hexagon background for certificate icons */
 .how-we-work-list .how-we-work-item .icon-box {
     position: relative;
     width: 260px;
     height: 260px;
     background: transparent;
     perspective: 1000px;
     transform-style: preserve-3d;
     border-radius: 0 !important;
 }

 /* Flip effect on hover */
 .how-we-work-item:hover .certificate-icon {
     transform: translate(-50%, -50%) rotateY(-180deg) scale(1.05);
     filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.12));
 }

 .how-we-work-list .how-we-work-item:hover .how-we-work-content {
     transform: translate(-50%, -50%) rotateY(0deg);
 }

 /* Certificate icon - front face of flip card */
 .how-we-work-list .how-we-work-item .icon-box .certificate-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 220px;
     height: 220px;
     transform: translate(-50%, -50%) rotateY(0deg);
     background: #ffffff;
     /* Rounded Hexagon using SVG */
     -webkit-clip-path: url(#rounded-hex);
     clip-path: url(#rounded-hex);
     display: flex;
     align-items: center;
     justify-content: center;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     transition: all 0.6s ease-in-out;
     z-index: 1;
     /* Added Depth */
     filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.08));
 }

 .how-we-work-list .how-we-work-item .icon-box .certificate-icon img {
     max-width: 79%;
     max-height: 85%;
     border-radius: 0 !important;
     object-fit: contain;
     -webkit-clip-path: none !important;
     clip-path: none !important;
 }

 .how-we-work-item .icon-box img {
     max-width: 60px;
 }









 /* Advanced Products Showcase Styles */
 .product-filters {
     margin-bottom: 50px;
     margin-top: 40px;
     opacity: 0;
     animation: slideInFromTop 0.8s ease forwards;
     animation-delay: 0.2s;
 }

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

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

 .filter-tabs {
     display: inline-flex;
     flex-wrap: wrap;
     gap: 15px;
     padding: 12px;
     background: rgba(255, 255, 255, 0.95);
     border-radius: 50px;
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     margin: 0 auto;
 }

 .filter-btn {
     padding: 14px 28px;
     border: none;
     background: transparent;
     color: var(--secondary-color);
     font-weight: 700;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     border-radius: 30px;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
 }

 .filter-btn:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     transition: left 0.4s ease;
     z-index: -1;
 }

 .filter-btn:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: all 0.4s ease;
 }

 .filter-btn:hover:before,
 .filter-btn.active:before {
     left: 0;
 }

 .filter-btn:hover:after {
     width: 120px;
     height: 120px;
 }

 .filter-btn:hover,
 .filter-btn.active {
     color: white;
     transform: translateY(-3px) scale(1.05);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
 }

 .filter-btn:active {
     transform: translateY(-1px) scale(1.02);
 }

 .advanced-products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 40px;
     margin-bottom: 80px;
     perspective: 1000px;
 }

 .product-card {
     background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
     border-radius: 24px;
     overflow: hidden;
     box-shadow:
         0 15px 35px rgba(0, 0, 0, 0.08),
         0 5px 15px rgba(0, 0, 0, 0.04);
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     opacity: 0;
     transform: translateY(50px) scale(0.9);
     animation: cardSlideIn 0.8s ease forwards;
     border: 1px solid rgba(255, 255, 255, 0.6);
     backdrop-filter: blur(10px);
 }

 /* Staggered animation delays for cards */
 .product-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .product-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .product-card:nth-child(3) {
     animation-delay: 0.3s;
 }

 .product-card:nth-child(4) {
     animation-delay: 0.4s;
 }

 .product-card:nth-child(5) {
     animation-delay: 0.5s;
 }

 .product-card:nth-child(6) {
     animation-delay: 0.6s;
 }

 .product-card:nth-child(7) {
     animation-delay: 0.7s;
 }

 .product-card:nth-child(8) {
     animation-delay: 0.8s;
 }

 .product-card:nth-child(9) {
     animation-delay: 0.9s;
 }

 .product-card:nth-child(10) {
     animation-delay: 1.0s;
 }

 .product-card:nth-child(11) {
     animation-delay: 1.1s;
 }

 .product-card:nth-child(12) {
     animation-delay: 1.2s;
 }

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

 /* Floating shine effect */
 .product-card:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.4),
             transparent);
     transition: left 0.8s ease;
     z-index: 2;
     pointer-events: none;
 }

 .product-card.hidden {
     display: none !important;
 }

 .product-card:hover {
     transform: translateY(-15px) scale(1.02);
     box-shadow:
         0 25px 50px rgba(0, 0, 0, 0.15),
         0 10px 20px rgba(0, 0, 0, 0.1),
         inset 0 1px 0 rgba(255, 255, 255, 0.6);
     border: 1px solid rgba(135, 206, 235, 0.3);
 }

 .product-card:hover:before {
     left: 100%;
 }

 .product-image {
     position: relative;
     height: 200px;
     overflow: hidden;
     border-radius: 24px 24px 0 0;
 }

 .product-image:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
             rgba(0, 0, 0, 0) 0%,
             rgba(0, 0, 0, 0.1) 100%);
     z-index: 1;
     transition: opacity 0.3s ease;
 }

 .product-card:hover .product-image:before {
     opacity: 0;
 }

 .product-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     filter: saturate(0.9) brightness(1.05);
 }

 .product-card:hover .product-image img {
     transform: scale(1.15) rotate(2deg);
     filter: saturate(1.2) brightness(1.1);
 }

 .product-badge {
     position: absolute;
     top: 20px;
     right: 20px;
     background: linear-gradient(135deg, var(--accent-color), #ff6b6b);
     color: var(--white-color);
     padding: 8px 16px;
     border-radius: 25px;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     z-index: 3;
     box-shadow: 0 4px 15px rgba(233, 79, 55, 0.3);
     transition: all 0.4s ease;
     transform: translateY(0) scale(1);
 }

 .product-badge:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
     border-radius: 25px;
     transition: opacity 0.3s ease;
 }

 .product-card:hover .product-badge {
     transform: translateY(-5px) scale(1.1);
     box-shadow: 0 8px 25px rgba(233, 79, 55, 0.4);
 }

 .product-content {
     padding: 30px;
     position: relative;
     z-index: 2;
 }

 .product-content h3 {
     font-size: 22px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 15px;
     line-height: 1.3;
     transition: all 0.4s ease;
     position: relative;
     top: -100px;
 }

 .product-content h3:after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--accent-color), #87CEEB);
     border-radius: 2px;
     transition: width 0.5s ease;
 }

 .product-card:hover .product-content h3 {
     color: var(--accent-color);
     transform: translateX(8px);
 }

 .product-card:hover .product-content h3:after {
     width: 100%;
 }

 .product-content p {
     color: var(--secondary-color);
     font-size: 15px;
     line-height: 1.7;
     margin-bottom: 25px;
     transition: all 0.4s ease;
     transform: translateY(0);
     opacity: 0.9;
 }

 .product-card:hover .product-content p {
     color: #444;
     transform: translateY(-2px);
     opacity: 1;
 }

 .product-specs {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 25px;
 }

 .spec-item {
     background: var(--divider-color);
     color: var(--primary-color);
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .spec-btn {
     width: 100%;
     padding: 12px 20px;
     background: var(--primary-color);
     color: var(--white-color);
     border: none;
     border-radius: 8px;
     font-weight: 600;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 1px;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .spec-btn:hover {
     background: var(--accent-color);
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(233, 79, 55, 0.3);
 }

 .spec-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.5s ease;
 }

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

 /* Quality Assurance Section Styles */
 .quality-assurance {
     position: relative;
 }

 .quality-assurance h3 {
     color: var(--primary-color);
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 30px;
     position: relative;
 }

 .quality-assurance h3:after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 60px;
     height: 3px;
     background: var(--accent-color);
     border-radius: 2px;
 }

 .standards-grid {
     display: flex;
     flex-direction: column;
     gap: 25px;
 }

 .standards-grid-full {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .standard-item {
     display: flex;
     align-items: flex-start;
     gap: 20px;
     padding: 20px;
     background: white;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
 }

 .standard-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
 }

 .standard-icon {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .standard-icon i {
     font-size: 20px;
     color: white;
 }

 .standard-content h4 {
     color: var(--primary-color);
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 8px;
 }

 .standard-content p {
     color: var(--secondary-color);
     font-size: 14px;
     line-height: 1.6;
     margin: 0;
 }

 .cert-highlights {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .cert-item {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px;
     background: white;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border-left: 4px solid var(--accent-color);
 }

 .cert-item:hover {
     transform: translateX(5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
 }

 .cert-badge {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--accent-color), #ff6b6b);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .cert-badge i {
     font-size: 24px;
     color: white;
 }

 .cert-details h4 {
     color: var(--primary-color);
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .cert-details p {
     color: var(--secondary-color);
     font-size: 13px;
     margin: 0;
 }

 .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .feature-card {
     background: white;
     padding: 30px 25px;
     border-radius: 20px;
     text-align: center;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.4s ease;
     border-top: 4px solid var(--accent-color);
 }

 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .feature-icon {
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: all 0.3s ease;
 }

 .feature-card:hover .feature-icon {
     transform: scale(1.1);
 }

 .feature-icon i {
     font-size: 28px;
     color: white;
 }

 .feature-card h4 {
     color: var(--primary-color);
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 12px;
 }

 .feature-card p {
     color: var(--secondary-color);
     font-size: 14px;
     line-height: 1.6;
     margin: 0;
 }

 /* Quality Assurance Responsive Design */
 @media (max-width: 992px) {
     .feature-grid {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 25px;
     }

     .standard-item,
     .cert-item {
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }
 }

 @media (max-width: 768px) {
     .product-filters {
         margin-top: 30px;
         margin-bottom: 40px;
     }

     .quality-assurance {
         padding: 60px 0 !important;
     }

     .feature-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .standards-grid,
     .cert-highlights {
         gap: 15px;
     }

     .standard-item,
     .cert-item {
         padding: 15px;
     }

     .feature-card {
         padding: 25px 20px;
     }
 }

 /* Enhanced Responsive Design for Product Cards */
 @media (max-width: 768px) {
     .advanced-products-grid {
         grid-template-columns: 1fr;
         gap: 30px;
         margin-bottom: 60px;
     }

     .product-card {
         margin: 0 15px;
     }

     .product-card:hover {
         transform: translateY(-10px) scale(1.02);
     }

     .filter-tabs {
         padding: 8px;
         gap: 10px;
     }

     .filter-btn {
         padding: 12px 20px;
         font-size: 12px;
     }

     .product-content {
         padding: 25px 20px;
     }

     .product-content h3 {
         font-size: 20px;
     }

     .spec-btn {
         padding: 14px 20px;
     }
 }

 @media (max-width: 480px) {
     .product-image {
         height: 180px;
     }

     .product-content {
         padding: 20px 15px;
     }

     .product-content h3 {
         font-size: 18px;
     }

     .spec-item {
         padding: 6px 12px;
         font-size: 11px;
     }
 }

 /* Production Capabilities */
 .production-capabilities {
     background: var(--divider-color);
     padding: 50px 0;
     border-radius: 15px;
     margin: 60px 0;
 }

 .capability-item {
     text-align: center;
     padding: 30px 20px;
 }

 .capability-icon {
     width: 70px;
     height: 70px;
     background: var(--accent-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: all 0.3s ease;
 }

 .capability-icon i {
     font-size: 28px;
     color: var(--white-color);
 }

 .capability-item:hover .capability-icon {
     transform: translateY(-5px) scale(1.1);
     box-shadow: 0 10px 25px rgba(233, 79, 55, 0.3);
 }

 .capability-content h4 {
     font-size: 22px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 8px;
 }

 .capability-content p {
     font-size: 14px;
     color: var(--secondary-color);
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* Responsive Design */
 @media (max-width: 768px) {

     /* Previous conflicting overrides removed - consolidated at end of file */
     .product-filters .filter-btn {
         max-width: none !important;
         display: inline-block !important;
     }

     .advanced-products-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .production-capabilities .row {
         flex-direction: column;
     }

     .capability-item {
         margin-bottom: 30px;
     }
 }

 @media (max-width: 480px) {
     .filter-tabs {
         margin: 0 10px;
         padding: 8px;
         gap: 6px;
     }

     .filter-btn {
         padding: 8px 14px;
         font-size: 11px;
         letter-spacing: 0.5px;
         border-radius: 20px;
         flex: 0 0 auto;
     }

     .product-content {
         padding: 20px;
     }

     .product-content h3 {
         font-size: 18px;
     }

     .capability-icon {
         width: 60px;
         height: 60px;
     }

     .capability-icon i {
         font-size: 24px;
     }
 }



 /* Flip card structure for certifications - back face */
 /* Flip card structure for certifications - back face */
 .how-we-work-list .how-we-work-content {
     position: absolute;
     top: 41%;
     left: 50%;
     width: 220px;
     height: 220px;
     transform: translate(-50%, -50%) rotateY(180deg);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 28px;
     box-sizing: border-box;
     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
     /* Rounded Hexagon using SVG */
     -webkit-clip-path: url(#rounded-hex);
     clip-path: url(#rounded-hex);
     transition: all 0.6s ease-in-out;
     z-index: 2;
     /* Added Depth Inner Glow */
     box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
 }

 .how-we-work-content h3 {
     font-size: 16px;
     text-transform: capitalize;
     color: var(--white-color);
     margin-bottom: 10px;
     font-weight: 600;
     line-height: 1.1;
 }

 .how-we-work-content p {
     color: var(--white-color);
     margin: 0;
     font-size: 12px;
     line-height: 1.3;
 }

 /* Client Logo Grid Styles */
 .clients-logo-grid {
     margin-top: 40px;
 }



 .client-logo-item {
     text-align: center;
     padding: 30px 20px;
     margin-bottom: 30px;
     transition: all 0.3s ease;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.05);
 }

 .client-logo-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .client-logo {
     margin-bottom: 15px;
 }

 .client-logo img {
     max-width: 120px;
     max-height: 60px;
     object-fit: contain;
     filter: grayscale(100%);
     transition: all 0.3s ease;
 }

 .client-logo-item:hover .client-logo img {
     filter: grayscale(0%);
     transform: scale(1.1);
 }

 .client-name h4 {
     color: #333333;
     font-size: 16px;
     font-weight: 500;
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .how-work-company-slider {
     border-top: 1px solid var(--dark-divider-color);
     margin-top: 60px;
     padding-top: 60px;
 }

 .how-work-company-slider .company-logo {
     text-align: center;
 }

 .how-work-company-slider .company-logo img {
     width: 100%;
     max-height: 70px;
 }

 /************************************/
 /***      11. Our Skills css      ***/
 /************************************/

 .our-skill {
     padding: 100px 0;
     background: url('../images/section-bg-shape-2.svg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
 }

 .skills-progress-bar {
     margin-bottom: 40px;
 }

 .skills-progress-bar:last-child {
     margin-bottom: 0;
 }

 .skillbar .skill-data {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
 }

 .skill-data .skill-title {
     font-size: 16px;
     text-transform: capitalize;
     color: var(--primary-color);
 }

 .skill-data .skill-no {
     font-size: 16px;
     color: var(--primary-color);
     margin-left: 20px;
 }

 .skill-progress {
     width: 100%;
     height: 12px;
     background: var(--divider-color);
     border-radius: 99px;
     position: relative;
 }

 .skill-progress .count-bar {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     background-color: var(--primary-color);
     border-radius: 99px;
 }

 .our-skill-image {
     position: relative;
     padding-bottom: 155px;
     margin-left: 65px;
 }

 .our-skill-img-1 {
     width: 333px;
     position: relative;
     background: url('../images/our-skill-img-bg-dot.svg');
     background-repeat: no-repeat;
     background-position: top left;
     background-size: 84px auto;
     padding: 30px 0 0 30px;
 }

 .our-skill-img-1 figure,
 .our-skill-img-2 figure,
 .our-skill-img-3 figure {
     display: block;
 }

 .our-skill-img-1 img {
     width: 100%;
     aspect-ratio: 1/1.37;
     object-fit: cover;
 }

 .our-skill-img-2 {
     width: 202px;
     position: absolute;
     top: 70px;
     right: 0;
 }

 .our-skill-img-2 img {
     width: 100%;
     aspect-ratio: 1/0.93;
     object-fit: cover;
 }

 .our-skill-img-3 {
     width: 333px;
     position: absolute;
     bottom: 0;
     right: 0;
 }

 .our-skill-img-3 img {
     width: 100%;
     aspect-ratio: 1/0.97;
     object-fit: cover;
 }

 /************************************/
 /***   12. Our Testimonials css   ***/
 /************************************/

 .our-testimonials {
     background: var(--secondery-color);
 }

 .our-testimonials .container-fluid {
     padding: 0;
 }

 .our-testimonials-image {
     height: 100%;
 }

 .our-testimonials-image figure,
 .our-testimonials-image figure img {
     width: 100%;
     height: 100%;
     aspect-ratio: 1 / 0.82;
     object-fit: cover;
 }

 .our-testimonial-content {
     padding: 100px;
 }

 .our-testimonial-content .section-title {
     background: url('../images/testimonial-quote.svg') no-repeat;
     background-position: top right;
     background-size: 162px auto;
 }

 .testimonial-slider {
     width: 100%;
     max-width: 620px;
     margin-bottom: 40px;
     padding-bottom: 40px;
     border-bottom: 1px solid var(--divider-color);
 }



 .testimonial-rating {
     margin-bottom: 20px;
 }

 .testimonial-rating i {
     font-size: 18px;
     color: var(--primary-color);
     margin-right: 2px;
 }

 .testimonial-rating i:last-child {
     margin-right: 0;
 }

 .testimonial-content {
     margin-bottom: 40px;
 }

 .testimonial-content p {
     font-size: 20px;
     color: var(--primary-color);
     margin: 0;
 }

 .testimonial-body {
     display: flex;
     align-items: center;
 }

 .testimonial-body .author-image {
     margin-right: 15px;
 }

 .testimonial-body .author-image img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
 }

 .testimonial-body .author-content {
     width: calc(100% - 75px);
 }

 .testimonial-body .author-content h3 {
     font-size: 20px;
     text-transform: capitalize;
 }

 .testimonial-body .author-content p {
     text-transform: capitalize;
     margin: 0;
 }

 .testimonial-rating-counter {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .testimonial-rating-counter .rating-counter h2 {
     font-size: 58px;
 }

 .testimonial-client-rating {
     display: inline-block;
     background: var(--accent-color);
     padding: 0px 5px 3px 5px;
     line-height: 1em;
 }

 .testimonial-client-rating i {
     font-size: 10px;
     color: var(--white-color);
 }

 .testimonial-rating-content p {
     color: var(--primary-color);
     font-weight: 500;
     margin: 0;
 }

 /************************************/
 /***       13. Our Blog css       ***/
 /************************************/

 .our-blog {
     padding: 100px 0;
     background: url('../images/section-bg-shape-2.svg');
     background-repeat: no-repeat;
     background-position: top center;
     background-size: contain;
 }

 .post-item {
     height: calc(100% - 30px);
     margin-bottom: 30px;
 }

 .post-featured-image {
     margin-bottom: 20px;
 }



 .post-featured-image figure,
 .post-featured-image a {
     display: block;
 }

 .post-featured-image img {
     width: 100%;
     aspect-ratio: 1 / 0.85;
     object-fit: cover;
     transition: all 0.4s ease-in-out;
 }

 .post-item:hover .post-featured-image img {
     transform: scale(1.1);
 }

 .post-item-content {
     margin-bottom: 15px;
 }

 .post-item-content h3 {
     color: var(--primary-color);
     font-size: 20px;
     line-height: 1.4em;
 }

 .post-item-content h3 a {
     color: inherit;
 }

 .post-item-btn a {
     position: relative;
     color: var(--primary-color);
     font-weight: 500;
     text-transform: capitalize;
     padding-right: 25px;
 }

 .post-item-btn a::after {
     content: '';
     position: absolute;
     top: 50%;
     right: 0;
     transform: translate(0px, -50%);
     width: 17px;
     height: 16px;
     background: url('../images/arrow-dark.svg') no-repeat;
     background-position: right center;
     background-size: cover;
     transition: all 0.4s ease-in-out;
 }

 .post-item-btn a:hover::after {
     transform: translate(2px, -50%);
 }

 .our-blog-footer {
     margin-top: 20px;
     text-align: center;
 }

 /************************************/
 /***   Footer Divider Section css  ***/
 /************************************/

 .footer-divider {
     position: relative;
     top: 1px;
     width: 100%;
     overflow: hidden;
     line-height: 0;
 }

 .footer-divider svg {
     position: relative;
     display: block;
     width: calc(100% + 1.3px);
     height: 60px;
 }

 .footer-divider .footer-divider-fill {
     fill: #0d0d0d;
 }

 /* Responsive adjustments for footer divider */
 @media (max-width: 768px) {
     .footer-divider svg {
         height: 40px;
     }
 }

 @media (max-width: 480px) {
     .footer-divider svg {
         height: 30px;
     }
 }

 /************************************/
 /***      	14. Footer css 		  ***/
 /************************************/

 .main-footer {
     padding: 80px 0 0;
     background: var(--primary-color);
     background-size: contain;
     background-image: image-set(url('/images/footer-bg.webp') type('image/webp') 1x,
             url('/images/footer-bg.png') type('image/png') 1x);
     position: relative;
 }

 /* Enhanced footer overlay for better text readability */
 .main-footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.85) 100%);
     z-index: 1;
 }

 /* Ensure footer content is above the overlay */
 .main-footer>* {
     position: relative;
     z-index: 2;
 }

 .main-footer .footer-header {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     margin-bottom: 40px;
     padding-bottom: 40px;
 }

 .footer-social-links {
     display: flex;
     align-items: center;
     justify-content: end;
     gap: 30px;
 }

 .footer-social-link-title h3 {
     font-size: 20px;
     text-transform: capitalize;
     color: var(--white-color);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     font-weight: 600;
 }

 .footer-social-links ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .footer-social-links ul li {
     display: inline-flex;
     margin-right: 10px;
 }

 .footer-social-links ul li:last-child {
     margin-right: 0;
 }

 .footer-social-links ul li a {
     display: flex;
     justify-content: center;
     align-items: center;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     height: 36px;
     width: 36px;
     transition: all 0.3s ease-in-out;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .footer-social-links ul li a i {
     font-size: 18px;
     color: var(--white-color);
     transition: all 0.3s ease-in-out;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }

 .footer-social-links ul li a:hover {
     background: var(--accent-color);
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 }

 .footer-social-links ul li a:hover i {
     color: var(--white-color);
 }

 .footer-links h3 {
     font-size: 20px;
     text-transform: capitalize;
     color: var(--white-color);
     margin-bottom: 20px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     font-weight: 600;
     position: relative;
 }

 .footer-links h3::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 40px;
     height: 2px;
     background: var(--accent-color);
     border-radius: 1px;
 }

 .footer-links ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .footer-links ul li {
     color: rgba(255, 255, 255, 0.9);
     text-transform: capitalize;
     transition: all 0.3s ease-in-out;
     margin-bottom: 10px;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 .footer-links ul li:last-child {
     margin-bottom: 0;
 }

 .footer-links ul li:hover {
     color: var(--accent-color);
     transform: translateX(5px);
 }

 .footer-links ul li a {
     display: block;
     color: inherit;
 }

 .footer-contact-band {
     margin-top: 12px;
     padding: 28px 32px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 24px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
     backdrop-filter: blur(12px);
     box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
 }

 .footer-contact-band-heading {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 24px;
 }

 .footer-contact-band-heading span {
     display: inline-block;
     color: var(--white-color);
     font-family: "Manrope", sans-serif;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: 0.16em;
     text-transform: uppercase;
 }

 .footer-contact-band-heading p {
     max-width: 580px;
     margin: 0;
     color: rgba(255, 255, 255, 0.82);
 }

 .footer-contact-row {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 18px;
 }

 .footer-contact-item {
     display: flex;
     align-items: center;
     min-width: 0;
     padding: 18px 20px;
     border-radius: 18px;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.1);
     text-decoration: none;
     transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }

 .footer-contact-item:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(66, 132, 214, 0.35);
     transform: translateY(-4px);
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
 }

 .footer-contact-item .icon-box {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
     width: 46px;
     height: 46px;
     margin-right: 16px;
     border-radius: 16px;
     background: linear-gradient(135deg, rgba(66, 132, 214, 0.95), rgba(97, 159, 235, 0.88));
     box-shadow: 0 10px 20px rgba(66, 132, 214, 0.2);
 }

 .footer-contact-item .icon-box i {
     font-size: 18px;
     color: var(--white-color);
 }

 .footer-contact-content {
     flex: 1;
     min-width: 0;
 }

 .footer-contact-content span {
     display: block;
     margin-bottom: 6px;
     color: rgba(255, 255, 255, 0.64);
     font-family: "Manrope", sans-serif;
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 0.14em;
     text-transform: uppercase;
 }

 .footer-contact-content p {
     color: rgba(255, 255, 255, 0.96);
     margin: 0;
     font-weight: 600;
     line-height: 1.6em;
 }

 .footer-newsletter-form p {
     color: rgba(255, 255, 255, 0.9);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     margin-bottom: 20px;
     line-height: 1.6;
 }

 .footer-newsletter-form .form-group {
     position: relative;
     margin-bottom: 0;
 }

 .footer-newsletter-form .form-group .form-control {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 25px;
     padding: 12px 50px 12px 20px;
     color: var(--white-color);
     backdrop-filter: blur(10px);
     transition: all 0.3s ease-in-out;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .footer-newsletter-form .form-group .form-control:focus {
     background: rgba(255, 255, 255, 0.15);
     border-color: var(--accent-color);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     outline: none;
 }

 .footer-newsletter-form .form-group .form-control::placeholder {
     color: rgba(255, 255, 255, 0.7);
 }

 .footer-newsletter-form button {
     position: absolute;
     right: 5px;
     top: 50%;
     transform: translateY(-50%);
     background: var(--accent-color);
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease-in-out;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .footer-newsletter-form button:hover {
     transform: translateY(-50%) scale(1.1);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }

 .footer-newsletter-form button i {
     font-size: 16px;
     color: var(--white-color);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }

 .footer-newsletter-form button:hover i {
     transform: translateX(2px);
 }

 .footer-copyright {
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     margin-top: 40px;
     padding: 20px 0;
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(10px);
 }

 .footer-copyright-text p {
     color: rgba(255, 255, 255, 0.8);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     margin: 0;
     text-align: center;
     font-size: 14px;
 }

 .footer-dev-credit {
     margin-top: 6px !important;
     font-size: 10px !important;
     color: rgba(255, 255, 255, 0.3) !important;
     letter-spacing: 0.5px;
 }

 .footer-dev-credit a {
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
 }

 .footer-dev-credit a:hover {
     color: #87CEEB;
 }

 /* Enhanced footer logo */
 .footer-logo img {
     width: 240px;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
     transition: all 0.3s ease-in-out;
 }

 .footer-logo:hover img {
     transform: scale(1.05);
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
 }

 /* Responsive enhancements */
 @media (max-width: 768px) {
     .main-footer {
         padding: 60px 0 0;
     }

     .footer-social-links {
         justify-content: center;
         margin-top: 20px;
     }

     .footer-contact-band {
         padding: 22px 20px;
     }

     .footer-contact-band-heading {
         flex-direction: column;
         align-items: flex-start;
         margin-bottom: 18px;
     }

     .footer-contact-row {
         grid-template-columns: 1fr;
     }

     .footer-contact-item {
         padding: 14px 16px;
     }

     .footer-contact-item .icon-box {
         width: 40px;
         height: 40px;
         margin-right: 12px;
         border-radius: 14px;
     }

     .footer-contact-item .icon-box i {
         font-size: 16px;
     }
 }

 @media (max-width: 480px) {
     .main-footer {
         padding: 40px 0 0;
     }

     .footer-links h3 {
         font-size: 18px;
     }

     .footer-contact-band {
         padding: 18px 16px;
         border-radius: 18px;
     }

     .footer-contact-item {
         padding: 12px 14px;
         border-radius: 14px;
     }

     .footer-contact-item .icon-box {
         width: 36px;
         height: 36px;
         margin-right: 10px;
         border-radius: 12px;
     }

     .footer-contact-item .icon-box i {
         font-size: 14px;
     }
 }

 .footer-contact-content p {
     color: var(--white-color);
     margin: 0;
 }

 .footer-newsletter-form p {
     color: var(--white-color);
     margin-bottom: 30px;
 }

 .footer-newsletter-form .form-group {
     display: flex;
     background: var(--white-color);
     overflow: hidden;
 }

 .footer-newsletter-form .form-group .form-control {
     width: 85%;
     border: none;
     border-radius: 0;
     color: var(--text-color);
     background: transparent;
     padding: 13px 10px;
     box-shadow: none;
 }

 .footer-newsletter-form .form-group .form-control::placeholder {
     color: var(--text-color);
 }

 .footer-newsletter-form button {
     background-color: transparent;
     width: 15%;
     border: none;
     padding: 0;
 }

 .footer-newsletter-form button i {
     color: var(--accent-color);
     font-size: 16px;
     transition: all 0.3s ease-in-out;
 }

 .footer-newsletter-form button:hover i {
     color: var(--primary-color);
 }

 .footer-copyright {
     border-top: 1px solid var(--dark-divider-color);
     text-align: center;
     margin-top: 65px;
     padding: 40px 0;
 }

 .footer-copyright-text p {
     color: var(--white-color);
     margin: 0;
 }

 /************************************/
 /***     15. About Us Page css 	  ***/
 /************************************/

 .page-header {
     position: relative;
     background-image: image-set(url('../images/page-header-bg.webp') type('image/webp') 1x,
             url('../images/page-header-bg.png') type('image/png') 1x);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     padding: 270px 0 180px;
     margin-top: -118px;
 }

 .page-header::before {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .page-header-box {
     position: relative;
     text-align: center;
     z-index: 1;
 }

.page-header-box h1 {
    display: inline-block;
    font-family: "Cormorant Garamond", serif;
    font-size: 80px;
    font-weight: 600;
    color: var(--white-color);
    line-height: 0.96em;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
}

 .page-header-box ol {
     margin: 0;
     padding: 0;
     justify-content: center;
 }

 .page-header-box ol li.breadcrumb-item {
     font-size: 22px;
     text-transform: capitalize;
     color: var(--white-color);
 }

 .page-header-box ol li.breadcrumb-item a {
     color: inherit;
 }

 .page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
     font-size: 20px;
     color: var(--white-color);
 }

 .about-us.page-about-us {
     background: transparent;
 }

 .about-facility-list {
     margin-top: 100px;
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
 }

 .about-facility-item {
     width: calc(33.33% - 20px);
     display: flex;
 }

 .about-facility-item .icon-box {
     position: relative;
     height: 60px;
     width: 60px;
     background-color: var(--divider-color);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 20px;
 }

 .about-facility-item .icon-box:before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     background: var(--primary-color);
     border-radius: 50%;
     width: 100%;
     height: 100%;
     transform: scale(0);
     transition: all 0.4s ease-in-out;
     z-index: 0;
 }

 .about-facility-item:hover .icon-box:before {
     transform: scale(1);
 }

 .about-facility-item .icon-box img {
     max-width: 24px;
     z-index: 1;
     transition: all 0.4s ease-in-out;
 }

 .about-facility-item:hover .icon-box img {
     filter: brightness(0) invert(1);
 }

 .about-facility-content {
     width: calc(100% - 80px);
 }

 .about-facility-content h3 {
     font-size: 20px;
     text-transform: capitalize;
     margin-bottom: 10px;
 }

 .about-facility-content p {
     margin-bottom: 0;
 }

 .vision-mission {
     padding: 100px 0 50px;
     background: linear-gradient(180deg, var(--primary-color) 60%, var(--white-color) 40%);
 }

 .vision-mission-box {
     background-color: var(--secondery-color);
     padding: 45px 60px;
     display: flex;
     flex-wrap: wrap;
     gap: 30px 150px;
 }

 .vision-mission-item {
     position: relative;
     width: calc(50% - 75px);
 }

 .vision-mission-item::before {
     content: '';
     position: absolute;
     height: 100%;
     width: 1px;
     top: 0;
     right: -75px;
     bottom: 0;
     background-color: var(--divider-color);
     z-index: 1;
 }

 .vision-mission-item:nth-child(2n + 2)::before,
 .vision-mission-item:last-child::before {
     display: none;
 }

 .vision-mission-item .icon-box {
     position: relative;
     width: 95px;
     height: 95px;
     background: var(--divider-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
 }

 .vision-mission-item .icon-box:before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     background: var(--primary-color);
     border-radius: 50%;
     width: 100%;
     height: 100%;
     transform: scale(0);
     transition: all 0.4s ease-in-out;
     z-index: 0;
 }

 .vision-mission-item:hover .icon-box:before {
     transform: scale(1);
 }

 .vision-mission-item .icon-box img {
     position: relative;
     max-width: 36px;
     z-index: 1;
     transition: all 0.4s ease-in-out;
 }

 .vision-mission-item:hover .icon-box img {
     filter: brightness(0) invert(1);
 }

 .vision-mission-content h3 {
     font-size: 20px;
     text-transform: capitalize;
     margin-bottom: 20px;
 }

 .vision-mission-content p {
     margin: 0;
 }

 .best-selling {
     background: url(../images/section-bg-shape-1.svg);
     background-repeat: no-repeat;
     background-position: left center;
     background-size: contain;
     padding: 50px 0 100px;
 }

 .best-selling-content-img {
     margin-bottom: 80px;
 }

 .best-selling-iamge figure,
 .best-selling-content-img figure {
     display: block;
 }

 .best-selling-content-img img {
     width: 100%;
     aspect-ratio: 1 / 0.42;
     object-fit: cover;
 }

 .best-selling-content .section-title {
     margin-bottom: 0;
 }

 .best-selling-iamge img {
     width: 100%;
     aspect-ratio: 1 / 0.93;
     object-fit: cover;
 }

 .our-team {
     padding: 100px 0 70px;
     background: transparent !important;
     position: relative;
     overflow: hidden;
 }

 .our-team::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
     pointer-events: none;
 }

 .team-member-item {
     height: 100%;
     margin-bottom: 40px;
     background: #ffffff;
     border-radius: 20px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(10px);
 }

 .team-member-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     background: linear-gradient(90deg, #233F88, #4A90E2, #233F88);
     background-size: 200% 100%;
     animation: shimmer 3s ease-in-out infinite;
 }

 @keyframes shimmer {

     0%,
     100% {
         background-position: 200% 0;
     }

     50% {
         background-position: -200% 0;
     }
 }

 .team-member-item:hover {
     transform: translateY(-15px) scale(1.02);
     box-shadow: 0 25px 60px rgba(35, 63, 136, 0.15);
     border-color: rgba(35, 63, 136, 0.2);
 }

 .team-image {
     position: relative;
     margin-bottom: 30px;
     overflow: hidden;
     padding: 30px 30px 20px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .team-image .team-icon-box {
     position: relative;
     width: 120px;
     height: 120px;
     margin: 0 auto;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     border-radius: 50%;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     overflow: hidden;
 }

 .team-image .team-icon-box::before {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(45deg, #233F88, #4A90E2, #233F88);
     border-radius: 50%;
     z-index: -1;
     animation: rotate 4s linear infinite;
 }

 @keyframes rotate {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .team-image .team-icon-box i {
     font-size: 50px !important;
     width: auto !important;
     height: auto !important;
     padding: 0 !important;
     border: none !important;
     background: transparent !important;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     transition: all 0.3s ease;
     color: #233F88 !important;
 }

 .team-member-item:hover .team-image .team-icon-box {
     transform: scale(1.05);
     box-shadow: 0 20px 45px rgba(35, 63, 136, 0.2);
 }

 .team-member-item:hover .team-image .team-icon-box i {
     transform: translate(-50%, -50%) scale(1.1) rotateY(180deg);
     color: #4A90E2 !important;
 }

 .team-image a {
     display: block;
 }

 .team-image figure {
     display: block;
 }

 .team-image figure img {
     width: 100%;
     aspect-ratio: 1 / 1.11;
     object-fit: cover;
     transition: all 0.4s ease-in-out;
 }

 .team-member-item:hover .team-image figure img {
     transform: scale(1.1);
 }

 .team-readmore-btn {
     position: absolute;
     top: 30px;
     right: 30px;
     z-index: 1;
 }

 .team-readmore-btn a {
     width: 60px;
     height: 60px;
     background-color: var(--accent-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.4s ease-in-out;
 }

 .team-readmore-btn a:hover {
     background-color: var(--primary-color);
 }

 .team-readmore-btn img {
     max-width: 20px;
     transform: rotate(-45deg);
     transition: all 0.4s ease-in-out;
 }

 .team-readmore-btn a:hover img {
     transform: rotate(0deg);
 }

 .team-body {
     padding: 0 30px 30px;
     position: relative;
 }

 .team-content {
     text-align: center;
     margin-bottom: 25px;
     position: relative;
 }

 .team-content h3 {
     font-size: 22px;
     font-weight: 700;
     text-transform: capitalize;
     margin-bottom: 8px;
     color: #233F88;
     transition: all 0.3s ease;
     position: relative;
 }

 .team-content h3::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, #233F88, #4A90E2);
     transition: width 0.3s ease;
 }

 .team-member-item:hover .team-content h3::after {
     width: 60px;
 }

 .team-content p {
     font-weight: 600;
     text-transform: uppercase;
     font-size: 14px;
     letter-spacing: 1px;
     color: #666;
     margin: 0;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     padding: 8px 16px;
     border-radius: 20px;
     display: inline-block;
     transition: all 0.3s ease;
 }

 .team-social-list {
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.4s ease;
 }

 .team-member-item:hover .team-social-list {
     opacity: 1;
     transform: translateY(0);
 }

 .team-social-icon ul {
     list-style: none;
     margin: 0;
     padding: 0;
     text-align: center;
     display: flex;
     justify-content: center;
     gap: 12px;
 }

 .team-social-icon ul li {
     display: inline-flex;
     margin: 0;
 }

 .team-social-icon ul li a {
     width: 45px;
     height: 45px;
     background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(35, 63, 136, 0.3);
 }

 .team-social-icon ul li a::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.5s ease;
 }

 .team-social-icon ul li a:hover::before {
     left: 100%;
 }

 .team-social-icon ul li a:hover {
     transform: translateY(-3px) scale(1.1);
     box-shadow: 0 8px 25px rgba(35, 63, 136, 0.4);
 }

 .team-social-icon ul li:nth-child(1) a {
     background: linear-gradient(135deg, #E4405F 0%, #F77737 100%);
     box-shadow: 0 4px 15px rgba(228, 64, 95, 0.3);
 }

 .team-social-icon ul li:nth-child(2) a {
     background: linear-gradient(135deg, #1DA1F2 0%, #0084B4 100%);
     box-shadow: 0 4px 15px rgba(29, 161, 242, 0.3);
 }

 .team-social-icon ul li:nth-child(3) a {
     background: linear-gradient(135deg, #4267B2 0%, #898CDF 100%);
     box-shadow: 0 4px 15px rgba(66, 103, 178, 0.3);
 }

 .team-social-icon ul li a i {
     color: inherit;
     font-size: 18px;
     transition: transform 0.3s ease;
 }

 .team-social-icon ul li a:hover i {
     transform: scale(1.2) rotate(10deg);
 }

 .our-faqs {
     padding: 100px 0;
 }

 .our-faqs-content {
     margin-right: 70px;
 }

 .faq-accordion .accordion-item {
     border-bottom: 1px solid var(--divider-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
 }

 .faq-accordion .accordion-item:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
     border-bottom: none;
 }

 .faq-accordion .accordion-header .accordion-button {
     font-size: 20px;
     font-weight: 600;
     line-height: 1.2em;
     color: var(--primary-color);
     align-items: start;
     padding-right: 35px;
     transition: all 0.3s ease-in-out;
 }

 .faq-accordion .accordion-header .accordion-button span {
     margin-right: 7px;
 }

 .faq-accordion .accordion-button:not(.collapsed) {
     padding-bottom: 15px;
 }

 .faq-accordion .accordion-item .accordion-button::after,
 .faq-accordion .accordion-item .accordion-button.collapsed::after {
     content: '\2b';
     font-family: 'Font Awesome 6 Free';
     position: absolute;
     font-size: 18px;
     font-weight: 900;
     color: var(--primary-color);
     text-align: right;
     top: 0;
     right: 0;
     transition: all 0.3s ease-in-out;
 }

 .faq-accordion .accordion-button:not(.collapsed)::after {
     content: '\f068';
 }

 .faq-accordion .accordion-body {
     padding-right: 35px;
 }

 .faq-accordion .accordion-body p {
     margin: 0;
 }

 .our-faqs-image {
     text-align: right;
 }

 .our-faqs-image figure {
     display: block;
 }

 .our-faqs-image img {
     width: 100%;
     aspect-ratio: 1 / 1.26;
     object-fit: cover;
 }

 .our-clients {
     background-color: var(--secondery-color);
     padding: 100px 0;
 }

 .our-clients .our-clients-box {
     max-width: 1100px;
     margin: 0 auto;
     text-align: center;
 }

 .our-client-slider .client-logo {
     text-align: center;
 }

 .our-client-slider .client-logo img {
     width: 100%;
     max-height: 40px;
 }

 /************************************/
 /***     16. Services Page css 	  ***/
 /************************************/

 .page-services {
     padding: 100px 0 70px;
 }

 /************************************/
 /***    17. Service Single css 	  ***/
 /************************************/

 .page-service-single {
     padding: 100px 0;
 }

 .service-sidebar {
     position: sticky;
     top: 30px;
     margin-right: 30px;
 }

 .service-catagery-list {
     border: 1px solid var(--divider-color);
     padding: 30px;
     margin-bottom: 40px;
     overflow: hidden;
 }

 .service-catagery-list h3 {
     font-size: 20px;
     text-transform: capitalize;
     border-bottom: 1px solid var(--divider-color);
     padding-bottom: 20px;
     margin-bottom: 20px;
 }

 .service-catagery-list ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .service-catagery-list ul li {
     margin-bottom: 20px;
 }

 .service-catagery-list ul li:last-child {
     margin: 0;
 }

 .service-catagery-list ul li a {
     position: relative;
     display: block;
     font-weight: 500;
     text-transform: capitalize;
     color: var(--accent-color);
     padding-right: 25px;
     transition: all 0.3s ease-in-out;
 }

 .service-catagery-list ul li:hover a {
     color: var(--primary-color);
 }

 .service-catagery-list ul li a::before {
     content: '';
     position: absolute;
     top: 50%;
     right: 0;
     width: 18px;
     height: 18px;
     transform: translateY(-50%) rotate(-45deg);
     background-image: url(../images/arrow-accent.svg);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     transition: all 0.3s ease-in-out;
 }

 .service-catagery-list ul li:hover a::before {
     transform: translateY(-50%) rotate(0);
     filter: brightness(0) invert(0);
 }

 .sidebar-cta-image figure {
     display: block;
 }

 .sidebar-cta-image img {
     width: 100%;
     aspect-ratio: 1 / 0.57;
     object-fit: cover;
 }

 .sidebar-cta-Body {
     border: 1px solid var(--divider-color);
     padding: 30px;
 }

 .sidebar-cta-content {
     margin-bottom: 25px;
 }

 .sidebar-cta-content h3 {
     font-size: 20px;
     text-transform: capitalize;
     margin-bottom: 10px;
 }

 .sidebar-cta-content p {
     font-weight: 500;
     margin-bottom: 0;
 }

 .sidebar-cta-contact-item {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .sidebar-cta-contact-item:last-child {
     margin-bottom: 0;
 }

 .sidebar-cta-contact-item .icon-box {
     position: relative;
     height: 58px;
     width: 58px;
     background-color: var(--divider-color);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 20px;
     transition: all 0.4s ease-in-out;
 }

 .sidebar-cta-contact-item:hover {
     background-color: transparent;
 }

 .sidebar-cta-contact-item .icon-box::before {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: var(--primary-color);
     border-radius: 50%;
     height: 100%;
     width: 100%;
     transform: scale(0);
     transition: all 0.3s ease-in-out;
 }

 .sidebar-cta-contact-item:hover .icon-box::before {
     transform: scale(1);
 }

 .sidebar-cta-contact-item .icon-box img {
     position: relative;
     max-width: 24px;
     transition: all 0.3s ease-in-out;
     z-index: 1;
 }

 .sidebar-cta-contact-item:hover .icon-box img {
     filter: brightness(0) invert(1);
 }

 .cta-contact-item-content {
     width: calc(100% - 78px);
 }

 .cta-contact-item-content p {
     font-weight: 500;
     margin: 0;
 }

 .service-feature-image {
     margin-bottom: 40px;
 }

 .service-feature-image figure {
     display: block;
 }

 .service-feature-image img {
     width: 100%;
     aspect-ratio: 1 / 0.55;
     object-fit: cover;
 }

 .service-entry {
     margin-bottom: 60px;
 }

 .service-entry h2 {
     font-size: 46px;
     margin-bottom: 20px;
 }

 .service-entry h2 span {
     color: var(--accent-color);
 }

 .service-entry p {
     margin-bottom: 20px;
 }

 .service-entry p:last-child {
     margin-bottom: 0;
 }

 .service-entry ul {
     list-style: none;
     margin-bottom: 20px;
     padding: 0;
 }

 .service-entry ul li {
     position: relative;
     font-weight: 500;
     color: var(--text-color);
     text-transform: capitalize;
     padding-left: 30px;
     margin-bottom: 15px;
 }

 .service-entry ul li:last-child {
     margin-bottom: 0;
 }

 .service-entry ul li::before {
     content: '\f058';
     position: absolute;
     font-family: 'FontAwesome';
     font-size: 20px;
     font-weight: 900;
     line-height: normal;
     color: var(--accent-color);
     display: inline-block;
     top: 2px;
     left: 0;
 }

 .service-entry-list-image {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 30px;
 }

 .service-entry-image,
 .service-entry-list {
     width: calc(50% - 15px);
 }

 .service-entry-image figure {
     display: block;
 }

 .service-entry-image img {
     width: 100%;
     aspect-ratio: 1 / 0.615;
     object-fit: cover;
 }

 .service-entry-list ul {
     margin-bottom: 0;
 }

 .why-choose-content.service-single-why-choose {
     margin-bottom: 60px;
 }

 /************************************/
 /***     18. Blog Archive css 	  ***/
 /************************************/

 .page-blog {
     padding: 100px 0;
 }

 .page-pagination {
     margin-top: 20px;
     text-align: center;
 }

 .page-pagination ul {
     justify-content: center;
     padding: 0;
     margin: 0;
 }

 .page-pagination ul li a,
 .page-pagination ul li span {
     display: flex;
     text-decoration: none;
     justify-content: center;
     align-items: center;
     background: var(--accent-color);
     color: var(--white-color);
     width: 40px;
     height: 40px;
     margin: 0 5px;
     font-weight: 700;
     line-height: 1em;
     transition: all 0.3s ease-in-out;
 }

 .page-pagination ul li.active a,
 .page-pagination ul li a:hover {
     background: var(--primary-color);
     color: var(--white-color);
 }

 /************************************/
 /***     19. Blog Single css 	  ***/
 /************************************/

 .page-single-post {
     padding: 100px 0;
 }

 .post-image {
     position: relative;
     margin-bottom: 30px;
 }

 .post-image figure {
     display: block;
 }

 .post-image figure,
 .post-image img {
     aspect-ratio: 1 / 0.50;
     object-fit: cover;
 }

 .post-content {
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
 }

 .post-entry {
     border-bottom: 1px solid var(--divider-color);
     padding-bottom: 30px;
     margin-bottom: 30px;
 }

 .post-entry:after {
     content: '';
     display: block;
     clear: both;
 }

 .post-entry a {
     color: var(--accent-color);
 }

 .post-entry h1,
 .post-entry h2,
 .post-entry h3,
 .post-entry h4,
 .post-entry h5,
 .post-entry h6 {
     font-weight: 700;
     line-height: 1.2em;
     margin: 0 0 0.6em;
 }

 .post-entry h1 {
     font-size: 80px;
     letter-spacing: -0.02em;
 }

 .post-entry h2 {
     font-size: 46px;
     letter-spacing: -0.02em;
 }

 .post-entry h3 {
     font-size: 46px;
 }

 .post-entry h4 {
     font-size: 30px;
 }

 .post-entry h5 {
     font-size: 24px;
 }

 .post-entry h6 {
     font-size: 18px;
 }

 .post-entry p {
     margin-bottom: 20px;
 }

 .post-entry p:last-child {
     margin-bottom: 0;
 }

 .post-entry p strong {
     color: var(--primary-color);
     font-size: 18px;
     font-weight: 600;
 }

 .post-entry ol {
     margin: 0 0 30px;
 }

 .post-entry ol li {
     margin-bottom: 20px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
 }

 .post-entry ul {
     padding: 0;
     margin: 20px 0 20px;
     padding-left: 20px;
 }

 .post-entry ul li {
     font-size: 18px;
     font-weight: 500;
     color: var(--text-color);
     position: relative;
     margin-bottom: 15px;
 }

 .post-entry ul li:last-child {
     margin-bottom: 0;
 }

 .post-entry ul ul,
 .post-entry ul ol,
 .post-entry ol ol,
 .post-entry ol ul {
     margin-top: 20px;
     margin-bottom: 0;
 }

 .post-entry ul ul li:last-child,
 .post-entry ul ol li:last-child,
 .post-entry ol ol li:last-child,
 .post-entry ol ul li:last-child {
     margin-bottom: 0;
 }

 .post-entry blockquote {
     background: url(../images/icon-blockquote.svg), var(--accent-color);
     background-repeat: no-repeat;
     background-position: 35px 30px;
     background-size: 58px;
     border-radius: 0;
     padding: 30px 30px 30px 100px;
     margin-bottom: 30px;
 }

 .post-entry blockquote p {
     font-size: 20px;
     font-weight: 600;
     line-height: 1.4em;
     color: var(--white-color);
 }

 .post-entry blockquote p:last-child {
     margin-bottom: 0;
 }

 .tag-links {
     font-size: 20px;
     font-weight: 700;
     color: var(--primary-color);
     display: inline-flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
 }

 .post-tags .tag-links a {
     display: inline-block;
     font-size: 16px;
     font-weight: 600;
     text-transform: capitalize;
     background: var(--accent-color);
     color: var(--white-color);
     border-radius: 0;
     padding: 6px 20px;
     transition: all 0.3s ease-in-out;
 }

 .post-tags .tag-links a:hover {
     background: var(--primary-color);
 }

 .post-social-sharing {
     text-align: right;
 }

 .post-social-sharing ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .post-social-sharing ul li {
     display: inline-block;
     margin-right: 10px;
 }

 .post-social-sharing ul li:last-child {
     margin-right: 0;
 }

 .post-social-sharing ul li a {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     background: var(--accent-color);
     color: var(--white-color);
     border-radius: 0;
     width: 36px;
     height: 36px;
     transition: all 0.3s ease-in-out;
 }

 .post-social-sharing ul li:hover a {
     background: var(--primary-color);
 }

 .post-social-sharing ul li a i {
     font-size: 18px;
     color: inherit;
 }

 /************************************/
 /***     20. Project Page css 	  ***/
 /************************************/

 .page-project {
     padding: 100px 0 70px;
 }

 /************************************/
 /***    21. Project Single css 	  ***/
 /************************************/

 .page-project-single {
     padding: 100px 0;
 }

 .project-single-sidebar {
     position: sticky;
     top: 30px;
     margin-right: 30px;
 }

 .project-detail-list {
     border: 1px solid var(--divider-color);
     padding: 30px;
     margin-bottom: 60px;
 }

 .project-detail-item {
     display: flex;
     align-items: center;
     margin-bottom: 30px;
 }

 .project-detail-item:last-child {
     margin-bottom: 0;
 }

 .project-detail-item .icon-box {
     position: relative;
     background-color: var(--divider-color);
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 20px;
     transition: all 0.3s ease-in-out;
 }

 .project-detail-item .icon-box::before {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: var(--accent-color);
     border-radius: 50%;
     height: 100%;
     width: 100%;
     transform: scale(0);
     transition: all 0.3s ease-in-out;
 }

 .project-detail-item:hover .icon-box::before {
     transform: scale(1);
 }

 .project-detail-item .icon-box i {
     font-size: 22px;
     color: var(--accent-color);
     transition: all 0.3s ease-in-out;
     z-index: 1;
 }

 .project-detail-item:hover .icon-box i {
     color: var(--white-color);
 }

 .project-detail-content {
     width: calc(100% - 70px);
 }

 .project-detail-content h3 {
     font-size: 16px;
     font-weight: 500;
     text-transform: capitalize;
     margin-bottom: 5px;
 }

 .project-detail-content p {
     color: var(--accent-color);
     text-transform: capitalize;
     margin-bottom: 0;
 }

 .project-single-image {
     margin-bottom: 40px;
 }

 .project-single-image figure {
     display: block;
 }

 .project-single-image img {
     width: 100%;
     aspect-ratio: 1 / 0.6;
     object-fit: cover;
 }

 .project-info,
 .project-design-info {
     margin-bottom: 60px;
 }

 .project-entry h2 {
     font-size: 46px;
     font-weight: 700;
     letter-spacing: -0.02em;
     margin-bottom: 30px;
 }

 .project-entry p {
     margin-bottom: 20px;
 }

 .project-entry p:last-child {
     margin-bottom: 0;
 }

 .project-entry ul {
     list-style: none;
     margin-bottom: 20px;
     padding: 0;
 }

 .project-entry ul li {
     position: relative;
     font-weight: 500;
     color: var(--text-color);
     padding-left: 30px;
     margin-bottom: 15px;
 }

 .project-entry ul li:last-child {
     margin-bottom: 0;
 }

 .project-entry ul li::before {
     content: '\f058';
     position: absolute;
     font-family: 'FontAwesome';
     font-size: 20px;
     font-weight: 900;
     line-height: normal;
     color: var(--accent-color);
     display: inline-block;
     top: 2px;
     left: 0;
 }

 .project-gallery-images {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
 }

 .project-gallery-img {
     width: calc(25% - 22.5px);
 }

 .project-gallery-img a,
 .project-gallery-img figure {
     display: block;
 }

 .project-gallery-img figure img {
     width: 100%;
     aspect-ratio: 1 / 0.99;
     object-fit: cover;
 }

 /************************************/
 /***    22. Image Gallery css 	  ***/
 /************************************/

 .page-gallery {
     padding: 100px 0 70px;
 }

 .page-gallery-box .photo-gallery {
     height: calc(100% - 30px);
     margin-bottom: 30px;
 }



 .page-gallery-box .photo-gallery figure {
     display: block;
 }

 .page-gallery-box .photo-gallery img {
     width: 100%;
     aspect-ratio: 1 / 0.85;
     object-fit: cover;
 }

 /************************************/
 /***    	23. FAQs Page css 	  ***/
 /************************************/

 .page-faqs {
     padding: 100px 0;
 }

 .faq-sidebar {
     position: sticky;
     top: 30px;
     margin-right: 30px;
 }

 .faq-catagery-list {
     border: 1px solid var(--divider-color);
     padding: 30px;
     margin-bottom: 60px;
 }

 .faq-catagery-list ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .faq-catagery-list ul li {
     margin-bottom: 20px;
     transition: all 0.3s ease-in-out;
 }

 .faq-catagery-list ul li:last-child {
     margin-bottom: 0;
 }

 .faq-catagery-list ul li a {
     position: relative;
     display: block;
     font-weight: 500;
     text-transform: capitalize;
     color: var(--accent-color);
     padding-right: 25px;
     transition: all 0.3s ease-in-out;
 }

 .faq-catagery-list ul li:hover a {
     color: var(--primary-color);
 }

 .faq-catagery-list ul li a::before {
     content: '';
     position: absolute;
     top: 50%;
     right: 0;
     width: 18px;
     height: 18px;
     transform: translateY(-50%) rotate(-45deg);
     background-image: url(../images/arrow-accent.svg);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     transition: all 0.3s ease-in-out;
 }

 .faq-catagery-list ul li:hover a::before {
     transform: translateY(-50%) rotate(0);
     filter: brightness(0) invert(0);
 }

 .our-faq-section.page-faq-accordion {
     margin-bottom: 60px;
 }

 .our-faq-section.page-faq-accordion:last-child {
     margin-bottom: 0;
 }

 /************************************/
 /***   24. Contact Us Page css 	  ***/
 /************************************/

 .page-contact-us {
     padding: 100px 0 50px;
 }

 .contact-us-image {
     height: 100%;
 }

 .contact-us-image figure {
     height: 100%;
     display: block;
 }

 .contact-us-image img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     aspect-ratio: 1 / 0.962;
 }

 .contact-us-form {
     margin-left: 30px;
 }

 .contact-form .form-control {
     font-size: 16px;
     font-weight: 500;
     line-height: 1.2em;
     background-color: var(--white-color);
     color: var(--text-color);
     border: 1px solid var(--divider-color);
     border-radius: 0;
     outline: none;
     box-shadow: none;
     padding: 14px 15px;
 }

 .contact-form .form-control::placeholder {
     font-weight: 400;
 }

 .google-map {
     padding: 50px 0 100px;
 }

 .google-map .section-title {
     width: 100%;
     max-width: 560px;
     margin: 0 auto 30px;
     text-align: center;
 }

 .google-map-iframe,
 .google-map-iframe iframe {
     width: 100%;
     height: 500px;
 }

 .contact-info-box {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     margin-top: 60px;
 }

 .contact-info-item {
     width: calc(33.33% - 20px);
     display: flex;
 }

 .contact-info-item .icon-box {
     position: relative;
     height: 60px;
     width: 60px;
     background-color: var(--divider-color);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 20px;
 }

 .contact-info-item .icon-box:before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     background: var(--primary-color);
     border-radius: 50%;
     width: 100%;
     height: 100%;
     transform: scale(0);
     transition: all 0.4s ease-in-out;
     z-index: 0;
 }

 .contact-info-item:hover .icon-box:before {
     transform: scale(1);
 }

 .contact-info-item .icon-box i {
     position: relative;
     font-size: 20px;
     color: var(--accent-color);
     transition: all 0.3s ease-in-out;
     z-index: 1;
 }

 .contact-info-item:hover .icon-box i {
     color: var(--white-color);
 }

 .contact-info-content {
     width: calc(100% - 80px);
 }

 .contact-info-content h3 {
     font-size: 20px;
     text-transform: capitalize;
     margin-bottom: 10px;
 }

 .contact-info-content p {
     margin-bottom: 0;
 }

 /************************************/
 /***    25. 404 Error Page css 	  ***/
 /************************************/

 .error-page {
     background-image: url(../images/error-page-bg.svg);
     background-repeat: no-repeat;
     background-position: top -100px center;
     background-size: auto;
     padding: 100px 0;
 }

 .error-page-image {
     text-align: center;
     margin-bottom: 30px;
 }

 .error-page-image img {
     width: 100%;
     max-width: 50%;
 }

 .error-page-content {
     width: 100%;
     max-width: 500px;
     margin: 0 auto;
     text-align: center;
 }

 .error-page-content .section-title {
     margin-bottom: 20px;
 }

 .error-page-content-body p {
     font-weight: 500;
     margin-bottom: 20px;
 }

 /************************************/
 /***      26. Responsive css      ***/
 /************************************/

 @media only screen and (max-width: 1366px) {

     .our-testimonial-content {
         padding: 100px 50px;
     }
 }

 @media only screen and (max-width: 1024px) {

     .main-menu ul li {
         margin: 0;
     }

     .our-testimonial-content {
         padding: 50px 20px;
     }
 }

 @media only screen and (max-width: 991px) {

     .navbar {
         padding: 5px 0;
     }

     header.main-header.transparent-header .navbar-brand {
         background: none !important;
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
         padding-left: 0;
         margin-left: -5px;
     }

     /* Adjust scroll padding for mobile */
     html,
     body {
         scroll-padding-top: 80px;
     }

     section[id] {
         scroll-margin-top: 100px;
     }

     /* Mobile navigation styles */
     .main-menu ul li a::after {
         display: none;
         /* Hide underline on mobile for cleaner look */
     }

     .main-menu ul ul li a::after {
         display: none;
         /* Hide dropdown underline on mobile */
     }

     .slicknav_nav li,
     .slicknav_nav ul {
         display: block;
     }

     .responsive-menu,
     .navbar-toggle {
         display: block;
     }

     /* ── Mobile Mega-Menu Overrides ── */
     .slicknav_nav .submenu-mega-wrapper {
         /* Reset desktop positioning */
         visibility: visible !important;
         opacity: 1 !important;
         position: static !important;
         transform: none !important;
         width: 100% !important;
         min-width: auto !important;
         margin-top: 0 !important;
         border-radius: 0 !important;
         box-shadow: none !important;
         border: none !important;
         padding: 8px 0px 8px 10px !important;
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
         background: transparent !important;

         /* Hidden by default, shown by JS toggle */
         display: none;
     }

     /* When parent is toggled open by JS */
     .slicknav_nav .nav-item.has-submenu.submenu-open .submenu-mega-wrapper {
         display: block !important;
     }

     /* Hide animated top accent line on mobile */
     .slicknav_nav .submenu-mega-wrapper::after {
         display: none !important;
     }

     /* Mobile card grid — single column */
     .slicknav_nav .submenu-grid {
         display: grid !important;
         grid-template-columns: 1fr !important;
         gap: 6px !important;
     }

     /* Mobile submenu cards */
     .slicknav_nav .submenu-card {
         background: rgba(0, 0, 0, 0.03) !important;
         border: 1px solid rgba(0, 0, 0, 0.05) !important;
         border-radius: 8px !important;
         padding: 10px 12px !important;
         display: flex !important;
         align-items: center !important;
         flex-direction: row !important;
         text-decoration: none !important;
     }

     .slicknav_nav .submenu-card .card-content h4 {
         color: #1a2332 !important;
         font-size: 13px !important;
         margin-bottom: 0 !important;
     }

     .slicknav_nav .submenu-card .card-content p {
         display: none !important;
     }

     .slicknav_nav .submenu-card .card-icon {
         background: rgba(66, 132, 214, 0.1) !important;
         color: var(--accent-color) !important;
         width: 32px !important;
         height: 32px !important;
         min-width: 32px !important;
         font-size: 14px !important;
         border-radius: 6px !important;
         margin-right: 12px !important;
     }

     /* View All card on mobile */
     .slicknav_nav .submenu-card.view-all-card {
         grid-column: span 1 !important;
         background: rgba(66, 132, 214, 0.15) !important;
         border-color: rgba(66, 132, 214, 0.25) !important;
     }

     .slicknav_nav .submenu-card.view-all-card .card-content h4 {
         color: #87CEEB !important;
     }

     .header-btn {
         display: none;
     }

     .btn-default {
         padding: 14px 42px 14px 16px;
     }

     .section-row {
         margin-bottom: 40px;
     }

     .section-row .section-title {
         margin-bottom: 0;
         margin-right: 0px;
     }

     .section-title-content {
         margin-left: 0;
         margin-top: 15px;
     }

     .section-btn {
         text-align: left;
         margin-top: 15px;
     }

     .section-title {
         margin-bottom: 30px;
     }

     .section-title h3 {
         margin-bottom: 10px;
     }

     .section-title h1 {
         font-size: 42px;
     }

     .hero-content .section-title h1 {
         font-size: 32px;
         margin-bottom: 0;
     }

     .hero-content .section-title h3 {
         margin-bottom: 8px;
     }

     .hero-content .section-title p {
         margin-top: 12px;
     }

     .section-title h2 {
         font-size: 30px;
     }

     .section-title p {
         margin-top: 15px;
     }

     .hero {
         min-height: auto;
         padding: 180px 0 140px;
         margin-top: 0;
     }

     .hero.hero-slider-layout .hero-slide {
         padding: 0;
         height: 100vh;
         height: 100dvh;
         min-height: 100vh;
         min-height: 100dvh;
         display: flex;
         align-items: center;
     }

     .hero.hero-slider-layout .row.align-items-center {
         min-height: 100vh;
         min-height: 100dvh;
         height: 100vh;
         height: 100dvh;
         align-items: flex-end !important;
         padding-bottom: 60px;
     }

     .hero.hero-slider-layout .hero-pagination {
         bottom: 15px;
         left: 50%;
         transform: translateX(-50%);
         text-align: center;
     }

     .hero-slider-toggle {
         bottom: 56px;
         left: 50%;
         min-height: 36px;
         padding: 0 14px;
         font-size: 12px;
     }

     .hero-scroll-arrow {
         bottom: 15px;
         right: 15px;
     }

     .hero-scroll-arrow a {
         width: 20px;
         height: 20px;
     }

     .hero-scroll-arrow a::before {
         width: 20px;
         height: 4px;
     }

     .hero-content .section-title p {
         font-size: 16px;
     }

     .about-us {
         padding: 50px 0;
     }

     .about-us-images {
         margin: 0 0 30px 0;
     }

     .experience-counter {
         height: 137px;
         width: 137px;
     }

     .experience-counter h3 {
         font-size: 28px;
     }

     .about-us-content-list {
         margin-bottom: 30px;
     }

     .about-contact-item {
         margin-bottom: 30px;
     }

     .why-choose-us {
         padding: 50px 0;
     }

     .why-choose-content {
         margin-bottom: 30px;
     }

     .why-choose-item .icon-box {
         margin-right: 10px;
     }

     .why-choose-item-content {
         width: calc(100% - 70px);
     }

     .why-choose-images {
         margin-left: 0;
     }

     .our-services {
         padding: 50px 0;
     }

     .service-image img {
         aspect-ratio: 1 / 1.2;
     }

     .service-btn {
         top: 20px;
         right: 20px;
     }

     .service-btn a {
         height: 50px;
         width: 50px;
     }

     .service-content {
         bottom: 20px;
         left: 20px;
         right: 20px;
     }

     .all-services-btn {
         margin-top: 10px;
     }

     .video-play-button a {
         width: 80px;
         height: 80px;
     }

     .our-project {
         padding: 50px 0 20px;
     }

     .our-Project-nav {
         margin-bottom: 50px;
     }

     .project-featured-image img {
         aspect-ratio: 1 / 0.89;
     }

     .project-btn a {
         width: 80px;
         height: 80px;
     }

     .project-content {
         left: 20px;
         bottom: 20px;
         right: 20px;
     }

     .how-we-work {
         padding: 50px 0;
     }

     .how-we-work-item {
         width: calc(50% - 15px);
     }

     .how-we-work-item:nth-child(5),
     .how-we-work-item:nth-child(6),
     .how-we-work-item:nth-child(7),
     .how-we-work-item:nth-child(8) {
         width: calc(50% - 15px);
     }

     .how-we-work-item .icon-box {
         margin-bottom: 20px;
     }

     .how-we-work-list .how-we-work-item .icon-box {
         width: 220px;
         height: 220px;
     }

     /* Responsive content for tablets */
     .how-we-work-list .how-we-work-item .icon-box .certificate-icon,
     .how-we-work-content {
         width: 180px;
         height: 180px;
     }

     .how-we-work-content {
         padding: 22px;
     }

     .how-we-work-content h3 {
         font-size: 14px;
         margin-bottom: 8px;
     }

     .how-we-work-content p {
         font-size: 11px;
     }

     .how-work-company-slider {
         margin-top: 40px;
         padding-top: 40px;
     }

     .our-skill {
         padding: 50px 0;
     }

     .our-skill-content {
         margin-bottom: 30px;
     }

     .skills-progress-bar {
         margin-bottom: 30px;
     }

     .our-skill-image {
         max-width: 555px;
         margin: 0 auto;
     }

     .our-testimonials-image {
         height: auto;
     }

     .our-testimonials-image figure,
     .our-testimonials-image figure img {
         height: auto;
         aspect-ratio: 1 / 0.65;
     }

     .our-testimonial-content {
         padding: 50px 15px;
     }

     .our-testimonial-content .section-title {
         background-size: contain;
     }

     .testimonial-slider {
         max-width: 100%;
         margin-bottom: 30px;
         padding-bottom: 30px;
     }

     .testimonial-rating {
         margin-bottom: 15px;
     }

     .testimonial-content {
         margin-bottom: 30px;
     }

     .testimonial-content p {
         font-size: 18px;
     }

     .testimonial-rating-counter .rating-counter h2 {
         font-size: 48px;
     }

     .our-blog {
         padding: 50px 0;
     }

     .our-blog .section-title {
         margin-right: 0;
     }

     .post-featured-image img {
         aspect-ratio: 1 / 0.75;
     }

     .our-blog-footer {
         margin-top: 10px;
     }

     .main-footer {
         padding: 40px 0 0;
     }

     .main-footer .footer-header {
         margin-bottom: 30px;
         padding-bottom: 30px;
     }

     .footer-links {
         padding-right: 0;
         margin-bottom: 30px;
     }

     .footer-newsletter-form p {
         margin-bottom: 20px;
     }

     .footer-copyright {
         margin-top: 0px;
         padding: 20px 0;
     }

     .page-header {
         padding: 180px 0 100px;
         margin-top: -92px;
     }

     .page-header-box h1 {
         font-size: 50px;
     }

     .page-header-box ol li.breadcrumb-item {
         font-size: 18px;
     }

     .page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
         font-size: 16px;
     }

     .about-facility-list {
         margin-top: 50px;
         gap: 20px;
     }

     .about-facility-item {
         width: calc(33.33% - 13.33px);
     }

     .about-facility-item .icon-box {
         height: 45px;
         width: 45px;
         margin-right: 10px;
     }

     .about-facility-item .icon-box img {
         max-width: 20px;
     }

     .about-facility-content {
         width: calc(100% - 55px);
     }

     .about-facility-content h3 {
         font-size: 18px;
     }

     .vision-mission {
         padding: 50px 0 25px;
     }

     .vision-mission-box {
         padding: 30px 15px;
         gap: 30px 40px;
     }

     .vision-mission-item {
         width: calc(50% - 20px);
     }

     .vision-mission-item::before {
         right: -20px;
     }

     .vision-mission-item .icon-box {
         width: 70px;
         height: 70px;
     }

     .vision-mission-item .icon-box img {
         max-width: 30px;
     }

     .vision-mission-content h3 {
         margin-bottom: 15px;
     }

     .best-selling {
         padding: 25px 0 50px;
     }

     .best-selling-content {
         margin-bottom: 20px;
     }

     .best-selling-content-img {
         margin-bottom: 20px;
     }

     .our-team {
         padding: 50px 0 20px;
     }

     .team-member-item {
         margin-bottom: 30px;
         border-radius: 15px;
     }

     .team-image .team-icon-box {
         width: 100px;
         height: 100px;
     }

     .team-image .team-icon-box i {
         font-size: 40px !important;
     }

     .team-content h3 {
         font-size: 20px;
     }

     .team-content p {
         font-size: 13px;
     }

     .team-readmore-btn {
         top: 20px;
         right: 20px;
     }

     .team-readmore-btn a {
         width: 50px;
         height: 50px;
     }

     .team-content {
         margin-bottom: 15px;
     }

     .our-faqs {
         padding: 50px 0;
     }

     .our-faqs-content {
         margin-right: 0;
         margin-bottom: 30px;
     }

     .faq-accordion .accordion-item {
         margin-bottom: 20px;
     }

     .our-faqs-image {
         text-align: center;
         margin-left: 0px;
     }

     .our-faqs-image img {
         aspect-ratio: 1 / 0.8;
     }

     .our-clients {
         padding: 50px 0;
     }

     .our-clients .our-clients-box {
         max-width: 100%;
     }

     .page-services {
         padding: 50px 0 20px;
     }

     .page-service-single {
         padding: 50px 0;
     }

     .service-sidebar {
         position: initial;
         margin-right: 0;
         margin-bottom: 30px;
     }

     .service-catagery-list {
         padding: 20px;
         margin-bottom: 30px;
     }

     .service-catagery-list h3 {
         padding-bottom: 15px;
         margin-bottom: 15px;
     }

     .service-catagery-list ul li {
         margin-bottom: 10px;
     }

     .service-catagery-list ul li a::before {
         width: 16px;
         height: 16px;
     }

     .sidebar-cta-Body {
         padding: 20px;
     }

     .sidebar-cta-content {
         margin-bottom: 15px;
     }

     .sidebar-cta-contact-item {
         margin-bottom: 15px;
     }

     .service-feature-image {
         margin-bottom: 30px;
     }

     .service-entry {
         margin-bottom: 30px;
     }

     .service-entry ul li {
         font-size: 14px;
         padding-left: 25px;
         margin-bottom: 10px;
     }

     .service-entry ul li::before {
         font-size: 18px;
     }

     .why-choose-content.service-single-why-choose {
         margin-bottom: 30px;
     }

     .page-blog {
         padding: 50px 0;
     }

     .page-pagination {
         margin-top: 10px;
     }

     .page-single-post {
         padding: 50px 0;
     }

     .post-image {
         margin-bottom: 20px;
     }

     .post-entry blockquote {
         background-position: 25px 25px;
         background-size: 50px;
         padding: 25px 25px 25px 90px;
         margin-bottom: 20px;
     }

     .post-entry blockquote p {
         font-size: 18px;
     }

     .post-entry h2 {
         font-size: 38px;
     }

     .post-entry ul li {
         font-size: 16px;
     }

     .post-tags {
         margin-bottom: 20px;
     }

     .post-social-sharing ul {
         text-align: left;
     }

     .post-tags .tag-links a {
         padding: 6px 15px;
     }

     .page-project {
         padding: 50px 0 20px;
     }

     .page-project-single {
         padding: 50px 0;
     }

     .project-single-sidebar {
         position: initial;
         margin-right: 0px;
         margin-bottom: 30px
     }

     .project-detail-list {
         padding: 20px;
         margin-bottom: 30px;
     }

     .project-single-image {
         margin-bottom: 30px;
     }

     .project-info,
     .project-design-info {
         margin-bottom: 30px;
     }

     .project-entry h2 {
         font-size: 36px;
         margin-bottom: 20px;
     }

     .page-gallery {
         padding: 50px 0 20px;
     }

     .page-gallery-box .photo-gallery img {
         aspect-ratio: 1 / 0.85;
     }

     .page-faqs {
         padding: 50px 0;
     }

     .faq-sidebar {
         position: initial;
         margin-right: 0;
         margin-bottom: 30px;
     }

     .faq-catagery-list {
         padding: 20px;
         margin-bottom: 30px;
     }

     .faq-catagery-list ul li {
         margin-bottom: 15px;
     }

     .faq-catagery-list ul li a::before {
         width: 16px;
         height: 16px;
     }

     .our-faq-section.page-faq-accordion {
         margin-bottom: 40px;
     }

     .page-contact-us {
         padding: 50px 0 25px;
     }

     .contact-us-image {
         height: auto;
         margin-bottom: 30px;
     }

     .contact-us-image img {
         aspect-ratio: 1 / 0.6;
     }

     .contact-us-form {
         margin-left: 0;
     }

     .contact-form .form-control {
         padding: 12px 15px;
     }

     .google-map {
         padding: 25px 0 50px;
     }

     .google-map-iframe,
     .google-map-iframe iframe {
         height: 400px;
     }

     .contact-info-box {
         gap: 20px;
         margin-top: 40px;
     }

     .contact-info-item {
         width: calc(33.33% - 13.33px);
     }

     .contact-info-item .icon-box {
         height: 50px;
         width: 50px;
         margin-right: 10px;
     }

     .contact-info-item .icon-box i {
         font-size: 16px;
     }

     .contact-info-content {
         width: calc(100% - 60px);
     }

     .contact-info-content h3 {
         font-size: 18px;
     }

     .error-page {
         padding: 50px 0;
     }

     .error-page-image img {
         max-width: 80%;
     }
 }

 @media only screen and (max-width: 767px) {

     .section-row {
         margin-bottom: 30px;
     }

     /* Adjust scroll padding for smaller screens */
     html,
     body {
         scroll-padding-top: 70px;
     }

     section[id] {
         scroll-margin-top: 90px;
     }

     .section-title {
         margin-bottom: 30px;
     }

     .section-title h1 {
         font-size: 24px;
     }

     .section-title h2 {
         font-size: 22px;
     }

     .hero-content .section-title p {
         font-size: 15px;
     }

     .hero-content .btn-default {
         margin-right: 40px;
         margin-bottom: 10px;
     }

     .hero-content .btn-default.btn-highlighted {
         margin: 0;
     }

     .about-us-images {
         background-position: left 10px bottom 10px;
         background-size: 20% auto;
         padding: 10px 45px 100px 0;
     }

     .feedback-counter {
         transform: rotate(-180deg) translate(0, 0);
     }

     .feedback-counter p {
         font-size: 12px;
         height: 38px;
         width: 38px;
         margin: 0 0 6px 0;
     }

     .feedback-counter h3 {
         font-size: 12px;
         width: calc(100% - 40px);
     }

     .about-img-2 {
         max-width: 240px;
     }

     .experience-counter {
         height: 102px;
         width: 102px;
     }

     .experience-counter h3 {
         font-size: 22px;
     }

     .experience-counter p {
         font-size: 12px;
         line-height: 1.1em;
     }

     .about-us-content-body {
         gap: 0px;
     }

     .about-us-content-body::before {
         display: none;
     }

     .about-us-content-info {
         width: 100%;
         border-bottom: 1px solid var(--divider-color);
         padding-bottom: 15px;
         margin-bottom: 15px;
     }

     .about-us-content-list {
         margin-bottom: 20px;
     }

     .about-us-contact-list {
         width: 100%;
     }

     .about-us-content-list ul li {
         margin-bottom: 10px;
     }

     .about-us-content-list ul li::before {
         font-size: 18px;
         top: 3px;
     }

     .about-contact-item {
         margin-bottom: 20px;
     }

     .about-contact-content h3 {
         font-size: 18px;
     }

     .why-choose-item-content h3 {
         font-size: 18px;
         margin-bottom: 5px;
     }

     .why-choose-img-2 img {
         aspect-ratio: 1 / 1.02;
     }

     .why-choose-img-4 img {
         aspect-ratio: 1 / 1.588;
     }

     .service-content h3 {
         font-size: 18px;
     }

     .intro-video-image img {
         aspect-ratio: 1 / 0.7;
     }

     .project-btn a {
         width: 60px;
         height: 60px;
     }

     .project-btn img {
         max-width: 20px;
     }

     .project-content h2 {
         font-size: 18px;
     }

     .how-we-work-item {
         width: calc(50% - 10px);
         margin-bottom: 30px;
     }

     .how-we-work-item:nth-child(5),
     .how-we-work-item:nth-child(6),
     .how-we-work-item:nth-child(7),
     .how-we-work-item:nth-child(8) {
         width: calc(50% - 10px);
     }

     .how-we-work-item .icon-box img {
         max-width: 50px;
     }

     .how-we-work-list .how-we-work-item .icon-box {
         width: 180px;
         height: 180px;
     }

     /* Mobile responsive content */
     .how-we-work-list .how-we-work-item .icon-box .certificate-icon,
     .how-we-work-content {
         width: 150px;
         height: 150px;
     }

     .how-we-work-content {
         padding: 18px;
     }

     .how-we-work-content h3 {
         font-size: 12px;
         margin-bottom: 6px;
     }

     .how-we-work-content p {
         font-size: 9px;
         line-height: 1.2;
     }

     .how-work-company-slider {
         margin-top: 30px;
         padding-top: 30px;
     }

     .our-skill-image {
         padding-bottom: 83px;
     }

     .our-skill-img-1 {
         width: 200px;
         padding: 20px 0 0 20px;
     }

     .our-skill-img-2 {
         width: 130px;
         top: 20px;
     }

     .our-skill-img-3 {
         width: 200px;
     }

     .testimonial-rating {
         margin-bottom: 10px;
     }

     .testimonial-rating i {
         font-size: 16px;
     }

     .testimonial-content {
         margin-bottom: 20px;
     }

     .testimonial-content p {
         font-size: 16px;
     }

     .testimonial-body .author-content h3 {
         font-size: 18px;
     }

     .testimonial-rating-counter .rating-counter h2 {
         font-size: 38px;
     }

     .post-featured-image {
         margin-bottom: 15px;
     }

     .post-item-content {
         margin-bottom: 10px;
     }

     .post-item-content h3 {
         font-size: 18px;
     }

     .footer-logo {
         margin-bottom: 20px;
     }

     .footer-social-links {
         justify-content: start;
         gap: 20px;
     }

     .footer-social-link-title h3 {
         font-size: 18px;
     }

     .footer-links h3 {
         margin-bottom: 15px;
     }

     .footer-links ul li {
         margin-bottom: 5px;
     }

     .footer-copyright {
         padding: 15px 0;
     }

     .page-header-box h1 {
         font-size: 28px;
         margin-bottom: 5px;
     }

     .page-header-box ol li.breadcrumb-item {
         font-size: 16px;
     }

     .page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
         font-size: 14px;
     }

     .about-facility-item {
         width: 100%;
     }

     .vision-mission {
         background: linear-gradient(180deg, var(--primary-color) 40%, var(--white-color) 40%);
     }

     .vision-mission-box {
         padding: 20px;
         gap: 40px;
     }

     .vision-mission-item {
         width: 100%;
     }

     .vision-mission-item::before {
         height: 1px;
         width: 100%;
         top: auto;
         right: 0;
         bottom: -20px;
     }

     .vision-mission-item:nth-child(2n + 2)::before {
         display: block;
     }

     .vision-mission-item:last-child::before {
         display: none;
     }

     .vision-mission-content h3 {
         font-size: 18px;
     }

     .team-content h3 {
         font-size: 18px;
         margin-bottom: 5px;
     }

     .faq-accordion .accordion-header .accordion-button {
         font-size: 18px;
         padding-right: 30px;
     }

     .faq-accordion .accordion-item .accordion-button::after,
     .faq-accordion .accordion-item .accordion-button.collapsed::after {
         top: 2px;
     }

     .faq-accordion .accordion-body {
         padding-right: 0;
     }

     .our-faqs-image img {
         aspect-ratio: 1 / 1.26;
     }

     .service-catagery-list h3 {
         font-size: 18px;
     }

     .sidebar-cta-content h3 {
         font-size: 18px;
     }

     .service-entry p {
         margin-bottom: 15px;
     }

     .service-feature-image {
         margin-bottom: 20px;
     }

     .service-feature-image img {
         aspect-ratio: 1 / 0.7;
     }

     .service-entry-list-image {
         gap: 20px;
     }

     .service-entry-image,
     .service-entry-list {
         width: 100%;
     }

     .post-image figure,
     .post-image img {
         aspect-ratio: 1 / 0.70;
     }

     .post-entry blockquote {
         background-position: 20px 20px;
         padding: 70px 20px 20px 20px;
     }

     .post-entry h2 {
         font-size: 26px;
     }

     .project-single-image {
         margin-bottom: 20px;
     }

     .project-single-image img {
         aspect-ratio: 1 / 0.7;
     }

     .project-info,
     .project-design-highlight {
         margin-bottom: 20px;
     }

     .project-entry h2 {
         font-size: 26px;
         margin-bottom: 15px;
     }

     .project-entry p {
         margin-bottom: 15px;
     }

     .project-entry ul li {
         margin-bottom: 10px;
     }

     .project-entry ul li::before {
         font-size: 18px;
         top: 5px;
     }

     .project-gallery-images {
         gap: 20px;
     }

     .project-gallery-img {
         width: calc(50% - 10px);
     }

     .contact-us-image img {
         aspect-ratio: 1 / 0.75;
     }

     .google-map-iframe,
     .google-map-iframe iframe {
         height: 350px;
     }

     .contact-info-item {
         width: 100%;
     }

     .error-page-image img {
         max-width: 100%;
     }
 }

 /* Updated Preloader Styles — Split Curtain Reveal */
 .preloader {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 99999;
     background-color: transparent;
     /* Transparent so curtain panels reveal the site */
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: all;
 }

 /* Split curtain panels */
 .preloader-panel {
     position: absolute;
     top: 0;
     width: 50%;
     height: 100%;
     background-color: #7ec0ee;
     z-index: 1;
     transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
 }

 .preloader-panel--left {
     left: 0;
 }

 .preloader-panel--right {
     right: 0;
 }

 /* When opening: slide panels apart */
 .preloader.is-opening .preloader-panel--left {
     transform: translateX(-100%);
 }

 .preloader.is-opening .preloader-panel--right {
     transform: translateX(100%);
 }

 .preloader-wrapper {
     width: 100vw;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 2;
     /* Above panels */
     position: relative;
     transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Content flies up and fades before curtains split */
 .preloader.is-opening .preloader-wrapper {
     opacity: 0;
     transform: scale(1.1) translateY(-30px);
 }

 /* Final cleanup */
 .preloader.is-done {
     display: none !important;
 }

 /* Logo below hexa loader */
 .preloader-logo {
     margin-top: 40px;
     max-width: 400px;
     width: 100%;
     height: auto;
 }

 @keyframes logoFadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 /* Responsive logo sizing */
 @media (max-width: 768px) {
     .preloader-logo {
         max-width: 280px;
         margin-top: 30px;
     }
 }

 @media (max-width: 480px) {
     .preloader-logo {
         max-width: 200px;
         margin-top: 25px;
     }
 }

 .socket-wrapper {
     position: relative;
     width: 210px;
     height: 224px;
 }

 .socket {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 100px;
     margin-left: -100px;
     top: 100px;
     margin-top: -100px;
 }

 .hex-brick {
     background: var(--accent-color);
     width: 30px;
     height: 17px;
     position: absolute;
     top: 5px;
 }

 .h2 {
     transform: rotate(60deg);
 }

 .h3 {
     transform: rotate(-60deg);
 }

 .gel {
     height: 30px;
     width: 30px;
     position: absolute;
     top: 50%;
     left: 50%;
 }

 .center-gel {
     margin-left: -15px;
     margin-top: -15px;
     -webkit-animation-name: pulse-gel;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: infinite;
 }

 .r1 {
     -webkit-animation-name: pulse-gel;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-delay: .1s;
 }

 .r2 {
     -webkit-animation-name: pulse-gel;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-delay: .3s;
 }

 .r3 {
     -webkit-animation-name: pulse-gel;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-delay: .6s;
 }

 .c1 {
     margin-left: -47px;
     margin-top: -15px;
 }

 .c2 {
     margin-left: -31px;
     margin-top: -43px;
 }

 .c3 {
     margin-left: 1px;
     margin-top: -43px;
 }

 .c4 {
     margin-left: 17px;
     margin-top: -15px;
 }

 .c5 {
     margin-left: -31px;
     margin-top: 13px;
 }

 .c6 {
     margin-left: 1px;
     margin-top: 13px;
 }

 .c7 {
     margin-left: -63px;
     margin-top: -43px;
 }

 .c8 {
     margin-left: 33px;
     margin-top: -43px;
 }

 .c9 {
     margin-left: -15px;
     margin-top: 41px;
 }

 .c10 {
     margin-left: -63px;
     margin-top: 13px;
 }

 .c11 {
     margin-left: 33px;
     margin-top: 13px;
 }

 .c12 {
     margin-left: -15px;
     margin-top: -71px;
 }

 .c13 {
     margin-left: -47px;
     margin-top: -71px;
 }

 .c14 {
     margin-left: 17px;
     margin-top: -71px;
 }

 .c15 {
     margin-left: -47px;
     margin-top: 41px;
 }

 .c16 {
     margin-left: 17px;
     margin-top: 41px;
 }

 .c17 {
     margin-left: -79px;
     margin-top: -15px;
 }

 .c18 {
     margin-left: 49px;
     margin-top: -15px;
 }

 .c19 {
     margin-left: -63px;
     margin-top: -99px;
 }

 .c20 {
     margin-left: 33px;
     margin-top: -99px;
 }

 .c21 {
     margin-left: 1px;
     margin-top: -99px;
 }

 .c22 {
     margin-left: -31px;
     margin-top: -99px;
 }

 .c23 {
     margin-left: -63px;
     margin-top: 69px;
 }

 .c24 {
     margin-left: 33px;
     margin-top: 69px;
 }

 .c25 {
     margin-left: 1px;
     margin-top: 69px;
 }

 .c26 {
     margin-left: -31px;
     margin-top: 69px;
 }

 .c27 {
     margin-left: -79px;
     margin-top: -15px;
 }

 .c28 {
     margin-left: -95px;
     margin-top: -43px;
 }

 .c29 {
     margin-left: -95px;
     margin-top: 13px;
 }

 .c30 {
     margin-left: 49px;
     margin-top: 41px;
 }

 .c31 {
     margin-left: -79px;
     margin-top: -71px;
 }

 .c32 {
     margin-left: -111px;
     margin-top: -15px;
 }

 .c33 {
     margin-left: 65px;
     margin-top: -43px;
 }

 .c34 {
     margin-left: 65px;
     margin-top: 13px;
 }

 .c35 {
     margin-left: -79px;
     margin-top: 41px;
 }

 .c36 {
     margin-left: 49px;
     margin-top: -71px;
 }

 .c37 {
     margin-left: 81px;
     margin-top: -15px;
 }

 @keyframes text-cycle1 {
     0% {
         opacity: 0;
     }

     5% {
         opacity: 1;
     }

     15% {
         opacity: 1;
     }

     20% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes text-cycle2 {
     0% {
         opacity: 0;
     }

     20% {
         opacity: 0;
     }

     25% {
         opacity: 1;
     }

     35% {
         opacity: 1;
     }

     40% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes text-cycle3 {
     0% {
         opacity: 0;
     }

     40% {
         opacity: 0;
     }

     45% {
         opacity: 1;
     }

     55% {
         opacity: 1;
     }

     60% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes text-cycle4 {
     0% {
         opacity: 0;
     }

     60% {
         opacity: 0;
     }

     65% {
         opacity: 1;
     }

     75% {
         opacity: 1;
     }

     80% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes text-cycle5 {
     0% {
         opacity: 0;
     }

     80% {
         opacity: 0;
     }

     85% {
         opacity: 1;
     }

     95% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes pulse-gel {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(0.01);
     }

     100% {
         transform: scale(1);
     }
 }

 .r1 {
     opacity: 0.7;
 }

 .r2 {
     opacity: 0.5;
 }

 .r3 {
     opacity: 0.3;
 }

 /* Modern Our Products Section */
 .our-products-modern {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     padding: 80px 0;
     position: relative;
 }

 .our-products-modern::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('../images/bg-pattern-fiber.webp') center/cover;
     opacity: 0.1;
     z-index: 0;
 }

 .our-products-modern .container {
     position: relative;
     z-index: 1;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .product-card {
     background: #ffffff;
     border-radius: 16px;
     padding: 30px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(135, 206, 235, 0.1);
 }

 .product-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--accent-color), #5bc0de);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .product-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
 }

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

 .product-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--accent-color), #5bc0de);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     transition: all 0.3s ease;
 }

 .product-card:hover .product-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 8px 24px rgba(135, 206, 235, 0.3);
 }

 .product-icon i {
     font-size: 24px;
     color: #ffffff;
 }

 .product-content h4 {
     font-size: 20px;
     font-weight: 600;
     color: #1a1a1a;
     margin-bottom: 12px;
     line-height: 1.3;
     text-transform: capitalize;
 }

 .product-specs {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 16px;
 }

 .spec {
     background: rgba(135, 206, 235, 0.1);
     color: var(--accent-color);
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border: 1px solid rgba(135, 206, 235, 0.2);
 }

 .product-content p {
     color: #666;
     line-height: 1.6;
     font-size: 14px;
     margin: 0;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .products-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .product-card {
         padding: 24px;
     }

     .product-icon {
         width: 50px;
         height: 50px;
     }

     .product-icon i {
         font-size: 20px;
     }

     .product-content h4 {
         font-size: 18px;
     }
 }

 @media (max-width: 480px) {
     .our-products-modern {
         padding: 60px 0;
     }

     .product-card {
         padding: 20px;
     }

     .product-specs {
         flex-direction: column;
     }

     .spec {
         text-align: center;
     }
 }

 /* Stunning Animated Our Products Section */
 .our-products-modern {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #87CEEB 100%);
     background-size: 400% 400%;
     padding: 100px 0;
     position: relative;
     overflow: hidden;
     animation: gradientShift 15s ease infinite;
 }

 .how-we-work {
     padding: 100px 0;
     position: relative;
 }

 .how-we-work::before {
     display: none;
 }

 .how-we-work .container {
     position: relative;
     z-index: 2;
 }

 .our-products-modern::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('../images/bg-pattern-fiber.webp') center/cover;
     opacity: 0.2;
     z-index: 0;
     animation: float 20s ease-in-out infinite;
 }

 .our-products-modern::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(135, 206, 235, 0.15) 0%, transparent 70%);
     animation: rotate 30s linear infinite;
     z-index: 0;
 }

 /* Enhanced Background Elements */
 .our-products-modern::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 80%, rgba(135, 206, 235, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
     animation: backgroundPulse 8s ease-in-out infinite;
     z-index: 0;
 }

 @keyframes backgroundPulse {

     0%,
     100% {
         opacity: 0.3;
         transform: scale(1);
     }

     50% {
         opacity: 0.6;
         transform: scale(1.1);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(1deg);
     }
 }

 @keyframes rotate {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .our-products-modern .container {
     position: relative;
     z-index: 2;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 40px;
     margin-top: 60px;
     perspective: 1000px;
 }

 .product-card {
     background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
     border-radius: 20px;
     padding: 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
     border: none;
     transform-style: preserve-3d;
     opacity: 1 !important;
     visibility: visible !important;
     transform: scale(1) translateY(0px) !important;
     min-height: 400px;
     display: flex;
     flex-direction: column;
     perspective: 1000px;
     cursor: pointer;
 }

 .product-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #764ba2, #87CEEB);
     background-size: 200% 200%;
     animation: gradientShift 3s ease infinite;
     z-index: 1;
 }

 .product-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
     opacity: 0;
     transition: opacity 0.6s ease;
     z-index: 0;
 }

 .product-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent 30%, rgba(135, 206, 235, 0.1) 50%, transparent 70%);
     transform: translateX(-100%);
     transition: transform 0.8s ease;
     z-index: 1;
 }

 .product-card:hover::before {
     transform: translateX(100%);
 }

 .product-card::after {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de);
     border-radius: 24px;
     z-index: -1;
     opacity: 0;
     transition: opacity 0.6s ease;
     animation: borderGlow 3s ease-in-out infinite;
 }

 .product-card:hover::after {
     opacity: 1;
 }

 @keyframes borderGlow {

     0%,
     100% {
         opacity: 0.3;
     }

     50% {
         opacity: 1;
     }
 }

 .product-card:hover {
     transform: translateY(-20px) rotateX(10deg) rotateY(5deg);
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
 }

 .product-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #667eea, #764ba2);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 30px 30px 20px 30px;
     position: relative;
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     overflow: hidden;
     box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
 }

 .product-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transform: translateX(-100%);
     transition: transform 0.8s ease;
 }

 .product-card:hover .product-icon::before {
     transform: translateX(100%);
 }

 .product-card:hover .product-icon {
     transform: scale(1.1) translateZ(15px);
     box-shadow: 0 12px 30px rgba(102, 126, 234, 0.3);
     background: linear-gradient(135deg, #87CEEB, #5bc0de);
 }

 .product-card:hover .product-icon i {
     transform: scale(1.2) rotate(-10deg);
     animation: iconPulse 2s ease-in-out infinite;
 }

 /* Focus Effect for Icons */
 .products-grid:hover .product-card:not(:hover) .product-icon {
     transform: scale(0.9) translateZ(0px);
     opacity: 0.6;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .products-grid:hover .product-card:not(:hover) .product-icon i {
     transform: scale(0.8);
     opacity: 0.5;
 }

 .product-icon i {
     font-size: 32px;
     color: #ffffff;
     transition: all 0.6s ease;
     z-index: 2;
     position: relative;
 }

 .product-card:hover .product-icon i {
     transform: scale(1.1) rotate(-15deg);
     animation: iconPulse 2s ease-in-out infinite;
 }

 @keyframes iconPulse {

     0%,
     100% {
         transform: scale(1.1) rotate(-15deg);
     }

     50% {
         transform: scale(1.3) rotate(-15deg);
     }
 }

 .product-content {
     position: relative;
     z-index: 2;
     padding: 0 30px 30px 30px;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .product-content h4 {
     font-size: 22px;
     font-weight: 600;
     color: #1a1a1a;
     margin-bottom: 12px;
     line-height: 1.3;
     text-transform: capitalize;
     transition: all 0.6s ease;
     position: relative;
     letter-spacing: -0.5px;
 }

 .product-card:hover .product-content h4 {
     transform: translateX(10px);
     color: #667eea;
 }

 .product-content h4::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 3px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     transition: width 0.6s ease;
     border-radius: 2px;
 }

 .product-card:hover .product-content h4::after {
     width: 100%;
 }

 .product-specs {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 16px;
     opacity: 1;
     transform: translateY(0);
 }

 .spec {
     background: rgba(102, 126, 234, 0.08);
     color: #667eea;
     padding: 6px 12px;
     border-radius: 6px;
     font-size: 11px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border: 1px solid rgba(102, 126, 234, 0.15);
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
 }

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

 .product-card:hover .spec::before {
     left: 100%;
 }

 .product-card:hover .spec {
     background: linear-gradient(135deg, #667eea, #764ba2);
     color: #ffffff;
     border-color: rgba(255, 255, 255, 0.3);
     transform: scale(1.05);
     box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
 }

 .product-content p {
     color: #666;
     line-height: 1.6;
     font-size: 14px;
     margin: 0;
     transition: all 0.6s ease;
     opacity: 1;
     transform: translateY(0);
     flex: 1;
     margin-top: auto;
 }

 .product-card:hover .product-content p {
     color: #333;
     transform: translateY(0);
 }

 /* Floating Particles Animation */
 .product-card::before {
     content: '';
     position: absolute;
     top: 20px;
     right: 20px;
     width: 6px;
     height: 6px;
     background: #87CEEB;
     border-radius: 50%;
     animation: floatParticle 4s ease-in-out infinite;
     z-index: 3;
     opacity: 0.7;
 }

 .product-card::after {
     content: '';
     position: absolute;
     bottom: 30px;
     left: 30px;
     width: 4px;
     height: 4px;
     background: #764ba2;
     border-radius: 50%;
     animation: floatParticle 3s ease-in-out infinite reverse;
     z-index: 3;
     opacity: 0.7;
 }

 @keyframes floatParticle {

     0%,
     100% {
         transform: translateY(0px) scale(1);
         opacity: 0.7;
     }

     50% {
         transform: translateY(-15px) scale(1.2);
         opacity: 1;
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .products-grid {
         grid-template-columns: 1fr;
         gap: 25px;
     }

     .product-card {
         min-height: 350px;
     }

     .product-icon {
         width: 50px;
         height: 50px;
         margin: 25px 25px 15px 25px;
     }

     .product-icon i {
         font-size: 20px;
     }

     .product-content {
         padding: 0 25px 25px 25px;
     }

     .product-content h4 {
         font-size: 20px;
     }
 }

 @media (max-width: 480px) {
     .our-products-modern {
         padding: 80px 0;
     }

     .product-card {
         padding: 25px;
     }

     .product-specs {
         flex-direction: column;
     }

     .spec {
         text-align: center;
     }
 }

 /* Additional Stunning Effects */
 .particle {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
     z-index: 10;
     animation: particleFloat 3s ease-in-out infinite;
 }

 @keyframes particleFloat {

     0%,
     100% {
         transform: translateY(0px) scale(1);
         opacity: 0.3;
     }

     50% {
         transform: translateY(-20px) scale(1.2);
         opacity: 1;
     }
 }

 .floating-element {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
     z-index: 1;
     animation: floatElement 8s ease-in-out infinite;
 }

 @keyframes floatElement {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg) scale(1);
         opacity: 0.1;
     }

     50% {
         transform: translateY(-30px) rotate(180deg) scale(1.1);
         opacity: 0.3;
     }
 }

 /* Stunning 3D Zoom Effect */
 .product-card {
     transform-style: preserve-3d;
     perspective: 1200px;
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .product-card {
     transform: scale(1) !important;
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .product-card:hover {
     transform: translateY(-12px) scale(1.05) translateZ(30px) !important;
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
     z-index: 10;
 }

 .product-card:hover::after {
     opacity: 1;
 }

 /* Focus Effect - Other cards zoom out when one is hovered */
 .products-grid:hover .product-card:not(:hover) {
     transform: scale(0.98) translateY(5px) !important;
     opacity: 0.8;
     filter: blur(0.5px);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 /* Enhanced Zoom Effect with Glow */
 .product-card::before {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de, #667eea);
     background-size: 400% 400%;
     border-radius: 24px;
     z-index: -1;
     opacity: 0;
     transition: opacity 0.6s ease;
     animation: borderGlow 3s ease-in-out infinite, gradientShift 4s ease infinite;
 }

 .product-card:hover::before {
     opacity: 1;
 }

 .product-card:hover .product-icon {
     transform: scale(1.15) translateZ(20px);
     box-shadow: 0 15px 35px rgba(135, 206, 235, 0.4);
 }

 .product-card:hover .product-content {
     transform: translateZ(30px);
 }

 /* Glowing Border Animation */
 .product-card::before {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de, #667eea);
     background-size: 400% 400%;
     border-radius: 24px;
     z-index: -1;
     opacity: 0;
     transition: opacity 0.6s ease;
     animation: borderGlow 3s ease-in-out infinite, gradientShift 4s ease infinite;
 }

 @keyframes gradientShift {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 .product-card:hover::before {
     opacity: 1;
 }

 /* Icon Morphing Animation */
 .product-icon {
     position: relative;
     overflow: hidden;
 }

 .product-icon::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transform: translateX(-100%) skewX(-15deg);
     transition: transform 0.8s ease;
 }

 .product-card:hover .product-icon::after {
     transform: translateX(100%) skewX(-15deg);
 }

 /* Text Glow Effect */
 .product-content h4 {
     text-shadow: 0 0 10px rgba(102, 126, 234, 0);
     transition: text-shadow 0.6s ease;
 }

 .product-card:hover .product-content h4 {
     text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
 }

 /* Spec Badge Pulse Animation */
 .spec {
     animation: specPulse 4s ease-in-out infinite;
 }

 @keyframes specPulse {

     0%,
     100% {
         box-shadow: 0 0 0 rgba(102, 126, 234, 0.3);
     }

     50% {
         box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
     }
 }

 .product-card:hover .spec {
     animation: specPulse 1s ease-in-out infinite;
 }

 /* Content Slide Animation */
 .product-content {
     transform: translateZ(20px);
 }

 .product-card:hover .product-content {
     transform: translateZ(30px);
 }

 /* Background Parallax Effect */
 .our-products-modern {
     background-attachment: fixed;
 }

 /* Enhanced Responsive Animations */
 @media (max-width: 768px) {
     .product-card:hover {
         transform: translateY(-10px) scale(1.05) translateZ(30px);
     }

     .product-card:hover .product-icon {
         transform: scale(1.15) translateZ(20px);
     }

     .floating-element {
         display: none;
     }
 }

 @media (max-width: 480px) {
     .product-card:hover {
         transform: translateY(-5px) scale(1.03) translateZ(20px);
     }

     .product-card:hover .product-icon {
         transform: scale(1.1) translateZ(15px);
     }

     .particle {
         display: none;
     }
 }

 /* Additional Stunning Background Effects */
 .our-products-modern {
     position: relative;
 }

 .our-products-modern::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 80%, rgba(135, 206, 235, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
     animation: backgroundPulse 8s ease-in-out infinite;
     z-index: 0;
 }

 /* Animated Geometric Shapes */
 .our-products-modern::after {
     content: '';
     position: absolute;
     top: 10%;
     left: 5%;
     width: 100px;
     height: 100px;
     background: linear-gradient(45deg, rgba(135, 206, 235, 0.1), rgba(102, 126, 234, 0.1));
     border-radius: 50%;
     animation: floatShape 12s ease-in-out infinite;
     z-index: 1;
 }

 .our-products-modern::before {
     content: '';
     position: absolute;
     top: 60%;
     right: 10%;
     width: 80px;
     height: 80px;
     background: linear-gradient(45deg, rgba(118, 75, 162, 0.1), rgba(135, 206, 235, 0.1));
     border-radius: 20px;
     transform: rotate(45deg);
     animation: floatShape 15s ease-in-out infinite reverse;
     z-index: 1;
 }

 @keyframes floatShape {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg) scale(1);
         opacity: 0.3;
     }

     50% {
         transform: translateY(-30px) rotate(180deg) scale(1.2);
         opacity: 0.6;
     }
 }

 /* Enhanced Particle System */
 .our-products-modern {
     background:
         linear-gradient(135deg, #667eea 0%, #764ba2 50%, #87CEEB 100%),
         radial-gradient(circle at 30% 70%, rgba(135, 206, 235, 0.2) 0%, transparent 40%),
         radial-gradient(circle at 70% 30%, rgba(102, 126, 234, 0.2) 0%, transparent 40%),
         radial-gradient(circle at 50% 50%, rgba(118, 75, 162, 0.1) 0%, transparent 60%);
     background-size: 400% 400%, 200% 200%, 300% 300%, 400% 400%;
     animation:
         gradientShift 15s ease infinite,
         backgroundMove 20s ease infinite;
 }

 @keyframes backgroundMove {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 100% 100%, 50% 50%;
     }

     50% {
         background-position: 100% 50%, 100% 100%, 0% 0%, 0% 100%;
     }
 }

 /* Glowing Border Effect */
 .our-products-modern {
     position: relative;
 }

 .our-products-modern::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg,
             transparent 0%,
             rgba(135, 206, 235, 0.1) 25%,
             rgba(102, 126, 234, 0.1) 50%,
             rgba(118, 75, 162, 0.1) 75%,
             transparent 100%);
     background-size: 400% 400%;
     animation: borderGlow 10s ease infinite;
     z-index: 0;
 }

 @keyframes borderGlow {

     0%,
     100% {
         background-position: 0% 50%;
         opacity: 0.3;
     }

     50% {
         background-position: 100% 50%;
         opacity: 0.6;
     }
 }

 /* Enhanced Container with Glass Effect */
 .our-products-modern .container {
     position: relative;
     z-index: 4;
     backdrop-filter: blur(10px);
     background: rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     padding: 20px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }

 /* Ensure products grid is visible */
 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 40px;
     margin-top: 60px;
     perspective: 1000px;
     opacity: 1 !important;
     visibility: visible !important;
 }

 /* Enhanced Section Title Visibility */
 .our-products-modern .section-title {
     position: relative;
     z-index: 10;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(15px);
     padding: 30px;
     border-radius: 15px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     margin-bottom: 40px;
 }

 .our-products-modern .section-title h3 {
     color: #667eea;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 10px;
 }

 .our-products-modern .section-title h2 {
     color: #1a1a1a;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .our-products-modern .section-title p {
     color: #666;
     font-size: 16px;
     line-height: 1.6;
 }

 /* Background Particles and Shapes */
 .bg-particle {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
     z-index: 1;
     animation: particleFloat 4s ease-in-out infinite;
     filter: blur(1px);
 }

 .floating-shape {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     animation: shapeFloat 6s ease-in-out infinite;
     filter: blur(0.5px);
 }

 @keyframes particleFloat {

     0%,
     100% {
         transform: translateY(0px) scale(1) rotate(0deg);
         opacity: 0.3;
     }

     50% {
         transform: translateY(-20px) scale(1.2) rotate(180deg);
         opacity: 0.8;
     }
 }

 @keyframes shapeFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg) scale(1);
         opacity: 0.2;
     }

     50% {
         transform: translateY(-30px) rotate(360deg) scale(1.3);
         opacity: 0.6;
     }
 }

 /* Enhanced Glass Morphism Effect */
 .our-products-modern .container {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     position: relative;
     z-index: 2;
 }

 /* Responsive Background Adjustments */
 @media (max-width: 768px) {

     .bg-particle,
     .floating-shape {
         display: none;
     }

     .our-products-modern {
         background-size: 200% 200%;
     }
 }

 @media (max-width: 480px) {
     .our-products-modern .container {
         backdrop-filter: blur(10px);
         padding: 15px;
     }
 }

 /* Focus Effect for Content */
 .products-grid:hover .product-card:not(:hover) .product-content {
     transform: translateZ(0px);
     opacity: 0.6;
 }

 .products-grid:hover .product-card:not(:hover) .product-content h4 {
     color: #999;
     transition: color 0.4s ease;
 }

 .products-grid:hover .product-card:not(:hover) .product-content p {
     color: #bbb;
     transition: color 0.4s ease;
 }

 /* 3D Card Front Face */
 .product-card-front {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     transform-style: preserve-3d;
     transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     z-index: 2;
     transform: rotateY(0deg);
 }

 /* 3D Card Back Face */
 .product-card-back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     transform-style: preserve-3d;
     transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     transform: rotateY(180deg);
     z-index: 1;
     color: white;
     padding: 30px;
     transform-origin: center;
 }

 /* Fix text direction and prevent overlap */
 .product-card-front *,
 .product-card-back * {
     backface-visibility: hidden;
 }

 .product-card-back {
     transform: rotateY(180deg);
 }

 /* Ensure back content is properly oriented */
 .product-card-back .back-content,
 .product-card-back .back-icon,
 .product-card-back .back-specs,
 .product-card-back .back-description {
     transform: rotateY(180deg);
 }

 /* Flip Animation */
 .product-card:hover .product-card-front {
     transform: rotateY(180deg);
 }

 .product-card:hover .product-card-back {
     transform: rotateY(0deg);
 }

 .product-card:hover .product-card-back .back-content,
 .product-card:hover .product-card-back .back-icon,
 .product-card:hover .product-card-back .back-specs,
 .product-card:hover .product-card-back .back-description {
     transform: rotateY(0deg);
 }

 /* Back Card Elements */
 .back-icon {
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 0 20px 0;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }

 .back-icon i {
     font-size: 24px;
     color: #ffffff;
 }

 .back-content h4 {
     font-size: 20px;
     font-weight: 600;
     color: #ffffff;
     margin-bottom: 15px;
     line-height: 1.3;
     text-transform: capitalize;
     letter-spacing: -0.5px;
 }

 .back-specs {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 20px;
 }

 .back-spec {
     background: rgba(255, 255, 255, 0.1);
     color: #ffffff;
     padding: 8px 12px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 500;
     border: 1px solid rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
 }

 .back-spec strong {
     color: #ffffff;
     font-weight: 600;
 }

 .back-description p {
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
     font-size: 14px;
     margin: 0;
 }

 /* Enhanced 3D Effects */
 .product-card:hover {
     transform: translateY(-8px) scale(1.02) !important;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
 }

 /* Focus Effect for 3D Cards */
 .products-grid:hover .product-card:not(:hover) {
     transform: scale(0.98) translateY(5px) !important;
     opacity: 0.8;
     filter: blur(0.5px);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 /* Responsive 3D Cards */
 @media (max-width: 768px) {
     .product-card {
         min-height: 350px;
     }

     .back-content {
         padding: 20px;
     }

     .back-icon {
         width: 50px;
         height: 50px;
     }

     .back-icon i {
         font-size: 20px;
     }

     .back-content h4 {
         font-size: 18px;
     }
 }

 /* Prevent overlap and ensure proper 3D rendering */
 .product-card {
     transform-style: preserve-3d;
     perspective: 1000px;
 }

 .product-card-front,
 .product-card-back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     transform-style: preserve-3d;
     overflow: hidden;
 }

 /* Ensure content doesn't overflow */
 .product-card-front .product-content,
 .product-card-back .back-content {
     height: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 /* Fix any potential z-index issues */
 .product-card-front {
     z-index: 2;
 }

 .product-card-back {
     z-index: 1;
 }

 /* Enhanced Background with Free Patterns */
 .our-products-modern {
     background:
         linear-gradient(135deg, #667eea 0%, #764ba2 50%, #87CEEB 100%),
         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hex" x="0" y="0" width="50" height="43.4" patternUnits="userSpaceOnUse"><polygon fill="rgba(255,255,255,0.08)" points="25,0 50,14.4 50,28.9 25,43.3 0,28.9 0,14.4"/></pattern></defs><rect width="100" height="100" fill="url(%23hex)"/></svg>'),
         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.12)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>'),
         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/></pattern></defs><rect width="40" height="40" fill="url(%23grid)"/></svg>'),
         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><pattern id="circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="80" height="80" fill="url(%23circles)"/></svg>'),
         radial-gradient(circle at 20% 80%, rgba(135, 206, 235, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
     background-size: 400% 400%, 50px 43.4px, 20px 20px, 40px 40px, 80px 80px, 100% 100%, 100% 100%, 100% 100%;
     background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
     background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
     animation: gradientShift 15s ease infinite, patternFloat 20s linear infinite, dotsFloat 25s linear infinite, gridFloat 30s linear infinite, circlesFloat 35s linear infinite;
     position: relative;
     overflow: hidden;
     min-height: 100vh;
     z-index: 1;
 }

 /* Animated geometric shapes */
 .our-products-modern::before {
     content: '';
     position: absolute;
     top: 10%;
     right: 5%;
     width: 200px;
     height: 200px;
     background: linear-gradient(45deg, rgba(135, 206, 235, 0.2), rgba(102, 126, 234, 0.2));
     border-radius: 50%;
     transform: rotate(45deg);
     animation: floatShape 12s ease-in-out infinite;
     z-index: 2;
 }

 .our-products-modern::after {
     content: '';
     position: absolute;
     bottom: 15%;
     left: 8%;
     width: 150px;
     height: 150px;
     background: linear-gradient(135deg, rgba(118, 75, 162, 0.2), rgba(135, 206, 235, 0.2));
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: floatShape 15s ease-in-out infinite reverse;
     z-index: 2;
 }

 /* Floating particles */
 .bg-particle {
     position: absolute;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     animation: particleFloat 8s ease-in-out infinite;
     z-index: 3;
 }

 .bg-particle:nth-child(1) {
     width: 8px;
     height: 8px;
     top: 20%;
     left: 15%;
     animation-delay: 0s;
 }

 .bg-particle:nth-child(2) {
     width: 12px;
     height: 12px;
     top: 60%;
     right: 20%;
     animation-delay: 2s;
 }

 .bg-particle:nth-child(3) {
     width: 6px;
     height: 6px;
     bottom: 30%;
     left: 25%;
     animation-delay: 4s;
 }

 .bg-particle:nth-child(4) {
     width: 10px;
     height: 10px;
     top: 40%;
     right: 35%;
     animation-delay: 6s;
 }

 /* Floating shapes */
 .floating-shape {
     position: absolute;
     opacity: 0.2;
     animation: shapeFloat 18s ease-in-out infinite;
     z-index: 3;
 }

 .floating-shape:nth-child(1) {
     top: 25%;
     right: 10%;
     width: 80px;
     height: 80px;
     background: linear-gradient(45deg, #667eea, #87CEEB);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     animation-delay: 0s;
     opacity: 0.3;
 }

 .floating-shape:nth-child(2) {
     bottom: 20%;
     left: 15%;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #764ba2, #667eea);
     border-radius: 50%;
     animation-delay: 3s;
     opacity: 0.3;
 }

 .floating-shape:nth-child(3) {
     top: 70%;
     right: 25%;
     width: 100px;
     height: 100px;
     background: linear-gradient(90deg, #87CEEB, #764ba2);
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     animation-delay: 6s;
     opacity: 0.3;
 }

 .floating-shape:nth-child(4) {
     top: 15%;
     left: 10%;
     width: 70px;
     height: 70px;
     background: linear-gradient(45deg, #87CEEB, #667eea);
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     animation-delay: 9s;
     opacity: 0.3;
 }

 .floating-shape:nth-child(5) {
     bottom: 25%;
     right: 15%;
     width: 90px;
     height: 90px;
     background: linear-gradient(135deg, #764ba2, #87CEEB);
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     animation-delay: 12s;
     opacity: 0.3;
 }

 /* Enhanced animations */
 @keyframes patternFloat {

     0%,
     100% {
         background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0;
     }

     50% {
         background-position: 100% 100%, 25px 21.7px, 10px 10px, 0 0, 0 0, 0 0;
     }
 }

 @keyframes dotsFloat {

     0%,
     100% {
         background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0;
     }

     50% {
         background-position: 100% 100%, 0 0, 10px 10px, 0 0, 0 0, 0 0;
     }
 }

 @keyframes particleFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
         opacity: 0.1;
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
         opacity: 0.3;
     }
 }

 @keyframes shapeFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg) scale(1);
     }

     33% {
         transform: translateY(-15px) rotate(120deg) scale(1.1);
     }

     66% {
         transform: translateY(10px) rotate(240deg) scale(0.9);
     }
 }

 @keyframes floatShape {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg) scale(1);
     }

     50% {
         transform: translateY(-30px) rotate(180deg) scale(1.2);
     }
 }



 /* Enhanced floating elements with more variety */
 .floating-shape:nth-child(4) {
     top: 15%;
     left: 10%;
     width: 70px;
     height: 70px;
     background: linear-gradient(45deg, #87CEEB, #667eea);
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     animation-delay: 9s;
 }

 .floating-shape:nth-child(5) {
     bottom: 25%;
     right: 15%;
     width: 90px;
     height: 90px;
     background: linear-gradient(135deg, #764ba2, #87CEEB);
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     animation-delay: 12s;
 }

 /* Additional animations */
 @keyframes gridFloat {

     0%,
     100% {
         background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
     }

     50% {
         background-position: 100% 100%, 0 0, 0 0, 20px 20px, 0 0, 0 0, 0 0, 0 0;
     }
 }

 @keyframes circlesFloat {

     0%,
     100% {
         background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
     }

     50% {
         background-position: 100% 100%, 0 0, 0 0, 0 0, 40px 40px, 0 0, 0 0, 0 0;
     }
 }

 /* Product Categories Tabs */
 .product-categories-tabs {
     margin-bottom: 50px;
 }

 .category-tabs {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 15px;
     margin-bottom: 40px;
 }

 .category-tab {
     background: rgba(255, 255, 255, 0.1);
     border: 2px solid rgba(255, 255, 255, 0.2);
     color: var(--primary-color);
     padding: 12px 25px;
     border-radius: 30px;
     font-weight: 600;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 1px;
     cursor: pointer;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
 }

 .category-tab::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.5s ease;
 }

 .category-tab:hover::before {
     left: 100%;
 }

 .category-tab:hover {
     background: var(--primary-color);
     color: white;
     border-color: var(--primary-color);
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .category-tab.active {
     background: var(--primary-color);
     color: white;
     border-color: var(--primary-color);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 }

 /* Product Stats Section */
 .product-stats-section {
     margin-top: 80px;
     padding: 60px 0;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .stat-item {
     text-align: center;
     padding: 30px 20px;
     position: relative;
     transition: all 0.3s ease;
 }

 .stat-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-color), var(--secondery-color));
     border-radius: 2px;
     opacity: 0;
     transition: all 0.3s ease;
 }

 .stat-item:hover::before {
     opacity: 1;
     width: 80px;
 }

 .stat-item:hover {
     transform: translateY(-5px);
 }

 .stat-icon {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, var(--primary-color), var(--secondery-color));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     position: relative;
     overflow: hidden;
 }

 .stat-icon::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transform: rotate(45deg);
     transition: all 0.6s ease;
 }

 .stat-item:hover .stat-icon::before {
     transform: rotate(45deg) translate(50%, 50%);
 }

 .stat-icon i {
     font-size: 32px;
     color: white;
     z-index: 2;
     position: relative;
 }

 .stat-content h3 {
     font-size: 36px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 10px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .stat-content p {
     font-size: 14px;
     color: var(--text-color);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin: 0;
 }

 /* Enhanced Product Cards */
 .product-card {
     position: relative;
     overflow: hidden;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.4s ease;
     transform-style: preserve-3d;
     perspective: 1000px;
 }

 .product-card:hover {
     transform: translateY(-10px) rotateX(5deg);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     border-color: var(--primary-color);
 }

 .product-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
 }

 .product-card:hover::before {
     opacity: 1;
 }

 .product-icon {
     position: relative;
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, var(--primary-color), var(--secondery-color));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 25px;
     transition: all 0.3s ease;
     overflow: hidden;
 }

 .product-icon::after {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(45deg, var(--primary-color), var(--secondery-color), var(--primary-color));
     border-radius: 50%;
     z-index: -1;
     animation: borderGlow 3s ease-in-out infinite;
 }

 @keyframes borderGlow {

     0%,
     100% {
         opacity: 0.5;
     }

     50% {
         opacity: 1;
     }
 }

 .product-card:hover .product-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 .product-icon i {
     font-size: 32px;
     color: white;
     transition: all 0.3s ease;
 }

 .product-card:hover .product-icon i {
     transform: scale(1.2);
 }

 .product-content {
     text-align: center;
     padding: 0 20px 30px;
     position: relative;
     z-index: 2;
 }

 .product-content h4 {
     font-size: 20px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 15px;
     transition: all 0.3s ease;
 }

 .product-card:hover .product-content h4 {
     color: var(--secondery-color);
 }

 .product-specs {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     margin-bottom: 15px;
 }

 .spec {
     background: rgba(255, 255, 255, 0.1);
     color: var(--text-color);
     padding: 4px 12px;
     border-radius: 15px;
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
 }

 .product-card:hover .spec {
     background: var(--primary-color);
     color: white;
     border-color: var(--primary-color);
 }

 .product-content p {
     font-size: 14px;
     color: var(--text-color);
     line-height: 1.6;
     margin: 0;
     opacity: 0.8;
     transition: all 0.3s ease;
 }

 .product-card:hover .product-content p {
     opacity: 1;
     color: var(--text-color);
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .category-tabs {
         gap: 10px;
     }

     .category-tab {
         padding: 10px 20px;
         font-size: 12px;
     }

     .stat-item {
         padding: 20px 15px;
     }

     .stat-icon {
         width: 60px;
         height: 60px;
     }

     .stat-icon i {
         font-size: 24px;
     }

     .stat-content h3 {
         font-size: 28px;
     }

     .stat-content p {
         font-size: 12px;
     }
 }

 @media (max-width: 480px) {
     .category-tabs {
         flex-direction: column;
         align-items: center;
     }

     .category-tab {
         width: 200px;
     }

     .product-stats-section {
         margin-top: 50px;
         padding: 40px 0;
     }

     .stat-item {
         margin-bottom: 30px;
     }
 }

 /* Products Page Hero Section */
 .products-hero-section {
     position: relative;
     overflow: hidden;
 }

 .products-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
     z-index: 1;
 }

 .products-hero-section .container {
     position: relative;
     z-index: 2;
 }

 .hero-stats {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 40px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .stat-card {
     text-align: center;
     padding: 20px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 15px;
     margin-bottom: 20px;
     transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .stat-card:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.2);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .stat-number {
     font-size: 36px;
     font-weight: 700;
     color: #ffd700;
     margin-bottom: 10px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .stat-label {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.9);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1.4;
 }

 /* Products Grid Section */
 .products-grid-section {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 }

 /* Enhanced Product Cards for Products Page */
 .products-grid-section .product-card {
     background: white;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border: none;
     transition: all 0.4s ease;
 }

 .products-grid-section .product-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
 }

 .products-grid-section .product-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--secondery-color));
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 .products-grid-section .product-content h4 {
     color: var(--primary-color);
 }

 .products-grid-section .spec {
     background: var(--primary-color);
     color: white;
     border: none;
 }

 /* Responsive Design for Products Page */
 @media (max-width: 768px) {
     .hero-stats {
         padding: 30px 20px;
     }

     .stat-card {
         padding: 15px;
     }

     .stat-number {
         font-size: 28px;
     }

     .stat-label {
         font-size: 11px;
     }
 }

 @media (max-width: 480px) {
     .products-hero-section {
         padding: 60px 0;
     }

     .hero-stats {
         margin-top: 30px;
     }

     .stat-card {
         margin-bottom: 15px;
     }
 }

 /* Manufacturing Products Honeycomb Layout */
 .manufacturing-hex-grid {
     position: relative;
     padding: 80px 0;
     background: var(--secondery-color);
     overflow: hidden;
 }

 .manufacturing-hex-container {
     position: relative;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .manufacturing-hex-grid .section-title {
     text-align: center;
     margin-bottom: 60px;
     position: relative;
     z-index: 2;
 }

 .manufacturing-hex-grid .section-title h3 {
     color: var(--primary-color);
     font-size: 18px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 15px;
     position: relative;
 }

 .manufacturing-hex-grid .section-title h3::before {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     border-radius: 2px;
 }

 .manufacturing-hex-grid .section-title h2 {
     font-size: 48px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 20px;
     line-height: 1.2;
 }

 .manufacturing-hex-grid .section-title p {
     font-size: 18px;
     color: var(--text-color);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
 }

 /* Honeycomb Layout Container */
 .manufacturing-hex-grid-layout {
     position: relative;
     float: left;
     width: 100%;
     min-height: 600px;
     height: 600px;
     left: 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 20px;
 }

 /* Individual Hexagon Items */
 .manufacturing-hex-item {
     position: relative;
     margin: 10px;
     width: 200px;
     height: 230px;
     transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border-radius: 1em/.5em;
     background: #1a1718;
     cursor: pointer;
     transform-origin: center;
     will-change: transform;
 }

 .manufacturing-hex-item:hover {
     transform: translateY(-70px) scale(1.6);
     transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 120px 240px rgba(0, 0, 0, 0.9);
     z-index: 10;
     filter: brightness(1.5);
 }

 .manufacturing-hex-item:nth-child(even) {
     background: #233f88;
     top: 115px;
 }

 .manufacturing-hex-item:nth-child(even):hover {
     transform: translateY(-75px) scale(1.65);
     transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 140px 280px rgba(35, 63, 136, 1);
     z-index: 10;
     filter: brightness(1.6);
 }

 .manufacturing-hex-item:nth-child(3n) {
     background: var(--accent-color);
     top: 0;
 }

 .manufacturing-hex-item:nth-child(3n):hover {
     transform: translateY(-72px) scale(1.62);
     transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 130px 260px rgba(255, 193, 7, 0.9);
     z-index: 10;
     filter: brightness(1.55);
 }

 /* Hexagon Shape with Pseudo Elements */
 .manufacturing-hex-item:before,
 .manufacturing-hex-item:after {
     position: absolute;
     width: inherit;
     height: inherit;
     border-radius: inherit;
     background: inherit;
     content: '';
 }

 .manufacturing-hex-item:before {
     -webkit-transform: rotate(60deg);
     transform: rotate(60deg);
 }

 .manufacturing-hex-item:after {
     -webkit-transform: rotate(-60deg);
     transform: rotate(-60deg);
 }

 /* Hover Border Effect */
 .hoverborder {
     opacity: 0;
     background: url(/images/dotted-hexa.png) left top no-repeat;
     width: 209px;
     z-index: 9;
     left: -48px;
     top: 11px;
     height: 179px;
     transition: 0.5s;
     position: absolute;
 }

 .manufacturing-hex-item:hover .hoverborder {
     opacity: 1;
 }

 /* Product Title */
 .tekst {
     position: absolute;
     z-index: 1;
     font-weight: 600;
     justify-content: center;
     display: block;
     text-align: center;
     transition: 0.5s;
     padding-top: 45px;
     height: 100%;
     width: 100%;
     opacity: 1;

     color: #fff;
     font-size: 16px;
     line-height: 1.2;
     text-transform: uppercase;
 }

 .manufacturing-hex-item .tekst {
     color: #fff;
 }

 .manufacturing-hex-item:nth-child(even) .tekst {
     color: #fff;
 }

 .manufacturing-hex-item:nth-child(3n) .tekst {
     color: #000;
 }

 /* Product Icon */
 .tekst i {
     width: auto;
     margin-bottom: 10px;
     display: block;
     font-size: 30px;
     margin-bottom: 10px;
     display: block;
 }

 .manufacturing-hex-item .tekst i {
     color: #fff;
 }

 .manufacturing-hex-item:nth-child(even) .tekst i {
     color: #fff;
 }

 .manufacturing-hex-item:nth-child(3n) .tekst i {
     color: #000;
 }

 /* Product Description */
 .content {
     position: absolute;
     z-index: 1;
     justify-content: center;
     display: flex;
     font-size: 13px;
     text-align: center;
     align-items: center;
     transition: 0.5s;
     height: 100%;
     width: 100%;
     opacity: 0;
     line-height: 1.4;
 }

 .manufacturing-hex-item .content {
     color: #fff;
 }

 .manufacturing-hex-item:nth-child(even) .content {
     color: #fff;
 }

 .manufacturing-hex-item:nth-child(3n) .content {
     color: #000;
 }

 /* Hover Effects */
 .manufacturing-hex-item:hover .tekst {
     opacity: 0;
     transform: translateY(-10px);
     transition: all 0.5s ease;
 }

 .manufacturing-hex-item:hover .content {
     opacity: 1;
     transform: translateY(0);
     transition: all 0.5s ease;
 }

 /* Enhanced hover effects for all hexagon types */
 .manufacturing-hex-item:hover {
     transform: translateY(-25px) scale(1.15);
     transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     z-index: 10;
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
     filter: brightness(1.2);
 }

 .manufacturing-hex-item:hover .hoverborder {
     border-color: #667eea;
     box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
     transform: scale(1.05);
     transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .manufacturing-hex-item:hover .tekst i {
     transform: scale(1.2) rotate(5deg);
     transition: all 0.5s ease;
 }

 .manufacturing-hex-item:hover .manufacturing-badge {
     transform: scale(1.1);
     box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
     transition: all 0.5s ease;
 }

 /* Additional hover animations for better visual feedback */
 .manufacturing-hex-item {
     transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .manufacturing-hex-item:hover {
     z-index: 10;
 }

 /* Hover effects for different hexagon types */
 .manufacturing-hex-item:nth-child(even):hover {
     transform: translateY(-30px) scale(1.18);
     box-shadow: 0 50px 100px rgba(35, 63, 136, 0.6);
     filter: brightness(1.3);
 }

 .manufacturing-hex-item:nth-child(3n):hover {
     transform: translateY(-28px) scale(1.16);
     box-shadow: 0 45px 90px rgba(255, 193, 7, 0.5);
     filter: brightness(1.25);
 }

 /* Icon animation on hover */
 .manufacturing-hex-item:hover .tekst i {
     transform: scale(1.8) rotate(20deg);
     transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }





 /* Content reveal animation */
 .manufacturing-hex-item .content {
     transform: translateY(20px);
     opacity: 0;
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .manufacturing-hex-item:hover .content {
     transform: translateY(0);
     opacity: 1;
 }

 /* Badge animation */
 .manufacturing-hex-item .manufacturing-badge {
     transition: all 0.4s ease;
 }

 .manufacturing-hex-item:hover .manufacturing-badge {
     transform: scale(1.3);
     box-shadow: 0 8px 20px rgba(40, 167, 69, 0.6);
     transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }



 /* Product Badge */
 .manufacturing-badge {
     position: absolute;
     top: 10px;
     right: 10px;
     background: linear-gradient(135deg, #28a745, #20c997);
     color: white;
     padding: 3px 6px;
     border-radius: 10px;
     font-size: 9px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.3px;
     box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
     transition: all 0.4s ease;
     z-index: 3;
     max-width: 60px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .manufacturing-hex-item:hover .manufacturing-badge {
     transform: scale(1.1);
     box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
 }

 /* Hexagonal Shape */
 .manufacturing-hex-shape {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     border: 2px solid transparent;
     transition: all 0.6s ease;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-shape {
     border-color: var(--accent-color);
     box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
     transform: scale(1.05);
 }

 /* Glowing Border Effect */
 .manufacturing-hex-shape::before {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de);
     background-size: 400% 400%;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     z-index: -1;
     opacity: 0;
     transition: opacity 0.6s ease;
     animation: manufacturingGradientShift 4s ease infinite;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-shape::before {
     opacity: 1;
 }

 @keyframes manufacturingGradientShift {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 /* Product Icon */
 .manufacturing-hex-icon {
     position: absolute;
     top: 25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, #667eea, #764ba2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
     z-index: 2;
 }

 .manufacturing-hex-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     border-radius: 50%;
     transform: translateX(-100%);
     transition: transform 0.8s ease;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-icon::before {
     transform: translateX(100%);
 }

 .manufacturing-hex-item:hover .manufacturing-hex-icon {
     transform: translateX(-50%) scale(1.2) translateZ(20px);
     box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
     background: linear-gradient(135deg, #87CEEB, #5bc0de);
 }

 .manufacturing-hex-icon i {
     font-size: 28px;
     color: #ffffff;
     transition: all 0.6s ease;
     z-index: 2;
     position: relative;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-icon i {
     transform: scale(1.1) rotate(-10deg);
     animation: manufacturingIconPulse 2s ease-in-out infinite;
 }

 @keyframes manufacturingIconPulse {

     0%,
     100% {
         transform: scale(1.1) rotate(-10deg);
     }

     50% {
         transform: scale(1.2) rotate(-15deg);
     }
 }

 /* Product Content */
 .manufacturing-hex-content {
     position: absolute;
     bottom: 30px;
     left: 15px;
     right: 15px;
     text-align: center;
     z-index: 2;
     max-height: 120px;
     overflow: hidden;
 }

 .manufacturing-hex-content h4 {
     font-size: 18px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 12px;
     transition: all 0.6s ease;
     text-shadow: 0 0 10px rgba(102, 126, 234, 0);
     line-height: 1.2;
     position: relative;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-content h4 {
     text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
     transform: translateZ(15px);
 }

 .manufacturing-hex-specs {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 6px;
     margin-bottom: 12px;
     max-height: 60px;
     overflow: hidden;
 }

 .manufacturing-hex-spec {
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
     color: var(--primary-color);
     padding: 4px 8px;
     border-radius: 15px;
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.3px;
     border: 1px solid rgba(102, 126, 234, 0.2);
     transition: all 0.4s ease;
     animation: manufacturingSpecPulse 4s ease-in-out infinite;
     white-space: nowrap;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-spec {
     animation: manufacturingSpecPulse 1s ease-in-out infinite;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
     border-color: var(--accent-color);
     transform: scale(1.05);
 }

 @keyframes manufacturingSpecPulse {

     0%,
     100% {
         box-shadow: 0 0 0 rgba(102, 126, 234, 0.3);
     }

     50% {
         box-shadow: 0 0 15px rgba(102, 126, 234, 0.6);
     }
 }

 .manufacturing-hex-content p {
     font-size: 12px;
     color: var(--text-color);
     line-height: 1.4;
     margin: 0;
     transition: all 0.6s ease;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-content p {
     transform: translateZ(10px);
 }

 /* Manufacturing Badge */
 .manufacturing-badge {
     position: absolute;
     top: 12px;
     right: 12px;
     background: linear-gradient(135deg, #28a745, #20c997);
     color: white;
     padding: 3px 6px;
     border-radius: 10px;
     font-size: 9px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.3px;
     box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
     transition: all 0.4s ease;
     z-index: 3;
     max-width: 60px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .manufacturing-hex-item:hover .manufacturing-badge {
     transform: scale(1.1);
     box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
 }

 /* Floating Particles */
 .manufacturing-particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: linear-gradient(45deg, #667eea, #764ba2);
     border-radius: 50%;
     opacity: 0.6;
     animation: manufacturingParticleFloat 8s ease-in-out infinite;
 }

 .manufacturing-particle:nth-child(1) {
     top: 20%;
     left: 15%;
     animation-delay: 0s;
 }

 .manufacturing-particle:nth-child(2) {
     top: 60%;
     right: 20%;
     animation-delay: 2s;
 }

 .manufacturing-particle:nth-child(3) {
     bottom: 30%;
     left: 25%;
     animation-delay: 4s;
 }

 .manufacturing-particle:nth-child(4) {
     top: 40%;
     right: 35%;
     animation-delay: 6s;
 }

 @keyframes manufacturingParticleFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
         opacity: 0.6;
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
         opacity: 1;
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .manufacturing-hex-grid-layout {
         gap: 15px;
     }

     .manufacturing-hex-item {
         width: 260px;
         height: 300px;
     }
 }

 @media (max-width: 768px) {
     .manufacturing-hex-grid-layout {
         gap: 15px;
         margin-top: 40px;
     }

     .manufacturing-hex-item {
         width: 220px;
         height: 260px;
         margin: 8px;
     }

     .manufacturing-hex-icon {
         width: 60px;
         height: 60px;
         top: 20px;
     }

     .manufacturing-hex-icon i {
         font-size: 24px;
     }

     .manufacturing-hex-content {
         bottom: 25px;
         left: 12px;
         right: 12px;
         max-height: 100px;
     }

     .manufacturing-hex-content h4 {
         font-size: 16px;
         margin-bottom: 8px;
     }

     .manufacturing-hex-specs {
         gap: 4px;
         margin-bottom: 8px;
         max-height: 50px;
     }

     .manufacturing-hex-spec {
         font-size: 9px;
         padding: 3px 6px;
     }

     .manufacturing-hex-content p {
         font-size: 11px;
         line-height: 1.3;
         -webkit-line-clamp: 2;
     }

     .manufacturing-badge {
         top: 10px;
         right: 10px;
         font-size: 8px;
         padding: 2px 5px;
         max-width: 50px;
     }
 }

 @media (max-width: 480px) {
     .manufacturing-hex-grid .section-title h2 {
         font-size: 36px;
     }

     .manufacturing-hex-grid .section-title p {
         font-size: 16px;
     }

     .manufacturing-hex-item {
         width: 220px;
         height: 260px;
     }

     .manufacturing-hex-icon {
         width: 60px;
         height: 60px;
         top: 20px;
     }

     .manufacturing-hex-icon i {
         font-size: 28px;
     }

     .manufacturing-hex-content {
         bottom: 30px;
         left: 15px;
         right: 15px;
     }
 }

 /* Focus Effects */
 .manufacturing-hex-grid-layout:hover .manufacturing-hex-item:not(:hover) {
     transform: scale(0.95);
     opacity: 0.7;
     transition: all 0.4s ease;
 }

 .manufacturing-hex-grid-layout:hover .manufacturing-hex-item:not(:hover) .manufacturing-hex-icon {
     transform: translateX(-50%) scale(0.9);
     opacity: 0.6;
 }

 .manufacturing-hex-grid-layout:hover .manufacturing-hex-item:not(:hover) .manufacturing-hex-content h4 {
     transform: translateZ(0px);
     opacity: 0.8;
 }

 /* Loading Animation */
 .manufacturing-hex-item {
     animation: manufacturingHexAppear 0.8s ease-out forwards;
     opacity: 0;
     transform: translateY(30px);
 }

 .manufacturing-hex-item:nth-child(1) {
     animation-delay: 0.1s;
 }

 .manufacturing-hex-item:nth-child(2) {
     animation-delay: 0.2s;
 }

 .manufacturing-hex-item:nth-child(3) {
     animation-delay: 0.3s;
 }

 .manufacturing-hex-item:nth-child(4) {
     animation-delay: 0.4s;
 }

 .manufacturing-hex-item:nth-child(5) {
     animation-delay: 0.5s;
 }

 .manufacturing-hex-item:nth-child(6) {
     animation-delay: 0.6s;
 }

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

 /* Touch Interactions for Mobile */
 .manufacturing-hex-item.touch-active {
     transform: scale(0.95) !important;
     transition: transform 0.2s ease !important;
 }

 .manufacturing-hex-item.touch-active .manufacturing-hex-shape {
     border-color: var(--accent-color) !important;
     box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4) !important;
 }

 /* Modal Styling */
 .manufacturing-product-modal {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .manufacturing-product-modal>div {
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.95);
 }

 /* Enhanced Background Particles */
 .manufacturing-bg-particle {
     position: absolute;
     pointer-events: none;
     z-index: 1;
 }

 /* Manufacturing Theme Colors */
 .manufacturing-hex-grid {
     --manufacturing-primary: #667eea;
     --manufacturing-secondary: #764ba2;
     --manufacturing-accent: #87CEEB;
     --manufacturing-success: #28a745;
     --manufacturing-warning: #ffc107;
     --manufacturing-danger: #dc3545;
 }

 /* Enhanced Gradient Effects */
 .manufacturing-hex-shape::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.1) 0%,
             rgba(102, 126, 234, 0.05) 50%,
             rgba(118, 75, 162, 0.05) 100%);
     opacity: 0;
     transition: opacity 0.6s ease;
     pointer-events: none;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-shape::after {
     opacity: 1;
 }

 /* Manufacturing Badge Variations */
 .manufacturing-badge.grs-certified {
     background: linear-gradient(135deg, #28a745, #20c997);
 }

 .manufacturing-badge.premium {
     background: linear-gradient(135deg, #ffc107, #fd7e14);
 }

 .manufacturing-badge.luxury {
     background: linear-gradient(135deg, #6f42c1, #e83e8c);
 }

 .manufacturing-badge.industrial {
     background: linear-gradient(135deg, #495057, #6c757d);
 }

 .manufacturing-badge.safety {
     background: linear-gradient(135deg, #dc3545, #fd7e14);
 }

 .manufacturing-badge.compact {
     background: linear-gradient(135deg, #17a2b8, #20c997);
 }

 /* Enhanced Text Effects */
 .manufacturing-hex-content h4::before {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--manufacturing-primary), var(--manufacturing-secondary));
     transition: width 0.6s ease;
 }

 .manufacturing-hex-item:hover .manufacturing-hex-content h4::before {
     width: 60%;
 }

 /* Manufacturing Spec Badge Enhancements */
 .manufacturing-hex-spec::before {
     content: '\f058';
     margin-right: 4px;
     font-family: 'FontAwesome';
     font-size: 12px;
     font-weight: 900;
     line-height: normal;
     color: var(--manufacturing-success);
     display: inline-block;
     vertical-align: middle;
 }

 /* Product Specifications Styles */
 .product-specifications {
     margin: 40px 0;
     padding: 30px;
     background: #f8f9fa;
     border-radius: 10px;
     border-left: 4px solid var(--accent-color);
 }

 .product-specifications h3 {
     margin-bottom: 25px;
     color: var(--primary-color);
     font-size: 24px;
     font-weight: 700;
 }

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

 .spec-list li {
     position: relative;
     padding-left: 35px;
     margin-bottom: 15px;
     font-size: 16px;
     line-height: 1.6;
     color: var(--text-color);
 }

 .spec-list li:last-child {
     margin-bottom: 0;
 }

 .spec-list li::before {
     content: '\f058';
     position: absolute;
     font-family: 'FontAwesome';
     font-size: 20px;
     font-weight: 900;
     line-height: normal;
     color: var(--accent-color);
     display: inline-block;
     top: 2px;
     left: 0;
 }

 .spec-list li strong {
     color: var(--primary-color);
     font-weight: 700;
 }

 /* Product Applications Styles */
 .product-applications {
     margin: 40px 0;
 }

 .product-applications h3 {
     margin-bottom: 30px;
     color: var(--primary-color);
     font-size: 24px;
     font-weight: 700;
 }

 .application-item {
     text-align: center;
     padding: 25px 15px;
     background: #ffffff;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     height: 100%;
 }

 .application-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 .app-icon {
     width: 60px;
     height: 60px;
     background: var(--accent-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: all 0.3s ease;
 }

 .app-icon i {
     font-size: 24px;
     color: #ffffff;
 }

 .application-item:hover .app-icon {
     background: var(--primary-color);
     transform: scale(1.1);
 }

 .application-item h4 {
     color: var(--primary-color);
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .application-item p {
     color: var(--text-color);
     font-size: 14px;
     line-height: 1.6;
     margin: 0;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .product-specifications {
         padding: 20px;
         margin: 30px 0;
     }

     .product-specifications h3 {
         font-size: 20px;
         margin-bottom: 20px;
     }

     .spec-list li {
         font-size: 14px;
         padding-left: 30px;
     }

     .spec-list li::before {
         font-size: 18px;
     }

     .application-item {
         padding: 20px 10px;
         margin-bottom: 20px;
     }

     .app-icon {
         width: 50px;
         height: 50px;
         margin-bottom: 15px;
     }

     .app-icon i {
         font-size: 20px;
     }

     .application-item h4 {
         font-size: 16px;
         margin-bottom: 10px;
     }

     .application-item p {
         font-size: 13px;
     }
 }

 @media (max-width: 480px) {
     .product-specifications {
         padding: 15px;
         margin: 20px 0;
     }

     .product-specifications h3 {
         font-size: 18px;
         margin-bottom: 15px;
     }

     .spec-list li {
         font-size: 13px;
         padding-left: 25px;
         margin-bottom: 10px;
     }

     .spec-list li::before {
         font-size: 16px;
     }

     .application-item {
         padding: 15px 8px;
     }

     .app-icon {
         width: 45px;
         height: 45px;
         margin-bottom: 12px;
     }

     .app-icon i {
         font-size: 18px;
     }

     .application-item h4 {
         font-size: 15px;
         margin-bottom: 8px;
     }

     .application-item p {
         font-size: 12px;
     }
 }

 /* Enhanced Loading States */
 .manufacturing-hex-item.loading {
     animation: manufacturingHexLoading 1.5s ease-in-out infinite;
 }

 @keyframes manufacturingHexLoading {

     0%,
     100% {
         transform: translateY(0px) scale(1);
         opacity: 0.7;
     }

     50% {
         transform: translateY(-10px) scale(1.02);
         opacity: 1;
     }
 }

 /* Manufacturing Grid Responsive Enhancements */
 @media (max-width: 1200px) {
     .manufacturing-hex-grid-layout {
         justify-content: center;
         gap: 15px;
     }
 }

 @media (max-width: 768px) {
     .manufacturing-hex-grid-layout {
         gap: 10px;
         margin-top: 40px;
     }

     .manufacturing-hex-item {
         margin: 5px;
     }

     .manufacturing-hex-content h4 {
         font-size: 16px;
     }

     .manufacturing-hex-specs {
         gap: 6px;
     }

     .manufacturing-hex-spec {
         font-size: 10px;
         padding: 4px 8px;
     }
 }

 @media (max-width: 480px) {
     .manufacturing-hex-grid .section-title h2 {
         font-size: 28px;
     }

     .manufacturing-hex-grid .section-title p {
         font-size: 13px;
     }

     .manufacturing-hex-grid-layout {
         gap: 8px;
         margin-top: 25px;
     }

     .manufacturing-hex-item {
         width: 180px;
         height: 220px;
         margin: 4px;
     }

     .manufacturing-hex-icon {
         width: 45px;
         height: 45px;
         top: 12px;
     }

     .manufacturing-hex-icon i {
         font-size: 18px;
     }

     .manufacturing-hex-content {
         bottom: 15px;
         left: 8px;
         right: 8px;
         max-height: 80px;
     }

     .manufacturing-hex-content h4 {
         font-size: 12px;
         margin-bottom: 5px;
         line-height: 1.1;
     }

     .manufacturing-hex-specs {
         gap: 2px;
         margin-bottom: 5px;
         max-height: 35px;
     }

     .manufacturing-hex-spec {
         font-size: 7px;
         padding: 2px 3px;
         border-radius: 8px;
         letter-spacing: 0.2px;
     }

     .manufacturing-hex-content p {
         font-size: 9px;
         line-height: 1.1;
         -webkit-line-clamp: 2;
     }

     .manufacturing-badge {
         top: 6px;
         right: 6px;
         font-size: 6px;
         padding: 1px 3px;
         max-width: 35px;
         border-radius: 6px;
     }
 }

 /* Manufacturing Grid Focus States */
 .manufacturing-hex-item:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
 }

 .manufacturing-hex-item:focus .manufacturing-hex-shape {
     border-color: var(--manufacturing-primary);
 }

 /* Manufacturing Grid Accessibility */
 @media (prefers-reduced-motion: reduce) {

     .manufacturing-hex-item,
     .manufacturing-hex-icon,
     .manufacturing-hex-spec,
     .manufacturing-particle {
         animation: none !important;
         transition: none !important;
     }
 }

 /* Manufacturing Grid Print Styles */
 @media print {
     .manufacturing-hex-grid {
         background: white !important;
     }

     .manufacturing-hex-item {
         break-inside: avoid;
         page-break-inside: avoid;
     }

     .manufacturing-particle,
     .manufacturing-bg-particle {
         display: none !important;
     }
 }

 /* Responsive Styles for Honeycomb Layout */
 @media only screen and (max-width: 1200px) {
     .manufacturing-hex-grid-layout {
         width: 90%;
         left: 5%;
         gap: 15px;
         margin-top: 30px;
     }

     .manufacturing-hex-item {
         width: 160px;
         height: 185px;
         margin: 0;
     }

     .manufacturing-hex-item:nth-child(even) {
         top: 30px;
     }

     .manufacturing-hex-item:nth-child(3n) {
         top: 0;
     }
 }

 @media only screen and (max-width: 768px) {
     .manufacturing-hex-grid-layout {
         width: 100%;
         left: 0;
         min-height: 600px;
         height: 600px;
         gap: 12px;
         margin-top: 20px;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         align-items: flex-start;
     }

     .manufacturing-hex-item {
         width: 140px;
         height: 162px;
         margin: 0;
         position: relative;
         top: 0 !important;
     }

     .manufacturing-hex-item:nth-child(even) {
         top: 0 !important;
     }

     .manufacturing-hex-item:nth-child(3n) {
         top: 0 !important;
     }

     .tekst {
         font-size: 11px;
         padding-top: 30px;
         line-height: 1.2;
     }

     .tekst i {
         font-size: 22px;
         margin-bottom: 6px;
     }

     .content {
         font-size: 10px;
         padding: 0 8px;
         line-height: 1.3;
     }

     .manufacturing-badge {
         font-size: 7px;
         padding: 2px 4px;
         max-width: 45px;
     }
 }

 @media only screen and (max-width: 480px) {
     .manufacturing-hex-grid-layout {
         width: 100%;
         left: 0;
         min-height: 500px;
         height: auto;
         gap: 8px;
         margin-top: 15px;
         padding: 10px;
     }

     .manufacturing-hex-item {
         width: 110px;
         height: 127px;
         margin: 0;
         position: relative;
         top: 0 !important;
     }

     .manufacturing-hex-item:nth-child(even) {
         top: 0 !important;
     }

     .manufacturing-hex-item:nth-child(3n) {
         top: 0 !important;
     }

     .tekst {
         font-size: 14px;
         padding-top: 20px;
         line-height: 1.1;
     }

     .tekst i {
         font-size: 18px;
         margin-bottom: 4px;
     }

     .content {
         font-size: 13px;
         padding: 0 6px;
         line-height: 1.2;
     }

     .manufacturing-badge {
         font-size: 6px;
         padding: 1px 3px;
         max-width: 35px;
     }
 }

 @media only screen and (max-width: 360px) {
     .manufacturing-hex-grid-layout {
         gap: 6px;
         padding: 8px;
     }

     .manufacturing-hex-item {
         width: 100px;
         height: 115px;
     }

     .tekst {
         font-size: 8px;
         padding-top: 18px;
     }

     .tekst i {
         font-size: 16px;
         margin-bottom: 3px;
     }

     .content {
         font-size: 7px;
         padding: 0 5px;
     }

     .manufacturing-badge {
         font-size: 5px;
         padding: 1px 2px;
         max-width: 30px;
     }
 }

 /* Modal Styles */
 .manufacturing-product-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
     cursor: pointer;
 }

 .manufacturing-product-modal>div {
     background: white;
     padding: 40px;
     border-radius: 20px;
     max-width: 500px;
     text-align: center;
     transform: scale(0.8);
     transition: transform 0.3s ease;
     position: relative;
     cursor: default;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }

 .modal-close-btn {
     position: absolute;
     top: 15px;
     right: 15px;
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
     color: #666;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: all 0.3s ease;
     z-index: 10;
 }

 .modal-close-btn:hover {
     background: #f0f0f0;
     color: #333;
     transform: scale(1.1);
 }

 .close-modal-btn {
     margin-top: 20px;
     transition: all 0.3s ease;
 }

 .close-modal-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 /* Modal Animation */
 .manufacturing-product-modal.show {
     opacity: 1;
 }

 .manufacturing-product-modal.show>div {
     transform: scale(1);
 }

 /* Our Applications Section - HEXaREL Style */
 .our-applications {
     background: transparent;

     padding: 30px 0px;
     position: relative;
     overflow: hidden;
 }

 .our-applications .section-title {
     color: var(--primary-color);
     text-align: center;
 }

 .our-applications .left {
     float: left;
     width: 25%;
     margin-right: 2%;
 }

 .our-applications .right {
     float: left;
     width: 73%;
 }

 .whitebox {
     background: #fff;
     position: relative;
     border-radius: 5px;
     overflow: hidden;
     transition: 0.5s;
     min-height: 345px;
     height: 345px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 }

 .whitebox::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 105%);
     height: 100%;
     width: 100%;
     z-index: 1;
     transition: all 0.3s ease-in-out;
     opacity: 0;
     transform: scale(0.8);
     display: none;
 }

 .whitebox:hover::before {
     opacity: 0;
     transform: scale(0.8);
     display: none;
 }

 .greyborder {
     border: 5px solid transparent;
     width: 100%;
     min-height: 345px;
     transition: 0.5s;
     z-index: 9;
     position: absolute;
 }

 .whitebox .imgcss {
     position: absolute;
     bottom: 60px;
     left: 0;
     z-index: 2;
     transition: all 0.5s ease;
 }

 .whitebox .imgcss img {
     max-width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 8px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     transition: all 0.5s ease;
     filter: brightness(0.9) contrast(1.1);
 }

 .whitebox:hover .imgcss {
     transform: translateY(-15px);
 }

 .whitebox:hover .imgcss img {
     transform: scale(1.05);
     filter: brightness(1.1) contrast(1.2);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
 }

 /* Specific styling for the first large thumbnail to match others */
 .our-applications .left .whitebox .imgcss {
     position: absolute;
     bottom: 110px;
     left: 20px;
     z-index: 2;
     transition: all 0.5s ease;
     width: 250px;
     height: 180px;
     border-radius: 10%;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .our-applications .left .whitebox .imgcss img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 10%;
     transition: all 0.5s ease;
     filter: brightness(0.9) contrast(1.1);
 }

 .our-applications .left .whitebox:hover .imgcss {
     transform: scale(1.1) translateY(-15px);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }

 .our-applications .left .whitebox:hover .imgcss img {
     transform: scale(1.1);
     filter: brightness(1.1) contrast(1.2);
 }

 .whitebox .text {
     position: absolute;
     color: #233F88;

     font-size: 20px;
     bottom: 25px;
     transition: 0.5s;
     left: 20px;
     line-height: 20px;
     z-index: 2;
 }

 .whitebox .bgimg {
     position: absolute;
     right: 0;
     top: 0;
     transition: 0.5s;
     z-index: 2;
     width: 100%;
     height: 100%;
     overflow: hidden;
     display: none;
 }

 .whitebox .bgimg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: all 0.5s ease;
     filter: brightness(0.8) contrast(1.1);
 }

 .whitebox:hover .bgimg img {
     transform: scale(1.1);
     filter: brightness(1) contrast(1.2);
 }

 .whitebox .btmshaodw {
     position: absolute;
     width: 100%;
     transition: 0.5s;
     bottom: -15px;
     background: url(../images/btmshaodw-whitebox.png) left bottom repeat-x;
     height: 35px;
     z-index: 2;
 }

 .whitebox:hover .greyborder {
     border: 4px solid #d1d1d1;
 }

 .whitebox:hover .btmshaodw {
     bottom: 0px;
 }

 .whitebox:hover .text {
     bottom: 45px;
 }

 .whitebox:hover .bgimg {
     right: 20px;
 }

 .smallbox {
     position: relative;
 }

 .smallbox .box {
     width: 32%;
     float: left;
     margin: 0px 2% 2% 0px;
 }

 .smallbox .whitebox {
     background: #fff;
     position: relative;
     border-radius: 5px;
     overflow: hidden;
     transition: 0.5s;
     min-height: 165px;
     height: 165px;
     box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
 }

 .smallbox .whitebox::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 105%);
     height: 100%;
     width: 100%;
     z-index: 1;
     transition: all 0.3s ease-in-out;
     opacity: 0;
     transform: scale(0.8);
     display: none;
 }

 .smallbox .whitebox:hover::before {
     opacity: 0;
     transform: scale(0.8);
     display: none;
 }

 .smallbox .greyborder {
     border: 4px solid transparent;
     width: 100%;
     min-height: 165px;
     transition: 0.5s;
     z-index: 999;
     position: absolute;
 }

 .smallbox .whitebox .imgcss {
     position: absolute;
     transition: 0.5s;
     z-index: 2;
     bottom: 60px;
     left: 100px;
     width: 200px;
     height: 160px;
     border-radius: 25%;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .smallbox .whitebox .imgcss img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: all 0.5s ease;
     filter: brightness(0.9) contrast(1.1);
 }

 /* Removed duplicate rule - keeping only the one below */

 .smallbox .whitebox .bgimg {
     position: absolute;
     right: 0;
     top: 0px;
     left: 0;
     transition: 0.5s;
     display: none;
     height: 100vh;
     background: url(../images/small-aappli-box-bg.png) left top repeat-x;
     z-index: 2;
 }

 .smallbox .whitebox:hover .text {
     bottom: 35px;
 }

 .smallbox .whitebox:hover .bgimg {
     top: 10px;
 }

 .smallbox .whitebox:hover .imgcss {
     right: 0px;
     bottom: 40px;
     transform: scale(1.1) translateY(-15px);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }

 .smallbox .whitebox:hover .btmshaodw {
     bottom: -5px;
 }

 /* Enhanced image loading and fallback */
 .whitebox .imgcss img,
 .whitebox .bgimg img {
     opacity: 0;
     animation: fadeInImage 0.6s ease-in-out forwards;
 }

 @keyframes fadeInImage {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* Image error handling */
 .whitebox .imgcss img:not([src]),
 .whitebox .bgimg img:not([src]) {
     display: none;
 }

 /* Responsive image improvements */
 @media (max-width: 768px) {

     .whitebox .imgcss img,
     .smallbox .whitebox .imgcss img {
         max-width: 100%;
         height: auto;
     }

     .smallbox .whitebox .imgcss {
         width: 170px;
         height: 150px;
         left: 80px;
         bottom: 21px;
     }

     /* Responsive design for the first large thumbnail */
     .our-applications .left .whitebox .imgcss {
         width: 60px;
         height: 60px;
         bottom: 50px;
         left: 15px;
     }
 }

 @media (max-width: 480px) {
     .our-applications .left .whitebox .imgcss {
         width: 250px;
         height: 150px;
         bottom: 70px;
         left: 10px;
     }
 }

 /* High DPI display support */
 @media (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi) {

     .whitebox .imgcss img,
     .whitebox .bgimg img {
         image-rendering: -webkit-optimize-contrast;
         image-rendering: crisp-edges;
     }
 }

 .smallbox .nomar {
     margin: 0px 0px 2% 0px;
 }

 /* Image hover effects enhancement */
 .whitebox:hover .imgcss::before {
     display: none;
 }

 /* Better image aspect ratio handling */
 .whitebox .imgcss img {
     aspect-ratio: 1;
     object-position: center;
 }

 /* Image error state */
 .whitebox .imgcss img:not([src]),
 .whitebox .imgcss img[src=""],
 .whitebox .imgcss img[src*="data:image/svg+xml"] {
     display: none;
 }

 .whitebox .imgcss:not(:has(img[src]))::after {
     content: '📦';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 24px;
     color: #ccc;
     z-index: 1;
 }

 /* Specific error handling for the first large thumbnail */
 .our-applications .left .whitebox .imgcss:not(:has(img[src]))::after {
     content: '🚗';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 32px;
     color: #ccc;
     z-index: 1;
 }

 /* Hover effects for the first large thumbnail */
 .our-applications .left .whitebox:hover .imgcss::before {
     display: none;
 }

 /* Responsive Design for HEXaREL Style Applications */
 @media (max-width: 768px) {
     .our-applications {
         padding: 80px 0;
     }

     .our-applications .left {
         float: none;
         width: 100%;
         margin-right: 0;
         margin-bottom: 30px;
     }

     .our-applications .right {
         float: none;
         width: 100%;
     }

     .smallbox .box {
         width: 48%;
         margin: 0px 1% 2% 1%;
     }

     .smallbox .nomar {
         margin: 0px 1% 2% 1%;
     }

     .whitebox {
         min-height: 280px;
         height: 280px;
     }

     .greyborder {
         min-height: 280px;
     }

     .smallbox .whitebox {
         min-height: 140px;
         height: 140px;
     }

     .smallbox .greyborder {
         min-height: 140px;
     }

     .whitebox .text {
         font-size: 22px;
         bottom: 30px;
     }

     .smallbox .whitebox .text {
         font-size: 18px;
         bottom: 25px;
     }
 }

 @media (max-width: 480px) {
     .our-applications {
         padding: 60px 0;
     }

     .smallbox .box {
         width: 100%;
         margin: 0px 0px 20px 0px;
     }

     .smallbox .nomar {
         margin: 0px 0px 20px 0px;
     }

     .whitebox {
         min-height: 250px;
         height: 250px;
     }

     .greyborder {
         min-height: 250px;
     }

     .smallbox .whitebox {
         min-height: 120px;
         height: 150px;
     }

     .smallbox .greyborder {
         min-height: 120px;
     }

     .whitebox .text {
         font-size: 18px;
         bottom: 25px;
     }

     .smallbox .whitebox .text {
         font-size: 16px;
         bottom: 20px;
     }
 }

 /* Animation for HEXaREL Style Applications */
 @keyframes whiteboxAppear {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 .whitebox {
     animation: whiteboxAppear 0.6s ease forwards;
 }

 .whitebox:nth-child(1) {
     animation-delay: 0.1s;
 }

 .whitebox:nth-child(2) {
     animation-delay: 0.2s;
 }

 .whitebox:nth-child(3) {
     animation-delay: 0.3s;
 }

 .whitebox:nth-child(4) {
     animation-delay: 0.4s;
 }

 .whitebox:nth-child(5) {
     animation-delay: 0.5s;
 }

 .whitebox:nth-child(6) {
     animation-delay: 0.6s;
 }

 .whitebox:nth-child(7) {
     animation-delay: 0.7s;
 }

 /* Enhanced Products Section - Matching Template Style */
 .products-section {
     background: var(--white-color);
     /* Match Premium Ivory */
     padding: 40px 0;
     position: relative;
     overflow: hidden;
     /* Removed Pattern */
 }

 .products-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: none;
     /* Remove Gradient Overlay */
     pointer-events: none;
 }

 /* Submenu Card Underline Refinement */
 .submenu-card {
     text-decoration: none !important;
 }

 .submenu-card h4 {
     display: inline-block;
     /* border-bottom removed for cleaner look */
     transition: color 0.3s ease;
 }

 .submenu-card:hover h4 {
     /* No border change */
     color: var(--accent-color);
 }

 .submenu-card .card-icon {
     text-decoration: none !important;
 }

 /* Industrial Rugged Product Cards - CORRECTED PLACEMENT */
 /* Industrial Rugged Product Cards - Smooth Refinement */
 .product-card {
     background: #ffffff;
     border-radius: 20px;
     /* Smooth high-end look */
     /* border: 1px solid rgba(0,0,0,0.1); */
     /* border-top: 4px solid var(--accent-color); Replaced by pseudo for smooth fit */
     box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1);
     /* Solid Hard Shadow */
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     position: relative;
     overflow: hidden;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 /* Gradient Top Bar following the curve */
 .product-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 6px;
     background: var(--accent-color);
     z-index: 5;
 }

 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.15);
     /* Shadow moves with lift */
 }

 /* Technical Badge */
 .product-badge {
     position: absolute;
     top: 15px;
     right: 15px;
     background: #2E2E2E;
     color: #fff;
     padding: 4px 10px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     z-index: 2;
     border: 1px solid #fff;
     box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     /* Slight softening */
 }

 .product-image {
     position: relative;
     height: 220px;
     overflow: hidden;
     border-bottom: 2px solid #eee;
 }

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

 .product-card:hover .product-image img {
     transform: scale(1.05);
     /* Technical Zoom */
 }

 /* Industrial Content */
 .product-content {
     padding: 25px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 .product-content h3 {
     font-size: 22px;
     font-weight: 800;
     color: var(--text-color);
     margin-bottom: 10px;
     margin-top: 0;
     text-transform: uppercase;
     /* Blueprint Style */
     letter-spacing: -0.5px;
 }

 .product-content p {
     font-size: 15px;
     color: #666;
     margin-bottom: 20px;
     line-height: 1.5;
     flex-grow: 1;
 }

 /* Technical Specs Grid */
 .product-specs {
     display: flex;
     gap: 10px;
     margin-bottom: 25px;
     flex-wrap: wrap;
 }

 .spec-item {
     background: #f4f4f4;
     color: #444;
     padding: 6px 12px;
     font-size: 13px;
     font-family: 'Courier New', Courier, monospace;
     /* Monospace for Data */
     font-weight: 600;
     border-left: 3px solid #ccc;
     text-transform: uppercase;
     border-radius: 6px;
     /* Softened Data Tag */
 }

 /* Rugged Button */
 .spec-btn {
     background: transparent;
     color: var(--accent-color);
     border: 2px solid var(--accent-color);
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     cursor: pointer;
     transition: all 0.3s ease;
     width: 100%;
     text-align: center;
     border-radius: 30px;
     /* Smooth Pill Button */
 }

 .spec-btn:hover {
     background: var(--accent-color);
     color: #fff;
     box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
     /* Button Pop */
     transform: translateY(-2px);
 }

 .products-section .section-title {
     font-size: 52px;
     font-weight: 700;
     color: var(--primary-color);
     text-align: center;
     margin-bottom: 25px;
     line-height: 1.1;
     position: relative;
     z-index: 2;
 }

 .products-section .section-title h3 {
     font-size: 18px;
     font-weight: 600;
     color: var(--accent-color);
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 15px;
 }

 .products-section .section-title h2 {
     font-size: 52px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 30px;
     line-height: 1.1;
 }

 .products-section .title-border {
     width: 80px;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     margin: 0 auto 40px;
     border-radius: 2px;
     position: relative;
 }

 .products-section .title-border::after {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     border-radius: 3px;
     opacity: 0.3;
     z-index: -1;
 }

 .products-section .section-title p {
     font-size: 18px;
     color: var(--text-color);
     text-align: center;
     line-height: 1.7;
     max-width: 900px;
     margin: 0 auto 80px;
     font-weight: 400;
     opacity: 0.9;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
     gap: 40px;
     margin-bottom: 80px;
     position: relative;
     z-index: 2;
     align-items: stretch;
 }

 /* Unified product title color */
 .product-color-red,
 .product-color-gold,
 .product-color-silver,
 .product-color-blue,
 .product-color-purple,
 .product-color-green {
     color: var(--primary-color);
 }

 /* Enhanced Project Cards */
 .project-item {
     background: #ffffff;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     z-index: 1;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .project-item:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
     z-index: 10;
 }

 .project-featured-image {
     position: relative;
     overflow: hidden;
     height: 280px;
 }

 .project-featured-image figure {
     height: 100%;
     margin: 0;
 }

 .project-featured-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

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

 .hover-content {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(255, 255, 255, 0.95);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     z-index: 10;
     padding: 30px;
     text-align: center;
     backdrop-filter: blur(5px);
     overflow-y: auto;
     max-height: 100%;
 }

 .project-item:hover .hover-content {
     opacity: 1;
 }

 .hover-content h4 {
     color: var(--primary-color);
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
     position: relative;
     word-wrap: break-word;
     overflow-wrap: break-word;
     hyphens: auto;
     max-height: 2.4em;
     /* 2 lines of text */
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .hover-content h4::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 50%;
     transform: translateX(-50%);
     width: 40px;
     height: 2px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     border-radius: 1px;
 }

 .hover-content ul {
     list-style: none;
     padding: 0;
     margin: 0;
     width: 100%;
     max-height: 60%;
     overflow-y: auto;
 }

 .hover-content ul li {
     color: var(--text-color);
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 12px;
     font-weight: 500;
     position: relative;
     padding-left: 20px;
     word-wrap: break-word;
     overflow-wrap: break-word;
     hyphens: auto;
     max-width: 100%;
 }

 .hover-content ul li::before {
     content: '•';
     position: absolute;
     left: 0;
     color: var(--accent-color);
     font-weight: bold;
     font-size: 18px;
 }

 .hover-content ul li:last-child {
     margin-bottom: 0;
 }

 /* Enhanced Project Content Styles */
 .products-section .project-content {
     padding: 35px 30px;
     background: #ffffff;
     position: relative !important;
     left: auto !important;
     bottom: auto !important;
     right: auto !important;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     min-height: 0;
     overflow: hidden;
     z-index: 1;
 }

 .products-section .project-content h3 {
     font-size: 26px !important;
     font-weight: 700 !important;
     margin-bottom: 18px !important;
     line-height: 1.2 !important;
     position: relative;
     color: var(--text-color) !important;
     text-transform: none !important;
     word-wrap: break-word;
     overflow-wrap: break-word;
     hyphens: auto;
     max-height: 3.6em;
     /* 2 lines of text with line-height 1.2 */
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     flex-shrink: 0;
 }

 .project-content h3::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 30px;
     height: 2px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     border-radius: 1px;
 }

 .products-section .project-content h2 {
     font-size: 17px !important;
     line-height: 1.7 !important;
     color: var(--text-color) !important;
     margin: 0 !important;
     opacity: 0.85 !important;
     font-weight: 400 !important;
     text-transform: none !important;
     word-wrap: break-word;
     overflow-wrap: break-word;
     hyphens: auto;
     max-height: 5.1em;
     /* 3 lines of text with line-height 1.7 */
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     flex: 1;
     min-height: 0;
 }

 /* Enhanced Project Button */
 .products-section .project-btn {
     position: absolute;
     top: 30px;
     right: 30px;
     z-index: 5;
     transition: all 0.3s ease;
     pointer-events: none;
 }

 .products-section .project-btn a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     pointer-events: auto;
 }

 .products-section .project-btn a:hover {
     background: var(--primary-color);
     transform: scale(1.1);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 .products-section .project-btn img {
     width: 20px;
     height: 20px;
     transition: all 0.3s ease;
 }

 .products-section .project-btn a:hover img {
     filter: brightness(0) invert(1);
 }

 /* Enhanced CTA Section */

 .products-section .btn-default {
     margin: 0 10px;
     padding: 15px 35px;
     font-size: 16px;
     font-weight: 600;
     border-radius: 50px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .products-section .btn-default::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.5s ease;
 }

 .products-section .btn-default:hover::before {
     left: 100%;
 }

 .products-section .btn-highlighted {
     background: linear-gradient(135deg, #667eea, #764ba2);
     color: #ffffff;
     border: none;
 }

 .products-section .btn-highlighted:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
 }





 /* Responsive Design */
 @media (max-width: 1200px) {
     .products-grid {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 25px;
     }
 }

 @media (max-width: 768px) {
     .products-section {
         padding: 60px 0;
     }

     .products-section .section-title {
         font-size: 36px;
     }

     .products-section .section-description {
         font-size: 16px;
         margin-bottom: 40px;
     }

     .products-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }
 }

 @media (max-width: 480px) {
     .products-section .section-title {
         font-size: 28px;
     }

     .products-section .section-title h2 {
         font-size: 36px;
     }

     .products-section .section-title h3 {
         font-size: 16px;
         letter-spacing: 1px;
     }

     .products-section .section-title p {
         font-size: 16px;
         line-height: 1.6;
         margin-bottom: 60px;
     }

     .products-grid {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .project-item {
         margin-bottom: 20px;
     }

     .project-featured-image {
         height: 220px;
     }

     .project-content {
         padding: 25px 20px;
     }

     .project-content h3 {
         font-size: 22px;
         margin-bottom: 15px;
         max-height: 2.6em;
         -webkit-line-clamp: 2;
     }

     .project-content h2 {
         font-size: 15px;
         line-height: 1.6;
         max-height: 4.8em;
         /* 3 lines with line-height 1.6 */
         -webkit-line-clamp: 3;
         text-overflow: ellipsis;
     }

     .hover-content {
         padding: 20px;
     }

     .hover-content h4 {
         font-size: 18px;
         margin-bottom: 15px;
         max-height: 2.2em;
         -webkit-line-clamp: 2;
     }

     .hover-content ul li {
         font-size: 14px;
         margin-bottom: 10px;
         padding-left: 15px;
         line-height: 1.4;
     }

     .hover-content ul {
         max-height: 50%;
     }

     .project-btn {
         top: 20px;
         right: 20px;
     }

     .project-btn a {
         width: 45px;
         height: 45px;
     }

     .project-btn img {
         width: 18px;
         height: 18px;
     }

     .products-section .btn-default {
         padding: 12px 25px;
         font-size: 14px;
         margin: 5px;
     }

     .products-section .text-center {
         margin-top: 60px;
     }
 }

 /* Enhanced Clients Section Styling */
 .our-testimonials {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     position: relative;
     overflow: hidden;
     padding-top: 40px;
 }



 .our-testimonials .container {
     position: relative;
     z-index: 2;
 }

 .our-testimonials .section-title p {
     font-size: 18px;
     line-height: 1.7;
     color: var(--text-color);
     opacity: 0.8;
     max-width: 800px;
     margin: 0 auto 60px;
 }

 /* Enhanced Client Logo Grid */
 .clients-logo-grid {
     margin-top: 60px;
     margin-bottom: 80px;
 }

 .client-logo-item {
     text-align: center;
     padding: 40px 20px;
     margin-bottom: 30px;
     transition: all 0.3s ease;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.3);
     position: relative;
     overflow: hidden;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }

 .client-logo-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
     opacity: 0;
     transition: all 0.4s ease;
     z-index: 1;
 }

 .client-logo-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.95);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border-color: rgba(var(--primary-color-rgb), 0.3);
 }

 .client-logo-item:hover::before {
     opacity: 1;
 }

 .client-logo {
     margin-bottom: 20px;
     position: relative;
     z-index: 2;
 }

 .client-logo img {
     max-width: 120px;
     max-height: 60px;
     object-fit: contain;
     filter: grayscale(100%) brightness(0.7);
     transition: all 0.4s ease;
     opacity: 0.7;
 }

 .client-logo-item:hover .client-logo img {
     filter: grayscale(0%) brightness(1);
     transform: scale(1.1);
     opacity: 1;
 }

 .client-name {
     position: relative;
     z-index: 2;
 }

 .client-name h4 {
     color: var(--text-color);
     font-size: 18px;
     font-weight: 600;
     margin: 0 0 8px 0;
     text-transform: none;
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
 }

 .client-category {
     display: block;
     font-size: 14px;
     color: var(--accent-color);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 1px;
     opacity: 0.8;
     transition: all 0.3s ease;
 }

 .client-logo-item:hover .client-name h4 {
     color: var(--primary-color);
 }

 .client-logo-item:hover .client-category {
     color: var(--primary-color);
     opacity: 1;
 }

 /* Client Overlay */
 .client-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.9) 0%, rgba(var(--accent-color-rgb), 0.9) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transform: scale(0.9);
     transition: all 0.3s ease;
     z-index: 3;
 }

 .client-logo-item:hover .client-overlay {
     opacity: 1;
     transform: scale(1);
 }

 .overlay-content {
     text-align: center;
     color: white;
     padding: 20px;
 }

 .overlay-content i {
     font-size: 32px;
     margin-bottom: 15px;
     display: block;
     opacity: 0.9;
 }

 .overlay-content p {
     font-size: 16px;
     font-weight: 500;
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* Client Stats Section */
 .client-stats-section {
     margin-top: 80px;
     padding: 60px 0;
     background: rgba(255, 255, 255, 0.8);
     border-radius: 30px;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }

 .stat-item {
     text-align: center;
     padding: 30px 20px;
     transition: all 0.3s ease;
     position: relative;
 }

 .stat-item::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1) 0%, rgba(var(--accent-color-rgb), 0.1) 100%);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: all 0.3s ease;
     z-index: 1;
 }

 .stat-item:hover::before {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.2);
 }

 .stat-icon {
     position: relative;
     z-index: 2;
     margin-bottom: 20px;
 }

 .stat-icon i {
     font-size: 48px;
     color: var(--primary-color);
     transition: all 0.3s ease;
 }

 .stat-item:hover .stat-icon i {
     transform: scale(1.1);
     color: var(--accent-color);
 }

 .stat-content {
     position: relative;
     z-index: 2;
 }

 .stat-content h3 {
     font-size: 36px;
     font-weight: 700;
     color: var(--text-color);
     margin: 0 0 10px 0;
     transition: all 0.3s ease;
 }

 .stat-item:hover .stat-content h3 {
     color: var(--primary-color);
     transform: scale(1.05);
 }

 .stat-content p {
     font-size: 16px;
     color: var(--text-color);
     opacity: 0.8;
     margin: 0;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
 }

 .stat-item:hover .stat-content p {
     color: var(--accent-color);
     opacity: 1;
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .client-logo-item {
         padding: 30px 15px;
     }

     .client-logo img {
         max-width: 100px;
         max-height: 50px;
     }

     .client-name h4 {
         font-size: 16px;
     }

     .client-category {
         font-size: 12px;
     }
 }

 @media (max-width: 768px) {
     .our-testimonials .section-title p {
         font-size: 16px;
         margin-bottom: 40px;
     }

     .clients-logo-grid {
         margin-top: 40px;
         margin-bottom: 60px;
     }

     .client-logo-item {
         padding: 25px 15px;
         margin-bottom: 20px;
     }

     .client-logo img {
         max-width: 80px;
         max-height: 40px;
     }

     .client-name h4 {
         font-size: 14px;
     }

     .client-category {
         font-size: 11px;
     }

     .client-stats-section {
         margin-top: 60px;
         padding: 40px 0;
     }

     .stat-item {
         padding: 20px 15px;
         margin-bottom: 20px;
     }

     .stat-icon i {
         font-size: 36px;
     }

     .stat-content h3 {
         font-size: 28px;
     }

     .stat-content p {
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     .our-testimonials .section-title p {
         font-size: 15px;
         margin-bottom: 30px;
     }

     .clients-logo-grid {
         margin-top: 30px;
         margin-bottom: 40px;
     }

     .client-logo-item {
         padding: 20px 10px;
         margin-bottom: 15px;
         border-radius: 15px;
     }

     .client-logo img {
         max-width: 60px;
         max-height: 30px;
     }

     .client-name h4 {
         font-size: 13px;
     }

     .client-category {
         font-size: 10px;
     }

     .overlay-content i {
         font-size: 24px;
     }

     .overlay-content p {
         font-size: 14px;
     }

     .client-stats-section {
         margin-top: 40px;
         padding: 30px 0;
         border-radius: 20px;
     }

     .stat-item {
         padding: 15px 10px;
     }

     .stat-icon i {
         font-size: 28px;
     }

     .stat-content h3 {
         font-size: 24px;
     }

     .stat-content p {
         font-size: 12px;
     }
 }

 /* Animation Enhancements - Disabled for Performance */
 /* 
@keyframes clientCardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.client-logo-item {
    animation: clientCardFloat 6s ease-in-out infinite;
}

.client-logo-item:nth-child(2) {
    animation-delay: 0.5s;
}

.client-logo-item:nth-child(3) {
    animation-delay: 1s;
}

.client-logo-item:nth-child(4) {
    animation-delay: 1.5s;
}

.client-logo-item:nth-child(5) {
    animation-delay: 2s;
}

.client-logo-item:nth-child(6) {
    animation-delay: 2.5s;
}

.client-logo-item:nth-child(7) {
    animation-delay: 3s;
}

.client-logo-item:nth-child(8) {
    animation-delay: 3.5s;
}

.client-logo-item:hover {
    animation: none;
}

@keyframes statCountUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-item {
    animation: statCountUp 0.6s ease-out forwards;
    opacity: 0;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }
*/

 /* About Page Specific Hexagonal Shapes - Alternative Classes */
 .about-hexaouter {
     position: relative;
     float: left;
     width: 32.3%;
     min-height: 430px;
     height: 430px;
     left: 100px;
 }

 .about-hex {
     position: absolute;
     margin: 10px;
     width: 113px;
     top: 0;
     height: 197px;
     transition: 0.5s;
     border-radius: 1em/.5em;
     background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
     border: 2px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(35, 63, 136, 0.3);
 }

 .about-hex:hover {
     top: -10px;
     transform: scale(1.05);
     box-shadow: 0 12px 40px rgba(35, 63, 136, 0.4);
 }

 .about-hex .tekst i {
     transition: transform 0.3s ease;
 }

 .about-hex:hover .tekst i {
     transform: scale(1.2) rotate(5deg);
 }

 .about-hex.btmmove {
     background: #233f88;
     top: 205px;
 }

 .about-hex.btmmove:hover {
     top: 215px;
 }

 .about-hex.btmmove.center {
     position: absolute;
     left: 179px;
     top: 102px;
 }

 .about-hex.btmmove.center:hover {
     position: absolute;
     left: 179px;
     top: 102px;
 }

 .about-hex:before,
 .about-hex:after {
     position: absolute;
     width: inherit;
     height: inherit;
     border-radius: inherit;
     background: inherit;
     content: '';
 }

 .about-hex:before {
     -webkit-transform: rotate(60deg);
     transform: rotate(60deg);
 }

 .about-hex:after {
     -webkit-transform: rotate(-60deg);
     transform: rotate(-60deg);
 }

 .about-hex .tekst {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     color: #fff;
     font-size: 12px;
     font-weight: 600;
     z-index: 2;
     line-height: 1.4;
 }

 .about-hex .tekst i {
     font-size: 24px;
     display: block;
     margin-bottom: 8px;
 }

 .about-hex .content {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: rgba(255, 255, 255, 0.95);
     color: #333;
     padding: 15px;
     text-align: center;
     font-size: 12px;
     line-height: 1.4;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     z-index: 3;
 }

 .about-hex:hover .content {
     opacity: 1;
     visibility: visible;
     top: calc(100% + 10px);
 }

 /* Alternative How We Work Section for About Page */
 .about-how-we-work {
     background: url(../images/certs-bg.webp) no-repeat center center;
     background-size: cover;
     padding: 100px 0;
     position: relative;
 }

 .about-how-we-work::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(20, 25, 30, 0.8);
     /* Dark overlay for readability */
     z-index: 1;
     /* Ensure overlay is above background but below content */
 }

 .about-how-we-work-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .about-how-we-work-item {
     background: #fff;
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-left: 4px solid #233F88;
 }

 .about-how-we-work-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(35, 63, 136, 0.2);
 }

 .about-how-we-work-item .icon-box {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
 }

 .about-how-we-work-item .icon-box img {
     width: 30px;
     height: 30px;
     filter: brightness(0) invert(1);
 }

 .about-how-we-work-content h3 {
     color: #233F88;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 15px;
     text-transform: uppercase;
 }

 .about-how-we-work-content p {
     color: #666;
     line-height: 1.6;
     margin-bottom: 0;
 }

 /* Hero Video Styles */
 .hero-slider-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
 }

 .hero-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     pointer-events: none;
 }

 /* Ensure slide container allows absolute positioning of video */
 .hero-slide {
     position: relative;
     overflow: hidden;
 }

 /* Premium Header Button */
 .header-btn .btn-default {
     background: transparent;
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
     padding: 10px 25px;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border-radius: 4px;
     /* Slight rounding, not full pill */
     transition: all 0.3s ease;
 }

 .header-btn .btn-default:hover {
     background: var(--primary-color);
     color: #fff;
     box-shadow: 0 5px 15px rgba(35, 63, 136, 0.3);
     /* Soft shadow on hover */
     transform: translateY(-2px);
 }

 /* =================================================================
   Certification Flip Card Styles
   ================================================================= */
 .flip-card {
     background-color: transparent;
     perspective: 1000px;
     min-height: 280px;
     /* Ensure sufficient height */
     margin-bottom: 30px;
 }

 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.8s;
     transform-style: preserve-3d;
 }

 .flip-card:hover .flip-card-inner,
 .flip-card.flipped .flip-card-inner {
     transform: rotateY(180deg);
 }

 .flip-card-front,
 .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     border-radius: 15px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     top: 0;
     left: 0;
 }

 .flip-card-front {
     background-color: #fff;
     color: black;
     z-index: 2;
 }

 .flip-card-back {
     background-color: var(--accent-color);
     color: white;
     transform: rotateY(180deg);
     z-index: 1;
 }

 .flip-card-back h3 {
     color: white;
     font-size: 18px;
     margin-bottom: 10px;
 }

 .flip-card-back p {
     color: white;
     font-size: 14px;
     line-height: 1.5;
 }

 /* Gradient Backgrounds for Specific Cards */
 #oeko-tex-card .flip-card-back {
     background: linear-gradient(135deg, #a4cf5f 0%, #7db928 100%);
 }

 #grs-card .flip-card-back {
     background: linear-gradient(135deg, #00b5ad 0%, #008294 100%);
 }

 #sedex-card .flip-card-back {
     background: linear-gradient(135deg, #e9769f 0%, #ca5c83 100%);
 }

 #iso-card .flip-card-back {
     background: linear-gradient(135deg, #005eb8 0%, #003f7a 100%);
 }

 /* Adjust Icon Box styles for Front Face */
 .flip-card-front .icon-box {
     margin-bottom: 0;
 }

 /* Flip Card Styles for Certifications */
 .how-we-work-item {
     perspective: 1000px;
     min-height: 320px;
     /* Ensure container has height */
     cursor: pointer;
 }

 .flip-card {
     background-color: transparent;
     width: 100%;
     height: 100%;
 }

 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.8s;
     transform-style: preserve-3d;
 }

 /* Flip on hover or active class */
 .how-we-work-item:hover .flip-card-inner,
 .how-we-work-item.auto-flip .flip-card-inner {
     transform: rotateY(180deg);
 }

 .flip-card-front,
 .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-radius: 15px;
     /* Match existing radius if any */
 }

 /* Front Style - Icon */
 .flip-card-front {
     background-color: #fff;
     /* or transparent depending on design */
     z-index: 2;
 }

 /* Back Style - Content */
 .flip-card-back {
     transform: rotateY(180deg);
     background-color: #f8f9fa;
     /* Light background for text */
     padding: 20px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 /* Adjust existing classes to fit flip structure */
 .flip-card-front .icon-box {
     margin-bottom: 0;
 }

 .flip-card-back .how-we-work-content {
     text-align: center;
 }

 /* Grid Layout for Certifications */
 .how-we-work-list {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     justify-content: center;
 }

 .how-we-work-item {
     flex: 1 1 250px;
     /* Grow, shrink, base width */
     max-width: 300px;
 }

 /* Skip Link */
 .visually-hidden-focusable:not(:focus):not(:focus-within) {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;
     border: 0 !important;
 }

 .skip-link {
     position: absolute;
     top: 10px;
     left: 10px;
     background: #fff;
     color: #333;
     padding: 10px;
     z-index: 999999;
     text-decoration: none;
     font-weight: bold;
 }

 /* =================================================================
    PRODUCT TABS MOBILE WRAP FIX (FINAL OVERRIDE)
    ================================================================= */
 @media (max-width: 991px) {
     .product-filters {
         width: 100% !important;
         padding: 0 10px !important;
         display: flex !important;
         justify-content: center !important;
         margin: 20px 0 30px 0 !important;
         opacity: 1 !important;
         transform: none !important;
         overflow: visible !important;
         white-space: normal !important;
     }

     .product-filters .filter-tabs {
         display: flex !important;
         flex-wrap: wrap !important;
         width: 100% !important;
         min-width: 0 !important;
         max-width: 100% !important;
         padding: 12px 10px !important;
         gap: 8px !important;
         background: rgba(255, 255, 255, 0.98) !important;
         border-radius: 20px !important;
         border: 1px solid rgba(0, 0, 0, 0.08) !important;
         justify-content: center !important;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05) !important;
         white-space: normal !important;
     }

     .product-filters .filter-btn {
         flex: 0 1 auto !important;
         width: auto !important;
         white-space: nowrap !important;
         /* Keep text one line within button */
         padding: 8px 16px !important;
         font-size: 12px !important;
         display: inline-flex !important;
         align-items: center !important;
         justify-content: center !important;
         text-transform: uppercase !important;
         letter-spacing: 0.5px !important;
         min-height: 40px !important;
         text-align: center !important;
         border-radius: 30px !important;
         border: 1px solid transparent !important;
         transition: all 0.3s ease !important;
     }

     /* Special handling for "All Products" to be more prominent or balanced */
     .product-filters .filter-btn[data-filter="all"] {
         flex: 1 1 100% !important;
         margin-bottom: 2px !important;
         border-radius: 15px !important;
     }

     .product-filters .filter-btn.active {
         background: linear-gradient(135deg, #4284d6 0%, #2a5a9e 100%) !important;
         color: #fff !important;
         box-shadow: 0 4px 12px rgba(66, 132, 214, 0.2) !important;
     }
 }

 /* --- Premium Certifications UI (Expert Redesign) --- */
 .certifications-premium {
     background-color: #f8faff;
     position: relative;
     padding: 100px 0;
     overflow: hidden;
     z-index: 1;
 }

 /* Subtle dot pattern for depth */
 .certifications-premium::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(#233f88 0.5px, transparent 0.5px);
     background-size: 40px 40px;
     opacity: 0.04;
     pointer-events: none;
     z-index: -1;
 }

 /* Float Animations for Items */
 .cert-item-premium {
     animation: float-vertical 8s ease-in-out infinite;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 .cert-item-premium:nth-child(even) {
     animation-delay: 2s;
 }

 .cert-item-premium:nth-child(odd) {
     animation-delay: -2s;
 }

 @keyframes float-vertical {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 /* Hexagon Hover Effect & Shadows */
 .cert-card-wrapper {
     position: relative;
     width: 260px;
     height: 260px;
     margin: 0 auto 30px;
 }

 .cert-premium-hover {
     transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.08));
 }

 .cert-item-premium:hover .cert-premium-hover {
     transform: scale(1.08) rotate(2deg);
     filter: drop-shadow(0 25px 50px rgba(35, 63, 136, 0.15));
 }

 /* Refined Backface Content */
 .cert-content-back-premium {
     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2) !important;
 }

 .cert-content-back-premium h3 {
     font-size: 18px !important;
     letter-spacing: 0.5px;
     font-weight: 700 !important;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .cert-content-back-premium p {
     font-size: 13px !important;
     opacity: 0.9;
     line-height: 1.4 !important;
 }

 /* Verified Badge Glow */
 .cert-item-premium::after {
     content: 'VERIFIED';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%) translateY(20px);
     background: #233f88;
     color: white;
     font-size: 9px;
     padding: 3px 12px;
     border-radius: 20px;
     letter-spacing: 1px;
     font-weight: 700;
     opacity: 0;
     transition: 0.4s all;
 }

 .cert-item-premium:hover::after {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
 }

 /* Image focus and fallback */
 .whitebox .imgcss {
     position: relative;
     z-index: 1;
 }

 .whitebox .imgcss img {
     position: relative;
     z-index: 2;
     transition: transform 0.4s ease;
 }