:root {


         /* colors  */
         --navy: #0f1c3f;
         --navy-dark: #07122e;
         --navy-soft: #33436a;
         --navy-soft-bg: #E0E9FA;
         --orange: #FF6601;
         --orange-dark: #EF660B;
         --brand-orange-tint:#f2740e1f;
         --bg-1: #eef4fd;
         --bg-2: #f7f4fb;
         --gray-text: #5b6479;
         --drk-gray-text: #333;
         --main-gray-text: #353233;
         --white: #fff;
         --text-muted: #4C5270;






         /* Font Sizes */

         --fs-56: 3.5rem;
         /* 56px */
         --fs-45: 3rem;
         /* 45px */
         --fs-36: 2.25rem;
         /* 36px */
         --fs-34: 2.125rem;
         /* 34px */
         --fs-32: 2rem;
         /* 32px */
         --fs-28: 1.75rem;
         /* 28px */
         --fs-24: 1.5rem;
         /* 24px */
         --fs-22: 1.375rem;
         /* 22px */
         --fs-20: 1.25rem;
         /* 20px */
         --fs-18: 1.125rem;
         /* 18px */
         --fs-16: 1rem;
         /* 16px */
         --fs-14: 0.875rem;
         /* 14px */
         --fs-13: 0.8125rem;
         /* 13px */
         --fs-12: 0.75rem;
         /* 12px */
     }

     body {
         font-family: 'Inter', sans-serif;
         background: var(--white);
         color: var(--navy);
         margin: 0;
         font-size: var(--fs-18);
         overflow-x: hidden;
     }

     a {
         color: var(--orange);
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     .brand-word {
         font-family: 'Manrope', sans-serif
     }
 
     section {
         overflow-x: hidden;
     }

     /* buttons  */
     .btn-orange {
         background-color: var(--orange);
         color: #fff;
         border-radius: 8px;
         padding: 12px 24px;
         font-weight: 600;
         transition: all 0.3s;
         border: none;
         transition: all .3s;
         box-shadow: 0 10px 25px rgba(247, 121, 31, .28);
     }

     .btn-orange:hover {
         background-color: var(--orange-dark);
         color: #fff;
         transform: translateY(-1px);
     }


     .btn-dark-blue {
         background-color: var(--navy);
         color: #fff;
         padding: 12px 28px;
         border-radius: 8px;
         font-weight: 600;
         transition: all 0.3s;
         border: none;
     }

     .btn-dark-blue:hover {
         background-color: var(--navy-dark);
         transform: translateY(-2px);
         color: #fff;
     }

     .btn-outline-orange {
         border: 1px solid var(--orange);
         color: var(--orange);
         padding: 12px 28px;
         border-radius: 8px;
         font-weight: 600;
         background: transparent;
         transition: all 0.3s;
     }

     .btn-outline-orange:hover {
         background: var(--orange);
         color: #fff;
         transform: translateY(-2px);
     }

     .btn-outline-white {
         border: 1px solid var(--white);
         color: var(--white);
         padding: 12px 28px;
         border-radius: 8px;
         font-weight: 600;
         background: transparent;
         transition: all 0.3s;
     }

     .btn-outline-white:hover {
         background: var(--white);
         color: var(--navy);
         transform: translateY(-2px);
     }



     .btn-white {
         background-color: var(--white);
         color: var(--orange);
         border-radius: 8px;
         padding: 12px 24px;
         font-weight: 600;
         transition: all 0.3s;
         border: none;
         transition: all .3s;
         box-shadow: 0 10px 25px rgba(247, 121, 31, .28);
     }

     .btn-white:hover {
         background-color: var(--white);
         color: var(--orange-dark);
         transform: translateY(-1px);
     }


     .text-secondary {
         color: var(--text-muted) !important;
     }

     .nav-link {
         color: var(--drk-gray-text) !important;
         font-weight: 500;
         padding: 0.5rem 1rem !important;
         transition: color 0.2s;
     }

     .nav-link.active,
     .nav-link:hover {
         color: var(--orange) !important;
     }


     /* --- Smart Sticky Navbar Styles --- */
     .home-nav {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 1050;
         transition: all 0.4s ease-in-out;
         padding: 24px 0;
         background-color: transparent;
     }

     /* Active styling applied via GSAP/JS when scrolled */
     .home-nav.scrolled {
         padding: 12px 0;
         background-color: rgba(255, 255, 255, 0.95) !important;
         backdrop-filter: blur(10px);
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
     }
     .navbar-brand img{transition: all 0.4s ease-in-out;}
 .home-nav.scrolled .navbar-brand img{width: 174px;}

     /* Dropdown */
     .home-nav.navbar .dropdown-menu {
         border: 0;
         border-radius: 16px;
         padding: 12px;
         min-width: 280px;
         box-shadow: 0 15px 45px rgba(0, 0, 0, .12);
         animation: dropdown .25s ease;
     }


     .home-nav.navbar .dropdown-item {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 8px 8px;
         border-radius: 10px;
         font-size: var(--fs-16);
         font-weight: 500;
         color: var(--drk-gray-text);
         transition: .3s;
     }

     .home-nav.navbar .dropdown-item:hover {
         background: transparent;
         color: var(--orange);
         transform: translateX(6px);
     }

     .dropdown-item.active, .dropdown-item:active{  background: transparent;
         color: var(--orange)!important;}

     .home-nav.navbar .dropdown-divider {
         margin: .5rem 0;
         opacity: .08;
     }


     /* Animation */
     @keyframes dropdown {
         from {
             opacity: 0;
             transform: translateY(12px);
         }

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




     /* Remove Bootstrap default arrow */
     .home-nav.navbar .dropdown-toggle::after {
         display: none;
     }

     /* Add custom arrow */
     .home-nav.navbar .dropdown-toggle {
         position: relative;
         padding-right: 20px !important;
     }

     .home-nav.navbar .dropdown-toggle::before {
         content: "\f078";
         /* fa-chevron-down */
         font-family: "Font Awesome 7 Free";
         font-weight: 900;
         position: absolute;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
         font-size: var(--fs-12);
         transition: transform .3s ease;
     }

     /* Rotate when open */
     .home-nav.navbar .dropdown.show .dropdown-toggle::before,
     .home-nav.navbar .dropdown-toggle[aria-expanded="true"]::before {
         transform: translateY(-50%) rotate(180deg);
     }



     /* COMMON STYLE */
     .common-subtitle {
         font-size: var(--fs-18);
         color: var(--orange);
         padding-bottom: 4px;
         font-weight: 500;
         text-transform: uppercase;
     }

     .common-title {
         font-size: var(--fs-36);
         font-weight: 800;
     }

     .title-box {
         padding-bottom: 12px;
     }

     .dark-heading-text {
         color: var(--main-gray-text);
     }


     .breadcrumb {
         font-size: var(--fs-16);
         margin-bottom: 0px;
     }

     .breadcrumb-item a {
         color: var(--orange);
     }


     /* hero section start here */

     .hero-section {
         background: linear-gradient(120deg, var(--bg-1) 0%, #f2eefb 55%, var(--bg-2) 100%);

         overflow: hidden;
         position: relative;
         padding-top: 165px;
         padding-bottom: 80px;
         min-height: 80vh;
     }


     .hero-section:before {
         content: '';
         position: absolute;
         top: -180px;
         right: -140px;
         width: 560px;
         height: 560px;
         border-radius: 50%;
         background: radial-gradient(circle, rgba(247, 121, 31, .10) 0%, transparent 70%);
     }

     .hero-title {
         font-size: var(--fs-56);
         font-weight: 800 !important;
         color: var(--navy);
         line-height: 1.2;
     }

     .hero-title span {
         color: var(--orange);
         font-weight: 300;
     }

     .hero-desc {
         color: var(--gray-text);
         font-size: var(--fs-20);
         line-height: 1.6;
     }


     .avatar-group img {
         width: 55px;
         height: 55px;
         border-radius: 50%;
         border: 3px solid #fff;
         margin-right: -12px;
         object-fit: cover;
     }

     .hero-client-stats {
         padding-left: 5px;
     }

     .hero-client-stats h4 {
         font-size: var(--fs-34);
     }

     /* right hero animation  */
     /* --- Interactive Animation Container --- */
     .interactive-container {
         position: relative;
         width: 100%;
         max-width: 600px;
         aspect-ratio: 1 / 1;
         margin: 0 auto;
         perspective: 1000px;
         /* Enables 3D parallax depth */
     }

     /* Inner container that tilts slightly with mouse movement */
     .parallax-wrapper {
         position: relative;
         width: 100%;
         height: 100%;
         transform-style: preserve-3d;
         transition: transform 0.1s ease-out;
     }

     .pcb-image {
         width: 100%;
         height: 100%;
         object-fit: contain;
         display: block;
         border-radius: 24px;
         filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
     }

     /* SVG Layout for Drawing Lines (Updated to allow absolute positioning of individual SVGs) */
     .animation-svg {
         position: absolute;
         pointer-events: none;
         z-index: 2;
         overflow: visible;
         /* Prevents line caps or edges from clipping */
     }

     .pointer-line {
         stroke: var(--orange);
         stroke-width: 2;
         fill: none;
         stroke-linecap: round;
         stroke-linejoin: round;
         stroke-dasharray: 1000;
         stroke-dashoffset: 1000;
     }

     /* Waving/Pulsing Dot Target Points */
     .target-dot {
         position: absolute;
         width: 12px;
         height: 12px;
         background-color: var(--orange);
         border-radius: 50%;
         transform: translate(-50%, -50%);
         z-index: 3;
     }

     .dot-wave {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 100%;
         height: 100%;
         background-color: rgba(255 151 74 / 70%);
         border-radius: 50%;
         transform: translate(-50%, -50%);
         animation: pulseWave 2s infinite ease-out;
     }

     @keyframes pulseWave {
         0% {
             transform: translate(-50%, -50%) scale(1);
             opacity: 1;
         }

         100% {
             transform: translate(-50%, -50%) scale(3.5);
             opacity: 0;
         }
     }

     /* Callout Content Boxes */
     .callout-box {
         position: absolute;
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(8px);
         border-radius: 12px;
         padding: 10px 16px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
         z-index: 4;
         opacity: 0;
         transform: scale(0.8);
         min-width: 130px;
         border: 1px solid rgba(255, 255, 255, 0.5);
     }

     .callout-box h6 {
         margin: 0;
         font-size: 0.9rem;
         font-weight: 700;
         color: #0c1e43;
         display: flex;
         align-items: center;
     }

     .callout-box h6::before {
         content: '';
         display: inline-block;
         width: 6px;
         height: 6px;
         background: #ff6b00;
         margin-right: 6px;
         border-radius: 1px;
     }

     .callout-box p {
         margin: 0;
         font-size: 0.75rem;
         color: #7a8b9e;
     }


     /* ==========================================================================
   POSITION CONTROL AREA 
   (Adjust top, left, width, and height values here to arrange elements)
   ========================================================================== */

     /* 1. Target Coordinate Mapping (Pulsing Dots) */
     #t-wifi {
         top: 14%;
         left: 40%;
     }

     #t-qspi {
         top: 20%;
         left: 69%;
     }

     #t-mcu {
         top: 47.6%;
         left: 45%;
     }

     #t-sensor {
         top: 73.6%;
         left: 32.1%;
     }

     #t-usb {
         top: 90%;
         left: 51%;
     }

     /* 2. SVG Line Positions (Adjust top & left freely to align with dots & boxes) */
     #line-svg-wifi {
         top: 5%;
         left: 40%;
         width: 4%;
         height: 9%;
     }

     #line-svg-qspi {
         top: 20%;
         left: 70%;
         width: 13%;
         height: 1px;
     }

     #line-svg-mcu {
         top: 47.6%;
         left: 20%;
         width: 24%;
         height: 1px;
     }

     #line-svg-sensor {
         top: 73.6%;
         left: 17%;
         width: 15%;
         height: 6%;

     }

     #line-svg-sensor .pointer-line {
         stroke-width: 1.3;
     }

     #line-svg-usb {
         top: 91%;
         left: 51.6%;
         width: 14.4%;
         height: 8%;
     }

     #line-svg-usb .pointer-line {
         stroke-width: 1.1;
     }

     /* 3. Box Placements (Callout Cards) */
     #b-wifi {
         top: -4%;
         left: 42%;
     }

     #b-qspi {
         top: 15%;
         left: 83%;
     }

     #b-mcu {
         top: 43%;
         left: 1%;
         transform-origin: right center;
     }

     #b-sensor {
         top: 74%;
         left: -4%;
         transform-origin: right center;
     }

     #b-usb {
         top: 94%;
         left: 66%;
     }




     .mask-hero-h1 {
         overflow: hidden;
     }



     /* marque start here */
     .tech-marquee {
         background: var(--navy);
         overflow: hidden;
         white-space: nowrap;
     }

     .marquee-wrapper {
         overflow: hidden;
         width: 100%;
     }

     .marquee-track {
         display: flex;
         align-items: center;
         gap: 70px;
     }

     .marquee-item {
         display: flex;
         align-items: center;
         gap: 15px;
         color: var(--white);
         font-size: var(--fs-20);
         font-weight: 500;
         flex-shrink: 0;
     }

     .marquee-item i {
         color: var(--orange);
         font-size: var(--fs-20);
     }



     /* home client logo */

     .trusted-section {}

     .trusted-section .slick-slide {
         display: flex !important;
         justify-content: center;
         align-items: center;
         height: 90px;
     }

     .trusted-section.slick-slide>div {
         width: 100%;
     }

     .trusted-section .logo-item {
         width: 100%;
         height: 90px;
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 0 30px;
         box-sizing: border-box;

     }

     .trusted-section .logo-item img {
         max-width: 160px;
         max-height: 45px;
         width: auto;
         height: auto;

     }

     .trusted-section .trusted-title {
         font-size: var(--fs-22);
         color: var(--main-gray-text);
         margin-bottom: 45px;
         font-weight: 800;
     }


     .trusted-section .logo-item:hover img {
         filter: none;
         opacity: 1;
     }


     /* home about */
     /* Gallery */

     .about-gallery {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 22px;
         height: 520px;
     }

     .gallery-left img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 18px;
     }

     .gallery-right {
         display: grid;
         grid-template-rows: 1fr 0.58fr;
         gap: 22px;
     }

     .gallery-right img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 18px;
     }




     /* Services Section */


     .service-slider .slick-track{
    display:flex;
}

.service-slider .slick-slide{
    height:inherit;
}

.service-slider .slick-slide > div{
    height:100%;
}

.service-card{
    height:100%;
}


.service-slider .px-2{
    padding:0 8px;
}

/* Dots */
.service-slider .slick-dots{
    bottom:-45px;
}

.service-slider .slick-dots li{margin: 0px;}

.service-slider .slick-dots li button:before{
    color:#fff;
    opacity:.4;
    font-size:40px;
}

.service-slider .slick-dots li.slick-active button:before{
    opacity:1;
    color:var(--orange);
}

     .services-section {
         background: var(--navy);
         position: relative;
     }

     /* Decorative PCB Background */
     .services-section::before {
         content: "";
         position: absolute;
         left: 0;
         top: 0;
         width: 420px;
         height: 320px;
         background: url("../img/left-frame.png") no-repeat;
         background-size: contain;

     }

     .services-section::after {
         content: "";
         position: absolute;
         right: 0;
         bottom: 0;
         width: 420px;
         height: 320px;
         background: url("../img/right-frame.png") no-repeat;
         background-size: contain;
         background-position: bottom right;
     }



     .service-card {
         border: 1px solid rgba(255, 255, 255, 0.12);
         background: #021539;
         border-radius: 18px;
         transition: .35s;
         display: flex;
         flex-direction: column;

     }


     .service-card:hover {
        
         border-color: var(--orange);
         box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
     }

     .icon-box {
         padding: 20px 0;
         transition: .35s;
     }

     .icon-box img {
         transition: .35s;
     }

     .service-card:hover .icon-box img {
         color: var(--white);

     }

     .service-card h4 {
         font-size: var(--fs-22);
     }


     .arrow-btn {
         width: 52px;
         height: 52px;
         border-radius: 50%;
         background: rgba(255, 255, 255, .10);
         color: var(--white);
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         transition: .35s;
         margin-top: auto;
     }



     .service-card:hover .arrow-btn {
         background: var(--orange);
       transform:translate(5%,-10%);
     }




     /* Industry starts here */


     .seconday-light-bg {
         background-color: #F5F9FB;
     }

     .industry-card {
         border-radius: 20px;
         padding: 20px;
         transition: .35s;
         cursor: pointer;
     }

     .bg-peach {
         background: #fde9dd;
     }

     .bg-blue {
         background: #dfe5fb;
     }

     .arrow-industry-card {
         transition: .35s;
     }

     .industry-card:hover .arrow-industry-card {
         transform: translate(5px, -5px);
     }

     .industry-card h4 {
         margin-top: auto;
         font-size: var(--fs-20);
         font-weight: 700;
     }

     /* Slick */

     .industry-section .slick-list {
         margin: 0 -8px;
     }

     .industry-section .slick-dots {
         margin-top: 35px;
         bottom: -50px;
     }

     .industry-section .slick-dots li {
         margin: 0 0px;
     }

     .industry-section .slick-dots li button:before {
         font-size: 45px;
         color: #d4d4d4;
         opacity: 1;

     }

     .industry-section .slick-dots li.slick-active button:before {
         color: #ff6600;
     }

     .industry-section .slick-track {
         display: flex;
     }


     .industry-section .slick-slide>div {
         height: 100%;
     }



     /* why choose here */
     .left-icon-with-text .lf-i-text h4 {
         font-size: var(--fs-18);
         color: var(--navy);
     }

     /* portfolio here */
     .card-img-wrapper {
         height: 220px;
         /* Fixed image area */
     }

     .card-img-wrapper img {
         max-height: 100%;
         max-width: 100%;
         object-fit: contain;
         transition: .35s;
     }

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




     /* faqs */

     .accordion-button:not(.collapsed)::after {
         background-image: none;
     }

     .accordion-item {
         background: #f5f8fc;
     }

     .accordion-button {
         background: #f5f8fc;
         box-shadow: none !important;
         padding: 1.5rem;
         font-size: var(--fs-22);
     }

     .accordion-button:not(.collapsed) {
         background: #f5f8fc;
         box-shadow: none;
     }

     .accordion-body {
         background: #f5f8fc;
         padding-top: 0;
     }


     .accordion-flush>.accordion-item {
         border: none;
     }



     .accordion-button::after {
         background-image: none;
         content: "+";
         font-size: 2rem;
         font-weight: 300;
         width: auto;
         height: auto;
         transform: none;
     }

     .accordion-button {
         font-size: var(--fs-20);
     }

     .accordion-button:not(.collapsed)::after {
         content: "−";
     }



     /* Testimonial */

     .bg-body-common {
         background: #f5f8fc;
     }

     .quote-col {
         color: #C0D4DE;
     }

     .testimonial-slider .card {
         transition: .3s;
     }

     .testimonial-slider .card h5 {
         font-size: var(--fs-18);
     }

     .testimonial-slider .card:hover {
         transform: translateY(-2px);

     }

     .testimonial-slider .rounded-circle {
         object-fit: cover;
     }

     .testimonial-slider .slick-track {
         display: flex;
     }

     .testimonial-slider .slick-slide {

         height: inherit;

     }

     .testimonial-slider .slick-slide>div {

         height: 100%;

     }

     .testimonial-slider .slick-dots {

         margin-top: 35px;
         bottom: -50px;

     }

     .testimonial-slider .slick-dots li {
         margin: 0px;
     }

     .testimonial-slider .slick-dots li button:before {

         font-size: 45px;

     }

     .testimonial-slider .slick-dots li.slick-active button:before {

         color: var(--orange);

     }

     .testimonial-slider .card-body hr {
         color: #C0D4DE;
         opacity: 1;
     }

     .testimonial-slider .text-orange {
         color: var(--orange);
         font-size: 14px;
     }




     /* CTA Banner */

     .cta-section {
         position: relative;
         background-image: url(../img/cta-bg.jpg);
         background-size: cover;
     }



     /* blog cards */

     .blog-section .card .card-title {
         font-weight: 800;
         font-size: var(--fs-22);
         color: var(--main-gray-text);
     }

     .blog-section .card {
         border: 1px solid #D9E9F2;
         padding: 15px;
     }

     .blog-section .card .card-body {
         padding: 20px 0px 10px;
     }

     .blog-section .text-orange {
         font-weight: 700;
         color: var(--orange);
     }

     .blog-img {
         height: 240px;
         border-radius: 10px;
         overflow: hidden;
         /* Fixed image height */
     }

     .blog-card {
         transition: .3s ease;
         /* Only custom hover */
     }

     .blog-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12);
     }

     .blog-card img {
         transition: .35s ease;
     }



     .blog-card:hover .card-title {
         color: var(--orange) !important;
     }



     /* Footer css tarts here */

     .footer {
         background: #f7fbff;
     }

     .footer h4 {
         font-size: var(--fs-24);
         color: var(--drk-gray-text);
     }

     .footer,
     .footer a {
         color: var(--gray-text);
     }

     .footer-links li {
         margin-bottom: 1rem;
     }

     .footer-links a {
         text-decoration: none;
         transition: .3s;
     }

     .footer-links a:hover {

         color: var(--orange);
         padding-left: 6px;

     }

     .social-box {

         display: flex;
         align-items: center;
         gap: 15px;

         background: #fff;

         padding: 15px 20px;

         border-radius: .75rem;

         text-decoration: none;

         transition: .3s;

         color: var(--gray-text);

     }

     .social-box i {

         width: 20px;
         text-align: center;
         font-size: 18px;

     }

     .social-box:hover {

         background: var(--orange);
         color: #fff;

         transform: translateX(5px);

     }

     .footer .fa-location-dot,
     .footer .fa-phone,
     .footer .fa-envelope {

         width: 22px;

     }


     /* ==========================================================
       about us page
       ========================================================== */

     .pages-header {
         background: #EDF2FF;
         background: linear-gradient(180deg, rgb(232, 239, 255) 0%, rgba(242, 237, 250, 1) 57%, rgba(250, 240, 245, 0) 100%);
         overflow: hidden;
         position: relative;
         padding-top: 120px;
         min-height: 40vh;
         display: flex;
         align-items: center;
     }


     .pages-header {
         position: relative;
         overflow: hidden;
     }

     .pages-header h1 {
         font-size: var(--fs-45);
         font-weight: 800;
     }

     .pcb-left,
     .pcb-right {
         position: absolute;
         top: 30px;
         z-index: 0;
         opacity: .3;
     }

     .pcb-left {
         left: -21px;
     }

     .pcb-right {
         right: -21px;
         transform: scaleX(-1);
     }

     .pcb-left img,
     .pcb-right img {
         width: 450px;

         display: block;
     }

     .about-first-section .about-gallery {
         height: 450px;
     }



     .ab-gallery-grid {
         display: grid;
         grid-template-columns: 280px 1fr;
         grid-template-rows: 200px 200px;
         gap: 20px;
     }

     .ab-left-img {
         grid-row: 1 / 3;
     }

     .ab-gallery-grid>div {
         border-radius: 22px;
         overflow: hidden;
     }

     .ab-gallery-grid img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
     }





     .vision-card {
         border-radius: 20px;
         box-shadow: 0px 0px 6px 0px #dddddd14;
         transition: .35s;
     }

     .vision-card:hover {
         transform: translateY(-4px);
     }


     .vision-card h4 {
         font-size: var(--fs-20);
         color: var(--navy);
         font-weight: 800;
     }



     .cvg-img-box {
         overflow: hidden;
         border-radius: 16px;
         height: 210px;
     }

     .cvg-img-large {
         height: 100%;
         min-height: 444px;
     }

     .cvg-img-box img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform .4s ease;
     }

     .cvg-img-box:hover img {
         transform: scale(1.06);
     }


     .abo-stats-card {
         background: #fff;
         border: 1px solid #DCE3EF;
         border-radius: 20px;
         padding: 28px 22px;
         height: 100%;
         transition: all .35s ease;
     }

     .abo-stats-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
     }

     .abo-stats-card .abo-stats-number {
         font-weight: 800;
         font-size: var(--fs-32);
     }





     /* ==========================================================
       PCB page
       ========================================================== */


     .pcb-layout-card {
         padding: 24px;
         background: #F5F9FB;
         border: 1px solid #E0E9FA;
         border-radius: 20px;
         transition: .3s ease;
     }

     .pcb-layout-card:hover {
         box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
     }

     .pcb-layout-card .pcb-layout-title {
         font-weight: 800;
         color: var(--drk-gray-text);
         font-size: var(--fs-24);
     }

     .pcb-layout-img {
         overflow: hidden;
         border-radius: 16px;
     }

     .pcb-layout-img img {
         width: 100%;
         aspect-ratio: 16/10;
         object-fit: cover;
         transition: .4s;
     }

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

     .pcb-why-choose .pcb-why-right-col .feature-icon img {
         width: 40px;
     }


     .pcb-stats-section {
         background-color: var(--navy-soft-bg);
         border-radius: 0 130px 0 0;
     }

     .pcb-stat-item {
         padding: 10px;
         border-right: 1px solid #fff;
     }

     .pcb-stat-item h2 {
         font-weight: 800;
         font-size: var(--fs-36);
     }

     .pcb-stat-item p {
         margin-bottom: 0px;
     }




     /* Embedede page css start here */
     .emb-marquee {
         position: relative;
     }

     .action-control-marque {
         position: absolute;
         right: 3px;
         top: 5px;
     }

     .action-control-marque .btn {
         height: 54px !important;
         line-height: 30px;

         display: flex;
         align-items: center;
         gap: 10px;
         padding-right: 10px;
     }

     .btn-white-icon {
         width: 35px;
         height: 35px;
         border-radius: 50%;
         background: #ff6b00;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 18px;
         transition: .35s ease;
         flex-shrink: 0;
     }


     .btn-white-icon i {
         transform: rotate(45deg);
         font-size: 15px;
     }









     /* ===== steps ===== */


     /* ===== TIMELINE ===== */
     .timeline {
         position: relative;
     }

     .track {
         position: absolute;
         left: 50%;
         top: 0;
         bottom: 0;
         width: 2px;
         transform: translateX(-50%);
         background: var(--navy-soft-bg);
     }

     .track-fill {
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 0%;
         background: var(--navy-soft);
         border-radius: 2px;
     }

     .step {
         position: relative;
         display: grid;
         grid-template-columns: 1fr 64px 1fr;

         min-height: 130px;
     }

     .step-card {
         display: flex;
         align-items: flex-start;
         gap: 18px;
         opacity: 0;
         grid-row: 1;
     }

     .step.side-left .step-card {
         grid-column: 1;
         justify-self: end;
         margin-right: 30px;
         flex-direction: row-reverse;
         text-align: right;
     }

     .step.side-right .step-card {
         grid-column: 3;
         justify-self: start;
         margin-left: 30px;
     }

     .icon-chip {
         flex: none;
         width: 65px;
         height: 65px;
         border-radius: 14px;
         background: var(--navy-soft-bg);
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .step-title {
         font-size: var(--fs-22);
         font-weight: 800;
         font-family: 'Manrope', sans-serif;
     }

     .step-desc {
         color: var(--gray-text);
     }

     .marker-col {
         grid-column: 2;
         grid-row: 1;
         display: flex;
         justify-content: center;
     }

     .marker {
         position: relative;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: var(--navy-soft-bg);
         display: flex;
         align-items: center;
         justify-content: center;
         border: 5px solid #fff;
         font-size: var(--fs-16);
         font-weight: 800;
         transform: scale(0.6);
         opacity: 0;
         box-shadow: 0 0 0 6px var(--bg);
     }

     .marker.active {
         background: var(--line-fill);
         color: #fff;
         border-color: var(--line-fill);
     }



     /* ===== pcb baord and backgoround ===== */

     .wd-pcb-scene {
         position: relative;
         padding-top: 30px;

     }

     .wd-pcb-bg {
         width: 100%;
         display: block;
         height: 218px;
     }

     .wd-pcb-board {
         position: absolute;
         left: 50%;
         bottom: -13px;
         width: 780px;
         transform: translateX(-50%);
         transform-origin: center center;
         will-change: transform;

     }






     .iot-card {
         position: relative;
         display: block;
         overflow: hidden;
         border-radius: 20px;
         height: 334px;
         text-decoration: none;
     }

     .iot-card-lg {
         height: 690px;
     }

     .iot-card img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: .5s;
     }

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

     .iot-content {
         position: absolute;
         left: 40px;
         right: 40px;
         z-index: 2;
     }

     .iot-card-lg .iot-content {
         top: 32px;
         text-align: center;
     }

     .iot-card-lg .iot-content h2 {
         font-size: var(--fs-28);
         color: var(--navy-dark);
         font-weight: 800;
     }

     .iot-card-lg .iot-content p {
         color: var(--navy-soft);
     }

     .iot-bottom {
         left: 0px;
         right: 22px;
         bottom: 0px;
         width: 100%;
         padding: 20px 20px 0px;
     }

     .iot-bottom h2 {
         font-size: var(--fs-28);
         color: var(--navy-dark);
         font-weight: 800;
     }

     .iot-bottom p {
         color: var(--navy-dark);
     }




     .text-white h2,
     .text-white p {
         color: #fff;
     }





     .fea-item i img {
         width: 40px;
     }






     /* ==========================================================
       IoT-app
       ========================================================== */



     .iot-cta {
         position: relative;
         padding: 60px 0;
         background: url("../img/iot-cta-bg.jpg") center center/cover no-repeat;
         overflow: hidden;
         color: var(--white);
     }

     .iot-cta-title {
         font-weight: 800;
         font-size: var(--fs-32);
     }

     /* Dark Overlay */
     .iot-cta::before,
     .firmware-cta::before {
         content: "";
         position: absolute;
         inset: 0;

     }

     .iot-cta .container,
     .firmware-cta .container {
         position: relative;
         z-index: 2;
     }




     .iot-ser-card {
         height: 100%;
         padding: 32px;
         background: #edf2ff;
         border: 1px solid #dbe5ff;
         border-radius: 16px;
         transition: all .35s ease;
     }

     .iot-ser-card h4 {
         font-size: var(--fs-22);
         font-weight: 800;
     }



     /* ==========================================================
      Firmware Development Services
       ========================================================== */


     .firmware-cta {
         position: relative;
         padding: 60px 0;
         background: url("../img/custom-firmware.jpg") center center/cover no-repeat;
         overflow: hidden;
         color: var(--white);
     }




     .del-fmr-sl-card {
         background: #fff;
         border-radius: 20px;
         padding: 25px 25px;
         height: 100%;
         text-align: center;
         transition: .35s;
         border: 1px solid #EEF2FA;
     }

     .del-fmr-sl-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 50px rgba(12, 31, 66, .08);
     }

     .del-fmr-sl-icon {
         margin: 0 auto 25px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .del-fmr-sl-card-title {
         font-size: var(--fs-22);
         font-weight: 700;
         color: var(--navy-dark);
         line-height: 1.3;
     }

     .del-fmr-sl-icon img {
         width: 50px;
     }


     .navy-blue-bg {
         background-color: var(--navy);
     }

     .orange-underline {
         color: var(--orange);
         font-size: var(--fs-22);
         font-weight: 300;
         position: relative;
         padding-right: 40px;
     }

     .orange-underline i {
         background: var(--orange);
         width: 32px;
         height: 32px;
         color: var(--white);
         border-radius: 50%;
         line-height: 30px;
         font-size: 15px;
         font-weight: 800;
         transform: rotate(45deg);
         position: absolute;
         right: 0px;
     }




     /* ==========================================================
      PCB Assembly Services 
       ========================================================== */

     .pcb-asm-card {
         background: #fff;
         border-radius: 18px;
         transition: .35s;
         overflow: hidden;
     }

     .pcb-asm-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
     }

     .pcb-asm-img {
         width: 100%;
         height: 170px;
         object-fit: cover;
         border-radius: 12px;
     }


     .pcb-asm-title {
         font-weight: 800;
         font-size: var(--fs-22);
     }

     .ft-24 {
         font-size: var(--fs-24);
         font-weight: 800;
     }


     .ies-pcb-usp-pill {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 16px;


         padding: 13px 24px;

         background: #dfe8fb;
         border-radius: 999px;

         color: #1c1c1c;
         font-size: 18px;
         font-weight: 500;
         text-align: center;

         transition: all .3s ease;
     }

     .ies-pcb-usp-pill:hover {
         transform: translateY(-4px);
         box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
     }

     .ies-pcb-usp-dot {
         width: 8px;
         height: 8px;
         background: #fff;
         border-radius: 50%;
         flex-shrink: 0;
     }




         .ies-reng-pill {
             display: inline-flex;
             align-items: center;
             gap: 12px;
             padding: 12px 26px;
             background-color: #fff;
             border: 1px solid #dbe4fb;
             border-radius: 60px;
             font-size: var(--fs-16);
             transition: .3s;
         }

     .ies-reng-pill:hover {
         transform: translateY(-3px);

     }




     .ies-reng-use-list {
         display: flex;
         flex-direction: column;
         gap: 26px;
     }

     .ies-reng-use-item {
         display: flex;
         align-items: center;
         gap: 16px;
     }

     .ies-reng-use-icon {
         width: 28px;
         height: 28px;
         min-width: 28px;

         display: flex;
         align-items: center;
         justify-content: center;
         background: var(--orange);
         border-radius: 50%;
         color: var(--white);
         font-size: 13px;
     }

     .ies-reng-use-text {
         font-size: var(--fs-20);
         font-weight: 500;
         line-height: 1.5;
     }



     /* ==========================================================
      blog
       ========================================================== */


     /* ---------- Blog cards (thumbnail — no large images) ---------- */
     .blog-card {
         background: var(--white);
         border: 1px solid #e6e9f1;
         border-radius: 12px;
         overflow: hidden;
         height: 100%;
         transition: box-shadow .2s ease, transform .2s ease;
     }

     .blog-card .thumb-wrap {
         position: relative;
         height: 180px;
         /* capped thumbnail height — intentionally small */
         overflow: hidden;
     }

     .blog-card .thumb-wrap img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform .35s ease;
     }


     .thumb-badge {
         position: absolute;
         top: .7rem;
         left: .7rem;
         background: rgba(30, 36, 48, .72);
         backdrop-filter: blur(3px);
         color: #fff;
         font-size: var(--fs-12);
         font-weight: 600;
         padding: .28rem .65rem;
         border-radius: 999px;
        
         text-transform: uppercase;
     }

     .blog-card .card-body {
         padding: 15px;
     }

     .blog-card .card-title {
         font-size: var(--fs-20);
         font-weight: 700;
         margin-bottom: 16px;
     }

     .blog-card .card-title a {
         color: var(--drk-gray-text);
         text-decoration: none;
     }

     .blog-card .card-title a:hover {
         color: var(--orange);
     }

     .blog-card .card-text {
         font-size: var(--fs-16);
         color: var(--gray-text);
         margin-bottom: 16px;
     }

     .blog-card .card-footer-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding-top: 12px;
         border-top: 1px dashed #ccc;
     }

     .blog-card .card-footer-row a {
         font-size: var(--fs-14);
         font-weight: 700;
         text-decoration: none;
     }

     .meta-item {
         color: var(--gray-text);
         font-size: var(--fs-13);
         font-weight: 700;
         gap: 2px;
         display: inline-flex;
         align-items: center;

     }


     /* ---------- Small square list card (sidebar / recent posts) ---------- */
     .mini-post {
         display: flex;
         gap: 10px;
         align-items: flex-start;
     }

     .mini-post .mini-thumb {
         width: 64px;
         height: 64px;
         border-radius: 8px;
         overflow: hidden;
         flex: 0 0 auto;

     }

     .mini-post .mini-thumb img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     .mini-post h6 {
         font-size: var(14px);
         font-weight: 600;
         margin-bottom: 12px;
     }

     .mini-post h6 a {
         color: var(--drk-gray-text);
         text-decoration: none;
     }

     .mini-post h6 a:hover {
         color: var(--orange);
     }

     .mini-post .mini-date {
         color: var(--gray-text);
         font-size: var(--fs-13);
         font-weight: 700;
         gap: 2px;
         display: inline-flex;
         align-items: center;
     }


     /* ---------- Sidebar widgets ---------- */
     .widget {
         border: 1px solid #e6e9f1;
         border-radius: 12px;
         padding: 16px;
     }

     .widget+.widget {
         margin-top: 20px;
     }

     .widget-title {
         font-size: var(--fs-20);
         font-weight: 700;
         margin-bottom: 20px;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .widget-title i {
         color: var(--orange);
     }

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

     .cat-list li {
         border-bottom: 1px solid #e6e9f1;
     }

     .cat-list li:last-child {
         border-bottom: none;
     }

     .cat-list a {
         text-decoration: none;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 10px;
         color: var(--gray-text);
         font-size: var(--fs-16);
         font-weight: 500;
     }

     .cat-list a:hover {
         color: var(--orange);
     }

     .cat-list a i.fa-chevron-right {
         font-size: 11px;
         color: var(--gray-text);
     }

     .cat-list .count {
         color: var(--gray-text);
         font-size: var(--fs-14);
         font-weight: 600;
         padding: .12px;
     }


     .pagination-brand .page-link {
         color: var(--gray-text);
         border: 1px solid #e6e9f1;
         margin: 0 6px;
         border-radius: 8px;
         font-size: var(--fs-14);
     }

     .pagination-brand .page-item.active .page-link {
         background: var(--orange);
         border-color: var(--orange);
         color: #fff;
     }

     .pagination-brand .page-link:hover {
         color: var(--orange);
     }


    /* ==========================================================
      blog detail
       ========================================================== */

       h1,h2,h3,h4{font-weight: 700;}


       .blog-page-header{min-height: 30vh;}

      .blog-page-header .pcb-left img, .blog-page-header .pcb-right img{width: 378px;}

       .page-header-blog-title-box h1{font-size: var(--fs-32);}


       .article-thumb{
  width:100%;
  object-fit: cover;
  border-radius: 12px;
}

.blog-detail h2{font-size: var(--fs-28);}

.blog-detail h3{font-size: var(--fs-24);}

.blog-detail h4{font-size: var(--fs-20);}

.blog-detail h5{font-size: var(--fs-18);}




.article-body{ font-size: var(--fs-18); line-height: 30px;  }
.article-body h2{margin-top: 2.1rem; margin-bottom: 1rem; clear: both; }
.article-body h3{margin-top: 1.7rem; margin-bottom: .85rem; }
.article-body p{ margin-bottom: 1.15rem; color: var(--gray-text); }
.article-body ul,.article-body ol{ margin-bottom: 1.15rem; padding-left: 1.3rem; color: var(--gray-text); }
.article-body li{ margin-bottom: .45rem; color: var(--gray-text); }
.article-body img.inline-figure{
  width:100%; max-height: 240px; object-fit:cover;
  border-radius: 12px; border:1px solid #ccc;
  margin: 1.2rem 0;
}
.article-body blockquote{
  border-left: 3px solid var(--orange); 
  background: #fde9dd;
  padding:15px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--orange-dark);
  margin: 1.4rem 0;
}
.article-body code{
  background: var(--navy-soft-bg);  
  padding: .1rem .4rem;
  border-radius: 5px;
  font-size: .88em;
  color: var(--orange-dark);
}
.author-box{
 background: #F5F9FB;
  border: 1px solid #e6e9f1;
  border-radius: 12px;
  padding: 15px;
}
.author-avatar{
  width:60px; height:60px; border-radius:50%; object-fit:cover; flex:0 0 auto;
}

.social-circle{
  width:36px; height:36px; border-radius:50%;
  border:1px solid #e6e9f1;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--gray-text); font-size:var(--fs-14); margin-right:.5rem;
  transition: all .15s ease;
}
.social-circle:hover{ background: var(--orange); border-color:var(--orange); color:#fff; }
.tag-pill{font-size: var(--fs-14);}


/*
==========================================================
      Discuss Project
==========================================================
*/

.project-form-card{
  border: 1px solid #e6e9f1;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,24,33,.04), 0 8px 24px rgba(20,24,33,.05);
  padding: 30px 20px;  
}

.form-label {
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.form-label .req {
    color: var(--orange);
}


.form-check-brand .form-check-input:checked{
  background-color: var(--orange);
  border-color: var(--orange);
}
.form-check-brand label{ font-size: var(--fs-14); }
.submit-note{font-size: var(--fs-14); color: var(--gray-text);}

.process-step{ display:flex; gap:1rem; }
.process-step .step-num{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-soft); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-14); flex:0 0 auto;
}
.process-step:not(:last-child){
  position: relative;
  padding-bottom: 30px;
}
.process-step:not(:last-child)::after{
  content:"";
  position:absolute; left: 17px; top: 34px; bottom: 0;
  width: 1px; background: #e6e9f1;
}
.process-step h6{ font-weight:700; font-size:var(--fs-16); margin-bottom:.2rem; color:var(--navy-soft); }
.process-step p{ font-size:var(--fs-14); color: var(--gray-text); margin-bottom:0; }


/*
==========================================================
      Contact Us
==========================================================
*/


    .info-strip{
  position: relative;
  z-index: 2;
}
.info-strip-card{
  background: var(--white); 
  padding: 20px;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
}
.info-strip-icon{
  width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto;
  background: var(--brand-orange-tint);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-18);
}
.info-strip-card h6{ font-weight: 700; margin-bottom: 6px; font-size: var(--fs-18); }
.info-strip-card p{ font-size: var(--fs-16); color: var(--navy-soft); margin-bottom: 0; line-height: 1.5; }
.info-strip-card a{ color: var(--drk-gray-text); font-weight: 600;  font-size: var(--fs-16);}
.info-strip-card a:hover{ color: var(--orange); }


/*
==========================================================
      Portfolio
==========================================================
*/

.filter-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin: 2.6rem 0 2.2rem; }
.filter-btn{
  border:1px solid #d2d7e4; background: var(--surface); color: var(--ink-700);
  font-size:.85rem; font-weight:600; padding:.5rem 1.15rem; border-radius:999px;
  cursor:pointer; transition: all .15s ease;
}
.filter-btn:hover{ border-color: var(--orange); color: var(--orange); }
.filter-btn.active{ background: var(--navy-soft); border-color: var(--navy-soft); color:#fff; }



/* ---- Project cards ---- */
.project-card .project-card-inner{border:1px solid #d2d7e4; border-radius: 12px;
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.project-card .project-card-inner:hover{ transform: translateY(-5px); box-shadow: 0 1px 2px rgba(20,24,33,.04), 0 8px 24px rgba(20,24,33,.05);  }
.project-card.is-hidden{ display:none; }

.project-media{
  position: relative;
  aspect-ratio: 4 / 2.5;
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.project-media img{
  width: 100%; height: 100%; object-fit: cover; padding: .6rem;
  transition: transform .3s ease;
}

.project-tag{
  position:absolute; top:.9rem; left:.9rem;
  background: var(--white); color: var(--orange);
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:8PX 15PX; border-radius: 999px;  
  box-shadow: 0 6px 14px -8px rgba(19,27,51,.2);
}

.project-body{ padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.project-body h5{ font-weight: 800;}
.project-body p{  line-height:1.55; margin-bottom:1rem; flex:1; font-size: var(--fs-16); }
.project-link{text-decoration: none;
 font-weight:600; font-size: var(--fs-16); color: var(--ink-900);
  display:inline-flex; align-items:center; gap:.45rem; transition: color .15s ease, gap .15s ease;
}
.project-link i{  color: var(--orange); font-size: var(--fs-14); transition: transform .15s ease; }
.project-link:hover{ color: var(--orange); }
.project-link:hover i{ transform: translateX(3px); }


/*
==========================================================
      project detail
==========================================================
*/


.figure-float{  
  max-width: 46%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 34px -14px rgba(19, 27, 51, .16);
  border: 1px solid #E4E7EC;
  margin-bottom: 2rem;
}
.figure-float img{ width: 100%; height: auto; display: block; }
.figure-float.float-left{ float: left; margin-right: 1.6rem; }
.figure-float.float-right{ float: right; margin-left: 1.6rem; }
.figure-float figcaption{
  font-size: .76rem; color: var(--ink-500); padding: .55rem .7rem;
  border-top: 1px solid #E4E7EC; background: var(--surface-alt);
}

.inline-image{
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: .4rem 0 1.8rem;
}
.inline-image img{ width: 100%; height: auto; display: block; }



gallery-row{ margin: .4rem 0 1.8rem; }
.gallery-row .g-item{
  border-radius: 12px;
    box-shadow: 0 12px 34px -14px rgba(19, 27, 51, .16);
  border: 1px solid #E4E7EC;overflow: hidden;
 
  
}
.gallery-row .g-item img{ width:100%; height:100%; object-fit: cover; display:block; }


/*
==========================================================
      BMS
==========================================================
*/
.bms-offering{background: #F5F9FB;}
.ft-22{font-size: var(--fs-22);}




     /* ==========================================================
      Pcb Layout page
       ========================================================== */


     .pcb-layout-cta {
         position: relative;
         padding: 30px 0;
         background: url("../img/custom-layout.jpg") center center/cover no-repeat;
         overflow: hidden;
         color: var(--white);
     }

     .pcb-layout-cta p{
        margin-bottom: 0px;
     }

     .compliance-component h4{font-size: var(--fs-20); font-weight: 700; padding: 15px 0 0;}