:root {
     --bg: #ffffff;
     --bg-soft: #f6f8fb;
     --bg-accent: #eef3f9;
     --text: #1f2937;
     --text-muted: #5b6b7b;
     --heading: #0f172a;
     --brand: #0ea5e9;
     --brand-600: #0284c7;
     --brand-700: #0369a1;
     --line: #e5eaf1;
     --card: #ffffff;
     --shadow: 0 8px 24px rgba(15, 23, 42, .06);
     --radius: 14px;
     --focus: 0 0 0 3px rgba(14, 165, 233, .35);

     --btn-text: #ffffff;
     --btn-muted: #64748b;

     --success: #16a34a;
     --warn: #f59e0b;
     --danger: #ef4444;
 }


 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     color: var(--text);
     background: var(--bg);
     font: 400 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block
 }

 a {
     color: var(--brand);
     text-decoration: none
 }

 a:hover {
     color: var(--brand-700)
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px
 }

 .section-title .title {
     font-weight: 600;
     color: var(--brand-700);
     text-transform: uppercase;
     letter-spacing: .06em;
     margin-bottom: 8px;
     font-size: 13px;
 }

 .section-title h3 {
     color: var(--heading);
     font-size: clamp(22px, 2.4vw, 34px);
     line-height: 1.25;
     margin: 0;
 }

 .centered {
     text-align: center
 }


 .main-header {
     position: relative;
     z-index: 50;
     background: #222;
     border-bottom: 1px solid var(--line)
 }

 .header-upper {
     padding: 14px 0
 }
.header-upper   .clearfix {
    margin: 0 !important;
}
 .logo img {
     height: 90px
 }
.header-mob {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
 .nav-outer {
     display: flex;
     align-items: center;
     justify-content: flex-end
 }

 .main-menu .navbar-header {
     display: none
 }

 .main-menu .navigation {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     gap: 18px;
     align-items: center
 }

 .main-menu .navigation>li>a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 10px;
     color: #fff;
     font-weight: 600
 }

 .main-menu .navigation>li>a:hover,
 .main-menu .navigation>li.current>a {
     background: var(--bg-accent);
     color: var(--brand-700)
 }

 .icon-bar {
     background: var(--heading);
     display: block;
     width: 20px;
     height: 2px;
     margin: 4px 0;
     border-radius: 2px
 }


 .sticky-header {
     position: sticky;
     top: -1px;
     z-index: 60;
     background: rgba(255, 255, 255, .86);
     backdrop-filter: saturate(140%) blur(8px);
     border-bottom: 1px solid var(--line);
     transition: box-shadow .25s ease;
 }

 .sticky-header.scrolled {
     box-shadow: var(--shadow)
 }

 .sticky-header .right-col .navigation>li>a {
     padding: 10px
 }


 .banner-section {
     position: relative;
     isolation: isolate
 }

 .banner-section .banner-content {
     position: relative;
     min-height: 56dvh
 }

 .banner-section .banner-media {
     position: absolute;
     inset: 0;
     z-index: -1
 }

 .banner-section::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .75) 55%, #fff 100%);
     z-index: -1
 }

 .banner-section .content {
     padding: clamp(48px, 10dvh, 120px) 0 42px
 }

 .banner-section .title {
     display: inline-block;
     background: var(--bg-accent);
     color: var(--brand-700);
     font-weight: 700;
     padding: 8px 12px;
     border-radius: 999px;
     margin-bottom: 14px;
     font-size: 14px
 }

 .banner-section h1 {
     color: var(--heading);
     font-size: clamp(28px, 4vw, 48px);
     line-height: 1.12;
     margin: 0 0 18px
 }

 .banner-section h1 span {
     color: var(--brand-700)
 }

 .theme-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px
 }

 .btn-style-one {
     background: var(--brand);
     color: var(--btn-text);
     border: none;
     border-radius: 12px;
     padding: 12px 18px;
     font-weight: 700;
     box-shadow: 0 6px 18px rgba(2, 132, 199, .25);
     transition: transform .15s ease, box-shadow .2s ease
 }

 .btn-style-one:hover {
     transform: translateY(-1px);
     box-shadow: 0 10px 22px rgba(2, 132, 199, .28)
 }

 .btn-style-three {
     color: var(--brand-700);
     background: transparent;
     border: 1px solid var(--brand-600);
     padding: 10px 14px;
     border-radius: 12px;
     font-weight: 700
 }

 .btn-style-three:hover {
     background: var(--bg-accent)
 }


 .services-section,
 .services-section-four {
     padding: 64px 0;
     background: var(--bg)
 }

 .services-block .inner-box,
 .services-block-two .inner-box {
     position: relative;
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 24px;
     box-shadow: var(--shadow);
     height: 100%;
     transition: transform .15s ease, box-shadow .2s ease
 }

 .services-block-two {
     margin: 10px auto;
 }

 .services-block .inner-box:hover,
 .services-block-two .inner-box:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 30px rgba(2, 6, 23, .08)
 }

 .services-block .icon-box .icon,
 .services-block-two .icon-box .icon {
     font-size: 34px;
     color: var(--brand-600)
 }

 .services-block h6 a,
 .services-block-two h3 {
     color: var(--heading)
 }

 .services-block .text,
 .services-block-two .text {
     color: var(--text-muted)
 }

 .iti {
    width: 100%;
 }
.ui-selectmenu-button {
    width: 100% !important;
}

 
 .about-section {
     position: relative;
     padding: 72px 0;
     background: var(--bg-soft);
     overflow: hidden
 }

 .about-section .image-layer {
     position: absolute;
     inset: 0;
     opacity: .07;
     background-size: cover;
     background-position: center
 }

 .about-section .content-column .list-style-one {
     padding-left: 18px;
     margin: 0
 }

 .about-section .content-column .list-style-one li {
     margin-bottom: 8px;
     color: var(--text)
 }

 .about-section .image-column .inner-column .image {
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow)
 }

 .about-section .overlay-box {
     position: absolute;
     inset: auto 12px 12px auto;
     background: rgba(255, 255, 255, .88);
     backdrop-filter: blur(6px);
     border: 1px solid var(--line);
     padding: 10px 14px;
     border-radius: 12px
 }

 .about-section .overlay-box h2 {
     margin: 0;
     color: var(--heading);
     font-size: 28px
 }

 .about-section .overlay-box span {
     display: block;
     font-size: 12px;
     color: var(--text-muted);
     font-weight: 600
 }


 .feature-section-two {
     padding: 64px 0;
     background: var(--bg)
 }

 .feature-block-two {
     position: relative;
     margin-bottom: 24px
 }

 .feature-block-two .inner-box {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 22px;
     box-shadow: var(--shadow);
     height: 100%
 }

 .feature-block-two .year {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: var(--bg-accent);
     color: var(--brand-700);
     display: inline-grid;
     place-items: center;
     font-weight: 800;
     margin-bottom: 10px
 }

 .feature-block-two .text {
     color: var(--text-muted)
 }


 .counter-section {
     background: var(--bg-soft);
     padding: 72px 0
 }

 .fact-counter .counter-column .inner {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 26px;
     box-shadow: var(--shadow);
     height: 100%
 }

 .count-outer {
     font-weight: 800;
     color: var(--heading);
     font-size: 28px
 }

 .count-text {
     font-variant-numeric: tabular-nums
 }

 .counter-title {
     color: var(--text-muted);
     margin-top: 8px
 }


 .faq-section {
     padding: 72px 0
 }

 .faq-accordion {
     border: 1px solid var(--line);
     border-radius: 16px;
     overflow: hidden;
     background: var(--card);
     box-shadow: var(--shadow)
 }

 .faq-item+.faq-item {
     border-top: 1px solid var(--line)
 }

 .faq-question {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 16px 18px;
     cursor: pointer;
     font-weight: 700;
     color: var(--heading)
 }

 .faq-icon {
     font-weight: 900;
     color: var(--brand-700)
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height .28s ease;
     padding: 0 18px;
     background: var(--bg);
     color: var(--text-muted)
 }

 .faq-item.active .faq-answer {
     padding: 12px 18px 18px
 }

 .faq-item.active .faq-question {
     background: var(--bg-accent)
 }


 .form-section {
     position: relative;
     padding: 72px 0;
     background-size: cover;
     background-position: center;
     color: #0b1220
 }

 .form-section .upper-content .section-title.light .title,
 .form-section .upper-content .section-title.light h3 {
     color: #0b1220
 }

 .default-form form {
     background: rgba(255, 255, 255, .9);
     backdrop-filter: blur(6px);
     border: 1px solid var(--line);
     border-radius: 16px;
     padding: 16px;
     box-shadow: var(--shadow)
 }

 .default-form .form-group {
     margin: 8px 0
 }

 .default-form input,
 .default-form select,
 .default-form textarea {
     width: 100%;
     border: 1px solid var(--line);
     border-radius: 12px;
     background: #fff;
     padding: 12px 14px;
     color: var(--text);
     outline: none;
     transition: border-color .15s ease, box-shadow .15s ease;
     font: inherit
 }

 .default-form textarea {
     min-height: 130px;
     resize: vertical
 }

 .default-form input:focus,
 .default-form select:focus,
 .default-form textarea:focus {
     border-color: var(--brand-600);
     box-shadow: var(--focus)
 }

 .default-form .consent-check {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     color: var(--text-muted);
     font-size: 14px
 }

 .default-form .consent-check a {
     font-weight: 700
 }


 .blog-page-section {
     padding: 64px 0;
     background: var(--bg)
 }
.news-block {
    margin: 10px auto;
}
 .news-block .inner-box {
     border: 1px solid var(--line);
     border-radius: 16px;
     overflow: hidden;
     background: var(--card);
     box-shadow: var(--shadow);
     transition: transform .15s ease, box-shadow .2s ease;
     height: 100%
 }

 .news-block .inner-box:hover {
     transform: translateY(-2px);
     box-shadow: 0 18px 32px rgba(2, 6, 23, .08)
 }

 .news-block .lower-content {
     padding: 18px
 }

 .post-meta {
     list-style: none;
     margin: 0 0 10px;
     padding: 0;
     display: flex;
     gap: 14px;
     color: var(--text-muted);
     font-size: 13px
 }

 .news-block h5 a {
     color: var(--heading)
 }


 .main-footer {
     background: #222;
     border-top: 1px solid var(--line)
 }

 .main-footer .widgets-section {
     padding: 48px 0
 }
.main-footer .logo-inner {
    margin-bottom: 10px;
    display: block;
}
 .footer-widget .text {
     color: white;
 }

 .list-style-three {
     list-style: none;
     padding: 0;
     margin: 12px 0 0
 }

 .list-style-three li {
     display: flex;
     gap: 10px;
     align-items: center;
     margin-bottom: 8px;
     color: white
 }

 .list-link {
     list-style: none;
     margin: 0;
     padding: 0;
     columns: 2
 }

 .list-link li a {
     display: inline-block;
     padding: 6px 0;
     color: white
 }

 .list-link li a:hover {
     color: var(--brand-700)
 }
.links-widget {
    color: white;
}
 .footer-bottom {
     border-top: 1px solid var(--line);
     padding: 14px 0;
     background: #fff
 }


 .cookie-modal {
     position: fixed;
     inset: auto 16px 16px 16px;
     display: none;
     z-index: 1000
 }

 .cookie-modal[aria-hidden="false"] {
     display: block
 }

 .cookie-modal-content {
     background: #ffffff;
     border: 1px solid var(--line);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 18px 16px;
     max-width: 820px;
     margin-left: auto
 }

 .cookie-title {
     margin: 0 0 6px;
     color: var(--heading)
 }

 .cookie-text {
     margin: 0 0 12px;
     color: var(--text-muted)
 }

 .cookie-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }

 .cookie-links {
     margin: 10px 0 0;
     font-size: 14px
 }

 .cookie-close {
     position: absolute;
     right: 10px;
     top: 8px;
     border: none;
     background: transparent;
     font-size: 26px;
     line-height: 1;
     color: var(--text-muted);
     cursor: pointer
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     padding: 10px 14px;
     font-weight: 700;
     cursor: pointer
 }

 .btn-success {
     background: var(--brand);
     color: #fff;
     border: none
 }

 .btn-success:hover {
     background: var(--brand-700)
 }

 .btn-outline-secondary {
     background: #fff;
     border: 1px solid var(--line);
     color: var(--btn-muted)
 }

 .btn-outline-secondary:hover {
     background: var(--bg-accent);
     color: var(--brand-700)
 }


 .scroll-to-top {
     position: fixed;
     right: 16px;
     bottom: 16px;
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: #fff;
     border: 1px solid var(--line);
     display: grid;
     place-items: center;
     box-shadow: var(--shadow);
     opacity: 0;
     visibility: hidden;
     transition: opacity .2s ease, transform .2s ease
 }

 .scroll-to-top.visible {
     opacity: 1;
     visibility: visible
 }

 .scroll-to-top:hover {
     transform: translateY(-2px)
 }


 .dn-mob {
     display: block
 }

 .list-style-one {
     list-style: disc
 }

 .border-one,
 .border-two {
     display: none
 }

 .icon-one,
 .icon-two {
     display: none
 }


 :where(a, button, [role="button"], input, select, textarea):focus-visible {
     outline: none;
     box-shadow: var(--focus)
 }

 .navbar-toggler {
     display: none
 }


 @media (max-width: 992px) {
     .main-menu .navbar-header {
         display: block
     }

     .navbar-toggler {
         display: flex;
         flex-direction: column;
         background: transparent;
         border: 1px solid var(--line);
         padding: 8px 10px;
         border-radius: 10px
     }

     .main-menu .navigation {
         display: block
     }

     .navbar-collapse.collapse {
         display: none
     }

     .navbar-collapse.collapse.show {
         display: block;
         background: #fff; 
         margin-top: 10px; 
     }

     .main-menu .navigation>li {
         border-bottom: 1px solid var(--line)
     }

     .main-menu .navigation>li:last-child {
         border-bottom: none
     }

     

     .dn-mob {
         display: none
     }

     .list-link {
         columns: 1
     }
 }

 @media (max-width: 600px) {
     .banner-section .content {
         padding: 64px 0 36px
     }

     .btn-style-one,
     .btn-style-three {
         width: 100%
     }

     .cookie-modal {
         inset: auto 12px 12px 12px
     }
 }


 @media (prefers-reduced-motion: reduce) {
     * {
         scroll-behavior: auto
     }

     .faq-answer {
         transition: none
     }

     .btn-style-one,
     .news-block .inner-box,
     .services-block .inner-box,
     .services-block-two .inner-box {
         transition: none
     }
 }

 .page-title {
     position: relative;
     isolation: isolate;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

     --overlay: linear-gradient(180deg,
             rgba(255, 255, 255, .85) 0%,
             rgba(255, 255, 255, .80) 35%,
             rgba(255, 255, 255, .88) 100%);
 }

 .page-title::before {
     content: "";
     position: absolute;
     inset: 0;
     background: var(--overlay);
     z-index: 0;
 }

 .page-title .container {
     position: relative;
     z-index: 1
 }

 .page-title .content {
     min-height: clamp(160px, 28dvh, 280px);
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 12px;
     padding: clamp(28px, 6dvh, 56px) 0;
 }

 .page-title h1 {
     margin: 0;
     color: var(--heading);
     font-size: clamp(26px, 3.6vw, 44px);
     line-height: 1.15;
     letter-spacing: -.01em;
 }


 .page-breadcrumb {
     --crumb-gap: 10px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     list-style: none;
     margin: 2px 0 0;
     padding: 0;
     color: var(--text-muted);
     font-size: 14px;
 }

 .page-breadcrumb li {
     display: flex;
     align-items: center;
     gap: var(--crumb-gap)
 }

 .page-breadcrumb li+li::before {
     content: "/";
     color: #94a3b8;
     margin: 0 var(--crumb-gap);
 }

 .page-breadcrumb a {
     color: var(--brand-700);
     font-weight: 600;
     text-underline-offset: 3px;
 }

 .page-breadcrumb a:hover {
     color: var(--brand-600);
     text-decoration: underline
 }

 .page-breadcrumb [aria-current="page"],
 .page-breadcrumb li[aria-current="page"] {
     color: var(--text);
     font-weight: 700;
 }


 .page-title {
     border-bottom: 1px solid var(--line)
 }

 .page-title.elevated {
     box-shadow: 0 8px 24px rgba(2, 6, 23, .06)
 }


 @media (max-width: 768px) {
     .page-title .content {
         gap: 8px
     }

     .page-breadcrumb {
         font-size: 13px
     }
 }


 @media (prefers-reduced-motion: reduce) {
     .page-title .content {
         scroll-margin-top: 0
     }
 }

 .clearfix {
     margin: 20px auto;
 }

 .page-breadcrumb a:focus-visible {
     outline: none;
     box-shadow: var(--focus);
     border-radius: 8px;
     padding: 2px 4px;
 }

 .team-section {
     padding: 64px 0;
     background: var(--bg)
 }

 .team-section .section-title.light .title {
     color: var(--brand-700)
 }

 .team-section .section-title.light h3 {
     color: var(--heading)
 }

 .team-section .section-title .text {
     color: var(--text-muted)
 }


 .team-block {
     padding: 12px
 }

 .team-block .inner-box {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     height: 100%;
     overflow: hidden;
     transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
 }

 .team-block .inner-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 36px rgba(2, 6, 23, .10);
     border-color: rgba(2, 132, 199, .25);
 }


 .team-block .image {
     position: relative;
     overflow: hidden;
     aspect-ratio: 4/5;
     background: var(--bg-soft);
 }

 .team-block .image span {
     display: block;
     height: 100%
 }

 .team-block .image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     filter: grayscale(16%);
     transform: scale(1.02);
     transition: transform .28s ease, filter .28s ease;
 }

 .team-block .inner-box:hover .image img {
     transform: scale(1.06);
     filter: none;
 }


 .team-block .lower-content {
     padding: 16px 16px 18px;
     text-align: center;
 }

 .team-block h3 {
     margin: 0 0 6px;
     font-size: 18px;
     line-height: 1.2;
     color: var(--heading);
 }

 .team-block h3 span {
     background: linear-gradient(0deg, transparent 60%, rgba(14, 165, 233, .18) 60%)
 }

 .team-block .designation {
     color: var(--text-muted);
     font-size: 14px;
     font-weight: 600;
 }


 .team-block .inner-box:hover .designation {
     color: var(--brand-700)
 }


 .team-section .clearfix::after {
     content: "";
     display: block;
     clear: both
 }

 @media (max-width: 991.98px) {
     .team-block {
         padding: 10px
     }
 }

 @media (max-width: 575.98px) {
     .team-block {
         padding: 8px
     }
 }


 .team-block .inner-box:focus-within {
     outline: none;
     box-shadow: var(--focus)
 }

 .team-block a:focus-visible {
     outline: none;
     box-shadow: var(--focus);
     border-radius: 8px
 }

 .contact-page-section {
     padding: 64px 0;
     background: var(--bg)
 }

 .contact-page-section h2 {
     color: var(--heading);
     font-size: clamp(22px, 2.6vw, 34px);
     line-height: 1.25;
     margin: 0 0 18px;
 }

 .contact-page-section h2 span {
     color: var(--brand-700)
 }


 .map-section {
     margin: -16px 0 28px
 }

 .map-outer {
     border: 1px solid var(--line);
     border-radius: 16px;
     background: var(--bg-soft);
     box-shadow: var(--shadow);
     overflow: hidden;
 }

 .map-canvas {
     width: 100%;
     min-height: 360px;
     background:
         linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .65)),
         url("images/map-placeholder.webp") center/cover no-repeat;
 }


 .contact-page-section .inner-container {
     margin-top: 18px
 }

 .info-column .inner-column,
 .form-column .inner-column {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: 16px;
     box-shadow: var(--shadow);
     height: 100%;
     padding: 22px;
 }

 .info-column .text {
     color: var(--text-muted);
     margin-bottom: 14px
 }


 .list-style-six {
     list-style: none;
     margin: 0;
     padding: 0;
     display: grid;
     gap: 12px
 }

 .list-style-six li {
     display: grid;
     grid-template-columns: 24px 1fr;
     align-items: start;
     column-gap: 10px;
     color: var(--text);
     padding: 10px 12px;
     border: 1px solid var(--line);
     border-radius: 12px;
     background: #fff;
 }

 .list-style-six .icon {
     width: 24px;
     height: 24px;
     display: inline-grid;
     place-items: center;
     color: var(--brand-600);
 }

 .list-style-six a {
     color: var(--brand-700);
     font-weight: 600
 }

 .list-style-six a:hover {
     text-decoration: underline;
     color: var(--brand-600)
 }


 .contact-form form {
     display: grid;
     gap: 12px;
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 14px;
     padding: 16px;
 }

 .contact-form .form-group {
     margin: 0
 }

 .contact-form input,
 .contact-form select,
 .contact-form textarea {
     width: 100%;
     border: 1px solid var(--line);
     border-radius: 12px;
     background: #fff;
     padding: 12px 14px;
     color: var(--text);
     font: inherit;
     transition: border-color .15s ease, box-shadow .15s ease;
 }

 .contact-form textarea {
     min-height: 130px;
     resize: vertical
 }

 .contact-form input:focus,
 .contact-form select:focus,
 .contact-form textarea:focus {
     border-color: var(--brand-600);
     box-shadow: var(--focus)
 }

 .contact-form .custom-select-box {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
     background-size: 18px
 }

 .contact-form .consent-check {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     color: var(--text-muted);
     font-size: 14px
 }

 .contact-form .consent-check a {
     font-weight: 700
 }


 .contact-form .theme-btn.btn-style-one {
     width: 100%
 }


 .contact-form :where(input, select, textarea):invalid {
     border-color: #f3c1c1
 }

 .contact-form :where(input, select, textarea):valid {
     border-color: var(--line)
 }


 @media (max-width: 991.98px) {
     .map-canvas {
         min-height: 300px
     }
 }

 @media (max-width: 575.98px) {
     .map-section {
         margin: 0 0 20px
     }

     .info-column .inner-column,
     .form-column .inner-column {
         padding: 16px
     }
 }


 .info-column .inner-column:hover,
 .form-column .inner-column:hover {
     box-shadow: 0 18px 36px rgba(2, 6, 23, .08)
 }

 .process-steps {
     padding: 64px 0;
     background: var(--bg)
 }

 .process-steps .section-title .title {
     color: var(--brand-700)
 }

 .process-steps .section-title h3 {
     color: var(--heading)
 }

 .step-item {
     position: relative;
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 22px 18px 18px;
     height: 100%;
     transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
 }

 .step-item:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 36px rgba(2, 6, 23, .10);
     border-color: rgba(2, 132, 199, .25);
 }


 .step-number {
     --size: 40px;
     width: var(--size);
     height: var(--size);
     border-radius: 12px;
     background: var(--bg-accent);
     color: var(--brand-700);
     display: grid;
     place-items: center;
     font-weight: 800;
     margin-bottom: 10px;
 }


 @media (min-width: 992px) {
     .process-steps .row {
         position: relative
     }

     .process-steps .row::before {
         content: "";
         position: absolute;
         left: calc(12.5%);
         right: calc(12.5%);
         top: 36px;
         height: 2px;
         background: linear-gradient(90deg, transparent 0%, #dfe6f0 10%, #dfe6f0 90%, transparent 100%);
         pointer-events: none;
     }
 }

 .step-title {
     margin: 0 0 6px;
     font-size: 18px;
     color: var(--heading)
 }

 .step-text {
     margin: 0;
     color: var(--text-muted);
 }


 @media (max-width: 991.98px) {
     .step-item {
         margin-bottom: 16px
     }
 }

 /* ===========================
   Service Features (Light)
   =========================== */

 .service-features {
     padding: 64px 0;
     background: var(--bg-soft)
 }

 .service-features .section-title .title {
     color: var(--brand-700)
 }

 .service-features .section-title h3 {
     color: var(--heading)
 }

 .feature-item {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 22px 18px;
     height: 100%;
     transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
 }

 .feature-item:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 36px rgba(2, 6, 23, .10);
     border-color: rgba(2, 132, 199, .25);
 }

 .feature-icon {
     display: flex !important;
     justify-content: center;
     place-items: center;
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: var(--bg-accent);
     color: var(--brand-600);
     font-size: 25px !important;
     margin-bottom: 12px;
 }

 .feature-title {
     margin: 0 0 6px;
     font-size: 18px;
     color: var(--heading)
 }

 .feature-text {
     margin: 0;
     color: var(--text-muted)
 }


 .service-features .col-lg-4 {
     margin-bottom: 18px
 }

 @media (max-width: 575.98px) {
     .feature-item {
         padding: 18px 14px
     }
 }


 :where(.feature-item, .step-item):focus-within {
     outline: none;
     box-shadow: var(--focus)
 }

 .testimonial-page-section {
     padding: 64px 0;
     background: var(--bg)
 }

 .testimonial-page-section .section-title .title {
     color: var(--brand-700)
 }

 .testimonial-page-section .section-title h3 {
     color: var(--heading)
 }

 .testimonial-page-section .section-title p {
     color: var(--text-muted);
     max-width: 860px;
     margin: 8px auto 0
 }

 .testimonial-block-three {
     padding: 12px
 }

 .testimonial-block-three .inner-box {
     position: relative;
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     height: 100%;
     padding: 20px 18px 18px;
     transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
 }

 .testimonial-block-three .inner-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 36px rgba(2, 6, 23, .10);
     border-color: rgba(2, 132, 199, .25);
 }


 .testimonial-block-three .quote-icon {
     position: absolute;
     inset: 14px 14px auto auto;
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: var(--bg-accent);
     color: var(--brand-600);
     display: grid;
     place-items: center;
     font-size: 16px;
 }


 .testimonial-block-three .image-outer {
     display: flex;
     justify-content: center;
     margin-bottom: 12px;
 }

 .testimonial-block-three .image {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     overflow: hidden;
     border: 1px solid var(--line);
     background: var(--bg-soft);
     box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
 }

 .testimonial-block-three .image img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }


 .testimonial-block-three .text {
     color: var(--text);
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 12px;
     padding: 12px 14px;
     margin: 0 0 12px;
     line-height: 1.55;
 }

 .testimonial-block-three h5 {
     margin: 0;
     text-align: center;
     color: var(--heading);
     font-size: 16px;
     font-weight: 800;
 }

 .testimonial-block-three .designation {
     text-align: center;
     color: var(--text-muted);
     font-size: 13px;
     font-weight: 600;
 }


 @media (max-width: 575.98px) {
     .testimonial-block-three {
         padding: 8px
     }

     .testimonial-block-three .inner-box {
         padding: 16px 14px
     }

     .testimonial-block-three .text {
         font-size: 15px
     }
 }


 .testimonial-page-section .text-muted {
     color: var(--text-muted) !important
 }


 .testimonial-stats {
     padding: 44px 0;
     background: var(--bg-soft);
     border-top: 1px solid var(--line)
 }

 .stat-item {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 18px 16px;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
 }

 .stat-item:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 36px rgba(2, 6, 23, .10);
     border-color: rgba(2, 132, 199, .25);
 }

 .stat-number {
     font-weight: 900;
     font-size: clamp(22px, 3.4vw, 32px);
     color: var(--heading);
     line-height: 1;
     letter-spacing: .2px;
 }

 .stat-label {
     margin-top: 8px;
     color: var(--text-muted);
     font-weight: 600;
     font-size: 14px;
 }

 .testimonial-stats .text-muted {
     color: var(--text-muted) !important
 }


 :where(.stat-item, .testimonial-block-three .inner-box):focus-within {
     outline: none;
     box-shadow: var(--focus)
 }

 .blog-single-section {
     padding: 64px 0;
     background: var(--bg)
 }

 .blog-single-section .content-column .inner-column {
     padding-right: 6px
 }

 .blog-single-section .sidebar-column .inner-column {
     padding-left: 6px
 }


 .blog-single-section .news-block .inner-box {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
 }

 .blog-single-section .news-block .image {
     overflow: hidden;
     aspect-ratio: 16/9;
     background: var(--bg-soft)
 }

 .blog-single-section .news-block .image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transform: scale(1.01);
     transition: transform .28s ease;
 }

 .blog-single-section .news-block .inner-box:hover .image img {
     transform: scale(1.04)
 }

 .blog-single-section .lower-content {
     padding: 20px 18px 22px
 }


 .blog-single-section .post-meta {
     list-style: none;
     margin: 0 0 10px;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     color: var(--text-muted);
     font-size: 13px
 }

 .blog-single-section .post-meta .fa {
     margin-right: 6px;
     color: var(--brand-600)
 }

 .blog-single-section h2 {
     margin: 0 0 10px;
     color: var(--heading);
     font-size: clamp(22px, 2.6vw, 32px);
     line-height: 1.25;
 }


 .blog-single-section .text {
     color: var(--text)
 }

 .blog-single-section .text p {
     margin: 0 0 14px
 }

 .blog-single-section .text h3 {
     margin: 18px 0 8px;
     font-size: clamp(18px, 2vw, 22px);
     color: var(--heading)
 }

 .blog-single-section .text h4 {
     margin: 14px 0 6px;
     font-size: 16px;
     color: var(--heading)
 }

 .blog-single-section .text ul,
 .blog-single-section .text ol {
     margin: 0 0 16px 18px;
     color: var(--text)
 }

 .blog-single-section .text li {
     margin: 6px 0
 }

 .blog-single-section .text strong {
     color: #0b1220
 }

 .blog-single-section .text blockquote {
     margin: 16px 0;
     padding: 14px 16px;
     background: #fff;
     border-left: 4px solid var(--brand-600);
     border: 1px solid var(--line);
     border-left-color: var(--brand-600);
     border-radius: 12px
 }


 .alert {
     border: 1px solid var(--line);
     border-radius: 14px;
     box-shadow: var(--shadow);
 }

 .alert-info {
     background: #f8fbff;
     border-left: 4px solid var(--brand-600);
 }

 .alert h4 {
     margin: 0 0 6px;
     color: var(--heading)
 }

 .alert p {
     margin: 0 0 10px;
     color: var(--text-muted)
 }

 .alert .theme-btn {
     margin-top: 6px
 }


 .sidebar-widget {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 16px;
 }

 .sidebar-widget .widget-title {
     margin: 0 0 10px;
     font-size: 18px;
     color: var(--heading)
 }

 .recent-posts-widget .post {
     display: flex;
     gap: 12px;
     align-items: center;
     padding: 10px 0;
     border-bottom: 1px solid var(--line)
 }

 .recent-posts-widget .post:last-child {
     border-bottom: none
 }

 .recent-posts-widget .post-thumb {
     width: 88px;
     height: 64px;
     border-radius: 10px;
     overflow: hidden;
     flex: 0 0 88px;
     background: var(--bg-soft);
     border: 1px solid var(--line)
 }

 .recent-posts-widget .post-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block
 }

 .recent-posts-widget .post-info h4 {
     margin: 0 0 4px;
     font-size: 15px;
     line-height: 1.3
 }

 .recent-posts-widget .post-info a {
     color: var(--heading)
 }

 .recent-posts-widget .post-info a:hover {
     color: var(--brand-700);
     text-decoration: underline
 }

 .recent-posts-widget .post-meta {
     color: var(--text-muted);
     font-size: 12px
 }


 .mt-2 {
     margin-top: .5rem
 }

 .mt-3 {
     margin-top: 1rem
 }


 .blog-single-section :where(a, button):focus-visible {
     outline: none;
     box-shadow: var(--focus);
     border-radius: 8px
 }


 @media (max-width: 991.98px) {
     .blog-single-section .content-column .inner-column {
         padding-right: 0
     }

     .blog-single-section .sidebar-column .inner-column {
         padding-left: 0;
         margin-top: 18px
     }
 }

 @media (max-width: 575.98px) {
     .blog-single-section .lower-content {
         padding: 16px 14px
     }

     .recent-posts-widget .post {
         gap: 10px
     }
 }