@import "https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap";

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

body {
    margin: 0;
    font-family: 'Figtree', sans-serif;
    background: #F6F5F5;
    color: #1a1a1a;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto
}

body::selection {
    background: linear-gradient(90deg, #0E1519 0%, #2DA9F0 100%);
    color: #fff
}

body:focus-visible {
    outline: 2px solid #2DA9F0;
    outline-offset: 2px
}

.hdrWrap {
    background: linear-gradient(135deg, #f6f5f5fa 0%, #2da9f00f 100%);
    border-bottom: 1px solid #0e151914;
    box-shadow: -1px 3px 5px 0 #0e151914;
    padding: 32px 0
}

.hdrContainer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px
}

.topStrip {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 32px
}

.nvgtn {
    display: flex;
    gap: 32px;
    align-items: center
}

.nvgtn a {
    font-size: 15px;
    color: #0E1519;
    text-decoration: none;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: background .18s cubic-bezier(0.4, 0, 0.6, 1), border-color .14s ease-out;
    font-weight: 400
}

.nvgtn a:hover {
    background: linear-gradient(90deg, #2DA9F0 0%, #0E1519 100%);
    color: #fff;
    border-color: #2DA9F0
}

.nvgtn a:focus-visible {
    outline: 2px solid #2DA9F0;
    outline-offset: 2px
}

.brandBlock {
    display: flex;
    align-items: center;
    gap: 32px
}

.logoContainer {
    background: #2da9f00a;
    padding: 16px;
    border-radius: 6px;
    box-shadow: -1px 3px 5px 0 #2da9f014;
    border: 1px solid #2da9f01f
}

.logoContainer img {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: contain
}

.brandTxt {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.companyName {
    font-size: 32px;
    font-weight: 700;
    color: #0E1519;
    line-height: 1.15;
    margin: 0
}

.tagline {
    font-size: 15px;
    color: #2DA9F0;
    line-height: 1.4;
    margin: 0;
    letter-spacing: .5px
}

.ftrWrap {
    background: linear-gradient(180deg, #f6f5f566 0%, #0e151908 100%);
    border-top: 1px solid #0e15190f;
    padding: 64px 0 32px;
    margin-top: 96px
}

.ftrContainer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px
}

.ftrTop {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #0e151914;
    margin-bottom: 32px
}

.ftrLogoContainer {
    background: #2da9f008;
    padding: 12px;
    border-radius: 3px;
    border: 1px solid #2da9f014
}

.ftrLogoContainer img {
    display: block;
    width: 45px;
    height: 45px;
    object-fit: contain
}

.ftrBrand {
    font-size: 23px;
    font-weight: 700;
    color: #0E1519;
    margin: 0
}

.ftrGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
    margin-bottom: 64px
}

.ftrColumn h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0E1519;
    margin: 0 0 16px;
    line-height: 1.4
}

.ftrLinks {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.ftrLinks a {
    font-size: 15px;
    color: #1a1a1a;
    text-decoration: none;
    transition: color .16s ease-out
}

.ftrLinks a:hover {
    color: #2DA9F0
}

.ftrLinks a:focus-visible {
    outline: 2px solid #2DA9F0;
    outline-offset: 2px
}

.contactData p {
    font-size: 15px;
    color: #1a1a1a;
    margin: 0 0 8px;
    line-height: 1.6
}

.contactData a {
    color: #2DA9F0;
    text-decoration: none;
    transition: color .14s ease-out
}

.contactData a:hover {
    color: #0E1519
}

.ftrBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid #0e15190f
}

.cpyrght {
    font-size: 13px;
    color: #0e151999;
    margin: 0
}

.socialLinks {
    display: flex;
    gap: 16px
}

.socialLinks a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #2da9f04d;
    border-radius: 28px;
    color: #2DA9F0;
    text-decoration: none;
    transition: background .18s cubic-bezier(0.4, 0, 0.6, 1), transform .12s ease-out
}

.socialLinks a:hover {
    background: #2DA9F0;
    color: #fff;
    transform: scale(1.1)
}

.socialLinks a:focus-visible {
    outline: 2px solid #2DA9F0;
    outline-offset: 2px
}

@media (max-width: 1366px) {
    .ftrGrid {
        gap: 32px
    }
}

@media (max-width: 768px) {
    .hdrContainer {
        padding: 0 16px
    }

    .topStrip {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start
    }

    .nvgtn {
        flex-wrap: wrap;
        gap: 16px
    }

    .brandBlock {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .ftrContainer {
        padding: 0 16px
    }

    .ftrTop {
        flex-direction: column;
        align-items: flex-start
    }

    .ftrGrid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .ftrBottom {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start
    }
}

@media (max-width: 375px) {
    .hdrWrap {
        padding: 16px 0
    }

    .hdrContainer {
        padding: 0 8px
    }

    .topStrip {
        margin-bottom: 16px
    }

    .nvgtn {
        gap: 8px
    }

    .nvgtn a {
        padding: 8px;
        font-size: 13px
    }

    .companyName {
        font-size: 23px
    }

    .tagline {
        font-size: 13px
    }

    .ftrContainer {
        padding: 0 8px
    }
}

.cookieBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #0e1519f5;
    color: #fff;
    padding: 16px 32px;
    z-index: 4000;
    display: none;
    box-shadow: -1px 5px 28px 0 #0e15191c
}

.cookieBar.showing {
    display: block
}

.ckContent {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px
}

.ckTxt {
    font-size: 15px;
    line-height: 1.6;
    flex: 1
}

.ckActions {
    display: flex;
    gap: 16px;
    align-items: center
}

.ckBtn {
    padding: 8px 16px;
    font-size: 15px;
    font-family: 'Figtree', sans-serif;
    border: none;
    cursor: pointer;
    background: #2DA9F0;
    color: #fff;
    transition: background .16s ease-out
}

.ckBtn:hover {
    background: #0E1519
}

.ckBtn:focus-visible {
    outline: 2px solid #2DA9F0;
    outline-offset: 2px
}

.ckBtnSecondary {
    background: transparent;
    border: 1px solid #f6f5f54d;
    color: #F6F5F5
}

.ckBtnSecondary:hover {
    background: #f6f5f51a;
    border-color: #F6F5F5
}

.ckSettings {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f6f5f533
}

.ckSettings.showing {
    display: block
}

.ckToggleGroup {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px
}

.ckToggle {
    display: flex;
    align-items: center;
    gap: 8px
}

.ckToggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer
}

.ckToggle label {
    font-size: 13px;
    cursor: pointer
}

@media (max-width: 768px) {
    .cookieBar {
        padding: 16px
    }

    .ckContent {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .ckActions {
        width: 100%;
        flex-direction: column
    }

    .ckBtn {
        width: 100%
    }
}

.text-mja-doc {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 32px;
    background: #fff
}

.text-mja-doc p {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0 0 16px
}

.text-mja-doc p+p {
    margin-top: 16px
}

.text-mja-doc strong,
.text-mja-doc b {
    font-weight: 600;
    color: #0E1519
}

.text-mja-doc em,
.text-mja-doc i {
    font-style: italic
}

.text-mja-doc ul,
.text-mja-doc ol {
    margin: 0 0 32px;
    padding: 0 0 0 32px
}

.text-mja-doc ul li,
.text-mja-doc ol li {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0 0 8px
}

.text-mja-doc ul li:last-child,
.text-mja-doc ol li:last-child {
    margin-bottom: 0
}

.text-mja-doc ul {
    list-style-type: disc
}

.text-mja-doc ol {
    list-style-type: decimal
}

.text-mja-doc ul ul,
.text-mja-doc ol ul {
    margin: 8px 0
}

.text-mja-doc ul ol,
.text-mja-doc ol ol {
    margin: 8px 0
}

.text-mja-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #e0e0e0
}

.text-mja-doc thead {
    background: #F6F5F5
}

.text-mja-doc thead tr {
    border-bottom: 2px solid #2DA9F0
}

.text-mja-doc th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #0E1519;
    border-right: 1px solid #e0e0e0
}

.text-mja-doc th:last-child {
    border-right: none
}

.text-mja-doc tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background .16s ease-out
}

.text-mja-doc tbody tr:last-child {
    border-bottom: none
}

.text-mja-doc tbody tr:hover {
    background: #F6F5F5
}

.text-mja-doc td {
    padding: 16px;
    color: #0E1519;
    border-right: 1px solid #e0e0e0
}

.text-mja-doc td:last-child {
    border-right: none
}

.text-mja-doc div {
    margin: 0 0 16px
}

@media (max-width: 768px) {
    .text-mja-doc {
        padding: 32px 16px
    }

    .text-mja-doc p,
    .text-mja-doc ul li,
    .text-mja-doc ol li {
        font-size: 13px
    }

    .text-mja-doc table {
        font-size: 13px;
        display: block;
        overflow-x: auto
    }

    .text-mja-doc th,
    .text-mja-doc td {
        padding: 8px
    }

    .text-mja-doc ul,
    .text-mja-doc ol {
        padding: 0 0 0 16px
    }
}

@media (max-width: 375px) {
    .text-mja-doc {
        padding: 32px 8px
    }
}

.missionPg {
    background: #F6F5F5;
    min-height: 100vh
}

.missionPg .heroWrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center
}

.missionPg .imgColumn {
    position: relative;
    border: 8px solid #2DA9F0;
    border-radius: 6px;
    overflow: hidden
}

.missionPg .imgColumn img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    filter: saturate(0.6);
    transition: filter .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.missionPg .imgColumn:hover img {
    filter: saturate(1)
}

.missionPg .imgColumn::after {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle at bottom left, #2ea9f026 0%, transparent 70%);
    pointer-events: none
}

.missionPg .txtColumn h1 {
    font-size: 45px;
    line-height: 1.15;
    color: #0E1519;
    margin: 0 0 32px;
    font-weight: 700
}

.missionPg .txtColumn h1 span {
    background: linear-gradient(90deg, #2DA9F0 0%, #0E1519 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: underline;
    text-decoration-color: #2DA9F0;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px
}

.missionPg .txtColumn p {
    font-size: 18px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0
}

.missionPg .valuesSection {
    background: linear-gradient(135deg, #fff 0%, #F6F5F5 100%);
    padding: 96px 16px;
    position: relative;
    overflow: hidden
}

.missionPg .valuesSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #2DA9F0 0%, #0E1519 100%)
}

.missionPg .valuesSection::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: repeating-radial-gradient(circle at 0% 0%, transparent 0px, transparent 40px, #2ea9f008 40px, #2ea9f008 42px);
    pointer-events: none;
    transform: rotate(15deg)
}

.missionPg .valuesContainer {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.missionPg .valuesContainer h2 {
    font-size: 32px;
    line-height: 1.4;
    color: #0E1519;
    text-align: center;
    margin: 0 0 64px;
    font-weight: 300
}

.missionPg .cardsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px
}

.missionPg .valueCard {
    background: #fff;
    padding: 32px;
    border-radius: 6px;
    box-shadow: -1px 5px 28px 0 #0e15191c;
    text-align: center;
    transition: transform .16s ease-out, box-shadow .16s ease-out
}

.missionPg .valueCard:hover {
    transform: translateY(-8px);
    box-shadow: -1px 10px 36px 0 #0e15191f
}

.missionPg .iconHolder {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #2DA9F0 0%, #0E1519 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 3px 5px 0 #2ea9f014
}

.missionPg .iconHolder svg {
    width: 32px;
    height: 32px;
    fill: #fff
}

.missionPg .valueCard h3 {
    font-size: 23px;
    line-height: 1.4;
    color: #0E1519;
    margin: 0 0 16px;
    font-weight: 700
}

.missionPg .valueCard p {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0
}

.missionPg .teamSection {
    background: #0E1519;
    padding: 96px 16px;
    position: relative
}

.missionPg .teamSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0E1519 0%, #2DA9F0 100%)
}

.missionPg .teamContainer {
    max-width: 1100px;
    margin: 0 auto
}

.missionPg .teamContainer h2 {
    font-size: 32px;
    line-height: 1.4;
    color: #F6F5F5;
    text-align: center;
    margin: 0 0 64px;
    font-weight: 700
}

.missionPg .teamLayout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start
}

.missionPg .teamMember {
    display: flex;
    gap: 32px;
    align-items: start
}

.missionPg .portraitWrap {
    flex-shrink: 0;
    width: 180px;
    height: 240px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: -1px 5px 28px 0 #2ea9f01c
}

.missionPg .portraitWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    filter: saturate(0.6);
    transition: filter .2s ease-out, transform .2s ease-out
}

.missionPg .portraitWrap:hover img {
    filter: saturate(1);
    transform: scale(1.05)
}

.missionPg .memberInfo h3 {
    font-size: 23px;
    line-height: 1.4;
    color: #2DA9F0;
    margin: 0 0 8px;
    font-weight: 700
}

.missionPg .memberInfo h4 {
    font-size: 15px;
    line-height: 1.4;
    color: #F6F5F5;
    margin: 0 0 16px;
    font-weight: 300;
    letter-spacing: .05em;
    text-transform: uppercase
}

.missionPg .memberInfo p {
    font-size: 15px;
    line-height: 1.6;
    color: #F6F5F5;
    margin: 0
}

.missionPg .directionArrow {
    position: absolute;
    width: 32px;
    height: 32px;
    opacity: .15;
    pointer-events: none
}

.missionPg .arrowOne {
    top: 32px;
    right: 96px
}

.missionPg .arrowTwo {
    bottom: 32px;
    left: 96px;
    transform: rotate(180deg)
}

.missionPg .directionArrow svg {
    width: 100%;
    height: 100%;
    fill: #2DA9F0
}

.missionPg ::selection {
    background: linear-gradient(90deg, #0E1519 0%, #2DA9F0 100%);
    color: #fff
}

@media (max-width: 1366px) {
    .missionPg .heroWrap {
        padding: 64px 32px
    }

    .missionPg .valuesSection {
        padding: 96px 32px
    }

    .missionPg .teamSection {
        padding: 96px 32px
    }
}

@media (max-width: 768px) {
    .missionPg .heroWrap {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 16px
    }

    .missionPg .imgColumn {
        order: -1
    }

    .missionPg .imgColumn img {
        height: 360px
    }

    .missionPg .txtColumn h1 {
        font-size: 32px;
        margin: 0 0 16px
    }

    .missionPg .cardsGrid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .missionPg .valuesSection {
        padding: 64px 16px
    }

    .missionPg .valuesContainer h2 {
        font-size: 23px;
        margin: 0 0 32px
    }

    .missionPg .teamSection {
        padding: 64px 16px
    }

    .missionPg .teamContainer h2 {
        font-size: 23px;
        margin: 0 0 32px
    }

    .missionPg .teamLayout {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .missionPg .teamMember {
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .missionPg .portraitWrap {
        width: 220px;
        height: 293px
    }

    .missionPg .directionArrow {
        display: none
    }
}

@media (max-width: 375px) {
    .missionPg .heroWrap {
        padding: 32px 8px
    }

    .missionPg .txtColumn h1 {
        font-size: 23px
    }

    .missionPg .txtColumn p {
        font-size: 15px
    }

    .missionPg .valuesSection {
        padding: 32px 8px
    }

    .missionPg .teamSection {
        padding: 32px 8px
    }

    .missionPg .valueCard {
        padding: 16px
    }
}

.bttnWrapper {
    background: #F6F5F5;
    color: #0E1519
}

.bttnWrapper .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 32px;
    gap: 64px;
    align-items: center
}

.bttnWrapper .heroTxt {
    padding-right: 96px
}

.bttnWrapper .heroTxt h1 {
    font-size: 62px;
    line-height: 1.15;
    color: #0E1519;
    margin: 0 0 32px;
    font-weight: 700
}

.bttnWrapper .heroTxt p {
    font-size: 18px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0 0 16px
}

.bttnWrapper .imgClip {
    width: 100%;
    height: 520px;
    position: relative
}

.bttnWrapper .imgClip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
    transition: transform .18s ease-out
}

.bttnWrapper .imgClip:hover img {
    transform: scale(1.04)
}

.bttnWrapper .valuesData {
    background: linear-gradient(135deg, #2DA9F0 0%, #F6F5F5 100%);
    padding: 96px 32px
}

.bttnWrapper .valuesContainer {
    max-width: 1100px;
    margin: 0 auto
}

.bttnWrapper .valuesHdr {
    text-align: center;
    margin-bottom: 64px
}

.bttnWrapper .valuesHdr h2 {
    font-size: 45px;
    line-height: 1.15;
    color: #0E1519;
    margin: 0 0 16px;
    font-weight: 700
}

.bttnWrapper .valuesHdr p {
    font-size: 18px;
    line-height: 1.6;
    color: #0E1519;
    max-width: 680px;
    margin: 0 auto
}

.bttnWrapper .gridHandler {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px
}

.bttnWrapper .cardItem {
    background: #fff;
    padding: 32px;
    border-radius: 6px;
    box-shadow: -1px 5px 28px 0 #0e15191c;
    transition: transform .16s cubic-bezier(0.4, 0, 0.6, 1), box-shadow .16s cubic-bezier(0.4, 0, 0.6, 1);
    position: relative
}

.bttnWrapper .cardItem:hover {
    transform: translateY(-6px);
    box-shadow: -1px 10px 36px 0 #0e15191f
}

.bttnWrapper .cardIcon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #2DA9F0, #0E1519);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}

.bttnWrapper .cardIcon svg {
    width: 28px;
    height: 28px;
    fill: #fff
}

.bttnWrapper .cardItem h3 {
    font-size: 23px;
    line-height: 1.4;
    color: #0E1519;
    margin: 0 0 16px;
    font-weight: 700
}

.bttnWrapper .cardItem p {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0
}

.bttnWrapper .teamShowing {
    background: #fff;
    padding: 96px 32px
}

.bttnWrapper .teamLayout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 64px;
    align-items: start
}

.bttnWrapper .sidebarData {
    background: #0E1519;
    padding: 32px;
    border-radius: 3px;
    position: sticky;
    top: 32px
}

.bttnWrapper .sidebarData h2 {
    font-size: 32px;
    line-height: 1.15;
    color: #2DA9F0;
    margin: 0 0 16px;
    font-weight: 700
}

.bttnWrapper .sidebarData p {
    font-size: 15px;
    line-height: 1.6;
    color: #F6F5F5;
    margin: 0 0 16px
}

.bttnWrapper .metricList {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px
}

.bttnWrapper .metricRow {
    display: flex;
    align-items: baseline;
    gap: 8px
}

.bttnWrapper .metricNum {
    font-size: 32px;
    line-height: 1.15;
    color: #2DA9F0;
    font-weight: 700
}

.bttnWrapper .metricLbl {
    font-size: 15px;
    line-height: 1.4;
    color: #F6F5F5
}

.bttnWrapper .mainCntnr {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.bttnWrapper .profileUnit {
    background: #F6F5F5;
    padding: 32px;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 32px;
    align-items: center;
    transition: box-shadow .14s ease-out
}

.bttnWrapper .profileUnit:hover {
    box-shadow: -1px 3px 5px 0 #2da9f014
}

.bttnWrapper .circleImg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden
}

.bttnWrapper .circleImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.bttnWrapper .profileTxt h3 {
    font-size: 23px;
    line-height: 1.4;
    color: #0E1519;
    margin: 0 0 8px;
    font-weight: 700
}

.bttnWrapper .profileTxt .role {
    font-size: 15px;
    line-height: 1.4;
    color: #2DA9F0;
    margin: 0 0 16px;
    letter-spacing: .5px;
    text-transform: uppercase
}

.bttnWrapper .profileTxt p {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0
}

.bttnWrapper .imgGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px
}

.bttnWrapper .imgGallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 3px;
    transition: transform .2s cubic-bezier(0.4, 0, 0.6, 1)
}

.bttnWrapper .imgGallery img:hover {
    transform: scale(1.06)
}

.bttnWrapper ::selection {
    background: linear-gradient(90deg, #0E1519 0%, #2DA9F0 100%);
    color: #fff
}

@media (max-width: 1366px) {
    .bttnWrapper .hero {
        padding: 64px 32px
    }

    .bttnWrapper .heroTxt {
        padding-right: 32px
    }
}

@media (max-width: 768px) {
    .bttnWrapper .hero {
        grid-template-columns: 1fr;
        padding: 64px 16px;
        gap: 32px
    }

    .bttnWrapper .heroTxt {
        padding-right: 0
    }

    .bttnWrapper .heroTxt h1 {
        font-size: 45px
    }

    .bttnWrapper .imgClip {
        height: 380px
    }

    .bttnWrapper .valuesData {
        padding: 64px 16px
    }

    .bttnWrapper .gridHandler {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .bttnWrapper .valuesHdr h2 {
        font-size: 32px
    }

    .bttnWrapper .teamShowing {
        padding: 64px 16px
    }

    .bttnWrapper .teamLayout {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .bttnWrapper .sidebarData {
        position: static
    }

    .bttnWrapper .profileUnit {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .bttnWrapper .circleImg {
        margin: 0 auto
    }

    .bttnWrapper .imgGallery {
        grid-template-columns: 1fr
    }

    .bttnWrapper .imgGallery img {
        height: 240px
    }
}

@media (max-width: 375px) {
    .bttnWrapper .heroTxt h1 {
        font-size: 32px
    }

    .bttnWrapper .valuesHdr h2 {
        font-size: 23px
    }

    .bttnWrapper .cardItem {
        padding: 16px
    }
}

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

.homePge {
    background: #F6F5F5;
    min-height: 100vh
}

.heroSplit {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    min-height: 88vh;
    overflow: hidden
}

.heroTxtZone {
    background: #0E1519;
    padding: 96px 64px 96px 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.heroTxtZone h1 {
    font-size: 62px;
    line-height: 1.15;
    color: #F6F5F5;
    margin: 0 0 32px;
    letter-spacing: -.02em
}

.heroTxtZone p {
    font-size: 18px;
    line-height: 1.6;
    color: #f6f5f5de;
    max-width: 540px
}

.heroImgZone {
    background: #2DA9F0;
    position: relative;
    overflow: hidden;
    padding: 64px 32px
}

.heroImgZone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .18s ease-out
}

.heroImgZone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0e1519b8 0%, #0e151947 48%, transparent 100%);
    z-index: 1;
    pointer-events: none
}

.heroImgZone:hover img {
    transform: scale(1.04)
}

.srvcsGrid {
    padding: 96px 64px;
    max-width: 1100px;
    margin: 0 auto
}

.srvcsGrid h2 {
    font-size: 45px;
    line-height: 1.15;
    color: #0E1519;
    text-align: center;
    margin: 0 0 64px
}

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

.crdItem {
    background: #fff;
    padding: 32px;
    border-radius: 6px;
    box-shadow: -1px 3px 5px 0 #0e151914;
    transition: box-shadow .15s cubic-bezier(0.4, 0, 0.6, 1);
    position: relative
}

.crdItem:hover {
    box-shadow: -1px 5px 28px 0 #0e15191c
}

.crdItem.featuredCrd {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 0;
    overflow: hidden
}

.featuredCrd .imgWrap {
    position: relative;
    overflow: hidden
}

.featuredCrd .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .22s ease-out
}

.featuredCrd:hover .imgWrap img {
    transform: scale(1.06)
}

.featuredCrd .txtWrap {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.crdItem h3 {
    font-size: 23px;
    line-height: 1.4;
    color: #2DA9F0;
    margin: 0 0 16px;
    text-align: center
}

.featuredCrd h3 {
    text-align: left
}

.crdItem p {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    text-align: center
}

.featuredCrd p {
    text-align: left
}

.apprchContainer {
    background: #fff;
    padding: 96px 64px
}

.apprchInner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center
}

.apprchTxt h2 {
    font-size: 45px;
    line-height: 1.15;
    color: #0E1519;
    margin: 0 0 32px;
    text-align: center
}

.apprchTxt p {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    margin: 0 0 16px;
    text-align: center
}

.apprchTxt p:last-child {
    margin: 0
}

.apprchImg {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: -1px 10px 36px 0 #2da9f01f
}

.apprchImg img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .19s cubic-bezier(0.4, 0, 0.6, 1)
}

.apprchImg:hover img {
    transform: scale(1.05)
}

.statsRow {
    background: linear-gradient(135deg, #0e1519f2 0%, #2da9f0eb 100%);
    padding: 64px
}

.statsInner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px
}

.statBox {
    text-align: center;
    position: relative
}

.statBox::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 64px;
    background: #f6f5f533
}

.statBox:last-child::before {
    display: none
}

.statBox h3 {
    font-size: 45px;
    line-height: 1.15;
    color: #F6F5F5;
    margin: 0 0 8px
}

.statBox p {
    font-size: 15px;
    line-height: 1.4;
    color: #f6f5f5d9
}

.testimonialsWrap {
    padding: 96px 64px;
    background: #F6F5F5
}

.testimonialsWrap h2 {
    font-size: 45px;
    line-height: 1.15;
    color: #0E1519;
    text-align: center;
    margin: 0 0 64px
}

.testimonialsList {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px
}

.testimonialCard {
    background: #fff;
    padding: 32px;
    border-radius: 6px;
    box-shadow: -1px 3px 5px 0 #2da9f014;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    border-right: 3px solid transparent;
    transition: border-color .14s ease-out, box-shadow .14s ease-out
}

.testimonialCard:hover {
    border-right-color: #2DA9F0;
    box-shadow: -1px 5px 28px 0 #2da9f01c
}

.testimonialHdr {
    display: flex;
    align-items: center;
    gap: 16px
}

.testimonialAvatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0
}

.testimonialAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.testimonialMeta h4 {
    font-size: 18px;
    line-height: 1.4;
    color: #0E1519;
    margin: 0 0 8px
}

.testimonialMeta p {
    font-size: 13px;
    line-height: 1.4;
    color: #0e1519a6;
    letter-spacing: .03em
}

.testimonialTxt {
    font-size: 15px;
    line-height: 1.6;
    color: #0E1519;
    text-align: center
}

.ctaSection {
    background: #0E1519;
    padding: 96px 64px;
    text-align: center
}

.ctaSection h2 {
    font-size: 45px;
    line-height: 1.15;
    color: #F6F5F5;
    margin: 0 0 32px
}

.ctaSection p {
    font-size: 18px;
    line-height: 1.6;
    color: #f6f5f5d1;
    max-width: 640px;
    margin: 0 auto 32px
}

.ctaBttn {
    display: inline-block;
    padding: 16px 64px;
    background: transparent;
    color: #2DA9F0;
    font-size: 18px;
    text-decoration: none;
    border: 2px solid #2DA9F0;
    border-radius: 3px;
    transition: background .16s ease-out, color .16s ease-out;
    cursor: pointer
}

.ctaBttn:hover {
    background: linear-gradient(135deg, #2DA9F0 0%, #0E1519 100%);
    color: #F6F5F5
}

.dividerCntr {
    text-align: center;
    padding: 32px 0;
    position: relative
}

.dividerCntr svg {
    display: inline-block;
    margin: 0 8px
}

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

    .heroTxtZone {
        padding: 64px
    }

    .heroTxtZone h1 {
        font-size: 45px
    }
}

@media (max-width: 768px) {
    .heroSplit {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .heroTxtZone {
        padding: 64px 32px
    }

    .heroTxtZone h1 {
        font-size: 32px
    }

    .heroImgZone {
        min-height: 360px;
        padding: 32px 16px
    }

    .srvcsGrid {
        padding: 64px 32px
    }

    .srvcsGrid h2 {
        font-size: 32px;
        margin: 0 0 32px
    }

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

    .crdItem.featuredCrd {
        grid-column: span 1;
        grid-template-columns: 1fr
    }

    .apprchContainer {
        padding: 64px 32px
    }

    .apprchInner {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .apprchTxt h2 {
        font-size: 32px
    }

    .apprchImg img {
        height: 320px
    }

    .statsRow {
        padding: 32px
    }

    .statsInner {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .statBox::before {
        display: none
    }

    .testimonialsWrap {
        padding: 64px 32px
    }

    .testimonialsWrap h2 {
        font-size: 32px;
        margin: 0 0 32px
    }

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

    .ctaSection {
        padding: 64px 32px
    }

    .ctaSection h2 {
        font-size: 32px
    }

    .ctaBttn {
        padding: 16px 32px;
        font-size: 15px
    }
}

@media (max-width: 375px) {
    .heroTxtZone {
        padding: 32px 16px
    }

    .heroTxtZone h1 {
        font-size: 23px
    }

    .heroTxtZone p {
        font-size: 15px
    }

    .srvcsGrid {
        padding: 32px 16px
    }

    .srvcsGrid h2 {
        font-size: 23px
    }

    .crdItem {
        padding: 16px
    }

    .featuredCrd .txtWrap {
        padding: 16px
    }

    .apprchContainer {
        padding: 32px 16px
    }

    .apprchTxt h2 {
        font-size: 23px
    }

    .statsRow {
        padding: 32px 16px
    }

    .statBox h3 {
        font-size: 32px
    }

    .testimonialsWrap {
        padding: 32px 16px
    }

    .testimonialsWrap h2 {
        font-size: 23px
    }

    .testimonialCard {
        padding: 16px
    }

    .ctaSection {
        padding: 32px 16px
    }

    .ctaSection h2 {
        font-size: 23px
    }

    .ctaSection p {
        font-size: 15px
    }
}

.homePge ::selection {
    background: linear-gradient(90deg, #0E1519 0%, #2DA9F0 100%);
    color: #F6F5F5
}

.cntctPg {
    background: #F6F5F5;
    min-height: 100vh;
    padding: 0;
    margin: 0
}

.cntctPg .hdrAnimated {
    position: relative;
    background: linear-gradient(135deg, #0E1519 0%, #2DA9F0 50%, #0E1519 100%);
    background-size: 200% 200%;
    animation: gradShft 8s ease-in-out infinite;
    padding: 96px 32px 64px;
    overflow: hidden
}

@keyframes gradShft {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

.cntctPg .hdrAnimated::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 12%;
    width: 64px;
    height: 64px;
    background: #f6f5f514;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index: 1
}

.cntctPg .hdrAnimated::after {
    content: '';
    position: absolute;
    bottom: 16%;
    right: 18%;
    width: 96px;
    height: 96px;
    background: #2da9f01f;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    z-index: 1
}

.cntctPg .hdrCntnr {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.cntctPg .ttlImgWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px
}

.cntctPg .ttlImgShp {
    width: 180px;
    height: 180px;
    background: linear-gradient(160deg, #f6f5f526, #2da9f033);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    animation: imgPulse 4s ease-in-out infinite
}

@keyframes imgPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .8
    }

    50% {
        transform: scale(1.08);
        opacity: 1
    }
}

.cntctPg .ttlTxt {
    text-align: center
}

.cntctPg .mainHdng {
    font-size: 62px;
    line-height: 1.15;
    color: #F6F5F5;
    margin: 0 0 16px;
    font-weight: 700;
    opacity: 0;
    animation: fadeUp .8s ease-out .2s forwards
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(32px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.cntctPg .subHdng {
    font-size: 18px;
    line-height: 1.6;
    color: #f6f5f5e6;
    margin: 0 0 32px;
    opacity: 0;
    animation: fadeUp .8s ease-out .4s forwards
}

.cntctPg .actnLnks {
    display: flex;
    gap: 16px;
    justify-content: center;
    opacity: 0;
    animation: fadeUp .8s ease-out .6s forwards
}

.cntctPg .lnkBttn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid #f6f5f54d;
    border-radius: 6px;
    color: #F6F5F5;
    background: transparent;
    transition: background .18s ease-out, border-color .18s ease-out
}

.cntctPg .lnkBttn:hover {
    background: #f6f5f51a;
    border-color: #F6F5F5
}

.cntctPg .frmSctn {
    padding: 96px 32px;
    background: #fff;
    position: relative
}

.cntctPg .frmSctn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, transparent, transparent 8px, #2DA9F0 8px, #2DA9F0 12px);
    clip-path: path('M0,1.5 Q50,0 100,1.5 Q150,3 200,1.5 Q250,0 300,1.5 Q350,3 400,1.5 Q450,0 500,1.5 Q550,3 600,1.5 Q650,0 700,1.5 Q750,3 800,1.5 Q850,0 900,1.5 Q950,3 1000,1.5 Q1050,0 1100,1.5 Q1150,3 1200,1.5 Q1250,0 1300,1.5 Q1350,3 1400,1.5 Q1450,0 1500,1.5')
}

.cntctPg .frmWrppr {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start
}

.cntctPg .frmIntro {
    opacity: 0;
    animation: fadeIn .7s ease-out .2s forwards
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.cntctPg .frmIntro h2 {
    font-size: 45px;
    line-height: 1.15;
    color: #0E1519;
    margin: 0 0 32px;
    font-weight: 700
}

.cntctPg .frmIntro p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 16px
}

.cntctPg .frmIntro p:last-child {
    margin-bottom: 0
}

.cntctPg .cntctFrm {
    background: #F6F5F5;
    padding: 32px;
    border-radius: 6px;
    box-shadow: -1px 5px 28px 0 #0e15191c;
    opacity: 0;
    animation: fadeIn .7s ease-out .4s forwards
}

.cntctPg .frmGrp {
    margin-bottom: 32px
}

.cntctPg .frmGrp label {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #0E1519;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase
}

.cntctPg .frmGrp input[type="text"],
.cntctPg .frmGrp input[type="tel"],
.cntctPg .frmGrp select {
    width: 100%;
    padding: 16px;
    font-size: 15px;
    line-height: 1.4;
    color: #0E1519;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 3px;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
    appearance: none
}

.cntctPg .frmGrp input[type="text"]:focus,
.cntctPg .frmGrp input[type="tel"]:focus,
.cntctPg .frmGrp select:focus {
    outline: none;
    border-color: #2DA9F0;
    box-shadow: -1px 3px 5px 0 #2da9f014
}

.cntctPg .frmGrp input::placeholder {
    color: #888
}

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

.cntctPg .slctWrap {
    position: relative
}

.cntctPg .slctWrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #0E1519;
    pointer-events: none
}

.cntctPg .frmGrp select {
    padding-right: 48px;
    cursor: pointer
}

.cntctPg .chckbxGrp {
    margin-bottom: 32px;
    display: flex;
    align-items: start;
    gap: 8px
}

.cntctPg .chckbxGrp input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0
}

.cntctPg .chckbxGrp label {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    cursor: pointer
}

.cntctPg .chckbxGrp a {
    color: #2DA9F0;
    text-decoration: none;
    transition: color .12s ease-out
}

.cntctPg .chckbxGrp a:hover {
    color: #0E1519
}

.cntctPg .sbmtBttn {
    width: 100%;
    padding: 16px 32px;
    font-size: 15px;
    font-weight: 600;
    color: #2DA9F0;
    background: transparent;
    border: 2px solid #2DA9F0;
    border-radius: 6px;
    cursor: pointer;
    transition: background .16s ease-out, color .16s ease-out
}

.cntctPg .sbmtBttn:hover {
    background: linear-gradient(120deg, #2DA9F0, #0E1519);
    color: #F6F5F5;
    border-color: #0E1519
}

.cntctPg .infSctn {
    padding: 96px 32px;
    background: #0E1519;
    position: relative;
    overflow: hidden
}

.cntctPg .infSctn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #2da9f008 32px, #2da9f008 40px), repeating-linear-gradient(-45deg, transparent, transparent 32px, #2da9f008 32px, #2da9f008 40px);
    pointer-events: none
}

.cntctPg .infCntnr {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center
}

.cntctPg .infCntnr h2 {
    font-size: 45px;
    line-height: 1.15;
    color: #F6F5F5;
    margin: 0 0 64px;
    font-weight: 300;
    opacity: 0;
    animation: fadeIn .7s ease-out .2s forwards
}

.cntctPg .infGrd {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px
}

.cntctPg .infCrd {
    background: #f6f5f50d;
    padding: 32px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #2da9f033;
    transition: transform .18s cubic-bezier(0.4, 0, 0.6, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1);
    opacity: 0;
    animation: fadeUp .7s ease-out forwards
}

.cntctPg .infCrd:nth-child(1) {
    animation-delay: .3s
}

.cntctPg .infCrd:nth-child(2) {
    animation-delay: .45s
}

.cntctPg .infCrd:nth-child(3) {
    animation-delay: .6s
}

.cntctPg .infCrd:hover {
    transform: translateY(-8px);
    box-shadow: -1px 10px 36px 0 #2da9f01f
}

.cntctPg .infIcn {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2da9f026;
    border-radius: 28px;
    position: relative
}

.cntctPg .infIcn::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #2DA9F0;
    border-radius: 50%;
    top: 8px;
    right: 8px;
    animation: pulseDot 2.5s ease-in-out infinite
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: .6;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.3)
    }
}

.cntctPg .infIcn i {
    font-size: 32px;
    color: #2DA9F0
}

.cntctPg .infCrd h3 {
    font-size: 18px;
    line-height: 1.4;
    color: #F6F5F5;
    margin: 0 0 8px;
    font-weight: 600
}

.cntctPg .infCrd p {
    font-size: 15px;
    line-height: 1.6;
    color: #f6f5f5cc;
    margin: 0
}

.cntctPg .infCrd a {
    color: #2DA9F0;
    text-decoration: none;
    transition: color .14s ease-out
}

.cntctPg .infCrd a:hover {
    color: #F6F5F5
}

.cntctPg ::selection {
    background: linear-gradient(90deg, #0E1519, #2DA9F0);
    color: #F6F5F5
}

@media (max-width: 1366px) {
    .cntctPg .frmWrppr {
        gap: 32px
    }

    .cntctPg .infGrd {
        gap: 16px
    }
}

@media (max-width: 768px) {
    .cntctPg .hdrAnimated {
        padding: 64px 16px 32px
    }

    .cntctPg .mainHdng {
        font-size: 45px
    }

    .cntctPg .subHdng {
        font-size: 15px
    }

    .cntctPg .actnLnks {
        flex-direction: column
    }

    .cntctPg .lnkBttn {
        width: 100%;
        justify-content: center
    }

    .cntctPg .frmSctn {
        padding: 64px 16px
    }

    .cntctPg .frmWrppr {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .cntctPg .frmIntro h2 {
        font-size: 32px
    }

    .cntctPg .cntctFrm {
        padding: 16px
    }

    .cntctPg .nmFlds {
        grid-template-columns: 1fr
    }

    .cntctPg .infSctn {
        padding: 64px 16px
    }

    .cntctPg .infCntnr h2 {
        font-size: 32px;
        margin-bottom: 32px
    }

    .cntctPg .infGrd {
        grid-template-columns: 1fr
    }
}

@media (max-width: 375px) {
    .cntctPg .mainHdng {
        font-size: 32px
    }

    .cntctPg .frmIntro h2,
    .cntctPg .infCntnr h2 {
        font-size: 23px
    }

    .cntctPg .ttlImgShp {
        width: 120px;
        height: 120px
    }
}

.sccssPg {
    background: #F6F5F5;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
    position: relative;
    overflow: hidden
}

.sccssPg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -25%;
    width: 150%;
    height: 200%;
    background: radial-gradient(circle at 30% 40%, #2ea9f014, transparent 45%), radial-gradient(circle at 70% 60%, #0e15190d, transparent 50%), radial-gradient(circle at 50% 80%, #2ea9f00f, transparent 40%);
    pointer-events: none;
    animation: cnfrmRotate .18s ease-out
}

@keyframes cnfrmRotate {
    from {
        transform: rotate(-2deg);
        opacity: 0
    }

    to {
        transform: rotate(0deg);
        opacity: 1
    }
}

.cnfrmContainer {
    max-width: 1100px;
    width: 100%;
    background: #fff;
    border-radius: 6px;
    padding: 96px 64px;
    box-shadow: -1px 10px 36px 0 #0e15191f;
    text-align: center;
    position: relative;
    animation: cnfrmAppear .22s cubic-bezier(0.4, 0, 0.6, 1)
}

@keyframes cnfrmAppear {
    from {
        transform: rotate(-1deg) translateY(16px);
        opacity: 0
    }

    to {
        transform: rotate(0deg) translateY(0);
        opacity: 1
    }
}

.icnWrap {
    width: 160px;
    height: 160px;
    margin: 0 auto 32px;
    position: relative;
    animation: icnSpin .16s ease-out
}

@keyframes icnSpin {
    from {
        transform: rotate(-8deg) scale(0.85);
        opacity: 0
    }

    to {
        transform: rotate(0deg) scale(1);
        opacity: 1
    }
}

.chrtOuter {
    width: 100%;
    height: 100%;
    position: relative
}

.chrtRing {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #2DA9F0 0deg 252deg, #F6F5F5 252deg 360deg);
    position: relative;
    transition: transform .18s ease-out
}

.cnfrmContainer:hover .chrtRing {
    transform: rotate(8deg)
}

.chrtRing::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 32px;
    width: 96px;
    height: 96px;
    background: #fff;
    border-radius: 50%
}

.chrtCntr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.chrtNum {
    font-size: 45px;
    line-height: 1.15;
    color: #0E1519;
    font-weight: 700;
    display: block
}

.chrtLbl {
    font-size: 13px;
    line-height: 1.4;
    color: #2DA9F0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 8px
}

.cnfrmHdng {
    font-size: 62px;
    line-height: 1.15;
    color: #0E1519;
    margin: 0 0 32px;
    font-weight: 700
}

.cnfrmTxt {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    max-width: 680px;
    margin: 0 auto 32px
}

.dtlsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 64px 0;
    padding: 64px 0;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #2DA9F0, #2ea9f04d, #0E1519) border-box
}

.dtlCard {
    padding: 32px 16px;
    background: #F6F5F5;
    border-radius: 3px;
    transition: border .14s ease-out, box-shadow .14s ease-out;
    border: 2px solid #F6F5F5;
    position: relative
}

.dtlCard::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2DA9F0, transparent);
    opacity: 0;
    transition: opacity .16s ease-out
}

.dtlCard:hover {
    border: 2px dashed #2DA9F0;
    box-shadow: -1px 5px 28px 0 #2ea9f01c
}

.dtlCard:hover::after {
    opacity: 1
}

.dtlIcn {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: #fff;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease-out
}

.dtlCard:hover .dtlIcn {
    transform: scale(1.08)
}

.dtlIcn svg {
    width: 28px;
    height: 28px;
    fill: #2DA9F0
}

.dtlTtl {
    font-size: 18px;
    line-height: 1.4;
    color: #0E1519;
    font-weight: 600;
    margin: 0 0 8px
}

.dtlInfo {
    font-size: 15px;
    line-height: 1.6;
    color: #555
}

.actnWrap {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 32px
}

.btnPrmry {
    padding: 16px 64px;
    font-size: 18px;
    line-height: 1.4;
    background: transparent;
    color: #2DA9F0;
    border: 2px solid #2DA9F0;
    border-radius: 6px;
    cursor: pointer;
    transition: background .14s ease-out, color .14s ease-out;
    text-decoration: none;
    display: inline-block;
    background-image: linear-gradient(135deg, #2DA9F0, #0E1519);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.btnPrmry:hover {
    background-position: 0 0;
    background-image: linear-gradient(90deg, #2DA9F0, #0E1519);
    border-color: #0E1519
}

.btnScndry {
    padding: 16px 48px;
    font-size: 18px;
    line-height: 1.4;
    background: transparent;
    color: #0E1519;
    border: 2px solid #0E1519;
    border-radius: 6px;
    cursor: pointer;
    transition: background .16s cubic-bezier(0.4, 0, 0.6, 1), color .16s cubic-bezier(0.4, 0, 0.6, 1);
    text-decoration: none;
    display: inline-block
}

.btnScndry:hover {
    background: #0E1519;
    color: #fff
}

.ftrNote {
    font-size: 13px;
    line-height: 1.6;
    color: #777;
    margin-top: 64px;
    letter-spacing: .4px
}

.ftrNote::selection {
    background: linear-gradient(90deg, #0E1519, #2DA9F0);
    color: #fff
}

@media (max-width: 1366px) {
    .cnfrmContainer {
        padding: 64px 48px
    }

    .cnfrmHdng {
        font-size: 45px
    }

    .dtlsGrid {
        gap: 24px
    }
}

@media (max-width: 768px) {
    .sccssPg {
        padding: 32px 16px
    }

    .cnfrmContainer {
        padding: 48px 32px
    }

    .icnWrap {
        width: 120px;
        height: 120px;
        margin-bottom: 24px
    }

    .chrtRing {
        width: 120px;
        height: 120px
    }

    .chrtRing::before {
        top: 24px;
        left: 24px;
        width: 72px;
        height: 72px
    }

    .chrtNum {
        font-size: 32px
    }

    .chrtLbl {
        font-size: 13px
    }

    .cnfrmHdng {
        font-size: 32px;
        margin-bottom: 24px
    }

    .cnfrmTxt {
        font-size: 15px;
        margin-bottom: 24px
    }

    .dtlsGrid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 48px 0;
        padding: 48px 0
    }

    .actnWrap {
        flex-direction: column;
        gap: 16px
    }

    .btnPrmry,
    .btnScndry {
        width: 100%;
        padding: 16px 32px
    }

    .ftrNote {
        margin-top: 48px
    }
}

@media (max-width: 375px) {
    .cnfrmContainer {
        padding: 32px 16px
    }

    .cnfrmHdng {
        font-size: 23px
    }

    .cnfrmTxt {
        font-size: 15px
    }

    .dtlsGrid {
        padding: 32px 0;
        margin: 32px 0
    }

    .dtlCard {
        padding: 24px 16px
    }

    .dtlIcn {
        width: 48px;
        height: 48px
    }

    .dtlIcn svg {
        width: 24px;
        height: 24px
    }
}

.cnfrmContainer ::selection {
    background: linear-gradient(90deg, #0E1519, #2DA9F0);
    color: #fff
}

.cnfrmContainer input::placeholder,
.cnfrmContainer textarea::placeholder {
    color: #999
}

body {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto
}