:root {
           --theme-color: #066590;
           --theme-color-hover: #055478e0;
       }

       * {
           box-sizing: border-box;
       }

       body,
       html {
           overflow-x: hidden;
       }

       .xq9z-bottom-menu {
           position: fixed;
           bottom: 12px;
           left: 50%;
           transform: translateX(-50%);
           background: #fff;
           border-radius: 50px;
           display: flex;
           justify-content: space-between;
           padding: 7px 12px;
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
           width: 95%;
           max-width: 480px;
           z-index: 9999;
       }

       .xq9z-bottom-menu-item {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           color: #0c4370;
           text-decoration: none;
           font-size: 12px;
           flex: 1;
           transition: all 0.3s ease;
           padding: 6px 0;
       }

       .xq9z-bottom-menu-item svg {
           width: 20px;
           height: 20px;
           margin-bottom: 3px;
           transition: all 0.3s ease;
       }

       .xq9z-bottom-menu-item:hover {
           background: linear-gradient(135deg, #0c4370, #1d71b8);
           color: #fff;
           transform: translateY(-4px);
       }

       .xq9z-bottom-menu-item:hover svg {
           transform: scale(1.2);
           fill: #fff;
       }

       .xq9z-bottom-menu-item span {
           font-weight: 500;
       }

       @media(min-width: 992px) {
           .xq9z-bottom-menu {
               display: none !important;
           }
       }

       .custom-container {
           width: 100%;
           max-width: 1800px;
           /* Optional: Max width limit on big screens */
           margin: 0 auto;
           /* Center align horizontally */
           padding: 0 10px;
           /* Top-Bottom 40px, Left-Right 20px */
       }

       @media (max-width: 768px) {
           .custom-container {
               padding: 20px 8px;
               /* Less padding for mobile */
           }
       }

       .margin-top {
           margin-top: 30px;
       }

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

       /*Desktop Navbar */
       .topbar {
           background: #0b6b96;
           color: #fff;
           padding: 5px 0;
           font-size: 14px;
           transition: all 0.3s ease;
       }

       /* Navbar */
       .navbar {
           background: #fff;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
           transition: all 0.3s ease;
       }

       /* Scroll ke baad sticky effect (full header) */
       .site-header.sticky {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           background: #fff;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
           z-index: 9999;
           animation: slideDown 0.4s ease;
       }

       /* Smooth slide-down animation */
       @keyframes slideDown {
           from {
               transform: translateY(-100%);
           }

           to {
               transform: translateY(0);
           }
       }

       .navbar-nav .nav-link {
           font-weight: 600;
           font-size: 18px;
           padding: 12px 15px;
           color: #222222c9;
       }

       .Package-button {
           background: #086995;
           padding: 10px 30px !important;
           color: white !important;
           border-radius: 5px;
       }

       .navbar-nav .nav-link:hover {
           color: #0c4370;
       }

       /* Dropdown animation + style */
       .dropdown-menu {
           display: block;
           opacity: 0;
           visibility: hidden;
           transform: translateY(15px);
           transition: all 0.35s ease;
           border: none;
           border-radius: 2px;
           padding: 5px 0;
           margin-top: 16px;
           min-width: 270px;
           background: #fff;
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
       }


       .dropdown:hover>.dropdown-menu,
       .dropdown-submenu:hover>.dropdown-menu {
           opacity: 1;
           visibility: visible;
           transform: translateY(0);
       }

       /* Dropdown items */
       .dropdown-item {
           font-weight: 500;
           padding: 10px 18px;
           color: #333;
           position: relative;
           transition: all 0.25s ease;
       }

       .dropdown-item:hover {
           background: linear-gradient(to right, #0c4370, #1d71b8);
           color: #fff;
           padding-left: 25px;
       }

       /* Submenu arrow style */
       .dropdown-submenu>.dropdown-item::after {
           content: "›";
           position: absolute;
           right: 15px;
           font-size: 14px;
           color: #666;
       }

       .dropdown-submenu:hover>.dropdown-item::after {
           color: #fff;
       }

       /* Submenu positioning */
       .dropdown-submenu {
           position: relative;
       }

       .dropdown-submenu>.dropdown-menu {
           top: 0;
           left: 100%;
           margin-top: -1px;
           border-radius: 10px;
       }

       /* Buttons */
       .btn-custom {
           font-weight: 600;
           margin-left: 10px;
           padding: 6px 15px;
           border-radius: 4px;
       }

       .btn-hiring {
           background: #e63946;
           color: #fff;
       }

       .btn-pay {
           background: #ff8c00;
           color: #fff;
       }

       .btn-enquiry {
           background: #0c4370;
           color: #fff;
       }

       /* Mega Menu */
       .nav-item.dropdown.position-static {
           position: static;
       }

       .mega-menu {
           position: absolute;
           top: 88%;
           left: 50%;
           transform: translateX(-50%);
           width: 100%;
           max-width: 1100px;
           background: #fff;
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
           border-radius: 0 0 10px 10px;
           opacity: 0;
           visibility: hidden;
           transition: all 0.3s ease;
           z-index: 999;
       }

       .nav-item.dropdown:hover .mega-menu {
           opacity: 1;
           visibility: visible;
           transform: translateX(-50%) translateY(10px);
       }

       .mega-categories li {
           padding: 10px 0;
           font-weight: 600;
           cursor: pointer;
           display: flex;
           align-items: center;
           transition: all 0.3s ease;
       }

       .mega-categories li i {
           margin-right: 10px;
           color: #0c4370;
           font-size: 18px;
       }

       .mega-categories li:hover {
           color: #fff;
           background: linear-gradient(135deg, #0c4370, #1d71b8);
           padding-left: 10px;
           border-radius: 6px;
       }

       .mega-categories li:hover i {
           color: #fff;
       }

       .mega-menu .dropdown-item {
           padding: 6px 0;
           font-size: 14px;
           color: #333;
       }

       .mega-menu .dropdown-item:hover {
           color: #0c4370;
           background: transparent;
           padding-left: 8px;
       }

       @media (max-width: 991px) {
           .site-header {
               display: none;
           }
       }

       /*=======================================Mobile Nabar========================================================= */
       .custom-navbar {
           background: #fff;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
           padding: 10px 15px;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           z-index: 9999;
           transition: transform 0.3s ease;
       }

       .nav-menu-box {
           height: 50vh;
           overflow-y: auto;
           /* vertical scroll */
           overflow-x: hidden;
           /* horizontal scroll हटाना */
           padding-right: 5px;
           /* scrollbar overlap से बचाने के लिए */
       }

       /* Chrome, Edge, Safari */
       .nav-menu-box::-webkit-scrollbar {
           width: 8px;
           /* scrollbar width */
       }

       .nav-menu-box::-webkit-scrollbar-track {
           background: #f1f1f1;
           /* background track */
           border-radius: 10px;
       }

       .nav-menu-box::-webkit-scrollbar-thumb {
           background: linear-gradient(180deg, #0072FF, #00C6FF, #005C97);
           /* logo color gradient */
           border-radius: 10px;
       }

       .nav-menu-box::-webkit-scrollbar-thumb:hover {
           background: linear-gradient(180deg, #005C97, #0072FF);
           /* darker hover effect */
       }

       /* Firefox */
       .nav-menu-box {
           scrollbar-width: thin;
           scrollbar-color: var(--theme-color) #f1f1f1;
           /* thumb | track */
       }

       .nav-menu-head {
           background: #086995;
           padding: 10px 8px;
           color: white !important;
       }


       .custom-navbar.hide {
           transform: translateY(-100%);
       }

       .custom-navbar-brand img {
           max-height: 40px;
       }

       /* Mobile Menu */
       .custom-mobile-menu {
           position: fixed;
           top: 0;
           left: -100%;
           width: 80%;
           max-width: 350px;
           height: 100%;
           background: #fff;
           box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
           z-index: 9999;
           transition: all 0.4s ease;
           display: flex;
           flex-direction: column;
           border-radius: 0 10px 10px 0;
           overflow: hidden;
       }

       .custom-mobile-menu.active {
           left: 0;
       }

       /* Menu Header */
       .custom-menu-header {
           position: sticky;
           top: 0;
           z-index: 10;
           flex-shrink: 0;
           background: #fff;
           padding: 10px 20px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       }

       .custom-menu-header img {
           max-height: 40px;
       }

       .custom-close-menu {
           font-size: 28px;
           font-weight: bold;
           cursor: pointer;
           color: #0c4370;
           transition: transform 0.2s ease;
       }

       .custom-close-menu:hover {
           transform: rotate(90deg);
       }

       /* Menu Content */
       .custom-menu-content {
           overflow-y: auto;
           flex: 1;
           padding: 20px;
           scrollbar-width: thin;
           scrollbar-color: #0c4370 #e0e0e0;
       }

       .custom-menu-content::-webkit-scrollbar {
           width: 8px;
       }

       .custom-menu-content::-webkit-scrollbar-track {
           background: #f0f0f0;
           border-radius: 10px;
       }

       .custom-menu-content::-webkit-scrollbar-thumb {
           background-color: #0c4370;
           border-radius: 10px;
           border: 2px solid #f0f0f0;
       }

       /* Menu Items */
       .custom-mobile-menu ul {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .custom-mobile-menu li {
           border-bottom: 1px solid #eee;
       }

       .custom-mobile-menu a {
           display: block;
           padding: 12px 10px;
           font-weight: 600;
           color: #333;
           text-decoration: none;
           transition: color 0.3s ease, padding-left 0.3s ease;
       }

       .custom-mobile-menu a:hover {
           color: #0c4370;
           padding-left: 20px;
       }

       /* Submenu */
       .custom-submenu {
           height: 0;
           overflow: hidden;
           padding-left: 15px;
           background: #f9f9f9;
           transition: height 0.3s ease, padding 0.3s ease;
       }

       .custom-submenu a {
           font-weight: 500;
           font-size: 14px;
       }

       .custom-menu-toggle {
           cursor: pointer;
           float: right;
           font-size: 18px;
           color: #0c4370;
           transition: transform 0.2s ease;
       }

       .custom-menu-toggle.open {
           transform: rotate(180deg);
           color: #0c4370;
       }

       /* Highlight active parent menu */
       .custom-menu-item-open>a {
           background: #e6f0fa;
           color: #0c4370;
           font-weight: 700;
           border-left: 4px solid #0c4370;
       }

       /* Overlay */
       .custom-overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.4);
           z-index: 9998;
           display: none;
       }

       .custom-overlay.active {
           display: block;
       }

       /* Responsive */
       @media(max-width: 400px) {
           .custom-mobile-menu {
               width: 100%;
               max-width: 100%;
               border-radius: 0;
           }

           .custom-menu-header img {
               max-height: 35px;
           }
       }

       /* Page content */
       .custom-page-content {
           padding: 20px;
           padding-top: 70px;
       }

       .custom-example-box {
           height: 150px;
           margin-bottom: 20px;
           background: #f0f0f0;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 18px;
           color: #0c4370;
           border-radius: 10px;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       }

       .mobile-menu {
           display: none;
       }

       @media (max-width: 991px) {
           .mobile-menu {
               display: block;
               /* or flex, depending on your design */
           }
       }

       /*============================Banner Category ++++++++++++++++++++*/
       .service-card {
           background: #fff;
           border: 1px solid #e0e0e0;
           text-align: center;
           padding: 20px 10px;
           height: 200px;
           transition: all 0.3s ease;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           cursor: pointer;
           position: relative;
       }

       .service-card:hover {
           background: var(--theme-color);
       }

       .service-card:hover h2 {
           color: white;
       }

       /* Image shake animation */
       .service-card img {
           width: 60px;
           height: 60px;
           object-fit: contain;
           margin-bottom: 15px;
           animation: shake 2s infinite;
       }

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

           25% {
               transform: rotate(3deg);
           }

           50% {
               transform: rotate(0deg);
           }

           75% {
               transform: rotate(-3deg);
           }

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

       .service-card h2 {
           font-size: 1rem;
           font-family: 'Kalam', cursive;
           font-weight: 600;
           color: #333;
           margin: 0;
       }



       /* Tooltip style */
       .service-card[data-bs-toggle="tooltip"]::after {
           content: attr(data-bs-original-title);
           position: absolute;
           bottom: 110%;
           left: 50%;
           transform: translateX(-50%) translateY(10px);
           background: var(--theme-color);
           color: #fff;
           padding: 6px 12px;
           border-radius: 8px;
           font-size: 0.85rem;
           white-space: nowrap;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.3s ease, transform 0.3s ease;
           box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
       }

       .service-card[data-bs-toggle="tooltip"]:hover::after {
           opacity: 1;
           transform: translateX(-50%) translateY(0px);
       }

       .service-card[data-bs-toggle="tooltip"]::before {
           content: '';
           position: absolute;
           bottom: 105%;
           left: 50%;
           transform: translateX(-50%);
           border-width: 6px;
           border-style: solid;
           border-color: transparent transparent #007bff transparent;
           opacity: 0;
           transition: opacity 0.3s ease;
       }

       .service-card[data-bs-toggle="tooltip"]:hover::before {
           opacity: 1;
       }

       /* Offer badges (small, premium style) */
       .offer-badge {
           position: absolute;
           top: 8px;
           right: 8px;
           color: white;
           padding: 3px 8px;
           font-weight: 600;
           font-size: 0.7rem;
           border-radius: 12px;
           letter-spacing: 0.3px;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
           background-size: 200% 200%;
           animation: glow 2s infinite ease-in-out, gradientShift 5s infinite linear;
       }

       /* Different badge colors with gradient */
       .badge-red {
           background: linear-gradient(135deg, #ff416c, #ff4b2b);
       }

       .badge-green {
           background: linear-gradient(135deg, #11998e, #38ef7d);
       }

       .badge-orange {
           background: linear-gradient(135deg, #f7971e, #ffd200);
       }

       .badge-purple {
           background: linear-gradient(135deg, #6a11cb, #2575fc);
       }

       /* Soft blink glow */
       @keyframes glow {

           0%,
           100% {
               filter: brightness(100%) drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
           }

           50% {
               filter: brightness(115%) drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
           }
       }

       /* Gradient slow movement */
       @keyframes gradientShift {
           0% {
               background-position: 0% 50%;
           }

           50% {
               background-position: 100% 50%;
           }

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


       /*+++++++++++++++++++++++++++ Services Card ============================================*/
       .myservice-section {
           background: #f8f9fa;
       }

       .myservice-card {
           position: relative;
           overflow: hidden;
           border-radius: 12px;
           background: white;
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
           transition: transform 0.4s ease, box-shadow 0.4s ease;
           cursor: pointer;
           text-decoration: none;
           display: block;
       }

       .myservice-card:hover {
           transform: translateY(-8px) scale(1.02);
           box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
       }

       .myservice-card img {
           width: 100%;
           height: auto;
           display: block;
           transition: all 0.4s ease;
       }

       .myservice-overlay {
           position: absolute;
           inset: 0;
           background: var(--theme-color-hover);
           color: white;
           opacity: 0;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding: 25px;
           text-align: center;
           transition: opacity 0.4s ease, transform 0.4s ease;
           transform: translateY(20px);
       }

       .myservice-card:hover .myservice-overlay {
           opacity: 1;
           transform: translateY(0);
       }

       .myservice-overlay h5 {
           font-size: 20px;
           margin-bottom: 10px;
           animation: myservice-slideUp 0.4s ease forwards;
       }

       .myservice-overlay p {
           font-size: 14px;
           opacity: 0.9;
           animation: myservice-fadeIn 0.5s ease forwards;
       }

       .myservice-overlay-icon {
           margin-top: 15px;
           transition: transform 0.3s ease;
           width: 28px;
           height: 28px;
           animation: myservice-bounce 1.2s infinite;
       }

       .myservice-card:hover .myservice-overlay-icon {
           transform: scale(1.2);
       }

       @keyframes myservice-slideUp {
           from {
               transform: translateY(20px);
               opacity: 0;
           }

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

       @keyframes myservice-fadeIn {
           from {
               opacity: 0;
           }

           to {
               opacity: 1;
           }
       }

       @keyframes myservice-bounce {

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

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

       .myservice-title {
           position: absolute;
           bottom: 0;
           width: 100%;
           background: var(--theme-color);
           color: white;
           padding: 12px 0;
           font-weight: 600;
           font-size: 15px;
           text-align: center;
           margin: 0;
       }

       /*+++++++++++++++++++++++++++++ Enquery Button ++++++++++++++++++++++++++++++++++++++++++*/
       :root {
           --ink: #fff !important;
           --paper: var(--theme-color) !important;
           --paper-2: var(--theme-color) !important;
           --accent: #fff !important;
       }

       .x-btn-wrap {
           display: grid;
           gap: 28px;
           padding: 40px
       }

       .x-btn-title {
           font-size: clamp(22px, 3vw, 30px);
           text-align: center;
           opacity: .9
       }

       .x-paper-btn {
           --rx: 0deg;
           --ry: 0deg;
           --tz: 0px;
           position: relative;
           display: inline-flex;
           align-items: center;
           gap: 10px;
           padding: 12px 16px;
           font-size: clamp(18px, 2.2vw, 24px);
           font-weight: 700;
           line-height: 1;
           text-decoration: none;
           color: var(--ink);
           background: var(--paper);
           border: none;
           cursor: pointer;
           transform-style: preserve-3d;
           transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
           transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease, box-shadow .35s ease;
           box-shadow: 0 14px 28px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .35) inset;
           isolation: isolate;
           border-radius: 12px;
       }

       .x-paper-btn svg {
           width: 22px;
           height: 22px;
           fill: var(--accent);
           transform: translateZ(12px);
       }

       .x-paper-btn::before {
           content: "";
           position: absolute;
           inset: 0;
           z-index: -1;
           border-radius: 12px;
           background:
               radial-gradient(120px 60px at 80% 20%, rgba(255, 255, 255, .07), transparent 70%),
               radial-gradient(90px 40px at 20% 80%, rgba(255, 255, 255, .05), transparent 70%),
               repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 2px),
               linear-gradient(0deg, #066590, #066590);

           filter: contrast(1.02) brightness(1.02);
       }

       .x-paper-btn span {
           font-family: "Shadows Into Light", "Kalam", cursive;
           letter-spacing: .5px;
           text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
           transform: translateZ(12px);
       }

       .x-paper-btn--torn {
           border-radius: 0;
           clip-path: polygon(0% 6%, 2% 4%, 5% 7%, 8% 3%, 11% 6%, 15% 4%, 18% 7%, 22% 5%, 25% 7%, 28% 4%, 31% 6%, 35% 5%, 38% 7%, 41% 3%, 45% 6%, 48% 4%, 52% 7%, 55% 5%, 58% 7%, 61% 4%, 65% 6%, 68% 3%, 71% 7%, 75% 5%, 78% 7%, 81% 4%, 85% 6%, 88% 3%, 91% 7%, 95% 5%, 98% 6%,
                   100% 92%, 98% 94%, 95% 91%, 92% 95%, 89% 92%, 85% 96%, 82% 93%, 79% 96%, 75% 93%, 72% 95%, 68% 92%, 65% 96%, 61% 93%, 58% 95%, 55% 92%, 52% 96%, 48% 93%, 45% 95%, 41% 92%, 38% 96%, 35% 93%, 31% 95%, 28% 92%, 25% 96%, 22% 93%, 18% 95%, 15% 92%, 11% 96%, 8% 93%, 5% 96%, 2% 93%, 0% 95%);
           background: var(--paper);
       }

       @keyframes x-wobble {

           0%,
           100% {
               transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0)
           }

           30% {
               transform: perspective(900px) rotateX(3deg) rotateY(-2deg) translateZ(3px)
           }

           60% {
               transform: perspective(900px) rotateX(-2deg) rotateY(2deg) translateZ(2px)
           }
       }

       .x-paper-btn:hover {
           --tz: 6px;
           filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)) brightness(1.1);
           animation: x-wobble .6s ease;
       }

       .x-paper-btn:active {
           transform: perspective(900px) rotateX(2deg) translateZ(-2px) scale(.98);
           box-shadow: 0 6px 12px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .35) inset;
       }

       .x-btn-row {
           display: flex;
           flex-wrap: wrap;
           gap: 18px;
           justify-content: center
       }

       /*Category Section Start */
       .pro-services-title {
           text-align: center;
           margin-bottom: 40px;
       }

       .pro-services-title h6 {
           font-weight: 600;
           color: #e74c3c;
           letter-spacing: 1px;
       }

       .pro-services-title h2 {
           font-weight: bold;
           color: #002352;
       }

       .pro-services-title span {
           text-decoration: underline;
           color: #e74c3c;
           font-style: italic;
       }

       .pro-service-card {
           position: relative;
           border-radius: 12px;
           overflow: hidden;
           background: #fff;
           box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
           transition: transform 0.3s ease;
           height: 100%;
       }

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

       .pro-service-img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .pro-service-overlay {
           position: absolute;
           top: 0;
           left: 0;
           height: 100%;
           width: 100%;
           background: var(--theme-color-hover);
           cursor: pointer;
           color: #fff;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           opacity: 0;
           transition: opacity 0.4s ease;
           padding: 20px;
           text-align: center;
       }

       .pro-service-card:hover .pro-service-overlay {
           opacity: 1;
       }

       .pro-service-overlay p {
           margin: 0;
           font-size: 1rem;
           font-weight: 500;
       }

       .pro-service-overlay .pro-arrow {
           font-size: 1.5rem;
           margin-top: 10px;
       }

       .pro-service-title {
           background: #002352;
           color: #fff;
           text-align: center;
           padding: 10px;
           font-family: 'Comic Sans MS', cursive, sans-serif;
           font-size: 1rem;
       }

       .pro-service-wrapper {
           height: 250px;
       }

       .pro-tall-card {
           height: 520px;
       }

       @media (max-width: 767px) {

           .pro-service-wrapper,
           .pro-tall-card {
               height: auto;
           }
       }

       /*setion title */
       .pro-services-title {
           margin-bottom: 1.5rem;
           position: relative;
       }

       .section-subtitle {
           display: inline-block;
           font-size: 14px;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 2px;
           color: #066590;
           margin-bottom: 10px;
       }

       .section-title {
           font-size: 25px;
           line-height: 1.3;
           color: #222;
       }

       .title-underline {
           width: 80px;
           height: 4px;
           margin: 15px auto 0;
           border-radius: 2px;
           background: linear-gradient(90deg, #066590, #0a7ca8, #ff4b2b, #0a7ca8, #066590);
           background-size: 300% 100%;
           animation: underlineMove 3s linear infinite;
       }

       @keyframes underlineMove {
           0% {
               background-position: 0% 0;
           }

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

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

       /*++++++++++++++++++++++++++++++++++ Slider Button Desifn ++++++++++++++++++++++++++++*/
       /* Navigation Buttons */
       .swiper-button-next,
       .swiper-button-prev {
           top: 20px !important;
           background-color: var(--theme-color) !important;
           color: #fff !important;
           padding: 10px 59px !important;
           font-size: 14px !important;
           font-weight: 600;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
           transition: all 0.3s ease;
           z-index: 10;
           text-transform: uppercase;
           letter-spacing: 1px;
       }

       .swiper-button-next:hover,
       .swiper-button-prev:hover {
           background-color: red !important;
           transform: scale(1.05);
       }

       .swiper-button-prev {
           right: 145px !important;
           left: auto !important;
       }

       .swiper-button-next {
           right: 20px !important;
       }

       .swiper-button-next::after,
       .swiper-button-prev::after {
           content: '' !important;
       }

       .swiper-button-next::before {
           content: 'Next';
       }

       .swiper-button-prev::before {
           content: 'Prev';
       }

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

           .swiper-button-next,
           .swiper-button-prev {
               padding: 8px 18px !important;
               font-size: 12px !important;
           }

           .swiper-button-prev {
               right: 90px !important;
           }

           .swiper-button-next {
               right: 10px !important;
           }
       }

       @media (max-width: 480px) {

           .swiper-button-next,
           .swiper-button-prev {
               top: 10px !important;
               font-size: 11px !important;
               padding: 6px 12px !important;
           }

           .swiper-button-prev {
               right: 70px !important;
           }

           .swiper-button-next {
               right: 10px !important;
           }
       }

       /* Pagination Dots */
       .swiper-pagination {
           bottom: 15px !important;
           text-align: center;
       }

       .swiper-pagination-bullet {
           width: 12px;
           height: 12px;
           background: #ccc;
           opacity: 1;
           margin: 0 6px !important;
           transition: 0.3s ease;
           border-radius: 50%;
       }

       .swiper-pagination-bullet-active {
           background: var(--theme-color);
           transform: scale(1.3);
       }

       /*footer Start */
       footer {
           background: linear-gradient(135deg, #1c2b38, #1c2b38);
           color: #fff;
           padding: 100px 0 40px;
           /* extra space for floating box */
           position: relative;
           overflow: visible;
           /* ✅ allow box to show outside */
       }

       footer::before {
           content: "";
           position: absolute;
           top: -50px;
           left: -50px;
           width: 200px;
           height: 200px;
           background: rgb(22 113 154 / 18%);
           border-radius: 50%;
           z-index: 0;
       }

       footer h2 {
           font-size: 20px;
           margin-bottom: 15px;
           position: relative;
       }

       footer h2::after {
           content: "";
           position: absolute;
           width: 50px;
           height: 2px;
           background-color: #037db4;
           left: 0;
           bottom: -5px;
       }

       footer ul {
           list-style: none;
           padding: 0;
           margin: 0;
           max-height: 180px;
           overflow-y: auto;
           overflow-x: hidden;
       }

       /* Custom scrollbar */
       footer ul::-webkit-scrollbar {
           width: 6px;
       }

       footer ul::-webkit-scrollbar-track {
           background: #09132a;
           border-radius: 10px;
       }

       footer ul::-webkit-scrollbar-thumb {
           background: #037db4;
           border-radius: 10px;
       }

       footer ul::-webkit-scrollbar-thumb:hover {
           background: #ffaa33;
       }

       /* Link styling */
       footer ul li a {
           display: flex;
           align-items: center;
           gap: 8px;
           font-size: 14px;
           padding: 5px 0;
           color: #ffffff;
           text-decoration: none;
           border-bottom: 1px solid rgba(255, 255, 255, 0.3);
           transition: all 0.3s ease;
       }

       footer ul li a svg {
           width: 12px;
           height: 12px;
           fill: #037db4;
           transition: transform 0.3s ease;
           flex-shrink: 0;
       }

       footer ul li a:hover {
           color: #037db4;
           transform: translateX(5px);
       }

       footer ul li a:hover svg {
           transform: translateX(3px);
       }

       /* Footer bottom */
       .footer-bottom {
           text-align: center;
           padding: 20px 0;
           background-color: #09132a;
           color: #cccccc;
           margin-top: 40px;
           font-size: 14px;
       }

       /* Responsive adjustments */
       @media (max-width: 768px) {
           footer ul {
               max-height: none;
               overflow-y: visible;
           }
       }

       .quick-links a {
           color: #ccc;
           text-decoration: none;
           font-size: 14px;
           padding: 0 8px;
           transition: color 0.3s ease;
       }

       .quick-links a:hover {
           color: #037db4;
       }

       .quick-links svg.sep {
           width: 2px;
           height: 16px;
           margin: 0 6px;
           flex-shrink: 0;
       }

       @media (max-width: 576px) {
           .quick-links {
               flex-wrap: wrap;
               gap: 8px;
           }

           .quick-links svg.sep {
               display: none;
               /* mobile पर line hide कर सकते हैं */
           }
       }



       /* Floating box */
       .callback-box-wrapper {
           position: absolute;
           top: 0;
           left: 50%;
           transform: translate(-50%, -50%);
           /* ✅ move half outside */
           width: 100%;
           max-width: 700px;
           padding: 0 15px;
           z-index: 5;
       }

       .callback-box {
           background: #fff;
           border-radius: 50px;
           padding: 8px 8px 8px 20px;
           display: flex;
           align-items: center;
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
           transition: all 0.3s ease;
       }

       /* Phone icon */
       .callback-box svg {
           width: 22px;
           height: 22px;
           flex-shrink: 0;
           margin-right: 12px;
           fill: #037db4;
       }

       .callback-box input {
           border: none;
           outline: none;
           flex: 1;
           font-size: 16px;
           padding: 12px;
           border-radius: 50px;
           color: #333;
           transition: all 0.3s ease;
           box-shadow: none !important;
           /* ✅ remove bootstrap shadow */
       }

       /* Remove blue border on focus */
       .callback-box input:focus {
           border: none !important;
           outline: none !important;
           box-shadow: none !important;
       }


       .callback-box button {
           border: none;
           background: linear-gradient(135deg, #037db4, #ff3300);
           color: #fff;
           font-weight: 600;
           padding: 12px 28px;
           border-radius: 50px;
           transition: all 0.3s ease;
       }

       .callback-box button:hover {
           background: linear-gradient(135deg, #ff3300, #037db4);
           transform: translateY(-2px);
           box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
       }

       /* Hover / Focus */
       .callback-box:hover,
       .callback-box:focus-within {
           box-shadow: 0 0 20px rgba(255, 102, 0, 0.6);

       }

       .footer-btn {
           background-color: var(--theme-color);
       }

       /* Button Styling */
       .blink-btn {
           background: linear-gradient(90deg, #0d6efd, #dc3545, #ff9800);
           background-size: 300% 300%;
           animation: gradientShift 5s ease infinite;
           border-radius: 3px;
           padding: 8px 35px !important;
           font-weight: bold;
           font-size: 14px;
           display: inline-flex;
           align-items: center;
           gap: 10px;
           text-decoration: none;
           border: none;
           color: #fff;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }

       /* Continuous icon animation */
       .blink-btn svg {
           animation: iconMove 1s ease-in-out infinite alternate;
       }

       /* Gradient animation */
       @keyframes gradientShift {
           0% {
               background-position: 0% 50%;
           }

           50% {
               background-position: 100% 50%;
           }

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

       /* Icon shake animation */
       @keyframes iconMove {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(6px);
           }
       }

       .uasing-btn {
           background: var(--theme-color);
           padding: 10px 20px;
           border-radius: 4px;
           color: white;
           text-decoration: none;
           transition: background 0.3s ease;
       }

       .uasing-btn:hover {
           background: var(--bs-red);
       }


       /*======================= Packagae Sections ======================*/
       :root {
           --primary-color: var(--theme-color);
           --bg-light: #f8f9ff;
           --border-color: #dbeafe;
           --label-bg: var(--theme-color);
           --label-color: #fff;
           --light-gray: #f1f5f9;
       }

       .pkg-section {
           padding: 60px 20px;
           background-color: var(--bg-light);
       }

       .pkg-card {
           background-color: #fff;
           border-radius: 16px;
           padding: 14px;
           border: 1px solid #e5e7eb;
           transition: all 0.4s ease;
           height: 100%;
       }

       .pkg-card:hover {
           box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
           border-color: #d1d5db;
       }

       .pkg-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 8px;
       }

       .pkg-title {
           font-size: 22px;
           font-weight: 700;
           color: var(--primary-color);
       }

       .pkg-badge {
           background: #e0ecff;
           color: var(--primary-color);
           padding: 4px 12px;
           font-size: 13px;
           font-weight: 600;
           border-radius: 20px;
       }

       .pkg-price {
           font-size: 28px;
           font-weight: 700;
           color: var(--primary-color);
       }

       .pkg-gst {
           font-size: 14px;
           color: #dc2626;
           font-weight: 500;
           margin-left: 10px;
           margin-top: 6px;
       }

       .pkg-link-block {
           position: relative;
           border: 1px solid var(--border-color);
           padding: 16px 10px 12px;
           border-radius: 5px;
           background-color: #fff;
           margin-bottom: 16px;
       }

       .pkg-link-label {
           position: absolute;
           top: -10px;
           left: 12px;
           background-color: var(--label-bg);
           color: var(--label-color);
           font-size: 12px;
           font-weight: 600;
           padding: 2px 10px;
           border-radius: 20px;
           z-index: 1;
       }

       .pkg-scroll-links {
           display: flex;
           flex-wrap: nowrap;
           overflow-x: auto;
           gap: 10px;
           padding-top: 4px;
           padding-bottom: 13px;
       }

       .pkg-scroll-links::-webkit-scrollbar {
           height: 5px;
       }

       .pkg-scroll-links::-webkit-scrollbar-thumb {
           background: var(--primary-color);
           border-radius: 5px;
       }

       .pkg-link-pill {
           background-color: var(--light-gray);
           padding: 6px 14px;
           border-radius: 4px;
           border: 1px solid var(--theme-color);
           font-size: 13px;
           white-space: nowrap;
           color: #0f172a;
           text-decoration: none;
           display: inline-block;
       }

       .pkg-link-pill:hover {
           background-color: #e0ecff;
           text-decoration: none;
       }

       .pkg-order-btn {
           background: #e74860;
           color: white;
           font-weight: 600;
           font-size: 15px;
           padding: 12px;
           width: 100%;
           border: none;
           border-radius: 5px;
           margin: 3px 0 19px;
           transition: background 0.3s ease;
       }

       .pkg-order-btn:hover {
           background: #06264a !important;
       }

       .pkg-feature-list {
           overflow-y: auto;
           padding: 10px 20px;
           margin: 0;
           list-style: none;
           background: #fff;
           border-radius: 12px;
           height: 250px;
       }

       .pkg-feature-list li {
           position: relative;
           padding-left: 20px;
           margin-bottom: 10px;
           font-size: 14px;
           color: #0f172a;
       }

       .pkg-feature-list li::before {
           content: "◆";
           position: absolute;
           left: 0;
           top: 50%;
           transform: translateY(-50%);
           color: var(--primary-color);
           font-size: 14px;
       }

       @media (max-width: 767px) {
           .pkg-feature-list {
               padding: 8px 15px;
           }

           .pkg-feature-list li {
               font-size: 13px;
           }

           .pkg-title {
               font-size: 18px;
           }

           .pkg-price {
               font-size: 24px;
           }

           .pkg-scroll-links {
               gap: 6px;
           }
       }

       /*++++++++++++++++++++++++++++++++++++ Blog Section +++++++++++++*/
       .blog-card-link {
           text-decoration: none;
           color: inherit;
           display: block;
           border-radius: 12px;
           overflow: hidden;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           box-shadow: 0 8px 24px rgba(11, 45, 93, 0.12);
           background: #fff;
           cursor: pointer;
       }

       .blog-card-link:hover {
           transform: translateY(-10px);
           box-shadow: 0 20px 50px rgba(11, 45, 93, 0.35);
           text-decoration: none;
       }

       .blog-card-link img {
           width: 100%;
           height: 200px;
           object-fit: cover;
           display: block;
           border-bottom: 3px solid #1766c6;
           /* stylish border */
           transition: transform 0.3s ease;
       }

       /* No zoom on hover */
       .blog-card-link:hover img {
           transform: none;
       }

       .blog-heading {
           color: var(--theme-color);
           font-weight: 700;
           transition: color 0.3s ease;
       }

       .blog-card-link:hover .blog-heading {
           color: #1766c6;
       }

       /* Keep Reading Bar */
       .blog-hover-bar {
           position: relative;
           overflow: hidden;
           z-index: 10;
           background: linear-gradient(135deg, var(--theme-color), var(--theme-color)f7);
           color: white;
           text-transform: uppercase;
           font-weight: 700;
           border-radius: 0 0 12px 12px;
           height: 50px;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 14px;
           opacity: 1;
           /* Always visible */
           cursor: pointer;
           user-select: none;
           font-size: 1.1rem;
           letter-spacing: 1.5px;
           box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
           transition: background 0.4s ease;
       }

       .blog-hover-bar svg {
           stroke: white;
           stroke-width: 2.5;
           width: 24px;
           height: 24px;
           transition: transform 0.3s ease;
       }

       .blog-hover-bar:hover svg {
           transform: translateX(8px);
       }

       /* Wave Background */
       .blog-hover-bar::before {
           content: '';
           position: absolute;
           inset: 0;
           background: linear-gradient(135deg, var(--theme-color) 40%, #1766c6 90%);
           mask-image: url('data:image/svg+xml;utf8,<svg width="160" height="50" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="wave" x="0" y="0" width="40" height="50" patternUnits="userSpaceOnUse"><path d="M 0 20 Q 10 35 20 20 T 40 20 V 50 H 0 Z" fill="white"/></pattern></defs><rect width="160" height="50" fill="url(%23wave)"/></svg>');
           -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="160" height="50" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="wave" x="0" y="0" width="40" height="50" patternUnits="userSpaceOnUse"><path d="M 0 20 Q 10 35 20 20 T 40 20 V 50 H 0 Z" fill="white"/></pattern></defs><rect width="160" height="50" fill="url(%23wave)"/></svg>');
           background-repeat: repeat-x;
           animation: waveMove 3s linear infinite;
           z-index: 1;
           border-radius: 0 0 12px 12px;
           opacity: 0.35;
           pointer-events: none;
       }

       @keyframes waveMove {
           0% {
               background-position-x: 0;
           }

           100% {
               background-position-x: 160px;
           }
       }

       /*=================== Process ======================*/
       .custom-process-section {
           position: relative;
           width: 100%;
           min-height: 80vh;
           background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1920&q=80') no-repeat center center fixed;
           background-size: cover;
           overflow: hidden;
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 50px 30px;
           box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
           color: var(--theme-color);
       }

       .custom-process-overlay {
           position: absolute;
           inset: 0;
           background: rgba(0, 0, 0, 0.4);
           /* Dark overlay */
           border-radius: 15px;
           z-index: 0;
       }


       /* Left UL box */
       .custom-process-summary {
           border: none;
           font-weight: 600;
           color: var(--theme-color);
           font-size: 1.1rem;
       }

       .custom-process-summary li {
           border: none;
           background: transparent;
           display: flex;
           align-items: center;
           padding: 15px 20px;
           border-radius: 10px;
           transition: background-color 0.3s ease, color 0.3s ease;
           cursor: pointer;
           user-select: none;
       }

       .custom-process-summary li i {
           font-size: 1.4rem;
           margin-right: 15px;
           color: var(--theme-color);
           transition: color 0.3s ease;
       }

       /* Hover effect on each list item */
       .custom-process-summary li:hover {
           background-color: var(--theme-color);
           color: white;
       }

       .custom-process-summary li:hover i {
           color: white;
       }

       /* Right side cards */
       .custom-process-card {
           background: white;
           padding: 25px 20px 20px 60px;
           /* space for icon */
           border-radius: 12px;
           box-shadow: 0 10px 20px rgba(11, 45, 93, 0.1);
           position: relative;
           transition: all 0.3s ease;
           height: 100%;
           color: var(--theme-color);
           cursor: pointer;
       }

       .custom-process-card:hover {
           background-color: var(--theme-color);
           color: white;
           transform: translateY(-5px);
           box-shadow: 0 15px 25px rgba(11, 45, 93, 0.4);
       }

       .custom-process-card:hover p,
       .custom-process-card:hover .custom-step-number,
       .custom-process-card:hover svg path,
       .custom-process-card:hover .custom-icon-step {
           color: white;
           stroke: white;
       }

       .custom-process-card:hover .custom-step-number {
           background: white;
           color: var(--theme-color);
       }

       .custom-step-number {
           position: absolute;
           top: -15px;
           left: -15px;
           background: var(--theme-color);
           color: white;
           width: 35px;
           height: 35px;
           border-radius: 50%;
           display: grid;
           place-items: center;
           font-weight: bold;
           font-size: 1.1em;
           z-index: 2;
       }

       .custom-arrow-icon {
           position: absolute;
           top: 10px;
           right: -30px;
           width: 30px;
           height: 30px;
           transition: stroke 0.3s ease;
           z-index: 1;
       }

       .custom-icon-step {
           position: absolute;
           left: 20px;
           top: 50%;
           transform: translateY(-50%);
           font-size: 1.8rem;
           color: var(--theme-color);
           transition: color 0.3s ease;
           z-index: 2;
       }

       @media (max-width: 768px) {
           .custom-arrow-icon {
               display: none;
           }

           .custom-process-card {
               margin-bottom: 20px;
               padding-left: 50px;
           }

           .custom-step-number {
               left: 10px;
               top: -10px;
           }

           .custom-icon-step {
               left: 15px;
               font-size: 1.5rem;
           }
       }

       /* Scrollbar styles for WebKit browsers */
       .about-style-01 .col-lg-6[style*="overflow-y: auto"]::-webkit-scrollbar {
           width: 8px;
       }

       .about-style-01 .col-lg-6[style*="overflow-y: auto"]::-webkit-scrollbar-track {
           background: #e0e4eb;
           border-radius: 4px;
       }

       .about-style-01 .col-lg-6[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
           background-color: var(--theme-color) !important;
           border-radius: 4px;
           border: 2px solid #e0e4eb;
       }

       .about-style-01 .col-lg-6[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
           background-color: #092547 !important;
       }

       /* Scrollbar styles for Firefox */
       .about-style-01 .col-lg-6[style*="overflow-y: auto"] {
           scrollbar-width: thin;
           scrollbar-color: var(--theme-color) #e0e4eb !important;
       }

       /* Background gradient and animation */
       .about-style-01 {
           position: relative;
           background: linear-gradient(135deg, var(--theme-color), #102f54, #1a4977);
           background-size: 400% 400%;
           animation: gradientFlow 12s ease infinite;
           color: #ffffff;
           overflow: hidden;
       }

       @keyframes gradientFlow {
           0% {
               background-position: 0% 50%;
           }

           50% {
               background-position: 100% 50%;
           }

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

       /* Bubble/Particle animation */
       .bubble {
           position: absolute;
           border-radius: 50%;
           opacity: 0.15;
           animation: floatUp 10s linear infinite;
           background: #ffffff;
       }

       .bubble:nth-child(1) {
           width: 30px;
           height: 30px;
           left: 10%;
           bottom: -60px;
           animation-delay: 0s;
       }

       .bubble:nth-child(2) {
           width: 20px;
           height: 20px;
           left: 40%;
           bottom: -40px;
           animation-delay: 2s;
       }

       .bubble:nth-child(3) {
           width: 25px;
           height: 25px;
           left: 70%;
           bottom: -50px;
           animation-delay: 4s;
       }

       .bubble:nth-child(4) {
           width: 15px;
           height: 15px;
           left: 85%;
           bottom: -30px;
           animation-delay: 6s;
       }

       .bubble:nth-child(5) {
           width: 10px;
           height: 10px;
           left: 25%;
           bottom: -20px;
           animation-delay: 8s;
       }

       @keyframes floatUp {
           0% {
               transform: translateY(0) scale(1);
               opacity: 0.15;
           }

           50% {
               transform: translateY(-50px) scale(1.2);
               opacity: 0.3;
           }

           100% {
               transform: translateY(-800px) scale(0.8);
               opacity: 0;
           }
       }

       /*++++++++++++++++++++++++++++ Process ++++++++++++++++++++++++++++++*/
       .process {
           margin: 0;
           padding: 0;
           display: block;
           overflow: hidden;
           counter-reset: flag;
       }

       ol.process {
           box-shadow: 0 0 15px 1px rgba(11, 45, 93, 0.35) !important;
           border-radius: 0;
       }

       .process li {
           display: block;
           box-sizing: border-box;
           text-decoration: none;
           outline: none;
           float: left;
           font-size: 1em;
           line-height: 1.2em;
       }

       .process li.break {
           float: right;
       }

       ol.process li {
           height: 6em;
           width: 14.28%;
           padding: .7em 1.5em 0 2.3em;
           background: var(--theme-color) !important;
           color: white !important;
           position: relative;
       }

       ul.process li {
           position: relative;
           padding-left: 2.5em;
           display: flex;
           align-items: center;
           gap: 0.5em;
       }

       ul.process .icon {
           width: 1.2em;
           height: 1.2em;
           flex-shrink: 0;
           margin-right: 0.5em;
       }

       ul.process li {
           height: 3em;
           width: 28.4%;
           border: 0 solid rgba(11, 45, 93, 0.3) !important;
           border-width: 0 0 0 2px;
           padding: 0 0 0 1em;
           box-shadow: none;
           font-weight: bold;
           color: var(--theme-color) !important;
       }

       ul.process li:last-child {
           width: 14.8%;
           border-width: 0 2px 0 2px;
       }

       /* first ol li border-radius */
       ol.process li:first-child {
           border-radius: 0 0 0 0;
       }

       ol.process li:last-child {
           border-radius: 0 0 0 0;
           padding-right: 20px;
       }

       /* arrows */
       ol.process li:after {
           content: '';
           position: absolute;
           top: 0.6em;
           right: -2.75em;
           width: 6em;
           height: 4em;
           transform: rotateZ(30deg) rotateX(-60deg) rotateY(-47deg);
           z-index: 1;
           background: var(--theme-color) !important;
           box-shadow: 3px -8px 0 3px rgba(255, 255, 255, 0.8);
           border-radius: 0 0 0 150px;
       }

       /* no arrow on last */
       .process li:last-child:after {
           content: none;
       }

       /* numbers */
       ol.process li:before {
           content: counter(flag);
           counter-increment: flag;
           height: 100%;
           padding: .55em 0 0 0;
           position: absolute;
           top: 0;
           left: .4em;
           font-weight: bold;
           font-size: 2em;
           color: rgba(255, 255, 255, .3) !important;
       }

       ol.process li:hover,
       ol a.active,
       ol.process li:hover:after,
       ol li.active:after {
           background: #06204a !important;
           /* darker navy for hover */
       }

       @media (max-width:1024px) {
           ol.process li {
               height: 70px;
               width: 100%;
           }

           ul.process {
               float: left;
               width: 25%;
           }

           ol.process li:before {
               padding: .6em 0 0 0;
           }

           ul.process li,
           ul.process li:last-child {
               float: left;
               height: 140px;
               width: 100%;
               padding: 4px 4px 0 0;
               border-width: 2px 0 0 0;
           }

           ol.process {
               width: 75%;
           }

           ol.process li {
               border-top: 2px solid rgba(255, 255, 255, .5);
               padding: 10px 4px 0 40px;
               font-size: 1.1em;
           }

           /* arrows on mobile */
           ol.process li:after {
               content: '';
               position: absolute;
               top: 64px;
               left: 1em;
               width: .5em;
               height: .5em;
               transform: rotateZ(45deg) rotateX(0deg) rotateY(0deg);
               z-index: 1;
               background: var(--theme-color) !important;
               box-shadow: 1px 1px 0 1px rgba(255, 255, 255, .5);
               border-radius: 50px 0 0px 0;
           }

           ol.process li:first-child {
               border-radius: 0 0 0 0;
           }

           ol.process li:last-child {
               border-radius: 0 0 0 0;
               padding-right: 20px;
           }
       }

       /* ================= BAck To Top ==================== */
       /* Back to Top Button */
       #backToTop {
           position: fixed;
           bottom: 40px;
           right: 40px;
           width: 48px;
           height: 48px;
           border-radius: 50%;
           justify-content: center;
           align-items: center;
           font-size: 28px;
           color: #fff;
           border: none;
           cursor: pointer;
           z-index: 100;
           display: flex;
           opacity: 0;
           /* hidden initially */
           transition: opacity 0.5s, transform 0.3s, background 0.3s;

           /* 🟦 Deep blue to sky blue gradient */
           background: conic-gradient(#003865 0%, #00AEEF 100%);

           animation: pulse 2s infinite;
       }

       /* Fade-in class */
       #backToTop.show {
           opacity: 1;
       }

       /* Hover effect */
       #backToTop:hover {
           transform: scale(1.1);
           background: conic-gradient(#005c99 0%, #00BFFF 100%);
       }

       /* Arrow animation */
       #backToTop span {
           position: absolute;
           font-size: 24px;
           z-index: 101;
           animation: bounceRotate 1.5s infinite;
       }

       /* Arrow bounce + rotate */
       @keyframes bounceRotate {

           0%,
           100% {
               transform: translateY(0) rotate(0deg);
           }

           50% {
               transform: translateY(-5px) rotate(15deg);
           }
       }

       /* Pulse animation for button */
       @keyframes pulse {
           0% {
               transform: scale(1);
               box-shadow: 0 0 0 rgba(0, 174, 239, 0.7);
               /* light blue glow */
           }

           50% {
               transform: scale(1.05);
               box-shadow: 0 0 15px rgba(0, 174, 239, 0.7);
           }

           100% {
               transform: scale(1);
               box-shadow: 0 0 0 rgba(0, 174, 239, 0.7);
           }
       }

       /* Fixed Social Media Sidebar */
       .social-sidebar {
           position: fixed;
           top: 50%;
           right: 0;
           transform: translateY(-50%);
           display: flex;
           flex-direction: column;
           gap: 10px;
           z-index: 1000;
       }

       .social-sidebar a {
           display: flex;
           align-items: center;
           justify-content: flex-start;
           width: 144px;
           padding: 10px;
           color: #fff;
           text-decoration: none;
           font-weight: bold;
           border-radius: 25px 0 0 25px;
           transform: translateX(100px);
           transition: all 0.3s ease;
       }

       .social-sidebar a svg {
           width: 28px;
           height: 28px;
           margin-right: 10px;
           flex-shrink: 0;
       }

       /* Slide-in on hover */
       .social-sidebar a:hover {
           transform: translateX(0);
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
       }

       /* Social colors */
       .facebook {
           background-color: #1877F2;
       }

       .instagram {
           background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
       }

       .twitter {
           background-color: #1DA1F2;
       }

       .linkedin {
           background-color: #0077B5;
       }

       .youtube {
           background-color: #FF0000;
       }

       /*=========================category Tbas =====================*/
       .ctabs-wrapper {
           margin-top: 40px;
       }

       /* Tabs Wrapper (scrolling) */
       .ctabs-tabs-wrapper {
           overflow-x: auto;
           white-space: nowrap;
           scrollbar-width: thin;
           scrollbar-color: #1d71b8 #e5e5e5;
       }

       .ctabs-tabs-wrapper::-webkit-scrollbar {
           height: 6px;
       }

       .ctabs-tabs-wrapper::-webkit-scrollbar-track {
           background: #e5e5e5;
           border-radius: 8px;
       }

       .ctabs-tabs-wrapper::-webkit-scrollbar-thumb {
           background: linear-gradient(135deg, #0c4370, #1d71b8);
           border-radius: 8px;
       }

       /* Tabs design */
       .ctabs-nav-tabs {
           border-bottom: 2px solid #ddd;
           flex-wrap: nowrap;
       }

       .ctabs-nav-tabs .nav-link {
           display: inline-block;
           border: 1px solid #ccc;
           border-bottom: none;
           border-radius: 6px 6px 0 0;
           color: #0c4370;
           font-weight: 600;
           margin-right: 5px;
           transition: all 0.3s ease;
           padding: 10px 18px;
           white-space: nowrap;
       }

       .ctabs-nav-tabs .nav-link.active {
           background: linear-gradient(135deg, #0c4370, #1d71b8);
           color: #fff;
           border-color: #0c4370 #0c4370 #fff;
           font-weight: 700;
       }

       /* Tab Content with fixed height */
       .ctabs-tab-content {
           border: 1px solid #ddd;
           border-top: none;
           padding: 25px 15px;
           background: #fff;
           border-radius: 0 0 8px 8px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
           min-height: 420px;
           max-height: 420px;
           overflow-y: auto;
       }

       .ctabs-tab-content::-webkit-scrollbar {
           width: 6px;
       }

       .ctabs-tab-content::-webkit-scrollbar-thumb {
           background: #1d71b8;
           border-radius: 10px;
       }

       /* Section Heading */
       .ctabs-heading {
           font-size: 22px;
           font-weight: 700;
           color: #0c4370;
           margin-bottom: 20px;
           text-align: center;
       }

       /* Info Box */
       .ctabs-info-box {
           background: #f9fafb;
           border-radius: 12px;
           padding: 20px;
           text-align: center;
           transition: all 0.3s ease;
           border: 1px solid #e5e5e5;
       }

       .ctabs-info-box:hover {
           transform: translateY(-4px);
           box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
           background: #ffffff;
       }

       .ctabs-info-box img {
           max-width: 80px;
           margin-bottom: 12px;
       }

       .ctabs-info-box h5 {
           font-weight: 700;
           color: #0c4370;
           margin-bottom: 10px;
           font-size: 18px;
       }

       .ctabs-info-box p {
           font-size: 14px;
           color: #555;
           margin-bottom: 0;
       }

       /* Keyword Section */
       .ctabs-keywords-container {
           max-height: 220px;
           overflow-y: auto;
           padding-right: 8px;
       }

       .ctabs-keywords-container::-webkit-scrollbar {
           width: 5px;
       }

       .ctabs-keywords-container::-webkit-scrollbar-thumb {
           background: #0c4370;
           border-radius: 8px;
       }

       .ctabs-keyword-card {
           display: flex;
           justify-content: space-between;
           align-items: center;
           background: #fff;
           border: 1px dashed #1d71b8;
           border-radius: 8px;
           padding: 10px 15px;
           margin-bottom: 10px;
           transition: all 0.3s ease;
       }

       .ctabs-keyword-card:hover {
           background: #f8fbff;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }

       .ctabs-keyword-info strong {
           display: block;
           color: #0c4370;
           font-weight: 600;
       }

       .ctabs-keyword-info small {
           color: #555;
           font-size: 13px;
       }

       .ctabs-keyword-btn {
           background: linear-gradient(135deg, #0c4370, #1d71b8);
           color: #fff;
           border: none;
           border-radius: 6px;
           padding: 6px 12px;
           font-size: 13px;
           font-weight: 500;
           transition: background 0.3s ease;
       }

       .ctabs-keyword-btn:hover {
           background: linear-gradient(135deg, #1d71b8, #0c4370);
       }

       /* Swiper Navigation */
       .ctabs-swiper .swiper-button-next,
       .ctabs-swiper .swiper-button-prev {
           background: #0c4370;
           color: #fff;
           width: 38px;
           height: 38px;
           border-radius: 50%;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
       }

       .ctabs-swiper .swiper-button-next::after,
       .ctabs-swiper .swiper-button-prev::after {
           font-size: 18px;
           font-weight: bold;
       }

       /* Swiper Pagination Dots */
       .ctabs-swiper .swiper-pagination-bullet {
           background: #ccc;
           opacity: 1;
           width: 10px;
           height: 10px;
       }

       .ctabs-swiper .swiper-pagination-bullet-active {
           background: #1d71b8;
           transform: scale(1.2);
       }
       
       /*============================= Animation =======================*/