/* ── Reset scope ── */
 .cmap-section * {
   box-sizing: border-box;
   margin: 0;
   padding: 0
 }

 /* ── Section shell ── */
 .cmap-section {
   width: 100%;
   font-family: var(--title-font, "Outfit", sans-serif);
   overflow: hidden;
 }

 /* ── Map wrapper ── */
 .cmap-map-wrap {
   position: relative;
   width: 100%;
   height: 500px;
 }

 .cmap-map-wrap iframe {
   width: 100%;
   height: 100%;
   border: none;
   display: block;
   filter: saturate(0.8) hue-rotate(5deg);
 }

 /* ── Gradient fade at bottom of map ── */
 .cmap-map-wrap::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(240, 253, 254, 0) 55%, var(--theme-bg-color1, #F0FDFE) 100%);
   pointer-events: none;
 }

 /* ── Pulse marker ── */
 .cmap-pulse {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5;
   pointer-events: none;
 }

 .cmap-pulse-dot {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--theme-color2, #FF6D45);
   position: relative;
   z-index: 2;
 }

 .cmap-pulse-ring {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 2px solid var(--theme-color2, #FF6D45);
   animation: cmap-pulse-anim 2s ease-out infinite;
 }

 .cmap-pulse-ring:nth-child(2) {
   animation-delay: .65s
 }

 .cmap-pulse-ring:nth-child(3) {
   animation-delay: 1.3s
 }

 @keyframes cmap-pulse-anim {
   0% {
     width: 18px;
     height: 18px;
     opacity: .9
   }

   100% {
     width: 72px;
     height: 72px;
     opacity: 0
   }
 }

 /* ── Cards row — overlaps map by 90px ── */
 .cmap-cards-row {
   position: relative;
   z-index: 10;
   margin-top: -90px;
   padding: 0 40px 80px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px;
 }

 /* ── Individual card ── */
 .cmap-card {
   background: #fff;
   border-radius: 20px;
   padding: 30px 24px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   border: 1px solid rgba(11, 70, 84, 0.07);
   height: 220px;
   /* all cards same height */
   opacity: 0;
   transform: translateY(36px);
   transition:
     opacity .55s ease,
     transform .55s ease,
     box-shadow .3s ease;
   will-change: transform;
 }

 .cmap-card.cmap-visible {
   opacity: 1;
   transform: translateY(0);
 }

 .cmap-card:hover {
   box-shadow: 0 16px 48px rgba(11, 70, 84, 0.13);
   transform: translateY(-6px) !important;
 }

 /* ── Icon circle ── */
 .cmap-icon-wrap {
   width: 46px;
   height: 46px;
   border-radius: 13px;
   background: linear-gradient(135deg, var(--heading-color, #0B4654), var(--heading-color, #1F5A68));
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: background .3s;
 }

 .cmap-card:hover .cmap-icon-wrap {
   background: linear-gradient(135deg, var(--theme-color2, #FF6D45), var(--theme-color7, #FF853F));
 }

 .cmap-icon-wrap i {
   color: #fff;
   font-size: 21px;
 }

 /* ── Text ── */
 .cmap-card-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--theme-color3, #9DAAA4);
   font-family: var(--text-font, "Noto Sans", sans-serif);
 }

 .cmap-card-value {
   font-size: 14.5px;
   font-weight: 500;
   color: var(--heading-color, #0B4654);
   line-height: 1.5;
   margin-top: 4px;
 }

 .cmap-card-value a {
   color: var(--link-color, #0B4654);
   text-decoration: none;
   transition: color .2s;
   font-weight: 500;
 }

 .cmap-card-value a:hover {
   color: var(--theme-color2, #FF6D45);
 }

 /* ── Bottom accent bar ── */
 .cmap-accent-bar {
   height: 3px;
   border-radius: 3px;
   background: linear-gradient(90deg, var(--theme-color2, #FF6D45), var(--theme-color7, #FF853F));
   width: 30px;
   margin-top: auto;
   transition: width .3s;
 }

 .cmap-card:hover .cmap-accent-bar {
   width: 56px;
 }

 /* ── Responsive ── */
 @media(max-width:1100px) {
   .cmap-cards-row {
     grid-template-columns: repeat(2, 1fr);
     padding: 0 28px 60px
   }

   .domain-section {
     padding: 0 28px 60px
   }
 }

 @media(max-width:640px) {
   .cmap-map-wrap {
     height: 320px
   }

   .domain-section {
     padding: 0 18px 40px;
   }

   .cmap-cards-row {
     grid-template-columns: 1fr;
     padding: 0 18px 40px;
     margin-top: -60px
   }

   .cmap-card {
     height: auto
   }
 }

 .map-wrap {
   height: 100%;
 }

 .map-wrap iframe {
   pointer-events: none;

 }

 .status-badge {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: .35em .75em .35em .55em;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   white-space: nowrap;
 }

 .status-badge .pulse-dot {
   position: relative;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   flex-shrink: 0;
 }

 .status-badge .pulse-ring {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 9px;
   height: 9px;
   border-radius: 50%;
   border-width: 1.5px;
   border-style: solid;
   animation: badge-pulse 2s ease-out infinite;
   pointer-events: none;
 }

 .status-badge .pulse-ring:nth-child(2) {
   animation-delay: .65s;
 }

 .status-badge .pulse-ring:nth-child(3) {
   animation-delay: 1.3s;
 }

 @keyframes badge-pulse {
   0% {
     width: 9px;
     height: 9px;
     opacity: .85;
   }

   100% {
     width: 28px;
     height: 28px;
     opacity: 0;
   }
 }

 .badge-open {
   background: #e6f7ef;
   color: #166534;
 }

 .badge-open .pulse-dot {
   background: #22c55e;
 }

 .badge-open .pulse-ring {
   border-color: #22c55e;
 }

 .badge-closing {
   background: #fefce8;
   color: #854d0e;
 }

 .badge-closing .pulse-dot {
   background: #eab308;
 }

 .badge-closing .pulse-ring {
   border-color: #eab308;
 }

 .badge-opening {
   background: #eff6ff;
   color: #1e40af;
 }

 .badge-opening .pulse-dot {
   background: #3b82f6;
 }

 .badge-opening .pulse-ring {
   border-color: #3b82f6;
 }

 .badge-closed {
   background: #f3f4f6;
   color: #6b7280;
 }

 .badge-closed .pulse-dot {
   background: #9ca3af;
 }

 /* also us */

 .domain-section .row {
   align-items: center;
 }

 /* .domain-section .icon{
  background-color: background: rgba(2, 141, 184, 0.08);;
} */
 /* ---------- Left: copy ---------- */
 .domain-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--theme-color7);
   margin-bottom: 18px;
 }

 .domain-eyebrow::before {
   content: "";
   width: 26px;
   height: 2px;
   background: var(--theme-color7);
 }

 .domain-title {
   font-family: 'Sora', sans-serif;
   font-weight: 800;
   color: var(--heading-color);
   font-size: clamp(1.9rem, 3.4vw, 2.75rem);
   line-height: 1.15;
   margin-bottom: 20px;
 }

 .domain-title .highlight {
   position: relative;
   color: var(--theme-color7);
   white-space: nowrap;
 }

 .domain-title .highlight svg {
   position: absolute;
   left: 0;
   bottom: -6px;
   width: 100%;
   height: 10px;
 }

 .domain-copy {
   color: var(--text-muted);
   font-size: 1.04rem;
   max-width: 460px;
   margin-bottom: 32px;
 }

 .domain-cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   font-size: 0.98rem;
   color: #fff;
   background: var(--theme-color1);
   padding: 14px 26px;
   border-radius: 8px;
   text-decoration: none;
   transition: background .2s ease, transform .2s ease;
 }

 .domain-cta i {
   transition: transform .2s ease;
   font-size: 0.85rem;
 }

 .domain-cta:hover {
   color: white;
   transform: translateY(-2px);
 }

 .domain-cta:hover i {
   transform: translateX(4px);
 }

 /* ---------- Right: browser mock (signature element) ---------- */
 .browser-wrap {
   position: relative;
   max-width: 460px;
   margin: 0 auto;
 }

 /* .browser-wrap .link-img {
   position: absolute;
   right: 0;
   top: -28px;
   z-index: 9;
 } */

 .browser-mock {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 30px 60px -20px rgba(4, 42, 54, 0.25);
   border: 1px solid var(--hairline);
   overflow: hidden;
   transform: rotate(-2deg);
   animation: settle 1s ease-out;
 }

 @keyframes settle {
   from {
     opacity: 0;
     transform: rotate(-2deg) translateY(18px);
   }

   to {
     opacity: 1;
     transform: rotate(-2deg) translateY(0);
   }
 }

 .browser-chrome {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 16px;
   background: #F3F6F7;
   border-bottom: 1px solid var(--hairline);
 }

 .browser-dots {
   display: flex;
   gap: 6px;
   flex-shrink: 0;
 }

 .browser-dots span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: rgba(4, 42, 54, 0.18);
 }

 .browser-dots span:nth-child(1) {
   background: #FF5F57;
 }

 .browser-dots span:nth-child(2) {
   background: #FEBC2E;
 }

 .browser-dots span:nth-child(3) {
   background: #28C840;
 }

 .browser-urlbar {
   flex: 1;
   background: #fff;
   border: 1px solid var(--hairline);
   border-radius: 20px;
   padding: 6px 14px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.8rem;
   color: var(--theme-color1);
 }

 .browser-urlbar i {
   color: var(--theme-color7);
   font-size: 0.75rem;
 }

 .browser-body {
   padding: 46px 30px;
   text-align: center;
 }

 .domain-section .icon {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: rgba(2, 141, 184, 0.08);
   color: var(--theme-color7);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .badge-dot {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: rgba(2, 141, 184, 0.08);
   color: var(--theme-color7);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   margin: 0 auto 18px;
 }

 .browser-body h4 {
   font-family: 'Sora', sans-serif;
   font-weight: 700;
   color: var(--heading-color);
   font-size: 1.05rem;
   margin-bottom: 6px;
 }

 .browser-body p {
   color: var(--text-muted);
   font-size: 0.85rem;
   margin: 0;
 }

 /* connecting dashed line + node from box to text, subtle */
 .link-node {
   position: absolute;
   top: -14px;
   right: 34px;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--theme-color7);
   box-shadow: 0 0 0 5px rgba(2, 141, 184, 0.15);
 }

 @media (max-width: 991px) {
   .browser-wrap {
     margin-top: 50px;
   }
 }




 .single-about-box .about-icon {
   color: var(--theme-color2);
   font-size: 32px;
 }

 .single-about-box .about-desc p {
   color: var(--heading-color);
 }

 .single-about-box:hover .about-icon,
 .single-about-box:hover .about-desc p {
   color: var(--theme-color-white);
 }

 ul li i {
   color: var(--theme-color2);
   font-size: 18px;
 }

 .badge-primary {
   background-color: var(--theme-color1);
 }

 .about-counter {
   background-image: url(../images/home2/about-bg1.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   border-radius: 20px;
   padding: 32px 60px 10px 40px;
   position: relative;
   z-index: 1;
   overflow: hidden;
 }

 .about-counter .counter {
   display: inline-block;
   color: var(--theme-color-white);
   font-family: var(--title-font);
   font-weight: 600;
   font-size: 50px;
   margin-bottom: 20px;
 }

 .about-counter span {
   display: inline-block;
   color: var(--theme-color-white);
   font-family: var(--title-font);
   font-weight: 600;
   font-size: 50px;
 }

 .about-counter p {
   color: var(--theme-color-white);
   font-family: var(--title-font);
   font-weight: 500;
   font-size: 20px;
   line-height: 30px;
 }

 .custom-faq .accordion-button {
   padding: 0px 22px;
   font-size: 18px;
   background: #fff;
   color: var(--theme-color2);
   box-shadow: none !important;
 }

 .custom-faq .accordion-button:not(.collapsed) {
   background: var(--theme-color2);
   color: #fff;
 }

 .accordion-button:not(.collapsed)::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   transform: rotate(-180deg);
 }

 .custom-faq .accordion-body {
   padding: 20px 22px;
   line-height: 1.7;
 }

 hr {
   border: none;
   border-top: 1px solid #d6dae4;
   margin: 6px 0;
 }

 hr.dashed {
   border-style: dashed;
   background-color: unset !important;

 }

 hr.solid {
   border: none;
   border-top: 1px solid #d6dae4;
   margin: 6px 0;
 }

 hr.dotted {
   border-style: dotted;
   background-color: unset !important;

 }

 .custom-counter {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 2px;
   background: #e2e8f0;
   border: 2px solid #e2e8f0;
   border-radius: 16px;
   overflow: hidden;
   margin-top: 48px;
 }

 .custom-counter__item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 48px 32px;
   background: #fff;
   text-align: center;
   position: relative;
   transition: background 0.3s ease, transform 0.3s ease;
   cursor: default;
 }

 .custom-counter__item:hover {
   background: var(--gradient-2);
   z-index: 1;
 }

 .custom-counter__icon-wrap {
   width: 60px;
   height: 60px;
   border-radius: 14px;
   background: var(--gradient-2);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.3s ease, background 0.3s ease;
 }

 .custom-counter__item:hover .custom-counter__icon-wrap {
   transform: translateY(-4px) scale(1.08);
   /* background: linear-gradient(135deg, var(--theme-color2) 0%, var(--theme-color1) 100%); */
   background: var(--theme-color2);
 }

 .custom-counter__icon-wrap i {
   font-size: 22px;
   color: var(--theme-color2);
   transition: color 0.3s ease;
 }

 .custom-counter__item:hover .custom-counter__icon-wrap i {
   color: #fff;
 }


 .custom-counter__number {
   font-size: 2.6rem;
   font-weight: 800;
   line-height: 1;
   color: #1e1b4b;
   letter-spacing: -1px;
   font-variant-numeric: tabular-nums;
 }


 .custom-counter__desc {
   font-size: 0.88rem;
   font-weight: 500;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }


 @media (max-width: 600px) {
   .custom-counter {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 380px) {
   .custom-counter {
     grid-template-columns: 1fr;
   }
 }

 .custom-counter__icon-wrap:hover {
   transform: translateY(-4px) scale(1.08);
   background: var(--theme-color2);
 }

 .custom-counter__icon-wrap:hover i {
   color: #fff;
 }

 .rounded-lg {
   border-radius: .8rem !important;
 }

 .xc-card {
   max-width: 340px;
   width: 100%;
   background: var(--theme-color-white);
   border-radius: 20px;
   overflow: hidden;
   border: 1.5px solid rgba(11, 70, 84, 0.10);
   font-family: var(--text-font);
   transition: transform 0.26s ease, box-shadow 0.26s ease;
 }

 .xc-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 16px 40px rgba(11, 70, 84, 0.12);
 }

 /* image */
 .xc-card__img-wrap {
   position: relative;
   height: 210px;
   overflow: hidden;
 }

 .xc-card__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.4s ease;
 }

 .xc-card:hover .xc-card__img {
   transform: scale(1.05);
 }

 .xc-card__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(11, 70, 84, 0) 50%, rgba(11, 70, 84, 0.55) 100%);
   pointer-events: none;
 }

 /* badge */
 .xc-card__badge {
   position: absolute;
   top: 14px;
   left: 14px;
   background: var(--theme-color2);
   color: var(--theme-color-white);
   font-family: var(--text-font);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.07em;
   text-transform: uppercase;
   padding: 5px 12px;
   border-radius: 30px;
 }

 /* body */
 .xc-card__body {
   padding: 1.4rem 1.5rem 1.6rem;
   background: var(--theme-color-white);
 }

 /* meta row */
 .xc-card__meta {
   display: flex;
   align-items: center;
   gap: 6px;
   font-family: var(--text-font);
   font-size: 12px;
   color: var(--theme-color3);
   margin-bottom: 0.6rem;
 }

 .xc-card__meta-dot {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--theme-color3);
   display: inline-block;
 }

 /* title */
 .xc-card__title {
   font-family: var(--title-font);
   font-size: 20px;
   font-weight: 700;
   color: var(--heading-color);
   line-height: 1.25;
   margin: 0 0 0.6rem;
 }

 /* desc */
 .xc-card__desc {
   font-family: var(--text-font);
   font-size: 14px;
   color: var(--theme-color3);
   line-height: 1.7;
   margin: 0 0 1.3rem;
 }

 /* divider */
 .xc-card__divider {
   height: 1px;
   background: rgba(11, 70, 84, 0.08);
   margin: 0 0 1.2rem;
 }

 /* footer row */
 .xc-card__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }

 /* button */
 .xc-card__btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--theme-color1);
   color: var(--theme-color-white);
   border: none;
   border-radius: 12px;
   padding: 10px 20px;
   font-family: var(--text-font);
   font-size: 13.5px;
   font-weight: 600;
   cursor: pointer;
   text-decoration: none;
   transition: background 0.2s ease, transform 0.15s ease;
   white-space: nowrap;
 }

 .xc-card__btn:hover {
   background: var(--theme-color4);
   color: var(--theme-color-white);
   transform: scale(1.03);
 }

 .xc-card__btn:active {
   transform: scale(0.97);
 }

 .xc-card__btn svg {
   transition: transform 0.18s ease;
   flex-shrink: 0;
 }

 .xc-card__btn:hover svg {
   transform: translateX(3px);
 }

 /* icon link */
 .xc-card__icon-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1.5px solid rgba(11, 70, 84, 0.15);
   background: var(--theme-bg-color1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.18s ease, border-color 0.18s ease;
   flex-shrink: 0;
 }

 .xc-card__icon-btn:hover {
   background: var(--theme-color2);
   border-color: var(--theme-color2);
 }

 .xc-card__icon-btn:hover svg {
   stroke: #fff;
 }

 .xc-card__icon-btn svg {
   stroke: var(--theme-color1);
   transition: stroke 0.18s ease;
 }

 /* page bg */
 .xc-page-bg {
   background: var(--gradient-2);
   min-height: 380px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2.5rem 1rem;
 }

 .blog-details-area .blog-details-socila-box .blog-details-social-icon ul li:nth-child(1) i {
   background: #25D366;
 }

 .blog-details-area .blog-details-socila-box .blog-details-social-icon ul li:nth-child(2) i {
   background: #3B5998;
 }

 .blog-details-area .blog-details-socila-box .blog-details-social-icon ul li:nth-child(3) i {
   background: #000000;
 }

 .blog-details-area .blog-details-socila-box .blog-details-social-icon ul li:nth-child(4) i {
   background: #0a66c2;
 }

 .blog-details-area .blog-details-socila-box .blog-details-social-icon ul li:nth-child(5) i {
   background: #E60023;
 }

 .blog-details-area .blog-details-socila-box .blog-details-social-icon ul li:nth-child(6) i {
   background: #4285F4;
 }

 .initials-avatar {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: linear-gradient(135deg, #4f46e5, #7c3aed);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-weight: 700;
   text-transform: uppercase;
 }

 .page-link {
   color: var(--theme-color2);
 }

 .page-item.active .page-link {
   background-color: var(--theme-color2);
   border-color: var(--theme-color2);
 }

 .page-link:hover {
   color: var(--theme-color2);
 }

 .icon-card {
   background: unset;
   padding: unset;
 }

 .service-section-home2.no-margin {
   margin: unset;
 }

 .primary-btn-solid {
   display: inline-block;
   font-family: var(--title-font);
   color: var(--theme-color-white);
   background-color: var(--theme-color2);
   padding: 16px 30px;
   font-weight: 400;
   font-size: 18px;
   border-radius: 45px;
   position: relative;
   z-index: 1;
   transition: all 300ms ease;
   overflow: hidden;
 }

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

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

 .primary-btn-outline {
   display: inline-block;
   font-family: var(--title-font);
   color: var(--theme-color2);
   background-color: transparent;
   border: 2px solid var(--theme-color2);
   padding: 16px 30px;
   font-weight: 400;
   font-size: 18px;
   border-radius: 45px;
   position: relative;
   z-index: 1;
   transition: all 300ms ease;
   overflow: hidden;
 }

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

 .primary-btn-outline:hover {
   color: var(--theme-color-white);
   border-color: var(--theme-color2);
 }

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

 /* .main-menu .navigation>li>ul>li>a {
  margin: 0 12px;
} */
 .sec-title.text-white h2 {
   color: var(--theme-color-white) !important;
 }

 .modal-backdrop {
   position: unset !important;
 }

 .breadcumb-area {
   position: relative;
 }

 .breadcumb-area::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   /* black filter */
   z-index: 1;
 }

 .breadcumb-area>* {
   position: relative;
   z-index: 2;
 }

 .primary-text {
   color: var(--theme-color2);
 }

 .sec-title {
   margin-bottom: 10px;
 }

 .latest-blog-section-one {
   z-index: unset;
   margin: 0px 30px 0 30px
 }

 .contact-section-home2-classic .contact-form-box {
   padding: 76px 80px 56px;
 }

 .services-details-area .widget-sidber-contact-box {
   border-radius: 24px;
 }

 .services-details-area .services-details-thumb img {
   border-radius: 24px;
 }

 .input-icon {
   position: relative;
 }

 .input-icon i {
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
   color: #999;
   pointer-events: none;
 }

 .input-icon .form-control {
   padding-right: 45px;
 }

 /* Textarea */
 .textarea-icon i {
   top: 20px;
   transform: none;
 }

 .textarea-icon textarea {
   padding-right: 45px;
 }

 .btn-primary {
   background-color: var(--theme-color2) !important;
   border-color: var(--theme-color2) !important;
 }

 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active {
   background-color: var(--theme-color2) !important;
   border-color: var(--theme-color2) !important;
   box-shadow: none !important;
 }

 .quick-contact .form-control {
   padding: 14px 14px;
 }

 .underlined-heading {
   position: relative;
   display: inline-block;
   padding-bottom: 10px;
 }

 .underlined-heading::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 60px;
   height: 4px;
   background: var(--theme-color2);
   border-radius: 10px;
   animation: underlineGrow 2s ease-in-out infinite alternate;
 }

 @keyframes underlineGrow {
   from {
     width: 40px;
   }

   to {
     width: 60px;
   }
 }

 .form-control:focus {
   box-shadow: none;
 }

 /* process section */

 .process-section {
   padding: 30px 20px 90px 20px;
   background: var(--theme-color-white);
   overflow: hidden;
 }

 .process-section__inner {
   max-width: 1280px;
   margin: 0 auto;
 }

 /* ── Grid ── */
 .process-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 28px;
   position: relative;
 }

 /* ── Connector SVG overlay ── */
 #connector-svg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
   overflow: visible;
 }

 /* ── Card ── */
 .process-card {
   position: relative;
   background: var(--theme-color-white);
   border: 1.5px solid #E8EFF1;
   border-radius: 20px;
   padding: 40px 28px 32px;
   text-align: center;
   transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
   z-index: 1;
   cursor: default;
 }

 .process-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 24px 60px rgba(11, 70, 84, 0.12);
   border-color: var(--theme-color2);
 }

 /* Accent top bar on hover */
 .process-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 28px;
   right: 28px;
   height: 3px;
   background: var(--theme-color2);
   border-radius: 0 0 4px 4px;
   transform: scaleX(0);
   transform-origin: center;
   transition: transform 0.35s ease;
 }

 .process-card:hover::before {
   transform: scaleX(1);
 }

 /* ── Step number ── */
 .process-card__step {
   position: absolute;
   top: -16px;
   left: 50%;
   transform: translateX(-50%);
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--theme-color1);
   color: var(--theme-color-white);
   font-family: var(--title-font);
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   letter-spacing: 0.04em;
   transition: background 0.3s ease;
   z-index: 2;
 }

 .process-card:hover .process-card__step {
   background: var(--theme-color2);
 }

 /* ── Icon circle ── */
 .process-card__icon-wrap {
   position: relative;
   width: 80px;
   height: 80px;
   margin: 0 auto 24px;
   border-radius: 50%;
   background: var(--theme-bg-color1);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.35s ease, transform 0.35s ease;
   z-index: 1;
 }

 .process-card__icon-wrap::after {
   content: '';
   position: absolute;
   inset: -6px;
   border-radius: 50%;
   border: 1.5px dashed rgba(11, 70, 84, 0.18);
   transition: border-color 0.35s ease;
 }

 .process-card:hover .process-card__icon-wrap {
   background: var(--theme-color2);
   transform: rotate(-8deg) scale(1.08);
 }

 .process-card:hover .process-card__icon-wrap::after {
   border-color: rgba(255, 109, 69, 0.4);
 }

 .process-card__icon {
   font-size: 28px;
   color: var(--theme-color1);
   transition: color 0.35s ease, transform 0.35s ease;
 }

 .process-card:hover .process-card__icon {
   color: var(--theme-color-white);
   transform: rotate(8deg);
 }

 /* ── Text ── */
 .process-card__title {
   font-family: var(--title-font);
   font-size: var(--h5-font-size);
   font-weight: 700;
   color: var(--heading-color);
   margin-bottom: 12px;
   line-height: 1.35;
   transition: color 0.3s ease;
 }

 .process-card:hover .process-card__title {
   color: var(--theme-color2);
 }

 .process-card__text {
   font-family: var(--text-font);
   font-size: 14px;
   color: var(--theme-color3);
   line-height: 1.75;
 }

 /* ── Tag badge ── */
 .process-card__tag {
   display: inline-block;
   margin-top: 20px;
   padding: 4px 14px;
   border-radius: 100px;
   background: var(--theme-bg-color1);
   color: var(--theme-color1);
   font-family: var(--title-font);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.04em;
   transition: background 0.3s ease, color 0.3s ease;
 }

 .process-card:hover .process-card__tag {
   background: rgba(255, 109, 69, 0.12);
   color: var(--theme-color2);
 }

 /* ── Responsive ── */
 @media (max-width: 767px) {
   .process-section {
     padding: 60px 16px;
   }

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

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

   .process-card {
     padding: 36px 18px 28px;
   }
 }

 @media (max-width: 480px) {
   .process-grid {
     grid-template-columns: 1fr;
   }

   .process-card {
     max-width: 340px;
     margin: 0 auto;
   }
 }

 .about-icon img {
   width: 50px;
 }

 /* process section end */
 .icon-card {
   height: 100%;
   margin-bottom: 1rem;
 }

 .single-about-box {
   height: 100%;
 }

 [class*="col-"]:has(> .icon-card) {
   margin-bottom: 1.5rem;
 }

 [class*="col-"]:has(> .xc-card) {
   margin-bottom: 1.5rem;
 }

 footer.main-footer-one {
   padding: 150px 0 0px;
 }

 .main-footer-one .main-footer-section::before {
   height: 660px;
 }

 @media only screen and (max-width: 430px) {
   .contact-section-home2-classic .contact-form-box {
     padding: 80px 20px 80px !important;
   }
 }

 .testimonial-section-classic .single-testi-box:hover .ratting ul li i {
   color: white;
 }

 .text-ani-2 {
   font-size: 45px !important;
   line-height: 50px !important;
 }

 .banner-section-home3-classic {
   position: relative;
 }

 .banner-section-home3-classic::before {
   content: "";
   position: absolute;
   border-radius: 20px;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1;
 }

 /* .blog-thumb {
  min-height: 320px;
  width: 100%;
}

.blog-thumb img {
  width: 100%;
} */

 .navigation li a.active {

   color: var(--theme-color2);
 }

 .navigation .dropdown ul a.active {
   background-color: var(--theme-color2);
   border-radius: 0px;
   margin: 0px 0px;
   color: white;
   padding-left: 30px;
 }

 .sticky-header .main-menu .navigation>li>a.active {

   color: var(--theme-color2);
 }

 @media (min-width: 360px) and (max-width: 769px) {
   .banner-section-home3-classic::before {
     border-radius: 0px !important;
   }
 }

 .sticky-header .logo img {
   max-height: unset !important;
   width: 160px;
 }

 .footer-widget-content .logo img {
   width: 180px;
 }

 /* Typography scale for blog details content */
 .blog-details-content h1,
 .blog-details-content h2 {
   font-size: 24px;
   line-height: 1.3;
   margin-top: 1.6em;
   margin-bottom: 0.6em;
   font-weight: 700;
 }

 .blog-details-content h3 {
   font-size: 20px;
   line-height: 1.4;
   margin-top: 1.5em;
   margin-bottom: 0.5em;
   font-weight: 600;
 }

 .blog-details-content h4 {
   font-size: 18px;
   line-height: 1.4;
   margin-top: 1.4em;
   margin-bottom: 0.5em;
   font-weight: 600;
 }

 .blog-details-content h5 {
   font-size: 16px;
   line-height: 1.5;
   margin-top: 1.3em;
   margin-bottom: 0.5em;
   font-weight: 700;
   /* Made bold since it matches typical body text size */
 }

 .blog-details-content h6 {
   font-size: 14px;
   line-height: 1.5;
   margin-top: 1.3em;
   margin-bottom: 0.5em;
   font-weight: 700;
   text-transform: uppercase;
   /* Looks cleaner for tiny headings */
   letter-spacing: 0.5px;
 }

 .reveal-full {
   width: 100%;
 }

 .reveal-full img {
   width: 100%;
   height: 285px;
 }

 .line-clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .line-clamp-2 {
   display: -webkit-box !important;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }


 /* color change css */
 .service-section-home2 .single-service-box .service-thumb::before {
   background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22362%22%20height%3D%22255%22%20viewBox%3D%220%200%20362%20255%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2020C0%208.95431%208.9543%200%2020%200H342C353.046%200%20362%208.9543%20362%2020V234.607C362%20246.544%20351.611%20255.823%20339.749%20254.48L17.7492%20218.01C7.63905%20216.865%200%20208.312%200%20198.137V20Z%22%20fill%3D%22%23FC4B0D%22%2F%3E%3C%2Fsvg%3E");
 }

 .service-section-classic .single-service-box .service-thumb .service-content::before {
   background: var(--heading-color);
 }

 .sticky-header .main-menu .navigation>li>a {
   color: var(--heading-color);
 }

 .testi-ratting .testi-number {
   color: white;
 }

 .team-details-social-icon {
   display: flex;
   gap: 1.5rem;
 }

 .team-details-social-icon a {
   background-color: var(--theme-color2);
   width: 50px;
   height: 50px;
   border-radius: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
 }

 .inner_page__header .header-lower .outer-box .theme-btn {
   background-color: var(--heading-color);
 }

 .testimonial-section-classic .single-testi-box .testi-ratting .ratting ul li i {
   color: gold;
 }

 .testimonial-section-classic .single-testi-box:hover .ratting ul li i {
   color: white;
 }

 .header-home2-renewable-classic .header-lower .outer-box .theme-btn::after {
   background: var(--heading-color);
 }

 .main-menu .navigation>li>a:hover {
   color: var(--theme-color2) !important;
 }

 .loginet-banner-arrow-box2 .slider-next {
   background: rgba(255, 255, 255, 0.1);
 }

 .loginet-banner-arrow-box2 .slider-next:hover {
   background: var(--theme-color2);


 }

 .bg-black {
   background: var(--bg-color) !important;
 }

 .service-section-home2 {
   background: var(--bg-color);
 }

 .service-section-home2 .single-service-box {
   background-color: var(--bg-light-blue);
 }

 .work-process-section-one {
   background: var(--bg-color);
 }

 .work-process-section-one .working-process-box .process-icon {
   background-color: var(--heading-color);
 }

 .testimonial-section-classic {
   background: var(--bg-color);
 }

 .testimonial-section-classic .single-testi-box {
   background: var(--bg-light-blue);
 }

 .testimonial-section-classic .single-testi-box .testi-ratting {
   background: var(--bg-color)
 }

 .main-footer-one {
   background: var(--bg-color);
 }

 .main-footer-one .main-footer-section::before {
   background: var(--bg-color2);
 }

 .preloader {
   background: #00063c !important;
 }

 .donations-section-home3::before {
   filter: brightness(0) saturate(100%) invert(17%) sepia(93%) saturate(2245%) hue-rotate(228deg) brightness(87%) contrast(104%);
 }

 .sticky-header .logo img {
   max-height: unset !important;
   width: 160px;
 }

 .footer-widget-content .logo img {
   width: 180px;
 }

 .service-section-home2 h1.sub-title img,
 .work-process-section-one h1.sub-title img,
 .testimonial-section-classic h1.sub-title img {
   filter: brightness(0) invert(1);
 }

 .service-section-home2 .sub-title,
 .work-process-section-one .sub-title,
 .testimonial-section-classic .sub-title {
   color: white !important;
   border-color: white !important;
 }