@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");
/*  font-family: "Red Hat Display", sans-serif; */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");
/* font-family: "DM Serif Display", serif; */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");
/*   font-family: "Cormorant Garamond", serif; */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
/*  font-family: "Manrope", sans-serif; */

:root {
    --pine: #00476e;
    --pine-2: #006aa4;
    --brass: #00a657;
    --brass-2: #35ca82;
    --sky: #e6f3fa;
    --ink: #0d2233;
    --muted: #587084;
    --paper: #f4f9fc;
    --white: #f4f9fc;
    --bs-body-font-family: "Manrope", sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --ease:cubic-bezier(.22,1,.36,1);
}

/* font-family: "Instrument Serif", serif; */
html,
body {
    margin: 0;
    padding: 0;
    color: #333;
    font-family: "Manrope", sans-serif;
}

body {
    font-size: 16px;
    color: #333;
    font-family: "Manrope", sans-serif;
    background-color: #f4f9fc;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #000;
}

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

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

h1,
h2,
h3,
h4,
.brand {
    font-family: "Bricolage Grotesque", sans-serif;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
}

.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

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

.btn-brass {
    background: var(--brass);
    color: var(--white);
    border: 0;
}

.btn-brass:hover {
    background: var(--brass-2);
    color: var(--white);
    box-shadow: 0 10px 24px -8px rgba(245, 184, 61, 0.7);
}

.btn-ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
}

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

.btn-pine {
    background: var(--pine);
    color: #fff;
}

.btn-pine:hover {
    background: var(--pine-2);
    color: #fff;
}

/* End btn outline defult */

/* Hero Section */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1320px;
}


@media (min-width:1200px){

  /* 1. Each menu item fills the full height of the header bar,
        so the pointer never leaves the item between link and menu */
  .capsule .navbar-collapse{align-items:stretch !important}
  .capsule .navbar-nav{align-items:stretch !important;margin-top:0 !important;margin-bottom:0 !important}
  .capsule .navbar-nav .nav-item{display:flex;align-items:center}

  /* 2. Menus are always rendered but hidden until hover (fade and slide).
        The 0.35s delay on "visibility" is a grace period before closing */
  .capsule .dropdown>.dropdown-menu{
    display:block;top:100%;margin-top:0 !important;
    visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .35s;
  }
  .capsule .dropdown:not(.position-static)>.dropdown-menu{left:0}

  /* 3. Invisible hover bridge: fills the gap between the link and the menu,
        so you can move the mouse down into the menu without it closing */
  .capsule .dropdown>.dropdown-menu::before{
    content:"";position:absolute;left:0;right:0;top:-44px;height:44px;
  }

  /* 4. Open on mouse hover, or on keyboard focus for accessibility */
  .capsule .dropdown:hover>.dropdown-menu,
  .capsule .dropdown:focus-within>.dropdown-menu{
    visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s;
  }

  /* 5. Matching look on the link while its menu is open */
  .capsule .dropdown:hover>.nav-link{background:none;color:var(--pine-2)}
  .capsule .dropdown:hover>.nav-link::before{width:55%}
  .capsule .dropdown:hover>.dropdown-toggle::after{transform:rotate(180deg)}
}

/*================================================
 Progress  CSS Start
=================================================*/

.progress-container {
    background-color: #f9f9f9;
    height: 6px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1111111;
}

.progress-container .progress-bar {
    background-color: #0baee9;
    height: 6px;
    width: 0%;
}

.scroll-top {
    width: 50px;
    height: 75px;
    background: var(--brass);
    text-align: center;
    line-height: 42px;
    font-size: 20px;
    color: #fff;
    border-radius: 20px 20px 0 0;
    position: fixed;
    bottom: -100px;
    right: 30px;
    z-index: 99999;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.scroll-top.show {
    bottom: 0px;
    opacity: 1;
}

.scroll-top.hide {
    bottom: -100px;
    opacity: 0;
}

.container {
    max-width: 1440px;
}

.title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800
}

.kick {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pine-2);
    margin-bottom: .8rem
}

.kick::before,
.text-center>.kick::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--brass);
    border-radius: 2px
}

.sub {
    color: var(--muted);
    max-width: 38rem
}

.ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 1rem
}

/*================================================
 Processing Section End
=================================================*/


/* === Keyframes === */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(40px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fl {
    50% {
        transform: translateY(-12px)
    }
}

@keyframes nudge {

    0%,
    100% {
        transform: translate(-50%, 0)
    }

    50% {
        transform: translate(-50%, 8px)
    }
}

@keyframes smoke {
    0% {
        opacity: .9;
        transform: translateY(10px)
    }

    100% {
        opacity: 0;
        transform: translateY(-8px)
    }
}

@keyframes glow {
    50% {
        opacity: .35
    }
}

@keyframes pl2 {
    50% {
        transform: scale(1.12)
    }
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.9)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes ringp {
    50% {
        transform: translate(8px, 8px);
        opacity: .5
    }
}

@keyframes ken {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.12) translate(-1.5%, -1%)
    }
}

@keyframes shine {

    40%,
    100% {
        transform: translateX(120%)
    }
}

@keyframes stepIn {
    from {
        opacity: 0;
        transform: translateX(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

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


@media (max-width:1199.98px){
  /* A dropdown shows only while it has the "show" class (set by the script below) */
  .capsule .dropdown-menu{display:none;position:static !important;transform:none !important;float:none;width:100%;margin:.3rem 0 .8rem !important;box-shadow:none !important;border:1px solid #d6e7f1;border-top:3px solid var(--brass);border-radius:16px}
  .capsule .dropdown-menu.show{display:block}
  /* The open menu scrolls inside the screen, so the lower items can be reached */
  .capsule .navbar-collapse{max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .capsule .dropdown-toggle{display:flex;align-items:center;justify-content:space-between}
  .mega{padding:.6rem !important}
}

/*================================================
 Nav Section Start
=================================================*/
/* header v3: topbar + hanging logo tab */
.nav-wrap {
    padding: 0 !important;
    background: #fff;
    box-shadow: 0 10px 30px -16px rgba(0, 30, 50, 0.45);
}

.topbar {
    background: var(--pine);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    max-height: 40px;
    overflow: hidden;
    transition:
        max-height 0.35s,
        opacity 0.35s;
}

.topbar .container {
    height: 40px;
}

.topbar a {
    color: rgba(255, 255, 255, 0.85);
}

.topbar a:hover {
    color: var(--brass-2);
}

.topbar i {
    color: var(--brass);
    margin-right: 0.4rem;
}

.tb-l,
.tb-r {
    display: flex;
    gap: 1.4rem;
    align-items: center;
}

.tb-r {
    gap: 0.9rem;
}

.tb-r span {
    margin-right: 0.6rem;
    padding-right: 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
}

.tb-r i {
    margin: 0;
}

.nav-wrap.solid .topbar {
    max-height: 0;
    opacity: 0;
}

.mainbar {
    background-color: #fff;
}

.mainbar .container {
    max-width: 1280px;
}

.capsule {
    background: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 0;
    min-height: 78px;
    align-items: flex-start;
}

.nav-wrap.solid .capsule {
    box-shadow: none;
}

.capsule .navbar-collapse {
    align-self: stretch;
    align-items: center;
    height: auto !important;
}

.capsule .brand-block {
    background: linear-gradient(165deg, #fff, #ffff);
    color: #fff;
    padding: 10px;
    margin: 0 1.5rem -18px 0;
    height: 96px;
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 18px),
            50% 100%,
            0 calc(100% - 18px));
    border-radius: 0 0 4px 4px;
    transition: 0.3s;
}

.capsule .brand-block:hover {
    filter: brightness(1.1);
}

.capsule .brand-block img {
    max-width: 175px;
}

.capsule .brand-block i {
    background: var(--brass);
    color: var(--pine);
    border-radius: 12px 12px 12px 3px;
}

.capsule .brand-block small {
    color: rgba(255, 255, 255, 0.75);
}

.capsule .nav-link {
    border-radius: 0;
    padding: 0.6rem 1.05rem !important;
}

.capsule .nav-link:hover,
.capsule .nav-link.show {
    background: none;
    color: var(--pine-2);
}

.capsule .nav-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.1rem;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--brass);
    transform: translateX(-50%);
    transition: width 0.3s;
}

.capsule .nav-link:hover::before,
.capsule .nav-link.show::before {
    width: 55%;
}

.capsule .dropdown-toggle::after {
    transition: transform 0.25s;
}

.capsule .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.capsule .dropdown-menu.mega {
    margin-top: 0 !important;
    border-top: 3px solid var(--brass);
    border-radius: 0 0 20px 20px;
}

.mega {
    border-radius: 0 0 22px 22px !important;
}

@media (max-width: 1199px) {
    .capsule {
        align-items: center !important;
        min-height: 0;
        flex-wrap: wrap;
        padding-bottom: 0.5rem;
    }

    .capsule .brand-block {
        margin: 0;
        height: auto;
        padding: 0.7rem 1.1rem;
        clip-path: none;
        border-radius: 0 0 16px 16px;
    }

    .capsule .navbar-toggler {
        margin-left: auto;
    }

    .capsule .nav-link::before {
        display: none;
    }

    .capsule .nav-link:hover {
        background: var(--sky);
    }

    .capsule .dropdown-menu {
        border-top: 0;
        border-radius: 14px;
    }

    .mainbar .container {
        max-width: none;
    }
}

/* capsule header */
.nav-wrap {
    padding: 0.9rem 0;
}

.nav-wrap {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    transition: .3s;
}

.nav-wrap.solid {
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0.5rem 0;
}

.capsule {
    background: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 0;
    min-height: 78px;
    align-items: flex-start;
}

.nav-wrap.solid .capsule {
    box-shadow: 0 14px 34px -14px rgba(0, 30, 50, 0.6);
}

.capsule .brand {
    color: var(--pine);
    gap: 0.65rem;
    line-height: 1;
}

.capsule .brand i {
    background: linear-gradient(135deg, var(--pine-2), var(--pine));
    color: var(--brass-2);
    border-radius: 12px 12px 12px 3px;
}

.capsule .brand span {
    display: flex;
    flex-direction: column;
    font-size: 1.15rem;
}

.capsule .brand small {
    font-family: "Figtree";
    font-weight: 500;
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-top: 2px;
}

.capsule .nav-link {
    position: relative;
}

.capsule .dropdown-toggle::after {
    vertical-align: 0.15em;
    border-width: 0.28em 0.28em 0;
}

.mega {
    left: 0;
    right: 0;
    padding: 1rem !important;
}

.mega-promo {
    background: linear-gradient(150deg, var(--pine-2), var(--pine));
    color: #fff;
    border-radius: 16px;
    padding: 1.3rem;
    height: 100%;
}

.mega-promo>i {
    font-size: 1.8rem;
    color: var(--brass-2);
}

.mi {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    color: var(--ink);
    transition: 0.2s;
}

.mi:hover {
    background: var(--sky);
    transform: translateX(4px);
}

.mi i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex: none;
}

.mi:hover i {
    background: var(--pine-2);
    color: #fff;
}

.mi b {
    display: block;
    font-size: 0.95rem;
}

.mi small {
    color: var(--muted);
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-cta .call {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    transition: 0.2s;
}

.nav-cta .call:hover {
    background: var(--pine-2);
    color: #fff;
    transform: rotate(-12deg);
}

.btn-sched {
    color: var(--pine-2);
    border: 1.5px solid var(--pine-2);
    padding: 0.5rem 1.1rem;
}

.btn-sched:hover {
    background: var(--pine-2);
    color: #fff;
}

.btn-apply {
    background: var(--pine);
    color: #fff;
    padding: 0.55rem 1.3rem;
    position: relative;
    overflow: hidden;
}

.btn-apply:hover {
    background: var(--brass);
    color: var(--white);
}

.capsule .navbar-toggler {
    border: 0;
    color: var(--pine);
    padding: 0.1rem 0.5rem;
}

.capsule .navbar-toggler:focus {
    box-shadow: none;
}

@media (max-width: 1199px) {
    .capsule {
        border-radius: 28px;
        flex-wrap: wrap;
    }

    .capsule .navbar-collapse {
        background: none !important;
        margin: 0 !important;
        padding: 2.4rem 0 2.4rem !important;
        border-radius: 0 !important;
    }

    .mega {
        padding: 0.6rem !important;
        position: static;
        box-shadow: none !important;
    }

    .nav-cta {
        flex-wrap: wrap;
        margin-top: 0.6rem;
    }

    .capsule .dropdown-menu {
        margin-top: 0.2rem !important;
    }
}

@media (min-width: 1200px) {
    .mega {
        width: auto;
    }
}


.capsule .nav-link.active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.1rem;
    width: calc(100% - 1.8rem);
    height: 3px;
    border-radius: 3px;
    background: var(--brass);
    transform: translateX(-50%);
    transition: width 0.3s;
}

.capsule .dropdown-menu {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(0, 30, 50, .5);
    padding: .6rem;
    margin-top: .9rem !important;
}

.capsule .dropdown-item {
    border-radius: 12px;
    padding: .55rem .9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.capsule .dropdown-item i {
    color: var(--pine-2);
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--pine-2);
    text-decoration: none;
    background-color: var(--sky);
}

/*================================================
 nav Section End
=================================================*/

/*================================================
 loan Section End
=================================================*/
.loan-section {
    padding: 4rem 0 0;
}

.loan-section h2 {
    font-size: clamp(1.6rem, 3.1vw, 32px);
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 1rem;
}
.loan-section  p {
    font-size: 18px;
    color: #000000;
    margin: 15px 0px;
}
.loan-section .container {
    max-width: 1320px;
}
.loan-section ul{
    list-style: disc !important;
    padding-left: 30px !important;
    margin-bottom: 20px;
}
.loan-section ul li{
    list-style: disc !important;
}
.loan-section ol li{
    list-style: auto !important;
     margin-left: 20px !important;
}

/*================================================
 loan Section End
=================================================*/



h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
}

h1 {
    font-size: clamp(2.3rem, 4.8vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.028em;
    line-height: 1.05;
    font-family: var(--font-display);
}

h1 span {
    font-weight: 800;
}

h2 {
    font-size: clamp(1.6rem, 3.1vw, 48px);
    line-height: 1.2;
    font-weight: 800;
}

h3 {
    font-size: 1.02rem;
    letter-spacing: 0;
}

h2 span.green {
    font-style: italic;
    font-weight: 900;
}

.green {
    color: var(--green-dark);
}

a {
    text-decoration: none;
}

/*================================================
 Hero Section Start
=================================================*/

.hero {
    min-height: auto;
    background: radial-gradient(900px 500px at 85% 20%, rgba(0, 106, 164, .9), transparent 60%), linear-gradient(160deg, #00283f, var(--pine) 60%, #005a8c);
    padding: 12rem 0 7rem
}

.hero .dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 80%);
    mask-image: linear-gradient(90deg, #000, transparent 80%)
}

.hero .glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: 0;
    top: 10%;
    background: radial-gradient(circle, rgba(245, 184, 61, .35), transparent 65%);
    filter: blur(10px)
}

.pill-note {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: .4rem 1rem;
    border-radius: 99px;
    font-size: .92rem;
    margin-bottom: 1.4rem
}

.pill-note b {
    color: var(--brass-2);
    display: inline-block;
    min-width: 8.5rem;
    transition: opacity .3s, transform .3s
}

.pill-note b.out {
    opacity: 0;
    transform: translateY(8px)
}

.pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    animation: pl 2s infinite
}

@keyframes pl {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, .7)
    }

    70% {
        box-shadow: 0 0 0 10px rgba(74, 222, 128, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0)
    }
}

.quick {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 1.1rem 1.2rem;
    max-width: 36rem
}

.quick .nav-link {
    color: #fff;
    border-radius: 99px;
    font-weight: 600;
    padding: .4rem 1rem
}

.quick .nav-link.active {
    background: var(--brass);
    color: var(--pine)
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .9)
}

.trust i {
    color: var(--brass);
    margin-right: .4rem
}

.arch {
    position: relative;
    width: min(430px, 100%);
    margin: auto;
    aspect-ratio: 4/5.2
}

.arch .shape {
    position: absolute;
    inset: 10% 8% 0;
    background: linear-gradient(160deg, var(--brass-2), var(--brass) 70%);
    border-radius: 999px 999px 30px 30px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6)
}

.arch .ring {
    position: absolute;
    inset: 0 0 12%;
    border: 2px dashed rgba(244, 201, 93, .45);
    border-radius: 50%;
    animation: spin 40s linear infinite
}

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

.arch img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-height: 96%;
    object-fit: contain;
    filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .35))
}

.fcard {
    position: absolute;
    display: flex;
    gap: .7rem;
    align-items: center;
    background: rgba(255, 255, 255, .96);
    color: var(--ink);
    border-radius: 16px;
    padding: .7rem 1rem;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
    animation: fl 7s ease-in-out infinite;
    line-height: 1.2
}

@keyframes fl {
    50% {
        transform: translateY(-12px)
    }
}

.fcard i {
    font-size: 1.5rem;
    color: var(--pine-2)
}

.fcard b {
    display: block;
    font-size: .92rem
}

.fcard small {
    color: var(--muted);
    font-size: .76rem
}

.fcard.c1 {
    left: -6%;
    top: 14%
}

.fcard.c2 {
    right: -4%;
    top: 46%;
    animation-delay: 1.5s
}

.fcard.c3 {
    left: 2%;
    bottom: 7%;
    animation-delay: 3s
}

.fcard.c3:hover {
    background: var(--brass-2)
}

@media(max-width:575px) {
    .fcard.c1 {
        left: 0
    }

    .fcard.c2 {
        right: 0
    }

    .fcard {
        padding: .5rem .7rem
    }

    .hero {
        padding-bottom: 6rem
    }
}

.scroll-cue {
    position: absolute;
    left: 50%;
    color: rgba(255, 255, 255, .6);
    font-size: 1.4rem;
    animation: nudge 2.4s infinite;
    z-index: 11;
}

@keyframes nudge {

    0%,
    100% {
        transform: translate(-50%, 0)
    }

    50% {
        transform: translate(-50%, 8px)
    }
}

@media(max-width:991px) {
    .scroll-cue {
        display: none
    }
}


/* hero big image */
.hero-img {
    position: relative;
    max-width: 540px;
    margin: auto;
    padding-bottom: 3.5rem
}

.hero-img::before {
    content: "";
    position: absolute;
    inset: -14px 14px 3.5rem -14px;
    border: 2px solid var(--brass);
    border-radius: 210px 30px 30px 30px;
    animation: ringp 5s ease-in-out infinite
}

@keyframes ringp {
    50% {
        transform: translate(8px, 8px);
        opacity: .5
    }
}

.hero-img .frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/4.4;
    border-radius: 200px 28px 28px 28px;
    box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .7);
    background: var(--pine-2)
}

.hero-img .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: ken 16s ease-in-out infinite alternate
}

@keyframes ken {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.12) translate(-1.5%, -1%)
    }
}

.hero-img .frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%);
    transform: translateX(-120%);
    animation: shine 6s 1.5s infinite
}

@keyframes shine {

    40%,
    100% {
        transform: translateX(120%)
    }
}

.hero-img .badge-house img {
    max-width: 60px;
}

.hero-img .badge-house {
    left: auto;
    right: -14px;
    top: 12%;
    width: 96px;
    height: 96px;
    position: absolute;
    padding: 10px;
    border-radius: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ocard {
    position: absolute;
    left: -7%;
    bottom: 0;
    width: min(330px, 88%);
    background: rgba(255, 255, 255, .97);
    color: var(--ink);
    border-radius: 22px;
    padding: 1.2rem;
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6);
    animation: fl 8s ease-in-out infinite
}

.ocard .av {
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pine), var(--pine-2));
    color: var(--brass-2);
    display: grid;
    place-items: center;
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    flex: none
}

.ocard li {
    display: flex;
    gap: .6rem;
    margin-bottom: .35rem
}

.ocard li i {
    color: var(--brass)
}

.ocard a {
    color: var(--pine-2);
    word-break: break-all
}

.ocard .btn-pine {
    color: #fff;
    padding: 0.7rem 12px;
}

@media(max-width:575px) {
    .ocard {
        left: 0;
        width: 100%
    }

    .hero-img::before {
        inset: -8px 8px 3.5rem -8px
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 4.8vw, 4.6rem);
    font-weight: 800;
    line-height: .98;
    color: #fff;
}

.hero h1 span {
    display: block;
    color: var(--brass-2)
}

.hero p.lead {
    max-width: 34rem;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
}

.path {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
    max-width: 34rem
}

.path a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    transition: .25s
}

.path a:hover {
    background: #fff;
    color: var(--pine);
    transform: translateX(6px)
}

.path i {
    font-size: 1.5rem;
    color: var(--brass)
}

.path small {
    display: block;
    opacity: .75
}

.est {
    background: #fff;
    color: var(--ink);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
    position: relative
}

.est {
    z-index: 0
}

.est::before {
    content: "";
    position: absolute;
    inset: -10px -10px auto auto;
    width: 90px;
    height: 90px;
    background: var(--brass);
    border-radius: 0 28px 0 90px;
    z-index: -1
}

.est .big {
    font-family: 'Bricolage Grotesque';
    font-size: 3rem;
    font-weight: 800;
    color: var(--pine);
    line-height: 1
}

.form-range::-webkit-slider-thumb {
    background: var(--pine)
}


.lm-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    max-width: 30rem;
    padding: .9rem 1.2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    transition: .25s
}

.lm-bar .ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brass);
    color: var(--pine);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex: none
}

.lm-bar b {
    display: block
}

.lm-bar small {
    color: rgba(255, 255, 255, .75)
}

.lm-bar>i {
    transition: .25s;
    color: var(--brass-2)
}

.lm-bar:hover {
    background: #fff;
    color: var(--pine)
}

.lm-bar:hover small {
    color: var(--muted)
}

.lm-bar:hover>i {
    transform: translateX(5px)
}

/*================================================
 Hero Section End
=================================================*/

/*================================================
 Split Section Start
=================================================*/
.slip-bg {
    background-color: #fff;
}

.split {
    display: flex;
    align-items: stretch;
    margin-top: 0;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 99px;
    box-shadow: 0 25px 50px -25px rgba(0, 30, 50, .55);
    padding: .5rem;
    max-width: 900px;
    margin: 0 auto;
}

.half {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem 1.2rem;
    border-radius: 99px;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color .35s
}

.half::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--pine-2), var(--pine));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    z-index: -1
}

.h-agent::before {
    transform-origin: right;
    background: linear-gradient(90deg, var(--brass), var(--brass-2))
}

.half:hover {
    color: #fff
}

.h-agent:hover {
    color: var(--pine)
}

.half:hover::before {
    transform: scaleX(1)
}

.hi {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex: none;
    transition: .35s
}

.half:hover .hi {
    background: rgba(255, 255, 255, .2);
    color: inherit;
    transform: rotate(-10deg) scale(1.08)
}

.ht {
    display: flex;
    flex-direction: column;
    line-height: 1.2
}

.ht small {
    color: var(--muted);
    transition: .3s
}

.half:hover .ht small {
    color: var(--white);
    opacity: .8
}

.ht b {
    font-family: 'Bricolage Grotesque';
    font-size: 1.1rem
}

.ha {
    margin-left: auto;
    font-size: 1.2rem;
    transition: transform .3s
}

.half:hover .ha {
    transform: translateX(6px)
}

.or {
    align-self: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brass);
    color: var(--white);
    font-weight: 800;
    font-size: .8rem;
    display: grid;
    place-items: center;
    margin: 0 -.4rem;
    z-index: 1;
    box-shadow: 0 0 0 5px #fff;
    animation: pl2 3s ease-in-out infinite
}

@keyframes pl2 {
    50% {
        transform: scale(1.12)
    }
}

@media(max-width:767px) {
    .split {
        flex-direction: column;
        border-radius: 28px
    }

    .half {
        border-radius: 22px
    }

    .or {
        margin: -.3rem auto
    }
}

.half:hover .ht b {
    color: var(--white);
}

.half:hover .hi i {
    color: var(--white);
}

.half:hover .ha {
    color: var(--white);
}

.split-box {
    background: radial-gradient(900px 500px at 85% 20%, rgb(2 89 138), transparent 60%), linear-gradient(160deg, #024a73 60%, #005a8c);
    background-size: 100% 50%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: #ffffff;
}

.split-box-tow {
    position: relative;
    top: -60px;
}

/*================================================
 Split Section End
=================================================*/

/*================================================
  Journey selectorStart
=================================================*/
.journey-section {
    padding: 100px 0 120px;
}

.journey-section .container {
    max-width: 1124px;
}

.jlist {
    display: grid;
    gap: .7rem;
    height: 100%
}

.jopt {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1.5px solid #d6e7f1;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    position: relative;
    transition: .3s
}

.jopt .ji {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex: none;
    transition: .3s
}

.jopt .jar {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-8px);
    transition: .3s;
    color: var(--brass)
}

.jopt:hover {
    border-color: var(--pine-2)
}

.jopt.on {
    background: var(--pine-2);
    border-color: var(--pine-2);
    color: #fff;
    transform: translateX(10px);
    box-shadow: 0 20px 36px -22px rgba(0, 60, 100, .8)
}

.jopt.on .ji {
    background: var(--brass);
    color: var(--white)
}

.jopt.on .jar {
    opacity: 1;
    transform: none
}

.jpanel {
    height: 100%;
    min-height: 340px;
    border-radius: 28px;
    padding: 2.2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--pine-2), var(--pine));
    box-shadow: 0 35px 60px -35px rgba(0, 60, 100, .7)
}

.jpanel::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: -110px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 211, 110, .35);
    animation: spin 40s linear infinite
}

.jin {
    position: relative;
    z-index: 1;
    animation: stepIn .5s
}

.jin .lab {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass-2);
    font-weight: 700
}

.jin h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: .5rem 0
}

.jin p {
    color: rgba(255, 255, 255, .85);
    max-width: 30rem
}

.jch {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.2rem 0 1.6rem
}

.jch a {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 99px;
    padding: .3rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    transition: .2s
}

.jch a:hover {
    background: #fff;
    color: var(--pine)
}

@media(max-width:991px) {
    .jopt.on {
        transform: none
    }

    .jpanel {
        min-height: 0
    }
}

/*================================================
 Journey selector End
=================================================*/

/*================================================
 Journey selector End
=================================================*/
/* === Payment estimator === */
.est-sec .container {
    max-width: 1324px
}

.est-sec {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(700px 400px at 10% 0%, rgba(0, 106, 164, .55), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(245, 184, 61, .22), transparent 60%), linear-gradient(160deg, #00283f, #00476e)
}

.est-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%)
}

.est-sub {
    color: rgba(255, 255, 255, .7)
}

.gp {
    height: 100%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    border-radius: 28px;
    padding: 2rem
}

.gp .form-label b {
    color: var(--brass-2);
    font-family: 'Bricolage Grotesque';
    font-size: 1.1rem
}

.gp .form-range::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, .25);
    height: 6px;
    border-radius: 6px
}

.gp .form-range::-moz-range-track {
    background: rgba(255, 255, 255, .25);
    height: 6px;
    border-radius: 6px
}

.gp .form-range::-webkit-slider-thumb {
    background: var(--brass);
    margin-top: -7px;
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 5px rgba(245, 184, 61, .3)
}

.gp .form-range::-moz-range-thumb {
    background: var(--brass);
    width: 20px;
    height: 20px;
    border: 0
}

.gp .tg {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .35)
}

.gp .btn-check:checked+.tg {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--white)
}

.gp .form-control {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
    color: #fff
}

.rc {
    height: 100%;
    background: #fff;
    color: var(--ink);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .7)
}

.donut {
    position: relative;
    width: min(250px, 70%);
    margin: 0 auto 1.4rem
}

.donut svg {
    display: block;
    width: 100%
}

.donut circle {
    fill: none;
    stroke-width: 22
}

.donut .trk {
    stroke: var(--sky)
}

.donut .seg {
    transition: stroke-dasharray .6s ease, stroke-dashoffset .6s ease
}

.est-sec .dc {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2
}

.est-sec .dc small {
    color: var(--muted);
    font-size: .74rem
}

.dc .big {
    font-family: 'Bricolage Grotesque';
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--pine);
    line-height: 1.1
}

.lg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem 1.2rem;
    margin-bottom: 1rem
}

.lg li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem
}

.lg li i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none
}

.lg li b {
    margin-left: auto
}

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

    .gp,
    .rc {
        padding: 1.4rem
    }
}

/*================================================
 Journey selector End
=================================================*/

/*================================================
 About selector Start
=================================================*/
.about-section {
    background: #fff;
    padding: 120px 0;
}

.about-section .container {
    max-width: 1324px
}

.agents {
    background: var(--pine);
    color: #fff;
    border-radius: 32px;
    padding: 3.5rem;
    position: relative;
    overflow: hidden
}

.agents::after {
    content: "\F425";
    font-family: bootstrap-icons;
    position: absolute;
    right: -30px;
    bottom: -70px;
    font-size: 18rem;
    color: rgba(255, 255, 255, .05)
}

.nc {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 60px -35px rgba(0, 71, 110, .5)
}

.nc img.cover {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover
}

.res {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #fff;
    padding: 1.2rem 1.4rem;
    border-radius: 18px;
    color: var(--ink);
    border: 1px solid #d6e7f1;
    transition: .25s;
    height: 100%
}

.res:hover {
    border-color: var(--brass);
    transform: translateY(-3px);
    color: var(--ink)
}

.res i.l {
    font-size: 1.6rem;
    color: var(--brass)
}

.res i.r {
    margin-left: auto;
    color: var(--muted)
}

.quote {
    background: #fff;
    border-radius: 24px;
    padding: 2.2rem;
    text-align: center;
    max-width: 720px;
    margin: auto;
    box-shadow: 0 20px 40px -28px rgba(0, 71, 110, .5)
}

.quote p {
    font-family: 'Bricolage Grotesque';
    font-size: 1.3rem
}

.carousel-indicators [data-bs-target] {
    background: var(--pine);
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.officer {
    background: linear-gradient(135deg, var(--pine), var(--pine-2));
    color: #fff;
    border-radius: 32px;
    overflow: hidden
}

.officer img.ph {
    width: 100%;
    max-width: 280px;
    filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .3))
}

.officer a {
    color: #fff
}

.officer li {
    margin-bottom: .6rem
}

.officer li i {
    color: var(--brass);
    margin-right: .6rem
}

.soc a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    margin-right: .4rem;
    transition: .2s
}

.soc a:hover {
    background: var(--brass);
    color: var(--pine)
}

@media(max-width:767px) {
    section {
        padding: 3.8rem 0
    }

    .agents {
        padding: 2rem
    }
}

.about-section p {
    margin-bottom: 1.2rem;
}

.about-section .about-img-box {
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 0;
    min-width: 90px;
}

/*================================================
 About selector End
=================================================*/


/*================================================
 Construction selector Start
=================================================*/
.nc-sec .container {
    max-width: 1324px
}

.nc-sec h2 {
    margin-bottom: 1.2rem
}

.nc-sec p {
    margin-bottom: 1.2rem
}

.nc-sec {
    padding: 120px 0;
    position: relative
}

.nc-photo {
    position: relative;
    max-width: 520px;
    margin: auto;
    padding: 0 0 1.5rem 1.5rem
}

.nc-photo::before {
    content: "";
    position: absolute;
    inset: 2rem 2rem 0 0;
    border-radius: 32px;
    background: linear-gradient(150deg, var(--pine-2), var(--pine))
}

.nc-img {
    position: relative;
    overflow: hidden;
    border-radius: 32px 140px 32px 32px;
    aspect-ratio: 4/4.3;
    box-shadow: 0 40px 70px -35px rgba(0, 40, 63, .7)
}

.nc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s
}

.nc-photo:hover .nc-img img {
    transform: scale(1.07)
}

.pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    color: var(--pine);
    font-weight: 700;
    font-size: .85rem;
    padding: .4rem .9rem;
    border-radius: 99px;
    box-shadow: 0 14px 28px -12px rgba(0, 30, 50, .6);
    animation: fl 6s ease-in-out infinite
}

.pin i {
    color: var(--brass)
}

.p1 {
    top: 8%;
    left: 0
}

.p2 {
    top: 42%;
    right: -6px;
    animation-delay: 1.5s
}

.p3 {
    bottom: 20%;
    left: 2rem;
    animation-delay: 3s
}

.logo-card {
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--brass);
    border-radius: 10px;
    padding: .7rem 1.1rem;
    box-shadow: 0 20px 36px -16px rgba(0, 30, 50, .6)
}

.nc-tabs {
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 20px;
    padding: 1rem 1.2rem;
    box-shadow: 0 16px 30px -24px rgba(0, 60, 100, .5)
}

.nc-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--pine);
    background: var(--sky);
    padding: .4rem .9rem
}

.nc-tabs .nav-link.active {
    background: var(--pine-2);
    color: #fff
}

.nc-tabs .tab-content {
    min-height: 4.6rem;
    font-size: .95rem
}

.nc-tabs .tab-content b {
    color: var(--pine)
}

@media(max-width:575px) {
    .nc-photo {
        padding-left: .8rem
    }

    .p2 {
        right: 0
    }
}

/*================================================
 Construction selector end
=================================================*/



/*================================================
 Contact selector Start
=================================================*/
.ct-section .container {
    max-width: 1324px
}

.ct-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    animation: blob 14s ease-in-out infinite
}

.b1 {
    width: 420px;
    height: 420px;
    left: -120px;
    top: -60px;
    background: rgba(0, 106, 164, .35)
}

.b2 {
    width: 360px;
    height: 360px;
    right: -100px;
    bottom: -80px;
    background: rgba(245, 184, 61, .4);
    animation-delay: -6s
}

@keyframes blob {
    50% {
        transform: translate(40px, 30px) scale(1.12)
    }
}

.ct-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.02;
    margin-bottom: 1rem
}

.ct-title span {
    color: var(--pine-2);
    background: linear-gradient(transparent 64%, rgba(18, 171, 36, 0.55) 64% 92%, transparent 92%)
}

.ct-tile {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border: 1px solid #d6e7f1;
    border-radius: 20px;
    padding: .9rem 1.1rem;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.ct-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--pine-2), var(--pine));
    transform: translateX(-101%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    z-index: 0
}

.ct-tile>* {
    position: relative;
    z-index: 1
}

.ct-tile:hover {
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -24px rgba(0, 60, 100, .8)
}

.ct-tile:hover::before {
    transform: none
}

.ct-tile small {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    transition: .3s
}

.ct-tile:hover small {
    color: rgba(255, 255, 255, .75)
}

.ct-tile b {
    font-weight: 700;
    word-break: break-word;
    line-height: 1.25;
    display: block
}

.ct-ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    flex: none;
    position: relative;
    transition: .3s
}

.ct-tile:hover .ct-ic {
    background: var(--brass);
    color: var(--white);
    transform: rotate(-8deg)
}

.ping::before,
.ping::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 2px solid var(--pine-2);
    animation: ping 2.4s ease-out infinite
}

.ping::after {
    animation-delay: 1.2s
}

@keyframes ping {
    from {
        transform: scale(1);
        opacity: .7
    }

    to {
        transform: scale(1.7);
        opacity: 0
    }
}

.ct-go {
    margin-left: auto;
    transition: .3s
}

.ct-tile:hover .ct-go {
    transform: translate(4px, -4px);
    color: var(--brass-2)
}

.ct-soc {
    display: flex;
    gap: .4rem
}

.ct-soc a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #d6e7f1;
    color: var(--pine-2);
    transition: .25s
}

.ct-soc a:hover {
    background: var(--pine-2);
    border-color: var(--pine-2);
    color: #fff;
    transform: translateY(-4px)
}

@media(max-width:575px) {}

.pc {
    height: 100%;
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 36px 60px -36px rgba(0, 60, 100, .6)
}

.pc-top {
    height: 110px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--pine-2), var(--pine))
}

.pc-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: sheen 4.5s 1s infinite
}

.pc-top i {
    position: absolute;
    right: -14px;
    top: -24px;
    font-size: 9rem;
    color: rgba(255, 255, 255, .1);
    transform: rotate(12deg)
}

.pc-avw {
    position: relative;
    width: 132px;
    height: 132px;
    margin: -66px auto 0;
    display: grid;
    place-items: center
}

.pc-avw::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--pine-2), var(--brass), var(--brass-2), var(--pine-2));
    animation: spin 5s linear infinite
}

.pc-av {
    position: relative;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    background: linear-gradient(160deg, #cfe6f4, #fff)
}

.pc-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%
}

.pc-body {
    padding: 1rem 1.6rem 1.6rem;
    text-align: center
}

.pc-nmls {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .6rem 0 1.2rem;
    background: var(--sky);
    color: var(--pine-2);
    font-weight: 700;
    font-size: .82rem;
    border-radius: 99px;
    padding: .25rem .85rem
}

.pc-rows {
    display: grid;
    gap: .6rem;
    margin-bottom: 1.2rem;
    text-align: left
}

.pc .ct-tile {
    padding: .7rem .9rem
}

.pc .ct-tile b {
    font-size: .92rem
}

.pc .ct-soc {
    justify-content: center
}

.fx {
    position: relative;
    border-radius: 32px;
    padding: 3px;
    overflow: hidden;
    box-shadow: 0 40px 70px -35px rgba(0, 60, 100, .65)
}

.fx::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: conic-gradient(from 0deg, var(--pine-2), var(--brass), var(--brass-2), var(--pine-2));
    animation: spin 7s linear infinite
}

.fx-in {
    position: relative;
    background: #fff;
    border-radius: 29px;
    padding: 2.2rem;
    height: 100%;
}

.ich-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.ich {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1.5px solid #cfe2ee;
    border-radius: 99px;
    padding: .45rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--pine);
    cursor: pointer;
    transition: .25s
}

.ich i {
    color: var(--pine-2)
}

.ich:hover {
    border-color: var(--pine-2);
    transform: translateY(-2px)
}

.btn-check:checked+.ich {
    background: var(--pine-2);
    border-color: var(--pine-2);
    color: #fff
}

.btn-check:checked+.ich i {
    color: var(--brass-2)
}

.btn-check:focus-visible+.ich {
    outline: 3px solid var(--brass);
    outline-offset: 2px
}

.btn-send {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, var(--pine-2), var(--pine));
    color: #fff;
    padding: .9rem;
    font-size: 1.05rem
}

.btn-send::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: sheen 3.5s 1s infinite
}

@keyframes sheen {

    45%,
    100% {
        transform: translateX(120%)
    }
}

.btn-send:hover {
    color: #fff;
    box-shadow: 0 14px 28px -12px rgba(0, 106, 164, .8)
}

.btn-send:hover i {
    animation: fly .6s
}

@keyframes fly {
    50% {
        transform: translate(8px, -8px)
    }
}

@media(max-width:575px) {
    .fx-in {
        padding: 1.5rem
    }
}

.btn-check+.btn:hover {
    color: #fff;
}

/*================================================
 Contact selector End
=================================================*/

/*================================================
 Client reviews Start
=================================================*/
/* === Client reviews === */
.rv-sec {
    background: #fff;
    padding: 120px 0;
    position: relative
}

.rv-stack {
    position: relative;
    max-width: 980px;
    margin: auto
}

.rv-layer {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1)
}

.rv-layer.l1 {
    background: var(--brass);
    transform: rotate(-2.2deg) translateY(10px)
}

.rv-layer.l2 {
    background: linear-gradient(135deg, var(--pine-2), var(--pine));
    transform: rotate(1.8deg) translateY(6px)
}

.rv-stack:hover .l1 {
    transform: rotate(-3.4deg) translate(-10px, 14px)
}

.rv-stack:hover .l2 {
    transform: rotate(3deg) translate(10px, 10px)
}

.rv-card {
    position: relative;
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 60px -34px rgba(0, 60, 100, .55)
}

.rv-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.3rem;
    background: var(--paper);
    border-bottom: 1px solid #d6e7f1
}

.rv-dots {
    display: flex;
    gap: .35rem
}

.rv-dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #cfe2ee
}

.rv-dots i:nth-child(1) {
    background: var(--brass)
}

.rv-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--pine);
    margin: 0 auto
}

.rv-title i {
    color: var(--brass)
}

.rv-live {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted)
}

.rv-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: pl2 2s infinite
}

.rv-body {
    position: relative;
    min-height: 420px;
    background: #fff
}

.rv-body iframe {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
    background: #fff;
    opacity: 0;
    transition: opacity .6s
}

.rv-body.ready iframe {
    opacity: 1
}

.rv-body.ready .rv-skel {
    display: none
}

.rv-skel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem
}

.rv-skel i {
    border-radius: 18px;
    background: linear-gradient(100deg, #eef5f9 30%, #fff 50%, #eef5f9 70%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite
}

@keyframes shimmer {
    to {
        background-position: -200% 0
    }
}

.rv-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    gap: .4rem;
    background: #fff
}

.rv-fallback i {
    font-size: 2.4rem;
    color: var(--brass)
}

.rv-body.empty iframe,
.rv-body.empty .rv-skel {
    display: none
}

@media(max-width:767px) {
    .rv-skel {
        grid-template-columns: 1fr
    }

    .rv-skel i:nth-child(n+2) {
        display: none
    }

    .rv-body iframe {
        height: 560px
    }

    .rv-live {
        display: none
    }

    .rv-title {
        margin: 0
    }
}

.testimonials {
    top: 0px;
    position: relative;
    height: 420px;
    overflow-y: scroll;
}

/*================================================
 Client reviews End
=================================================*/


/*================================================
 About Us Start
=================================================*/

.story-section {
    position: relative;
    padding: 120px 0;
    background: #fff;
}

.beyond-section {
    position: relative;
    padding: 120px 0;
}

.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 13rem 0 8rem;
    background: radial-gradient(900px 500px at 85% 20%, rgba(0, 106, 164, .9), transparent 60%), linear-gradient(160deg, #00283f, var(--pine) 60%, #005a8c)
}

.page-hero .dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 80%);
    mask-image: linear-gradient(90deg, #000, transparent 80%)
}

.page-hero .glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -120px;
    top: 10%;
    background: radial-gradient(circle, rgba(245, 184, 61, .35), transparent 65%)
}

.page-hero .kick {
    color: var(--brass-2)
}

.page-hero h1 {
    font-size: clamp(2.8rem, 7vw, 4rem);
    font-weight: 800;
    line-height: 60px;
    animation: rise 1s both;
    line-height: 1.1;
    margin-bottom: .6rem
}

.page-hero h1 span {
  
    display: block;
    /* background: linear-gradient(transparent 62%, rgba(40, 192, 119, .55) 62% 92%, transparent 92%); */
    animation: rise 1s .25s both;
    color: var(--brass-2);
}

.page-hero .lead {
    max-width: 34rem;
    color: rgba(255, 255, 255, .85)
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(40px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ab-id {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    color: rgba(255, 255, 255, .9)
}

.ab-id i {
    color: var(--brass);
    margin-right: .4rem
}

.ab-photo {
    position: relative;
    max-width: 360px;
    margin: auto;
    aspect-ratio: 4/4.8
}

.ab-photo .shape {
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    position: absolute;
    inset: 14% 4% 0;
    border-radius: 999px 999px 30px 30px;
    background: linear-gradient(165deg, #edeff1, #edeff1);
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6)
}

.ab-photo .halo {
    position: absolute;
    width: 58%;
    aspect-ratio: 1;
    left: 21%;
    top: 8%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--brass-2), var(--brass));
    animation: fl 7s ease-in-out infinite
}

.ab-photo .ring {
    position: absolute;
    inset: 0 -4% 8%;
    border: 2px dashed rgba(255, 211, 110, .45);
    border-radius: 50%;
    animation: spin 40s linear infinite
}

.ab-photo img {
    position: absolute;
    bottom: 0;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bdg {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    color: var(--ink);
    border-radius: 16px;
    padding: .6rem .9rem;
    box-shadow: 0 20px 36px -16px rgba(0, 0, 0, .6);
    line-height: 1.2;
    animation: fl 7s ease-in-out infinite;
    max-width: 210px
}

.bdg i {
    font-size: 1.4rem;
    color: var(--pine-2)
}

.bdg b {
    display: block;
    font-size: .85rem
}

.bdg small {
    color: var(--muted);
    font-size: .7rem;
    display: block
}

.bdg.b1 {
    left: -14%;
    top: 16%;
    height: auto
}

.bdg.b1 i {
    color: var(--brass)
}

.bdg.b2 {
    right: -10%;
    bottom: 12%;
    animation-delay: 2s;
    height: auto
}

@media(max-width:575px) {
    .bdg.b1 {
        left: 0
    }

    .bdg.b2 {
        right: 0
    }
}

.glance {
    background: #fff;
    border-radius: 26px;
    padding: 1.6rem;
    margin-top: -3rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 30px 60px -35px rgba(0, 60, 100, .6)
}

.gn {
    font-family: 'Bricolage Grotesque';
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--pine-2);
    line-height: 1.1
}

.glance b {
    display: block
}

.glance small {
    color: var(--muted)
}

.tl {
    position: relative;
    max-width: 900px;
    margin: auto;
    padding: .5rem 0
}

.tl::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 3px;
    background: linear-gradient(180deg, var(--pine-2), var(--brass));
    transform: translateX(-50%);
    border-radius: 3px;
    bottom: 210px;
}

.tl-item {
    position: relative;
    width: 50%;
    padding: 0 2.6rem 2.2rem 0
}

.tl-item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 2.2rem 2.6rem
}

.tl-node {
    position: absolute;
    right: -24px;
    top: .4rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pine-2), var(--pine));
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px var(--paper);
    z-index: 1
}

.tl-item:nth-child(even) .tl-node {
    right: auto;
    left: -24px
}

.tl-card {
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 22px;
    padding: 1.4rem;
    transition: .3s
}

.tl-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 44px -28px rgba(0, 60, 100, .6);
    border-color: var(--pine-2)
}

.tl-card p {
    color: var(--muted);
    margin: 0;
    font-size: .95rem
}

.tl-card p b {
    color: var(--pine)
}

.tl-tag {
    display: inline-block;
    background: var(--sky);
    color: var(--pine-2);
    font-weight: 700;
    font-size: .75rem;
    border-radius: 99px;
    padding: .15rem .75rem;
    margin-bottom: .5rem
}

@media(max-width:767px) {
    .tl::before {
        left: 24px
    }

    .tl-item,
    .tl-item:nth-child(even) {
        width: 100%;
        margin: 0;
        padding: 0 0 1.6rem 4rem
    }

    .tl-node,
    .tl-item:nth-child(even) .tl-node {
        left: 0;
        right: auto
    }
}

.lf-tabs {
    background: #fff;
    border-radius: 22px;
    padding: 1.2rem;
    border: 1px solid #d6e7f1
}

.lf-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--pine);
    background: var(--sky);
    padding: .4rem .9rem
}

.lf-tabs .nav-link.active {
    background: var(--pine-2);
    color: #fff
}

.lf-tabs .tab-content {
    min-height: 5.5rem
}

.lf-tabs p {
    color: var(--muted);
    margin: 0
}

.lf-img {
    background: #fff;
    border-radius: 28px;
    padding: 1rem;
    box-shadow: 0 36px 60px -36px rgba(0, 60, 100, .6)
}

.lf-img img {
    width: 100%;
    display: block;
    border-radius: 18px
}

.ab-quote {
    position: relative;
    background: var(--sky);
    border-left: 5px solid var(--brass);
    border-radius: 0 18px 18px 0;
    padding: 1.2rem 1.4rem 1.2rem 3.2rem;
    font-weight: 500
}

.ab-quote i {
    position: absolute;
    left: .7rem;
    top: .4rem;
    font-size: 2.4rem;
    color: var(--pine-2)
}

.vals {
    display: grid;
    gap: .8rem
}

.val {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    transition: .3s
}

.val:hover {
    transform: translateX(8px);
    border-color: var(--brass)
}

.val i {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex: none
}

.val b {
    display: block
}

.val small {
    color: var(--muted)
}

.cred {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: .6rem
}

.cred img {
    width: auto;
    border-radius: 6px
}

.ab-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-radius: 30px;
    padding: 2.4rem;
    background: linear-gradient(120deg, var(--pine), var(--pine-2));
    position: relative;
    overflow: hidden
}

.ab-cta::after {
    content: "\F425";
    font-family: bootstrap-icons;
    position: absolute;
    right: 20%;
    top: -40px;
    font-size: 11rem;
    color: rgba(255, 255, 255, .07)
}

.ab-cta h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    margin: 0
}

.ab-cta p {
    margin: .3rem 0 0;
    color: rgba(255, 255, 255, .8)
}


.bd-sec {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(800px 420px at 15% 0%, rgba(0, 106, 164, .6), transparent 60%), linear-gradient(160deg, #00283f, #00476e)
}

.bd-sec .kick {
    color: var(--brass-2)
}

.bd-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .5;
    animation: fl 9s ease-in-out infinite;
    pointer-events: none
}

.bd-blob.c1 {
    width: 300px;
    height: 300px;
    right: -80px;
    top: 10%;
    background: rgba(245, 184, 61, .35)
}

.bd-blob.c2 {
    width: 260px;
    height: 260px;
    left: -60px;
    bottom: 5%;
    background: rgba(0, 106, 164, .6);
    animation-delay: -4s
}

.bd-mark {
    position: absolute;
    left: 50%;
    top: -1rem;
    transform: translateX(-50%);
    font-size: 18rem;
    line-height: 1;
    color: rgba(255, 255, 255, .06);
    pointer-events: none
}

.bd-q {
    font-family: 'Bricolage Grotesque';
    font-size: clamp(1.8rem, 4.2vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    max-width: 900px;
    margin: .6rem auto 3.2rem;
    text-align: center;
    letter-spacing: -.02em
}

.bd-q mark {
    color: var(--brass-2);
    background: linear-gradient(var(--brass), var(--brass)) 0 92%/0 .14em no-repeat;
    padding: 0;
    transition: background-size 1.2s .5s
}

.bd-q.aos-animate mark {
    background-size: 100% .14em
}

.flips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem
}

.flip {
    perspective: 1100px;
    height: 220px;
    cursor: pointer;
    outline-offset: 6px
}

.flip-in {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1)
}

@media(hover:hover) {
    .flip:hover .flip-in {
        transform: rotateY(180deg)
    }
}

.flip.on .flip-in {
    transform: rotateY(180deg)
}

.ff,
.fb {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.ff {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px)
}

.ff>i {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--brass);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    margin-bottom: 1rem
}

.ft-lab {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass-2);
    font-weight: 700
}

.ff h3 {
    font-weight: 800;
    margin: .3rem 0 0
}

.hint {
    margin-top: auto;
    color: rgba(255, 255, 255, .6)
}

.hint i {
    margin-right: .4rem;
    display: inline-block;
    animation: spin 6s linear infinite
}

.fb {
    transform: rotateY(180deg);
    background: linear-gradient(150deg, var(--brass), var(--brass-2));
    color: var(--white);
    box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7)
}

.fb p {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--white);
}

.bd-cred {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 3rem
}

.bd-cred img {
    width: auto;
    background: #fff;
    border-radius: 12px;
    padding: .5rem .9rem;
    height: 90px;
}

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

    .flip {
        height: 230px
    }

    .bd-mark {
        font-size: 11rem
    }
}

/*================================================
 About Us End
=================================================*/

/*================================================
 Contact Start
=================================================*/
.qa {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(12px);
    border-radius: 28px;
    padding: 1.4rem;
    max-width: 480px;
    margin-left: auto;
    box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .7)
}

.qa-h {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    margin: 0 0 1rem .3rem
}

.live {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    animation: pl2 2s infinite
}

.qa-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    margin-bottom: .7rem;
    transition: .3s;
    position: relative
}

.qa-row:last-child {
    margin-bottom: 0
}

.qa-row small {
    display: block;
    opacity: .75
}

.qa-row b {
    word-break: break-word
}

.qi {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brass);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    flex: none;
    position: relative
}

.qi.ping::before,
.qi.ping::after {
    border-color: var(--brass-2)
}

.qg {
    margin-left: auto;
    color: var(--brass-2);
    transition: .3s
}

.qa-row:hover {
    background: #fff;
    color: var(--pine);
    transform: translateX(-8px)
}

.qa-row:hover .qg {
    transform: translate(4px, -4px)
}


.cx-steps {
    position: relative;
    background: #fff;
    padding: 120px 0;
}

.cx-steps .stp {
    position: relative;
    padding: 1rem 1rem 1.4rem;
    border-bottom: 3px solid #d6e7f1;
    transition: border-color .3s;
    height: 100%
}

.stp .num {
    display: block;
    font-family: 'Bricolage Grotesque';
    font-size: 6.5rem;
    font-weight: 800;
    line-height: .9;
    color: transparent;
    -webkit-text-stroke: 2px var(--pine-2);
    transition: .4s;
    margin-bottom: .6rem
}

.stp:hover .num {
    background: linear-gradient(135deg, var(--brass), var(--brass-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 2px transparent;
    transform: translateY(-6px)
}

.stp::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 3px;
    width: 0;
    background: var(--brass);
    transition: width .5s
}

.stp:hover::after {
    width: 100%
}

.stp p {
    color: var(--muted);
    margin: 0
}

.cx-visit {
    background: var(--sky)
}

.radar {
    position: relative;
    height: 100%;
    min-height: 420px;
    border-radius: 30px;
    overflow: hidden;
    color: #fff;
    background: #00283f;
    box-shadow: 0 40px 70px -40px rgba(0, 40, 63, .8)
}

.rgrid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 38px 38px
}

.sweep {
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 38%;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(245, 184, 61, .4), transparent 28%);
    animation: spin 5s linear infinite
}

.rr {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    border: 2px solid rgba(245, 184, 61, .6);
    animation: rad 3.6s ease-out infinite
}

.rr.b {
    animation-delay: 1.2s
}

.rr.c {
    animation-delay: 2.4s
}

@keyframes rad {
    from {
        transform: scale(.6);
        opacity: .9
    }

    to {
        transform: scale(5);
        opacity: 0
    }
}

.rpin {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -100%);
    font-size: 3rem;
    color: var(--brass);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
    animation: hopx 2s ease-in-out infinite
}

@keyframes hopx {
    50% {
        transform: translate(-50%, -115%)
    }
}


.map-section {
    position: relative;
    padding: 120px 0;
}

.map-card {
    position: relative;
    height: 100%;
    min-height: 460px;
    border-radius: 30px;
    overflow: hidden;
    background: #cfe2ee;
    box-shadow: 0 40px 70px -40px rgba(0, 40, 63, .8)
}

.map-card iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.map-info {
    max-width: fit-content;
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 1.2rem 1.4rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 40px -20px rgba(0, 30, 50, .6);
    color: var(--ink)
}

.map-info .kick {
    margin-bottom: .4rem
}

@media(max-width:575px) {
    .map-card {
        min-height: 520px
    }
}

.cx-faq .accordion-item {
    border: 1px solid #cfe2ee;
    border-left: 5px solid var(--brass);
    border-radius: 16px !important;
    margin-bottom: .7rem;
    overflow: hidden;
    background: #fff
}

.cx-faq .accordion-button {
    font-weight: 700;
    color: var(--pine);
    background: #fff;
    box-shadow: none;
    padding: 1.1rem 1.3rem
}

.cx-faq .accordion-button:not(.collapsed) {
    background: var(--pine-2);
    color: #fff
}

.cx-faq .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1)
}

.cx-faq .accordion-body {
    color: var(--muted)
}

.cx-faq a {
    font-weight: 600;
    color: var(--pine-2)
}

/*================================================
 Contact End
=================================================*/

/*================================================
 Privacy Start
=================================================*/


.rp {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    z-index: 2000;
    background: linear-gradient(90deg, var(--brass), var(--brass-2))
}

.pv-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 9.5rem 0 4.5rem;
    background: linear-gradient(160deg, #00283f, var(--pine) 60%, #006aa4)
}

.pv-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(500px 400px at 88% 20%, rgba(245, 184, 61, .28), transparent 60%), radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: auto, 26px 26px
}

.pv-hero .kick {
    color: var(--brass-2)
}

.pv-hero h1 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 1rem
}

.pv-hero .lead {
    max-width: 38rem;
    color: rgba(255, 255, 255, .88)
}

.shield {
    position: relative;
    width: 230px;
    height: 230px;
    margin: auto;
    display: grid;
    place-items: center;
    font-size: 6.5rem;
    color: var(--brass);
    animation: fl 6s ease-in-out infinite
}

.shield .rg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(245, 184, 61, .5);
    animation: ringx 3.2s ease-out infinite
}

.shield .rg.b {
    animation-delay: 1.6s
}

@keyframes ringx {
    from {
        transform: scale(.7);
        opacity: .9
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}

.shield>i.bi {
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45))
}

.pv-main {
    padding: 120px 0;
}

.toc {
    position: sticky;
    top: 110px
}

.toc-s {
    position: relative;
    margin-bottom: .8rem
}

.toc-s i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted)
}

.toc-s input {
    width: 100%;
    border: 1.5px solid #cfe2ee;
    border-radius: 99px;
    padding: .6rem 1rem .6rem 2.5rem;
    background: #fff
}

.toc-s input:focus {
    outline: 0;
    border-color: var(--pine-2);
    box-shadow: 0 0 0 .25rem rgba(0, 106, 164, .15)
}

.toc-l {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 2px solid #d6e7f1
}

.toc-l a {
    display: flex;
    gap: .7rem;
    align-items: baseline;
    padding: .45rem .8rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 500;
    transition: .2s
}

.toc-l a span {
    font-size: .72rem;
    font-weight: 700;
    color: #9db6c6;
    transition: .2s
}

.toc-l a:hover {
    color: var(--pine-2);
    background: var(--sky)
}

.toc-l a.on {
    color: var(--pine);
    font-weight: 700;
    border-left-color: var(--brass);
    background: var(--sky)
}

.toc-l a.on span {
    color: var(--pine-2)
}

.toc-l a.dim {
    display: none
}

@media(max-width:991px) {
    .toc {
        position: sticky;
        top: 64px;
        z-index: 900;
        background: rgba(255, 255, 255, .95);
        backdrop-filter: blur(8px);
        margin: 0 -.75rem;
        padding: .6rem .75rem;
        box-shadow: 0 10px 20px -16px rgba(0, 40, 63, .5)
    }

    .toc-l {
        flex-direction: row;
        overflow-x: auto;
        border: 0;
        gap: .4rem
    }

    .toc-l a {
        border: 0;
        margin: 0;
        white-space: nowrap;
        border-radius: 99px;
        background: var(--sky)
    }

    .toc-l a.on {
        background: var(--pine-2);
        color: #fff
    }

    .toc-l a.on span {
        color: var(--brass-2)
    }
}

.gl {
    background: linear-gradient(135deg, var(--pine-2), var(--pine));
    color: #fff;
    border-radius: 26px;
    padding: 1.5rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 30px 50px -32px rgba(0, 60, 100, .7)
}

.gl-t {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap
}

.gl-t i {
    color: var(--brass)
}

.gl-t small {
    font-family: 'Figtree';
    font-weight: 500;
    opacity: .75;
    font-size: .8rem
}

.gl-c {
    display: block;
    height: 100%;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    transition: .3s
}

.gl-c i {
    font-size: 1.4rem;
    color: var(--brass-2);
    display: block;
    margin-bottom: .4rem
}

.gl-c b {
    display: block
}

.gl-c span {
    font-size: .88rem;
    opacity: .8
}

.gl-c:hover {
    background: #fff;
    color: var(--pine);
    transform: translateY(-4px)
}

.gl-c:hover i {
    color: var(--pine-2)
}

.pp {
    position: relative;
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 24px;
    padding: 1.8rem 1.8rem 1.6rem;
    margin-bottom: 1.2rem;
    scroll-margin-top: 120px;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s
}

.pp:hover,
.pp.cur {
    border-color: var(--brass);
    box-shadow: 0 26px 44px -32px rgba(0, 60, 100, .6)
}

.pn {
    position: absolute;
    right: 1.4rem;
    top: .6rem;
    font-family: 'Bricolage Grotesque';
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #d6e7f1;
    transition: .4s
}

.pp:hover .pn,
.pp.cur .pn {
    -webkit-text-stroke-color: var(--brass)
}

.pp-h {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-right: 4.5rem
}

.pi {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    flex: none;
    transition: .3s
}

.pp:hover .pi,
.pp.cur .pi {
    background: var(--pine-2);
    color: var(--brass-2);
    transform: rotate(-8deg)
}

.pp h2 {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0
}

.pp-b p {
    color: #3d5568;
    margin-bottom: .8rem
}

.pp-b p:last-child {
    margin-bottom: 0
}

.pp-b ul {
    list-style: none;
    padding: 0;
    margin: .4rem 0 .2rem;
    display: grid;
    gap: .45rem
}

.pp-b li {
    position: relative;
    padding-left: 1.8rem;
    color: #3d5568
}

.pp-b li::before {
    content: "\F26A";
    font-family: bootstrap-icons;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brass)
}

.pp-b a {
    color: var(--white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

.pq {
    background: linear-gradient(135deg, var(--pine), #00283f);
    color: #fff;
    border-color: transparent
}

.pq .pp-b p {
    color: rgba(255, 255, 255, .85)
}

.pq .pn {
    -webkit-text-stroke-color: rgba(255, 255, 255, .2)
}

.pq .pi {
    background: rgba(255, 255, 255, .12);
    color: var(--brass-2)
}

.qbox {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    padding: 1.1rem 1.3rem;
    margin-top: 1rem
}

.pv-none {
    text-align: center;
    padding: 2rem;
    color: var(--muted)
}

.pv-none i {
    display: block;
    font-size: 2rem;
    color: var(--brass)
}

.pv-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-top: 2rem
}

@media print {

    .nav-wrap,
    .ft,
    #top,
    .toc,
    .rp,
    .pv-cta,
    .shield,
    .gl {
        display: none !important
    }

    .pv-hero {
        background: none;
        color: #000;
        padding: 1rem 0
    }

    .pv-hero .lead {
        color: #000
    }

    .pp {
        break-inside: avoid;
        box-shadow: none
    }

    .col-lg-9 {
        width: 100%
    }
}

.pq ul li {
    color: var(--white);
}

/*================================================
 Privacy End
=================================================*/

/*================================================
 Faq Start
=================================================*/
.qb {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: var(--pine);
    font-weight: 700;
    font-size: .85rem;
    padding: .5rem .95rem;
    border-radius: 99px;
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6);
    animation: fl 6s ease-in-out infinite;
    white-space: nowrap
}

.qb i {
    color: var(--brass);
    font-size: 1.1rem
}

.q1 {
    left: -18%;
    top: 12%
}

.q2 {
    right: -8%;
    top: 46%;
    animation-delay: 1.6s
}

.q3 {
    left: -8%;
    bottom: 8%;
    animation-delay: 3.2s
}

.fh-art {
    position: relative;
    max-width: 380px;
    margin: 30px auto;
}

.fh-art .pic {
    position: relative;
    border-radius: 30px 130px 30px 30px;
    overflow: hidden;
    aspect-ratio: 4/4.3;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7);
    background: var(--pine-2)
}

.fh-art .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenb 16s ease-in-out infinite alternate
}

@keyframes kenb {
    to {
        transform: scale(1.12) translate(-1.5%, -1%)
    }
}

.fh-art .ring {
    position: absolute;
    inset: -18px -18px 18px 18px;
    border: 2px dashed rgba(245, 184, 61, .5);
    border-radius: 30px 140px 30px 30px;
    animation: fl 7s ease-in-out infinite
}

.rules {
    background: #fff;
    border-radius: 28px;
    padding: 1.4rem;
    box-shadow: 0 34px 60px -34px rgba(0, 60, 100, .65)
}

.rt-h {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0 0 1rem .4rem
}

.rt-h i {
    color: var(--brass)
}

.rt-h small {
    font-family: 'Figtree';
    font-weight: 500;
    color: var(--muted);
    font-size: .82rem
}

.rt {
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    background: var(--paper);
    border: 1.5px solid #d6e7f1;
    border-radius: 20px;
    padding: 1.1rem 1.2rem;
    position: relative;
    transition: .3s;
    color: var(--ink)
}

.rt b {
    display: block;
    font-family: 'Bricolage Grotesque';
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--pine-2);
    line-height: 1.1
}

.rt span {
    display: block;
    font-size: .84rem;
    color: var(--muted);
    margin-top: .3rem;
    padding-right: 1.2rem
}

.rt>i {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    color: var(--brass);
    transition: .3s
}

.rt:hover {
    background: var(--pine-2);
    border-color: var(--pine-2);
    transform: translateY(-5px)
}

.rt:hover b {
    color: var(--brass-2)
}

.rt:hover span {
    color: rgba(255, 255, 255, .85)
}

.rt:hover>i {
    transform: translateY(4px);
    color: #fff
}

.tbar {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem
}

.fcs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.fc {
    border: 1.5px solid #cfe2ee;
    background: #fff;
    border-radius: 99px;
    padding: .4rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--pine);
    transition: .25s
}

.fc span {
    display: inline-block;
    min-width: 1.4rem;
    text-align: center;
    font-size: .72rem;
    border-radius: 99px;
    background: var(--sky);
    padding: .05rem .4rem;
    margin-left: .2rem
}

.fc:hover {
    border-color: var(--pine-2)
}

.fc.on {
    background: var(--pine-2);
    border-color: var(--pine-2);
    color: #fff
}

.fc.on span {
    background: rgba(255, 255, 255, .2)
}

.tb-r {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: .85rem;
    color: var(--muted)
}

.tl {
    border: 0;
    background: none;
    color: var(--pine-2);
    font-weight: 700;
    padding: 0
}

.fq {
    background: #fff;
    border: 1px solid #d6e7f1;
    border-left: 5px solid #cfe2ee;
    border-radius: 20px;
    margin-bottom: .8rem;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
    scroll-margin-top: 110px
}

.fq:hover {
    border-left-color: var(--brass)
}

.fq.open {
    border-left-color: var(--brass);
    box-shadow: 0 26px 44px -32px rgba(0, 60, 100, .6)
}

.fq h3 {
    margin: 0;
    font-size: 1rem
}

.fq-b {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1.1rem 1.3rem;
    color: var(--ink);
    font-weight: 700;
    font-size: 1.05rem
}

.fq-i {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex: none;
    transition: .3s
}

.fq-t {
    flex: 1;
    line-height: 1.3
}

.fq-t small {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .15rem
}

.fq-x {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    flex: none;
    transition: .35s
}

.fq-b:not(.collapsed) .fq-i {
    background: var(--pine-2);
    color: var(--brass-2);
    transform: rotate(-8deg)
}

.fq-b:not(.collapsed) .fq-x {
    background: var(--brass);
    color: var(--pine);
    transform: rotate(135deg)
}

.fq-a {
    padding: 0 1.4rem 1.4rem 5.1rem;
    color: #3d5568
}

.fq-a p {
    margin-bottom: .8rem
}

.fq-a mark {
    background: rgba(245, 184, 61, .5);
    padding: 0 .15em;
    border-radius: 3px
}

@media(max-width:575px) {
    .fq-a {
        padding: 0 1.2rem 1.2rem
    }

    .fq-b {
        padding: 1rem
    }

    .fq-i {
        display: none
    }
}

.spg {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-weight: 700;
    font-size: .85rem;
    color: var(--pine);
    margin: .2rem 0 1rem
}

.spbar {
    flex: 1;
    height: 8px;
    background: var(--sky);
    border-radius: 8px;
    overflow: hidden
}

.spbar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brass), var(--brass-2));
    transition: width .5s
}

.stepper {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    position: relative
}

.stepper::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 20px;
    bottom: 20px;
    width: 3px;
    background: #d6e7f1;
    border-radius: 3px
}

.stepper li {
    position: relative;
    margin-bottom: .5rem
}

.sp {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .3rem .5rem .3rem 0;
    color: var(--ink)
}

.sd {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #cfe2ee;
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-weight: 800;
    flex: none;
    transition: .3s
}

.sb b {
    display: block
}

.sb small {
    display: block;
    color: var(--muted);
    font-size: .9rem;
    margin-top: .15rem;
    line-height: 1.4
}

.sc {
    margin-left: auto;
    font-size: 1.3rem;
    color: #cfe2ee;
    transition: .3s;
    padding-top: .5rem
}

.sp:hover .sd {
    border-color: var(--pine-2)
}

.sp.done .sd {
    background: var(--pine-2);
    border-color: var(--pine-2);
    color: #fff
}

.sp.done .sc {
    color: #22a35a
}

.sp.done .sb b {
    text-decoration: line-through;
    color: var(--muted)
}

.fq-empty {
    text-align: center;
    padding: 2.4rem 1rem;
    background: #fff;
    border: 1px dashed #cfe2ee;
    border-radius: 22px
}

.fq-empty>i {
    font-size: 2.4rem;
    color: var(--brass)
}

.fq-empty p {
    color: var(--muted)
}

.side {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 1rem
}

.ask {
    background: linear-gradient(150deg, var(--pine-2), #00283f);
    color: #fff;
    border-radius: 26px;
    padding: 1.6rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 34px 56px -34px rgba(0, 60, 100, .8)
}

.ask::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px dashed rgba(245, 184, 61, .4);
    right: -70px;
    top: -70px;
    animation: spin 30s linear infinite
}

.ask>i {
    font-size: 2.2rem;
    color: var(--brass)
}

.ask h3 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: .4rem 0
}

.ask p {
    color: rgba(255, 255, 255, .8);
    font-size: .93rem
}

.ask-r {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    margin-bottom: .5rem;
    font-weight: 600;
    transition: .25s;
    word-break: break-all
}

.ask-r i {
    color: var(--brass-2)
}

.ask-r:hover {
    background: #fff;
    color: var(--pine);
    transform: translateX(5px)
}

.ask-r:hover i {
    color: var(--pine-2)
}

.more {
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 22px;
    padding: 1.2rem
}

.more b {
    display: block;
    margin-bottom: .6rem
}

.more a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .6rem;
    border-radius: 12px;
    color: var(--ink);
    font-weight: 500;
    transition: .2s
}

.more a i {
    color: var(--pine-2)
}

.more a:hover {
    background: var(--sky);
    transform: translateX(4px)
}

.fcta {
    text-align: center;
    color: #fff;
    border-radius: 32px;
    padding: 3rem 1.5rem;
    background: linear-gradient(120deg, #00283f, var(--pine-2), #0b86c7);
    background-size: 200% 100%;
    animation: gtf 10s linear infinite alternate
}

@keyframes gtf {
    to {
        background-position: 100% 0
    }
}

.fcta h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 1.4rem
}

@media(max-width:991px) {
    .side {
        position: static
    }
}

.fh-main {
    padding: 0 0 120px;
}

.ask {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: center;
    gap: 0.5rem;
}

.ask p {
    text-align: left;
}

/*================================================
 Faq End
=================================================*/

/*================================================
 Footer selector Start
=================================================*/
footer .container {
    max-width: 1324px;
}

.ft {
    position: relative;
    margin-top: 7rem;
    background: var(--pine);
    color: rgba(255, 255, 255, .72);
    padding: 0 0 1.5rem;
    font-size: .94rem
}

.ft::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
    mask-image: linear-gradient(180deg, #000, transparent 70%);
    pointer-events: none
}

.ft .container {
    position: relative
}

.ft a {
    color: rgba(255, 255, 255, .72);
    transition: .2s
}

.ft a:hover {
    color: var(--brass-2)
}

.ft-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    align-items: center;
    justify-content: space-between;
    margin: -4rem 0 0.5rem;
    top: -65px;
    padding: 2rem 2.4rem;
    border-radius: 28px;
    color: var(--white);
    background: linear-gradient(110deg, var(--brass), var(--brass-2));
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6);
    position: relative;
    overflow: hidden
}

.ft-cta::after {
    content: "\F425";
    font-family: bootstrap-icons;
    position: absolute;
    right: 30%;
    top: -30px;
    font-size: 9rem;
    color: rgba(0, 71, 110, .08);
    pointer-events: none
}

.ft-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    margin: 0
}

.ft-cta p {
    margin: .2rem 0 0;
    color: var(--white)
}

.ft-cta-btn {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    position: relative;
    z-index: 1
}

.ft .ft-cta .btn-pine {
    color: #fff
}

.ft .ft-cta .btn-outline-dark {
    color: var(--pine);
    border-color: var(--pine)
}

.ft .ft-cta .btn-outline-dark:hover {
    background: var(--pine);
    color: #fff
}

.ft .ft-call {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--pine);
    margin-left: .4rem
}

.ft .ft-call:hover {
    color: #fff
}

.ft-brand {
    background-color: #fff;
    display: flex;
    max-width: fit-content;
    padding: 10px;
    border-radius: 10px;
}

/* Footer logo comes from the CMS (often a 2x image); keep it at the design's 240px. */
.ft-brand img {
    max-width: 240px;
    height: auto;
}

.ft-brand small {
    color: rgba(255, 255, 255, .65)
}

.ft-brand span {
    display: flex;
    flex-direction: column;
    line-height: 1
}

.ft-brand small {
    font-family: 'Figtree';
    font-size: .7rem;
    font-weight: 500;
    margin-top: 3px
}

.ft-brand i {
    background: var(--brass);
    color: var(--pine)
}

.ft-contact li {
    display: flex;
    gap: .7rem;
    margin-bottom: .6rem
}

.ft-contact i {
    color: var(--brass);
    margin-top: .2rem
}

.ft-soc {
    display: flex;
    gap: .5rem
}

.ft-soc a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff
}

.ft-soc a:hover {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--pine);
    transform: translateY(-4px)
}

.ft-h {
    font-family: 'Bricolage Grotesque';
    font-size: 1rem;
    color: #fff;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem
}

.ft-h::after {
    content: "";
    height: 2px;
    width: 26px;
    background: var(--brass);
    border-radius: 2px
}

.ft-links li {
    margin-bottom: .45rem
}

.ft-links a {
    display: inline-block
}

.ft-links a:hover {
    transform: translateX(6px)
}

.ft-form {
    display: grid;
    gap: .6rem
}

.ft-form .form-control {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: #fff
}

.ft-form .form-control::placeholder {
    color: rgba(255, 255, 255, .55)
}

.ft-form .form-control:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff
}

#cb-ok {
    min-height: 1.2rem
}

.ft-badges {
    display: flex;
    gap: .8rem;
    align-items: center
}

.ft-badges img {
    height: 44px;
    width: auto;
    border-radius: 6px;
    background: #fff;
    padding: 3px
}

.ft-word {
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-size: clamp(2.6rem, 12.5vw, 10.5rem);
    line-height: .9;
    margin: 2.5rem 0 1rem;
    letter-spacing: -.03em;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none
}

.ft-bottom {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding-top: 2.2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .84rem;
    margin-top: 2.2rem
}

.ft-bottom .ft-copy {
    font-size: .84rem;
    color: rgba(255, 255, 255, .65)
}

.ft-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    margin-top: 2.2rem;
    padding-top: 2.2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .84rem;
    color: rgba(255, 255, 255, .65)
}

@media(max-width:767px) {
    .ft-cta {
        padding: 1.6rem;
        margin-top: -3rem
    }

    .ft {
        margin-top: 6rem
    }
}

.ft-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    align-items: center;
    justify-content: space-between;
}


/*================================================
 Footer selector End
=================================================*/

/*================================================
 Hero selector Start
=================================================*/
.vs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 420px;
    margin: auto
}

.vc {
    border-radius: 28px;
    padding: 1.6rem 1.2rem;
    text-align: center;
    box-shadow: 0 36px 60px -28px rgba(0, 0, 0, .7);
    animation: fl 6s ease-in-out infinite
}

.vc i {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    font-size: 2.6rem;
    background: rgba(255, 255, 255, .22)
}

.vc b {
    display: block;
    font-family: 'Bricolage Grotesque';
    font-size: 1.8rem;
    font-weight: 800
}

.vc small {
    opacity: .85
}

.vdo {
    background: linear-gradient(150deg, #2dbd6e, #13803f);
    color: #fff;
    transform: rotate(-5deg)
}

.vdo i {
    animation: popc 2.4s ease-in-out infinite
}

.vdont {
    background: linear-gradient(150deg, #ef5a5f, #b42328);
    color: #fff;
    transform: rotate(5deg);
    animation-delay: 1.5s;
    margin-top: 2rem
}

.vdont i {
    animation: shk 2.4s ease-in-out infinite
}

.vsb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brass);
    color: var(--white);
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .9)
}

@keyframes popc {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.15) rotate(-6deg)
    }
}

@keyframes shk {

    0%,
    60%,
    100% {
        transform: none
    }

    70% {
        transform: translateX(-5px) rotate(-6deg)
    }

    80% {
        transform: translateX(5px) rotate(6deg)
    }

    90% {
        transform: translateX(-3px)
    }
}

/*================================================
 Hero selector End
=================================================*/

/*================================================
 Do's & Don'ts page selector Start
=================================================*/

.dd-main {
    padding: 120px 0;
}

/* === Do's & Don'ts page === */
.dd-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(500px 400px at 88% 20%, rgba(245, 184, 61, .28), transparent 60%), radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: auto, 26px 26px
}

.back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--brass-2);
    font-weight: 600;
    margin-bottom: 1rem
}

.back i {
    transition: .3s
}

.back:hover {
    color: #fff
}

.back:hover i {
    transform: translateX(-5px)
}

.dd-main .vs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 420px;
    margin: auto
}

.dd-main .vc {
    border-radius: 28px;
    padding: 1.6rem 1.2rem;
    text-align: center;
    box-shadow: 0 36px 60px -28px rgba(0, 0, 0, .7);
    animation: fl 6s ease-in-out infinite
}

.dd-main .vc i {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    font-size: 2.6rem;
    background: rgba(255, 255, 255, .22)
}

.dd-main .vc b {
    display: block;
    font-family: 'Bricolage Grotesque';
    font-size: 1.8rem;
    font-weight: 800
}

.dd-main .vc small {
    opacity: .85
}

.dd-main .vdo {
    background: linear-gradient(150deg, #2dbd6e, #13803f);
    color: #fff;
    transform: rotate(-5deg)
}

.vdo i {
    animation: popc 2.4s ease-in-out infinite
}

.dd-main .vdont {
    background: linear-gradient(150deg, #ef5a5f, #b42328);
    color: #fff;
    transform: rotate(5deg);
    animation-delay: 1.5s;
    margin-top: 2rem
}

.vdont i {
    animation: shk 2.4s ease-in-out infinite
}

.dd-main .vsb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brass);
    color: var(--pine);
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .9)
}

@keyframes popc {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.15) rotate(-6deg)
    }
}

@keyframes shk {

    0%,
    60%,
    100% {
        transform: none
    }

    70% {
        transform: translateX(-5px) rotate(-6deg)
    }

    80% {
        transform: translateX(5px) rotate(6deg)
    }

    90% {
        transform: translateX(-3px)
    }
}

.dd-main {
    background: linear-gradient(180deg, #fff, var(--paper));
    padding-top: 3rem
}

.dd-bar {
    position: sticky;
    top: 78px;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
    border: 1px solid #d6e7f1;
    border-radius: 99px;
    padding: .6rem .7rem .6rem .7rem;
    margin: -6rem 0 2rem;
    box-shadow: 0 24px 44px -26px rgba(0, 60, 100, .6)
}

.seg {
    display: flex;
    gap: .3rem;
    background: var(--sky);
    border-radius: 99px;
    padding: .3rem
}

.seg button {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: none;
    border-radius: 99px;
    padding: .55rem 1.1rem;
    font-weight: 700;
    color: var(--pine);
    transition: .3s
}

.seg button span {
    font-size: .72rem;
    background: rgba(0, 106, 164, .14);
    border-radius: 99px;
    padding: .05rem .5rem
}

.seg button.on {
    background: var(--pine-2);
    color: #fff;
    box-shadow: 0 10px 20px -10px rgba(0, 106, 164, .9)
}

.seg button.on span {
    background: rgba(255, 255, 255, .22)
}

.seg button[data-m="do"] i {
    color: #22a35a
}

.seg button[data-m="dont"] i {
    color: #e5484d
}

.seg button.on i {
    color: #fff
}

.prog {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-right: 1rem
}

.prog svg {
    width: 48px;
    height: 48px;
    transform: rotate(-90deg)
}

.prog circle {
    fill: none;
    stroke-width: 3.4
}

.rb {
    stroke: var(--sky)
}

.rf {
    stroke: var(--brass);
    stroke-linecap: round;
    stroke-dasharray: 0 100;
    transition: stroke-dasharray .6s
}

.prog b {
    display: block;
    line-height: 1.2
}

.prog small {
    color: var(--muted)
}

.lnk {
    border: 0;
    background: none;
    color: var(--pine-2);
    font-weight: 700;
    padding: 0;
    text-decoration: underline
}

@media(max-width:767px) {
    .dd-bar {
        top: 64px;
        border-radius: 26px;
        margin-top: -5rem
    }

    .seg {
        width: 100%
    }

    .seg button {
        flex: 1;
        justify-content: center;
        padding: .55rem .5rem
    }
}

.dd-gh {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.2rem 0 1.2rem
}

.dd-gh i {
    font-size: 2rem
}

.dd-gh h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0
}

.dd-gh.do i {
    color: #22a35a
}

.dd-gh.dont i {
    color: #e5484d
}

.dcs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem
}

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

.dc {
    position: relative;
    display: flex;
    gap: 1rem;
    background: #fff;
    border: 1px solid #d6e7f1;
    border-radius: 24px;
    padding: 1.4rem;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s, background .3s
}

.dc::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--c)
}

.dc.do {
    --c: #22a35a
}

.dc.dont {
    --c: #e5484d
}

.dc:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 46px -30px rgba(0, 60, 100, .6)
}

.dn {
    position: absolute;
    right: 1.1rem;
    top: .4rem;
    font-family: 'Bricolage Grotesque';
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #d6e7f1
}

.dic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    flex: none;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, #fff);
    transition: .3s
}

.dc:hover .dic {
    background: var(--c);
    color: #fff;
    transform: rotate(-8deg)
}

.dcb {
    padding-right: 2.6rem
}

.dcb h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 .4rem
}

.dcb p {
    color: #3d5568;
    font-size: .95rem;
    margin-bottom: .9rem
}

.dck {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1.5px solid #cfe2ee;
    background: #fff;
    border-radius: 99px;
    padding: .35rem .95rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--pine);
    transition: .25s
}

.dck:hover {
    border-color: var(--c)
}

.dc.checked {
    background: color-mix(in srgb, var(--c) 7%, #fff);
    border-color: var(--c)
}

.dc.checked .dck {
    background: var(--c);
    border-color: var(--c);
    color: #fff
}

.dc.checked .dck i::before {
    content: "\F26B"
}

.dc.checked .dck i {
    animation: popc .5s
}

.dd-done {
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    justify-content: center;
    font-weight: 700;
    padding: 1rem;
    border-radius: 18px;
    color: #fff;
    animation: pop2 .6s
}

.dd-done.do {
    background: linear-gradient(120deg, #2dbd6e, #13803f)
}

.dd-done.dont {
    background: linear-gradient(120deg, #ef5a5f, #b42328)
}

.dd-done i {
    font-size: 1.4rem
}

@keyframes pop2 {
    from {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.dd-out {
    padding: 60px 0 120px;
}

.outro {
    position: relative;
    max-width: 860px;
    margin: auto;
    text-align: center;
    background: #fff;
    border-radius: 30px;
    padding: 2.4rem 2rem;
    border: 1px solid #d6e7f1;
    box-shadow: 0 30px 50px -34px rgba(0, 60, 100, .6)
}

.outro>i {
    font-size: 4rem;
    color: var(--brass);
    line-height: 1
}

.outro p {
    font-family: 'Bricolage Grotesque';
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--pine)
}

.reslinks {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-top: 2.6rem;
    margin-bottom: 2.6rem;
}

.reslinks a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1.5px solid #cfe2ee;
    border-radius: 99px;
    padding: .5rem 1.1rem;
    font-weight: 600;
    color: var(--pine);
    transition: .25s
}

.reslinks a i {
    color: var(--pine-2)
}

.reslinks a:hover {
    background: var(--pine-2);
    border-color: var(--pine-2);
    color: #fff;
    transform: translateY(-3px)
}

.reslinks a:hover i {
    color: var(--brass-2)
}

/*================================================
 Do's & Don'ts page selector End
=================================================*/


/*================================================
Calculators selector Start
=================================================*/
/* === Calculators page === */
@keyframes gt {
    to {
        background-position: 300% 0
    }
}

@keyframes ringin {
    from {
        stroke-dasharray: 0 100
    }
}

.cc-back {
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    margin-bottom: 1.4rem
}

.cc-back:hover {
    color: var(--brass-2)
}

.cc-h1 {
    font-size: clamp(3.4rem, 9vw, 6.8rem);
    font-weight: 800;
    line-height: .94;
    letter-spacing: -.04em;
    margin: .2rem 0 1.4rem
}

.cc-h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--brass-2), #fff, var(--brass), var(--brass-2));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gt 6s linear infinite
}

.cc-lead {
    font-size: 1.15rem;
    max-width: 33rem;
    color: rgba(255, 255, 255, .9)
}

.cc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.6rem
}

.cc-stats span {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    font-weight: 600;
    font-size: .9rem
}

.cc-stats i {
    color: var(--brass-2)
}

.cc-vis {
    position: relative;
    max-width: 420px;
    margin-left: auto
}

.cc-glass {
    padding: 1.6rem;
    border-radius: 32px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(16px);
    box-shadow: 0 50px 90px -35px rgba(0, 0, 0, .8);
    transform: rotate(-2.5deg);
    animation: fl 8s ease-in-out infinite
}

.cc-glass small {
    opacity: .8;
    font-weight: 600
}

.cc-glass b {
    display: block;
    font-family: 'Bricolage Grotesque';
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: -.03em
}

.cc-glass .rg {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1rem
}

.cc-glass svg {
    width: 110px;
    flex: none
}

.cc-glass li {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .88rem;
    margin-bottom: .3rem
}

.cc-glass li i {
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.cc-chip {
    position: absolute;
    padding: .55rem 1rem;
    border-radius: 16px;
    background: #fff;
    color: var(--pine);
    font-weight: 700;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6);
    animation: fl 6s ease-in-out infinite
}

.cc-chip i {
    color: var(--pine-2);
    margin-right: .4rem
}

.cc-studio {
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
    padding: 0 0 3rem
}

.cc-tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .8rem
}

.cc-t {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
    padding: 1.1rem .6rem;
    border-radius: 22px;
    background: #fff;
    border: 1.5px solid #d6e7f1;
    font-family: inherit;
    font-weight: 700;
    font-size: .86rem;
    line-height: 1.2;
    color: var(--pine);
    cursor: pointer;
    transition: transform .3s, box-shadow .3s, background .3s;
    box-shadow: 0 18px 36px -26px rgba(0, 40, 63, .6)
}

.cc-t i {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--sky);
    color: var(--pine-2);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    transition: .3s
}

.cc-t:hover {
    transform: translateY(-5px)
}

.cc-t.on {
    background: linear-gradient(150deg, var(--pine-2), #00283f);
    color: #fff;
    border-color: transparent;
    transform: translateY(-6px);
    box-shadow: 0 26px 44px -22px rgba(0, 40, 63, .9)
}

.cc-t.on i {
    background: var(--brass);
    color: var(--white);
    transform: rotate(-8deg) scale(1.08)
}

.cc-panel {
    display: grid;
    grid-template-columns: 7fr 5fr;
    margin-top: 1.6rem;
    border-radius: 34px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 50px 90px -45px rgba(0, 60, 100, .7)
}

.cc-in {
    padding: 2.6rem
}

.cc-in h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    margin-bottom: .3rem
}

.cc-note {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 1.6rem
}

.fld {
    margin-bottom: 1.3rem
}

.fld-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .55rem
}

.fld label {
    font-weight: 700;
    font-size: .88rem;
    color: var(--pine)
}

.cc-n {
    display: flex;
    align-items: center;
    gap: .2rem;
    width: 150px;
    flex: none;
    padding: .35rem .8rem;
    border: 1.5px solid #c6dcea;
    border-radius: 12px;
    background: #fff;
    font-weight: 700;
    color: var(--pine-2)
}

.cc-n:focus-within {
    border-color: var(--pine-2);
    box-shadow: 0 0 0 .25rem rgba(0, 106, 164, .15)
}

.cc-n input {
    width: 100%;
    border: 0;
    outline: 0;
    background: none;
    text-align: right;
    font: inherit;
    color: var(--ink);
    padding: 0;
    -moz-appearance: textfield
}

.cc-n input::-webkit-outer-spin-button,
.cc-n input::-webkit-inner-spin-button {
    -webkit-appearance: none
}

.cc-r {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    outline: 0;
    background: linear-gradient(90deg, var(--pine-2) var(--p, 50%), #d6e7f1 var(--p, 50%))
}

.cc-r::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brass);
    border: 3px solid var(--pine);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
    transition: transform .2s
}

.cc-r::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brass);
    border: 3px solid var(--pine);
    cursor: pointer
}

.cc-r:hover::-webkit-slider-thumb {
    transform: scale(1.2)
}

.cc-out {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 2.6rem;
    background: linear-gradient(160deg, var(--pine-2), #00283f)
}

.cc-out::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    right: -130px;
    top: -110px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .14)
}

.cc-out::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    left: -90px;
    bottom: -70px;
    border-radius: 50%;
    border: 2px dashed rgba(245, 184, 61, .35);
    animation: spin 30s linear infinite
}

.cc-out>* {
    position: relative;
    z-index: 1
}

.cc-bl {
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass-2)
}

.cc-big {
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    margin: .3rem 0 1.3rem;
    word-break: break-word
}

.cc-viz {
    margin-bottom: 1.3rem
}

.cc-ring {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap
}

.cc-ring svg {
    width: 128px;
    flex: none;
    transform: rotate(-90deg)
}

.cc-ring circle {
    fill: none;
    stroke-width: 6;
    transition: stroke-dasharray .6s, stroke-dashoffset .6s
}

.cc-lg {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 170px
}

.cc-lg li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
    margin-bottom: .4rem
}

.cc-lg i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none
}

.cc-lg b {
    margin-left: auto;
    font-weight: 700
}

.cc-bar {
    margin-bottom: .7rem;
    font-size: .88rem
}

.cc-bar div:first-child {
    display: flex;
    justify-content: space-between;
    margin-bottom: .25rem
}

.cc-bar span {
    display: block;
    height: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden
}

.cc-bar span i {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--brass), var(--brass-2));
    transition: width .6s
}

.cc-rows {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.cc-rows li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: .95rem
}

.cc-rows li span {
    opacity: .8
}

.cc-rows li b {
    text-align: right
}

.cc-act {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.cc-fine {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 1.6rem;
    padding: 1.1rem 1.4rem;
    border-radius: 18px;
    background: var(--sky);
    color: var(--muted);
    font-size: .88rem
}

.cc-fine i {
    color: var(--pine-2);
    font-size: 1.2rem
}

.cc-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    border-radius: 34px;
    padding: 3.2rem 1.5rem;
    background: linear-gradient(120deg, #00283f, var(--pine-2), #0b86c7);
    background-size: 200% 100%;
    animation: gt 10s linear infinite alternate
}

.cc-cta h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: .5rem
}

.cc-cta p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 1.5rem
}

@media(max-width:991px) {
    .cc-panel {
        grid-template-columns: 1fr
    }

    .cc-vis {
        margin: 0 auto
    }

    .cc-hero {
        padding: 8.5rem 0 8rem
    }
}

@media(max-width:767px) {
    .cc-tiles {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: .4rem .2rem 1rem;
        margin: 0 -.5rem
    }

    .cc-t {
        flex: 0 0 118px;
        scroll-snap-align: start
    }

    .cc-in,
    .cc-out {
        padding: 1.7rem 1.3rem
    }

    .cc-n {
        width: 128px
    }
}

@media(prefers-reduced-motion:reduce) {

    .cc-glass,
    .cc-chip,
    .cc-sym,
    .cc-h1 em,
    .cc-cta,
    .cc-out::after {
        animation: none
    }
}

.cc-panel.cc-frame {
    grid-template-columns: 1fr
}

.cc-frame .cc-out {
    display: none
}

.cc-frame .cc-in {
    padding: 2rem
}

.cc-if {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px #d6e7f1
}

/*================================================
Calculators selector end
=================================================*/

/*================================================
Blog page selector Start
=================================================*/

@keyframes gt {
    to {
        background-position: 300% 0
    }
}

.bl-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 10rem 0 10rem;
    background: linear-gradient(160deg, #00283f, var(--pine) 55%, #006aa4)
}

.bl-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(520px 520px at 88% 8%, rgba(245, 184, 61, .32), transparent 60%), radial-gradient(600px 420px at 0% 100%, rgba(0, 106, 164, .75), transparent 60%), radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: auto, auto, 26px 26px
}

.bl-sym {
    position: absolute;
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .12);
    line-height: 1;
    pointer-events: none;
    animation: fl 9s ease-in-out infinite
}

.bl-hero .kick {
    color: var(--brass-2)
}

.bl-back {
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    margin-bottom: 1.4rem
}

.bl-back:hover {
    color: var(--brass-2)
}

.bl-h1 {
    font-size: clamp(2.8rem, 7vw, 5.6rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.04em;
    margin: .2rem 0 1.4rem
}

.bl-h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--brass-2), #fff, var(--brass), var(--brass-2));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gt 6s linear infinite
}

.bl-lead {
    font-size: 1.12rem;
    max-width: 34rem;
    color: rgba(255, 255, 255, .9)
}

.bl-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 34rem;
    margin-top: 1.8rem;
    padding: .4rem .4rem .4rem 1.2rem;
    border-radius: 99px;
    background: #fff;
    color: var(--muted);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7)
}

.bl-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    padding: .5rem 0
}

.bl-search:focus-within {
    box-shadow: 0 0 0 4px rgba(245, 184, 61, .55), 0 24px 50px -24px rgba(0, 0, 0, .7)
}

.bl-glass {
    padding: 1.6rem;
    border-radius: 32px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(16px);
    box-shadow: 0 50px 90px -35px rgba(0, 0, 0, .8);
    transform: rotate(2deg);
    animation: fl 8s ease-in-out infinite;
    max-width: 400px;
    margin-left: auto
}

.bl-glass small {
    display: block;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .75rem;
    color: var(--brass-2);
    margin-bottom: .9rem
}

.bl-topic {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: .25s
}

.bl-topic i {
    color: var(--brass-2);
    margin-right: .6rem
}

.bl-topic b {
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brass);
    color: var(--pine);
    font-size: .85rem
}

.bl-topic:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateX(6px)
}

.bl-top {
    position: relative;
    z-index: 2;
    margin-top: -4rem;
    padding: 0
}

.bl-feat {
    display: grid;
    grid-template-columns: 6fr 5fr;
    border-radius: 34px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 50px 90px -45px rgba(0, 60, 100, .75)
}

.bl-fimg {
    position: relative;
    display: block;
    min-height: 380px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--pine-2), #00283f)
}

.bl-fimg img,
.bl-cimg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s
}

.bl-feat:hover .bl-fimg img,
.bl-card:hover .bl-cimg img {
    transform: scale(1.08)
}

.bl-new {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    padding: .4rem 1rem;
    border-radius: 99px;
    background: var(--brass);
    color: var(--white);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5)
}

.bl-ftxt {
    padding: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.bl-ftxt h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 800;
    margin: .7rem 0 1rem;
    line-height: 1.1
}

.bl-ftxt h2 a {
    color: var(--pine)
}

.bl-ftxt h2 a:hover {
    color: var(--pine-2)
}

.bl-ftxt p {
    color: var(--muted);
    margin-bottom: 1.4rem
}

.bl-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 99px;
    background: var(--sky);
    color: var(--pine-2);
    font-weight: 700;
    font-size: .78rem
}

.bl-date {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600
}

.bl-date i {
    color: var(--brass)
}

.bl-grid-s {
    padding-top: 4.5rem;
    padding-bottom: 6.5rem
}

.bl-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem
}

.bl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.bl-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: 99px;
    border: 1.5px solid #cfe2ee;
    background: #fff;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    color: var(--pine);
    cursor: pointer;
    transition: .25s
}

.bl-chip i {
    color: var(--pine-2)
}

.bl-chip b {
    font-size: .75rem;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--sky)
}

.bl-chip:hover {
    border-color: var(--pine-2);
    transform: translateY(-2px)
}

.bl-chip.on {
    background: var(--pine-2);
    border-color: var(--pine-2);
    color: #fff
}

.bl-chip.on i {
    color: var(--brass-2)
}

.bl-chip.on b {
    background: var(--brass);
    color: var(--white)
}

.bl-count {
    color: var(--muted);
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 1.4rem
}

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem
}

.bl-card {
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d6e7f1;
    transition: transform .35s, box-shadow .35s;
    box-shadow: 0 24px 44px -34px rgba(0, 40, 63, .6)
}

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

.bl-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 60px -34px rgba(0, 40, 63, .7)
}

.bl-cimg {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(150deg, var(--pine-2), #00283f)
}

.bl-cimg .bl-badge {
    position: absolute;
    left: 1rem;
    top: 1rem;
    background: rgba(255, 255, 255, .95);
    z-index: 1
}

.bl-cb {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem 1.5rem 1.6rem
}

.bl-cb h3 {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin: .5rem 0 .7rem
}

.bl-cb h3 a {
    color: var(--ink);
    background: linear-gradient(var(--brass), var(--brass)) 0 100%/0 3px no-repeat;
    transition: background-size .4s
}

.bl-card:hover h3 a {
    background-size: 100% 3px
}

.bl-cb p {
    color: var(--muted);
    font-size: .93rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem
}

.bl-more {
    margin-top: auto;
    font-weight: 700;
    color: var(--pine-2);
    display: inline-flex;
    gap: .5rem;
    align-items: center
}

.bl-more i {
    transition: transform .3s
}

.bl-card:hover .bl-more i {
    transform: translateX(6px)
}

.bl-ask {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(150deg, var(--pine-2), #00283f);
    position: relative;
    overflow: hidden
}

.bl-ask::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -90px;
    bottom: -100px;
    border-radius: 50%;
    border: 2px dashed rgba(245, 184, 61, .4);
    animation: spin 30s linear infinite
}

.bl-ask>i {
    font-size: 2.4rem;
    color: var(--brass-2)
}

.bl-ask h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: .6rem 0
}

.bl-ask p {
    margin: .6rem 0 1.2rem;
    color: rgba(255, 255, 255, .85)
}

.bl-ask .btn {
    position: relative;
    z-index: 1
}

.bl-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted)
}

.bl-empty i {
    font-size: 2.6rem;
    color: var(--pine-2)
}

.bl-empty a {
    font-weight: 700;
    color: var(--pine-2)
}

.bl-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    border-radius: 34px;
    padding: 3.2rem 1.5rem;
    background: linear-gradient(120deg, #00283f, var(--pine-2), #0b86c7);
    background-size: 200% 100%;
    animation: gt 10s linear infinite alternate
}

.bl-cta h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: .5rem
}

.bl-cta p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 1.5rem
}

@media(max-width:991px) {
    .bl-feat {
        grid-template-columns: 1fr
    }

    .bl-fimg {
        min-height: 260px
    }

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

    .bl-glass {
        margin: 0 auto;
        transform: none
    }

    .bl-hero {
        padding: 8.5rem 0 9rem
    }
}

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

    .bl-ftxt {
        padding: 1.7rem 1.4rem
    }

    .bl-search .btn {
        padding: .6rem 1rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .bl-glass,
    .bl-sym,
    .bl-h1 em,
    .bl-cta,
    .bl-ask::after {
        animation: none
    }

    .bl-card,
    .bl-card *,
    .bl-fimg img {
        transition: none
    }
}

/*================================================
Blog page selector End
=================================================*/


/*================================================
Article Start
=================================================*/
/* === Article page === */
@keyframes gt {
    to {
        background-position: 300% 0
    }
}

#ar-prog {
    position: fixed;
    left: 0;
    top: 0;
    height: 4px;
    width: 0;
    z-index: 1100;
    background: linear-gradient(90deg, var(--brass), var(--brass-2));
    box-shadow: 0 0 12px rgba(245, 184, 61, .8)
}

.ar-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(160deg, #00283f, var(--pine) 55%, #006aa4)
}

.ar-cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.ar-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 40, 63, .72), rgba(0, 40, 63, .55) 40%, rgba(0, 28, 45, .95)), radial-gradient(520px 520px at 90% 0, rgba(245, 184, 61, .35), transparent 60%)
}

.ar-float {
    position: absolute;
    font-size: 5rem;
    opacity: .22;
    animation: fl 8s ease-in-out infinite;
    pointer-events: none;
    filter: saturate(.8)
}

.ar-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-weight: 600;
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 1.2rem
}

.ar-crumb a {
    color: rgba(255, 255, 255, .8)
}

.ar-crumb a:hover {
    color: var(--brass-2)
}

.ar-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .95rem;
    border-radius: 99px;
    background: var(--brass);
    color: var(--white);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase
}

.ar-h1 {
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.04em;
    max-width: 52rem;
    margin: 1rem 0 1.6rem
}

.ar-h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--brass-2), #fff, var(--brass), var(--brass-2));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gt 6s linear infinite
}

.ar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.ar-meta span {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
    font-weight: 600;
    font-size: .9rem
}

.ar-meta i {
    color: var(--brass-2)
}

.ar-wrap {
    position: relative;
    z-index: 2;
    margin-top: -4.5rem;
    padding: 0 0 120px
}

.ar-card {
    padding: 3rem;
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 50px 90px -45px rgba(0, 60, 100, .75)
}

.ar-toc {
    position: sticky;
    top: 110px;
    align-self: start
}

.ar-toc h4 {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pine-2);
    font-family: 'Figtree';
    font-weight: 700;
    margin-bottom: .9rem
}

.ar-toc ol {
    list-style: none;
    padding: 0 0 0 1rem;
    margin: 0;
    border-left: 2px solid #d6e7f1
}

.ar-toc a {
    display: block;
    position: relative;
    padding: .45rem 0;
    color: var(--muted);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    transition: .25s
}

.ar-toc a::before {
    content: "";
    position: absolute;
    left: -1.18rem;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cfe2ee;
    transition: .25s
}

.ar-toc a:hover {
    color: var(--pine-2)
}

.ar-toc a.on {
    color: var(--pine);
    transform: translateX(4px)
}

.ar-toc a.on::before {
    background: var(--brass);
    border-color: var(--brass);
    box-shadow: 0 0 0 4px rgba(245, 184, 61, .25)
}

.ar-share {
    display: flex;
    gap: .45rem;
    margin-top: 1.6rem;
    flex-wrap: wrap
}

.ar-share a,
.ar-share button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--sky);
    color: var(--pine-2);
    font-size: 1rem;
    transition: .25s;
    cursor: pointer
}

.ar-share a:hover,
.ar-share button:hover {
    background: var(--pine-2);
    color: #fff;
    transform: translateY(-3px)
}

.ar-share small {
    display: block;
    width: 100%;
    font-weight: 700;
    color: var(--muted);
    font-size: .78rem
}

.ar-body {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #1d3446
}

.ar-body p {
    margin-bottom: 1.3rem
}

.ar-body .lead {
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--ink)
}

.ar-body .lead::first-letter {
    float: left;
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 4.6rem;
    line-height: .82;
    padding: .35rem .7rem 0 0;
    color: var(--pine-2)
}

.ar-body h2 {
    counter-increment: s;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 3rem 0 1rem;
    color: var(--pine);
    line-height: 1.15;
    scroll-margin-top: 100px
}

.ar-body h2::before {
    content: "0" counter(s);
    display: block;
    font-size: .85rem;
    letter-spacing: .16em;
    color: var(--brass);
    -webkit-text-stroke: 0;
    margin-bottom: .4rem;
    font-family: 'Figtree';
    font-weight: 800
}

.ar-body {
    counter-reset: s
}

.ar-body strong {
    color: var(--pine)
}

.ar-quote {
    position: relative;
    margin: 2rem 0;
    padding: 1.8rem 2rem 1.8rem 2.4rem;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--sky), #fff);
    border-left: 6px solid var(--brass);
    font-family: 'Bricolage Grotesque';
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--pine)
}

.ar-quote::before {
    content: "“";
    position: absolute;
    right: 1.2rem;
    top: -.4rem;
    font-size: 6rem;
    line-height: 1;
    color: rgba(0, 106, 164, .12)
}

.ar-img {
    margin: 2.2rem 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 50px -30px rgba(0, 40, 63, .6)
}

.ar-img img {
    display: block;
    width: 100%
}

.ar-tips {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0
}

.ar-tip {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    margin-bottom: .7rem;
    background: #fff;
    font: inherit;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ink);
    cursor: pointer;
    transition: .3s
}

.ar-tip i {
    font-size: 1.5rem;
    color: #b5cddd;
    transition: .3s;
    flex: none;
    margin-top: .05rem
}

.ar-tip:hover {
    border-color: var(--pine-2);
    transform: translateX(5px)
}

.ar-tip.on {
    background: var(--sky);
    border-color: var(--pine-2)
}

.ar-tip.on i {
    color: var(--pine-2);
    transform: scale(1.15) rotate(-8deg)
}

.ar-tip.on b {
    text-decoration: line-through;
    text-decoration-color: var(--brass);
    text-decoration-thickness: 2px
}

.ar-tp {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--pine);
    margin-bottom: .8rem
}

.ar-tp span.bar {
    flex: 1;
    height: 8px;
    border-radius: 8px;
    background: #d6e7f1;
    overflow: hidden
}

.ar-tp span.bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--brass), var(--brass-2));
    transition: width .5s
}

.ar-sign {
    margin-top: 2.4rem;
    padding: 2rem;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(150deg, var(--pine-2), #00283f);
    position: relative;
    overflow: hidden
}

.ar-sign::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -90px;
    bottom: -100px;
    border-radius: 50%;
    border: 2px dashed rgba(245, 184, 61, .4);
    animation: spin 30s linear infinite
}

.ar-sign p {
    margin: 0 0 .8rem;
    color: rgba(255, 255, 255, .9)
}

.ar-sign strong {
    color: #fff;
    font-family: 'Bricolage Grotesque'
}

.ar-sign .big {
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--brass-2);
    margin-bottom: 1rem
}

.ar-sign .btn {
    position: relative;
    z-index: 1;
    margin-top: .6rem
}

.ar-author {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: center;
    margin-top: 2.4rem;
    padding: 1.6rem;
    border-radius: 26px;
    background: var(--sky)
}

.ar-av {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--brass);
    background: linear-gradient(160deg, #cfe6f4, #fff);
    flex: none
}

.ar-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%
}

.ar-author h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0
}

.ar-author small {
    display: block;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: .6rem
}

.ar-author .links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.ar-author .links a {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .45rem .95rem;
    border-radius: 99px;
    background: #fff;
    color: var(--pine);
    font-weight: 700;
    font-size: .88rem;
    transition: .25s
}

.ar-author .links a:hover {
    background: var(--pine-2);
    color: #fff;
    transform: translateY(-2px)
}

.ar-rel {
    padding-bottom: 5rem;
}

.ar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem
}

.ar-rc {
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d6e7f1;
    transition: transform .35s, box-shadow .35s;
    box-shadow: 0 24px 44px -34px rgba(0, 40, 63, .6)
}

.ar-rc:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 60px -34px rgba(0, 40, 63, .7)
}

.ar-rc .im {
    display: block;
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(150deg, var(--pine-2), #00283f)
}

.ar-rc .im img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s
}

.ar-rc:hover .im img {
    transform: scale(1.08)
}

.ar-rc .cb {
    padding: 1.3rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1
}

.ar-rc time {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600
}

.ar-rc h3 {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: .4rem 0 1rem
}

.ar-rc h3 a {
    color: var(--ink)
}

.ar-rc .go {
    margin-top: auto;
    font-weight: 700;
    color: var(--pine-2);
    display: inline-flex;
    gap: .5rem;
    align-items: center
}

.ar-rc .go i {
    transition: transform .3s
}

.ar-rc:hover .go i {
    transform: translateX(6px)
}

.ar-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    border-radius: 34px;
    padding: 3.2rem 1.5rem;
    background: linear-gradient(120deg, #00283f, var(--pine-2), #0b86c7);
    background-size: 200% 100%;
    animation: gt 10s linear infinite alternate
}

.ar-cta h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: .5rem
}

.ar-cta p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 1.5rem
}

@media(max-width:991px) {
    .ar-card {
        grid-template-columns: 1fr;
        padding: 1.8rem 1.3rem;
        gap: 1.5rem
    }

    .ar-toc {
        position: static
    }

    .ar-toc ol {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        border: 0;
        padding: 0
    }

    .ar-toc a {
        padding: .4rem .9rem;
        border-radius: 99px;
        background: var(--sky)
    }

    .ar-toc a::before {
        display: none
    }

    .ar-toc a.on {
        background: var(--pine-2);
        color: #fff;
        transform: none
    }

    .ar-share {
        display: none
    }

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

    .ar-hero {
        padding: 8.5rem 0 8rem
    }
}

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

    .ar-body {
        font-size: 1.05rem
    }

    .ar-quote {
        font-size: 1.2rem;
        padding: 1.4rem 1.3rem 1.4rem 1.6rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .ar-cover,
    .ar-float,
    .ar-h1 em,
    .ar-cta,
    .ar-sign::after {
        animation: none
    }
}

.ar-content {
    padding: 13rem 0 8rem;
}

.ar-check {
    display: flex;
    align-items: self-start;
    margin-bottom: 1.2rem;
    font-weight: 700;
    color: var(--pine-2);
    flex-direction: column;
}

.ar-check i {
    font-size: 1.2rem;
    color: var(--brass-2);
    padding-right: 0.5rem;
}

.ar-check span {
    font-size: 1rem;
    color: var(--pine);
}

.ar-check span b {
    font-weight: 800;
    color: var(--pine-2);
}

/*================================================
Article End
=================================================*/


/*================================================
rh art Start
=================================================*/
.rh-art {
    position: relative;
    max-width: 400px;
    margin: auto
}

.rh-art .pic {
    position: relative;
    border-radius: 30px 130px 30px 30px;
    overflow: hidden;
    aspect-ratio: 4/4.3;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7);
    background: var(--pine-2)
}

.rh-art .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenr 16s ease-in-out infinite alternate
}

@keyframes kenr {
    to {
        transform: scale(1.12) translate(-1.5%, -1%)
    }
}

.rh-art .ring {
    position: absolute;
    inset: -18px -18px 18px 18px;
    border: 2px dashed rgba(245, 184, 61, .5);
    border-radius: 30px 140px 30px 30px;
    animation: fl 7s ease-in-out infinite
}

.rchip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: var(--pine);
    font-weight: 700;
    font-size: .88rem;
    padding: .55rem 1rem;
    border-radius: 99px;
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6);
    animation: fl 6s ease-in-out infinite;
    white-space: nowrap;
    transition: .25s
}

.rchip i {
    color: var(--brass);
    font-size: 1.1rem
}

.rchip:hover {
    background: var(--brass);
    color: var(--pine)
}

.rchip:hover i {
    color: var(--pine)
}

.rc1 {
    left: -14%;
    top: 10%
}

.rc2 {
    right: -10%;
    top: 34%;
    animation-delay: 1.2s
}

.rc3 {
    left: -8%;
    top: 62%;
    animation-delay: 2.4s
}

.rc4 {
    right: -4%;
    bottom: 6%;
    animation-delay: 3.6s
}

.rb-sec {
    margin-top: -3rem;
    position: relative;
    z-index: 2;
    padding-bottom: 3rem
}

/*================================================
rh art End
=================================================*/

/*================================================
rs cards Start
=================================================*/


.rs-cards-section {
    padding: 120px 0;
}

.rcd {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 290px;
    border-radius: 30px;
    padding: 1.8rem;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 36px 60px -34px rgba(0, 40, 63, .7);
    transition: transform .35s, box-shadow .35s
}

.rcd::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .8s
}

.rcd::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -70px;
    bottom: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    transition: transform .5s
}

.rcd:hover {
    transform: translateY(-10px);
    box-shadow: 0 50px 70px -34px rgba(0, 40, 63, .8);
    color: #fff
}

.rcd:hover::before {
    transform: translateX(120%)
}

.rcd:hover::after {
    transform: scale(1.5)
}

.rcd .ic {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: rgba(255, 255, 255, .2);
    margin-bottom: 1.4rem;
    transition: .4s
}

.rcd:hover .ic {
    transform: rotate(-10deg) scale(1.08)
}

.rcd h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: .4rem;
    position: relative;
}

.rcd p {
    opacity: .9;
    margin: 0;
    position: relative
}

.rcd .go {
    margin-top: auto;
    padding-top: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    position: relative
}

.rcd .go i {
    transition: .3s
}

.rcd:hover .go i {
    transform: translateX(6px)
}

.rc-a {
    background: linear-gradient(150deg, #0b86c7, var(--pine-2))
}

.rc-b {
    background: linear-gradient(150deg, #a47f11, #eaba2e);
   
}



.rc-b .ic {
    background: rgba(0, 71, 110, .15)
}

.rc-c {
    background: linear-gradient(150deg, #13803f, #2dbd6e)
}

.rc-d {
    background: linear-gradient(150deg, #00507b, #00283f)
}

.rs-out {
    background: linear-gradient(180deg, #fff, var(--paper));
    text-align: center;
    padding: 0 0 5rem
}

/*================================================
rs cards End
=================================================*/


/*================================================
lp Start
=================================================*/
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fl{50%{transform:translateY(-12px)}}
@keyframes nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@keyframes smoke{0%{opacity:.9;transform:translateY(10px)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes glow{50%{opacity:.35}}
@keyframes pl2{50%{transform:scale(1.12)}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ringp{50%{transform:translate(8px,8px);opacity:.5}}
@keyframes ken{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes shine{40%,100%{transform:translateX(120%)}}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.lp-scene .orbit{position:absolute;inset:0;animation:lpSpin 70s linear infinite}
.lp-scene .o{position:absolute;left:50%;top:50%;width:0;height:0;display:block;transform:rotate(calc(var(--i)*45deg)) translateX(var(--r))}
.lp-scene .b{position:absolute;left:calc(var(--bs)/-2);top:calc(var(--bs)/-2);width:var(--bs);height:var(--bs);border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--pine);font-size:1.4rem;box-shadow:0 18px 34px -14px rgba(0,0,0,.6);animation:lpUnspin 70s linear infinite;transition:background .3s,color .3s,scale .4s var(--ease)}
.lp-scene .b .l{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;padding:.25rem .7rem;border-radius:99px;background:var(--brass);color:var(--pine);font-weight:800;font-size:.74rem;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:.3s;pointer-events:none}
.lp-scene .o:hover .b{background:var(--brass);scale:1.18}.lp-scene .o:hover .b .l{opacity:1;transform:none}
.lp-scene:hover .orbit,.lp-scene:hover .b{animation-play-state:paused}
.lp-marq{position:relative;overflow:hidden;background:#fff;border-bottom:1px solid #e0edf5;padding:1.1rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lp-marq .track{display:flex;align-items:center;width:max-content;animation:lpMarq 45s linear infinite}.lp-marq:hover .track{animation-play-state:paused}
.lp-marq span{display:inline-flex;align-items:center;gap:.7rem;padding:0 1.4rem;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--pine)}.lp-marq span i{color:var(--pine-2);font-size:1.3rem}.lp-marq b{color:var(--brass);font-size:1.1rem}
.lp-kick{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:800;color:var(--pine-2);margin-bottom:.5rem}
.lp-match{    padding: 0 0 1rem;
    margin-top: -60px;}
.lp-mbox{padding:2rem 2.2rem;border-radius:30px;background:linear-gradient(180deg,#fff,#eef6fb);border:1px solid #dcebf4;box-shadow:0 30px 60px -44px rgba(0,60,100,.5)}
.lp-mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem}.lp-mhead h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;color:var(--pine);margin:0}
.lp-reset{border:0;background:#fff;color:var(--pine);font:inherit;font-weight:700;font-size:.85rem;padding:.45rem 1rem;border-radius:99px;transition:.3s var(--ease)}.lp-reset:hover{background:var(--pine);color:#fff}
.lp-needs{display:flex;flex-wrap:wrap;gap:.6rem}
.lp-need{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.15rem;border-radius:99px;border:1px solid #d3e5f0;background:#fff;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink);cursor:pointer;transition:all .4s var(--ease)}
.lp-need i{color:var(--pine-2);transition:.3s}.lp-need:hover{border-color:var(--pine-2);transform:translateY(-3px);box-shadow:0 12px 22px -14px rgba(0,106,164,.6)}
.lp-need.on{background:var(--pine);border-color:var(--pine);color:#fff;box-shadow:0 14px 26px -14px rgba(0,71,110,.9);transform:translateY(-2px)}.lp-need.on i{color:var(--brass-2)}
.lp-say{margin:1.2rem 0 0;color:var(--muted);min-height:1.5em}.lp-say a{font-weight:700;color:var(--pine-2)}.lp-say b{color:var(--pine)}
.lp-products{padding:5rem 0 4.5rem}
.lp-sec{margin-bottom:2.8rem}.lp-sec .title{color:var(--pine);letter-spacing:-.03em}
.lp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.lp-card{--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;height:100%;min-height:310px;padding:1.7rem;border-radius:26px;background:#fff;border:1px solid #e0edf5;color:var(--ink);overflow:hidden;transform-style:preserve-3d;transition:transform .45s var(--ease),box-shadow .5s var(--ease),opacity .5s,filter .5s}
.lp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:radial-gradient(280px circle at var(--mx) var(--my),var(--brass),rgba(0,106,164,.9) 45%,transparent 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s;pointer-events:none}
.lp-card::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(0,106,164,.1),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.lp-card:hover{color:var(--ink);transform:translateY(-8px);box-shadow:0 40px 60px -36px rgba(0,60,100,.55)}.lp-card:hover::before,.lp-card:hover::after{opacity:1}
.lp-card>*{position:relative;z-index:1}
.lp-wm{position:absolute!important;right:-22px;top:-18px;z-index:0!important;font-size:9rem;line-height:1;color:var(--sky);opacity:.8;transition:transform .9s var(--ease)}.lp-card:hover .lp-wm{transform:rotate(14deg) scale(1.12) translate(-6px,6px)}
.lp-ic{width:58px;height:58px;border-radius:19px;background:var(--sky);color:var(--pine-2);display:grid;place-items:center;font-size:1.55rem;margin-bottom:auto;transition:background .4s,color .4s,box-shadow .4s}
.lp-card:hover .lp-ic{background:var(--pine-2);color:#fff;box-shadow:0 14px 24px -10px rgba(0,106,164,.8)}.lp-card:hover .lp-ic i{animation:lpWig .7s var(--ease)}
.lp-card small{color:var(--pine-2);font-weight:700;font-size:.8rem;letter-spacing:.03em;margin-top:1.8rem}
.lp-card h3{font-size:1.55rem;font-weight:800;color:var(--pine);margin:.3rem 0 .6rem;letter-spacing:-.02em}
.lp-card p{margin:0 0 2.8rem;color:var(--muted);font-size:.95rem;line-height:1.55}
.lp-arrow{position:absolute!important;right:1.4rem;bottom:1.4rem;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--pine);transition:all .5s var(--ease)}.lp-card:hover .lp-arrow{background:var(--brass);transform:rotate(45deg) scale(1.1); color: var(--white);}
.lp-fit{position:absolute!important;right:1.2rem;top:1.2rem;display:none;align-items:center;gap:.35rem;padding:.3rem .8rem;border-radius:99px;background:var(--brass);color:var(--pine);font-weight:800;font-size:.74rem}
.lp-grid.filt .lp-card{opacity:.4;filter:saturate(.3)}
.lp-grid.filt .lp-card.hit{opacity:1;filter:none;box-shadow:0 0 0 3px rgba(245,184,61,.7),0 30px 50px -32px rgba(0,60,100,.5);animation:lpHit .8s var(--ease)}.lp-grid.filt .lp-card.hit .lp-fit{display:inline-flex}
.lp-steps{padding:4.5rem 0 5rem;background:linear-gradient(180deg,#f4f9fc,#fff)}
.lp-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.lp-row::before,.lp-row::after{content:"";position:absolute;top:27px;left:16.6%;right:16.6%;height:3px;border-radius:3px}
.lp-row::before{background:#d6e7f1}.lp-row::after{background:linear-gradient(90deg,var(--brass),var(--pine-2));transform-origin:left;transform:scaleX(0);transition:transform 2.2s var(--ease) .3s}
.lp-row.go::after{transform:scaleX(1)}
.lp-step{position:relative;text-align:center;padding:0 1rem}
.lp-step .n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1.2rem;border-radius:50%;background:var(--pine);color:#fff;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.35rem;box-shadow:0 0 0 8px #f8fbfd,0 14px 26px -12px rgba(0,71,110,.8);transition:transform .5s var(--ease),background .4s,color .4s}
.lp-row.go .lp-step .n{animation:lpPop .7s var(--ease) both;animation-delay:calc(.3s + var(--k)*.85s)}
.lp-step:hover .n{transform:scale(1.12);background:var(--brass);color:var(--pine)}
.lp-step h3{font-size:1.2rem;font-weight:800;color:var(--pine);margin-bottom:.5rem}.lp-step p{color:var(--muted);margin:0 auto;max-width:18rem}
/*================================================
lp  End
=================================================*/

/*================================================
lp Start
=================================================*/
.cv-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--white);
    font-weight: 400;
    font-size: .92rem;
    transition: .4s var(--ease);
    animation: cvFade .8s var(--ease) both;
    text-transform: capitalize;
}
:root{--ease:cubic-bezier(.22,1,.36,1)}
@keyframes cvFade{from{opacity:0;transform:translateY(24px)}}
@keyframes cvFloat{50%{transform:translateY(-12px)}}
@keyframes cvDrift{to{transform:translate(60px,40px) scale(1.12)}}
@keyframes cvSpin{to{transform:rotate(360deg)}}
@keyframes cvKen{to{transform:scale(1.09)}}
@keyframes cvLine{from{background-size:0 100%}}
@keyframes cvSheen{45%,100%{transform:translateX(130%)}}
@keyframes cvGrad{to{background-position:300% 0}}
.btn-soft{background:#fff;color:var(--pine);border:1.5px solid #cfe2ee}.btn-soft:hover{background:var(--sky);color:var(--pine);border-color:var(--pine-2)}
.cv-shine{position:relative;overflow:hidden}.cv-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-130%);animation:cvSheen 3.8s 1.5s infinite}
.cv-hero{position:relative;overflow:hidden;padding:9.5rem 0 7rem;background:#fff}
.cv-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.cv-blob.a{width:520px;height:520px;right:-120px;top:-140px;background:rgba(0,106,164,.2);animation:cvDrift 16s ease-in-out infinite alternate}
.cv-blob.b{width:420px;height:420px;left:-140px;bottom:-160px;background:rgba(245,184,61,.26);animation:cvDrift 20s -5s ease-in-out infinite alternate-reverse}
.cv-h1{font-size:clamp(3rem,7.2vw,6rem);font-weight:800;line-height:.98;letter-spacing:-.045em;color:var(--pine);margin:1.2rem 0 1.4rem;animation:cvFade 1s .1s var(--ease) both}
.cv-h1 .hl{background:linear-gradient(var(--brass),var(--brass)) 0 90%/100% 28% no-repeat;animation:cvLine 1.2s .9s var(--ease) both;padding:0 .05em}
.cv-lead{font-size:1.14rem;line-height:1.75;max-width:35rem;color:var(--muted);animation:cvFade 1s .25s var(--ease) both}
.cv-btns{animation:cvFade 1s .4s var(--ease) both}
.cv-stage{position:relative;max-width:440px;margin:0 auto;padding:1.5rem}
.cv-orb{position:absolute;width:62%;aspect-ratio:1;right:-6%;top:-2%;border-radius:50%;background:linear-gradient(135deg,var(--brass),var(--brass-2));opacity:.9;animation:cvFloat 8s ease-in-out infinite}
.cv-dash{position:absolute;inset:-4% -8% auto auto;width:78%;aspect-ratio:1;border-radius:50%;border:2px dashed rgba(0,106,164,.35);animation:cvSpin 50s linear infinite}
.cv-arch{position:relative;aspect-ratio:4/5;border-radius:999px 999px 38px 38px;overflow:hidden;background:linear-gradient(160deg,var(--pine-2),#00283f);box-shadow:0 50px 80px -40px rgba(0,60,100,.7);animation:cvFade 1.1s .3s var(--ease) both}
.cv-arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:cvKen 14s ease-in-out infinite alternate}
.cv-chip{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);box-shadow:0 24px 44px -22px rgba(0,40,63,.6);font-weight:700;font-size:.9rem;color:var(--pine);animation:cvFloat 7s ease-in-out infinite}
.cv-chip i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--sky);color:var(--pine-2)}
.cv-chip.c1{left:-8%;bottom:14%}.cv-chip.c2{right:-4%;bottom:34%;animation-delay:-3s}.cv-chip.c2 i{background:#e3f6ec;color:#1a9d5c}
.cv-nums{position:relative;z-index:2;margin-top:-3.5rem;padding:0}
.cv-nbox{display:grid;grid-template-columns:repeat(4,1fr);border-radius:32px;background:#fff;box-shadow:0 50px 90px -50px rgba(0,60,100,.65);border:1px solid #e0edf5;overflow:hidden}
.cv-n{padding:2rem 1.8rem;position:relative;transition:background .5s var(--ease)}.cv-n+.cv-n::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:#dcebf4}
.cv-n:hover{background:#f4f9fc}
.cv-n b{display:block;font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(2.6rem,4.4vw,3.9rem);line-height:1;letter-spacing:-.04em;background:linear-gradient(120deg,var(--pine),var(--pine-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cv-n b em{font-style:normal;color:var(--brass);-webkit-text-fill-color:var(--brass)}
.cv-n strong{display:block;margin:.5rem 0 .2rem;color:var(--ink);font-size:.98rem}.cv-n span{color:var(--muted);font-size:.86rem;line-height:1.4;display:block}
.cv-sec{padding:5.5rem 0}.cv-kick{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:800;color:var(--pine-2);margin-bottom:.5rem}
.cv-sec .title{color:var(--pine);letter-spacing:-.03em}
.cv-what p{color:var(--muted);font-size:1.08rem;line-height:1.75}
.cv-uses{display:grid;gap:.8rem}
.cv-use{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.3rem;border-radius:22px;background:#fff;border:1px solid #e0edf5;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.cv-use:hover{transform:translateX(8px);border-color:#bcd9ea;box-shadow:0 24px 40px -28px rgba(0,60,100,.5)}
.cv-use i{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--sky);color:var(--pine-2);font-size:1.4rem;flex:none;transition:.4s}.cv-use:hover i{background:var(--pine-2);color:#fff}
.cv-use b{display:block;color:var(--pine)}.cv-use span{color:var(--muted);font-size:.9rem}
.cv-note{margin-top:1rem;padding:1rem 1.3rem;border-radius:18px;background:#f1f5f8;color:var(--muted);font-size:.92rem}.cv-note i{color:var(--pine-2);margin-right:.5rem}
.cv-guides{background:linear-gradient(180deg,#f4f9fc,#fff)}
.cv-gl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.5rem;margin-top:2.4rem}
.cv-g{position:relative;display:flex;gap:1.2rem;padding:1.6rem 0 1.6rem 1.2rem;border-bottom:1px solid #d6e7f1;transition:padding .5s var(--ease)}
.cv-g::before{content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:3px;border-radius:3px;background:var(--brass);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.cv-g:hover{padding-left:1.8rem}.cv-g:hover::before{transform:scaleY(1)}
.cv-g .no{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.9rem;line-height:1;color:var(--brass);flex:none;min-width:2.2rem}
.cv-g h3{font-size:1.18rem;font-weight:800;color:var(--pine);margin:0 0 .35rem}.cv-g p{margin:0;color:var(--muted);line-height:1.6;font-size:.97rem}
.cv-pc{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:2.4rem}
.cv-box{padding:2rem;border-radius:30px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}.cv-box:hover{transform:translateY(-6px);box-shadow:0 40px 60px -40px rgba(0,60,100,.5)}
.cv-box.pro{background:linear-gradient(160deg,#eaf8f1,#fff)}.cv-box.con{background:linear-gradient(160deg,#fff3e6,#fff)}
.cv-box h3{display:flex;align-items:center;gap:.7rem;font-size:1.5rem;font-weight:800;margin-bottom:1.2rem}.cv-box h3 i{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:1.2rem}
.cv-box.pro h3{color:#146c43}.cv-box.pro h3 i{background:#c9ecd9}.cv-box.con h3{color:#a85a0f}.cv-box.con h3 i{background:#fadcb8}
.cv-box ul{list-style:none;padding:0;margin:0}.cv-box li{position:relative;padding:.9rem 0 .9rem 1.9rem;border-top:1px solid rgba(0,40,63,.08)}.cv-box li::before{content:"";position:absolute;left:0;top:1.35rem;width:10px;height:10px;border-radius:50%}
.pro li::before{background:#1a9d5c}.con li::before{background:#e8892b}
.cv-box li b{display:block;color:var(--pine)}.cv-box li span{color:var(--muted);font-size:.94rem;line-height:1.5}
.cv-cand{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.cv-c{padding:1.7rem;border-radius:26px;background:#fff;border:1px solid #e0edf5;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.cv-c:hover{transform:translateY(-8px);border-color:#bcd9ea;box-shadow:0 36px 56px -36px rgba(0,60,100,.55)}
.cv-c i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sky);color:var(--pine-2);font-size:1.3rem;margin-bottom:1rem;transition:.5s var(--ease)}.cv-c:hover i{background:var(--brass);color:var(--pine);transform:rotate(-10deg) scale(1.1)}
.cv-c h3{font-size:1.1rem;font-weight:800;color:var(--pine);margin-bottom:.4rem}.cv-c p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.cv-others{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.6rem}.cv-others a{padding:.6rem 1.2rem;border-radius:99px;background:#fff;border:1.5px solid #cfe2ee;color:var(--pine);font-weight:700;font-size:.92rem;transition:.4s var(--ease)}.cv-others a:hover{background:var(--pine);color:#fff;border-color:var(--pine);transform:translateY(-3px)}.cv-others a.cur{background:var(--pine-2);border-color:var(--pine-2);color:#fff;pointer-events:none}
.cv-fine{text-align:center;color:var(--muted);font-size:.85rem;margin:1.4rem auto 0;max-width:44rem}
.cv-cta{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;padding:2.6rem 3rem;border-radius:34px;color:#fff;background:linear-gradient(120deg,#00283f,var(--pine-2),#0b86c7,#00283f);background-size:300% 100%;animation:cvGrad 16s linear infinite}
.cv-av{width:100px;height:100px;border-radius:50%;overflow:hidden;border:4px solid var(--brass);background:linear-gradient(160deg,#cfe6f4,#fff)}.cv-av img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.cv-cta h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;margin:0 0 .3rem}.cv-cta small{display:block;color:rgba(255,255,255,.8)}.cv-lnk{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}.cv-lnk a{display:inline-flex;gap:.4rem;align-items:center;padding:.4rem .9rem;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:.88rem;transition:.3s}.cv-lnk a:hover{background:var(--brass);color:var(--pine)}
.cv-cb{display:flex;flex-direction:column;gap:.6rem}
@media(max-width:991px){.cv-hero{padding:8.5rem 0 6rem}.cv-stage{margin-top:1rem;max-width:380px}.cv-nbox{grid-template-columns:repeat(2,1fr)}.cv-n:nth-child(3)::before{display:none}.cv-n:nth-child(n+3){border-top:1px solid #dcebf4}.cv-gl,.cv-pc{grid-template-columns:1fr}.cv-cand{grid-template-columns:repeat(2,1fr)}.cv-cta{grid-template-columns:1fr;text-align:center;justify-items:center}.cv-lnk{justify-content:center}}
@media(max-width:575px){.cv-sec{padding:4rem 0}.cv-cand{grid-template-columns:1fr}.cv-nbox{grid-template-columns:1fr 1fr}.cv-n{padding:1.4rem 1.1rem}.cv-cta{padding:2rem 1.4rem}.cv-chip.c1{left:0}.cv-chip.c2{right:0}}
@media(prefers-reduced-motion:reduce){.cv-hero *,.cv-cta,.cv-shine::after,.cv-use,.cv-c,.cv-box,.cv-g{animation:none!important;transition:none!important}.cv-h1 .hl{background-size:100% 28%}}

.cv-cta-section {
    padding: 120px 0;
}

/*================================================
lp Start
=================================================*/

/* === Real estate agent page === */

@keyframes raFade{from{opacity:0;transform:translateY(24px)}}
@keyframes raFloat{50%{transform:translateY(-12px)}}
@keyframes raDrift{to{transform:translate(60px,40px) scale(1.12)}}
@keyframes raLine{from{background-size:0 100%}}
@keyframes raL{from{opacity:0;transform:translateX(-90px)}}
@keyframes raR{from{opacity:0;transform:translateX(90px)}}
@keyframes raPop{from{opacity:0;transform:scale(.3)}60%{transform:scale(1.15)}}
@keyframes raPing{0%{box-shadow:0 0 0 0 rgba(0,106,164,.45)}100%{box-shadow:0 0 0 26px rgba(0,106,164,0)}}
@keyframes raProg{from{width:0}to{width:100%}}
@keyframes raSheen{45%,100%{transform:translateX(130%)}}
@keyframes raGrad{to{background-position:300% 0}}
.btn-soft{background:#fff;color:var(--pine);border:1.5px solid #cfe2ee}.btn-soft:hover{background:var(--sky);color:var(--pine);border-color:var(--pine-2)}
.ra-shine{position:relative;overflow:hidden}.ra-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-130%);animation:raSheen 3.8s 1.5s infinite}
.ra-hero{position:relative;overflow:hidden;padding:9.5rem 0 6rem;background:#fff}
.ra-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}.ra-blob.a{width:520px;height:520px;right:-120px;top:-140px;background:rgba(0,106,164,.2);animation:raDrift 16s ease-in-out infinite alternate}.ra-blob.b{width:420px;height:420px;left:-140px;bottom:-160px;background:rgba(245,184,61,.26);animation:raDrift 20s -5s ease-in-out infinite alternate-reverse}
.ra-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border-radius:99px;background:var(--sky);color:var(--pine-2);font-weight:700;font-size:.82rem;letter-spacing:.05em;animation:raFade .8s var(--ease) both}
.ra-h1{font-size:clamp(3rem,7vw,5.8rem);font-weight:800;line-height:.98;letter-spacing:-.045em;color:var(--pine);margin:1.2rem 0 1.4rem;animation:raFade 1s .1s var(--ease) both}
.ra-h1 .hl{background:linear-gradient(var(--brass),var(--brass)) 0 90%/100% 28% no-repeat;animation:raLine 1.2s .9s var(--ease) both;padding:0 .05em}
.ra-lead{font-size:1.14rem;line-height:1.75;max-width:34rem;color:var(--ink);animation:raFade 1s .25s var(--ease) both}.ra-lead2{max-width:34rem;color:var(--muted);animation:raFade 1s .35s var(--ease) both}
.ra-btns{animation:raFade 1s .45s var(--ease) both}
.ra-duo{position:relative;width:100%;max-width:500px;aspect-ratio:1.12;margin:0 auto}
.ra-c{position:absolute;top:10%;width:62%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;justify-content:center;padding:0 1.4rem;box-shadow:0 40px 70px -40px rgba(0,40,63,.7)}
.ra-c i.big{font-size:2.4rem;margin-bottom:.4rem}.ra-c b{font-family:'Bricolage Grotesque';font-size:1.7rem;line-height:1}.ra-c span{font-size:.84rem;line-height:1.3;margin-top:.3rem;max-width:9.5rem}
.ra-c1{left:0;color:#fff;background:linear-gradient(145deg,var(--pine-2),#00283f);align-items:flex-start;padding-left:2rem;animation:raL 1.2s .3s var(--ease) both}
.ra-c2{right:0;color:var(--pine);background:linear-gradient(145deg,var(--brass-2),var(--brass));align-items:flex-end;text-align:right;padding-right:2rem;animation:raR 1.2s .3s var(--ease) both}
.ra-mid{position:absolute;left:50%;top:41%;translate:-50% -50%;width:92px;height:92px;border-radius:50%;background:#fff;color:var(--pine-2);display:grid;place-items:center;font-size:2.6rem;z-index:2;box-shadow:0 20px 40px -16px rgba(0,40,63,.6);animation:raPop .8s 1.3s var(--ease) both,raPing 2.4s 2.2s infinite}
.ra-chip{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 22px 40px -22px rgba(0,40,63,.6);font-weight:700;font-size:.86rem;color:var(--pine);z-index:3;animation:raFloat 7s ease-in-out infinite}
.ra-chip i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--sky);color:var(--pine-2)}
.ra-chip.k1{left:-2%;top:0}.ra-chip.k2{right:-2%;top:66%;animation-delay:-2.5s}.ra-chip.k2 i{background:#e3f6ec;color:#1a9d5c}.ra-chip.k3{left:6%;bottom:0;animation-delay:-4.5s}.ra-chip.k3 i{background:#fff0d2;color:#c98100}
.ra-sec{padding:5.5rem 0}.ra-kick{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:800;color:var(--pine-2);margin-bottom:.5rem}.ra-sec .title{color:var(--pine);letter-spacing:-.03em}
.ra-bene{background:linear-gradient(180deg,#f4f9fc,#fff)}
.ra-show{display:grid;grid-template-columns:5fr 7fr;gap:2rem;margin-top:2.6rem;align-items:stretch}
.ra-list{display:grid;gap:.6rem;align-content:start}
.ra-it{position:relative;display:flex;align-items:center;gap:1rem;width:100%;text-align:left;padding:1rem 1.2rem 1.15rem;border:1px solid #e0edf5;border-radius:20px;background:#fff;font:inherit;color:var(--ink);cursor:pointer;overflow:hidden;transition:transform .5s var(--ease),background .4s,box-shadow .5s var(--ease),border-color .4s}
.ra-it .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.3rem;color:#b5cddd;min-width:2rem;transition:color .4s}.ra-it .t{font-weight:700;color:var(--pine)}
.ra-it:hover{transform:translateX(6px);border-color:#bcd9ea}
.ra-it.on{background:var(--sky);border-color:var(--pine-2);transform:translateX(10px);box-shadow:0 22px 40px -28px rgba(0,60,100,.6)}.ra-it.on .n{color:var(--brass)}
.ra-it .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:transparent}.ra-it .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-2))}
.ra-it.on .bar i{animation:raProg 7s linear forwards}.ra-show.manual .ra-it.on .bar i{animation:none;width:100%}.ra-show:hover .ra-it.on .bar i{animation-play-state:paused}
.ra-pwrap{display:grid;position:relative;border-radius:32px;overflow:hidden;color:#fff;background:radial-gradient(500px 300px at 100% 0,rgba(245,184,61,.22),transparent 60%),linear-gradient(145deg,#00283f,var(--pine) 65%,#006aa4);box-shadow:0 50px 90px -50px rgba(0,40,63,.9)}
.ra-pn{grid-area:1/1;padding:2.6rem;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s}
.ra-pn.on{opacity:1;visibility:visible;transform:none}
.ra-bigno{position:absolute;right:1.6rem;top:.6rem;font-family:'Bricolage Grotesque';font-weight:800;font-size:8rem;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14)}
.ra-pic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:1.8rem;background:var(--brass);color:var(--pine);margin-bottom:1.4rem;box-shadow:0 18px 30px -14px rgba(245,184,61,.6)}.ra-pn.on .ra-pic{animation:raPop .7s var(--ease)}
.ra-pn h3{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;margin-bottom:.8rem;position:relative}.ra-pn p{color:rgba(255,255,255,.86);font-size:1.05rem;line-height:1.75;position:relative}
.ra-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;position:relative}.ra-tags span{padding:.4rem .95rem;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-weight:600;font-size:.84rem}
.ra-loans{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.6rem}.ra-loans a{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:99px;background:#fff;border:1.5px solid #cfe2ee;color:var(--pine);font-weight:700;transition:.4s var(--ease)}.ra-loans a i{color:var(--pine-2)}.ra-loans a:hover{background:var(--pine);color:#fff;border-color:var(--pine);transform:translateY(-4px)}.ra-loans a:hover i{color:var(--brass-2)}
.ra-card{padding:2rem;border-radius:30px;background:#fff;border:1px solid #e0edf5;box-shadow:0 40px 70px -48px rgba(0,60,100,.55)}
.ra-who{display:flex;align-items:center;gap:1.1rem;margin:1.6rem 0 1rem;padding:1.1rem;border-radius:22px;background:var(--sky)}
.ra-av{width:84px;height:84px;border-radius:50%;overflow:hidden;border:4px solid var(--brass);background:linear-gradient(160deg,#cfe6f4,#fff);flex:none}.ra-av img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.ra-who h3{font-size:1.2rem;font-weight:800;margin:0;color:var(--pine)}.ra-who small{display:block;color:var(--muted);font-weight:600;margin-bottom:.5rem}
.ra-lnk{display:flex;flex-wrap:wrap;gap:.4rem}.ra-lnk a{display:inline-flex;gap:.4rem;align-items:center;padding:.35rem .85rem;border-radius:99px;background:#fff;color:var(--pine);font-weight:700;font-size:.85rem;transition:.3s}.ra-lnk a:hover{background:var(--pine-2);color:#fff}
.ra-in p{color:var(--muted);line-height:1.75}
.ra-form h3{font-size:1.5rem;font-weight:800;color:var(--pine);margin-bottom:.3rem}.ra-form .sub2{color:var(--muted);margin-bottom:1.2rem}
.ra-sign{margin-top:1.4rem;font-weight:700;color:var(--pine)}.ra-sign a{color:var(--pine-2);border-bottom:2px solid var(--brass)}
.ra-cta{position:relative;overflow:hidden;text-align:center;color:#fff;border-radius:34px;padding:3.2rem 1.5rem;background:linear-gradient(120deg,#00283f,var(--pine-2),#0b86c7,#00283f);background-size:300% 100%;animation:raGrad 16s linear infinite}
.ra-cta h2{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;margin-bottom:.5rem}.ra-cta p{color:rgba(255,255,255,.85);margin-bottom:1.5rem}
@media(max-width:991px){.ra-hero{padding:8.5rem 0 4.5rem}.ra-duo{margin-top:1rem}.ra-show{grid-template-columns:1fr}.ra-it.on,.ra-it:hover{transform:none}.ra-pn{padding:2rem 1.5rem}.ra-bigno{font-size:5rem}}
@media(max-width:575px){.ra-sec{padding:4rem 0}.ra-c b{font-size:1.3rem}.ra-c i.big{font-size:1.8rem}.ra-c span{font-size:.74rem}.ra-mid{width:68px;height:68px;font-size:1.9rem}.ra-chip{font-size:.74rem;padding:.45rem .7rem}.ra-who{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){.ra-hero *,.ra-cta,.ra-shine::after,.ra-it,.ra-pn,.ra-pic{animation:none!important;transition:none!important}.ra-h1 .hl{background-size:100% 28%}}


/* reponisve */

@media (max-width: 991px) {

    .hero .row {
        gap: 2rem;
    }

    .about-section .row {
        gap: 2rem;
    }

    .nc-sec .row {
        gap: 2rem;
    }

    .est-sec .row {
        gap: 2rem;
    }

    .journey-section .row {
        gap: 2rem;
    }

    .ct-section .row {
        gap: 2rem;
    }

}

@media (max-width: 575px) {}

@media (max-width: 767px) {



}