:root {
       
         --primary-blue: #206695;
         
         --deep-slate: #1E293B;
       
         --pure-white: #ffffff;
       
         --soft-black: #0f172a;
        
         --text-primary: #1E293B;
         /* Main text */
         --text-secondary: #475569;
         /* Muted text */
         --text-light: #94a3b8;
         /* Subtle labels */

         /* UI surfaces */
         --bg-main: #ffffff;
         --bg-section: #f8fafc;
         --bg-card: #ffffff;
         --border-soft: #e2e8f0;

         /* Accents */
         --accent-blue: #206695;
         --accent-hover: #184f73;

         /* Optional gradients (still subtle) */
         --gradient-start: #206695;
         --gradient-end: #1E293B;
     }


     body {
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         background-color: #fff;
     }

     .fw-bold {
         font-weight: 500;
     }

     .container,
     .container-fluid,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {

         padding-right: 0px;
         padding-left: 0px;
     }

     .navbar {
         position: absolute;
         width: 100%;
         top: 0;
         left: 0;
         z-index: 1000;
         background-color: transparent !important;
         padding: 50px 0;
     }

     .navbar-nav {
         padding-left: 50px;
     }

     .nav-link {
         font-size: 1.12rem;
         font-weight: 400;
         font-family: 'Roboto', sans-serif;
     }

     .hero-section {
         position: relative;
         height: 100vh;
         min-height: 600px;

         background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
             url('../bg/home-page-bg.jpg');
         background-size: cover;
         background-position: center;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         color: white;
     }

     .btn-primary {
         background: #206695 !important;
         border-color: #206695 !important;
         color: #fff;

     }

     .btn-orange {
         background-color: #1E293B !important;
         border-color: #1E293B !important;
         color: white !important;

         font-weight: bold;
         text-transform: uppercase;
     }

     .btn-orange:hover {
         background-color: #d15a04;
         color: white;
     }

     .nav-link {
         color: #fff !important;
         margin: 0 10px;
         font-weight: 500;
     }

     .navbar-brand {
         font-weight: bold;
         font-size: 1.5rem;
     }

     .img-btn {
         height: 25px;
         width: 25px;
         border-radius: 50%;
         border: 1px solid #fff;



     }

     .custom-services-section {
        background: linear-gradient(90deg, #206695 0%, #334155 100%);


         padding: 50px 0;
         color: white;
         height: 200px;
     }

     .service-item {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 0 20px;
     }

     .service-icon {
         font-size: 4rem;
         margin-right: 15px;
         font-weight: 100;
     }

     .service-text {
         font-size: 1.88rem;
         line-height: 1.2;
         font-weight: 400;
         max-width: 300px;
     }

     .border-divider {
         border-right: 2px solid rgba(255, 255, 255, 0.3);
     }

     @media (max-width: 767.98px) {
         .border-divider {
             border-right: none;
             border-bottom: 1px solid rgba(255, 255, 255, 0.3);
             padding-bottom: 20px;
             margin-bottom: 20px;
         }
     }


     .about-section {
         padding: 50px 0;
     }

     /* Left Side: Image + Counter */
     .image-container {
         position: relative;
         overflow: hidden;
         border-radius: 4px;
     }

     .main-img {
         height: 530px !important;
         width: 100%;
         display: block;
         height: auto;
     }

     .counter-bar {
         background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
         color: white;
         display: flex;
         padding: 30px 15px;
         text-align: center;
     }

     .counter-item {
         flex: 1;
         border-right: 1px solid rgba(255, 255, 255, 0.3);
     }

     .counter-item:last-child {
         border-right: none;
     }

     .counter-number {
         font-size: 2.5rem;
         font-weight: 700;
         display: block;
         line-height: 1;
     }

     .counter-label {
         font-size: 0.85rem;
         font-weight: 500;
     }

     .counter-number {
         display: inline-block !important;
         /* Changed from block to inline */
         font-size: 2.5rem;
         font-weight: 700;
     }

     .counter-suffix {
         font-size: 2.5rem;
         font-weight: 700;
     }

     .counter-label {
         display: block;
         /* Ensure label stays on the next line */
         font-size: 0.85rem;
     }

     /* Right Side: Content */
     .sub-title {
         color: var(--primary-blue);
         text-transform: uppercase;
         font-weight: 700;
         font-size: 0.9rem;
         letter-spacing: 1px;
         margin-bottom: 15px;
         display: block;
     }

     .main-title {
         color: var(--heading-dark);
         font-size: 2.8rem;
         font-weight: 500;
         line-height: 1.1;
         margin-bottom: 25px;
     }

     .description {
         color: var(--text-gray);
         font-size: 1.1rem;
         margin-bottom: 30px;
         border-bottom: 1px solid #eeeeee;
         padding-bottom: 30px;
     }

     .service-box {
         margin-bottom: 25px;
     }

     .service-title {
         color: var(--heading-dark);
         font-size: 1.3rem;
         font-weight: 700;
         margin-bottom: 8px;
     }

     .service-desc {
         color: var(--text-gray);
         font-size: 0.95rem;
         line-height: 1.6;
     }

     .text-primary {
         color: #206695 !important;
     }

     .small,
     small {
         font-size: 1rem;
     }

     /* Styling to match the specific image features */
     .offer-card {
         position: relative;
         padding: 75px 30px 40px 30px;
         height: 100%;
         background-color: #fcfcfc;
         border: 1px solid #eee;
         border-radius: 5px;
         transition: all 0.3s ease;
     }

     /* Background toggle for specific cards */
     .bg-light-blue {
         background-color: #f1f8ff;
         border-color: #dbeaff;
     }

     /* Floating Icon Box */
     .icon-box {
         position: absolute;
         top: 0;
         right: 0;
         width: 60px;
         height: 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 1.5rem;
     }

     .accent-green {
         border-top: 3px solid #198754;
     }

     .accent-green .icon-box {
         background-color: #198754;
     }

     .accent-blue {
         border-bottom: 3px solid #206695;
     }

     .accent-blue .icon-box {
         background-color: #206695;
     }

     .green-divider {
         width: 30px;
         height: 3px;
         background-color: #20c997;
     }

     .offer-card .btn-primary {
         background-color: #206695;
         border: none;
         font-size: 0.75rem;
         letter-spacing: 1px;
         padding-top: 10px;
         padding-bottom: 10px;
     }

     .offer-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     }

     .cta-section {

         background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
             url('../bg/bg2.jpg');
         background-size: cover;
         background-position: center;
         padding: 100px 0;
         color: white;
         text-align: center;
     }

     .cta-title {
         font-size: 3rem;
         font-weight: 600;
         line-height: 1;
         max-width: 730px;
         margin: 0 auto 25px auto;
     }

     .cta-description {
         font-size: 1.1rem;
         max-width: 700px;
         margin: 0 auto 35px auto;
         opacity: 0.9;
         line-height: 1.6;
     }

     .btn-discover {
         background-color: #2b6da0;
         color: white;
         padding: 12px 35px;
         font-weight: 600;
         letter-spacing: 1px;
         border-radius: 4px;
         border: none;
         transition: background 0.3s ease;
         text-transform: uppercase;
     }

     .btn-discover:hover {
         background-color: #1a4d75;
         color: white;
     }

     @media (max-width: 768px) {
         .cta-title {
             font-size: 2.2rem;
         }

         .cta-section {
             padding: 80px 20px;
         }
     }

     .why-choose-us {
         background:
             url('../bg/why-chooseus-bg.png');
         position: relative;
     }

     .fw-extrabold {
         font-weight: 800;
     }

     .ls-1 {
         letter-spacing: 1px;
     }

     .icon-square {
         width: 50px;
         height: 50px;
         min-width: 50px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
     }

     .bg-success-dark {
         background-color: #0b7a4d !important;
     }

     .bg-fade-wrapper {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 100%;
         z-index: 1;
         opacity: 0.15;
         filter: grayscale(100%);
     }

     .bg-document {
         width: 80%;

     }

     .main-professional {
         position: relative;
         z-index: 2;
         max-height: 700px;
         filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
         bottom: -70px;
     }

     @media (max-width: 991px) {
         .bg-fade-wrapper {
             display: none;
         }

         .display-5 {
             font-size: 2rem;
         }
     }

     .hero-section1 {
         position: relative;
         min-height: 550px;
         display: flex;
         align-items: center;
         background: linear-gradient(90deg, #001f3f 20%, rgba(0, 31, 63, 0.4) 60%, transparent 100%),
             url('../bg/bg3.png');
         background-size: cover;
         background-position: center;
         color: white;

     }

     .hero-title1 {
         font-size: 5rem;
         font-weight: 700;
         line-height: 1;
         margin-bottom: 0;
     }

     .hero-subtitle1 {
         font-size: 4rem;
         font-weight: 400;
         margin-bottom: 10px;
     }

     .hero-description1 {
         font-size: 2.5rem;
         font-weight: 300;
         /* border-bottom: 3px solid white; */
         display: inline-block;
         padding-bottom: 5px;
         margin-bottom: 40px;
     }

     .underline {

         text-decoration: underline;
         text-decoration-thickness: 3px;
         text-underline-offset: 4px;

     }


     .btn-talk {
         background-color: #1E293B;
         color: white;
         border: none;
         padding: 10px 25px;
         border-radius: 12px;
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 10px;
         text-decoration: none;
         width: fit-content;
         transition: transform 0.2s ease, background-color 0.2s ease;
     }

     .btn-talk:hover {
         background-color: #d35400;
         color: white;
         transform: scale(1.05);
     }

     .avatar-circle {
         width: 30px;
         height: 30px;
         background-color: white;
         border-radius: 50%;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .avatar-circle img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     @media (max-width: 991px) {
         .hero-title {
             font-size: 3.5rem;
         }

         .hero-subtitle {
             font-size: 2.5rem;
         }

         .hero-description {
             font-size: 1.5rem;
         }
     }


     .trusted-section {
         background-color: #f9fafb;
     }

     .trusted-title {
         font-size: 2.2rem;
         line-height: 1.3;
         max-width: 450px;
     }


     .accent-container {
         position: relative;
         color: #198754;
         display: inline-block;
     }

     .accent-line {
         position: absolute;
         bottom: -10px;
         left: 0;
         width: 100%;
         height: 15px;
     }

     .logo-tile {
         background-color: #f1f3f5;
         border-radius: 8px;
         height: 100px;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 20px;
         transition: all 0.3s ease;
     }

     .logo-tile img {
         max-width: 100%;
         max-height: 40px;
         filter: grayscale(100%);

         opacity: 0.7;
     }

     .logo-tile:hover {
         background-color: #e9ecef;
         transform: translateY(-3px);
     }

     .logo-tile:hover img {
         opacity: 1;
         filter: grayscale(0%);

     }

     @media (max-width: 768px) {
         .trusted-title {
             font-size: 1.8rem;
             text-align: center;
         }
     }



     .cta-section1 {

         background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
             url('../bg/bg2.jpg');
         background-size: cover;
         background-position: center;
         padding: 100px 0;
         color: white;
         text-align: center;
     }

     .cta-title1 {
         font-size: 3rem;
         font-weight: 600;
         line-height: 1.2;
         max-width: 650px;
         margin: 0 auto 20px auto;
     }

     .cta-description1 {
         font-size: 1rem;
         max-width: 700px;
         margin: 0 auto 35px auto;
         opacity: 0.9;
         line-height: 1.6;
     }

     .custom-footer {
         background-color: #22284A;

         color: #fff;
         padding: 25px 0 0px 0;
         font-family: sans-serif;
     }

     .footer-bottom-border {
         border-bottom: 2px solid rgb(105, 105, 105);
         padding-bottom: 20px;
         margin-bottom: 40px;
     }

     .footer-logo {
         font-size: 24px;
         font-weight: bold;
         text-decoration: none;
         color: white !important;
     }

     .contact-info {
         text-align: left;
     }

     .contact-info .phone {
         font-size: 18px;
         font-weight: bold;
     }

     .footer-column h5 {
         font-size: 18px;
         font-weight: bold;
         margin-bottom: 25px;
     }

     .footer-links-list {
         list-style: none;
         padding: 0;
     }

     .footer-links-list li {
         margin-bottom: 5px;
     }

     .footer-links-list a {
         color: #b5b5b5;
         text-decoration: none;
         font-size: 14px;
         transition: 0.3s;
     }

     .footer-links-list a:hover {
         color: #ffffff;
     }

     .newsletter-input {
         border-radius: 4px;
         border: none;
         padding: 12px;
         width: 100%;
         margin-bottom: 15px;
     }

     .btn-submit {
         background-color: #2ecc71;
         color: white;
         width: 100%;
         border: none;
         padding: 12px;
         font-weight: bold;
         text-transform: uppercase;
         border-radius: 4px;
     }

     .footer-bottom {
         border-top: 2px solid rgb(105, 105, 105);
         margin-top: 50px;
         padding-top: 20px;
         font-size: 13px;
         color: #b0b5c1;
     }

     .footer-bottom a {
         color: #b0b5c1;
         text-decoration: none;
         margin-left: 20px;
         font-size: 18px;
         font-weight: 400;

     }

     .footer-bottom p {
         color: #b0b5c1;
         text-decoration: none;
         margin-left: 20px;
         font-size: 18px;
         font-weight: 400;

     }

     /* ========================= */
     /* FOOTER MOBILE RESPONSIVE */
     /* ========================= */

     @media (max-width: 991px) {

         /* Reduce aggressive side padding */
         .custom-footer .row[style] {
             padding: 0 30px !important;
         }
     }

     @media (max-width: 767px) {

         /* Footer base spacing */
         .custom-footer {
             padding: 30px 0 10px 0;
             text-align: center;
         }

         /* Top logo + contact section */
         .footer-bottom-border {
             text-align: center;
         }

         .footer-bottom-border .col-md-8,
         .footer-bottom-border .col-md-4 {
             margin-bottom: 20px;
         }

         .contact-info {
             text-align: center;
         }

         .contact-info .d-flex {
             justify-content: center !important;
             padding-bottom: 15px;
         }

         /* Footer links section */
         .custom-footer .row.mt-5 {
             padding: 0 20px !important;
         }

         .custom-footer .row.mt-5 .col {
             margin-bottom: 30px;
         }

         .footer-links-list li {
             margin-bottom: 8px;
         }

         /* Newsletter */
         .newsletter-input,
         .btn-submit {
             max-width: 320px;
             margin-left: auto;
             margin-right: auto;
         }

         /* Bottom bar */
         .footer-bottom {
             text-align: center;
             margin-top: 30px;
         }

         .footer-bottom .col-md-7,
         .footer-bottom .col-md-5 {
             margin-bottom: 10px;
         }

         .footer-bottom a,
         .footer-bottom p {
             margin-left: 0;
             margin-right: 12px;
             font-size: 14px;
             display: inline-block;
         }
     }

     @media (max-width: 480px) {

         /* Logo scale */
         .footer-logo img {
             max-width: 180px;
             height: auto;
         }

         /* Text sizing refinement */
         .footer-links-list a {
             font-size: 13px;
         }

         .footer-bottom a,
         .footer-bottom p {
             font-size: 13px;
         }
     }


     html,
     body {
         max-width: 100%;
         overflow-x: hidden;
     }

     .col-banner {
         width: 60%;
     }

     .lead {
         font-size: 1rem !important;
     }



     @media (max-width: 991px) {
         .btn-banner {
             height: 50px !important;
             padding: 10px;
             font-size: 13px;
         }

         .custom-footer h5 {
             font-size: 1.1rem;
         }

         .why-choose-us {

             position: relative;
             background-size: 117%;
             background-repeat: no-repeat;
         }

         .main-img {
             height: 350px !important;
             width: 100%;
             display: block;
             height: auto;
         }

         .main-professional {
             display: none;
         }

         .col-banner {
             width: 100% !important;
         }

         .hero-title1 {
             font-size: 3.5rem;
         }

         .hero-subtitle1 {
             font-size: 2.5rem;
         }

         .custom-services-section {
             height: auto;
             padding: 25px 0;
         }

         .navbar-nav {
             padding-left: 0;
             background-color: rgba(0, 0, 0, 0.9);
             padding: 20px;
             margin-top: 15px;
             border-radius: 5px;
         }
     }

     @media (max-width: 768px) {


         .why-choose-us {

             position: relative;
             background-size: 100%;
             background-repeat: no-repeat;
         }

         .navbar {
             padding: 15px 0;
             position: relative;
             background-color: #10232C !important;
         }

         .navbar-brand {
             font-size: 1.2rem;
         }

         .hero-section,
         .hero-section1 {
             height: auto;
             min-height: 400px;
             padding: 60px 0;
             text-align: left;
             background-position: right;
         }

         .hero-title1 {
             font-size: 2.5rem;
         }

         .hero-subtitle1 {
             font-size: 1.8rem;
         }

         .hero-description1 {
             font-size: 1.1rem;
             margin-bottom: 25px;
         }

         .service-item {
             flex-direction: column;
             text-align: center;
             margin-bottom: 30px;
             padding: 0;
         }

         .service-icon {
             margin-right: 0;
             margin-bottom: 15px;
             font-size: 50px;
         }

         .service-text {
             font-size: 12px;
             max-width: 100%;
         }

         .border-divider {
             border-right: none;
             border-bottom: 0px solid rgba(255, 255, 255, 0.2);
             /* padding-bottom: 0px; */
             /* margin-bottom: 0px; */
         }

         .border-divider:last-child {
             border-bottom: none;
         }

         .main-title {
             font-size: 2rem;

         }

         .counter-bar {
             flex-wrap: wrap;

             padding: 20px 10px;
         }

         .counter-item {
             border-right: none;
             margin-bottom: 20px;
         }

         .counter-number,
         .counter-suffix {
             font-size: 1.8rem;
         }

         .offer-card {
             margin-bottom: 30px;
             padding: 40px 20px;
         }

         .icon-box {
             width: 50px;
             height: 50px;
             font-size: 1.2rem;
         }

         .cta-section,
         .cta-section1 {
             padding: 60px 0;
         }

         .cta-title,
         .cta-title1 {
             font-size: 1.8rem;
             padding: 0 15px;
         }

         .cta-description,
         .cta-description1 {
             font-size: 0.95rem;
             padding: 0 15px;
         }

         .footer-bottom {
             text-align: center;
             margin-top: 30px;
         }

         .footer-bottom a,
         .footer-bottom p {
             margin-left: 0;
             margin: 5px 10px;
             font-size: 14px;
             display: inline-block;
         }

         .col-banner {
             width: 100% !important;
             padding: 0 15px;
         }

         .container,
         .container-fluid {
             padding-right: 15px;
             padding-left: 15px;
         }

         .navbar-brand img {
             max-width: 180px;
             height: auto;
             width: 100%;
         }

         .navbar-brand {
             display: flex;
             justify-content: left;
             /* width: 100%; */
             margin-right: 0 !important;
         }
     }


     .human-advisor-explore {
         padding: 110px 0;
         background-color: #ffffff;
     }

     .advisor-explore-card {
         border: 1px solid #e5e7eb;
         padding: 35px;
         height: 100%;
         transition: all 0.3s ease;
         background-color: #fff;
     }

     .advisor-explore-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
     }

     .advisor-explore-card h5 {
         font-size: 1.3rem;
         font-weight: 600;
         margin-bottom: 12px;
     }

     .advisor-explore-card p {
         color: #555;
         font-size: 0.95rem;
         margin-bottom: 18px;
     }

     .advisor-explore-card ul {
         list-style: none;
         padding-left: 0;
         margin-bottom: 22px;
     }

     .advisor-explore-card ul li {
         padding-left: 20px;
         margin-bottom: 10px;
         position: relative;
         font-size: 0.9rem;
         color: #444;
     }

     .advisor-explore-card ul li::before {
         content: "•";
         position: absolute;
         left: 0;
         color: #198754;
         font-size: 18px;
     }

     .advisor-explore-card.highlighted {
         border-color: #206695;
         background-color: #f1f8ff;
     }

     .explore-link {
         font-weight: 600;
         font-size: 0.9rem;
         color: #206695;
         text-decoration: none;
     }

     .explore-link:hover {
         text-decoration: underline;
     }

     /* ....................................about after */
     .human-why-section {
         padding: 90px 0;
         background-color: #f9fafb;
     }

     .human-reasons {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
     }

     .human-reasons .reason {
         background: #ffffff;
         padding: 18px;
         border-left: 4px solid #198754;
         font-weight: 500;
     }

     .human-explore-cta {
         padding: 80px 0;
         background: linear-gradient(90deg, #206695, #0b7a4d);
     }


     /* --- Colors --- */
     :root {
         --primary-color: #1152d4;
         --gold-color: #D4AF37;
     }

     .text-primary-custom {
         color: var(--primary-color) !important;
     }

     .text-gold {
         color: var(--gold-color) !important;
     }

     /* --- Buttons --- */
     .btn-primary {
         background-color: var(--primary-color);
         border-color: var(--primary-color);
     }

     .btn-primary:hover {
         background-color: #0d42af;
         border-color: #0d42af;
     }

     /* --- Icon Fixes --- */
     .material-symbols-outlined {
         vertical-align: middle;
     }

     /* This class makes the stars solid/filled */
     .material-symbols-outlined.fill-icon {
         font-variation-settings: 'FILL' 1;
     }

     /* --- Card Styling --- */
     .advisor-card {
         background-color: white;
         border-radius: 1rem;
         border: 1px solid #e2e8f0;
         transition: all 0.3s ease;
     }

     .advisor-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         border-color: rgba(212, 175, 55, 0.5);
         /* Gold border on hover */
     }

     /* --- Image Wrapper --- */
     .advisor-img-wrapper {
         position: relative;
         border-radius: 0.75rem;
         overflow: hidden;
         aspect-ratio: 1/1;
     }

     .advisor-img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         filter: grayscale(100%);
         transition: filter 0.5s ease;
     }

     .advisor-card:hover .advisor-img {
         filter: grayscale(0%);
     }

     /* --- Rating Badge --- */
     .rating-badge {
         position: absolute;
         bottom: 12px;
         left: 12px;
         right: 12px;
         background: rgba(255, 255, 255, 0.95);
         /* backdrop-filter: blur(4px); */
         border-radius: 0.5rem;
         padding: 6px 12px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border: 1px solid rgba(212, 175, 55, 0.3);
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     }