:root {


         /* colors  */
         --navy: #0f1c3f;
         --navy-dark: #07122e;
         --navy-soft: #33436a;
         --orange: #FF6601;
         --orange-dark: #EF660B;
         --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;
     }

     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);
     }

     .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);
     }


     /* 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);
     }

     .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-22);
         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 */

     .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 {
         transform: translateY(-10px);
         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-24);
     }


     .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);
     }




     /* 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-24);
         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: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);
}

/* @media (max-width:991px){

    .cvg-img-box{
        height:180px;
    }

    .cvg-img-large{
        min-height:360px;
    }

    .cvg-desc{
        font-size:17px;
    }

}

@media (max-width:767px){

    .cvg-img-large{
        min-height:260px;
        margin-bottom:1.5rem;
    }

    .cvg-title{
        font-size:32px;
    }

    .cvg-desc{
        font-size:16px;
    }

} */


.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);}