@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.about-section {
    padding-top: 8.13vw;
    overflow: hidden;
    position: relative;
}

.about-section .about-section-wrapper .about-section-wrapper-left {
    display: flex;
    width: 100%;
}

.about-section .about-section-wrapper .about-section-wrapper-left .about-section-header {
    display: flex;
    width: 100%;
}

.about-section .about-section-wrapper .about-section-wrapper-left .about-section-title {
    font-size: 2.61vw;
    line-height: 1.2;
    font-weight: 600;
    flex-direction: column;
    color: #FFFFFF;
    font-family: "adobe-garamond-pro", serif;
    width: 50%;
}

.about-section .about-section-wrapper .about-section-wrapper-left .about-section-title>div {
    width: 36.25vw;
}

.about-section .about-section-wrapper .about-section-wrapper-left .about-section-subtitle {
    font-size: clamp(16px, 0.836vw, 0.836vw);
    font-weight: 400;
    width: 50%;
    padding-top: 1.253vw;
    width: 30.96vw;
    margin: 0 auto;
}

.about-section-subtitle p {
    margin-bottom: 3.031vw;
}

/* container */
.about-section .about-section-wrapper .about-section-description {
    width: clamp(1440px, 75%, 75%);
    margin: 0 auto;
    padding-bottom: 4.688vw;
}

.about-section .about-section-wrapper .about-section-wrapper-right {
    padding: 0px;
    width: clamp(1440px, 75%, 75%);
    margin: 0 auto;
}

.about-section .about-section-wrapper .about-section-button {
    padding-bottom: 0.261vw;
    background-color: #FFFFFF;
    text-decoration: none;
    position: relative;
    display: flex;
    font-family: "jost", sans-serif;
    cursor: pointer;
    font-weight: 500;
}

.about-section-button:hover {
    color: rgb(0, 187, 255);
}

.about-section .about-section-wrapper .about-section-button a {
    text-decoration: none;
}

.about-section .about-section-wrapper .about-section-button a {
    border-bottom: 1px solid rgba(216, 216, 216, 1);
    position: relative;
    display: flex;
    margin-left: auto;
    gap: 1em;
    padding-bottom: 0.8em;
    font-size: clamp(18px, 0.938vw, 0.938vw);
}

.about-section .about-section-wrapper .about-section-wrapper-left .about-section-button .about-section-button-arrow {
    position: relative;
    right: 0px;
}

.about-section .about-section-wrapper .about-section-wrapper-left .about-section-button .about-section-button-arrow svg {
    font-size: clamp(22px, 1.112vw, 1.112vw);
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-content {
    display: flex;
    text-align: center;
    align-items: center;
    width: 100%;
    padding: 0;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    gap: 0px;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content {
    width: 83.75%;
    padding: 0px;
    position: relative;
}

.about-hidden01 {
    width: 100%;
    position: relative;
}

.about-hidden02 {
    width: 100%;
    position: relative;
}

.about-hidden03 {
    width: 100%;
    position: relative;
}

.about-hidden01::before {
    position: absolute;
    content: "01";
    z-index: 1;
    top: -3.073vw;
    left: -2.032vw;
    font-family: "adobe-garamond-pro", serif;
    border-bottom: 4px solid;
    color: #FFFFFF;
    font-size: 6.25vw;
    line-height: 1em;
}

.about-hidden02::before {
    position: absolute;
    content: "02";
    z-index: 1;
    top: -3.073vw;
    left: -2.032vw;
    font-family: "adobe-garamond-pro", serif;
    border-bottom: 4px solid;
    color: rgba(5, 33, 87, 1);
    font-size: 6.25vw;
    line-height: 1em;
}

.about-hidden03::before {
    position: absolute;
    content: "03";
    z-index: 1;
    top: -3.073vw;
    left: -2.032vw;
    font-family: "adobe-garamond-pro", serif;
    border-bottom: 4px solid;
    color: rgba(5, 33, 87, 1);
    font-size: 6.25vw;
    line-height: 1em;
}

.about-section .hidden {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number01 {
    font-size: 6.25vw;
    position: absolute;
    top: -3.073vw;
    left: -2.032vw;
    line-height: 1em;
    font-family: "adobe-garamond-pro", serif;
    border-bottom: 4px solid;
    color: rgba(5, 33, 87, 1);
    z-index: 2;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number02 {
    font-size: 6.25vw;
    position: absolute;
    top: -3.073vw;
    left: -2.032vw;
    line-height: 1em;
    font-family: "adobe-garamond-pro", serif;
    border-bottom: 4px solid;
    color: #FFFFFF;
    z-index: 2;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .label01 {
    position: absolute;
    left: -2.032vw;
    top: 7vw;
    transform: translate(-50%) rotate(90deg);
    font-size: 0.73vw;
    color: #FFFFFF;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    letter-spacing: 1px;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .label02 {
    position: absolute;
    left: -2.032vw;
    top: 7vw;
    transform: translate(-50%) rotate(90deg);
    font-size: 0.73vw;
    color: rgb(7, 34, 86);
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    letter-spacing: 1px;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card {
    position: relative;
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 5.4vw;
    width: 44%;
    padding-top: 3.75vw;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .line {
    position: absolute;
    top: 0;
    left: 2rem;
    height: 3px;
    width: 100%;
    margin-bottom: 0;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
}

.line:first-child {
    margin-top: 0;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .line::before {
    content: "";
    height: 100%;
    width: 3000%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(197, 197, 197);
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .line::after {
    content: "";
    height: 100%;
    width: 40%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(0, 63, 160);
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-header {
    font-weight: 400;
    font-family: "adobe-garamond-pro", serif;
    display: inline-block;
    color: #072256;
    line-height: 1;
    position: relative;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title {
    color: #002368;
    font-family: "adobe-garamond-pro", serif;
    font-size: clamp(56px, 5.11vw, 5.11vw);
    line-height: 0.8em;
    display: inline-block;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title.trusted-service {
    font-size: 2.917vw;
    font-weight: 600;
    line-height: 1em;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-header::after {
    content: "";
    position: relative;
    width: 77px;
    height: 3px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: #002368;
    margin-top: 1em;
    display: block;
    margin-bottom: 1.25em;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-header .about-card-title-small {
    font-size: 35px;
    text-align: center;
    display: flex;
    flex-direction: column;
    color: #002368;
    font-family: "adobe-garamond-pro", serif;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-sub-title {
    color: #002368;
    font-family: "adobe-garamond-pro", serif;
    font-size: 2.5vw;
    font-weight: 600;
    display: block;
    line-height: 1em;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-text {
    text-align: center;
    font-size: 1.042vw;
    min-height: 1em;
    font-family: "Inter", sans-serif;
    line-height: 1.5;
}

.about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content img {
    aspect-ratio: 944/298;
}

.about-card-img01 {
    object-fit: cover;
    width: 100%;
    background-position: center;
}

.about-card-img02 {
    object-fit: cover;
    width: 100%;
    background-position: center;
}

.about-card-img03 {
    object-fit: cover;
    width: 100%;
    background-position: center;
}

@media (max-width: 1920px) {
    .about-section .about-section-wrapper .about-section-description {
        width: 100%;
        padding-left: 64px !important;
        padding-right: 64px !important;
        max-width: 1568px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right {
        width: 100% !important;
        padding-left: 64px !important;
        padding-right: 64px !important;
        max-width: 1568px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-subtitle {
        margin-left: auto;
        margin-right: 0;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title {
        font-size: clamp(56px, 5.11vw, 80px);
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .line::after {
        width: 29%;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content {
        padding-bottom: 0.9vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card {
        padding-bottom: 4.46vw;
        padding-top: 4.5vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-text {
        line-height: 1.2;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-header::after {
        margin-top: 0.77em;
        margin-bottom: 1.25em;
    }
}

@media (max-width: 1440px) {
    .about-section {
        padding-top: 7.35vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content img {
        aspect-ratio: 748.59/222.04;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-title {
        font-size: 3.473vw;
        line-height: 1.12;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-subtitle {
        font-size: 1.112vw;
        width: 40.7%;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-title>* {
        max-width: 534px;
    }

    .about-section .about-section-wrapper .about-section-description {
        padding-bottom: 11vw;
    }

    /* card about */
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number01,
    .about-hidden01::before {
        font-size: 6.598vw;
        top: -2.75vw;
        left: -2.148vw;
        border-bottom: 4px rgb(5, 33, 87) solid;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .label01,
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .label02 {
        color: rgb(5, 33, 87);
        left: -2vw;
        top: 8.473vw;
        font-size: 0.78vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number02,
    .about-hidden02::before,
    .about-hidden03::before {
        font-size: 6.598vw;
        top: -2.75vw;
        left: -2.148vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content {
        padding-left: 2.148vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content {
        width: 61.74%;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card {
        padding-bottom: 4vw;
        padding-top: 4.2vw;
        width: auto;
        padding-left: 64px;
        min-width: 26.5%;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-header::after {
        margin-top: 1em;
        margin-bottom: 0.9em;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-text {
        line-height: 1.3;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .line {
        height: 2px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .line::after {
        width: 23.637%;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title.trusted-service {
        /* text-transform: uppercase; */
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-sub-title {
        font-weight: 300;
        /* text-transform: uppercase; */
        font-size: 1.7vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title {
        font-size: clamp(43px, 4.3vw, 80px);
        line-height: 1em;
    }
}

@media (max-width: 1201px) {
    .about-section {
        padding-bottom: 2vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-title {
        font-size: 4.164vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-subtitle {
        font-size: 1.333vw;
        width: calc(50% - 64px);
    }

    .about-section .about-section-wrapper .about-section-description {
        margin-top: -2.7vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .line::after {
        width: 76.21px;
    }
}

@media (max-width: 1200px) {
    .about-section {
        padding-top: 5.7vw;
    }

    .about-section .about-section-wrapper .about-section-description {
        padding-bottom: 0px;
        aspect-ratio: 1312/358;
        margin-top: 0px;
        margin-bottom: 1.5vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-title {
        font-size: 3vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-subtitle {
        width: 50%;
        padding-left: 64px;
        font-size: 1.334vw;
    }
}

@media (max-width: 981px) {
    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-title {
        font-size: 3.67vw;
    }
}

@media screen and (max-width: 981px) {
    .about-section {
        padding-top: 9.7vw;
    }

    .about-section .about-section-wrapper .about-section-description {
        margin-bottom: -2.9vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content img {
        aspect-ratio: 536.82/203.64;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content {
        width: 80%;
        padding-bottom: 0.8vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card {
        padding-bottom: 5.9vw;
        padding-top: 4.7vw;
        width: 44%;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title {
        font-size: 5.097vw;
        line-height: 1.312;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-text {
        line-height: 1.2;
        font-size: 1.275vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-sub-title {
        font-size: 2.04vw;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-header::after {
        margin-top: 1.14em;
        margin-bottom: 0.9em;
    }
}

@media screen and (max-width: 980px) {
    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .line::after {
        width: 62px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-header {
        display: block;
        margin-bottom: 35px;
    }

    .about-section .about-section-wrapper .about-section-description {
        padding: 0px 20px !important;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-title {
        color: #002368;
        font-size: clamp(32px, 3.675vw, 36px);
        width: 100%;
        line-height: 1.05;
        max-width: 13em;
        margin-bottom: 24px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-title>div {
        width: 100%;
        max-width: 100%;
    }

    .about-section {
        padding-top: clamp(43px, 11.03vw, 43px);
    }

    .about-section-subtitle p {
        font-size: clamp(16px, 2.45vw, 24px);
        margin-bottom: 24px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-left .about-section-subtitle {
        width: 100%;
        padding: 0px;
    }


    .about-section .about-section-wrapper .about-section-button a {
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(16px, 1.9vw, 18px);
    }


    .about-section .about-section-wrapper .about-section-wrapper-right {
        padding: 0px 20px !important;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title {
        font-size: clamp(56px, 5.097vw, 5.097vw);
        line-height: 0.7em;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-title.trusted-service {
        font-size: 38px;
        text-transform: capitalize;
        line-height: 0.842em;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .label01,
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .label02,
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .label03 {
        transform: rotate(0deg);
        right: 0px;
        top: 0px;
        left: auto;
        font-size: 10px;
        letter-spacing: 10%;
        height: 33px;
        display: flex;
        align-items: center;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number01,
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number02,
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number03 {
        color: white;
        border-color: white;
    }

    .about-hidden01::before {
        border-color: white;
        color: rgba(5, 33, 87, 1);
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number01,
    .about-hidden01::before,
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number02,
    .about-hidden02::before,
    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content .number03,
    .about-hidden03::before {
        left: 15px;
        top: -33px;
        border-bottom: 2px solid;
        font-size: 63px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content {
        display: block;
        margin-bottom: 28.47px;
        padding-left: 0px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-content .about-image-content {
        width: 100%;
        padding-top: 33px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card {
        width: 100%;
        aspect-ratio: auto;
        padding: 24px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-sub-title {
        font-size: 36px;
        line-height: 1em;
        font-weight: 600;
        text-transform: capitalize;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .about-card-text {
        font-size: 16px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .line {
        left: 0px;
        bottom: 0px;
        top: auto;
        height: 2px;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card .line::before {
        width: 100%;
    }
}