:root {
       --blue: #0b3b73;
       --blue-2: #0d5ca8;
       --blue-3: #eaf4ff;
       --gold: #c8922e;
       --ink: #10233d;
       --muted: #6d7c8f;
       --white: #ffffff;
       --line: #e6edf5;
       --shadow: 0 20px 60px rgba(10, 47, 87, .10);
   }

   * {
       box-sizing: border-box
   }

   html {
       scroll-behavior: smooth
   }

   body {
       margin: 0;
       font-family: 'Poppins', sans-serif;
       color: var(--ink);
       background: #fff;
       overflow-x: hidden;
   }

   a {
       text-decoration: none
   }

   .container {
       max-width: 1180px
   }

   /* Loader */
   #loader {
       position: fixed;
       inset: 0;
       z-index: 9999;
       display: grid;
       place-items: center;
       background: #fff;
       transition: .6s ease;
   }

   .loader-mark {
       width: 82px;
       height: 82px;
       border-radius: 50%;
       border: 3px solid #dcecff;
       border-top-color: var(--blue-2);
       animation: spin 1s linear infinite;
   }

   @keyframes spin {
       to {
           transform: rotate(360deg)
       }
   }

   /* Premium Header */
   .topbar {
       background: #092746;
       color: #fff;
       font-size: 12px;
       padding: 8px 0;
       border-bottom: 1px solid rgba(255, 255, 255, .08);
   }

   .topbar a {
       color: #fff;
       text-decoration: none;
       font-weight: 500
   }

   .topbar i {
       color: #8fc9f7;
       margin-right: 6px
   }

   .topbar .top-right {
       display: flex;
       align-items: center;
       gap: 24px
   }

   .navbar {
       background: #fff;
       box-shadow: 0 8px 30px rgba(10, 45, 80, .07);
       padding: 13px 0;
       transition: .3s ease;
   }

   .navbar.scrolled {
       padding: 7px 0;
       box-shadow: 0 10px 35px rgba(10, 45, 80, .12)
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
       color: var(--blue) !important;
       text-decoration: none
   }

   .brand img {
       width: 25%;
       object-fit: contain;
       display: block
   }

   .brand-text strong {
       display: block;
       font-size: 19px;
       line-height: 1.1;
       font-weight: 800;
       letter-spacing: -.5px;
       color: var(--blue)
   }

   .brand-text span {
       display: block;
       color: var(--gold);
       font-size: 9px;
       letter-spacing: 2px;
       font-weight: 700;
       margin-top: 4px
   }

   .nav-link {
       color: #18334f !important;
       font-size: 13px;
       font-weight: 600;
       margin: 0 5px;
       padding: 10px 11px !important;
       transition: .25s ease
   }

   .nav-link:hover {
       color: var(--blue-2) !important
   }

   .btn-nav {
       background: #174b83;
       color: #fff !important;
       padding: 12px 20px !important;
       border-radius: 4px !important;
       box-shadow: 0 8px 18px rgba(23, 75, 131, .16)
   }

   .btn-nav:hover {
       background: #0d5ca8;
       color: #fff !important;
       transform: translateY(-1px)
   }

   /* Hero */
   .hero {
       position: relative;
       min-height: 760px;
       display: flex;
       align-items: center;
       overflow: hidden;
       background:
           radial-gradient(circle at 82% 28%, rgba(87, 170, 240, .18), transparent 25%),
           linear-gradient(135deg, #f7fbff 0%, #fff 55%, #eef7ff 100%);
   }

   .hero:before {
       content: "";
       position: absolute;
       width: 520px;
       height: 520px;
       border-radius: 50%;
       right: -190px;
       top: -120px;
       background: rgba(13, 92, 168, .07);
   }

   .hero:after {
       content: "";
       position: absolute;
       width: 330px;
       height: 330px;
       border-radius: 50%;
       left: -150px;
       bottom: -140px;
       border: 70px solid rgba(13, 92, 168, .045);
   }

   .eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 9px;
       color: var(--blue-2);
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 1.8px;
       text-transform: uppercase;
       margin-bottom: 17px;
   }

   .eyebrow:before {
       content: "";
       width: 32px;
       height: 2px;
       background: var(--gold);
   }

   .hero h1 {
       font-size: clamp(44px, 6vw, 76px);
       line-height: 1.05;
       letter-spacing: -2.8px;
       font-weight: 800;
       color: var(--blue);
       margin: 0 0 22px;
   }

   .hero h1 span {
       color: var(--gold)
   }

   .hero p {
       max-width: 650px;
       color: var(--muted);
       font-size: 17px;
       line-height: 1.9;
       margin-bottom: 30px;
   }

   .btn-primary-custom,
   .btn-outline-custom {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 14px 23px;
       border-radius: 50px;
       font-size: 14px;
       font-weight: 600;
       transition: .3s ease;
   }

   .btn-primary-custom {
       background: var(--blue);
       color: #fff;
       box-shadow: 0 14px 30px rgba(11, 59, 115, .22);
   }

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

   .btn-outline-custom {
       border: 1px solid #cddded;
       color: var(--blue);
       background: #fff;
       margin-left: 8px;
   }

   .btn-outline-custom:hover {
       transform: translateY(-3px);
       border-color: var(--blue-2);
       color: var(--blue-2)
   }

   .hero-card {
       position: relative;
       background: #fff;
       border: 1px solid #e6eef7;
       border-radius: 30px;
       padding: 14px;
       box-shadow: var(--shadow);
       overflow: visible;
   }

   .hero-slider {
       position: relative;
       height: 500px;
       border-radius: 22px;
       overflow: hidden;
       background: #edf5fc;
   }

   .hero-slide {
       position: absolute;
       inset: 0;
       opacity: 0;
       visibility: hidden;
       transform: scale(1.04);
       transition: opacity .7s ease, transform 1.2s ease, visibility .7s ease;
   }

   .hero-slide.active {
       opacity: 1;
       visibility: visible;
       transform: scale(1);
   }

   .hero-slide img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .hero-slide:after {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(180deg, transparent 52%, rgba(5, 30, 57, .72) 100%);
   }

   .slide-caption {
       position: absolute;
       left: 24px;
       right: 24px;
       bottom: 25px;
       z-index: 2;
       color: #fff;
   }

   .slide-caption small {
       display: inline-block;
       padding: 6px 11px;
       border-radius: 30px;
       background: rgba(255, 255, 255, .16);
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, .28);
       font-size: 10px;
       letter-spacing: 1.4px;
       text-transform: uppercase;
       margin-bottom: 8px;
   }

   .slide-caption strong {
       display: block;
       font-size: 18px;
       font-weight: 700
   }

   .slider-control {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 5;
       width: 42px;
       height: 42px;
       border: 1px solid rgba(255, 255, 255, .5);
       border-radius: 50%;
       background: rgba(7, 42, 77, .62);
       color: #fff;
       display: grid;
       place-items: center;
       cursor: pointer;
       transition: .25s ease;
   }

   .slider-control:hover {
       background: var(--blue-2);
       transform: translateY(-50%) scale(1.05)
   }

   .slider-prev {
       left: 15px
   }

   .slider-next {
       right: 15px
   }

   .slider-dots {
       position: absolute;
       z-index: 6;
       left: 50%;
       bottom: 16px;
       transform: translateX(-50%);
       display: flex;
       gap: 7px;
   }

   .slider-dot {
       width: 7px;
       height: 7px;
       border: 0;
       padding: 0;
       border-radius: 20px;
       background: rgba(255, 255, 255, .55);
       transition: .3s ease;
       cursor: pointer;
   }

   .slider-dot.active {
       width: 24px;
       background: #fff
   }

   .hero-badge {
       position: absolute;
       left: -24px;
       bottom: 28px;
       background: #fff;
       border: 1px solid #e5edf6;
       box-shadow: 0 18px 45px rgba(10, 47, 87, .13);
       border-radius: 18px;
       padding: 15px 18px;
       display: flex;
       align-items: center;
       gap: 12px;
       z-index: 8;
   }

   .hero-badge .icon {
       width: 43px;
       height: 43px;
       border-radius: 13px;
       display: grid;
       place-items: center;
       background: var(--blue-3);
       color: var(--blue-2);
   }

   .hero-badge strong {
       display: block;
       font-size: 14px
   }

   .hero-badge small {
       color: var(--muted);
       font-size: 11px
   }


   /* Full-width Premium Hero Slider */
   .hero {
       min-height: 760px;
       padding: 0;
       display: block;
       position: relative;
       background: #061f3d;
       overflow: hidden;
   }

   .hero .hero-slider {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       border-radius: 0;
       background: #061f3d;
   }

   .hero .hero-slide:after {
       background: linear-gradient(90deg, rgba(3, 24, 48, .92) 0%, rgba(4, 32, 62, .72) 43%, rgba(4, 32, 62, .20) 72%, rgba(4, 32, 62, .35) 100%);
   }

   .hero .hero-slide img {
       object-fit: cover;
       object-position: center;
       filter: saturate(.9);
   }

   .hero-content-wrap {
       position: relative;
       z-index: 10;
       min-height: 760px;
       display: flex;
       align-items: center;
   }

   .hero-copy {
       max-width: 720px;
       color: #fff;
       padding: 80px 0 90px;
   }

   .hero-copy .eyebrow {
       color: #a9d8ff;
       margin-bottom: 18px;
   }

   .hero-copy .eyebrow:before {
       background: #d6a34a;
   }

   .hero-copy h1 {
       color: #fff;
       font-size: clamp(45px, 6vw, 78px);
       max-width: 720px;
       margin-bottom: 22px;
   }

   .hero-copy h1 span {
       color: #d8a650;
   }

   .hero-copy p {
       color: rgba(255, 255, 255, .78);
       max-width: 640px;
   }

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

   .hero .btn-outline-custom {
       background: rgba(255, 255, 255, .08);
       border-color: rgba(255, 255, 255, .38);
       color: #fff;
       margin-left: 0;
       backdrop-filter: blur(8px);
   }

   .hero .btn-outline-custom:hover {
       background: #fff;
       color: var(--blue);
   }

   .hero-trust {
       display: flex;
       flex-wrap: wrap;
       gap: 24px;
       margin-top: 30px;
       color: rgba(255, 255, 255, .75);
       font-size: 12px;
   }

   .hero-trust span {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .hero-trust i {
       color: #8fc9f7;
       font-size: 16px;
   }

   .hero .slider-control {
       width: 48px;
       height: 48px;
       right: auto;
       top: auto;
       bottom: 32px;
       transform: none;
       background: rgba(3, 31, 59, .62);
       border-color: rgba(255, 255, 255, .28);
   }

   .hero .slider-control:hover {
       transform: translateY(-2px);
       background: #0d67b8;
   }

   .hero .slider-prev {
       left: auto;
       right: 82px;
   }

   .hero .slider-next {
       right: 24px;
   }

   .hero .slider-dots {
       left: 24px;
       bottom: 49px;
       transform: none;
       gap: 8px;
   }

   .hero .slider-dot {
       width: 28px;
       height: 3px;
       border-radius: 10px;
       background: rgba(255, 255, 255, .35);
   }

   .hero .slider-dot.active {
       width: 52px;
       background: #fff;
   }

   .hero .hero-badge {
       left: auto;
       right: 35px;
       bottom: 100px;
       background: rgba(255, 255, 255, .94);
       backdrop-filter: blur(12px);
   }

   .hero-progress {
       position: absolute;
       left: 0;
       bottom: 0;
       height: 3px;
       background: #d6a34a;
       z-index: 12;
       width: 0;
       animation: heroProgress 5s linear infinite;
   }

   @keyframes heroProgress {
       from {
           width: 0
       }

       to {
           width: 100%
       }
   }

   /* Main services */
   .main-service-card {
       height: 100%;
       padding: 32px;
       border-radius: 26px;
       background: #fff;
       border: 1px solid #e2ebf5;
       box-shadow: 0 12px 38px rgba(11, 59, 115, .06);
       position: relative;
       overflow: hidden;
       transition: .35s ease;
   }

   .main-service-card:after {
       content: "";
       position: absolute;
       width: 130px;
       height: 130px;
       border-radius: 50%;
       right: -55px;
       top: -55px;
       background: #eef7ff;
       transition: .35s ease;
   }

   .main-service-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 25px 55px rgba(11, 59, 115, .12);
       border-color: #cfe2f5;
   }

   .main-service-card:hover:after {
       transform: scale(1.25);
   }

   .main-service-icon {
       width: 62px;
       height: 62px;
       border-radius: 18px;
       display: grid;
       place-items: center;
       background: #edf6ff;
       color: #0d5ca8;
       font-size: 27px;
       margin-bottom: 22px;
       position: relative;
       z-index: 2;
   }

   .main-service-card h3 {
       font-size: 20px;
       color: #0b3b73;
       font-weight: 700;
       margin-bottom: 10px;
       position: relative;
       z-index: 2;
   }

   .main-service-card p {
       font-size: 13px;
       line-height: 1.8;
       color: #6d7c8f;
       margin: 0;
       position: relative;
       z-index: 2;
   }

   .service-link {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       color: #0d5ca8;
       font-size: 12px;
       font-weight: 700;
       margin-top: 20px;
       position: relative;
       z-index: 2;
   }

   /* Testimonials */
   .testimonial-section {
       background: linear-gradient(135deg, #f4f9ff 0%, #fff 55%, #eef7ff 100%);
       overflow: hidden;
   }

   .testimonial-card {
       height: 100%;
       background: #fff;
       border: 1px solid #e0eaf4;
       border-radius: 26px;
       padding: 32px;
       box-shadow: 0 15px 45px rgba(11, 59, 115, .07);
       position: relative;
   }

   .testimonial-card .quote {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       display: grid;
       place-items: center;
       background: #edf6ff;
       color: #0d5ca8;
       font-size: 22px;
       margin-bottom: 20px;
   }

   .testimonial-card p {
       font-size: 14px;
       line-height: 1.9;
       color: #53677e;
       margin-bottom: 24px;
   }

   .testimonial-stars {
       color: #d39b3c;
       letter-spacing: 2px;
       font-size: 13px;
       margin-bottom: 9px;
   }

   .testimonial-author {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .author-avatar {
       width: 43px;
       height: 43px;
       border-radius: 50%;
       background: #0b3b73;
       color: #fff;
       display: grid;
       place-items: center;
       font-weight: 700;
       font-size: 14px;
   }

   .testimonial-author strong {
       display: block;
       color: #0b3b73;
       font-size: 13px;
   }

   .testimonial-author span {
       display: block;
       color: #8a9bad;
       font-size: 11px;
       margin-top: 2px;
   }

   .testimonial-note {
       font-size: 11px;
       color: #8a9bad;
       text-align: center;
       margin-top: 24px;
   }

   @media(max-width:991px) {

       .hero,
       .hero-content-wrap {
           min-height: 700px;
       }

       .hero-copy {
           padding: 90px 0 120px;
       }

       .hero .hero-badge {
           right: 20px;
           bottom: 88px;
       }
   }

   @media(max-width:575px) {

       .hero,
       .hero-content-wrap {
           min-height: 700px;
       }

       .hero-copy {
           padding: 80px 0 130px;
       }

       .hero-copy h1 {
           font-size: 43px;
           letter-spacing: -1.8px;
       }

       .hero-copy p {
           font-size: 14px;
           line-height: 1.75;
       }

       .hero .hero-badge {
           display: none;
       }

       .hero .slider-dots {
           left: 18px;
           bottom: 27px;
       }

       .hero .slider-control {
           bottom: 18px;
           width: 40px;
           height: 40px;
       }

       .hero .slider-prev {
           right: 67px;
       }

       .hero .slider-next {
           right: 18px;
       }

       .hero-trust {
           gap: 12px;
           margin-top: 22px;
       }
   }

   /* Stats */
   .stats {
       margin-top: -50px;
       position: relative;
       z-index: 99;
   }

   .stats-box {
       background: #fff;
       border: 1px solid #e7eef6;
       box-shadow: var(--shadow);
       border-radius: 24px;
       padding: 25px 10px;
   }

   .stat {
       padding: 8px 20px;
       border-right: 1px solid var(--line)
   }

   .stat:last-child {
       border: 0
   }

   .stat strong {
       display: block;
       color: var(--blue);
       font-size: 28px;
       font-weight: 800;
   }

   .stat span {
       color: var(--muted);
       font-size: 12px
   }

   /* Sections */
   .section {
       padding: 105px 0
   }

   .section-soft {
       background: #f7fbff
   }

   .section-heading {
       text-align: center;
       max-width: 720px;
       margin: 0 auto 55px
   }

   .section-heading .eyebrow {
       justify-content: center
   }

   .section-title {
       color: var(--blue);
       font-size: clamp(34px, 4vw, 52px);
       font-weight: 800;
       letter-spacing: -1.8px;
       line-height: 1.1;
       margin: 0 0 17px;
   }

   .section-desc {
       color: var(--muted);
       line-height: 1.9;
       margin: 0
   }

   /* About */
   .about-image {
       border-radius: 30px;
       padding: 12px;
       background: #fff;
       border: 1px solid var(--line);
       box-shadow: var(--shadow);
   }

   .about-image img {
       width: 100%;
       height: 520px;
       object-fit: contain;
       border-radius: 22px;
   }

   .about-list {
       margin: 28px 0 0;
       padding: 0;
       list-style: none
   }

   .about-list li {
       display: flex;
       gap: 12px;
       margin: 13px 0;
       color: #53677e;
       font-size: 14px;
   }

   .about-list i {
       color: var(--blue-2);
       font-size: 18px
   }

   /* Services */
   .service-card {
       height: 100%;
       padding: 30px;
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 23px;
       transition: .35s ease;
       position: relative;
       overflow: hidden;
   }

   .service-card:before {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 3px;
       background: linear-gradient(90deg, var(--blue), #69b4f4);
       transform: scaleX(0);
       transform-origin: left;
       transition: .35s ease;
   }

   .service-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 50px rgba(11, 59, 115, .11);
       border-color: #d7e8f8;
   }

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

   .service-icon {
       width: 58px;
       height: 58px;
       border-radius: 17px;
       display: grid;
       place-items: center;
       color: var(--blue-2);
       background: var(--blue-3);
       font-size: 25px;
       margin-bottom: 21px;
   }

   .service-card h3 {
       font-size: 18px;
       color: var(--blue);
       font-weight: 700;
       margin-bottom: 10px
   }

   .service-card p {
       font-size: 13px;
       line-height: 1.8;
       color: var(--muted);
       margin: 0
   }

   /* Featured services */
   .feature-card {
       border-radius: 30px;
       padding: 35px;
       color: #fff;
       position: relative;
       overflow: hidden;
       min-height: 270px;
       background: linear-gradient(135deg, #083462, #0d67b8);
       box-shadow: 0 20px 55px rgba(7, 53, 103, .2);
   }

   .feature-card.gold {
       background: linear-gradient(135deg, #0d4e89, #1e76bd);
   }

   .feature-card:after {
       content: "";
       position: absolute;
       width: 210px;
       height: 210px;
       border-radius: 50%;
       right: -70px;
       bottom: -90px;
       border: 40px solid rgba(255, 255, 255, .08);
   }

   .feature-card .tag {
       display: inline-block;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       background: rgba(255, 255, 255, .13);
       padding: 8px 11px;
       border-radius: 50px;
       margin-bottom: 25px;
   }

   .feature-card h3 {
       font-size: 25px;
       font-weight: 700;
       max-width: 430px
   }

   .feature-card p {
       font-size: 13px;
       line-height: 1.8;
       color: rgba(255, 255, 255, .76);
       max-width: 500px
   }

   .feature-card i {
       font-size: 46px;
       position: absolute;
       right: 35px;
       top: 35px;
       color: rgba(255, 255, 255, .16)
   }

   /* Cases */
   .case-item {
       position: relative;
       overflow: hidden;
       border-radius: 22px;
       background: #fff;
       border: 1px solid var(--line);
       box-shadow: 0 10px 35px rgba(10, 47, 87, .07);
       cursor: pointer;
   }

   .case-item img {
       width: 100%;
       height: 300px;
       object-fit: cover;
       transition: .55s ease;
   }

   .case-item:hover img {
       transform: scale(1.06)
   }

   .case-overlay {
       position: absolute;
       inset: auto 0 0;
       padding: 24px;
       background: linear-gradient(transparent, rgba(3, 22, 43, .9));
       color: #fff;
       transform: translateY(6px);
       transition: .3s ease;
   }

   .case-item:hover .case-overlay {
       transform: translateY(0)
   }

   .case-overlay small {
       font-size: 10px;
       letter-spacing: 1.4px;
       text-transform: uppercase;
       color: #bfe1ff
   }

   .case-overlay h4 {
       font-size: 17px;
       margin: 5px 0 0
   }

   .case-note {
       margin-top: 28px;
       text-align: center;
       color: var(--muted);
       font-size: 12px;
   }

   /* Contact */
   .contact-wrap {
       background: linear-gradient(135deg, #f2f8ff, #fff);
       border: 1px solid var(--line);
       border-radius: 32px;
       padding: 45px;
       box-shadow: var(--shadow);
   }

   .contact-box {
       display: flex;
       gap: 16px;
       align-items: flex-start;
       padding: 20px 0;
       border-bottom: 1px solid var(--line);
   }

   .contact-box:last-child {
       border-bottom: 0
   }

   .contact-box .ci {
       width: 46px;
       height: 46px;
       flex: 0 0 46px;
       border-radius: 14px;
       background: #fff;
       display: grid;
       place-items: center;
       color: var(--blue-2);
       box-shadow: 0 8px 22px rgba(11, 59, 115, .08);
   }

   .contact-box strong {
       display: block;
       color: var(--blue);
       font-size: 14px;
       margin-bottom: 4px
   }

   .contact-box span,
   .contact-box a {
       font-size: 13px;
       color: var(--muted);
       line-height: 1.7
   }

   .contact-box a:hover {
       color: var(--blue-2)
   }

   .map-card {
       min-height: 100%;
       border-radius: 27px;
       background: var(--blue);
       padding: 36px;
       color: #fff;
       position: relative;
       overflow: hidden;
   }

   .map-card:after {
       content: "";
       position: absolute;
       width: 300px;
       height: 300px;
       border: 60px solid rgba(255, 255, 255, .06);
       border-radius: 50%;
       right: -100px;
       bottom: -100px;
   }

   .map-card i.big {
       font-size: 65px;
       color: #91c9f7
   }

   .map-card h3 {
       font-size: 27px;
       font-weight: 700;
       margin: 20px 0 10px
   }

   .map-card p {
       color: rgba(255, 255, 255, .72);
       font-size: 13px;
       line-height: 1.9
   }

   .map-card .map-btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 12px 18px;
       border-radius: 50px;
       background: #fff;
       color: var(--blue);
       font-size: 13px;
       font-weight: 600;
       margin-top: 15px;
   }

   /* Premium Footer */
   .premium-footer {
       background: #092746;
       color: #9fb5ca;
       padding: 58px 0 22px
   }

   .footer-brand {
       display: flex;
       align-items: center;
       gap: 12px;
       text-decoration: none;
       color: #fff
   }

   .footer-brand img {
       width: 62px;
       height: 62px;
       object-fit: contain;
       background: #fff;
       border-radius: 3px
   }

   .footer-brand strong {
       display: block;
       color: #fff;
       font-size: 18px;
       font-weight: 700;
       line-height: 1.2
   }

   .footer-brand span {
       display: block;
       color: #d6a34a;
       font-size: 9px;
       letter-spacing: 2px;
       font-weight: 700;
       margin-top: 4px
   }

   .footer-about {
       max-width: 560px;
       margin: 20px 0;
       color: #9fb5ca;
       font-size: 13px;
       line-height: 1.9
   }

   .footer-socials {
       display: flex;
       gap: 9px
   }

   .footer-socials a {
       width: 36px;
       height: 36px;
       border: 1px solid rgba(255, 255, 255, .14);
       border-radius: 50%;
       display: grid;
       place-items: center;
       color: #fff;
       transition: .3s ease
   }

   .footer-socials a:hover {
       background: #fff;
       color: #174b83;
       transform: translateY(-2px)
   }

   .premium-footer h6 {
       color: #fff;
       font-size: 14px;
       font-weight: 700;
       margin: 3px 0 20px
   }

   .premium-footer .col-lg-2>a {
       display: block;
       color: #9fb5ca;
       font-size: 14px;
       margin: 0 0 11px;
       transition: .25s ease
   }

   .premium-footer .col-lg-2>a:hover {
       color: #fff;
       transform: translateX(2px)
   }

   .premium-footer p {
       font-size: 12px;
       line-height: 1.7;
       margin: 0 0 10px;
       color: #9fb5ca
   }

   .premium-footer p i {
       color: #8fc9f7;
       width: 20px
   }

   .premium-footer p a {
       color: #d8e8f7
   }

   .footer-bottom {
       border-top: 1px solid rgba(255, 255, 255, .10);
       margin-top: 40px;
       padding-top: 18px;
       font-size: 14px;
       color: #89a3bb
   }

   /* Reveal */
   .reveal {
       opacity: 0;
       transform: translateY(35px);
       transition: opacity .8s ease, transform .8s ease
   }

   .reveal.show {
       opacity: 1;
       transform: none
   }

   /* Back to top */
   #topBtn {
       position: fixed;
       right: 22px;
       bottom: 22px;
       z-index: 99;
       width: 45px;
       height: 45px;
       border: 0;
       border-radius: 50%;
       display: grid;
       place-items: center;
       background: var(--blue);
       color: #fff;
       box-shadow: 0 12px 30px rgba(7, 43, 84, .25);
       opacity: 0;
       pointer-events: none;
       transition: .3s ease;
   }

   #topBtn.show {
       opacity: 1;
       pointer-events: auto
   }

   /* Responsive */
   @media(max-width:991px) {
       .hero {
           min-height: auto;
           padding: 100px 0 90px
       }

       .hero-card {
           margin-top: 45px
       }

       .hero-slider {
           height: 390px
       }

       .hero-badge {
           left: 15px
       }

       .stat {
           border-right: 0;
           border-bottom: 1px solid var(--line);
           padding: 14px
       }

       .stat:last-child {
           border-bottom: 0
       }

       .contact-wrap {
           padding: 28px
       }
   }

   @media(max-width:575px) {
       .topbar .hide-mobile {
           display: none
       }

       .brand img {
           width: 54px;
           height: 54px
       }

       .brand-text strong {
           font-size: 17px
       }

       .hero h1 {
           letter-spacing: -1.7px
       }

       .hero p {
           font-size: 14px
       }

       .btn-outline-custom {
           margin: 10px 0 0
       }

       .hero-card {
           padding: 10px
       }

       .hero-slider {
           height: 330px
       }

       .section {
           padding: 75px 0
       }

       .section-title {
           font-size: 35px
       }

       .about-image img {
           height: 370px
       }

       .contact-wrap {
           padding: 22px
       }
   }


   .about-hero {
       position: relative;
       min-height: 560px;
       display: flex;
       align-items: center;
       overflow: hidden;
       background: linear-gradient(135deg, #f6fbff, #fff 55%, #edf7ff)
   }

   .about-hero:before {
       content: "";
       position: absolute;
       width: 500px;
       height: 500px;
       border-radius: 50%;
       right: -180px;
       top: -180px;
       background: rgba(13, 92, 168, .07)
   }

   .about-hero:after {
       content: "";
       position: absolute;
       width: 300px;
       height: 300px;
       border-radius: 50%;
       left: -160px;
       bottom: -180px;
       border: 70px solid rgba(13, 92, 168, .045)
   }

   .eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 9px;
       color: var(--blue2);
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 1.8px;
       text-transform: uppercase;
       margin-bottom: 16px
   }

   .eyebrow:before {
       content: "";
       width: 32px;
       height: 2px;
       background: var(--gold)
   }

   .about-hero h1 {
       font-size: clamp(42px, 6vw, 72px);
       line-height: 1.05;
       letter-spacing: -2.5px;
       font-weight: 800;
       color: var(--blue);
       margin: 0 0 22px
   }

   .about-hero h1 span {
       color: var(--gold)
   }

   .about-hero p {
       max-width: 650px;
       color: var(--muted);
       font-size: 16px;
       line-height: 1.9;
       margin: 0
   }

   .hero-art {
       position: relative;
       height: 430px
   }

   .hero-main {
       position: absolute;
       right: 0;
       top: 20px;
       width: 78%;
       height: 390px;
       object-fit: cover;
       border-radius: 28px;
       box-shadow: var(--shadow);
       border: 8px solid #fff
   }

   .hero-small {
       position: absolute;
       left: 0;
       bottom: 0;
       width: 43%;
       height: 185px;
       object-fit: cover;
       border-radius: 22px;
       border: 7px solid #fff;
       box-shadow: var(--shadow)
   }

   .float-card {
       position: absolute;
       right: 7%;
       bottom: 25px;
       background: #fff;
       padding: 16px 19px;
       border-radius: 16px;
       box-shadow: 0 18px 45px rgba(10, 47, 87, .15);
       display: flex;
       align-items: center;
       gap: 12px;
       z-index: 3
   }

   .float-icon {
       width: 43px;
       height: 43px;
       border-radius: 13px;
       background: #eaf4ff;
       color: var(--blue2);
       display: grid;
       place-items: center;
       font-size: 20px
   }

   .float-card strong {
       display: block;
       font-size: 13px
   }

   .float-card small {
       color: var(--muted);
       font-size: 10px
   }

   /* Sections */
   .section {
       padding: 100px 0
   }

   .soft {
       background: var(--soft)
   }

   .section-heading {
       text-align: center;
       max-width: 760px;
       margin: 0 auto 55px
   }

   .section-title {
       font-size: clamp(34px, 4vw, 48px);
       font-weight: 800;
       line-height: 1.15;
       letter-spacing: -1.4px;
       color: var(--blue);
       margin: 0 0 16px
   }

   .section-desc {
       color: var(--muted);
       line-height: 1.9;
       margin: 0
   }

   .story-image {
       position: relative;
       padding: 0 28px 28px 0
   }

   .story-image img {
       width: 100%;
       height: 500px;
       object-fit: cover;
       border-radius: 26px;
       box-shadow: var(--shadow);
       display: block
   }

   .image-accent {
       position: absolute;
       right: 0;
       bottom: 0;
       width: 180px;
       height: 180px;
       background: var(--blue);
       border-radius: 24px;
       z-index: -1
   }

   .story-copy h3 {
       font-size: 27px;
       color: var(--blue);
       font-weight: 700;
       margin-bottom: 17px
   }

   .story-copy p {
       color: var(--muted);
       line-height: 1.95;
       font-size: 14px
   }

   .check-list {
       list-style: none;
       padding: 0;
       margin: 25px 0 0
   }

   .check-list li {
       display: flex;
       gap: 12px;
       align-items: flex-start;
       margin: 14px 0;
       color: #41566d;
       font-size: 14px
   }

   .check-list i {
       color: var(--blue2);
       font-size: 18px;
       margin-top: 2px
   }

   .values-card {
       height: 100%;
       padding: 30px;
       border: 1px solid var(--line);
       border-radius: 24px;
       background: #fff;
       box-shadow: 0 15px 45px rgba(10, 47, 87, .06);
       transition: .3s
   }

   .values-card:hover {
       transform: translateY(-7px);
       box-shadow: var(--shadow)
   }

   .values-icon {
       width: 54px;
       height: 54px;
       border-radius: 16px;
       background: #eaf4ff;
       color: var(--blue2);
       display: grid;
       place-items: center;
       font-size: 23px;
       margin-bottom: 20px
   }

   .values-card h4 {
       font-size: 19px;
       color: var(--blue);
       font-weight: 700;
       margin-bottom: 10px
   }

   .values-card p {
       font-size: 13px;
       color: var(--muted);
       line-height: 1.8;
       margin: 0
   }

   .feature-band {
       position: relative;
       overflow: hidden;
       background: var(--navy);
       color: #fff
   }

   .feature-band:after {
       content: "";
       position: absolute;
       width: 430px;
       height: 430px;
       border-radius: 50%;
       right: -180px;
       top: -250px;
       border: 80px solid rgba(255, 255, 255, .035)
   }

   .feature-band .eyebrow {
       color: #8fc9f7
   }

   .feature-band .eyebrow:before {
       background: var(--gold)
   }

   .feature-band h2 {
       font-size: clamp(32px, 4vw, 48px);
       font-weight: 800;
       line-height: 1.15;
       margin-bottom: 18px
   }

   .feature-band p {
       color: #a9bfd4;
       line-height: 1.9;
       font-size: 14px
   }

   .feature-list {
       list-style: none;
       padding: 0;
       margin: 25px 0 0
   }

   .feature-list li {
       display: flex;
       gap: 12px;
       margin: 14px 0;
       color: #e6f0f8;
       font-size: 13px
   }

   .feature-list i {
       color: #8fc9f7
   }

   .tech-card {
       background: rgba(255, 255, 255, .07);
       border: 1px solid rgba(255, 255, 255, .1);
       border-radius: 25px;
       padding: 34px
   }

   .tech-row {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 18px 0;
       border-bottom: 1px solid rgba(255, 255, 255, .09)
   }

   .tech-row:last-child {
       border-bottom: 0
   }

   .tech-row i {
       width: 42px;
       height: 42px;
       border-radius: 12px;
       background: rgba(143, 201, 247, .12);
       display: grid;
       place-items: center;
       color: #8fc9f7;
       font-size: 18px
   }

   .tech-row strong {
       display: block;
       font-size: 14px
   }

   .tech-row span {
       display: block;
       font-size: 11px;
       color: #9fb5ca;
       margin-top: 3px
   }

   .cta {
       padding: 95px 0;
       background: linear-gradient(135deg, #edf7ff, #fff)
   }

   .cta-box {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 28px;
       padding: 45px 50px;
       box-shadow: var(--shadow);
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 30px
   }

   .cta-box h2 {
       font-size: 32px;
       font-weight: 800;
       color: var(--blue);
       margin: 0 0 10px
   }

   .cta-box p {
       color: var(--muted);
       margin: 0;
       font-size: 13px;
       line-height: 1.8
   }

   .btn-main {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       background: var(--blue);
       color: #fff;
       padding: 14px 23px;
       border-radius: 50px;
       font-size: 13px;
       font-weight: 600;
       white-space: nowrap;
       transition: .3s
   }

   .btn-main:hover {
       background: var(--blue2);
       color: #fff;
       transform: translateY(-3px)
   }

   .reveal {
       opacity: 0;
       transform: translateY(28px);
       transition: .75s ease
   }

   .reveal.show {
       opacity: 1;
       transform: none
   }

   @media(max-width:991px) {
       .about-hero {
           padding: 80px 0
       }

       .hero-art {
           height: 400px;
           margin-top: 35px
       }

       .story-image {
           margin-bottom: 35px
       }

       .cta-box {
           display: block
       }

       .cta-box .btn-main {
           margin-top: 25px
       }
   }

   @media(max-width:575px) {
       .section {
           padding: 72px 0
       }

       .about-hero h1 {
           letter-spacing: -1.5px
       }

       .hero-art {
           height: 340px
       }

       .hero-main {
           height: 300px;
           width: 82%
       }

       .hero-small {
           height: 145px;
           width: 48%
       }

       .float-card {
           right: 2%;
           bottom: 12px;
           padding: 12px
       }

       .story-image {
           padding-right: 12px;
           padding-bottom: 15px
       }

       .story-image img {
           height: 360px
       }

       .image-accent {
           width: 100px;
           height: 100px
       }

       .cta-box {
           padding: 32px 25px
       }

       .cta-box h2 {
           font-size: 27px
       }
   }





   :root {
       --blue: #0b3b73;
       --blue2: #0d5ca8;
       --navy: #082744;
       --gold: #c8922e;
       --ink: #10233d;
       --muted: #6c7b8e;
       --soft: #f5f9fd;
       --line: #e3edf6;
       --shadow: 0 20px 55px rgba(9, 47, 87, .11)
   }

   * {
       box-sizing: border-box
   }

   html {
       scroll-behavior: smooth
   }

   body {
       margin: 0;
       font-family: Poppins, sans-serif;
       color: var(--ink);
       background: #fff;
       overflow-x: hidden
   }

   .container {
       width: min(1180px, 92%);
       margin: auto
   }

   a {
       text-decoration: none
   }

   .hero {
       min-height: 570px;
       position: relative;
       display: flex;
       align-items: center;
       overflow: hidden;
       background: var(--navy) url('assets/services-hero.png') center/cover no-repeat
   }

   .hero:before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(90deg, rgba(5, 31, 61, .94) 0%, rgba(6, 39, 73, .82) 42%, rgba(6, 39, 73, .22) 100%)
   }

   .hero-content {
       position: relative;
       z-index: 2;
       max-width: 700px;
       color: #fff;
       padding: 95px 0
   }

   .eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       color: #8fc9f7;
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: 12px;
       font-weight: 700;
       margin-bottom: 16px
   }

   .eyebrow:before {
       content: "";
       width: 34px;
       height: 2px;
       background: var(--gold)
   }

   h1 {
       font-size: clamp(46px, 6vw, 76px);
       line-height: 1.04;
       letter-spacing: -2.5px;
       margin: 0 0 20px;
       font-weight: 800
   }

   h1 span {
       color: #8fc9f7
   }

   .hero p {
       font-size: 16px;
       line-height: 1.9;
       color: #dceaf6;
       max-width: 640px;
       margin: 0 0 30px
   }

   .crumbs {
       display: flex;
       gap: 10px;
       align-items: center;
       color: #a9c2d8;
       font-size: 13px
   }

   .crumbs i {
       color: #8fc9f7
   }

   .btn {
       display: inline-flex;
       align-items: center;
       gap: 9px;
       background: #fff;
       color: var(--blue);
       padding: 14px 22px;
       border-radius: 50px;
       font-size: 13px;
       font-weight: 700;
       transition: .3s
   }

   .btn:hover {
       transform: translateY(-3px);
       background: #edf7ff
   }

   .section {
       padding: 100px 0
   }

   .soft {
       background: var(--soft)
   }

   .heading {
       text-align: center;
       max-width: 760px;
       margin: 0 auto 55px
   }

   .heading h2 {
       font-size: clamp(33px, 4vw, 48px);
       line-height: 1.15;
       letter-spacing: -1.5px;
       color: var(--blue);
       font-weight: 800;
       margin: 0 0 15px
   }

   .heading p {
       color: var(--muted);
       line-height: 1.9;
       font-size: 14px;
       margin: 0
   }

   .service-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 22px
   }

   .card {
       position: relative;
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 24px;
       padding: 32px;
       min-height: 270px;
       box-shadow: 0 12px 35px rgba(9, 47, 87, .045);
       transition: .35s;
       overflow: hidden
   }

   .card:after {
       content: "";
       position: absolute;
       width: 110px;
       height: 110px;
       border-radius: 50%;
       right: -55px;
       top: -55px;
       background: #edf7ff
   }

   .card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow);
       border-color: #cfe2f4
   }

   .icon {
       width: 58px;
       height: 58px;
       border-radius: 17px;
       background: #eaf4ff;
       color: var(--blue2);
       display: grid;
       place-items: center;
       font-size: 25px;
       margin-bottom: 22px;
       position: relative;
       z-index: 1
   }

   .card h3 {
       color: var(--blue);
       font-size: 20px;
       margin: 0 0 10px;
       font-weight: 700
   }

   .card p {
       color: var(--muted);
       font-size: 13px;
       line-height: 1.85;
       margin: 0
   }

   .card a {
       display: inline-flex;
       gap: 7px;
       color: var(--blue2);
       font-size: 12px;
       font-weight: 700;
       margin-top: 18px
   }

   .featured {
       background: linear-gradient(145deg, var(--blue), #0d5ca8);
       color: #fff;
       border: 0
   }

   .featured .icon {
       background: rgba(255, 255, 255, .14);
       color: #fff
   }

   .featured h3,
   .featured p,
   .featured a {
       color: #fff
   }

   .badge {
       display: inline-block;
       background: rgba(255, 255, 255, .14);
       padding: 6px 10px;
       border-radius: 30px;
       font-size: 10px;
       letter-spacing: 1px;
       text-transform: uppercase;
       margin-bottom: 14px
   }

   .process {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 18px
   }

   .step {
       padding: 25px;
       border: 1px solid var(--line);
       border-radius: 20px;
       background: #fff
   }

   .num {
       width: 40px;
       height: 40px;
       border-radius: 12px;
       background: var(--blue);
       color: #fff;
       display: grid;
       place-items: center;
       font-weight: 700;
       margin-bottom: 17px
   }

   .step h4 {
       margin: 0 0 8px;
       color: var(--blue);
       font-size: 16px
   }

   .step p {
       margin: 0;
       color: var(--muted);
       font-size: 12px;
       line-height: 1.75
   }

   .cta {
       padding: 90px 0;
       background: linear-gradient(135deg, #edf7ff, #fff)
   }

   .cta-box {
       background: var(--navy);
       border-radius: 28px;
       padding: 45px 50px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 30px;
       color: #fff;
       box-shadow: var(--shadow)
   }

   .cta-box h2 {
       margin: 0 0 9px;
       font-size: 32px
   }

   .cta-box p {
       margin: 0;
       color: #a9bfd4;
       font-size: 13px;
       line-height: 1.8
   }

   .cta .btn {
       background: #fff
   }

   .reveal {
       opacity: 0;
       transform: translateY(28px);
       transition: .7s ease
   }

   .reveal.show {
       opacity: 1;
       transform: none
   }

   @media(max-width:900px) {
       .service-grid {
           grid-template-columns: repeat(2, 1fr)
       }

       .process {
           grid-template-columns: repeat(2, 1fr)
       }

       .hero {
           min-height: 520px
       }

       .cta-box {
           display: block
       }

       .cta-box .btn {
           margin-top: 25px
       }
   }

   @media(max-width:575px) {
       .section {
           padding: 72px 0
       }

       .service-grid,
       .process {
           grid-template-columns: 1fr
       }

       .hero-content {
           padding: 75px 0
       }

       .hero {
           min-height: 500px
       }

       .hero:before {
           background: rgba(5, 31, 61, .88)
       }

       h1 {
           letter-spacing: -1.5px
       }

       .card {
           padding: 27px
       }

       .cta-box {
           padding: 32px 25px
       }

       .cta-box h2 {
           font-size: 27px
       }
   }



   .about-hero {
       position: relative;
       min-height: 560px;
       display: flex;
       align-items: center;
       overflow: hidden;
       background: linear-gradient(135deg, #f6fbff, #fff 55%, #edf7ff)
   }

   .about-hero:before {
       content: "";
       position: absolute;
       width: 500px;
       height: 500px;
       border-radius: 50%;
       right: -180px;
       top: -180px;
       background: rgba(13, 92, 168, .07)
   }

   .about-hero:after {
       content: "";
       position: absolute;
       width: 300px;
       height: 300px;
       border-radius: 50%;
       left: -160px;
       bottom: -180px;
       border: 70px solid rgba(13, 92, 168, .045)
   }

   .eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 9px;
       color: var(--blue2);
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 1.8px;
       text-transform: uppercase;
       margin-bottom: 16px
   }

   .eyebrow:before {
       content: "";
       width: 32px;
       height: 2px;
       background: var(--gold)
   }

   .about-hero h1 {
       font-size: clamp(42px, 6vw, 72px);
       line-height: 1.05;
       letter-spacing: -2.5px;
       font-weight: 800;
       color: var(--blue);
       margin: 0 0 22px
   }

   .about-hero h1 span {
       color: var(--gold)
   }

   .about-hero p {
       max-width: 650px;
       color: var(--muted);
       font-size: 16px;
       line-height: 1.9;
       margin: 0
   }

   .hero-art {
       position: relative;
       height: 430px
   }

   .hero-main {
       position: absolute;
       right: 0;
       top: 20px;
       width: 78%;
       height: 390px;
       object-fit: cover;
       border-radius: 28px;
       box-shadow: var(--shadow);
       border: 8px solid #fff
   }

   .hero-small {
       position: absolute;
       left: 0;
       bottom: 0;
       width: 43%;
       height: 185px;
       object-fit: cover;
       border-radius: 22px;
       border: 7px solid #fff;
       box-shadow: var(--shadow)
   }

   .float-card {
       position: absolute;
       right: 7%;
       bottom: 25px;
       background: #fff;
       padding: 16px 19px;
       border-radius: 16px;
       box-shadow: 0 18px 45px rgba(10, 47, 87, .15);
       display: flex;
       align-items: center;
       gap: 12px;
       z-index: 3
   }

   .float-icon {
       width: 43px;
       height: 43px;
       border-radius: 13px;
       background: #eaf4ff;
       color: var(--blue2);
       display: grid;
       place-items: center;
       font-size: 20px
   }

   .float-card strong {
       display: block;
       font-size: 13px
   }

   .float-card small {
       color: var(--muted);
       font-size: 10px
   }

   /* Sections */
   .section {
       padding: 100px 0
   }

   .soft {
       background: var(--soft)
   }

   .section-heading {
       text-align: center;
       max-width: 760px;
       margin: 0 auto 55px
   }

   .section-title {
       font-size: clamp(34px, 4vw, 48px);
       font-weight: 800;
       line-height: 1.15;
       letter-spacing: -1.4px;
       color: var(--blue);
       margin: 0 0 16px
   }

   .section-desc {
       color: var(--muted);
       line-height: 1.9;
       margin: 0
   }

   .story-image {
       position: relative;
       padding: 0 28px 28px 0
   }

   .story-image img {
       width: 100%;
       height: 500px;
       object-fit: cover;
       border-radius: 26px;
       box-shadow: var(--shadow);
       display: block
   }

   .image-accent {
       position: absolute;
       right: 0;
       bottom: 0;
       width: 180px;
       height: 180px;
       background: var(--blue);
       border-radius: 24px;
       z-index: -1
   }

   .story-copy h3 {
       font-size: 27px;
       color: var(--blue);
       font-weight: 700;
       margin-bottom: 17px
   }

   .story-copy p {
       color: var(--muted);
       line-height: 1.95;
       font-size: 14px
   }

   .check-list {
       list-style: none;
       padding: 0;
       margin: 25px 0 0
   }

   .check-list li {
       display: flex;
       gap: 12px;
       align-items: flex-start;
       margin: 14px 0;
       color: #41566d;
       font-size: 14px
   }

   .check-list i {
       color: var(--blue2);
       font-size: 18px;
       margin-top: 2px
   }

   .values-card {
       height: 100%;
       padding: 30px;
       border: 1px solid var(--line);
       border-radius: 24px;
       background: #fff;
       box-shadow: 0 15px 45px rgba(10, 47, 87, .06);
       transition: .3s
   }

   .values-card:hover {
       transform: translateY(-7px);
       box-shadow: var(--shadow)
   }

   .values-icon {
       width: 54px;
       height: 54px;
       border-radius: 16px;
       background: #eaf4ff;
       color: var(--blue2);
       display: grid;
       place-items: center;
       font-size: 23px;
       margin-bottom: 20px
   }

   .values-card h4 {
       font-size: 19px;
       color: var(--blue);
       font-weight: 700;
       margin-bottom: 10px
   }

   .values-card p {
       font-size: 13px;
       color: var(--muted);
       line-height: 1.8;
       margin: 0
   }

   .feature-band {
       position: relative;
       overflow: hidden;
       background: var(--navy);
       color: #fff
   }

   .feature-band:after {
       content: "";
       position: absolute;
       width: 430px;
       height: 430px;
       border-radius: 50%;
       right: -180px;
       top: -250px;
       border: 80px solid rgba(255, 255, 255, .035)
   }

   .feature-band .eyebrow {
       color: #8fc9f7
   }

   .feature-band .eyebrow:before {
       background: var(--gold)
   }

   .feature-band h2 {
       font-size: clamp(32px, 4vw, 48px);
       font-weight: 800;
       line-height: 1.15;
       margin-bottom: 18px
   }

   .feature-band p {
       color: #a9bfd4;
       line-height: 1.9;
       font-size: 14px
   }

   .feature-list {
       list-style: none;
       padding: 0;
       margin: 25px 0 0
   }

   .feature-list li {
       display: flex;
       gap: 12px;
       margin: 14px 0;
       color: #e6f0f8;
       font-size: 13px
   }

   .feature-list i {
       color: #8fc9f7
   }

   .tech-card {
       background: rgba(255, 255, 255, .07);
       border: 1px solid rgba(255, 255, 255, .1);
       border-radius: 25px;
       padding: 34px
   }

   .tech-row {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 18px 0;
       border-bottom: 1px solid rgba(255, 255, 255, .09)
   }

   .tech-row:last-child {
       border-bottom: 0
   }

   .tech-row i {
       width: 42px;
       height: 42px;
       border-radius: 12px;
       background: rgba(143, 201, 247, .12);
       display: grid;
       place-items: center;
       color: #8fc9f7;
       font-size: 18px
   }

   .tech-row strong {
       display: block;
       font-size: 14px
   }

   .tech-row span {
       display: block;
       font-size: 11px;
       color: #9fb5ca;
       margin-top: 3px
   }

   .cta {
       padding: 95px 0;
       background: linear-gradient(135deg, #edf7ff, #fff)
   }

   .cta-box {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 28px;
       padding: 45px 50px;
       box-shadow: var(--shadow);
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 30px
   }

   .cta-box h2 {
       font-size: 32px;
       font-weight: 800;
       color: var(--blue);
       margin: 0 0 10px
   }

   .cta-box p {
       color: var(--muted);
       margin: 0;
       font-size: 13px;
       line-height: 1.8
   }

   .btn-main {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       background: var(--blue);
       color: #fff;
       padding: 14px 23px;
       border-radius: 50px;
       font-size: 13px;
       font-weight: 600;
       white-space: nowrap;
       transition: .3s
   }

   .btn-main:hover {
       background: var(--blue2);
       color: #fff;
       transform: translateY(-3px)
   }

   .reveal {
       opacity: 0;
       transform: translateY(28px);
       transition: .75s ease
   }

   .reveal.show {
       opacity: 1;
       transform: none
   }

   @media(max-width:991px) {
       .about-hero {
           padding: 80px 0
       }

       .hero-art {
           height: 400px;
           margin-top: 35px
       }

       .story-image {
           margin-bottom: 35px
       }

       .cta-box {
           display: block
       }

       .cta-box .btn-main {
           margin-top: 25px
       }
   }

   @media(max-width:575px) {
       .section {
           padding: 72px 0
       }

       .about-hero h1 {
           letter-spacing: -1.5px
       }

       .hero-art {
           height: 340px
       }

       .hero-main {
           height: 300px;
           width: 82%
       }

       .hero-small {
           height: 145px;
           width: 48%
       }

       .float-card {
           right: 2%;
           bottom: 12px;
           padding: 12px
       }

       .story-image {
           padding-right: 12px;
           padding-bottom: 15px
       }

       .story-image img {
           height: 360px
       }

       .image-accent {
           width: 100px;
           height: 100px
       }

       .cta-box {
           padding: 32px 25px
       }

       .cta-box h2 {
           font-size: 27px
       }
   }

   /* cpntact */

   :root {
       --navy: #092541;
       --blue: #16528d;
       --sky: #3c91df;
       --light: #f5f9fd;
       --line: #e2eaf2;
       --text: #25384c;
       --muted: #718196
   }

   * {
       box-sizing: border-box
   }

   html {
       scroll-behavior: smooth
   }
p{
    font-size: 14px !important;
}
   body {
       margin: 0;
       font-family: Poppins, sans-serif;
       color: var(--text);
       background: #fff
   }

   .hero {
       min-height: 420px;
       position: relative;
       display: flex;
       align-items: center;
       overflow: hidden;
       background: linear-gradient(90deg, rgba(5, 29, 52, .97), rgba(8, 39, 69, .77), rgba(8, 39, 69, .25)), url('../image/hero.png') center/cover no-repeat
   }

   .hero:after {
       content: "";
       position: absolute;
       left: -5%;
       right: -5%;
       bottom: -65px;
       height: 120px;
       background: #fff;
       transform: rotate(-2deg)
   }

   .hero-content {
       position: relative;
       z-index: 2;
       max-width: 1180px;
       width: 100%;
       margin: auto;
       padding: 70px 24px
   }

   .eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       color: #74b7ff;
       font-size: 13px;
       font-weight: 700;
       letter-spacing: 1.8px;
       text-transform: uppercase
   }

   .eyebrow:before {
       content: "";
       width: 36px;
       height: 3px;
       background: #74b7ff;
       border-radius: 5px
   }

   .hero h1 {
       font-size: clamp(42px, 6vw, 68px);
       line-height: 1.05;
       color: #fff;
       font-weight: 700;
       margin: 16px 0 15px
   }

   .hero p {
       color: #e8f2fc;
       max-width: 650px;
       font-size: 17px;
       line-height: 1.8;
       margin: 0
   }

   .crumb {
       margin-top: 25px;
       color: #bcd2e8;
       font-size: 14px
   }

   .crumb a {
       color: #fff;
       text-decoration: none
   }

   .main {
       max-width: 1180px;
       margin: 0 auto;
       padding: 25px 24px 90px
   }

   .intro {
       text-align: center;
       max-width: 760px;
       margin: 30px auto 45px
   }

   .intro .eyebrow {
       color: var(--blue)
   }

   .intro .eyebrow:before {
       background: var(--sky)
   }

   .intro h2 {
       font-size: 38px;
       line-height: 1.2;
       color: var(--navy);
       margin: 12px 0
   }

   .intro p {
       color: var(--muted);
       line-height: 1.8
   }

   .contact-grid {
       display: grid;
       grid-template-columns: .9fr 1.1fr;
       gap: 26px
   }

   .info-panel {
       background: var(--navy);
       border-radius: 22px;
       padding: 38px;
       color: #fff;
       position: relative;
       overflow: hidden
   }

   .info-panel:after {
       content: "";
       position: absolute;
       width: 260px;
       height: 260px;
       border: 1px solid rgba(255, 255, 255, .11);
       border-radius: 50%;
       right: -100px;
       bottom: -120px
   }

   .info-panel h3 {
       font-size: 27px;
       margin: 0 0 12px
   }

   .info-panel>p {
       color: #c9dced;
       line-height: 1.75;
       font-size: 14px;
       margin-bottom: 28px
   }

   .info-item {
       display: flex;
       gap: 16px;
       margin: 23px 0;
       position: relative;
       z-index: 1
   }

   .info-icon {
       width: 45px;
       height: 45px;
       flex: 0 0 45px;
       border-radius: 12px;
       background: rgba(255, 255, 255, .1);
       display: grid;
       place-items: center;
       color: #74b7ff;
       font-size: 20px
   }

   .info-item strong {
       display: block;
       font-size: 14px;
       margin-bottom: 4px
   }

   .info-item span,
   .info-item a {
       color: #c9dced;
       text-decoration: none;
       font-size: 13px;
       line-height: 1.65
   }

   .info-item a:hover {
       color: #fff
   }

   .socials {
       display: flex;
       gap: 10px;
       margin-top: 28px;
       position: relative;
       z-index: 1
   }

   .socials a {
       width: 40px;
       height: 40px;
       border: 1px solid rgba(255, 255, 255, .17);
       border-radius: 50%;
       display: grid;
       place-items: center;
       color: #fff;
       text-decoration: none;
       transition: .25s
   }

   .socials a:hover {
       background: #fff;
       color: var(--navy)
   }

   .form-panel {
       border: 1px solid var(--line);
       border-radius: 22px;
       padding: 38px;
       background: #fff;
       box-shadow: 0 16px 45px rgba(9, 37, 65, .07)
   }

   .form-panel h3 {
       font-size: 27px;
       color: var(--navy);
       margin: 0 0 8px
   }

   .form-panel>p {
       color: var(--muted);
       font-size: 14px;
       margin-bottom: 25px
   }

   .form-control,
   .form-select {
       border: 1px solid #d9e3ec;
       border-radius: 10px;
       padding: 13px 15px;
       font-family: inherit;
       font-size: 14px;
       box-shadow: none
   }

   .form-control:focus,
   .form-select:focus {
       border-color: #5e9bd1;
       box-shadow: 0 0 0 .2rem rgba(60, 145, 223, .12)
   }

   textarea.form-control {
       min-height: 145px;
       resize: vertical
   }

   .btn-submit {
       border: 0;
       border-radius: 10px;
       background: var(--navy);
       color: #fff;
       padding: 13px 25px;
       font-family: inherit;
       font-weight: 600;
       transition: .25s
   }

   .btn-submit:hover {
       background: var(--blue);
       transform: translateY(-2px)
   }

   .map-section {
       margin-top: 70px
   }

   .section-head {
       display: flex;
       align-items: end;
       justify-content: space-between;
       gap: 20px;
       margin-bottom: 20px
   }

   .section-head h2 {
       color: var(--navy);
       font-size: 32px;
       margin: 0
   }

   .section-head p {
       color: var(--muted);
       font-size: 13px;
       margin: 0
   }

   .map-wrap {
       height: 390px;
       border-radius: 22px;
       overflow: hidden;
       border: 1px solid var(--line);
       box-shadow: 0 12px 35px rgba(9, 37, 65, .07);
       background: #eef4f9
   }

   .map-wrap iframe {
       width: 100%;
       height: 100%;
       border: 0
   }

   .map-note {
       margin-top: 14px;
       font-size: 13px;
       color: var(--muted)
   }

   .map-note a {
       color: var(--blue);
       font-weight: 600;
       text-decoration: none
   }

   .quick {
       margin-top: 60px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 18px
   }

   .quick-card {
       padding: 25px;
       border: 1px solid var(--line);
       border-radius: 17px;
       background: var(--light);
       text-align: center
   }

   .quick-card i {
       font-size: 25px;
       color: var(--blue)
   }

   .quick-card h4 {
       font-size: 17px;
       color: var(--navy);
       margin: 10px 0 5px
   }

   .quick-card p {
       font-size: 12px;
       color: var(--muted);
       margin: 0;
       line-height: 1.6
   }

   .success {
       display: none;
       margin-top: 18px;
       padding: 12px 15px;
       border-radius: 9px;
       background: #edf8f0;
       color: #24733c;
       font-size: 13px
   }

   .floating-call {
       position: fixed;
       right: 24px;
       bottom: 24px;
       width: 58px;
       height: 58px;
       border-radius: 50%;
       background: var(--blue);
       color: #fff;
       display: grid;
       place-items: center;
       text-decoration: none;
       box-shadow: 0 10px 25px rgba(9, 37, 65, .25);
       z-index: 10;
       font-size: 21px
   }

   .floating-call:hover {
       color: #fff;
       background: var(--navy)
   }

   @media(max-width:900px) {
       .contact-grid {
           grid-template-columns: 1fr
       }

       .quick {
           grid-template-columns: 1fr
       }

       .section-head {
           display: block
       }

       .section-head p {
           margin-top: 8px
       }
   }

   @media(max-width:600px) {
       .hero {
           min-height: 390px
       }

       .hero-content {
           padding: 55px 20px
       }

       .hero p {
           font-size: 15px
       }

       .main {
           padding-left: 18px;
           padding-right: 18px
       }

       .intro h2 {
           font-size: 30px
       }

       .info-panel,
       .form-panel {
           padding: 27px 22px
       }

       .map-wrap {
           height: 310px
       }

       .floating-call {
           right: 18px;
           bottom: 18px
       }
   }