/* Prevent page from exceeding the screen width */
 * {
     box-sizing: border-box;
 }

 html,
 body {
     width: 100%;
     max-width: 100%;
     margin: 0;
 }

 body {
     overflow-x: hidden;
 }

 /* Main content */
 .container,
 main,
 .content-wrapper {
     width: 100%;
     max-width: 100%;
 }

 /* Table wrapper */
 .table-wrapper {
     width: 100%;
     max-width: 100%;
     overflow-x: auto;
 }

 /* Desktop table */
 table {
     width: 100%;
     border-collapse: collapse;
 }



 /* Mobile adjustments */
 @media screen and (max-width: 768px) {

     .content-wrapper {
         padding-left: 12px;
         padding-right: 12px;
     }

     table {
         min-width: 600px;
     }


 }


 /* Home Pge css*/
 :root {
     --navy: #092f6d;
     --navy2: #062858;
     --blue: #096df1;
     --cyan: #08c7d7;
     --green: #11b982;
     --purple: #6653f3;
     --orange: #ff9e19;
     --pink: #f23869;
     --text: #456b99;
     --line: #d9e9f7;
     --bg: #f3fbff;
     --white: #fff;
     --shadow: 0 12px 35px rgba(11, 77, 145, .08);
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: Nunito, Arial, sans-serif;
     color: var(--navy);
     background: #fff;
     line-height: 1.5
 }

 a {
     text-decoration: none;
     color: inherit
 }

 button,
 input,
 select {
     font: inherit
 }

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

 /* HEADER */
 .site-header {
     height: 82px;
     background: #fff;
     border-bottom: 1px solid #edf5fb;
     display: flex;
     align-items: center;
     position: sticky;
     top: 0;
     z-index: 1000
 }

 .header-inner {
     width: min(1180px, 92%);
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 25px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0
 }

 .brand-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: linear-gradient(135deg, #096bf0, #08c9d7);
     color: #fff;
     font-size: 25px;
     box-shadow: 0 8px 20px rgba(9, 107, 240, .2)
 }

 .brand-name {
     font-size: 23px;
     font-weight: 900;
     line-height: 1;
     color: var(--navy)
 }

 .brand-name span {
     color: var(--cyan)
 }

 .brand-tagline {
     font-size: 13px;
     font-weight: 800;
     color: var(--navy);
     margin-top: 2px
 }

 .nav {
    align-items: end;
    gap: 25px;
    display: flex;
    margin-left: auto;
 }

 .nav a {
     font-size: 17px;
    font-weight: 600;
    color: #315987;
    padding: 35px 0;
    position: relative;
    white-space: nowrap;
 }

 .nav a:hover,
 .nav a.active {
     color: var(--blue)
 }

 .nav a.active:after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 20px;
     transform: translateX(-50%);
     height: 3px;
     width: 28px;
     border-radius: 20px;
     background: linear-gradient(90deg, var(--blue), var(--cyan))
 }

 .phone-btn {
     display: flex;
     align-items: center;
     gap: 9px;
     color: #fff;
     font-weight: 800;
     font-size: 13px;
     padding: 12px 18px;
     border-radius: 30px;
     background: linear-gradient(90deg, var(--blue), var(--cyan));
     box-shadow: 0 8px 20px rgba(9, 107, 240, .18);
     white-space: nowrap
 }

 .menu-btn {
     display: none;
     border: 0;
     background: none;
     font-size: 24px;
     color: var(--navy);
     cursor: pointer
 }

 /* HERO */
 .hero {
     background: radial-gradient(circle at 76% 45%, rgba(12, 194, 218, .11), transparent 29%), linear-gradient(180deg, #f1faff, #fff);
     overflow: hidden
 }

 .hero-inner {
     min-height: 345px;
     display: grid;
     grid-template-columns: 1.02fr .98fr;
     align-items: center;
     gap: 25px;
     padding: 42px 0 25px
 }

 .eyebrow {
     font-size: 14px;
     font-weight: 900;
     letter-spacing: 1.5px;
     color: #04a8d0;
     text-transform: uppercase;
     margin-bottom: 8px
 }

 .hero h1 {
     font-size: clamp(38px, 4.2vw, 55px);
     line-height: 1.02;
     font-weight: 900;
     color: var(--navy);
     max-width: 610px
 }

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

 .hero-copy {
     font-size: 16px;
     color: var(--text);
     margin: 20px 0 27px;
     max-width: 600px
 }

 .hero-points {
     display: flex;
     flex-wrap: wrap;
     gap: 25px
 }

 .hero-point {
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: 13px;
     font-weight: 700;
     color: #0c3b78
 }

 .hero-point i {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #09bad2;
     color: #fff;
     display: grid;
     place-items: center;
     font-size: 9px
 }

 .hero-art {
     height: 330px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .hero-art {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .hero-art-image {
     width: 100%;
     max-width: 650px;
     height: auto;
     display: block;
     object-fit: contain;
 }

 /* ==========================================================
   Website price table - plain CSS, no :root variables.
   
   ========================================================== */

 .listing {
     padding: 48px 0
 }

 .listing *,
 .listing *::before,
 .listing *::after {
     box-sizing: border-box
 }

 .listing .listing-box {
     width: min(1180px, 100% - 40px);
     margin-left: auto;
     margin-right: auto;
 }

 .listing .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
     border: 0;
 }

 .listing a:focus-visible {
     outline: 3px solid #0b6bcb;
     outline-offset: 2px
 }

 /* ===== Desktop ===== */
 .listing .table-wrap {
     background: #fff;
     border: 1px solid #e3e9f2;
     border-radius: 12px;
     box-shadow: 0 12px 32px rgba(15, 30, 69, .08);
     overflow: hidden;
 }

 .listing .table-scroll {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch
 }

 .listing .website-table {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
     text-align: left;
     margin: 0;
 }

 .listing .website-table thead th {
     background: #0a3d80;
     color: #fff;
     font-weight: 800;
     font-size: 15px;
     padding: 19px 28px;
     text-align: left;
     border: 0;
 }

 .listing .website-table th:nth-child(1),
 .listing .website-table td:nth-child(1) {
     width: 17%
 }

 .listing .website-table th:nth-child(2),
 .listing .website-table td:nth-child(2) {
     width: 55%
 }

 .listing .website-table th:nth-child(3),
 .listing .website-table td:nth-child(3) {
     width: 28%
 }

 .listing .website-table td {
     padding: 18px 28px;
     color: #0f1e45;
     font-weight: 700;
     font-size: 15px;
     line-height: 1.5;
     text-align: left;
     background: #fff;
     border: 0;
     border-bottom: 1px solid #e3e9f2;
     vertical-align: middle;
     overflow-wrap: anywhere;
 }

 .listing .website-table tbody tr:last-child td {
     border-bottom: 0
 }

 .listing .website-table tbody tr:hover td {
     background: #f8fbff
 }

 .listing .website-name a {
     color: #1f6fdc;
     font-weight: 600;
     text-decoration:none;
     text-underline-offset: 3px;
 }

 .listing .website-name a:hover {
     color: #0a3d80
 }

 .listing .price {
     white-space: nowrap
 }

 /* ===== Tablet (576px - 991px) ===== */
 @media (max-width:991px) {
     .listing {
         padding: 36px 0
     }

     .listing .website-table thead th,
     .listing .website-table td {
         padding: 16px 20px;
         font-size: 14.5px
     }

     .listing .website-table th:nth-child(1),
     .listing .website-table td:nth-child(1) {
         width: 14%
     }

     .listing .website-table th:nth-child(2),
     .listing .website-table td:nth-child(2) {
         width: 56%
     }

     .listing .website-table th:nth-child(3),
     .listing .website-table td:nth-child(3) {
         width: 30%
     }
 }

 /* ===== Mobile (575px and below): each row becomes a card =====
   Sno = left | Website name = center | Price = right
   Defensive: resets any min-width / fixed width / percentage widths
   coming from the desktop table or from your site's own CSS. */
 @media (max-width:575px) {
     .listing {
         padding: 24px 0;
         overflow-x: hidden
     }

     .listing .listing-box {
         width: auto;
         max-width: 100%;
         margin-left: 12px;
         margin-right: 12px
     }

     .listing .table-wrap,
     .listing .table-scroll,
     .listing .table-wrap .website-table,
     .listing .table-wrap .website-table tbody {
         display: block;
         width: 100%;
         min-width: 0;
         max-width: 100%;
     }

     .listing .table-wrap {
         background: transparent;
         border: 0;
         box-shadow: none;
         border-radius: 0;
         overflow: visible;
     }

     .listing .table-scroll {
         overflow: visible
     }

     .listing .table-wrap .website-table {
         table-layout: auto;
         border-collapse: separate
     }

     /* Header bar stays visible on mobile and lines up with the cards:
     Sno = left | Website Name = center | Price = right */
     .listing .website-table thead {
         display: block;
         position: static;
         width: 100%;
         height: auto;
         overflow: visible;
         clip: auto;
         white-space: normal;
         margin: 0 0 12px;
     }

     .listing .website-table thead tr {
         display: grid;
         grid-template-columns: 40px minmax(0, 1fr) auto;
         gap: 10px;
         align-items: center;
         width: 100%;
         min-width: 0;
         max-width: 100%;
         background: #0a3d80;
         border-radius: 12px;
         padding: 14px 15px;
     }

     .listing .website-table thead th {
         display: block;
         min-width: 0;
         width: auto;
         padding: 0;
         background: transparent;
         color: #fff;
         font-size: 13px;
         font-weight: 800;
         line-height: 1.2;
     }

     .listing .website-table thead th:nth-child(1) {
         width: auto;
         grid-column: 1;
         text-align: center
     }

     .listing .website-table thead th:nth-child(2) {
         width: auto;
         grid-column: 2;
         text-align: center
     }

     .listing .website-table thead th:nth-child(3) {
         width: auto;
         grid-column: 3;
         text-align: right
     }

     .listing .website-table tbody tr {
         display: grid;
         grid-template-columns: 40px minmax(0, 1fr) auto;
         gap: 10px;
         align-items: center;
         width: 100%;
         min-width: 0;
         max-width: 100%;
         background: #fff;
         border: 1px solid #e3e9f2;
         border-radius: 14px;
         padding: 14px;
         margin: 0 0 12px;
         box-shadow: 0 6px 18px rgba(15, 30, 69, .06);
     }

     .listing .website-table tbody td,
     .listing .website-table tbody tr:hover td {
         display: block;
         min-width: 0;
         padding: 0;
         border: 0;
         background: transparent;
         white-space: normal;
     }

     /* Sno - LEFT, round badge */
     .listing .website-table tbody td:nth-child(1) {
         grid-column: 1;
         width: 40px;
         height: 40px;
         line-height: 40px;
         border-radius: 50%;
         background: #eaf2ff;
         color: #1f6fdc;
         font-weight: 800;
         text-align: center;
     }

     .listing .website-table tbody tr:hover td:nth-child(1) {
         background: #eaf2ff
     }

     /* Website name - CENTER */
     .listing .website-table tbody td:nth-child(2) {
         grid-column: 2;
         width: auto;
         text-align: start;
         font-size: 13px;
         line-height: 1.35;
         overflow-wrap: anywhere;
         word-break: break-word;
     }

     .listing .website-name a {
         color: #0f1e45;
         font-weight: 700;
         font-size: 13px;
         text-decoration: none;
     }

     /* Price - RIGHT */
     .listing .website-table tbody td:nth-child(3) {
         grid-column: 3;
         width: auto;
         text-align: right;
         white-space: nowrap;
         font-size: 13px;
         font-weight: 700;
         color: #1f6fdc;
     }


 }

 @media (max-width: 767px) {
     .hero-art-image {
         width: calc(100% + 147px);
         max-width: none;
         margin-left: -73.5px;
         /* half of 147px */
         margin-right: -73.5px;
         height: auto;
     }
 }


 @media (max-width: 650px) {
     .hero-graphic {
         transform: scale(.8);
         margin-top: -20px;
         margin-bottom: -20px;
     }

     /* undo the 80% shrink so the image still fills the width */
     .hero-graphic .hero-art-image {
         width: 125%;
         max-width: none;
         margin-left: -12.5%;
         margin-right: -12.5%;
         height: auto;
     }
 }



 /* ===== Very small phones (360px and below) ===== */
 @media (max-width:360px) {
     .listing .website-table thead tr {
         grid-template-columns: 36px minmax(0, 1fr) auto;
         gap: 8px;
         padding: 12px 13px;
     }

     .listing .website-table tbody tr {
         grid-template-columns: 36px minmax(0, 1fr) auto;
         gap: 8px;
         padding: 12px;
     }

     .listing .website-table tbody td:nth-child(1) {
         width: 36px;
         height: 36px;
         line-height: 36px
     }

     .listing .website-table tbody td:nth-child(2) {
         font-size: 12px
     }

     .listing .website-table tbody td:nth-child(3) {
         font-size: 14px
     }
 }


 /* SERVICES */
 .services {
     background: linear-gradient(180deg, #f2fbff, #f9fdff);
     padding: 38px 0 48px
 }

 .section-heading {
     text-align: center;
     margin-bottom: 32px
 }

 .section-heading .eyebrow {
     margin-bottom: 6px
 }

 .section-heading h2 {
     font-size: 34px;
     line-height: 1.1;
     font-weight: 900;
     color: var(--navy)
 }

 .section-heading p {
     color: var(--text);
     margin-top: 10px;
     font-size: 16px
 }

 .heading-lines {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     margin-bottom: 5px
 }

 .heading-lines:before,
 .heading-lines:after {
     content: "";
     height: 2px;
     width: 30px;
     background: #08b8d4
 }

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

 .service-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 10px;
     padding: 18px 18px 20px;
     text-align: center;
     min-height: 214px;
     box-shadow: 0 5px 20px rgba(13, 96, 159, .04);
     transition: .25s
 }

 .service-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 14px 30px rgba(13, 96, 159, .1)
 }

 .service-icon {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     margin: 0 auto 13px;
     display: grid;
     place-items: center;
     color: #fff;
     font-size: 30px
 }

 .web-design .service-icon {
     background: #0c78ef
 }

 .web-dev .service-icon {
     background: #10bcc5
 }

 .digital .service-icon {
     background: #6350ed
 }

 .graphic .service-icon {
     background: #ffa016
 }

 .meta .service-icon {
     background: #f23868
 }

 .service-card h3 {
     font-size: 17px;
     font-weight: 900;
     color: var(--navy);
     margin-bottom: 8px
 }

 .service-card p {
     font-size: 13px;
     line-height: 1.45;
     color: #5275a2
 }

 /* FOOTER */
 .footer {
     background: linear-gradient(135deg, #062653, #03234d);
     color: #fff;
     position: relative;
     overflow: hidden
 }

 .footer-main {
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr;
     gap: 55px;
     padding: 31px 0 20px;
     position: relative;
     z-index: 2
 }

 .footer .brand-name {
     color: #fff
 }

 .footer .brand-tagline {
     color: #fff
 }

 .footer-desc {
     color: #c6daf0;
     font-size: 13px;
     max-width: 315px;
     margin: 13px 0
 }

 .footer-social {
     display: flex;
     gap: 10px
 }

 .footer-social a {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: #12508d;
     display: grid;
     place-items: center;
     color: #fff;
     transition: .2s
 }

 .footer-social a:hover {
     background: #08bfd5;
     transform: translateY(-2px)
 }

 .footer-title {
     font-size: 14px;
     font-weight: 900;
     margin-bottom: 12px
 }

 .footer-title:after {
     content: "";
     display: block;
     width: 31px;
     height: 2px;
     background: #06bfd7;
     margin-top: 5px
 }

 .footer-links {
     display: flex;
     flex-direction: column;
     gap: 3px
 }

 .footer-links a,
 .footer-contact div {
     font-size: 13px;
     color: #e0edf9
 }

 .footer-links a:hover {
     color: #08c8d7
 }

 .footer-contact {
     display: flex;
     flex-direction: column;
     gap: 9px
 }

 .footer-contact div {
     display: flex;
     gap: 12px;
     align-items: center
 }

 .footer-contact i {
     width: 17px
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .28);
     padding: 10px 0;
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: #bdd2e8;
     position: relative;
     z-index: 2
 }

 .footer-bottom .accent {
     color: #08c7d7
 }

 /* MOBILE */
 .mobile-menu {
     display: none
 }

 @media(max-width:1050px) {
     .nav {
         gap: 15px
     }

     .nav a {
         font-size: 12px
     }

     .phone-btn {
         font-size: 12px;
         padding: 10px 13px
     }

     .service-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media(max-width:900px) {
     .site-header {
         height: 72px
     }

     .nav,
     .phone-btn {
         display: none
     }

     .menu-btn {
         display: block
     }

     .mobile-menu {
         position: absolute;
         left: 0;
         right: 0;
         top: 72px;
         background: #fff;
         border-top: 1px solid #e7f1f8;
         box-shadow: 0 15px 25px rgba(0, 0, 0, .08);
         padding: 14px 5%;
         display: none
     }

     .mobile-menu.open {
         display: block
     }

     .mobile-menu a {
         display: block;
         padding: 12px 0;
         color: var(--navy);
         font-weight: 700;
         border-bottom: 1px solid #eef5fa
     }

     .hero-inner {
         grid-template-columns: 1fr;
         text-align: center;
         padding-top: 35px
     }

     .hero-copy {
         margin-left: auto;
         margin-right: auto
     }

     .hero-points {
         justify-content: center
     }

     .hero-art {
         height: 280px
     }

     .device-laptop {
         right: 50%;
         transform: translateX(50%) perspective(700px) rotateY(-10deg) rotateX(4deg);
         width: 330px
     }

     .laptop-base {
         right: 50%;
         transform: translateX(50%) rotate(-2deg);
         width: 385px
     }

     .phone-device {
         right: calc(50% - 175px)
     }

     .success-note {
         right: 2%
     }

     .success-arrow {
         right: 4%
     }

     .website-table th,
     .website-table td {
         padding: 13px 15px
     }

     .footer-main {
         grid-template-columns: 1fr 1fr
     }

     .footer-brand {
         grid-column: 1/-1
     }
 }

 @media(max-width:650px) {
     .container {
         width: 92%
     }

     .brand-name {
         font-size: 19px
     }

     .brand-icon {
         width: 43px;
         height: 43px;
         font-size: 21px
     }

     .brand-tagline {
         font-size: 11px
     }

     .hero h1 {
         font-size: 38px
     }

     .hero-copy {
         font-size: 14px
     }

     .hero-points {
         align-items: center;
         gap: 9px
     }

     .hero-art {
         transform: scale(.78);
         margin: -25px 0 -35px
     }

     .listing {
         padding-top: 5px
     }

     .table-wrap {
         border-radius: 8px
     }

     .website-table {
         min-width: 700px
     }

     .table-scroll {
         overflow-x: auto
     }

     .website-table th {
         font-size: 13px
     }

     .website-table td {
         font-size: 13px
     }

     .services {
         padding-top: 30px
     }

     .section-heading h2 {
         font-size: 29px
     }

     .section-heading p {
         font-size: 14px
     }

     .service-grid {
         grid-template-columns: 1fr 1fr;
         gap: 10px
     }

     .service-card {
         min-height: 195px;
         padding: 15px 10px
     }

     .service-icon {
         width: 58px;
         height: 58px;
         font-size: 24px
     }

     .footer-main {
         grid-template-columns: 1fr;
         gap: 28px
     }

     .footer-brand {
         grid-column: auto
     }

     .footer-bottom {
         flex-direction: column;
         gap: 5px
     }
 }

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

     .hero-art {
         transform: scale(.68);
         margin: -45px 0 -60px
     }
 }


 /* contact Us css  */


 /* =========================================================
           GLOBAL
        ========================================================= */

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: "Nunito", sans-serif;
     color: #092c68;
     background: #ffffff;
     line-height: 1.6;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

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

 button,
 input,
 textarea,
 select {
     font-family: inherit;
 }

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

 :root {
     --primary: #1269ed;
     --secondary: #08c7d8;
     --dark: #062653;
     --text: #365d92;
     --light-blue: #effaff;
     --border: #d7eafa;
     --white: #ffffff;
     --success: #12bf8c;
 }


 /* =========================================================
           HEADER
        ========================================================= */

 header {
     height: 82px;
     background: #ffffff;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #eef5fb;
     position: sticky;
     top: 0;
     z-index: 1000;
 }

 .header-inner {
     width: min(1180px, 92%);
     margin: auto;

     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 25px;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 235px;
 }

 .logo-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;

     background: linear-gradient(135deg,
             #0967ed,
             #08c8d8);

     display: flex;
     align-items: center;
     justify-content: center;

     color: white;
     font-size: 25px;

     box-shadow: 0 7px 20px rgba(18, 105, 237, 0.2);
 }

 .logo-text {
     font-size: 23px;
     font-weight: 900;
     line-height: 1;
     color: #092d67;
 }

 .logo-text span {
     color: #08bfd5;
 }

 .logo-tagline {
     font-size: 13px;
     color: #092d67;
     font-weight: 700;
     margin-top: 2px;
 }

 nav {
     display: flex;
     align-items: center;
     gap: 27px;
 }

 nav a {
     font-size: 13px;
     font-weight: 600;
     color: #315a8f;
     position: relative;
     padding: 30px 0;
 }

 nav a:hover,
 nav a.active {
     color: var(--primary);
 }

 nav a.active::after {
     content: "";
     position: absolute;
     height: 3px;
     width: 30px;
     border-radius: 20px;
     background: linear-gradient(90deg,
             var(--primary),
             var(--secondary));

     left: 50%;
     bottom: 18px;
     transform: translateX(-50%);
 }

 .header-phone {
     display: flex;
     align-items: center;
     gap: 9px;

     color: white;
     background: linear-gradient(90deg,
             #1168ed,
             #0ac7d7);

     padding: 12px 19px;
     border-radius: 30px;

     font-weight: 800;
     font-size: 13px;

     box-shadow: 0 8px 22px rgba(16, 113, 231, .18);
 }

 .menu-btn {
     display: none;
     border: none;
     background: transparent;
     color: var(--dark);
     font-size: 24px;
     cursor: pointer;
 }


 /* =========================================================
           HERO
        ========================================================= */

 .hero {
     position: relative;
     overflow: hidden;

     background:
         radial-gradient(circle at 80% 45%,
             rgba(11, 199, 219, .12),
             transparent 30%),
         linear-gradient(180deg,
             #f3fbff 0%,
             #ffffff 100%);

     padding: 65px 0 45px;
 }

 .hero::before {
     content: "";
     position: absolute;
     width: 450px;
     height: 250px;

     border-radius: 50%;
     right: -120px;
     top: 50px;
     opacity: .7;
 }

 .hero-grid {
     position: relative;
     z-index: 2;

     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: 50px;
 }

 .eyebrow {
     font-size: 14px;
     color: #00a8d0;
     font-weight: 900;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     margin-bottom: 8px;
 }

 .hero h1 {
     color: #082b65;
     font-size: clamp(40px, 4.5vw, 57px);
     line-height: 1.02;
     font-weight: 900;
     margin-bottom: 20px;
 }

 .hero h1 span {
     color: #09bcd3;
 }

 .hero-text {
     color: #5274a2;
     font-size: 17px;
     max-width: 600px;
     margin-bottom: 25px;
 }

 .hero-points {
     display: flex;
     gap: 25px;
     flex-wrap: wrap;
     width: 700px;

 }

 .hero-point {
     display: flex;
     align-items: center;
     gap: 8px;

     color: #0a3778;
     font-size: 14px;
     font-weight: 700;
 }

 .hero-point i {
     width: 19px;
     height: 19px;
     border-radius: 50%;

     background: #09b9d2;
     color: white;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 10px;
 }

 .hero-graphic {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .hero-image {
     width: 100%;
     max-width: 600px;
     height: auto;
     display: block;
 }

 .hero-graphic {
     min-height: 300px;
     position: relative;

     display: flex;
     align-items: center;
     justify-content: center;
 }

 .envelope {
     width: 310px;
     height: 215px;

     background: linear-gradient(145deg,
             #096cf2,
             #0ac8d7);

     border-radius: 20px;

     position: relative;

     transform: rotate(-4deg);

     box-shadow:
         0 30px 50px rgba(15, 110, 225, .22);
 }

 .envelope::before {
     content: "";

     position: absolute;
     width: 215px;
     height: 215px;

     background: #ffffff;

     transform: rotate(45deg);
     left: 47px;
     top: -107px;

     border-radius: 20px;

     opacity: .95;
 }

 .envelope-content {
     position: absolute;
     z-index: 3;

     width: 170px;
     height: 105px;

     background: white;

     top: 48px;
     left: 70px;

     border-radius: 12px;

     padding: 18px;

     box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
 }

 .line {
     height: 8px;
     background: #d7ebfb;
     border-radius: 10px;
     margin-bottom: 11px;
 }

 .line:nth-child(2) {
     width: 75%;
 }

 .line:nth-child(3) {
     width: 55%;
 }

 .float-icon {
     position: absolute;

     width: 65px;
     height: 65px;

     border-radius: 18px;

     display: flex;
     align-items: center;
     justify-content: center;

     color: white;
     font-size: 28px;

     box-shadow: 0 15px 30px rgba(0, 0, 0, .12);
 }

 .phone-float {
     background: #086cf0;
     left: 30px;
     top: 35px;
     transform: rotate(-7deg);
 }

 .mail-float {
     background: white;
     color: #0870ef;
     right: 25px;
     top: 20px;
     transform: rotate(8deg);
 }

 .chat-float {
     background: #08c6d4;
     right: 20px;
     bottom: 20px;
 }

 .plane {
     position: absolute;
     right: -5px;
     top: -10px;
     color: #0674ed;
     font-size: 60px;
     transform: rotate(-15deg);
 }


 /* =========================================================
           CONTACT AREA
        ========================================================= */

 .contact-section {
     background: #ffffff;
     padding: 20px 0 65px;
 }

 .contact-grid {
     display: grid;
     grid-template-columns: .85fr 1.15fr;
     gap: 18px;
     align-items: stretch;
 }

 .contact-card,
 .form-card {
     background: #ffffff;

     border: 1px solid var(--border);

     border-radius: 13px;

     padding: 30px;

     box-shadow:
         0 15px 40px rgba(16, 105, 190, .05);
 }

 .section-label {
     color: #05a9d0;
     font-size: 13px;
     font-weight: 900;
     letter-spacing: 1px;
     text-transform: uppercase;
 }

 .contact-card h2,
 .form-card h2 {
     font-size: 32px;
     line-height: 1.1;
     color: #092e6b;
     margin: 5px 0 10px;
     font-weight: 900;
 }

 .card-description {
     color: #6281a8;
     font-size: 16px;
     margin-bottom: 24px;
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: 19px;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .contact-icon {
     flex-shrink: 0;

     width: 50px;
     height: 50px;

     border-radius: 50%;

     background: linear-gradient(145deg,
             #0870ef,
             #06b7dc);

     color: white;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 19px;
 }

 .contact-item small {
     display: block;
     color: #345c91;
     font-size: 13px;
     font-weight: 700;
 }

 .contact-item strong {
     color: #082e6d;
     font-size: 17px;
 }

 .social-area {
     margin-top: 25px;
     padding-top: 18px;
     border-top: 1px solid #dcebf6;
 }

 .social-title {
     font-weight: 800;
     color: #153c73;
     margin-bottom: 12px;
 }

 .social-icons {
     display: flex;
     gap: 10px;
 }

 .social-icons a {
     width: 39px;
     height: 39px;

     border-radius: 50%;

     background: #0753a7;
     color: white;

     display: flex;
     align-items: center;
     justify-content: center;

     transition: .25s;
 }

 .social-icons a:hover {
     background: #08bed2;
     transform: translateY(-3px);
 }


 /* =========================================================
           CONTACT CTA CARDS
        ========================================================= */

 .quick-actions {
     margin-top: 24px;
     display: grid;
     gap: 13px;
 }

 .quick-action {
     min-height: 90px;

     border-radius: 13px;

     padding: 15px;

     display: flex;
     align-items: center;
     gap: 14px;

     position: relative;
     overflow: hidden;
 }

 .call-action {
     background: linear-gradient(90deg,
             #e7f7ff,
             #eefbff);
 }

 .whatsapp-action {
     background: linear-gradient(90deg,
             #eafff9,
             #effffb);
 }

 .action-icon {
     width: 52px;
     height: 52px;
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 22px;
     color: white;
 }

 .call-action .action-icon {
     background: #1188ed;
 }

 .whatsapp-action .action-icon {
     background: #0abf8a;
 }

 .action-text small {
     display: block;

     font-size: 11px;
     color: #00a5c5;
     font-weight: 900;
 }

 .action-text strong {
     display: block;

     color: #092f6b;
     font-size: 21px;
     line-height: 1.1;
 }

 .action-text span {
     font-size: 12px;
     color: #6081a6;
 }

 .action-arrow {
     margin-left: auto;

     width: 42px;
     height: 42px;

     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     color: white;
 }

 .call-action .action-arrow {
     background: #1689ed;
 }

 .whatsapp-action .action-arrow {
     background: #0abb88;
 }


 /* =========================================================
           FORM
        ========================================================= */

 .form-intro {
     color: #6682a6;
     margin-bottom: 20px;
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .form-group {
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .form-group.full {
     grid-column: 1 / -1;
 }

 label {
     font-size: 13px;
     font-weight: 800;
     color: #092e6d;
 }

 label span {
     color: #ef4f4f;
 }

 .input-wrapper {
     position: relative;
 }

 .input-icon {
     position: absolute;

     left: 15px;
     top: 50%;

     transform: translateY(-50%);

     color: #527ca9;

     pointer-events: none;
 }

 input,
 select,
 textarea {
     width: 100%;

     border: 1px solid #cfe3f5;

     border-radius: 9px;

     outline: none;

     color: #183e73;

     background: white;

     transition: .25s;
 }

 input,
 select {
     height: 45px;
     padding: 0 15px 0 43px;
 }

 textarea {
     min-height: 110px;
     padding: 13px 15px 13px 43px;
     resize: vertical;
 }

 input::placeholder,
 textarea::placeholder {
     color: #91a9c3;
 }

 input:focus,
 select:focus,
 textarea:focus {
     border-color: #0b91ed;

     box-shadow:
         0 0 0 3px rgba(11, 145, 237, .08);
 }

 select {
     appearance: none;

     background-image:
         linear-gradient(45deg, transparent 50%, #436c98 50%),
         linear-gradient(135deg, #436c98 50%, transparent 50%);

     background-position:
         calc(100% - 17px) 19px,
         calc(100% - 12px) 19px;

     background-size: 5px 5px, 5px 5px;

     background-repeat: no-repeat;
 }

 .submit-btn {
     width: 100%;

     border: none;

     height: 55px;

     border-radius: 30px;

     background: linear-gradient(90deg,
             #086df2,
             #0bc9d7);

     color: white;

     font-size: 17px;
     font-weight: 900;

     cursor: pointer;

     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;

     margin-top: 20px;

     box-shadow:
         0 12px 25px rgba(8, 109, 242, .18);

     transition: .25s;
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow:
         0 17px 30px rgba(8, 109, 242, .25);
 }

 .privacy-note {
     text-align: center;
     margin-top: 14px;

     font-size: 12px;
     color: #7891ad;
 }

 .privacy-note i {
     color: #213d60;
     margin-right: 5px;
 }


 /* =========================================================
           BOTTOM CTA
        ========================================================= */

 .bottom-cta {
     padding: 0 0 65px;
 }

 .cta-box {
     background:
         linear-gradient(100deg,
             #edfaff,
             #f3fbff);

     border-radius: 15px;

     padding: 28px 35px;

     display: flex;
     align-items: center;
     justify-content: space-between;

     gap: 30px;
 }

 .cta-content {
     display: flex;
     align-items: center;
     gap: 18px;
 }

 .cta-icon {
     flex-shrink: 0;

     width: 65px;
     height: 65px;

     border-radius: 50%;

     background: #dcefff;

     color: #0873ef;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 28px;
 }

 .cta-small {
     color: #00aac8;
     font-size: 12px;
     font-weight: 900;
     letter-spacing: 1px;
 }

 .cta-box h3 {
     font-size: 30px;
     color: #082e6a;
     line-height: 1.1;
     margin: 3px 0;
 }

 .cta-box p {
     color: #5e7da3;
 }

 .cta-button {
     flex-shrink: 0;

     padding: 14px 28px;

     border-radius: 30px;

     color: white;

     background:
         linear-gradient(90deg,
             #0a6ff2,
             #0bc8d6);

     font-weight: 900;

     transition: .25s;
 }

 .cta-button:hover {
     transform: translateY(-2px);
 }


 /* =========================================================
           FOOTER
        ========================================================= */

 footer {
     background: #032858;
     color: white;
     position: relative;
     overflow: hidden;
 }


 .footer-main {
     padding: 40px 0 20px;

     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr 1fr;

     gap: 18px;
 }

 .footer-logo .logo-text {
     color: white;
 }

 .footer-logo .logo-tagline {
     color: white;
 }

 .footer-description {
     max-width: 330px;

     margin: 15px 0;

     color: #c4dbf2;

     font-size: 14px;
 }

 .footer-title {
     font-size: 15px;
     font-weight: 900;

     margin-bottom: 14px;

     position: relative;
 }

 .footer-title::after {
     content: "";

     display: block;

     width: 32px;
     height: 2px;

     background: #06c2d7;

     margin-top: 6px;
 }

 .footer-links {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .footer-links a {
     font-size: 13px;
     color: #d3e3f3;
     transition: .2s;
 }

 .footer-links a:hover {
     color: #0dd0df;
     padding-left: 4px;
 }

 .footer-contact {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .footer-contact div {
     display: flex;
     align-items: center;
     gap: 12px;

     color: #d4e5f5;

     font-size: 13px;
 }

 .footer-contact i {
     width: 18px;
     color: white;
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .25);

     padding: 12px 0;

     display: flex;
     justify-content: space-between;

     color: #a9c5df;
     font-size: 12px;
 }

 .footer-bottom span {
     color: #05c4d8;
 }


 /* =========================================================
           FORM SUCCESS
        ========================================================= */

 .success-message {
     display: none;

     background: #e8fff7;
     border: 1px solid #a8ead5;

     color: #087d61;

     padding: 12px 15px;

     border-radius: 8px;

     margin-top: 15px;

     font-size: 14px;
     font-weight: 700;
 }


 /* =========================================================
           RESPONSIVE
        ========================================================= */

 @media (max-width: 1100px) {

     nav {
         gap: 15px;
     }

     nav a {
         font-size: 12px;
     }

     .header-phone {
         padding: 10px 14px;
     }
 }


 @media (max-width: 900px) {

     header {
         height: 72px;
     }

     nav,
     .header-phone {
         display: none;
     }

     .menu-btn {
         display: block;
     }

     .hero-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .hero-text {
         margin-left: auto;
         margin-right: auto;
     }

     .hero-points {
         justify-content: center;
     }

     .hero-graphic {
         min-height: 260px;
     }

     .contact-grid {
         grid-template-columns: 1fr;
     }

     .footer-main {
         grid-template-columns: 1fr 1fr;
     }

     .footer-brand {
         grid-column: 1 / -1;
     }
 }


 @media (max-width: 650px) {

     .hero {
         padding: 40px 0 15px;
     }

     .hero h1 {
         font-size: 38px;
     }

     .hero-text {
         font-size: 15px;
     }

     .hero-points {
         gap: 12px;
         width: fit-content;
         align-items: center;
     }

     .hero-graphic {
         transform: scale(.8);
         margin-top: -20px;
         margin-bottom: -20px;
     }

     .contact-card,
     .form-card {
         padding: 22px;
     }

     .contact-card h2,
     .form-card h2 {
         font-size: 27px;
     }

     .form-grid {
         grid-template-columns: 1fr;
     }

     .form-group.full {
         grid-column: auto;
     }

     .cta-box {
         flex-direction: column;
         align-items: flex-start;
         padding: 25px;
     }

     .cta-box h3 {
         font-size: 25px;
     }

     .cta-button {
         width: 100%;
         text-align: center;
     }

     .footer-main {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .footer-brand {
         grid-column: auto;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 7px;
     }

     .logo-text {
         font-size: 20px;
     }
 }

 @media screen and (max-width: 767px) {
     .hero-graphic {
         width: 100vw;
         max-width: 100vw;
         min-height: 0 !important;
         height: auto !important;
         padding: 0 !important;
         margin-left: calc(50% - 50vw) !important;
         margin-right: calc(50% - 50vw) !important;


         display: block;
     }

     .hero-image {
         display: block;
         width: 100% !important;
         max-width: none !important;
         height: auto !important;
         margin: 0 !important;
         padding: 0 !important;
         object-fit: contain;
     }

     .contact-section {
         background: #ffffff;
         padding: 20px 0 0px;
     }
 }


 /* Tokens: change to match the main site's colours / fonts */
 .pm-page {
     --primary: #1e3a8a;
     --accent: #f97316;
     --dark: #0f172a;
     --text: #475569;
     --light: #f1f5f9;
     --border: #e2e8f0;
     --radius: 10px;
     --font: 'Segoe UI', Roboto, Arial, sans-serif;
     --img-size: 80px;
 }

 .pm-page,
 .pm-page *,
 .pm-page *::before,
 .pm-page *::after {
     box-sizing: border-box;
 }

 .pm-page {
     font-family: var(--font);
     color: var(--text);
     line-height: 1.6;
 }

 .pm-container {
     width: min(1200px, 100% - 0px);
     margin-inline: auto;
 }

 .pm-section {
     padding: 0px 5px 0px;
 }

 .pm-title {
     margin: 0 0 28px;
     text-align: center;
     font-size: clamp(26px, 4vw, 38px);
     color: var(--dark);
 }



 /* Hero */
 html:has(.pm-page) {
     scroll-behavior: smooth;
 }

 .pm-hero {
     position: relative;
     overflow: hidden;
     text-align: center;
     color: #fff;
     background: linear-gradient(135deg, #0b1b45 0%, var(--primary) 55%, #2c4fa8 100%);
 }

 .pm-hero::before,
 .pm-hero::after {
     content: "";
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
 }

 .pm-hero::before {
     width: 460px;
     height: 460px;
     top: -200px;
     left: -140px;
     background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
 }

 .pm-hero::after {
     width: 420px;
     height: 420px;
     bottom: -180px;
     right: -100px;
     background: radial-gradient(circle, rgba(249, 115, 22, .35), transparent 70%);
 }

 .pm-hero-inner {
     position: relative;
     z-index: 1;
     max-width: 860px;
     margin: 0 auto;
     padding: 15px 20px 110px;
 }

 .pm-hero-wave {
     position: absolute;
     left: 0;
     bottom: -1px;
     width: 100%;
     height: 60px;
     z-index: 1;
     display: block;
 }

 .pm-breadcrumb {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     color: #c7d4f2;
 }

 .pm-breadcrumb a {
     color: #fff;
     font-weight: 600;
 }

 .pm-breadcrumb a:hover {
     color: #fdba74;
 }

 .pm-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 16px;
     margin-bottom: 18px;
     border: 1px solid rgba(255, 255, 255, .28);
     border-radius: 999px;
     background: rgba(255, 255, 255, .1);
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
 }

 .pm-eyebrow::before {
     content: "";
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 0 4px rgba(249, 115, 22, .3);
 }

 .pm-title {
     margin: 0 0 14px;
     font-size: clamp(34px, 6vw, 60px);
     font-weight: 800;
     line-height: 1.12;
     letter-spacing: -.5px;
     color: #fff;
 }

 .pm-title span {
     background: linear-gradient(90deg, #fdba74, var(--accent));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     color: #fdba74;
 }

 .pm-subtitle {
     max-width: 600px;
     margin: 0 auto 30px;
     font-size: clamp(16px, 2.2vw, 19px);
     color: #dbe5fb;
 }

 .pm-hero-actions {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 14px;
     margin-bottom: 34px;
 }

 .pm-hero-btn {
     display: inline-block;
     padding: 14px 30px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 16px;
     border: 2px solid transparent;
     transition: transform .2s, background .2s, color .2s;
 }

 .pm-hero-btn:hover {
     transform: translateY(-2px);
 }

 .pm-hero-btn-primary {
     background: var(--accent);
     color: #fff;
     box-shadow: 0 8px 20px rgba(249, 115, 22, .35);
 }

 .pm-hero-btn-primary:hover {
     background: #ea580c;
 }

 .pm-hero-btn-ghost {
     border-color: rgba(255, 255, 255, .7);
     color: #fff;
 }

 .pm-hero-btn-ghost:hover {
     background: #fff;
     color: var(--primary);
 }

 .pm-hero-btn:focus-visible {
     outline: 3px solid #fdba74;
     outline-offset: 3px;
 }

 .pm-hero-tags {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 10px;
     margin: 0;
     padding: 0;
     list-style: none;
 }

 .pm-hero-tags li {
     padding: 6px 16px;
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: 999px;
     background: rgba(255, 255, 255, .08);
     font-size: 14px;
     font-weight: 600;
     color: #e6edfc;
 }

 @media (prefers-reduced-motion: no-preference) {
     .pm-hero-inner>* {
         animation: pm-rise .6s ease both;
     }

     .pm-hero-inner> :nth-child(2) {
         animation-delay: .08s;
     }

     .pm-hero-inner> :nth-child(3) {
         animation-delay: .16s;
     }

     .pm-hero-inner> :nth-child(4) {
         animation-delay: .24s;
     }

     .pm-hero-inner> :nth-child(5) {
         animation-delay: .32s;
     }

     .pm-hero-inner> :nth-child(6) {
         animation-delay: .4s;
     }
 }

 @keyframes pm-rise {
     from {
         opacity: 0;
         transform: translateY(14px);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }



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

     .pm-table th,
     .pm-table td {
         padding: 14px 12px;
         font-size: 13px;
     }

     .pm-table th:nth-child(1),
     .pm-table td:nth-child(1),
     .pm-table th:nth-child(3),
     .pm-table td:nth-child(3) {
         width: 9%;
     }

     .pm-table th:nth-child(2),
     .pm-table td:nth-child(2),
     .pm-table th:nth-child(4),
     .pm-table td:nth-child(4) {
         width: 41%;
     }
 }

 /* ---------- Mobile (767px and below): table hidden, one website per card ---------- */
 @media (max-width: 767px) {


     .pm-page {
         --img-size: 60px;
     }

     .pm-table-wrap {
         display: none;
     }

     .pm-cards {
         display: block;
     }

     /* header bar: SNO | WEBSITE LINK */
     .pm-cards-head {
         display: grid;
         grid-template-columns: 38px minmax(0, 1fr);
         align-items: center;
         gap: 12px;
         margin-bottom: 12px;
         padding: 14px 17px;
         border-radius: 14px;
         background: var(--primary);
         background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 100%);
         color: #fff;
         font-size: 12px;
         font-weight: 700;
         letter-spacing: .8px;
         text-transform: uppercase;
     }

     .pm-cards-head span:first-child {
         text-align: center;
     }

     .pm-card-list {
         list-style: none;
         margin: 0;
         padding: 0;
     }

     /* one card = one website */
     .pm-card {
         display: grid;
         grid-template-columns: 38px minmax(0, 1fr);
         align-items: center;
         gap: 12px;
         margin-bottom: 12px;
         padding: 14px 16px;
         background: #fff;
         border: 1px solid var(--border);
         border-radius: 14px;
         box-shadow: 0 3px 10px rgba(20, 45, 110, .06);
     }

     .pm-badge {
         width: 38px;
         height: 38px;
         border-radius: 50%;
         background: #e8f0fe;
         color: var(--primary);
         font-size: 14px;
         font-weight: 700;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .pm-card .pm-link {
         font-size: 14px;
         overflow-wrap: anywhere;
         word-break: break-all;
     }

     .pm-info {
         font-size: 13px;
     }

     .pm-pagination {
         gap: 6px;
     }

     .pm-page-btn {
         min-width: 38px;
         padding: 8px 11px;
         font-size: 14px;
     }
 }

 /* ---------- Small phones (480px and below) ---------- */
 @media (max-width: 480px) {
     .pm-cards-head {
         grid-template-columns: 34px minmax(0, 1fr);
         gap: 10px;
         padding: 12px 15px;
     }

     .pm-card {
         grid-template-columns: 34px minmax(0, 1fr);
         gap: 10px;
         padding: 12px 14px;
     }

     .pm-badge {
         width: 34px;
         height: 34px;
         font-size: 13px;
     }

     .pm-card .pm-link {
         font-size: 13px;
     }

     /* keep only Prev / Next + current page on very small screens */
     .pm-page-btn:not(.pm-current):not(:first-child):not(:last-child) {
         display: none;
     }
 }

 /* ---------- Directory button (unchanged) ---------- */
 .pm-dir-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 18px;
     padding: 12px 20px;
     background: linear-gradient(90deg, #0a6cff 0%, #00c2e0 100%);
     color: #fff;
     font-weight: 700;
     font-size: 15px;
     text-decoration: none;
     border-radius: 999px;
     box-shadow: 0 6px 16px rgba(10, 108, 255, .35);
     transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
 }

 .pm-dir-btn:hover {
     filter: brightness(1.08);
     transform: translateY(-2px);
     box-shadow: 0 10px 22px rgba(10, 108, 255, .45);
 }

 .pm-dir-btn:focus-visible {
     outline: 2px solid #fff;
     outline-offset: 3px;
 }

 @media (max-width: 480px) {
     .pm-dir-btn {
         width: 100%;
         justify-content: center;
     }
 }


 #scrollTopBtn {
     position: fixed;
     right: 20px;
     bottom: 20px;
     width: 46px;
     height: 46px;
     border: none;
     border-radius: 50%;
     font-family: inherit;
     /* uses your site's font */
     background: linear-gradient(90deg, #0a6cff 0%, #00c2e0 100%);
     /* paste your brand color here */
     color: #fff;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 20px rgba(9, 107, 240, .18);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: opacity .3s, transform .3s, visibility .3s, filter .2s;
     z-index: 9999;
 }

 #scrollTopBtn.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 #scrollTopBtn:hover {
     filter: brightness(.85);
 }


 /* =========================================
   HOMEPAGE ENQUIRY FORM
========================================= */

 .home-enquiry-section {
     width: 100%;
     padding: 40px 20px;
     box-sizing: border-box;
     background: linear-gradient(180deg,
             #f7faff 0%,
             #ffffff 100%);
     font-family: 'Nunito', sans-serif;
 }

 .home-enquiry-section *,
 .home-enquiry-section *::before,
 .home-enquiry-section *::after {
     box-sizing: border-box;
 }

 .home-enquiry-section .form-card {
     width: 100%;
     max-width: 1150px;
     margin: 0 auto;
     padding: 30px 32px 32px;
     background: #ffffff;
     border: 1px solid #d5e7ff;
     border-radius: 21px;
     box-shadow: 0 12px 35px rgba(9, 44, 104, 0.035);
 }

 /* Heading */

 .home-enquiry-section .section-label {
     margin: 0 0 8px;
     color: #08a9d1;
     font-size: 13px;
     font-weight: 900;
     letter-spacing: 1.5px;
     text-transform: uppercase;
 }

 .home-enquiry-section .form-card h2 {
     margin: 0 0 12px;
     color: #092c68;
     font-family: 'Comfortaa', sans-serif;
     font-size: 29px;
     font-weight: 700;
     line-height: 1.35;
 }

 .home-enquiry-section .form-intro {
     max-width: 650px;
     margin: 0 0 26px;
     color: #6985b0;
     font-size: 15px;
     line-height: 1.8;
 }

 /* Form grid */

 .home-enquiry-section .form-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 19px 16px;
     align-items: start;
 }

 .home-enquiry-section .form-group {
     min-width: 0;
 }

 .home-enquiry-section .form-group label {
     display: block;
     margin: 0 0 8px;
     color: #092c68;
     font-size: 12px;
     font-weight: 900;
     line-height: 1.4;
 }

 .home-enquiry-section .form-group label span {
     color: #ef4444;
 }

 /* Input fields */

 .home-enquiry-section .input-wrapper {
     position: relative;
     width: 100%;
 }

 .home-enquiry-section .input-icon {
     position: absolute;
     z-index: 1;
     top: 50%;
     left: 14px;
     transform: translateY(-50%);
     color: #4f80b5;
     font-size: 14px;
     pointer-events: none;
 }

 .home-enquiry-section .input-wrapper input,
 .home-enquiry-section .input-wrapper select,
 .home-enquiry-section .input-wrapper textarea {
     display: block;
     width: 100%;
     min-width: 0;
     height: 45px;
     margin: 0;
     padding: 0 14px 0 44px;
     color: #092c68;
     background-color: #ffffff;
     border: 1px solid #c9dfff;
     border-radius: 15px;
     outline: none;
     box-shadow: none;
     font-family: 'Nunito', sans-serif;
     font-size: 14px;
     font-weight: 500;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

 .home-enquiry-section .input-wrapper input::placeholder,
 .home-enquiry-section .input-wrapper textarea::placeholder {
     color: #8ba1c2;
     opacity: 1;
 }

 .home-enquiry-section .input-wrapper input:focus,
 .home-enquiry-section .input-wrapper select:focus,
 .home-enquiry-section .input-wrapper textarea:focus {
     border-color: #08a9d1;
     box-shadow: 0 0 0 3px rgba(8, 199, 216, 0.10);
 }

 .home-enquiry-section .input-wrapper select {
     padding-right: 30px;
     cursor: pointer;
 }

 .home-enquiry-section .input-wrapper select:invalid {
     color: #092c68;
 }

 /* Message field */

 .home-enquiry-section .message-group {
     grid-column: 2 / 4;
     grid-row: 2 / span 2;
 }

 .home-enquiry-section .textarea-wrapper {
     min-height: 134px;
 }

 .home-enquiry-section .textarea-wrapper .input-icon {
     top: 60px;
     transform: none;
 }

 .home-enquiry-section .input-wrapper textarea {
     min-height: 134px;
     height: 134px;
     padding: 13px 14px 13px 44px;
     line-height: 1.6;
     resize: vertical;
 }

 /* Submit button */

 .home-enquiry-section .submit-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     width: 100%;
     min-height: 55px;
     margin: 20px 0 0;
     padding: 14px 22px;
     border: none;
     border-radius: 35px;
     background: linear-gradient(100deg, #0868f5 0%, #08c7d8 100%);
     color: #ffffff;
     font-family: 'Nunito', sans-serif;
     font-size: 16px;
     font-weight: 900;
     cursor: pointer;
     box-shadow: 0 12px 23px rgba(8, 116, 235, 0.20);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .home-enquiry-section .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 15px 28px rgba(8, 116, 235, 0.27);
 }

 .home-enquiry-section .submit-btn:focus-visible {
     outline: 3px solid rgba(8, 199, 216, 0.4);
     outline-offset: 4px;
 }

 .home-enquiry-section .submit-btn:disabled {
     opacity: 0.7;
     cursor: wait;
     transform: none;
 }

 /* Privacy note */

 .home-enquiry-section .privacy-note {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin: 15px 0 0;
     color: #7890b5;
     font-size: 11px;
     line-height: 1.6;
     text-align: center;
 }

 .home-enquiry-section .privacy-note i {
     color: #092c68;
     font-size: 12px;
 }

 /* Success message */

 .home-enquiry-section .success-message {
     margin-top: 18px;
     padding: 13px 15px;
     color: #166534;
     background: #f0fdf4;
     border: 1px solid #bbf7d0;
     border-radius: 12px;
     font-size: 14px;
     line-height: 1.6;
 }

 .home-enquiry-section .success-message[hidden] {
     display: none;
 }

 .home-enquiry-section .success-message i {
     margin-right: 5px;
 }

 /* =========================================
   TABLET
========================================= */

 @media screen and (max-width: 900px) {
     .home-enquiry-section {
         padding: 45px 20px;
     }

     .home-enquiry-section .form-card {
         padding: 28px 25px;
     }

     .home-enquiry-section .form-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .home-enquiry-section .message-group {
         grid-column: 1 / -1;
         grid-row: auto;
     }
 }

 /* =========================================
   MOBILE
========================================= */

 @media screen and (max-width: 600px) {
     .home-enquiry-section {
         padding: 15px 12px;
     }

     .home-enquiry-section .form-card {
         padding: 23px 17px;
         border-radius: 17px;
     }

     .home-enquiry-section .section-label {
         font-size: 11px;
         letter-spacing: 1.2px;
     }

     .home-enquiry-section .form-card h2 {
         font-size: 23px;
         line-height: 1.4;
     }

     .home-enquiry-section .form-intro {
         margin-bottom: 23px;
         font-size: 14px;
         line-height: 1.7;
     }

     .home-enquiry-section .form-grid {
         grid-template-columns: minmax(0, 1fr);
         gap: 17px;
     }

     .home-enquiry-section .message-group {
         grid-column: auto;
         grid-row: auto;
     }

     .home-enquiry-section .form-group label {
         font-size: 12px;
     }

     .home-enquiry-section .input-wrapper input,
     .home-enquiry-section .input-wrapper select {
         height: 47px;
         font-size: 14px;
     }

     .home-enquiry-section .input-wrapper textarea {
         height: 130px;
         min-height: 130px;
         font-size: 14px;
     }

     .home-enquiry-section .submit-btn {
         min-height: 52px;
         margin-top: 22px;
         font-size: 15px;
     }

     .home-enquiry-section .privacy-note {
         align-items: flex-start;
         font-size: 10px;
     }
 }

 /* logo css */
 .header-logo {
     display: block;
     width: 220px;
     max-width: 100%;
     height: auto;
     object-fit: contain;
 }

 /* Mobile header logo */
 @media (max-width: 768px) {
     .header-logo {
         width: 170px;
     }
 }


 .footer-logo {
     max-width: 150px;
     width: 100%;
     height: auto;
     display: block;
 }
 
 @media (max-width: 768px) {
    .footer-logo {
        max-width: 100px;
        width: 100%;
        height: auto;
        display: block;
    }
}



 /* privacy-policy css */

 .policy-page {
     --policy-accent: #2f4f9a;
     /* change to your site's main colour */
     --policy-border: #dfe5f2;
     --policy-bg: #ffffff;
     font-family: inherit;
     color: inherit;
     padding: 40px 16px;
 }

 .policy-page .policy-container {
     max-width: 900px;
     margin: 0 auto;
     background: var(--policy-bg);
     border: 1px solid var(--policy-border);
     border-radius: 8px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
     overflow: hidden;
 }

 .policy-page .policy-header {
     background: var(--policy-accent);
     color: #fff;
     padding: 28px 32px;
 }

 .policy-page .policy-header h1 {
     margin: 0 0 8px;
     font-family: inherit;
     font-size: 30px;
     color: #fff;
 }

 .policy-page .policy-header p {
     margin: 2px 0;
     font-size: 14px;
     opacity: .9;
     color: #fff;
 }

 .policy-page .policy-header a {
     color: #fff;
     text-decoration: underline;
 }

 .policy-page .policy-body {
     padding: 32px;
     line-height: 1.7;
     font-size: 16px;
 }

 .policy-page h2 {
     font-family: inherit;
     font-size: 22px;
     color: var(--policy-accent);
     margin: 32px 0 12px;
     padding-bottom: 8px;
     border-bottom: 2px solid var(--policy-border);
 }

 .policy-page h2:first-child {
     margin-top: 0;
 }

 .policy-page h3 {
     font-family: inherit;
     font-size: 18px;
     color: var(--policy-accent);
     margin: 24px 0 8px;
 }

 .policy-page p {
     margin: 0 0 14px;
 }

 .policy-page ul {
     margin: 0 0 16px;
     padding-left: 22px;
 }

 .policy-page li {
     margin-bottom: 6px;
 }

 .policy-page .policy-note {
     background: #eaf0fb;
     border-left: 4px solid var(--policy-accent);
     padding: 12px 16px;
     border-radius: 4px;
     margin: 16px 0;
 }

 .policy-page a {
     color: var(--policy-accent);
 }

 @media (max-width: 600px) {
     .policy-page .policy-header {
         padding: 22px 18px;
     }

     .policy-page .policy-header h1 {
         font-size: 24px;
     }

     .policy-page .policy-body {
         padding: 22px 18px;
         font-size: 15px;
     }
 }



 /* teems & conditions */

 .policy-page {
     --policy-accent: #2f4f9a;
     /* change to your site's main colour */
     --policy-border: #dfe5f2;
     --policy-bg: #ffffff;
     font-family: inherit;
     color: inherit;
     padding: 40px 16px;
 }

 .policy-page .policy-container {
     max-width: 900px;
     margin: 0 auto;
     background: var(--policy-bg);
     border: 1px solid var(--policy-border);
     border-radius: 8px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
     overflow: hidden;
 }

 .policy-page .policy-header {
     background: var(--policy-accent);
     color: #fff;
     padding: 28px 32px;
 }

 .policy-page .policy-header h1 {
     margin: 0 0 8px;
     font-family: inherit;
     font-size: 30px;
     color: #fff;
 }

 .policy-page .policy-header p {
     margin: 2px 0;
     font-size: 14px;
     opacity: .9;
     color: #fff;
 }

 .policy-page .policy-header a {
     color: #fff;
     text-decoration: underline;
 }

 .policy-page .policy-body {
     padding: 32px;
     line-height: 1.7;
     font-size: 16px;
 }

 .policy-page h2 {
     font-family: inherit;
     font-size: 22px;
     color: var(--policy-accent);
     margin: 32px 0 12px;
     padding-bottom: 8px;
     border-bottom: 2px solid var(--policy-border);
 }

 .policy-page h2:first-child {
     margin-top: 0;
 }

 .policy-page h3 {
     font-family: inherit;
     font-size: 18px;
     color: var(--policy-accent);
     margin: 24px 0 8px;
 }

 .policy-page p {
     margin: 0 0 14px;
 }

 .policy-page ul {
     margin: 0 0 16px;
     padding-left: 22px;
 }

 .policy-page li {
     margin-bottom: 6px;
 }

 .policy-page .policy-note {
     background: #eaf0fb;
     border-left: 4px solid var(--policy-accent);
     padding: 12px 16px;
     border-radius: 4px;
     margin: 16px 0;
 }

 .policy-page a {
     color: var(--policy-accent);
 }

 @media (max-width: 600px) {
     .policy-page .policy-header {
         padding: 22px 18px;
     }

     .policy-page .policy-header h1 {
         font-size: 24px;
     }

     .policy-page .policy-body {
         padding: 22px 18px;
         font-size: 15px;
     }
 }


 .section-heading {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 32px;
    padding: 0 16px;
}
.section-heading h2 {
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    color: #2f4f9a;            /* change to your site's main colour */
    margin: 0 0 12px;
    position: relative;
    padding-bottom: 14px;
}


@media (max-width: 600px) {
    .section-heading h2 { font-size: 24px; }
}



/* WebsitesForSale.in Card */
.website-card {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    overflow: hidden;
    border: 1px solid #e0e6ef;
    border-radius: 12px;
    background: #ffffff;
    box-sizing: border-box;
}

.website-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 230;
    object-fit: cover;
}

.website-card-content {
    padding: 20px;
}

.website-card h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.website-card h2 a {
    color: #173d86;
    text-decoration: none;
}

.website-card-subtitle {
    font-weight: 600;
    color: #253b60;
}

.website-card-content p {
    line-height: 1.6;
}

.website-card-button {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 6px;
    background: #1748a0;
    color: #ffffff;
    text-decoration: none;
}

.website-card-button:hover {
    background: #0d347b;
}

.website-card-phone a {
    color: #1748a0;
}

@media (max-width: 767px) {
    .website-card-content {
        padding: 16px;
    }
}


/* FAQ packers & movers  Pages for css */


.pm-faq {
    --faq-accent: #2f4f9a;          
    --faq-border: #dfe5f2;
    max-width: 1200px;
    margin: 48px auto 50px;
    padding: 0 16px;
    font-family: inherit;
}
.pm-faq-title {
    font-family: inherit;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: var(--faq-accent);
    margin: 0 0 28px;
}
.pm-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.pm-faq-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pm-faq-item {
    background: #fff;
    border: 1px solid var(--faq-border);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    overflow: hidden;
}
.pm-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 48px 16px 18px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    position: relative;
}
.pm-faq-item summary::-webkit-details-marker { display: none; }
.pm-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 700;
    color: var(--faq-accent);
}
.pm-faq-item[open] summary {
    background: #eaf0fb;
    color: var(--faq-accent);
}
.pm-faq-item[open] summary::after { content: "\2212"; }
.pm-faq-item p {
    margin: 0;
    padding: 14px 18px 18px;
    line-height: 1.7;
    font-size: 15px;
    border-top: 1px solid var(--faq-border);
}
@media (max-width: 768px) {
    .pm-faq-grid { grid-template-columns: 1fr; }
    .pm-faq-title { font-size: 22px; }
}

/* FAQ Section page css  */

.home-faq {
    --faq-accent: #2f4f9a;        
    --faq-border: #dfe5f2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 16px;
    font-family: inherit;
}
.home-faq-title {
    font-family: inherit;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    color: var(--faq-accent);
    margin: 0 0 32px;
}
.home-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.home-faq-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.home-faq-item {
    background: #fff;
    border: 1px solid var(--faq-border);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    overflow: hidden;
}
.home-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 48px 16px 18px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    position: relative;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 700;
    color: var(--faq-accent);
}
.home-faq-item[open] summary {
    background: #eaf0fb;
    color: var(--faq-accent);
}
.home-faq-item[open] summary::after { content: "\2212"; }
.home-faq-item p {
    margin: 0;
    padding: 14px 18px 18px;
    line-height: 1.7;
    font-size: 15px;
    border-top: 1px solid var(--faq-border);
}
@media (max-width: 768px) {
    .home-faq { padding: 40px 16px; }
    .home-faq-grid { grid-template-columns: 1fr; }
    .home-faq-title { font-size: 22px; }
}

.home-faq-item summary {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* show the full question when the answer is open */
.home-faq-item[open] summary {
    white-space: normal;
}

/* let grid columns and boxes shrink so the ellipsis works */
.home-faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.home-faq-col,
.home-faq-item { min-width: 0; }

@media (max-width: 768px) {
    .home-faq-grid { grid-template-columns: minmax(0, 1fr); }

    .home-faq-item summary {
        font-size: 15px;
        padding: 14px 44px 14px 14px;
    }
    .home-faq-item summary::after { right: 14px; }
}








/* ===== Testimonials Section ===== */

.testimonials-section {
    padding: 70px 20px;
    background: #f7f9fc;
    width: 100%;
    box-sizing: border-box;
}

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

.testimonials-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.testimonials-tag {
    display: inline-block;
    color: #08a9d1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.testimonials-heading h2 {
    font-size: 34px;
    line-height: 1.3;
    color: #2f4f9a;
    margin: 0 0 15px;
}

.testimonials-heading p {
    color: #365d92;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.testimonial-card {
    background: #ffffff;
    padding: 28px;
    border: 1px solid #e7ebf1;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
    box-sizing: border-box;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.quote-icon {
    font-size: 48px;
    line-height: 1;
    font-family: Georgia, serif;
    color: #007bff;
    margin-bottom: 12px;
}

.testimonial-text {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 24px;
}

.testimonial-user {
    display: flex;
    align-items: center;
    gap: 13px;
    border-top: 1px solid #edf0f4;
    padding-top: 18px;
}

.testimonial-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background: #e8f2ff;
    color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    font-weight: 700;
}

.testimonial-user h3 {
    color: #172033;
    font-size: 15px;
    margin: 0 0 5px;
}

.testimonial-user span {
    display: block;
    color: #737b89;
    font-size: 13px;
    line-height: 1.5;
}

/* Tablet */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .testimonials-heading h2 {
        font-size: 30px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .testimonials-section {
        padding: 45px 16px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .testimonials-heading {
        margin-bottom: 28px;
    }

    .testimonials-heading h2 {
        font-size: 26px;
    }

    .testimonials-heading p {
        font-size: 15px;
    }

    .testimonial-card {
        padding: 23px;
    }
}

.testimonial-avatar {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #e8f2ff;
}

/* our teams css */

.team {
    --team-accent: #2f4f9a;          
    --team-border: #dfe5f2;
    padding: 64px 16px;
    font-family: inherit;
}
.team-container { max-width: 1200px; margin: 0 auto; }

.team-heading { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.team-eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    padding: 6px 16px;
    border-radius: 999px;
    color: #00a8d0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.team-heading h2 {
    font-family: inherit;
    font-size: 32px;
    font-weight: 800;
    color: var(--team-accent);
    margin: 0 0 12px;
}
.team-intro { margin: 0; line-height: 1.7; opacity: .8; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.team-card {
    background: #fff;
    border: 1px solid var(--team-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(47, 79, 154, .18);
}
.team-photo { aspect-ratio: 1 / 1; overflow: hidden; background: #eaf0fb; }
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.team-card:hover .team-photo img { transform: scale(1.05); }

.team-info { padding: 20px 18px 22px; }
.team-info h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.team-role { margin: 0 0 10px; color: var(--team-accent); font-weight: 700; font-size: 14px; }
.team-bio { margin: 0 0 16px; font-size: 14px; line-height: 1.6; opacity: .75; }

.team-social { display: flex; justify-content: center; gap: 10px; }
.team-social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf0fb;
    color: var(--team-accent);
    font-size: 15px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.team-social a:hover { background: var(--team-accent); color: #fff; }

@media (max-width: 1024px) {
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .team { padding: 44px 16px; }
    .team-heading h2 { font-size: 24px; }
    .team-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}


 /* remove the black dropdown menu from the menu */
 .nav ul,
 .nav li {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 /* Solutions item with arrow on the right */
 .nav .has-dropdown {
     position: relative;
 }

 .nav .has-dropdown>a {
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .nav .has-dropdown>a::after {
     content: "";
     width: 6px;
     height: 6px;
     border-right: 2px solid currentColor;
     border-bottom: 2px solid currentColor;
     transform: rotate(45deg) translateY(-2px);
     transition: transform .2s;
 }

 .nav .has-dropdown:hover>a::after,
 .nav .has-dropdown:focus-within>a::after {
     transform: rotate(-135deg) translateY(-2px);
 }


 /* dropdown box */
 .nav .dropdown {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 260px;
     background: #fff;
     border: 1px solid #e3e7ef;
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
     padding: 8px 0;
     z-index: 50;
 }

 .nav .has-dropdown:hover .dropdown,
 .nav .has-dropdown:focus-within .dropdown {
     display: block;
 }

 .nav .dropdown li a {
     display: block;
     padding: 10px 18px;
     white-space: nowrap;
 }

 .nav .dropdown li a:hover {
     background: #f6f8fc;
 }

 .sol-item,
 .sol-item li {
     list-style: none !important;
 }

 .sol-item li::marker {
     content: "";
 }

 .sol-sub {
     list-style: none !important;
     margin: 0;
     padding: 0;
 }

 .sol-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .sol-link {
     flex: 1;
     text-decoration: none;
     color: inherit;
     font: inherit;
 }

 .sol-arrow {
     width: 44px;
     height: 44px;
     background: none;
     border: 0;
     cursor: pointer;
     position: relative;
 }

 .sol-arrow::before {
     content: "";
     position: absolute;
     top: 15px;
     left: 17px;
     width: 8px;
     height: 8px;
     border-right: 2px solid currentColor;
     border-bottom: 2px solid currentColor;
     transform: rotate(45deg);
     transition: transform .2s;
 }

 .sol-item.open .sol-arrow::before {
     transform: rotate(-135deg);
     top: 19px;
 }

 /* closed by default, opens on tap */
 .sol-sub {
     display: none;
     margin: 0 0 10px 8px;
     padding-left: 14px;
     border-left: 2px solid #dbe3f3;
 }

 .sol-item.open .sol-sub {
     display: block;
 }

 .sol-sub li a {
     display: block;
     padding: 10px 0;
     text-decoration: none;
     color: inherit;
     font: inherit;
     font-weight: 500;
 }










/* ----  blog page css---- */
.bp {
    --brand: #1a56db;
    /* main button / link color of your site */
    --brand-dark: #123c9c;
    /* darker shade of the same color (hover) */
    --ink: #1c2333;
    /* main text color */
    --muted: #5a6478;
    /* lighter paragraph text color */
    --bg: #f6f8fc;
    /* light section background */
    --line: #e3e7ef;
    /* border color */
    --font: inherit;
    /* "inherit" = use your site's font, or write e.g. 'Poppins', sans-serif */
}

/* ---- END SETTINGS ---- */
.bp {
    color: var(--ink);
    line-height: 1.6;
    font-family: var(--font);
    font-size: inherit
}

.bp h1,
.bp h2,
.bp p,
.bp a,
.bp div,
.bp span,
.bp b,
.bp button {
    font-family: var(--font)
}

.bp * {
    box-sizing: border-box
}

.bp a {
    color: inherit;
    text-decoration: none
}

.bp .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
}

.bp .page-hero {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 56px 0 44px
}

.bp .page-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.15;
    margin: 0 0 12px;
    max-width: 760px
}

.bp .page-hero p {
    margin: 0;
    max-width: 640px;
    color: var(--muted);
    font-size: 1.1rem
}

.bp .crumbs {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 14px
}

.bp .crumbs a:hover {
    color: var(--brand)
}

.bp .blogs {
    padding: 44px 0 64px
}

.bp .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px
}

.bp .filter {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .95rem;
    cursor: pointer
}

.bp .filter:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.bp .filter.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

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

.bp .post {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden
}

.bp .post[hidden] {
    display: none
}

.bp .post:hover {
    border-color: var(--brand)
}

.bp .thumb {
    height: 8px;
    background: var(--brand)
}

.bp .post:nth-child(3n+2) .thumb {
    background: #0e9f6e
}

.bp .post:nth-child(3n) .thumb {
    background: #d97706
}

.bp .post-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.bp .meta {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 8px
}

.bp .meta b {
    color: var(--brand);
    font-weight: 600
}

.bp .post h2 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 10px
}

.bp .post h2 a:hover {
    color: var(--brand)
}

.bp .post p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .97rem
}

.bp .more {
    margin-top: auto;
    font-weight: 600;
    color: var(--brand)
}

.bp .more:hover {
    text-decoration: underline
}

.bp .cta {
    background: var(--brand);
    color: #fff;
    padding: 44px 0;
    text-align: center
}

.bp .cta h2 {
    margin: 0 0 8px;
    font-size: 1.7rem
}

.bp .cta p {
    margin: 0 0 20px;
    opacity: .9
}

.bp .cta a {
    display: inline-block;
    background: #fff;
    color: var(--brand-dark);
    padding: 12px 26px;
    border-radius: 6px;
    font-weight: 700
}

.bp a:focus-visible,
.bp button:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px
}

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

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

    .bp .page-hero {
    padding: 40px 0 32px}
    
}

 /* ----  web-development page css  ---- */

 .wd {
     --brand: #1a56db;
     --brand-dark: #123c9c;
     --ink: #1c2333;
     --muted: #5a6478;
     --bg: #f6f8fc;
     --line: #e3e7ef;
     --font: inherit;
     /* inherit = your site's font, or write e.g. 'Poppins', sans-serif */
 }

 /* ---- END SETTINGS ---- */
 .wd {
     color: var(--ink);
     line-height: 1.6;
     font-family: var(--font);
     font-size: inherit
 }

 .wd * {
     box-sizing: border-box;
     font-family: var(--font)
 }

 .wd a {
     color: inherit;
     text-decoration: none
 }

 .wd h1,
 .wd h2,
 .wd h3,
 .wd p,
 .wd ul,
 .wd ol {
     margin: 0
 }

 .wd-wrap {
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 20px
 }

 .wd-narrow {
     max-width: 820px
 }

 .wd-hero {
     background: var(--bg);
     border-bottom: 1px solid var(--line);
     padding: 64px 0 56px
 }

 .wd-crumbs {
     font-size: .9rem;
     color: var(--muted);
     margin-bottom: 14px
 }

 .wd-crumbs a:hover {
     color: var(--brand)
 }

 .wd-hero h1 {
     font-size: clamp(2rem, 4.6vw, 3rem);
     line-height: 1.15;
     max-width: 780px;
     margin-bottom: 14px
 }

 .wd-hero p {
     max-width: 640px;
     color: var(--muted);
     font-size: 1.1rem;
     margin-bottom: 26px
 }

 .wd-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px
 }

 .wd-btn {
     display: inline-block;
     background: var(--brand);
     color: #fff !important;
     border: 0;
     padding: 12px 26px;
     border-radius: 6px;
     font-weight: 700;
     font-size: 1rem;
     cursor: pointer
 }

 .wd-btn:hover {
     background: var(--brand-dark)
 }

 .wd-btn-light {
     background: #fff;
     color: var(--brand-dark) !important;
     border: 1px solid var(--line)
 }

 .wd-btn-light:hover {
     background: var(--bg)
 }

 .wd-section {
     padding: 60px 0
 }

 .wd-alt {
     background: var(--bg);
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line)
 }

 .wd-section h2 {
     font-size: clamp(1.6rem, 3vw, 2.1rem);
     line-height: 1.2;
     margin-bottom: 10px
 }

 .wd-lead {
     color: var(--muted);
     max-width: 640px;
     margin-bottom: 30px
 }

 .wd-alt h2 {
     margin-bottom: 24px
 }

 .wd-grid {
     display: grid;
     gap: 22px
 }

 .wd-grid-3 {
     grid-template-columns: repeat(3, 1fr)
 }

 .wd-grid-4 {
     grid-template-columns: repeat(4, 1fr)
 }

 .wd-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 10px;
     padding: 24px;
     border-top: 4px solid var(--brand)
 }

 .wd-card h3 {
     font-size: 1.15rem;
     margin-bottom: 8px
 }

 .wd-card p {
     color: var(--muted);
     font-size: .97rem
 }

 .wd-checks {
     list-style: none;
     padding: 0;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 14px 30px
 }

 .wd-checks li {
     position: relative;
     padding-left: 30px
 }

 .wd-checks li::before {
     content: "";
     position: absolute;
     left: 4px;
     top: 5px;
     width: 6px;
     height: 12px;
     border-right: 3px solid #0e9f6e;
     border-bottom: 3px solid #0e9f6e;
     transform: rotate(45deg)
 }

 .wd-steps {
     list-style: none;
     padding: 0;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 22px;
     counter-reset: s
 }

 .wd-steps li {
     counter-increment: s;
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 10px;
     padding: 24px
 }

 .wd-steps li::before {
     content: counter(s);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--brand);
     color: #fff;
     font-weight: 700;
     margin-bottom: 12px
 }

 .wd-steps h3 {
     font-size: 1.1rem;
     margin-bottom: 6px
 }

 .wd-steps p {
     color: var(--muted);
     font-size: .95rem
 }

 .wd-form {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px
 }

 .wd-full {
     grid-column: 1/-1
 }

 .wd-field label {
     display: block;
     font-weight: 600;
     margin-bottom: 6px;
     font-size: .95rem
 }

 .wd-field input,
 .wd-field select,
 .wd-field textarea {
     width: 100%;
     padding: 11px 12px;
     border: 1px solid #cfd6e4;
     border-radius: 6px;
     font-size: 1rem;
     background: #fff;
     color: var(--ink)
 }

 .wd-field input:focus,
 .wd-field select:focus,
 .wd-field textarea:focus {
     outline: none;
     border-color: var(--brand);
     box-shadow: 0 0 0 3px rgba(26, 86, 219, .15)
 }

 .wd-note {
     font-size: .88rem;
     color: var(--muted);
     margin-top: 10px
 }

 .wd-status {
     margin-top: 10px;
     font-weight: 600
 }

 .wd-status.ok {
     color: #0e9f6e
 }

 .wd-status.bad {
     color: #dc2626
 }

 .wd-faq details {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 8px;
     margin-bottom: 12px;
     padding: 0 18px
 }

 .wd-faq summary {
     cursor: pointer;
     font-weight: 600;
     padding: 16px 0;
     list-style: none;
     display: flex;
     justify-content: space-between;
     gap: 12px
 }

 .wd-faq summary::-webkit-details-marker {
     display: none
 }

 .wd-faq summary::after {
     content: "+";
     font-size: 1.4rem;
     line-height: 1;
     color: var(--brand)
 }

 .wd-faq details[open] summary::after {
     content: "\2212"
 }

 .wd-faq p {
     color: var(--muted);
     padding: 0 0 16px
 }

 .wd-cta {
     background: var(--brand);
     color: #fff;
     padding: 48px 0;
     text-align: center
 }

 .wd-cta h2 {
     font-size: 1.8rem;
     margin-bottom: 8px
 }

 .wd-cta p {
     opacity: .92;
     margin-bottom: 20px
 }

 .wd a:focus-visible,
 .wd button:focus-visible,
 .wd summary:focus-visible {
     outline: 3px solid var(--brand);
     outline-offset: 2px
 }

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

     .wd-grid-4,
     .wd-steps {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media(max-width:600px) {

     .wd-grid-3,
     .wd-grid-4,
     .wd-steps,
     .wd-checks,
     .wd-form {
         grid-template-columns: 1fr
     }

     .wd-hero {
         padding: 44px 0 38px
     }

     .wd-section {
         padding: 44px 0
     }
 }

 /* ---- hero image + service card images ---- */
 .wd-hero-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 40px;
     align-items: center
 }

 .wd-hero-media svg,
 .wd-hero-media img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 12px
 }

 .wd-svc {
     padding: 0;
     overflow: hidden;
     border-top: 1px solid var(--line)
 }

 .wd-media-top {
     background: var(--bg);
     border-bottom: 1px solid var(--line);
     padding: 14px 0;
     display: flex;
     justify-content: center
 }

 .wd-media-top svg {
     width: 180px;
     height: auto;
     display: block
 }

 .wd-card-body {
     padding: 22px 24px 24px
 }

 .wd-center {
     text-align: center;
     margin-top: 36px
 }

 @media(max-width:860px) {
     .wd-hero-grid {
         grid-template-columns: 1fr
     }

     .wd-hero-media {
         max-width: 520px
     }
 }

 /* ---- form error messages ---- */
 .wd-msg {
     display: none;
     color: #dc2626;
     font-size: .88rem;
     margin-top: 5px
 }

 .wd-field.has-error .wd-msg {
     display: block
 }

 .wd-field.has-error input,
 .wd-field.has-error select,
 .wd-field.has-error textarea {
     border-color: #dc2626;
     box-shadow: 0 0 0 3px rgba(220, 38, 38, .12)
 }


/* ---- enquiry form card ---- */
#wd-enquiry {
    padding: 60px 0
}

#wd-enquiry .wd-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
}

.wd-enq,
.wd-enq * {
    box-sizing: border-box
}

.wd-enq {
    --navy: #0b2a5b;
    --cyan: #06b6d4;
    --soft: #cfdcf5;
    --hint: #8a9bbd;
    font-family: inherit
}

.wd-enq h2,
.wd-enq p {
    margin-top: 0
}

.wd-enq {
    background: #fff;
    border: 1px solid #dbe5f8;
    border-radius: 26px;
    padding: 36px 32px 28px;
    box-shadow: 0 10px 40px rgba(10, 60, 160, .06)
}

.wd-eyebrow {
    display: block;
    color: #0a9bc9;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.wd-enq h2 {
    color: var(--navy);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: 12px
}

.wd-enq-sub {
    color: #6b7fa8;
    max-width: 640px;
    margin-bottom: 28px;
    line-height: 1.8
}

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

.wd-c1 {
    grid-column: 1
}

.wd-c2 {
    grid-column: 2
}

.wd-c3 {
    grid-column: 3
}

.wd-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 22px
}

.wd-msgbox {
    grid-column: 2/4;
    display: flex;
    flex-direction: column
}

.wd-submit {
    grid-column: 1/-1;
    text-align: center
}

.wd-field label {
    display: block;
    color: var(--navy);
    font-weight: 700;
    font-size: .82rem;
    margin-bottom: 10px
}

.wd-field label i {
    color: #e11d48;
    font-style: normal
}

.wd-input {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 16px;
    min-height: 48px;
    color: #4f78b9
}

.wd-input>svg {
    position: absolute;
    left: 16px;
    width: 17px;
    height: 17px;
    pointer-events: none
}

.wd-input input,
.wd-input select,
.wd-input textarea {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: .95rem;
    padding: 13px 16px 13px 46px;
    border-radius: 16px;
    outline: 0
}

.wd-input input::placeholder,
.wd-input textarea::placeholder {
    color: var(--hint)
}

.wd-input:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15)
}

.wd-select select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px
}

.wd-select::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -2px;
    border: 5px solid transparent;
    border-top-color: var(--navy);
    pointer-events: none
}

.wd-area {
    flex: 1;
    align-items: stretch;
    min-height: 140px
}

.wd-area>svg {
    top: auto;
    bottom: 26px
}

.wd-area textarea {
    resize: vertical;
    min-height: 140px;
    padding-top: 14px;
    line-height: 1.5
}

.wd-send {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    padding: 17px 24px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(90deg, #0a66f5, #06c4d8);
    box-shadow: 0 12px 26px rgba(10, 102, 245, .25);
    transition: transform .15s, box-shadow .15s
}

.wd-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(10, 102, 245, .32)
}

.wd-send svg {
    width: 20px;
    height: 20px
}

.wd-safe {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--hint);
    font-size: .8rem;
    margin-top: 14px
}

.wd-safe svg {
    width: 14px;
    height: 14px;
    color: var(--navy)
}

.wd-status {
    margin-top: 10px;
    font-weight: 600;
    min-height: 1.2em
}

.wd-status.ok {
    color: #0e9f6e
}

.wd-status.bad {
    color: #dc2626
}

/* error state */
.wd-msg {
    display: none;
    color: #dc2626;
    font-size: .85rem;
    margin-top: 6px;
    padding-left: 6px
}

.wd-field.has-error .wd-msg {
    display: block
}

.wd-field.has-error .wd-input {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12)
}

@media(max-width:860px) {
    .wd-enq {
        padding: 28px 18px 22px;
        border-radius: 20px
    }

    .wd-enq-form {
        grid-template-columns: 1fr
    }

    .wd-c1,
    .wd-c2,
    .wd-c3,
    .wd-left,
    .wd-msgbox {
   grid-column: 1
    }
}


/* ----products page css ---- */
.pp {
    --brand: #1a56db;
    --brand-dark: #123c9c;
    --ink: #1c2333;
    --muted: #5a6478;
    --bg: #f6f8fc;
    --line: #e3e7ef;
    --navy: #0b2a5b;
    --font: inherit;
    /* inherit = your site's font, or write e.g. 'Poppins', sans-serif */
}

/* ---- END SETTINGS ---- */
.pp {
    color: var(--ink);
    line-height: 1.6;
    font-family: var(--font);
    font-size: inherit
}

.pp * {
    box-sizing: border-box;
    font-family: var(--font)
}

.pp a {
    color: inherit;
    text-decoration: none
}

.pp h1,
.pp h2,
.pp h3,
.pp p,
.pp ul,
.pp ol {
    margin: 0
}

.pp svg text {
    font-family: Arial, sans-serif
}

.pp-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
}

.pp-narrow {
    max-width: 860px
}

.pp-btn {
    display: inline-block;
    background: var(--brand);
    color: #fff !important;
    border: 1px solid var(--brand);
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    text-align: center;
    line-height: 1.3
}

.pp-btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark)
}

.pp-btn-ghost {
    background: #fff;
    color: var(--brand) !important;
    border-color: var(--brand)
}

.pp-btn-ghost:hover {
    background: var(--bg);
    border-color: var(--brand)
}

.pp-btn-light {
    background: #fff;
    color: var(--brand-dark) !important;
    border-color: #fff
}

.pp-btn-light:hover {
    background: var(--bg)
}

.pp-hero {
    background: linear-gradient(180deg, var(--bg), #fff);
    border-bottom: 1px solid var(--line);
    padding: 60px 0 52px
}

.pp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center
}

.pp-crumbs {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 16px
}

.pp-crumbs a:hover {
    color: var(--brand)
}

.pp-eyebrow {
    display: block;
    color: #0a9bc9;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.pp-hero h1 {
    font-size: clamp(2.1rem, 4.8vw, 3.2rem);
    line-height: 1.12;
    color: var(--navy);
    margin-bottom: 14px
}

.pp-hero p {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 560px;
    margin-bottom: 26px
}

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px
}

.pp-trust {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 12px 28px;
    justify-content: start
}

.pp-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--navy)
}

.pp-trust svg {
    width: 20px;
    height: 20px;
    color: #0e9f6e;
    flex: none
}

.pp-hero-media svg {
    width: 100%;
    height: auto;
    display: block
}

.pp-section {
    padding: 64px 0
}

.pp-alt {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.pp-head {
    margin-bottom: 28px
}

.pp-head h2,
.pp-card-form h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 8px
}

.pp-head p,
.pp-sub {
    color: var(--muted);
    max-width: 640px
}

.pp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px
}

.pp-filter {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 9px 18px;
    border-radius: 999px;
    font-size: .95rem;
    cursor: pointer
}

.pp-filter:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.pp-filter.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

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

.pp-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s
}

.pp-card[hidden] {
    display: none
}

.pp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 40, 100, .1);
    border-color: #c9d6f2
}

.pp-shot {
    position: relative;
    background: var(--bg);
    padding: 18px 18px 10px;
    border-bottom: 1px solid var(--line)
}

.pp-shot svg,
.pp-shot img {
    width: 100%;
    height: auto;
    display: block
}

.pp-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--navy);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px
}

.pp-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.pp-body h3 {
    font-size: 1.15rem;
    color: var(--navy);
    margin-bottom: 6px;
    word-break: break-word
}

.pp-body p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 14px
}

.pp-pts {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 18px
}

.pp-pts li {
    font-size: .85rem;
    color: var(--ink);
    position: relative;
    padding-left: 18px
}

.pp-pts li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #0e9f6e;
    border-bottom: 2px solid #0e9f6e;
    transform: rotate(45deg)
}

.pp-buy {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 16px
}

.pp-price small {
    display: block;
    color: var(--muted);
    font-size: .78rem
}

.pp-price strong {
    font-size: 1.4rem;
    color: var(--navy)
}

.pp-btns {
    display: flex;
    gap: 8px
}

.pp-btns .pp-btn {
    padding: 9px 14px;
    font-size: .88rem
}

.pp-note {
    margin-top: 26px;
    color: var(--muted);
    font-size: .92rem;
    text-align: center
}

.pp-feats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px
}

.pp-feats>div {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    border-radius: 10px;
    padding: 22px
}

.pp-feats h3 {
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 6px
}

.pp-feats p {
    color: var(--muted);
    font-size: .95rem
}

.pp-steps {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    counter-reset: s
}

.pp-steps li {
    counter-increment: s;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px
}

.pp-steps li::before {
    content: counter(s);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px
}

.pp-steps h3 {
    font-size: 1.08rem;
    color: var(--navy);
    margin-bottom: 6px
}

.pp-steps p {
    color: var(--muted);
    font-size: .95rem
}

.pp-card-form {
    background: #fff;
    border: 1px solid #dbe5f8;
    border-radius: 24px;
    padding: 34px 30px 26px;
    box-shadow: 0 10px 40px rgba(10, 60, 160, .06)
}

.pp-sub {
    margin-bottom: 24px
}

.pp-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px
}

.pp-full {
    grid-column: 1/-1
}

.pp-field label {
    display: block;
    color: var(--navy);
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 8px
}

.pp-field label i {
    color: #e11d48;
    font-style: normal
}

.pp-field input,
.pp-field select,
.pp-field textarea {
    width: 100%;
    border: 1px solid #cfdcf5;
    border-radius: 14px;
    background: #fff;
    color: var(--navy);
    font-size: .95rem;
    padding: 13px 16px;
    min-height: 48px
}

.pp-field textarea {
    resize: vertical
}

.pp-field input::placeholder,
.pp-field textarea::placeholder {
    color: #8a9bbd
}

.pp-field input:focus,
.pp-field select:focus,
.pp-field textarea:focus {
    outline: 0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15)
}

.pp-field.has-error input,
.pp-field.has-error select {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12)
}

.pp-msg {
    display: none;
    color: #dc2626;
    font-size: .85rem;
    margin-top: 6px;
    padding-left: 4px
}

.pp-field.has-error .pp-msg {
    display: block
}

.pp-send {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(90deg, #0a66f5, #06c4d8);
    box-shadow: 0 12px 26px rgba(10, 102, 245, .25)
}

.pp-send:hover {
    filter: brightness(1.05)
}

.pp-safe {
    text-align: center;
    color: #8a9bbd;
    font-size: .82rem;
    margin-top: 12px
}

.pp-status {
    text-align: center;
    margin-top: 8px;
    font-weight: 600;
    min-height: 1.2em
}

.pp-status.ok {
    color: #0e9f6e
}

.pp-status.bad {
    color: #dc2626
}

.pp-faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 0 18px
}

.pp-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    padding: 16px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.pp-faq summary::-webkit-details-marker {
    display: none
}

.pp-faq summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--brand)
}

.pp-faq details[open] summary::after {
    content: "\2212"
}

.pp-faq p {
    color: var(--muted);
    padding: 0 0 16px
}


.pp a:focus-visible,
.pp button:focus-visible,
.pp summary:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px
}

@media(max-width:960px) {
    .pp-hero-grid {
        grid-template-columns: 1fr
    }

    .pp-hero-media {
        max-width: 520px
    }

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

    .pp-feats,
    .pp-steps {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {

    .pp-grid,
    .pp-feats,
    .pp-steps,
    .pp-form {
        grid-template-columns: 1fr
    }

    .pp-hero {
        padding: 40px 0 36px
    }

    .pp-section {
        padding: 44px 0
    }

    .pp-card-form {
        padding: 26px 18px 20px;
        border-radius: 18px
    }

    .pp-trust {
        grid-template-columns: 1fr
    }
}



/* ---- site-pricing-page  ---- */
.pc {
    --brand: #1a56db;
    --brand-dark: #123c9c;
    --ink: #1c2333;
    --muted: #5a6478;
    --bg: #f6f8fc;
    --line: #e3e7ef;
    --navy: #0b2a5b;
    --font: inherit;
    /* inherit = your site's font, or write e.g. 'Poppins', sans-serif */
}

/* ---- END SETTINGS ---- */
.pc {
    color: var(--ink);
    line-height: 1.6;
    font-family: var(--font);
    font-size: inherit
}

.pc * {
    box-sizing: border-box;
    font-family: var(--font)
}

.pc a {
    color: inherit;
    text-decoration: none
}

.pc :where(h1, h2, h3, p, ul, ol) {
    margin: 0
}

.pc-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
}

.pc-narrow {
    max-width: 860px
}

.pc-btn {
    display: block;
    width: 100%;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-align: center
}

.pc a.pc-btn {
    color: #fff
}

.pc-btn-inline {
    display: inline-block;
    width: auto;
    min-width: 240px
}

.pc-center {
    text-align: center;
    margin-top: 34px
}

.pc-btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark)
}

.pc-hero {
    background: linear-gradient(180deg, var(--bg), #fff);
    border-bottom: 1px solid var(--line);
    padding: 60px 0 48px;
    text-align: center
}

.pc-crumbs {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 16px
}

.pc-crumbs a:hover {
    color: var(--brand)
}

.pc-eyebrow {
    display: block;
    color: #0a9bc9;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.pc-hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.14;
    color: var(--navy);
    max-width: 820px;
    margin: 0 auto 14px
}

.pc-hero p {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 26px
}

.pc-trust {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px
}

.pc-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--navy)
}

.pc-trust svg {
    width: 20px;
    height: 20px;
    color: #0e9f6e;
    flex: none
}

.pc-section {
    padding: 64px 0
}

.pc-alt {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.pc-head {
    margin-bottom: 28px;
    text-align: center
}

.pc-head h2,
.pc-card-form h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 8px
}

.pc-head p,
.pc-sub {
    color: var(--muted)
}

.pc-head p {
    max-width: 600px;
    margin: 0 auto
}

.pc-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto
}

.pc-plan {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 34px 30px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 36px rgba(10, 60, 160, .07);
    transition: transform .15s, box-shadow .15s
}

.pc-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(10, 60, 160, .13)
}

.pc-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(26, 86, 219, .1);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px
}

.pc-icon svg {
    width: 28px;
    height: 28px
}

.pc-icon-green {
    background: rgba(14, 159, 110, .12);
    color: #0e9f6e
}

.pc-plan h2 {
    font-size: 1.5rem;
    color: var(--navy);
    margin-bottom: 8px
}

.pc-desc {
    color: var(--muted);
    font-size: .97rem;
    margin-bottom: 20px;
    min-height: 3.2em
}

.pc-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px
}

.pc-cur {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy)
}

.pc-price strong {
    font-size: 3rem;
    line-height: 1;
    color: var(--navy);
    letter-spacing: -.02em
}

.pc-list {
    list-style: none;
    padding: 0;
    margin-bottom: 26px;
    display: grid;
    gap: 12px;
    flex: 1
}

.pc-list li {
    position: relative;
    padding-left: 30px
}

.pc-list li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 6px;
    height: 12px;
    border-right: 3px solid #0e9f6e;
    border-bottom: 3px solid #0e9f6e;
    transform: rotate(45deg)
}

.pc-note {
    margin-top: 26px;
    color: var(--muted);
    font-size: .92rem;
    text-align: center
}

.pc-steps {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    counter-reset: s;
    margin: 0 auto
}

.pc-steps li {
    counter-increment: s;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px
}

.pc-steps li::before {
    content: counter(s);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px
}

.pc-steps h3 {
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 6px
}

.pc-steps p {
    color: var(--muted);
    font-size: .95rem
}

.pc-card-form {
    background: #fff;
    border: 1px solid #dbe5f8;
    border-radius: 24px;
    padding: 34px 30px 26px;
    box-shadow: 0 10px 40px rgba(10, 60, 160, .06)
}

.pc-sub {
    margin-bottom: 24px;
    max-width: 600px
}

.pc-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px
}

.pc-full {
    grid-column: 1/-1
}

.pc-field label {
    display: block;
    color: var(--navy);
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 8px
}

.pc-field label i {
    color: #e11d48;
    font-style: normal
}

.pc-field input,
.pc-field select,
.pc-field textarea {
    width: 100%;
    border: 1px solid #cfdcf5;
    border-radius: 14px;
    background: #fff;
    color: var(--navy);
    font-size: .95rem;
    padding: 13px 16px;
    min-height: 48px
}

.pc-field textarea {
    resize: vertical
}

.pc-field input::placeholder,
.pc-field textarea::placeholder {
    color: #8a9bbd
}

.pc-field input:focus,
.pc-field select:focus,
.pc-field textarea:focus {
    outline: 0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15)
}

.pc-field.has-error input,
.pc-field.has-error select {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12)
}

.pc-msg {
    display: none;
    color: #dc2626;
    font-size: .85rem;
    margin-top: 6px;
    padding-left: 4px
}

.pc-field.has-error .pc-msg {
    display: block
}

.pc-send {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(90deg, #0a66f5, #06c4d8);
    box-shadow: 0 12px 26px rgba(10, 102, 245, .25)
}

.pc-send:hover {
    filter: brightness(1.05)
}

.pc-safe {
    text-align: center;
    color: #8a9bbd;
    font-size: .82rem;
    margin-top: 12px
}

.pc-status {
    text-align: center;
    margin-top: 8px;
    font-weight: 600;
    min-height: 1.2em
}

.pc-status.ok {
    color: #0e9f6e
}

.pc-status.bad {
    color: #dc2626
}

.pc-faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 0 18px
}

.pc-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    padding: 16px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.pc-faq summary::-webkit-details-marker {
    display: none
}

.pc-faq summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--brand)
}

.pc-faq details[open] summary::after {
    content: "\2212"
}

.pc-faq p {
    color: var(--muted);
    padding: 0 0 16px
}

.pc a:focus-visible,
.pc button:focus-visible,
.pc summary:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px
}

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

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

    .pc-desc {
        min-height: 0
    }
}

@media(max-width:600px) {

    .pc-form,
    .pc-steps {
        grid-template-columns: 1fr
    }

    .pc-hero {
        padding: 40px 0 34px
    }

    .pc-section {
        padding: 44px 0
    }

    .pc-card-form {
        padding: 26px 18px 20px;
        border-radius: 18px
    }

    .pc-plan {
        padding: 28px 22px 24px
    }

    .pc-trust {
        flex-direction: column;
        align-items: center
    }
}


/* ---- About-us-page-css ---- */
.ab {
    --brand: #1a56db;
    --brand-dark: #123c9c;
    --ink: #1c2333;
    --muted: #5a6478;
    --bg: #f6f8fc;
    --line: #e3e7ef;
    --navy: #0b2a5b;
    --font: inherit;
    /* inherit = your site's font, or write e.g. 'Poppins', sans-serif */
}

/* ---- END SETTINGS ---- */
.ab {
    color: var(--ink);
    line-height: 1.6;
    font-family: var(--font);
    font-size: inherit
}

.ab * {
    box-sizing: border-box;
    font-family: var(--font)
}

.ab a {
    color: inherit;
    text-decoration: none
}

.ab :where(h1, h2, h3, p, ul, ol, figure, blockquote) {
    margin: 0
}

.ab img {
    max-width: 100%
}

.ab-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
}

.ab-eyebrow {
    display: block;
    color: #0a9bc9;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.ab-section {
    padding: 68px 0
}

.ab-alt {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.ab-head {
    text-align: center;
    margin-bottom: 36px
}

.ab-head p {
    color: var(--muted);
    max-width: 640px;
    margin: 10px auto 0
}

.ab-section h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--navy)
}

.ab a.ab-btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .97rem
}

.ab a.ab-btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark)
}

.ab a.ab-btn-ghost {
    background: #fff;
    color: var(--brand)
}

.ab a.ab-btn-ghost:hover {
    background: var(--bg);
    color: var(--brand-dark)
}

.ab-hero {
    background: linear-gradient(180deg, var(--bg), #fff);
    border-bottom: 1px solid var(--line);
    padding: 56px 0 48px
}

.ab-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center
}

.ab-crumbs {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 16px
}

.ab-crumbs a:hover {
    color: var(--brand)
}

.ab-hero h1 {
    font-size: clamp(2.1rem, 4.8vw, 3.2rem);
    line-height: 1.12;
    color: var(--navy);
    margin-bottom: 14px
}

.ab-hero p {
    color: var(--muted);
    font-size: 1.08rem;
    max-width: 540px;
    margin-bottom: 24px
}

.ab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px
}

.ab-trust {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 12px 28px;
    justify-content: start
}

.ab-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--navy)
}

.ab-trust svg {
    width: 20px;
    height: 20px;
    color: #0e9f6e;
    flex: none
}

.ab-hero-img img {
    width: 100%;
    height: auto;
    display: block
}

.ab-band {
    background: linear-gradient(90deg, #0b2a5b, #12408f);
    color: #fff;
    padding: 38px 0
}

.ab-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center
}

.ab-stat strong {
    display: block;
    font-size: 2.3rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 6px
}

.ab-stat strong em {
    font-style: normal;
    margin-right: 2px
}

.ab-stat strong b {
    font-weight: inherit
}

.ab-stat span {
    color: #c4d3f2;
    font-size: .92rem
}

.ab-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center
}

.ab-two-img img {
    width: 100%;
    height: auto;
    display: block
}

.ab-text {
    margin: 16px 0 20px
}

.ab-text p {
    color: var(--muted);
    margin-bottom: 14px;
    font-size: 1.02rem
}

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

.ab-checks li {
    position: relative;
    padding-left: 32px;
    font-weight: 600;
    color: var(--navy)
}

.ab-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0e9f6e
}

.ab-checks li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 5px;
    height: 10px;
    border-right: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(45deg)
}

.ab-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px
}

.ab-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(10, 60, 160, .05)
}

.ab-box h3 {
    font-size: 1.4rem;
    color: var(--navy);
    margin: 16px 0 8px
}

.ab-box p {
    color: var(--muted)
}

.ab-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(26, 86, 219, .1);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center
}

.ab-ico svg {
    width: 26px;
    height: 26px
}

.ab-green {
    background: rgba(14, 159, 110, .12);
    color: #0e9f6e
}

.ab-amber {
    background: rgba(217, 119, 6, .12);
    color: #d97706
}

.ab-purple {
    background: rgba(124, 58, 237, .12);
    color: #7c3aed
}

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

.ab-grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px
}

.ab-svc,
.ab-why,
.ab-contact {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px;
    transition: transform .15s, box-shadow .15s
}

.ab-svc:hover,
.ab-why:hover,
.ab-contact:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 40, 100, .1)
}

.ab-svc h3,
.ab-why h3,
.ab-contact h3 {
    font-size: 1.12rem;
    color: var(--navy);
    margin: 16px 0 6px
}

.ab-svc p,
.ab-why p,
.ab-contact p {
    color: var(--muted);
    font-size: .95rem;
    word-break: break-word
}

.ab-contact {
    display: block
}

.ab-contact:hover p {
    color: var(--brand)
}

.ab-chips {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px
}

.ab-chips li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    color: var(--navy)
}

.ab-member {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center
}

.ab-photo,
.ab-av {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a66f5, #06b6d4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: none
}

.ab-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    font-size: 2rem
}

.ab-av {
    width: 52px;
    height: 52px;
    font-size: 1rem
}

.ab-photo img,
.ab-av img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ab-member h3 {
    font-size: 1.15rem;
    color: var(--navy)
}

.ab-role {
    color: var(--brand);
    font-weight: 600;
    font-size: .9rem;
    margin: 2px 0 10px
}

.ab-bio {
    color: var(--muted);
    font-size: .92rem
}

.ab-test {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.ab-q {
    width: 34px;
    height: 34px;
    color: var(--brand);
    opacity: .25
}

.ab-q svg {
    width: 100%;
    height: 100%;
    display: block
}

.ab-test blockquote {
    color: var(--ink);
    font-size: .99rem;
    line-height: 1.7;
    flex: 1
}

.ab-test figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 16px
}

.ab-test figcaption strong {
    display: block;
    color: var(--navy);
    font-size: .98rem
}

.ab-test figcaption span {
    color: var(--muted);
    font-size: .85rem
}

.ab a:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px
}

@media(max-width:960px) {

    .ab-hero-grid,
    .ab-two {
        grid-template-columns: 1fr
    }

    .ab-hero-img {
        max-width: 520px;
        margin: 0 auto
    }

    .ab-two-img {
        order: -1;
        max-width: 520px;
        margin: 0 auto
    }

    .ab-grid4,
    .ab-grid3 {
        grid-template-columns: repeat(2, 1fr)
    }

    .ab-band-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px
    }
}

@media(max-width:640px) {

    .ab-cols,
    .ab-grid3,
    .ab-grid4,
    .ab-trust {
        grid-template-columns: 1fr
    }

    .ab-hero {
        padding: 38px 0 34px
    }

    .ab-section {
        padding: 46px 0
    }

    .ab-band {
        padding: 30px 0
    }

    .ab-stat strong {
        font-size: 1.9rem
    }

    .ab-box {
        padding: 24px 20px
    }
}

/* ---- Blog page css ---- */


.bg {
    --brand: #1a56db;
    --ink: #1c2333;
    --text: #2c3550;
    --muted: #6b7794;
    --line: #e3e7ef;
    --navy: #0b2a5b;
    --font: inherit;
}

/* ---- END SETTINGS ---- */
.bg {
    color: var(--text);
    line-height: 1.7;
    font-family: var(--font);
    font-size: inherit;
    padding: 40px 0 0
}

.bg * {
    box-sizing: border-box;
    font-family: var(--font)
}

.bg a {
    color: inherit;
    text-decoration: none
}

.bg :where(h1, h2, h3, p, ul, figure) {
    margin: 0
}

.bg-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px
}

.bg-img {
    margin: 0 0 30px
}

.bg-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200/630;
    object-fit: cover;
    background: #f6f8fc;
    border-radius: 6px
}

.bg-top {
    margin-bottom: 34px
}

.bg-body .bg-img {
    margin: 36px 0
}

.bg-head {
    text-align: center;
    margin-bottom: 34px
}

.bg-cat {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .38em;
    text-transform: uppercase;
    margin-bottom: 16px
}

.bg-head h1 {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--navy);
    max-width: 720px;
    margin: 0 auto 16px
}

.bg-meta {
    color: var(--muted);
    font-size: .85rem
}

.bg-meta i {
    font-style: normal;
    margin: 0 8px;
    color: #b5bed3
}

.bg-body p {
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 18px
}

.bg-body h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    line-height: 1.3;
    font-weight: 800;
    color: var(--navy);
    margin: 38px 0 14px
}

.bg-body h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--navy);
    margin: 26px 0 10px
}

.bg-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    gap: 9px
}

.bg-list li {
    position: relative;
    padding-left: 24px;
    font-size: 1.02rem;
    line-height: 1.7
}

.bg-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand)
}

.bg-list-bold strong {
    color: var(--navy)
}

.bg-share {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    margin-top: 44px;
    padding-top: 26px
}

.bg-label {
    display: block;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase
}

.bg-icons {
    display: flex;
    gap: 10px
}

.bg-icons a {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy)
}

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

.bg-icons svg {
    width: 18px;
    height: 18px
}

.bg-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    border-top: 1px solid var(--line);
    margin-top: 30px;
    padding-top: 26px
}

.bg-nav a {
    display: block
}

.bg-nav strong {
    display: block;
    margin-top: 6px;
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700
}

.bg-nav a:hover strong {
    color: var(--brand)
}

.bg-next {
    text-align: right
}

.bg a:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px
}

@media(max-width:640px) {
    .bg {
        padding: 24px 0 0
    }

    .bg-cat {
        letter-spacing: .28em
    }

    .bg-body p,
    .bg-list li {
        font-size: 1rem
    }

    .bg-nav {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .bg-next {
        text-align: left
    }
}

/* ---- related posts ---- */
.bg-related {
    margin-top: 56px;
    padding: 52px 0 8px;
    border-top: 1px solid var(--line);
    background: #f6f8fc
}

.bg-rwrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 44px
}

.bg-related h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 24px;
    text-align: center
}

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

.bg-rcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    border-radius: 14px;
    padding: 24px;
    transition: transform .15s, box-shadow .15s
}

.bg-rcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 40, 100, .1)
}

.bg-rcat {
    align-self: flex-start;
    background: rgba(26, 86, 219, .1);
    color: var(--brand);
    font-size: .76rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px
}

.bg-rcard h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 8px
}

.bg-rcard p {
    font-size: .93rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 16px
}

.bg-rmore {
    margin-top: auto;
    color: var(--brand);
    font-weight: 700;
    font-size: .93rem
}

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

@media(max-width:600px) {
    .bg-rgrid {
        grid-template-columns: 1fr
    }

    .bg-related {
        margin-top: 40px;
        padding-top: 40px
    }
}

/* ------hero-contact-form-css -------*/

.enquiry-card {
    background: #fff;
    border-radius: 22px;
    padding: 22px 26px;
    box-shadow: 0 20px 50px rgba(10, 30, 70, 0.15);
    max-width: 620px;          /* wider = landscape */
    width: 100%;
    margin-left: auto;
    box-sizing: border-box;
}
.enquiry-title {
    font-size: 26px;
    line-height: 1.2;
    color: #0b1f4b;
    margin: 0 0 6px;
}
.enquiry-title span { color: #09bcd3; }
.enquiry-sub { color: #5b6b86; font-size: 14px; margin: 0 0 16px; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;        /* stops fields from stretching */
}
.form-grid .field-full { grid-column: 1 / -1; }

.enquiry-card .field { position: relative; }
.enquiry-card .field i {
    position: absolute;
    left: 16px;
    top: 23px;                 /* half of 46px input height */
    transform: translateY(-50%);
    color: #7b8798;
    font-size: 14px;
    pointer-events: none;
}
.enquiry-card input[type="text"],
.enquiry-card input[type="tel"],
.enquiry-card input[type="email"] {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 44px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.enquiry-card textarea {
    width: 100%;
    height: 60px;              /* short message box */
    padding: 12px 16px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    resize: none;
    box-sizing: border-box;
}
.enquiry-card input:focus,
.enquiry-card textarea:focus {
    border-color: #ff6a00;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .15);
}

/* Privacy note + button on one row */
.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}
.privacy-note {
    font-size: 12px;
    color: #5b6b86;
    margin: 0;
}
.privacy-note i { color: #12a150; }

.enquiry-btn {
    padding: 13px 28px;
    min-width: 220px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.enquiry-btn:hover { background: #e55f00; }
.enquiry-btn:active { transform: scale(.98); }
.enquiry-btn:disabled { opacity: .7; cursor: not-allowed; }

.form-message {
    display: none;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.form-message.success { display: block; background: #e8f8ee; color: #167a3e; }
.form-message.error   { display: block; background: #fdecec; color: #b42318; }

@media (max-width: 900px) {
    .enquiry-card { margin: 30px auto 0; max-width: 100%; }
}
@media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-footer { flex-direction: column-reverse; align-items: stretch; }
    .enquiry-btn { width: 100%; }
}

 /* Scoped styles – renamed from .wfs-packages / .wfs-p-* to .wfs-pricing / .wfs-pr-* */
.wfs-pricing {
    --wfs-navy: #10264b;
    --wfs-navy-dark: #0b1931;
    --wfs-blue: #1769e0;
    --wfs-orange: #f97316;
    --wfs-purple: #6d28d9;
    --wfs-green: #16883b;
    --wfs-ink: #18253b;
    --wfs-muted: #64748b;
    --wfs-line: #e1e8f2;
    font-family: Inter, Arial, sans-serif;
    color: var(--wfs-ink);
    background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 55%, #f7faff 100%);
    padding: clamp(48px, 6vw, 78px) 20px;
}

.wfs-pricing * {
    box-sizing: border-box;
}

.wfs-pricing .wfs-pr-wrap {
    max-width: 1240px;
    margin: 0 auto;
}

.wfs-pricing .wfs-pr-headings {
    display: block;
    position: static;
    width: auto;
    height: auto;
    float: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
    max-width: 880px;
    margin: 0 auto 34px;
}

.wfs-pricing .wfs-pr-headings>* {
    float: none;
    position: static;
    width: auto;
    max-width: 100%;
    background: none;
}

.wfs-pricing .wfs-pr-eyebrow {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #09bcd3;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 13px;
}

.wfs-pricing .wfs-pr-eyebrow:before,
.wfs-pricing .wfs-pr-eyebrow:after {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.wfs-pricing h2 {
    display: block;
    color: var(--wfs-navy);
    margin: 0 0 12px;
    padding: 0;
    font-size: clamp(29px, 4vw, 43px);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.wfs-pricing .wfs-pr-subtitle {
    display: block;
    color: var(--wfs-muted);
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}

.wfs-pricing .wfs-pr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.wfs-pricing .wfs-pr-card {
    --p-accent: var(--wfs-blue);
    --p-soft: #eef6ff;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 38, 75, .09);
}

.wfs-pricing .wfs-pr-card--business {
    --p-accent: var(--wfs-orange);
    --p-soft: #fff4e9;
}

.wfs-pricing .wfs-pr-card--premium {
    --p-accent: var(--wfs-purple);
    --p-soft: #f5edff;
}

.wfs-pricing .wfs-pr-card-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 108px;
    padding: 21px 22px 18px;
    color: #fff;
    background: linear-gradient(120deg, #10366d, #0878df);
}

.wfs-pricing .wfs-pr-card--business .wfs-pr-card-head {
    background: linear-gradient(120deg, #f97316, #ff8b13);
}

.wfs-pricing .wfs-pr-card--premium .wfs-pr-card-head {
    background: linear-gradient(120deg, #5b21b6, #7e22ce);
}

.wfs-pricing .wfs-pr-emoji {
    font-size: 38px;
    line-height: 1;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .15));
}

.wfs-pricing .wfs-pr-card-head h3 {
    color: #fff;
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.25;
    margin: 0;
    font-weight: 850;
}

.wfs-pricing .wfs-pr-card-head h3 span {
    display: block;
    font-size: .86em;
    margin-top: 4px;
}

.wfs-pricing .wfs-pr-best {
    position: absolute;
    top: 14px;
    right: -35px;
    transform: rotate(39deg);
    background: #ffd52e;
    color: #352500;
    padding: 5px 35px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.wfs-pricing .wfs-pr-price-wrap {
    text-align: center;
    padding: 0 15px;
    margin-top: -1px;
}

.wfs-pricing .wfs-pr-price {
    display: inline-block;
    margin-top: -1px;
    padding: 8px 19px;
    border-radius: 0 0 11px 11px;
    background: var(--p-accent);
    color: #fff;
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 900;
    letter-spacing: -.03em;
    box-shadow: 0 5px 12px rgba(16, 38, 75, .12);
}

.wfs-pricing .wfs-pr-description {
    min-height: 55px;
    margin: 13px 20px 12px;
    text-align: center;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
}

.wfs-pricing .wfs-pr-includes {
    align-self: center;
    margin: 0 15px 12px;
    padding: 7px 14px;
    border-radius: 6px;
    color: #fff;
    background: var(--p-accent);
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 11px;
    font-weight: 850;
}

.wfs-pricing .wfs-pr-features {
    list-style: none;
    margin: 0;
    padding: 0 20px 17px;
    display: grid;
    gap: 8px;
}

.wfs-pricing .wfs-pr-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #1f2937;
    font-size: 12px;
    line-height: 1.45;
}

.wfs-pricing .wfs-pr-tick {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: #179642;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.wfs-pricing .wfs-pr-extras {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: auto 17px 0;
    padding: 13px 12px;
    border: 1px solid color-mix(in srgb, var(--p-accent) 35%, white);
    border-radius: 11px;
    background: var(--p-soft);
}

.wfs-pricing .wfs-pr-gift {
    font-size: 31px;
    text-align: center;
}

.wfs-pricing .wfs-pr-extras ul {
    margin: 0;
    padding-left: 15px;
    display: grid;
    gap: 5px;
}

.wfs-pricing .wfs-pr-extras li {
    color: #273449;
    font-size: 11px;
    line-height: 1.4;
}

.wfs-pricing .wfs-pr-extras strong {
    color: var(--p-accent);
}

.wfs-pricing .wfs-pr-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 13px;
    padding: 15px 15px 17px;
    background: #f8fafc;
    border-top: 1px solid #edf1f7;
}

.wfs-pricing .wfs-pr-meta-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px;
    min-width: 0;
}

.wfs-pricing .wfs-pr-meta-item+.wfs-pr-meta-item {
    border-left: 1px solid #d5deea;
    padding-left: 14px;
}

.wfs-pricing .wfs-pr-meta-icon {
    color: var(--p-accent);
    font-size: 22px;
    flex: 0 0 auto;
}

.wfs-pricing .wfs-pr-meta strong {
    display: block;
    color: #253247;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.wfs-pricing .wfs-pr-meta span {
    display: block;
    color: #344256;
    font-size: 10px;
    line-height: 1.45;
}

.wfs-pricing .wfs-pr-actions {
    padding: 0 17px 19px;
    display: flex;
    gap: 9px;
}

.wfs-pricing .wfs-pr-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 0 10px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    border: 1px solid var(--p-accent);
    color: var(--p-accent);
    background: #fff;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.wfs-pricing .wfs-pr-button:hover {
    transform: translateY(-2px);
    color: #fff;
    background: var(--p-accent);
}

.wfs-pricing .wfs-pr-button--primary {
    color: #fff;
    background: var(--p-accent);
}

.wfs-pricing .wfs-pr-button--primary:hover {
    filter: brightness(.94);
}

.wfs-pricing .wfs-pr-benefits {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    padding: 20px 12px;
    border-radius: 17px;
    background: linear-gradient(110deg, #0b1d3a, #102b51);
    color: #fff;
}

.wfs-pricing .wfs-pr-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 13px;
}

.wfs-pricing .wfs-pr-benefit+.wfs-pr-benefit {
    border-left: 1px solid rgba(255, 255, 255, .28);
}

.wfs-pricing .wfs-pr-benefit-icon {
    font-size: 29px;
    flex: 0 0 auto;
}

.wfs-pricing .wfs-pr-benefit strong {
    display: block;
    font-size: 11px;
    margin-bottom: 5px;
}

.wfs-pricing .wfs-pr-benefit span {
    display: block;
    color: #d3deed;
    font-size: 10px;
    line-height: 1.5;
}

.wfs-pricing .wfs-pr-disclaimer {
    max-width: 900px;
    margin: 18px auto 0;
    color: #738198;
    text-align: center;
    font-size: 11px;
    line-height: 1.6;
}

@media (max-width: 1050px) {
    .wfs-pricing .wfs-pr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wfs-pricing .wfs-pr-card--premium {
        grid-column: 1 / -1;
    }

    .wfs-pricing .wfs-pr-card--premium .wfs-pr-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wfs-pricing .wfs-pr-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 17px;
    }

    .wfs-pricing .wfs-pr-benefit:nth-child(4) {
        border-left: 0;
    }
}

@media (max-width: 680px) {
    .wfs-pricing {
        padding-left: 15px;
        padding-right: 15px;
    }

    .wfs-pricing .wfs-pr-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .wfs-pricing .wfs-pr-card--premium {
        grid-column: auto;
    }

    .wfs-pricing .wfs-pr-card--premium .wfs-pr-features {
        grid-template-columns: 1fr;
    }

    .wfs-pricing .wfs-pr-description {
        min-height: 0;
    }

    .wfs-pricing .wfs-pr-benefits {
        grid-template-columns: 1fr 1fr;
        padding: 17px 10px;
    }

    .wfs-pricing .wfs-pr-benefit {
        justify-content: flex-start;
        padding: 10px 8px;
    }

    .wfs-pricing .wfs-pr-benefit+.wfs-pr-benefit {
        border-left: 0;
    }

    .wfs-pricing .wfs-pr-benefit:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, .24);
    }

    .wfs-pricing .wfs-pr-benefit:last-child {
        grid-column: 1 / -1;
    }

    .wfs-pricing .wfs-pr-meta {
        padding-left: 8px;
        padding-right: 8px;
    }

    .wfs-pricing .wfs-pr-meta-item {
        gap: 6px;
        padding: 0 5px;
    }

    .wfs-pricing .wfs-pr-meta-item+.wfs-pr-meta-item {
        padding-left: 8px;
    }
}

/* Floating WhatsApp Icon */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 55px;
    height: 55px;

    background: #25D366;
    color: #ffffff;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);

    z-index: 9999;

    transition: all 0.3s ease;
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background: #1ebe5d;
}

/* Mobile */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        right: 15px;
        bottom: 15px;
    }
}

/* our-Network */
.wfs-network {
    --wfs-ink: #14213d;
    --wfs-muted: #55607a;
    --wfs-bg: #f5f7fb;
    --wfs-card: #ffffff;
    --wfs-line: #dfe5f0;
    --wfs-accent: #1d4ed8;
    /* change to your brand colour */
    --wfs-north: #1d4ed8;
    --wfs-east: #0f9d58;
    --wfs-west: #e8590c;
    --wfs-south: #9333ea;
    background: var(--wfs-bg);
    padding: 72px 20px;
    font-family: inherit;
    box-sizing: border-box;
}

.wfs-network *,
.wfs-network *::before,
.wfs-network *::after {
    box-sizing: border-box
}

.wfs-network .wfs-net-wrap {
    max-width: 1200px;
    margin: 0 auto
}

.wfs-network .wfs-net-head {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center
}

.wfs-network .wfs-net-head h2 {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    color: var(--wfs-ink);
    font-weight: 700;
}

.wfs-network .wfs-net-head p {
    margin: 0;
    color: var(--wfs-muted);
    font-size: 1.05rem;
    line-height: 1.6
}

.wfs-network .wfs-net-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wfs-network .wfs-net-card {
    background: var(--wfs-card);
    border: 1px solid var(--wfs-line);
    border-top: 4px solid var(--region);
    border-radius: 10px;
    padding: 26px 24px 22px;
}

.wfs-network .wfs-net-card.north {
    --region: var(--wfs-north)
}

.wfs-network .wfs-net-card.east {
    --region: var(--wfs-east)
}

.wfs-network .wfs-net-card.west {
    --region: var(--wfs-west)
}

.wfs-network .wfs-net-card.south {
    --region: var(--wfs-south)
}

.wfs-network .wfs-net-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wfs-ink);
}

.wfs-network .wfs-net-title i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--region);
    color: #fff;
    font-size: 1rem;
    flex: none;
}

.wfs-network .wfs-net-cities {
    list-style: none;
    margin: 0;
    padding: 0
}

.wfs-network .wfs-net-cities li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--wfs-line);
    color: var(--wfs-ink);
    font-size: 1rem;
}

.wfs-network .wfs-net-cities li:first-child {
    border-top: 0
}

.wfs-network .wfs-net-cities li i {
    color: var(--region);
    font-size: .85rem;
    width: 14px;
    text-align: center
}

.wfs-network .wfs-net-foot {
    margin: 34px 0 0;
    text-align: center;
    color: var(--wfs-muted);
    font-size: 1rem
}

.wfs-network .wfs-net-foot a {
    color: var(--wfs-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor
}

.wfs-network .wfs-net-foot a:focus-visible {
    outline: 3px solid var(--wfs-accent);
    outline-offset: 3px
}

@media (max-width:1024px) {
    .wfs-network .wfs-net-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:600px) {
    .wfs-network {
        padding: 48px 16px
    }

    .wfs-network .wfs-net-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .wfs-network .wfs-net-head {
        margin-bottom: 30px
    }
}

.wfs-network .wfs-net-cities li a{
  display:flex;align-items:center;gap:10px;width:100%;
  color:var(--wfs-ink);text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.wfs-network .wfs-net-cities li a:hover{
  color:var(--region);
  transform:translateX(4px);
}
.wfs-network .wfs-net-cities li a:focus-visible{
  outline:3px solid var(--region);
  outline-offset:3px;
  border-radius:4px;
}

/*---------form-meassage ----------------*/

.form-message {
    display: none;
    margin-top: 15px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 5px;
}

#enquiryBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ------------- our-services ---------- */

.wfs-wd {
    --brand: #1d4ed8;
    --brand-dark: #163ea8;
    --brand-mid: #2a62dd;
    --soft: #e8efff;
    --softer: #f3f6ff;
    --ink: #14213d;
    --muted: #55607a;
    --line: #dfe5f0;
    font-family: inherit;
    color: #082b65;
    background: #fff;
    box-sizing: border-box;
}

.wfs-wd *,
.wfs-wd *::before,
.wfs-wd *::after {
    box-sizing: border-box
}

.wfs-wd .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
}

.wfs-wd h1,
.wfs-wd h2,
.wfs-wd h3,
.wfs-wd p {
    margin: 0
}

.wfs-wd section {
    scroll-margin-top: 80px
}

.wfs-wd a:focus-visible,
.wfs-wd summary:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: 6px
}

/* buttons */
.wfs-wd .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.wfs-wd .btn-fill {
    background: var(--brand);
    color: #fff
}

.wfs-wd .btn-fill:hover {
    background: var(--brand-dark)
}

.wfs-wd .btn-line {
    border: 2px solid var(--brand);
    color: var(--brand);
    background: #fff
}

.wfs-wd .btn-line:hover {
    background: var(--soft)
}

.wfs-wd .btn-white {
    background: #fff;
    color: var(--brand)
}

.wfs-wd .btn-white:hover {
    background: var(--soft)
}

.wfs-wd .btn-ghost {
    border: 2px solid rgba(255, 255, 255, .6);
    color: #fff
}

.wfs-wd .btn-ghost:hover {
    background: rgba(255, 255, 255, .14)
}

/* section heads */
.wfs-wd .head {
    max-width: 720px;
    margin: 0 auto 46px;
    text-align: center
}

.wfs-wd .head h2 {
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 12px
}

.wfs-wd .head p {
    color: var(--muted);
    font-size: 1.07rem;
    line-height: 1.65
}

.wfs-wd .eyebrow {
    display: inline-block;
    background: var(--soft);
    
    font-weight: 700;
    font-size: .88rem;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px
}

/* HERO */
.wfs-wd .wd-hero {
    background: linear-gradient(180deg, var(--softer), #fff);
    padding: 72px 0 64px !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: 1px solid var(--line)
}

.wfs-wd .wd-hero .wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center
}

.wfs-wd .crumbs {
    font-size: .92rem;
    color: var(--muted);
    margin-bottom: 16px
}

.wfs-wd .crumbs a {
    color: var(--brand);
    text-decoration: none
}

.wfs-wd .wd-hero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.3rem);
    line-height: 1.12;
    font-weight: 800;
    margin-bottom: 18px
}

.wfs-wd .wd-hero h1 span {
    color:#09bcd3;
}

.wfs-wd .wd-hero .lead {
    color: var(--muted);
    font-size: 1.12rem;
    line-height: 1.7;
    margin-bottom: 26px;
    max-width: 560px
}

.wfs-wd .wd-hero .actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.wfs-wd .wd-hero .tick {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 22px;
    flex-wrap: wrap
}

.wfs-wd .wd-hero .tick li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .98rem
}

.wfs-wd .wd-hero .tick i {
    color: #09bcd3;
}

/* hero image */
.wfs-wd .wd-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(20, 33, 61, .16)
}

/* old CSS mockup (no longer used) */
.wfs-wd .mock {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 33, 61, .16);
    overflow: hidden;
}

.wfs-wd .mock .bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: var(--softer);
    border-bottom: 1px solid var(--line)
}

.wfs-wd .mock .bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #c9d4ec;
    display: block
}

.wfs-wd .mock .bar b {
    flex: 1;
    margin-left: 10px;
    height: 22px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--line)
}

.wfs-wd .mock .body {
    padding: 22px
}

.wfs-wd .mock .nav {
    display: flex;
    gap: 10px;
    margin-bottom: 18px
}

.wfs-wd .mock .nav span {
    height: 10px;
    width: 46px;
    border-radius: 5px;
    background: var(--line)
}

.wfs-wd .mock .nav span:first-child {
    width: 70px;
    background: var(--brand)
}

.wfs-wd .mock .banner {
    height: 120px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-mid));
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px
}

.wfs-wd .mock .banner span {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .85);
    width: 62%
}

.wfs-wd .mock .banner span+span {
    width: 40%;
    background: rgba(255, 255, 255, .5)
}

.wfs-wd .mock .cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px
}

.wfs-wd .mock .cols div {
    height: 70px;
    border-radius: 10px;
    background: var(--softer);
    border: 1px solid var(--line)
}

.wfs-wd .mock .code {
    margin-top: 16px;
    border-radius: 10px;
    background: #0f1e3d;
    padding: 14px 16px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.7;
    color: #9fb6ee;
    overflow: hidden;
    white-space: nowrap;
}

.wfs-wd .mock .code em {
    font-style: normal;
    color: #7fe0b0
}

/* OVERVIEW 2 CARDS */
.wfs-wd .overview {
    padding: 72px 0 24px
}

.wfs-wd .two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.wfs-wd .ov {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 34px 32px;
    background: var(--softer);
    display: flex;
    flex-direction: column;
}

.wfs-wd .ov .ico {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.wfs-wd .ov h2 {
    font-size: 1.55rem;
    font-weight: 800;
    margin-bottom: 10px
}

.wfs-wd .ov p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 1.04rem;
    margin-bottom: 18px;
    flex: 1
}

.wfs-wd .ov a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    align-items: center
}

.wfs-wd .ov a:hover {
    text-decoration: underline
}

/* DETAIL SECTIONS */
.wfs-wd .detail {
    padding: 72px 0
}

.wfs-wd .detail.alt {
    background: var(--softer);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.wfs-wd .feat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0
}

.wfs-wd .feat li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 24px;
    transition: box-shadow .2s ease, transform .2s ease
}

.wfs-wd .feat li:hover {
    box-shadow: 0 12px 28px rgba(20, 33, 61, .10);
    transform: translateY(-3px)
}

.wfs-wd .feat i {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 14px
}

.wfs-wd .feat h3 {
    font-size: 1.12rem;
    margin-bottom: 6px;
    font-weight: 700
}

.wfs-wd .feat p {
    color: var(--muted);
    line-height: 1.6;
    font-size: .98rem
}

.wfs-wd .detail .more {
    text-align: center;
    margin-top: 34px
}

/* PROCESS */
.wfs-wd .process {
    padding: 72px 0
}

.wfs-wd .steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: st
}

.wfs-wd .steps li {
    position: relative;
    text-align: center;
    padding: 0 6px;
    counter-increment: st
}

.wfs-wd .steps li::before {
    content: counter(st);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    margin: 0 auto 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--soft);
}

.wfs-wd .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(50% + 34px);
    width: calc(100% - 68px + 18px);
    height: 2px;
    background: var(--line)
}

.wfs-wd .steps h3 {
    font-size: 1.05rem;
    margin-bottom: 6px
}

.wfs-wd .steps p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55
}

/* TECH + INDUSTRIES */
.wfs-wd .tech {
    background: var(--softer);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 64px 0
}

.wfs-wd .tech .two {
    align-items: start
}

.wfs-wd .tbox {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px
}

.wfs-wd .tbox h2 {
    font-size: 1.3rem;
    margin-bottom: 16px;
    font-weight: 700
}

.wfs-wd .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0
}

.wfs-wd .chips li {
    background: var(--soft);
    color: var(--brand-dark);
    font-weight: 600;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .95rem
}

/* FAQ */
.wfs-wd .faq {
    padding: 72px 0
}

.wfs-wd .faq .list {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 12px
}

.wfs-wd details {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden
}

.wfs-wd summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 1.03rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.wfs-wd summary::-webkit-details-marker {
    display: none
}

.wfs-wd summary::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--brand);
    line-height: 1;
    flex: none
}

.wfs-wd details[open] summary::after {
    content: "\2212"
}

.wfs-wd details[open] {
    border-color: var(--brand)
}

.wfs-wd details p {
    padding: 0 22px 20px;
    color: var(--muted);
    line-height: 1.7
}

/* CTA */
.wfs-wd .cta {
    padding: 0 0 76px
}

.wfs-wd .cta-box {
    background: linear-gradient(135deg, var(--brand), var(--brand-mid));
    border-radius: 20px;
    color: #fff;
    padding: 52px 48px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    align-items: center;
}

.wfs-wd .cta-box h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: 10px
}

.wfs-wd .cta-box p {
    color: #e3ebff;
    font-size: 1.05rem;
    line-height: 1.6
}

.wfs-wd .cta-box .side {
    display: grid;
    gap: 14px
}

.wfs-wd .cta-box .btn {
    justify-content: center
}

/* TABLET */
@media (max-width:1024px) {
    .wfs-wd .wd-hero .wrap {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .wfs-wd .feat {
        grid-template-columns: repeat(2, 1fr)
    }

    .wfs-wd .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 18px
    }

    .wfs-wd .steps li::after {
        display: none
    }

    .wfs-wd .cta-box {
        grid-template-columns: 1fr
    }
}

/* MOBILE */
@media (max-width:700px) {
    .wfs-wd .two {
        grid-template-columns: 1fr
    }

    .wfs-wd .wd-hero {
        padding: 48px 0 44px !important
    }

    .wfs-wd .wd-hero .actions .btn {
        width: 100%;
        justify-content: center
    }

    .wfs-wd .feat {
        grid-template-columns: 1fr
    }

    .wfs-wd .steps {
        grid-template-columns: 1fr
    }

    .wfs-wd .overview,
    .wfs-wd .detail,
    .wfs-wd .process,
    .wfs-wd .faq {
        padding: 48px 0
    }

    .wfs-wd .head {
        margin-bottom: 32px
    }

    .wfs-wd .cta-box {
        padding: 36px 22px
    }

    .wfs-wd .mock .code {
        font-size: .72rem
    }
}

 /* 3 cards in one row */
 .wfs-wd .two.three {
     grid-template-columns: repeat(3, 1fr)
 }

 .wfs-wd .two.three .ov {
     padding: 30px 26px
 }

 .wfs-wd .two.three .ov h2 {
     font-size: 1.35rem
 }

 @media (max-width:900px) {
     .wfs-wd .two.three {
         grid-template-columns: 1fr
     }
 }