@charset "UTF-8";

:root {
    --primary-color: #1196c7;
    --secondary-color: #adadad;
    --font: "Lato", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "游ゴシック", Roboto, sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
}

.fa-chevron-right:before {
    font-size: 12px;
}

.features__icon-2 i,
.services__content h3:hover a,
a:focus,
a:hover {
    color: var(--primary-color) !important;
}

.features__item-2:hover .features__icon i {
    color: #ffffff !important;
}

.sidebar-toggle-btn .line {
    background-color: var(--primary-color) !important;
}

.sidebar__content .logo {
    display: flex;
    background-color: white;
    border-radius: 20px 20px 20px 20px;
    justify-content: center;
}

.logo {
    /* display: flex; */
    background-color: white;
    border-radius: 0 0 20px 20px;
    /* justify-content: center; */
}

/* .header__bottom.sticky .logo-gradient {
    text-align: center; 
} */
.header__bottom-2 {
    padding: 0px 0;
}

.logo img,
.logo-gradient img {
    width: 125px;
}

.other_logo {
    margin-top: -60px;
    margin-bottom: 100px;
}

.z-btn-white {
    background: #ffffff;
    border-color: #ffffff;
    color: #0F7397;
}

.z-btn,
.object,
#scroll a,
.footer__subscribe button,
.expart__nav .nav-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.sidebar__tab .nav-tabs .nav-close {
    flex-grow: .5 !important;
}

.sidebar__tab .nav-tabs .nav-menu {
    border-right: none;
}

.z-btn:hover,
#scroll a:hover,
.footer__subscribe button:hover {
    background: #fff;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* .footer__links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
} */
.footer__links>ul>li,
.sub-links>li {
    color: var(--primary-color);
}

.footer__widget-title h4 {
    display: inline-block;
    color: var(--primary-color);
    /* border-bottom: 2px solid var(--primary-color); */
    /* padding-bottom: 2px; */
}

.footer__social ul li a:hover {
    background: var(--primary-color);
}

.about_newsroom_row {
    display: flex;
    gap: 80px;
}

.sub-links-container {
    display: grid;
    gap: 30px;
}

.head-link {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 17px;
    /* border-left: 2px solid var(--primary-color); */
    padding-left: 5px;
}

/* .footer.row {
    gap: 100px;
} */
.header__bottom.sticky .main-menu ul li:hover>a {
    color: var(--primary-color);
}

.footer__links ul.sub-links {
    margin: 15px 0 0 12px;
}

.footer__links ul.sub-links>li {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

.footer__links ul li a::before {
    background: var(--primary-color);
}

.footer__widget:last-child {
    border-right: none;
}

.footer__social {
    display: flex
}

.footer__social span {
    margin-top: 5px;
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.footer__social ul {
    padding-left: 16px;
}

.footer__social ul li i {
    color: #686777;
}

.sub-links-container {
    display: flex;
    gap: 30px;
}

.sp-sidebar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.gradient-bg,
.cta__area::before,
.case__thumb::before,
.blog__thumb::after,
.features__thumb-2::after {
    background-image: linear-gradient(40deg, var(--primary-color) 0%, #065d7c 100%);
}

.section__titlespan,
.case__menu button.active {
    color: var(--primary-color);
}

.page__title::before {
    content: none;
}

.child-page .main-menu ul li a {
    color: #0F7397;
}

.header__bottom.sticky .sidebar-toggle-btn .line {
    background: var(--primary-color);
}

#gradient-canvas {
    width: 100%;
    height: 100%;
    --gradient-color-1: #1196c7;
    --gradient-color-2: #3cc0f0;
    --gradient-color-3: #B0EDEA;
    --gradient-color-4: #3088A9;
    z-index: 0;
}

.gride {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    position: relative;
    z-index: 20;
}

.gride>div {
    visibility: hidden;
    flex: 0 0 6.66666%;
    position: relative;
}

.gride>div.show {
    visibility: visible;
}

.gride>div.rotate-2 {
    transform: rotate(90deg);
}

.gride>div.rotate-3 {
    transform: rotate(180deg);
}

.gride>div.rotate-4 {
    transform: rotate(270deg);
}

.gride>div::after {
    content: "";
    display: block;
    padding-bottom: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14.41' height='23.528' viewBox='0 0 14.41 23.528'%3E%3Cdefs%3E%3CradialGradient id='radial-gradient' cx='0.5' cy='0.5' r='0.574' gradientTransform='translate(0 -0.67) scale(1 2.341)' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%233088a9'/%3E%3Cstop offset='1' stop-color='%233088a9' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath id='Pfad_8272' data-name='Pfad 8272' d='M547.993,130.4l8.373-8.564a3.32,3.32,0,0,1,2.333-1.027h.028a2.666,2.666,0,0,1,1.933.808,3.132,3.132,0,0,1-.268,4.337l-5.287,5.3a5.633,5.633,0,0,0,0,7.956l2.681,2.688a1.312,1.312,0,0,0,.922.413.677.677,0,0,0,.5-.192,1.143,1.143,0,0,0-.244-1.5l-4.085-4.1a1.013,1.013,0,0,1,0-1.432c.022-.021.045-.043.069-.062a1.042,1.042,0,0,1,1.4.1l4.052,4.061a3.436,3.436,0,0,1,1.019,2.4,2.746,2.746,0,0,1-.752,1.932,2.677,2.677,0,0,1-1.933.812,3.339,3.339,0,0,1-2.367-1.008l-2.688-2.694a7.664,7.664,0,0,1,0-10.808l5.289-5.307a1.145,1.145,0,0,0,.244-1.5.665.665,0,0,0-.486-.188,1.3,1.3,0,0,0-.907.419l-8.366,8.564a1.216,1.216,0,0,0-.216,1.58l1.006,1.119a.954.954,0,0,1,.232.354,1,1,0,0,1-1.426,1.232,17.147,17.147,0,0,1-1.289-1.32,2.87,2.87,0,0,1-.751-1.976,3.477,3.477,0,0,1,.993-2.411' transform='translate(561.41 144.342) rotate(180)' fill='url(%23radial-gradient)'/%3E%3C/svg%3E%0A") center/50% 50% no-repeat;
}

@keyframes pulse {
    50% {
        opacity: 0;
    }
}

.nefade div {
    /* Assuming $rows and $columns are variables */
}

.nefade div:nth-child {
    animation: pulse 2s ease-in-out infinite;
}

/*header*/
.header__bottom.sticky .header__btn a {
    background: var(--primary-color);
    border-color: transparent;
}

.header__bottom.sticky .main-menu ul li a,
.main-menu ul li ul.submenu li:hover>a {
    color: #0F7397;
}

.main-menu ul li ul.submenu {
    border-top: 4px solid var(--primary-color);
}

.main-menu ul li ul.submenu li a::before {
    background: var(--primary-color);
}

.header-gradient-bg {
    height: 400px;
    overflow: hidden;
    clip-path: polygon(50% 40%, 101% 0%, 100% 60%, 50% 100%);
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50px);
    z-index: -2;
}

.unified .header-gradient-bg {
    top: 68%;
}

.social-monitoring .header-gradient-bg {
    top: 65%;
}

.header-gradient-bg:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

/*banner*/
.fv-header {
    position: relative;
}

.fv-header .banner {
    overflow: hidden;
    height: 48vw;
}

.banner-description {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(0%, -50%);
}

.banner-description span {
    font-size: 22px;
}

.banner-description h1 {
    font-size: 60px;
    color: #fff;
}

.banner-description p {
    font-size: 18px;
    color: #c5c5c5;
}

.features__area .other_logo>div {
    text-align: center;
    padding: 35px 0;
}

.banner video {
    width: 100%;
}

/*section*/
.section__title h2 {
    font-size: 55px;
}

.features__content-left p,
.faq__wrapper p {
    padding-right: 60px;
}

.section__title-3 span {
    margin-bottom: 0;
}

.faq__thumb {
    background-position: 100% 0px;
}

.section__title-3 h2 {
    font-size: 42px !important;
}

.achievement__wrapper {
    width: 110%;
}

.achievement__item img {
    width: 100%;
}

.achievement__area h2 {
    font-size: 38px !important;
}

.custom__h2__header1 h2 {
    font-size: 38px !important;
}

.custom__h2 h2 {
    font-size: 26px !important;
    /* height: 1.384615385em; */
    /* letter-spacing: 0; */
}

.about__list th {
    padding-right: 10px;
    vertical-align: top;
}

.about__list th,
.about__list td {
    padding-bottom: 20px;
}

.about__list ul li {
    margin-bottom: 0;
}

.about__list .mb2em {
    margin-bottom: 25px;
}

.about__thumb {
    margin-top: -60px;
}

.about__thumb::after {
    bottom: 0;
    height: 340px;
    background: white;
    border-radius: 10px;
    /* Optional: makes edges smoother */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Creates a floating shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.paragraph-show-pc {
    display: block;
}

.paragraph-show-sp {
    display: none;
}

.achievement__content .index {
    margin-bottom: 0;
}

.mission__area .heading-block h4 {
    font-size: 1.25rem;
    font-weight: 700;
}

.mission__area .heading-block h4 span {
    color: #1196c7;
}

.mission__area .title-bottom-border h4 {
    width: 100%;
    padding: 0 0 0.75rem;
    border-bottom: 2px solid #1196c7;
}

.affiliate__area .grid-item {
    position: relative;
    padding: 20px 0;
    -webkit-backface-visibility: hidden;
}

.affiliate__area .clients-grid {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    list-style: none;
    overflow: hidden;
}

.affiliate__area .grid-3>.grid-item {
    width: 33.333333%;
}

.affiliate__area .grid-item::before {
    height: 100%;
    top: 0;
    left: -1px;
    border-left: 1px dashed #DDD;
}

.affiliate__area .grid-item::after {
    width: 100%;
    height: 0;
    top: auto;
    left: 0;
    bottom: -1px;
    border-bottom: 1px dashed #DDD;
}

.affiliate__area .clients-grid .grid-item::before,
.affiliate__area .clients-grid .grid-item::after {
    content: '';
    position: absolute;
}

.affiliate__area .clients-grid .grid-item a,
.affiliate__area .clients-grid .grid-item img {
    display: block;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.affiliate__area .clients-grid .grid-item a img {
    opacity: 0.8;
    padding-bottom: 20px;
}

.affiliate__area .clients-grid .grid-item a p {
    font-weight: bold;
}

.affiliate__area .clients-grid .grid-item a:hover img {
    opacity: 1;
}

.company-url {
    text-align: center;
    padding-top: 20px;
    color: #1196c7;
}

.company-url .fa {
    padding-left: 7px;
    font-size: 12px;
}

.social__media .grid-3>.grid-item {
    width: 49.333333%;
}

.social__media .grid-item {
    position: relative;
    padding: 20px 0;
    -webkit-backface-visibility: hidden;
}

.social__media .clients-grid {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    list-style: none;
    overflow: hidden;
}

.social__media .grid-item::before {
    height: 100%;
    top: 0;
    left: -1px;
    border-left: 1px dashed #DDD;
}

.social__media .grid-item::after {
    width: 100%;
    height: 0;
    top: auto;
    left: 0;
    bottom: -1px;
    border-bottom: 1px dashed #DDD;
}

.social__media .clients-grid .grid-item::before,
.social__media .clients-grid .grid-item::after {
    content: '';
    position: absolute;
}

.social__media .clients-grid .grid-item a,
.social__media .clients-grid .grid-item img {
    display: block;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.social__media .clients-grid .grid-item a img {
    opacity: 0.8;
    padding-bottom: 20px;
}

.social__media .clients-grid .grid-item a p {
    font-weight: bold;
}

.social__media .clients-grid .grid-item a:hover img {
    opacity: 1;
}

.social__media .company-url {
    padding-top: 0;
}

.social__media li.grid-item:last-child::before {
    content: none;
}

.social__media li.grid-item:last-child {
    margin: 0 auto;
}

.service__area {
    padding-bottom: 30%;
}

.service__area.contact2 {
    padding-bottom: 10%;
}

.service__area .header-gradient-bg {
    height: 100%;
    clip-path: polygon(0% 75%, 180% 1%, 100% 60%, 0% 100%);
    top: 50%;
}

.service__area .header-gradient-bg:before {
    content: "";
    clip-path: polygon(70% 75%, 50% 90%, 50% 100%, 0% 100%);
}

.slick-container {
    width: 80%;
    margin: auto;
}

.slick-list {
    width: 100%;
    overflow: visible !important;
}

.slick-slide {
    display: flex !important;
    justify-content: space-between;
    padding-right: 20px;
}

.box {
    width: 100%;
    padding: 80px 40px;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 18px;
    cursor: pointer;
    border-top: 8px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    min-height: 345px;
}

.box:hover {
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
}

.pagination {
    text-align: left;
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 1.2rem;
    line-height: 1.8;
}

button {
    display: inline;
    float: left;
    margin-right: 15px;
    border: 0px;
    background: #333;
    border-radius: 3px;
    padding: 8px 15px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

.capabilities__area .box h1 {
    font-size: 26px;
    text-align: left;
}

.slick-prev,
.slick-next {
    position: absolute !important;
    bottom: 10px;
    top: auto !important;
    transform: none !important;
    z-index: 10;
    background-color: transparent !important;
    color: white !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0px !important;
    cursor: pointer !important;
}

.box a {
    color: var(--primary-color);
    font-size: 15px;
    font-weight: bold;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: none;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
    background: #ffffff;
    color: #032a38;
}

/* Position them beside each other */
.slick-prev {
    top: -50px !important;
    left: 46% !important;
}

.slick-next {
    right: 46% !important;
    top: -50px !important;
}

/* Optional: Hover effect */
.slick-prev:hover,
.slick-next:hover {
    background-color: #0d7aa5;
}

.slick-prev::before,
.slick-next::before {
    content: "";
    /* Hide default arrows */
    font-size: 30px !important;
    color: #1196c7 !important;
}

.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
    opacity: 1 !important;
}

.contact__center.service__area .header-gradient-bg {
    top: 40%;
}

.contact_services>div {
    padding-bottom: 20px;
}

.contact_services div div {
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.contact_services .col-md-6 {
    display: flex;
}

.sub__contact_services ul li {
    margin-bottom: 20px;
}

.inbound.service__area .header-gradient-bg {
    top: 25%;
}

.fulfillment .header-gradient-bg {
    top: 35%;
}

.edutbl th {
    text-align: center;
    font-weight: 900;
    white-space: nowrap;
    color: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #50c5f0), color-stop(0.00, var(--primary-color)));
    background: -webkit-linear-gradient(#50c5f0, var(--primary-color));
    background: -moz-linear-gradient(#50c5f0, var(--primary-color));
    background: -o-linear-gradient(#50c5f0, var(--primary-color));
    background: -ms-linear-gradient(#50c5f0, var(--primary-color));
    background: linear-gradient(#50c5f0, var(--primary-color));
}

.edutbl td.edutxt {
    color: #fff;
    background-color: var(--primary-color);
}

.edutbl td.eduarw {
    text-align: center;
}

.edutbl td.eduarw img {
    width: 30px;
}

.edutbl th,
.edutbl td {
    font-size: 14px;
    padding: 10px 35px;
    vertical-align: middle;
}

.data-mining .header-gradient-bg {
    top: 42%;
}

.type_report>div {
    color: var(--primary-color);
    margin: 0 -25px 25px;
    font-size: 17px;
    font-weight: bold;
    padding-left: 25px;
}

.type_report>div::before {
    content: "";
    border-right: 1px solid var(--primary-color);
    padding-right: 20px;
}

.type_report>div p {
    display: inline;
    padding-left: 10px;
    font-size: 20px;
    color: #000;
}

.foreign_lang .header-gradient-bg {
    top: 60%;
}

.portfolio-image {
    width: 100%;
    height: 236px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.portfolio-desc h3 {
    padding: 15px 15px 0px;
    font-size: 18px;
}

.portfolio-desc span {
    padding: 0 40px 15px 15px;
    display: block;
    text-align: left;
}

.contact_center .header-gradient-bg {
    top: 40%;
}

/* .contact2 .header-gradient-bg{
    top: 150%;
} */
.unified img {
    padding-top: 50px;
    padding-left: 0px;
    padding-bottom: 50px;
    max-width: 100%;
    vertical-align: bottom;
}

.unified ul {
    font-size: 18px;
}

.unified ul li {
    padding-bottom: 10px;
}

.unified ul li:first-child {
    padding-top: 20px;
}

.sp-tbl td {
    padding: 1em;
}

.sp-tbl-img {
    width: 320px;
}

.section__title span,
h2 span,
.case__menu button.active {
    color: var(--primary-color);
}

/* SALE PROMOTION PAGE CSS START HERE*/
.sp-list {
    text-align: center;
    font-size: 20px;
}

.sp-list li {
    position: relative;
    padding: 1em;
    font-weight: 600;
    overflow: hidden;
    text-align: center;
}

.sp-list li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
}

.sp-list li:hover::after {
    width: 100%;
}

.sp-tbl {
    border-collapse: collapse;
    width: 100%;
}

.sp-root {
    width: 100%;
    border-collapse: collapse;
}

.sp-root td {
    padding: 1em;
}

/* SALE PROMOTION PAGE CSS END HERE*/


/* GLOBAL PAGE CSS START HERE*/
.globals02 ul {
    color: #ffffff;
    text-shadow: 0 0 5px #000000;
    padding: 4em;
}

.globals__area ul {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    line-height: 2;
}

.globals-bg2 {
    width: 100%;
    text-align: center;
}

.globals-bg2 img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.globals-bg2 ul {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.globals-bg2 ul li {
    width: 280px;
    margin: 12px;
    padding: 6px;
    box-shadow: 0 0 5px #999999 inset;
    background-color: rgba(255, 255, 255, .9);
}

/* GLOBAL PAGE CSS START HERE*/


/* BPO PAGE CSS START HERE*/
.bpo-wk-a,
.bpo-wk-b,
.bpo-wk-c {
    text-align: center;
    font-weight: 900;
    padding: 10px;
}

.bpo-wk-c {
    border-radius: 5px;
    background-color: var(--primary-color);
    color: #ffffff;
}

.slider2 .slide2 {
    display: flex;
    justify-content: center;
}

.slider2 .slide2 .box2 .point-label {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #1196c7;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    text-transform: uppercase;
}

.box2 {
    position: relative;
    background: linear-gradient(135deg, #1196c7, #317ac9);
    color: white;
    padding: 25px;
    border-radius: 10px;
    max-width: 300px;
    min-height: 220px;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.box2:hover {
    transform: translateY(-5px);
}

.box2 h1 {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

.box2 p {
    font-size: 14px;
    margin-top: 10px;
    color: #ffffff;
}

/* BPO PAGE CSS END HERE*/


/* TEMPORARY PAGE CSS START HERE*/
.tempscheme h3 {
    color: #1196c7;
}

.tempscheme h4 {
    font-size: 18px;
    font-weight: 900;
    padding: 5px 0px 5px 0px;
}

.tempsche-arw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px 15px 0px;
}

.tempsche-arw>div {
    font-size: 20px;
    font-weight: 900;
    padding: .5em;
}

.tempsche-l {
    margin-right: 32px;
}

.tempscheme h6:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f0eb";
    margin-right: 5px;
    color: #dbb100;
}

.tempscheme h6 {
    font-size: 18px;
    font-weight: 900;
    margin: 10px 0px 0px 0px;
}

.arw-blu-left,
.arw-org-left,
.arw-blu-right,
.arw-org-right {
    flex: auto;
}

.arw-org-left>div {
    background: linear-gradient(-90deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgb(176, 237, 234) 100%);
}

.arw-blu-left>div,
.arw-org-left>div,
.arw-blu-right>div,
.arw-org-right>div {
    position: relative;
    width: 100%;
    height: 20px;
}

.arw-org-left>div:before {
    border-right: 30px solid rgb(176, 237, 234);
    left: -30px;
}

.arw-blu-left>div:before,
.arw-org-left>div:before,
.arw-blu-right>div:after,
.arw-org-right>div:after {
    position: relative;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    top: -50%;
}

.arw-blu-right>div {
    background: linear-gradient(90deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgba(17, 150, 199, 1) 100%);
}

.arw-blu-right>div:after {
    border-left: 30px solid rgba(17, 150, 199, 1);
    left: 100%;
}

.tempsche-r {
    margin-left: 32px;
}

.arw-blu-left>div {
    background: linear-gradient(-90deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgba(17, 150, 199, 1) 100%);
}

.arw-blu-left>div:before {
    border-right: 30px solid rgba(17, 150, 199, 1);
    left: -30px;
}

.arw-org-right>div {
    background: linear-gradient(90deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgb(176, 237, 234) 100%);
}

.arw-org-right>div:after {
    border-left: 30px solid rgb(176, 237, 234);
    left: 100%;
}

/* TEMPORARY PAGE - SP Design TEMPSCHEME CSS START*/
.tempscheme-sp {
    display: flex;
}

.tempscheme-sp-box h3 {
    color: #1196c7;
    text-align: center;
}

.tempscheme-sp-box h4 {
    font-size: 18px;
    font-weight: 900;
    padding: 5px 0px 5px 0px;
}

.tempscheme-sp-box h6:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f0eb";
    margin-right: 5px;
    color: #dbb100;
}

.tempsche-sp-l,
.tempsche-sp-r {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}

.tempsche-sp-l>div,
.tempsche-sp-r>div {
    writing-mode: vertical-rl;
    font-size: 20px;
    font-weight: 900;
    padding: .5em;
}

.tempsche-sp-l-top,
.tempsche-sp-r-top {
    /* flex: 40px; */
    margin-bottom: 1em;
}

.arw-blu-top,
.arw-org-top,
.arw-blu-btm,
.arw-org-btm {
    flex: auto;
}

.arw-org-top>div {
    background: linear-gradient(0deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgb(176, 237, 234) 100%);
}

.arw-blu-top>div,
.arw-org-top>div,
.arw-blu-btm>div,
.arw-org-btm>div {
    position: relative;
    width: 20px;
    height: 100%;
}

.arw-blu-btm>div {
    background: linear-gradient(180deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgba(17, 150, 199, 1) 100%);
}

.tempsche-sp-l-btm,
.tempsche-sp-r-btm {
    /* flex: 80px; */
    margin-top: 1em;
}

.tempsche-sp-c>div {
    padding: 32px;
    /* border-top: 1px solid #333333; */
    margin-bottom: 32px;
}

.tempsche-sp-c h6 {
    font-size: 18px;
    font-weight: 900;
    margin: 10px 0px 0px 0px;
}

.tempsche-sp-c h4,
.tempsche-sp-c h5,
.tempsche-sp-c h6 {
    text-align: center;
}

.arw-blu-top>div {
    background: linear-gradient(0deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgba(17, 150, 199, 1) 100%);
}

.arw-org-btm>div {
    background: linear-gradient(180deg, rgba(180, 180, 180, 1) 0%, rgba(218, 218, 218, 1) 25%, rgb(176, 237, 234) 100%);
}

.arw-org-top>div:before {
    border-bottom: 30px solid rgb(176, 237, 234);
    top: -30px;
}

.arw-blu-top>div:before,
.arw-org-top>div:before,
.arw-blu-btm>div:after,
.arw-org-btm>div:after {
    position: relative;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    left: 50%;
}

.arw-blu-top>div:before {
    border-bottom: 30px solid rgba(17, 150, 199, 1);
    top: -30px;
}

.arw-blu-btm>div:after {
    border-top: 30px solid rgba(17, 150, 199, 1);
    top: 100%;
}

.arw-org-btm>div:after {
    border-top: 30px solid rgb(176, 237, 234);
    top: 100%;
}

/* TEMPORARY PAGE - SP DESIGN TEMPSCHEME CSS END */

/* TEMPORARY PAGE - QUALITY TABLE CSS START */
.tempquality-tbl {
    width: 100%;
    font-size: 14px;
    font-weight: 900;
}

.tempquality-tbl table {
    width: 100%;
    border-collapse: collapse;
}

th.tempqua-tbl-l {
    background-color: #333333;
}

th.tempqua-tbl-l,
th.tempqua-tbl-r {
    font-size: 16px;
    color: #ffffff;
}

.tempqua-tbl-l,
.tempqua-tbl-r {
    width: 35%;
}

.tempqua-tbl-l,
.tempqua-tbl-c,
.tempqua-tbl-r {
    padding: 1em;
}

.tempqua-tbl-c {
    text-align: center;
    white-space: nowrap;
}

.tempqua-tbl-c {
    width: 30%;
}

th.tempqua-tbl-r {
    background-color: #1196c7;
}

th.tempqua-tbl-l,
th.tempqua-tbl-r {
    font-size: 16px;
    color: #ffffff;
}

.tempqua-tbl-l,
.tempqua-tbl-r {
    width: 35%;
}

.tempqua-trtop {
    border-top: 1px solid #e7ecf1;
}

td.tempqua-tbl-l {
    background-color: #eeeeee;
}

.tmp-arw-r {
    color: #1196c7;
}

.tmp-arw-l,
.tmp-arw-r {
    font-weight: 900;
}

td.tempqua-tbl-l,
td.tempqua-tbl-c,
td.tempqua-tbl-r {
    border-bottom: 1px solid #e7ecf1;
}

.tempqua-tbl-r {
    background-color: #1196c7;
}

.tempqua-tbl-l,
.tempqua-tbl-c,
.tempqua-tbl-r {
    padding: 1em;
}

td.tempqua-tbl-r {
    background-color: #1196c7;
    color: #ffffff;
}

.scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
}

.scroll-hint-icon-white {
    background-color: #FFF;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}

.scroll-hint-icon {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    width: 120px;
    height: auto;
    border-radius: 5px;
    transition: opacity .3s;
    opacity: 0;
    background: rgba(0, 0, 0, .7);
    text-align: center;
    padding: 20px 10px 10px 10px;
}

.scroll-hint.is-left-scrollable {
    background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

/* TEMPORARY PAGE - QUALITY TABLE CSS END */

.scroll-hint-icon-white .scroll-hint-text {
    color: #000;
}

.scroll-hint-text {
    font-size: 10px;
    color: #FFF;
    margin-top: 5px;
}

.tempmelit {
    width: 100%;
    max-width: 480px;
    margin: 2em auto 0 auto;
    padding: 1em;
    text-align: center;
    border: 4px solid #1196c7;
    border-radius: 1em;
}

.temp-secure-title {
    padding-left: .5em;
    border-left: 3px solid #1196c7;
}

.temp-secure-img {
    text-align: center;
}

.temp-secure-img>img,
.lang-img>img,
.unified-img>img {
    max-width: 100%;
    vertical-align: bottom;
}

.temp-summary {
    display: flex;
    justify-content: center;
}

.temp-summary>div {
    background: #fff;
    border-radius: 10px;
    /* width: 100%; */
    margin: 1em;
    background: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.temp-summary h4 {
    text-align: center;
    color: #ffffff;
    background-color: var(--primary-color);
    margin: 0;
    padding: .5em;
    border-radius: 10px 10px 0px 0px;
}

.temp-summary>div>p {
    margin: 0;
    padding: 1em;
    font-weight: 900;
    font-size: 20px;
}

.temp-summary span {
    font-weight: 400;
    font-size: 15px;
}

dl.req-step dd {
    padding: 10px;
    margin-left: 5em;
    margin-bottom: 1em;
}

dl.req-step dd span {
    display: block;
    color: #ffffff;
    font-weight: 900;
    background-color: var(--primary-color);
    padding: 5px 10px 5px 10px;
}

dl.req-step ul {
    margin: 1em 0 0 1.5em;
}

dl.req-step ul,
dl.req-step li {
    list-style: square;
}

dl.req-step dt span {
    display: inline-block;
    color: #ffffff;
    font-weight: 900;
    background-color: var(--primary-color);
    padding: 5px 10px 5px 10px;
}

dl.req-step dt:after {
    display: block;
    content: "▼";
    text-align: center;
}

dl.req-step dt {
    float: left;
    padding-top: 10px;
}

.tempstaff-ex-in {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.tempstaff-ex-in>div {
    color: #ffffff;
    width: calc(50% - 1em);
    margin: .5em;
    background-color: var(--primary-color);
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.tempstaff-ex-in h4 {
    color: #ffffff;
    font-size: 20px;
    padding: .5em;
    padding-top: 0;
    border-bottom: 1px solid #ffffff;
    margin-top: 0;
}

.tempstaff-ex-in h4:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    font-weight: 900;
    content: "\f007";
    margin-right: 10px;
}

/* TEMPORARY PAGE - ACHIEVEMENT TABLE CSS START */
.temp-rec-tbl01 {
    display: flex;
    justify-content: center;
    margin-bottom: 4em;
}

.temp-rec-tbl01,
.temp-rec-tbl02 {
    width: 100%;
}

.temp-rec-tbl01 table,
.temp-rec-tbl02 table {
    width: 100%;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 1em;
}

.temp-rec-tbl01 th,
.temp-rec-tbl02 th {
    color: #ffffff;
    background-color: var(--primary-color);
}

.temp-rec-tbl01 th,
.temp-rec-tbl01 td,
.temp-rec-tbl02 th,
.temp-rec-tbl02 td {
    padding: .5em;
}

.temp-rec-tbl01 td {
    background-color: #e5f0f0;
}

.temp-record table {
    border-collapse: separate;
    border-spacing: 1px;
    text-align: center;
}

.scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
}

.temp-rec-tbl02 tr:nth-child(odd) td {
    background-color: #f5f5f5;
}

.temp-rec-tbl02 tr:nth-child(even) td {
    background-color: #a4e2f5;
}

.temp-rec-tbl01 th,
.temp-rec-tbl01 td,
.temp-rec-tbl02 th,
.temp-rec-tbl02 td {
    padding: .5em;
}

/* TEMPORARY PAGE - ACHIEVEMENT TABLE CSS END */
/* TEMPORARY PAGE CSS END HERE*/


/* CONTACT FORM CSS START HERE */
.contactform th {
    text-align: left;
    vertical-align: middle;
    width: 300px;
}

.contactform th,
.contactform td {
    padding: 10px;
    border-bottom: 1px dashed #999999;
}

.cklist li {
    position: relative;
}

.contactform input[type="text"],
.contactform input[type="tel"],
.contactform input[type="email"],
.contactform textarea {
    font-size: 16px;
    border: 1px solid #cccccc;
    padding: 5px;
    border-radius: 0;
    background: #ffffff;
    outline: none;
}

.con-btn>button {
    display: inline;
    float: right;
    margin: 40px auto 5px;
    border: 0px;
    background: var(--primary-color);
    border-radius: 3px;
    padding: 8px 15px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

.bck-btn>button {
    display: inline;
    float: left;
    margin: 40px auto 5px;
    border: 0px;
    background: var(--primary-color);
    border-radius: 3px;
    padding: 8px 15px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

.contactform input[type="text"],
.contactform input[type="tel"],
.contactform input[type="email"],
.contactform textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contactform table {
    width: 100%;
    border-collapse: collapse;
}

.contactform td,
.contactform tr {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* .privacy_policy {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
} */
.privacy-container {
    display: block;
    align-items: center;
    padding: 5px 0px 10px 0px;
}

.privacy-container>div {
    padding: 15px 0px 15px 0px;
}

.hidden {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.visible {
    display: block;
    opacity: 1;
}

.success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.check-icon img {
    width: 50px;
    /* Adjust size of the check icon */
    margin-bottom: 10px;
    /* Space below icon */
}

/* CONTACT FORM CSS END HERE */


/* PRIVACY POLICY CSS START HERE */
.policy dt {
    float: left;
}

.policy dd {
    margin-left: 2em;
}

.policy-wk {
    text-align: center;
    padding: 1em;
    border: 1px solid #000000;
    max-width: 480px;
    margin: auto;
}

/* PRIVACY POLICY CSS END HERE */


/* IMPACT PAGE CSS START HERE */
.com-sdgs img {
    display: block;
    margin: 20px 0px 20px 0px;
}

.sdgs-tbl-pc {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: var(--primary-color);
}

.sdgs-tbl-pc td img {
    max-width: 240px;
}

.sdgs-tbl-pc td {
    vertical-align: middle;
}

.sdgs-tbl-pc th,
.sdgs-tbl-pc td {
    padding: 1em;
    background-color: #ffffff;
}

.sdgs-tbl-sp {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: var(--primary-color);
    font-size: 12px;
}

.sdgs-tbl-sp th {
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
}

.sdgs-tbl-sp th,
.sdgs-tbl-sp td {
    padding: 3px;
    background-color: #ffffff;
}

.sdgs-tbl-sp td img {
    max-width: 240px;
}

.sdgs-tbl-pc th {
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
    vertical-align: middle;
    text-align: center;
}

.qua-txt {
    padding: 2em;
    border-radius: 1em;
    background-color: #ffffff;
    box-shadow: 0.3px 0.5px 0.7px hsl(240deg 27% 62% / 30%), 1px 1.6px 2.1px -0.8px hsl(240deg 27% 62% / 30%), 2.5px 4px 5.3px -1.7px hsl(240deg 27% 62% / 30%), 6px 9.7px 12.8px -2.5px hsl(240deg 27% 62% / 30%);
}

.esg-in h3 {
    font-size: 24px;
    text-align: center;
}

.csr-in {
    display: flex;
    align-items: center;
}

.csr-in>div {
    padding: 2em;
}

.csr-in-img {
    width: 20%;
    text-align: center;
}

.esg-img {
    text-align: center;
    padding: 1em;
}

.csr-in-txt {
    width: 80%;
}

.csr-in-img>img,
.vltr-in-img>div>img {
    max-width: 100%;
    vertical-align: bottom;
}

.vltr-in-img {
    display: flex;
    justify-content: center;
}

.vltr-in-img>div {
    width: 100%;
    padding: 1em;
}

.com_box {
    width: 100%;
    padding: 40px 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 18px;
    cursor: pointer;
    border-top: 8px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3sease-in-out;
    min-height: 345px;
}

/* .content__gap {
    letter-spacing: -0.02em;
    row-gap:32px;
    display: grid;
} */
.bg-btns {
    display: flex;
    align-items: center;
    -moz-column-gap: 16px;
    column-gap: 16px;
}

.impact-title-side-btns {
    display: flex;
    align-items: center;
    -moz-column-gap: 16px;
    column-gap: 16px;
}

.impact-title-side-btns>.bg-button:first-of-type,
.career-title-side-btn>.bg-button:first-of-type,
.impact-title-side-btns>.bg-button:last-of-type,
.career-title-side-btn>.bg-button:last-of-type {
    margin-bottom: 16px;
}

.bg-button.variant--button:hover {
    background-color: var(--primary-color);
    opacity: 0.6;
    color: white !important;
}

.bg-button.variant--button.bg-button--arrow {
    padding-right: 12px;
}

.bg-button.variant--button {
    padding-left: 16px;
    padding-right: 16px;
    background-color: var(--primary-color);
    color: #fff;
    white-space: nowrap;
}

.bg-button {
    display: inline-block;
    padding: 3px 0 6px;
    border-radius: 16.5px;
    color: var(--primary-color);
    transition: none;
    outline: none;
}

.HoverArrow {
    position: relative;
    top: 1px;
    margin-left: 5px;
    stroke-width: 2px;
    fill: none;
    stroke: currentColor;
}

.impact-grid {
    position: relative;
    display: grid;
    grid: 1fr / repeat(5, 254px);
    gap: 16px;
    z-index: 0;
}

.impact-grid-study-card.variant--minimal {
    height: 0;
    padding-bottom: 140%;
}

.impact-grid-study-card {
    --cardShadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
    --cardBorderRadius: 4px;
    --customersCaseStudyCardPosition: relative;
    --customersCaseStudyCardPadding: 16px;
    --customersCaseStudyCardOverlayHeight: 100px;
    --customersCaseStudyCardScale: 0.8;
    position: relative;
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    color: #fff;
}

.CustomersCaseStudyCard__content {
    padding: 16px;
    border-radius: inherit;
    overflow: hidden;
    mask-image: -webkit-radial-gradient(#fff, #000);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.impact-grid-study-card-background {
    --customersCaseStudyCardBackgroundShift: 10px;
    --customersCaseStudyCardBackgroundImageDisplay: block;
    --customersCaseStudyCardBackgroundPortraitImageDisplay: none;
    transition: transform .6s cubic-bezier(.7, 0, 0, 1);
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(var(--customersCaseStudyCardBackgroundShift)* -1);
    left: 0;
    display: var(--customersCaseStudyCardBackgroundDisplay);
    mask-image: -webkit-radial-gradient(#fff, #000);
}

.impact-grid-study-card-background__image-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* transform: translateY(calc(10 * -1)); */
}

.impact-grid-study-card-background__picture.Picture {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%) scale(1.03);
    transition: transform .6s cubic-bezier(.7, 0, 0, 1);
}

.Picture {
    --pictureMaxWidth: none;
    display: flex;
    max-width: none;
}

.Picture__image {
    vertical-align: top;
    align-self: flex-start;
}

.impact-grid-study-card-background__image {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.impact-grid-study-card-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-mask-image: linear-gradient(0deg, #000 15%, rgba(0, 0, 0, .5) 54.75%);
    mask-image: linear-gradient(0deg, #000 15%, rgba(0, 0, 0, .5) 54.75%);
    transition: transform .6scubic-bezier(.7, 0, 0, 1);
    pointer-events: none;
    display: var(--customersCaseStudyCardOverlayDisplay, "block");
    transform: scaleY(1.2);
    transform-origin: 50% 0;
}

.theme--dark .UserLogo.variant--Flat {
    --userLogoColor: #fff;
}

.theme--Light .UserLogo.variant--Flat {
    --userLogoColor: #aab4c1;
}

.CustomersCaseStudyCard__logo.variant--Flat {
    --userLogoColorAlt: transparent;
    --userLogoColorAltNoTransparency:
        color-mix(in srgb, #383636 75%, transparent);
}

.CustomersCaseStudyCard__logo.UserLogo {
    z-index: 2;
    position: relative;
    transform: scale(0.8);
    transform-origin: top left;
}

.UserLogo.variant--Flat {
    --userLogoColorAlt: #0a2540;
    --userLogoColorAltNoTransparency: #0a2540;
}

.UserLogo {
    max-width: 160px;
    display: block;
}

.study-card-cta {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    transition: .6s cubic-bezier(.7, 0, 0, 1);
    transition-property: transform, opacity;
}

.impact-second-section-layout {
    gap: 32px;
    display: grid;
    row-gap: 32px;
    align-items: flex-start;
}

.content__title {
    position: relative;
    padding: 0 32px 0 16px;
    /* font-weight: 400; */
    font: 500 24px / 1.333333333 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    /* color: var(--titleColor); */
    letter-spacing: 0.1px;
}

.content__title2 {
    position: relative;
    /* font-weight: 400; */
    font: 600 20px / 1.333333333 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    /* color: var(--titleColor); */
    letter-spacing: 0.1px;
}

.content__title3 {
    position: relative;
    /* font-weight: 400; */
    font: bold 15px / 1.333333333 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    /* color: var(--titleColor); */
    letter-spacing: 0.1px;
}

.content__body {
    padding: 0 32px 0 16px;
    font: 300 15px / 1.6 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    /* color: var(--textColor); */
    max-width: calc(calc(1080px*0.25)*3);
}

.content__body2 {
    /* padding: 0 32px 0 16px; */
    font: 300 15px / 1.6 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    ;
    /* color: var(--textColor); */
    max-width: calc(calc(1080px*0.25)*3);
}

.impact-logo-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 16px;
}

.impact-logo-layout {
    padding: calc(50*1px) 0 calc(50*1px);
}

.user-logo-grid {
    display: grid;
    grid: auto / repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    row-gap: 60px;
}

.UserLogo {
    max-width: 160px;
    display: block;
}

.content.variant--Detail {
    --titleFontSize: 15px;
    --titleLineHeight: 1.6;
    --titleWeight: 425;
    --titleLetterSpacing: 0.2px;
    --paragraphGap: 8px;
}

.content.variant--Detail,
.content.variant--stat {
    --rowGap: 8px;
    --titleBorderColor: #635bff;
    --bodyFontSize: 15px;
    --bodyLineHeight: 1.6;
}

.RowLayout {
    --rowLayoutGapXSmall: 16px;
    --rowLayoutGapSmall: 24px;
    --rowLayoutGapNormal: 32px;
    --rowLayoutGapMedium: var(--rowLayoutGapNormal);
    --rowLayoutGapLarge: var(--rowLayoutGapNormal);
    --rowLayoutGapXLarge: var(--rowLayoutGapNormal);
    --rowLayoutGapXXLarge: var(--rowLayoutGapNormal);
    --rowLayoutGap: 64px;
    display: grid;
    grid: auto / minmax(0, 1fr);
    row-gap: var(--rowLayoutGap);
    align-items: flex-start;
}

.customers-overview-together-with-lyft {
    --lyftPink: #ff00c9;
    position: relative;
    height: 581px;
}

.customers-overview-together-with-lyft__photo {
    position: absolute;
    left: 245px;
    top: 0;
    width: 267px;
    margin-top: 160px;
    box-shadow: 0 6px 12px -2px rgba(50, 50, 93, 0.25), 0 3px 7px -3px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.impact-case-study-carousel {
    /* --caseStudyCarouselOffsetLeft: 16px; */
    --caseStudyCarouselPaddingBottom: -200px;
    --caseStudyCarouselPaddingTop: -50px;
    position: relative;
    /* width: calc(100% + var(--caseStudyCarouselOffsetLeft)* 2); */
    /* margin-left: calc(var(--caseStudyCarouselOffsetLeft)* -1); */
    margin-bottom: calc(var(--caseStudyCarouselPaddingBottom)* -1);
    margin-top: calc(var(--caseStudyCarouselPaddingTop)* -1);
}

/* .content__header {
    position: relative;
    padding: 0 64px 0 16px;
    max-width: calc(calc(1080px*0.25)*3);
}

.content, .content__header {
    display: grid;
    row-gap: 24px;
} */
.phone-graphic {
    --phoneBorderRadius: 36px;
    --phoneScreenBorderRadius: 29px;
    --phoneWidth: 264px;
    --phoneHeight: 533px;
    --phoneGraphicShadow: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3), inset 0 -2px 6px 0 rgba(10, 37, 64, 0.35);
    width: var(--phoneWidth);
    height: var(--phoneHeight);
    padding: 8px;
    border-radius: var(--phoneBorderRadius);
    background: #f6f9fc;
    box-shadow: var(--phoneGraphicShadow);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 16px;
}

.customers-overview-together-with-lyft__phone {
    position: relative;
    z-index: 1;
    left: 32px;
}

.phone-graphic__screen {
    position: relative;
    height: 100%;
    border-radius: var(--phoneScreenBorderRadius);
    mask-image: -webkit-radial-gradient(#fff, #000);
    background: #fff;
}

.customers-overview-together-with-lyft__screen {
    display: flex;
    flex-direction: column;
    background-color: #f6f9fb;
    height: 100%;
}

.customers-overview-together-with-lyft__navigationBar {
    background-color: #ff00c9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0 10px;
}

.customers-overview-together-with-lyft__summary {
    background-color: #fff;
    display: grid;
    grid: repeat(3, auto) / repeat(2, 1fr);
    box-shadow: 0 1px 7.5px -3.7px rgba(0, 0, 0, .1);
}

.customers-overview-together-with-lyft__summaryPayments {
    text-align: center;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    padding: 16px 0 8px;
}

.customers-overview-together-with-lyft__label {
    font: 425 12px / 15px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #32325d;
    letter-spacing: .03px;
}

.customers-overview-together-with-lyft__stat {
    display: grid;
    grid: repeat(2, auto) / 1fr;
    gap: 4px 0;
    flex-direction: column;
    text-align: center;
}

.customers-overview-together-with-lyft__label--detail {
    font: 300 9px / 11px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #4f5b76;
    letter-spacing: .22px;
    margin: 4px 0 0;
}

.customers-overview-together-with-lyft__todaysEarnings {
    font: 500 40px / 25px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #32325d;
    letter-spacing: .11px;
    margin: 12px 0 8px;
}

.customers-overview-together-with-lyft__pageIndicatorControl {
    grid-column: 1 / -1;
    display: grid;
    justify-content: center;
    grid: 1fr / repeat(2, auto);
    gap: 0 4px;
    margin: 8px 0;
}

.customers-overview-together-with-lyft__pageIndicator--active {
    background-color: #4f5b76;
}

.customers-overview-together-with-lyft__pageIndicator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #c4ccd8;
}

.customers-overview-together-with-lyft__sectionTitle {
    font: 425 11px / 14px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #727f96;
    letter-spacing: .03px;
    margin: 16px 16px 4px;
}

.customers-overview-together-with-lyft__section {
    background: #fff;
    box-shadow: 0 1.66667px 3.33333px -1.66667px rgba(0, 0, 0, .3);
    border-radius: 8px;
    margin: 0 16px;
}

.customers-overview-together-with-lyft__sectionRow {
    padding: 6px 8px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 425 11px / 14px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .03px;
    color: #0a2540;
}

.CustomersOverviewTogetherWithLyft__getPaid {
    display: grid;
    grid: 1fr / repeat(2, auto);
    gap: 0 4px;
    align-items: center;
    background: linear-gradient(90deg, #8500bf, #ff00c9);
    border-radius: 4px;
    color: #fff;
    font: 500 9px / 11px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 4px 10px;
}

.customers-overview-together-with-lyft__sectionRow+.customers-overview-together-with-lyft__sectionRow {
    border-top: 1px solid #f6f9fc;
}

.customers-overview-together-with-lyft__sectionRow {
    padding: 6px 8px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 425 11px / 14px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .03px;
    color: #0a2540;
}

.customers-overview-together-with-lyft__label--secondary {
    font: 300 12px / 14px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #4f5b76;
    letter-spacing: .03px;
}

.customers-overview-together-with-lyft__label {
    font: 425 12px / 15px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #32325d;
    letter-spacing: .03px;
}

.customers-overview-together-with-lyft__sectionRow {
    padding: 6px 8px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 425 11px / 14px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .03px;
    color: #0a2540;
}

.customers-overview-together-with-lyft__progressBarWrapper {
    display: flex;
    align-items: center;
}

.customers-overview-together-with-lyft__progressBar {
    position: relative;
    width: 52px;
    height: 4px;
    margin: 0 12px 0 0;
    border-radius: 2px;
    overflow: hidden;
    background-color: #e6ebf1;
}

.customers-overview-together-with-lyft__progressBar--sixty:before {
    left: -40%;
}

.customers-overview-together-with-lyft__progressBar--eighty:before {
    left: -20%;
}

.customers-overview-together-with-lyft__progressBar:before {
    content: "";
    height: 100%;
    width: 100%;
    background-color: #4f00cd;
    position: absolute;
    top: 0;
}

.customers-overview-together-with-lyft__sectionRow--rideHistory {
    display: grid;
    grid: repeat(2, auto) / repeat(2, auto);
    gap: 4px 0;
}

.customers-overview-together-with-lyft__sectionRow {
    padding: 6px 8px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 425 11px / 14px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .03px;
    color: #0a2540;
}

.customers-overview-together-with-lyft__label--secondary {
    font: 300 12px / 14px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #4f5b76;
    letter-spacing: .03px;
}

.customers-overview-together-with-lyft__label {
    font: 425 12px / 15px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #32325d;
    letter-spacing: .03px;
}

.customers-overview-together-with-lyft__sectionRow--rideHistory>:nth-child(2n) {
    text-align: right;
}

.customers-overview-together-with-lyft__label--secondary {
    font: 300 12px / 14px "Helvetica Neue", "Arial", sans-serif;
    color: #4f5b76;
    letter-spacing: .03px;
}

.customers-overview-together-with-lyft__label {
    font: 425 12px / 15px "Helvetica Neue", "Arial", sans-serif;
    color: #32325d;
    letter-spacing: .03px;
}

.customers-overview-together-with-lyft__navBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fefefe;
    border-top: 1px solid #f6f9fc;
    display: flex;
    justify-content: space-around;
    padding: 4px 20px;
}

.customers-overview-together-with-lyft__navItem {
    display: grid;
    grid: 13px auto / 1fr;
    gap: 2px 0;
    justify-items: center;
    font: 300 8px / 11px "Arial", sans-serif;
    text-align: center;
}

.dom-graphic__height-container {
    height: 0;
    width: 100%;
    max-width: 540px;
    padding-bottom: 107.5925925925926%;
}

.dom-graphic__scale-container {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    will-change: initial;
    width: 100%;
}

.CustomersUseCasesGrid__layoutContainer {
    position: relative;
    margin-top: 56px;
}

.CustomersUseCaseGridLayout {
    display: grid;
    grid-auto-rows: 290px;
    gap: 16px;
}

.flavor--Chroma.theme--dark,
.flavor--Chroma .theme--dark {
    --blendForeground: #7a73ff;
    --blendIntersection: #cff;
    --blendBackground: #00d4ff;
}

.impact-grid-study-card.variant--Normal {
    --customersCaseStudyCardPadding: 24px;
    --customersCaseStudyCardOverlayHeight: 150px;
    --customersCaseStudyCardScale: 1;
    min-height: 290px;
}

.CustomersCaseStudyCard__content {
    padding: 24px;
    border-radius: inherit;
    overflow: hidden;
    mask-image: -webkit-radial-gradient(#fff, #000);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.impact-grid-study-card-background__picture.Picture {
    display: block;
}

.CustomersCaseStudyCard__icon {
    position: absolute;
    top: 24px;
    right: 24px;
}

.CustomersCaseStudyCard__title {
    max-width: 468px;
    font: 500 28px / 35px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    transition: transform 0.6s cubic-bezier(0.7, 0, 0, 1);
    padding-right: 24px;
    position: absolute;
    bottom: 24px;
    left: 24px;
    color: #fff;
}

.impact-grid-study-card.variant--Normal .study-card-cta {
    opacity: 0;
    bottom: calc(24px* -1);
}

.content__footer {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    row-gap: 24px;
    margin-top: calc(("", 24px) - 24px);
    padding: 0 0 0 0;
}

.List {
    --listSpacing: 4px;
    --linkWeight: 425;
    --columnCount: 1;
    --paddingRight: 16px;
    --paddingLeft: 16px;
    padding: 0 16px 0 16px;
    font: 300 15px / 1.6 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .2px;
}

.List[data-column-count] .List__list {
    display: grid;
    grid: auto / repeat(2, 1fr);
    gap: 4px 32px;
    margin: 4px 0;
}

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

/* IMPACT PAGE CSS END HERE */


/* 404 PAGE CSS START HERE*/
.page-not-found .header-gradient-bg {
    top: 28%;
}

.error-container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 404 PAGE CSS END HERE*/


/* CAREERS PAGE CSS START HERE */
.career-title-side-btn {
    display: flex;
    align-items: center;
    -moz-column-gap: 16px;
    column-gap: 16px;
}

.career-graphic {
    --jobsHeroHorizontalShadowPadding: 24px;
}

.career-graphic__layout {
    --jobsHeroGraphicWidth: calc(calc(100vw - 17px) - calc(calc(100vw - 17px) /2 - 1080px /2));
    display: grid;
    grid: 6% 28% min-content auto / 31% 18% auto;
    gap: 24px;
}

.career-graphic__layout>:first-child {
    grid-column: 1 / 3;
    grid-row: 2;
}

.career-graphic__layout>:nth-child(2) {
    grid-column: 3;
    grid-row: 1 / 3;
}

.career-graphic__layout>:nth-child(4) {
    grid-column: 1 / -1;
    justify-self: flex-end;
}

.career-graphic__layout>:nth-child(6) {
    grid-column: 2 / -1;
}

.Picture--fitCover {
    width: 100%;
    height: 100%;
}

.Picture {
    --pictureMaxWidth: none;
    display: flex;
    max-width: var(--pictureMaxWidth);
}

.Picture__image {
    vertical-align: top;
    align-self: flex-start;
}

.Picture--fitCover .Picture__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.JobsCard {
    --cardBleedRightNormal: calc(1080px / 4);
    --cardBleedBottomNormal: 16px;
    --cardShadow: none;
    --cardShadowMargin: 0;
    --cardMinHeight: 72px;
    position: relative;
    min-width: 100px;
    min-height: var(--cardMinHeight);
    max-width: var(--cardMaxWidth, none);
    margin-right: calc(var(--cardBleedRight, 0)* -1);
    margin-bottom: calc(var(--cardBleedBottom, 0)* -1);
    border-radius: var(--cardBorderRadius);
    background: var(--cardBackground);
    box-shadow: var(--cardShadow);
    overflow: hidden;
}

.career-card--shadow-medium {
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
    margin: 16px;
}

.career-video-card.career-card {
    display: grid;
    grid: auto / auto min-content;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    gap: 8px 16px;
    padding: 16px;
    max-width: 400px;
    min-height: 112px;
    letter-spacing: .2px;
}

.Link {
    font-weight: var(--linkWeight, 425);
    cursor: pointer;
    color: var(--primary-color);
    opacity: var(--linkOpacity, 1);
    transition: none;
    transition-property: color, opacity;
    outline: none;
}

.career-video-card__link.Link,
.career-video-card__title {
    font: bold 12px / 1.5 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
}

.career-video-card__title {
    color: #0a2540;
}

.JobsLink {
    font-weight: var(--linkWeight, 425);
    cursor: pointer;
    color: #635bff;
    opacity: var(--linkOpacity, 1);
    transition: none;
    transition-property: color, opacity;
    outline: none;
}

.career-video-card__avatarList {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 2;
    list-style: none;
    margin: 0;
    padding: 0;
}

.career-video-card__avatarPicture.Picture {
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px #fff;
}

.MediaCardLayout__copyContainer .Link {
    color: #425466;
    padding: 2px 3px;
    background-color: rgba(2, 188, 245, .1);
    transition: none;
    transition-property: background-color;
}

.career-card-carousel {
    width: 100%;
}

.career-card-carousel-modal-background {
    position: fixed;
    inset: 0;
    cursor: pointer;
}

.career-card-carousel__card-list {
    position: relative;
    overflow: hidden;
}

.CareerCard.career-card {
    display: grid;
    width: 100%;
    padding: 4px;
}

.MediaCardCarousel__backgroundCard.career-card {
    position: absolute;
    left: 16px;
    right: 16px;
    height: 150px;
    bottom: -8px;
    z-index: -1;
    pointer-events: none;
}

.career-card__thumbnail {
    border-radius: 4px;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(#fff, #000);
}

.CareerCard__content {
    display: grid;
    grid: min-content auto min-content / auto;
    justify-items: start;
    gap: 12px;
    padding: 16px 24px 8px;
}

.CareerCard__type {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 425 15px / 19px"sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .2px;
    color: #abb5c5;
}

.CareerCard__iconContainer {
    display: flex;
    align-items: center;
    height: 23px;
    fill: currentColor;
}

.CareerCard__title {
    font: 425 18px / 28px "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    letter-spacing: .2px;
}

.CareerCard__titleLink.Link {
    --linkColor: #0a2540;
    --linkHoverOpacity: 0.6;
}

.CtaButton {
    display: inline-block;
    padding: 3px 0 6px;
    border-radius: 16.5px;
    font: 425 15px/1.6 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #ff7600;
    transition: none;
    outline: none;
}

.CtaButton.variant--Link {
    font-weight: var(--linkWeight, 425);
    transition-property: color, opacity;
}

.CareerCard__ctaButton.CtaButton {
    align-self: flex-end;
}

.MediaCardCarousel__nav {
    display: flex;
    justify-content: center;
}

.MediaCardCarousel__navList {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;

}

.MediaCardCarousel__navButton--isActive {
    pointer-events: none;
}

.MediaCardCarousel__navButton {
    background: #9da1a3;
}

.career-card {
    --cardBleedRightNormal: calc(1080px / 4);
    --cardBleedBottomNormal: 16px;
    --cardShadow: none;
    --cardShadowMargin: 0;
    --cardMinHeight: 72px;
    position: relative;
    min-width: 100px;
    min-height: 72px;
    max-width: var(--cardMaxWidth, none);
    margin-right: calc(var(--cardBleedRight, 0)* -1);
    margin-bottom: calc(var(--cardBleedBottom, 0)* -1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 6px 12px -2px rgba(50, 50, 93, 0.25), 0 3px 7px -3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.Card--shadowSmall {
    box-shadow: 0 6px 12px -2px rgba(50, 50, 93, 0.25), 0 3px 7px -3px rgba(0, 0, 0, 0.3);
    margin: 8px;
}

.QuoteCard--orientationVertical.career-card {
    max-width: calc(1px + calc(1080px*0.25)* 2);
}

.QuoteCard.career-card {
    display: grid;
    align-items: center;
}

.QuoteCard__imageContainer {
    position: relative;
}

.QuoteCard__angleContainer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    aspect-ratio: 1 / 0.106;
}

.QuoteCard__iconContainer {
    --iconSize: 42px;
    position: absolute;
    top: calc(50% - 42px / 2);
    left: calc(50% - 42px / 2);
}

.QuoteCard__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(10, 37, 64, .06);
    background: #fff;
}

.career-card--shadowLarge {
    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
    margin: 32px;
}

.QuoteCard__quote.Quote {
    position: relative;
    padding: 40px;
    z-index: 2;
}

.Quote__body {
    position: relative;
    font: 300 18px / 1.55 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    quotes: "“" "”" "‘" "’";
}

.Quote__attribution {
    margin: 16px 0 0;
    font: 300 15px / 1.66 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
}

.Quote__author {
    font-weight: 500;
    color: #0a2540;
}

.Quote__body:after,
html[lang^=fr] .Quote__body:after {
    transform: translateX(2px);
}

.Quote__body:before {
    content: open-quote;
    position: absolute;
    left: -10px;
}

.Quote__body:after {
    content: close-quote;
    position: absolute;
}

.Modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

.Modal.player-show {
    visibility: visible;
    transform: scale(1.1);
    transition: .5s ease;
}

.Modal__background {
    position: absolute;
    inset: 0;
    background: rgba(10, 38, 66, .8);
    opacity: 1;
    cursor: pointer;
}

.Modal__windowContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    transform-origin: center;
    pointer-events: none;
    opacity: 0;
}

.Modal__windowContainer>* {
    pointer-events: auto;
}

.JobsHeroGraphic__videoContainer {
    width: 100%;
    max-width: 960px;
}

.Video--inCard {
    box-shadow: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
}

.Video--posterHidden .Video__poster {
    opacity: 0;
}

.Video {
    --videoPlayButtonIconEasing: cubic-bezier(0.4, 0, 0.2, 1);
    --videoPlayButtonIconDuration: 350ms;
    --videoOverlayColor: rgba(0, 0, 0, 0.2);
    --videoBorderRadius: var(--cardBorderRadius, 0px);
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 8px;
}

.Video.player-show {
    visibility: visible;
    transform: scale(1.1);
    transition: .5s ease;
}

.Video__video {
    width: 100%;
    position: relative;
    z-index: 1;
    vertical-align: top;
}

.Video__poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity .5s;
    pointer-events: none;
}

.Video__overlay {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity .5s;
}

.Video__playButton {
    position: relative;
    z-index: 3;
    transition: cubic-bezier(0.4, 0, 0.2, 1) 350ms;
}

.Video--hasAspectRatio .Video__video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.impact__area .slick-dots {
    position: absolute;
    bottom: -5px !important;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.impact__area .slick-dots li {
    width: 25px;
    height: 3px;
    background: gray;
    transition: background 0.3s;
}

.impact__area .slick-dots li button {
    display: none;
}

.impact__area .slick-dots li.slick-active {
    background: orange;
}

.impact__area .slick-active {
    animation: zoomIn 0.8s ease-out;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.impact__area .slick-list {
    overflow: hidden !important;
}

.impact__area .slick-track {
    display: flex !important;
}

.impact__area .slick-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.impact__area .slick-slide>div {
    width: 100% !important;
}

.impact__area .slick-active {
    transform: scale(1);
    /* Zoom in */
    opacity: 1;
    /* Fade in */
}

.career-card-carousel__card-list {
    display: block !important;
}

/* CAREERS CSS END HERE */


/* NEWSROOM CSS START HERE */
/* news */
.news-post {
    display: grid;
    gap: 8px 0;
    min-height: 100px;
}

.news-post-list {
    /* row-gap: 16px;
    display: grid;
    grid: auto / minmax(0, 1fr);
    align-items: flex-start; */
    --rowLayoutGapXSmall: 16px;
    --rowLayoutGapSmall: 24px;
    --rowLayoutGapNormal: 32px;
    --rowLayoutGapMedium: var(--rowLayoutGapNormal);
    --rowLayoutGapLarge: var(--rowLayoutGapNormal);
    --rowLayoutGapXLarge: var(--rowLayoutGapNormal);
    --rowLayoutGapXXLarge: var(--rowLayoutGapNormal);
    --rowLayoutGap: var(--rowLayoutGapLarge);
    display: grid;
    grid: auto / minmax(0, 1fr);
    row-gap: var(--rowLayoutGap);
    align-items: flex-start;
}

.news-header {
    display: grid;
    gap: 8px;
    align-content: flex-start;
}

.news-header h2 {
    position: relative;
    font-size: 15px;
    color: #1196c7;
    letter-spacing: 0.2px;
    cursor: pointer;
    outline: none;
    padding: 0 64px 0 16px;
}

.news-date {
    padding: 0 16px;
    position: relative;
}

.news-date:before,
.news-header h2:before {
    display: block;
    position: absolute;
    top: calc(.5px + 1.6 * 15px / 2 - 15px / 2);
    left: 0;
    width: 1px;
    height: 15px;
    background-color: #1196c7;
    content: "";
}

.news-header h1 {
    position: relative;
    font-size: 18px;
    color: #0a2540;
    letter-spacing: 0.2px;
    padding: 0 64px 0 16px;
    line-height: 28px;
}

.news-post img {
    height: auto;
    width: 100%;
    border-radius: 8px;
}

/* .news-post figure{
    padding: 0 16px;
} */
.news-post figure {
    aspect-ratio: 2 / 1;
    position: relative;
}

/* stories */
.stories-wrapper {
    display: grid;
    row-gap: 24px;
}

.stories-wrapper .column-layout {
    display: grid;
    row-gap: 32px;
    align-items: flex-start;
}

.stories-wrapper .row-layout {
    display: grid;
    grid: auto / minmax(0, 1fr);
    row-gap: 64px;
    align-items: flex-start;
}

.story-body {
    padding: 0 32px 0 0;
}

.story-body p {
    font-size: 18px;
    color: #425466;
}

.stories-slider-main {
    overflow: hidden;
    border-radius: 8px;
}

.stories-slider-main article {
    height: 456px;
    position: relative;
    background-position: center;
    background-size: cover;
    background-size: 105%;
    transition: background-size 0.3s ease-in-out;
}

.stories-slider-main article a {
    z-index: 1;
}

.stories-slider-main article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 52, 129, 0.7);
    /* Dark blue overlay */
    border-radius: 12px;
    /* Optional rounded corners */
}

.stories-slider-main article:hover {
    background-size: 100%;
}

.stories-slider-main article .logo-container,
.cardContent .logo-container {
    position: absolute;
    top: 20px;
    width: 100%;
    left: 30px;
    z-index: 1;
}

.stories-slider-main article .logo-container svg,
.cardContent .logo-container svg {
    filter: brightness(0) invert(1);
}

.stories-slider-main article .logo-container svg.storycard-icon,
.cardContent .logo-container svg.storycard-icon {
    float: right;
    margin-right: 50px;
    margin-top: -35px;
}

.stories-slider-nav article {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

.stories-slider-nav .slick-track {
    transform: none !important;
}

.stories-slider-nav article svg {
    filter: grayscale(100%) contrast(120%);
    mix-blend-mode: multiply;
    opacity: .5;
}

.stories-slider-nav article.slick-current svg {
    filter: grayscale(0%);
    opacity: 1;
}

.stories-title {
    width: 465px;
    position: absolute;
    bottom: 20px;
    left: 30px;
    transform: translateY(15px);
}

.stories-content .logo-container svg,
.stories-title h1 {
    color: #fff;
    font-size: 26px;
}

.role-svg {
    width: 40px;
    height: 40px;
}

.stories-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/*side by side layout*/
.align-side-layout {
    display: grid;
    gap: 48px 28px;
    margin: 0 auto;
}

.align-side-layout .card {
    height: 100%;
    width: 560px;
}

.align-layout-left .card {
    margin-right: 16px;
}

.align-side-layout .card article {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    cursor: pointer;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

.align-side-layout .card a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.align-side-layout .card a .cardContent {
    position: relative;
    display: flex;
    gap: 24px;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 446px;
    padding: 24px;
    color: #fff;
}

.align-side-layout .card .cardBackground {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.align-side-layout .card .cardBackground img {
    width: 100%;
}

.align-layout-left,
.align-layout-right {
    width: 100%;
    max-width: 560px;
}

.align-layout-left .cardBackground-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 15%, #00b6ff 66%);
    transform: scaleY(1.35);
    transform-origin: 50% 0;
    transition: transform .5s;
    will-change: transform;
}

.align-layout-right .cardBackground-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 15%, #0a2540 66%);
    transform: scaleY(1.35);
    transform-origin: 50% 0;
    transition: transform .5s;
    will-change: transform;
}

.cardContent img {
    transition: transform 0.5s ease-in-out;
    transform: scale(1.1);
}

.card:hover img {
    transform: scale(1);
}

.card .stories-title,
.stories-slider-main .stories-title {
    transition: transform 0.3s ease-in-out;
}

.card:hover .stories-title,
.stories-slider-main article:hover .stories-title {
    transform: translateY(0px);
}

.card:hover .stories-title .read-more,
.stories-slider-main article:hover .read-more {
    opacity: 1;
}

.read-more {
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.picture--fitCover {
    width: 100%;
    height: 100%;
}

.picture--fitCover .Picture__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* NEWSROOM CSS END HERE */


/* STRIPE LINE CSS START HERE */
.Stripe__intersection {
    position: absolute;
    top: calc(72px - 40px);
    height: 40px;
    transform: translateY(-.25px);
    background: #0048e5;
    left: calc(calc(calc(100vw - 17px) /2 - 1080px /2) - calc(calc(100vw - 17px) /2 - 1080px /2));
    width: calc(calc(calc(100vw - 17px) /2 - 1080px /2) + calc(calc(1080px /2)*0.25));
}

.HeroSection .slant-line-set {
    --stripeSetAngle: -12deg;
}

.slant-set--top-right {
    --stripeSetSubpixelOffset: -0.35px;
    /* top: 0; */
    right: 0;
    transform-origin: 100% 0;
}

.slant-line-set--bottom-left .Slant--variantOutline,
.StripeSet--TopLeft .Slant--variantOutline,
.slant-set--top-right .Slant--variantOutline {
    --stripeBorderOffset: -1px;
}

.slant-accentNone:first-of-type {
    --slantColor: #80e9ff;
}

.StripeSet--BottomRight .Stripe,
.slant-set--top-right .Slant {
    right: auto;
    left: calc(calc(1080px + calc(calc(100vw - 17px) /2 - 1080px /2)) - calc(calc(1080px /2)*0.25) + 0px);
}

.Stripe:nth-of-type(2).Slant--variantOutline {
    top: calc(calc(80px - 40px) - 1px);
    z-index: -1;
}

.Slant {
    --stripeInset: 0px;
    --stripeWidth: calc(calc(100vw - 17px) /2 - 1080px /2);
    --stripeMinWidth: 80px;
    --stripeHeight: 40px;
    --stripeIntersectionTop: calc(80px - 40px);
    --stripeIntersectionInset: 0px;
    --stripeIntersectionInset: 0px;
    --stripeIntersectionWidth: 16px;
    --stripeIntersectionBackground: var(--blendIntersection);
    --stripeMaxInset: calc(var(--layoutWidth) / 2);
    --stripeStartMax: calc(var(--layoutWidth) + var(--gutterWidth));
    --stripeStart: calc(var(--stripeStartMax) - var(--stripeInset) + var(--stripeBorderOffset));
    --stripeBorderOffset: 0px;
    right: var(--stripeStart);
    width: calc(var(--stripeWidth) + var(--stripeInset) - var(--stripeBorderOffset)* 2);
    position: absolute;
    height: var(--stripeHeight);
    background: var(--slantColor);
    overflow: hidden;
}

.Slant--widthMedium {
    --stripeWidth: 240px;
}

.Stripe--insetFull {
    left: calc(calc(100vw - 17px) /2 - 1080px /2);
    right: auto;
    width: 240px;
}

.Slant--variantOutline {
    background: none;
    border: 1px solid #E1E9F0;
}

.slant-line-set {
    --stripeSetHeight: 72px;
    --stripeSetAlignCenterOffset: -40px;
    --stripeSetSubpixelOffset: 0;
    --stripeSetAngle: -6deg;
    position: absolute;
    height: var(--stripeSetHeight);
    width: 100%;
    transform: skewY(var(--stripeSetAngle)) translateY(var(--stripeSetSubpixelOffset));
    overflow: hidden;
}

.slant-line-set--layout {
    --stripeSetHeight: 80px;
}

.slant-line-set--bottom-left {
    left: 0;
    /* bottom: 0; */
    transform-origin: 0 100%;
}

.Slant:nth-of-type(2).slant-accentNone {
    --slantColor: #737aff;
}

.Slant:nth-of-type(2) {
    top: calc(80px - 40px);
}

.Slant:nth-of-type(3) {
    --slantColor: transparent;
}

.Slant--insetNormal {
    --stripeInset: calc(calc(1080px /2)* 0.25);
}


/* =========================== */
/* 404 PAGE SLANT LINE CSS START HERE */
.SlantSet--BottomLeft {
    left: 0;
    bottom: 0;
    transform-origin: 0 100%;
}

.SlantSet--TopRight {
    offset: -0.35px;
    top: 0;
    right: 0;
    transform-origin: 50% 0;
}

.SlantSetUpward {
    position: relative;
    height: 72px;
    width: 100%;
    transform: skewY(-6deg) translateY(0);
    overflow: hidden;
}

.SlantBlueLeft {
    position: absolute;
    width: 150px;
    height: 40px;
    background: #80e9ff;
    transform: skewX(-20deg);
    top: 0;
    left: -10px;
}

.SlantVioletLeft {
    position: absolute;
    width: 250px;
    height: 40px;
    background: #7a73ff;
    transform: skewX(-20deg);
    top: calc(72px - 40px);
    left: -10px;
}

.SlantSetDownward {
    position: relative;
    height: 72px;
    width: 100%;
    transform: skewY(-6deg) translateY(0);
    overflow: hidden;
}

.SlantBlueRight {
    position: absolute;
    width: 150px;
    height: 40px;
    background: #80e9ff;
    transform: skewX(-20deg);
    right: -10px;
    top: 0;
}

.SlantVioletRight {
    position: absolute;
    width: 250px;
    height: 40px;
    background: #7a73ff;
    transform: skewX(-20deg);
    top: calc(72px - 40px);
    right: -10px;
}

/* 404 PAGE SLANT LINE CSS END HERE */
.footer__widget-title .logo {
    background: none !important;
}

.graph-canvas {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    width: 100%;
}

.graph-canvas canvas {
    min-width: 1000px;
    max-width: none;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* global location */
#map {
    height: 700px;
    width: 100%;
    border-radius: 20px;
}

.leaflet-container {
    background: #0b1220;
}

/* COUNTRY PIN */
.pin-wrapper {
    position: relative;
    width: 40px;
    height: 50px;
}

.pin-shape {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.pin-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(45deg);
}

.flag-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* BRANCH DOT */
.branch-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
    border: 2px solid white;
}

.map-label {
    justify-content: center;
    margin: 20px 0;
}

.map-label div {
    margin: 0 20px;
}

.services__item {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 30px;
    background: #fff;
}

.services__item:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.services__icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.services__content p {
    max-width: 280px;
    margin: 0 auto;
}

.high-contact-center-header {
    font-size: 42px !important;
}

/* BACKGROUND */
.history-section-bg {
    background: #f6f8fb;
}

/* TITLE */
.history__title h2 {
    font-size: 36px;
    font-weight: 300;
    color: #0b2641;
    letter-spacing: -0.02em;
}

/* CENTER WRAPPER */
.tele-history {
    display: flex;
    justify-content: center;
}

/* MAIN CARD */
.overview-card {
    width: 100%;
    max-width: 950px;

    background: #fff;
    border-radius: 16px;

    padding: 60px 70px;

    box-shadow: 0 20px 60px rgba(11, 38, 65, 0.08);
    border: 1px solid rgba(11, 38, 65, 0.06);
    box-sizing: border-box;
}

/* GRID */
.overview-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* EACH ROW */
.row-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px;

    padding-bottom: 20px;
    border-bottom: 1px solid rgba(11, 38, 65, 0.08);
}

/* REMOVE LAST LINE */
.row-item:last-child {
    border-bottom: none;
}

/* LABEL (LEFT SIDE) */
.label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(11, 38, 65, 0.6);
}

/* VALUE (RIGHT SIDE) */
.value {
    font-size: 16px;
    font-weight: 300;
    color: #0b2641;
    line-height: 1.7;
}

/* tRANSLATION BTN */
.chg-lang {
    position: fixed;
    right: 0;
    top: 100px;
    z-index: 999;
    padding: 1em 1.5em 1em 1em;
    line-height: 1;
    border-radius: 3em 0 0 3em;
    /* background-color: transparent;
    color: #fff; */
    background-color: #fff;
    color: var(--primary-color);
    font-weight: 900;
    transition: all 0.3s ease;
}

.chg-lang a {
    color: inherit;
}

.chg-lang.is-sticky {
    background-color: #fff;
    color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.telenet-staggered-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    position: relative;
    align-items: start;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: block;
}

.item-vertical {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
}

.item-horizontal {
    grid-column: 6 / span 7;
    grid-row: 1;
    margin-top: 122px;
}

.item-bottom-wide {
    grid-column: 2 / span 9;
    grid-row: 2;
    margin-top: -10px;
}


/* MEDIA QUERY START HERE */
@supports (-webkit-line-clamp:5) {
    .CustomersCaseStudyCard__title {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }
}

@media (max-width:1200px) {
    .align-side-layout .card {
        width: 460px;
    }

    .footer-mrgn.ml-65 {
        margin-left: 0;
    }

    .footer-mrgn.mr-35 {
        margin-right: 0;
    }

    .graph-canvas {
        display: block;
        justify-content: unset;
    }
}

@media (min-width: 1112px) {
    .impact-grid {
        grid-template-columns: repeat(3, 254px);
    }
}

@media (min-width: 900px) and (max-width: 992px) {
    .career-graphic__layout {
        --jobsHeroGraphicWidth: calc(calc(100vw - 17px) - calc(calc(100vw - 17px) / 2 - 1080px / 2));
        display: grid;
        width: calc(calc(160vw - 20px) / 2 + 24px);
        grid: 6% 28% min-content auto / 31% 18% auto;
        gap: 24px;
    }
}

@media only screen and (min-width: 992px) {
    .logo {
        display: flex;
        justify-content: center;
    }

    .header__bottom.sticky .logo-gradient {
        text-align: center;
    }
}

@media only screen and (max-width: 992px) {
    .align-side-layout .card {
        width: 340px;
    }

    .carousel-item {
        flex: 0 0 250px;
    }

    .banner-description {
        left: 15%;
        transform: translate(0%, -22%);
    }

    .faq__thumb {
        background-position: 80% 0px;
        display: block;
    }

    .achievement__wrapper {
        width: 100%;
    }

    .achievement__item {
        padding-right: 0 !important;
        float: left;
        width: 33.3%;
    }

    .about__thumb {
        display: none;
    }

    .about__content p {
        color: #000;
    }

    .service__area,
    .sales__area,
    .globals-01,
    .bpo__wk__area,
    .ec__site_area,
    .privacy__policy__area {
        padding-bottom: 50px;
    }

    .ec__site_area {
        padding-top: 0px;
        padding-bottom: 80px;
    }

    .temp__human__resource_area {
        padding-bottom: 80px;
    }

    .temp__human__resource_area,
    .temp__quality__table__area,
    .achievement__area,
    .staff__follow_up__area {
        padding-top: 50px;
    }

    .question__lists__area,
    .faq__area,
    .case__area,
    .globals__area,
    .globals-02,
    .services__area {
        padding-top: 0px;
        padding-bottom: 0px;
        background: none !important;
    }

    .slick-prev {
        left: 45% !important;
    }

    .slick-next {
        right: 45% !important;
    }

    .temp__human__resource_area {
        background: none !important;
    }

    .about__content.pt-50 {
        padding-top: 0px;
    }

    .impact__area.mt-100 {
        margin-top: 0px;
    }

    .impact__area {
        padding-bottom: 50px;
    }

    .unified .header-gradient-bg,
    .contact__form.header-gradient-bg {
        top: 85%;
    }

    .social-monitoring .header-gradient-bg {
        top: 73%;
    }

    .contact_center .header-gradient-bg {
        top: 60%;
    }

    .inbound.pt-100,
    .impact__area.pt-100 {
        padding-top: 50px;
    }

    .bg__growth__content {
        padding-top: 200px;
    }

    .impact__area__content {
        margin-top: 0px;
    }

    .stories-title {
        width: auto;
    }

    .paragraph-show-pc {
        display: none;
    }

    .paragraph-show-sp {
        display: block;
        padding: 50px 0 0;
    }

    .footer-mrgn.pt-55 {
        padding-top: 0;
    }

    /* .footer.row {
        gap: 0;
    } */
    /* .footer__links {
        gap: 50px;
    } */
}

@media only screen and (max-width: 978px) {
    .globals-bg2 div {
        display: block;
        text-align: center;
    }
}

@media (min-width: 600px) {

    .news-post,
    .align-side-layout {
        grid: auto min-content / repeat(2, 1fr);
    }

    .align-side-layout .card a .cardContent {
        min-height: 290px;
    }

    .news-post-list {
        --rowLayoutGapMedium: 48px;
        --rowLayoutGapLarge: var(--rowLayoutGapMedium);
        --rowLayoutGapXLarge: var(--rowLayoutGapMedium);
        --rowLayoutGapXXLarge: 64px;
    }
}

@media (max-width: 900px) {
    .stories-slider-main article {
        background-size: 195%;
    }

    .stories-slider-main article:hover {
        background-size: 185%;
    }

    /* .footer__links {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    } */
}

@media (min-width: 900px) {
    .impact-grid {
        position: relative;
        top: 90px;
        left: 0;
        grid-template-columns: repeat(3, 200px);
        bottom: 50px;
    }

    .RowLayout {
        --rowLayoutGapLarge: 64px;
        --rowLayoutGapXLarge: 96px;
        --rowLayoutGapXXLarge: 128px;
    }

    .impact-second-section-layout[data-columns="1,1,1,1"] {
        grid-template-columns: repeat(4, 1fr);
    }

    .impact-grid .impact-grid-study-card:nth-child(3n+3) {
        top: 35px;
    }

    .impact-grid .impact-grid-study-card:nth-child(3n+2) {
        top: -60px;
    }

    .CustomersCaseStudyCard__logo.UserLogo {
        max-width: 200px;
        width: 100%;
    }

    /* .career-graphic__layout {
        grid: 60px 26px 158px 120px 160px 32px / 72px 208px 72px 120px 72px 208px;
        width: calc(var(--jobsHeroGraphicWidth) + var(--jobsHeroHorizontalShadowPadding));
        padding: 0 var(--jobsHeroHorizontalShadowPadding) 40px;
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
        --jobsHeroGraphicWidth: var(--windowWidth) / 2;
    } */
    .career-graphic__layout>:first-child {
        grid-column: 1 / 3;
        grid-row: 2 / 4;
    }

    .career-graphic__layout>:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1 / 4;
    }

    .career-graphic__layout>:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 2 / 4;
    }

    .career-graphic__layout>:nth-child(4) {
        grid-column: 1 / 4;
        grid-row: 4 / 4;
    }

    .career-graphic__layout>:nth-child(5) {
        grid-column: 4 / 6;
        grid-row: 4 / 6;
    }

    .career-graphic__layout>:nth-child(6) {
        grid-column: 2 / 4;
        grid-row: 5 / 7;
    }

    .news-post {
        grid: auto / 1fr 2fr 1fr;
    }

    .column-layout[data-columns="1,3"] {
        grid-template-columns: 1fr minmax(0, 3fr);
    }

    .stories-slider-main article {
        background-size: 195%;
    }

    .stories-slider-main article:hover {
        background-size: 185%;
    }
}

@media screen and (min-width: 841px) {
    .tempscheme-sp {
        display: none;
    }
}

@media only screen and (max-width: 840px) {

    .tempscheme,
    .tempsche-arw {
        display: none;
    }

    td.tempqua-tbl-l,
    td.tempqua-tbl-c,
    td.tempqua-tbl-r {
        font-size: 12px;
    }

    .csr-in>div {
        padding: 1em;
    }

    .csr-in-txt {
        width: 70%;
    }

    .csr-in-img {
        width: 30%;
    }

    .user-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .banner-description h1 {
        font-size: 50px;
    }

    /* .footer__links {
        gap: 40px;
    } */
}

@media only screen and (max-width: 790px) {
    .tempstaff-ex-in>div {
        width: 100%;
        margin: 0 auto 1em auto;
    }

    .contactform th,
    .contactform td,
    .contactform tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 768px) {
    .carousel-item {
        flex: 0 0 200px;
    }

    .header__bottom-2 {
        padding: 0;
    }

    .banner-description {
        left: 15%;
        transform: translate(0%, -30%);
        width: 71%;
    }

    .banner-description span {
        font-size: 16px;
    }

    .banner-description p {
        font-size: 14px;
    }

    .fv-header .banner {
        height: 87vw;
    }

    .banner video {
        width: 160%;
    }

    .hide-br {
        display: none;
    }

    .faq__thumb {
        display: none;
    }

    .footer__social {
        margin-top: 0;
    }

    /* .achievement__item {
        width: 20%;
    } */
    /* .pt-200 {
        padding-top: 100px;
    }
    .pb-150 {
        padding-bottom: 100px;
    } */
    .affiliate__area .grid-3>.grid-item {
        width: 49.333333%;
    }

    .services__thumb {
        display: none;
    }

    .sp-tbl {
        display: block;
        width: 100%;
    }

    .sp-tbl tbody,
    .sp-tbl tr,
    .sp-tbl td {
        display: block;
        width: 100%;
        text-align: center;
    }

    .sp-tbl-img {
        width: 80%;
    }

    .sp-tbl-img img {
        width: 80%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .services__area {
        padding-top: 100px;
        padding-bottom: 0px;
    }

    .bpo__wk__area {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .total__ec__support {
        padding-top: 0px;
    }

    .total__ec__support .about__content {
        padding-top: 0px;
    }

    .about__content.pt-100 {
        padding-top: 0px;
    }

    .temp__human__resource_area {
        padding-bottom: 50px;
    }

    .staff__follow_up__area {
        padding-bottom: 50px;
    }

    .service__area {
        padding-top: 100px;
        padding-bottom: 0px;
    }

    .sales__area {
        padding-bottom: 0px;
    }

    .globals__area {
        padding-top: 100px;
        padding-bottom: 50px;
        background: none !important;
    }

    .about__content {
        margin-top: 0px;
    }

    .services__area.data-mining,
    .services__area.foreign-lang,
    .contact__services__area,
    .form__communication__area,
    .privacy__policy__content,
    .privacy__policy__content2 {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    .service__area.contact_center,
    .service__area.unified {
        padding-bottom: 50px;
    }

    .csr-in-img>img,
    .csr-in-txt {
        width: 80%;
    }

    .impact-second-section-layout {
        display: inline !important;
    }

    .bg__growth__content {
        padding-top: 250px;
    }

    .news-header h1 {
        color: #0a2540;
        letter-spacing: 0.6px;
        padding: 0;
        line-height: 17px;
    }

    .align-side-layout .card .cardBackground img {
        width: 200%;
    }

    .align-side-layout {
        margin-left: -60px;
    }

    .align-side-layout .card {
        width: 310px;
    }

    .thinking-sec-img {
        display: flex;
        justify-content: center;
        padding: 0 20px 0 20px;
    }

    .paragraph-show-pc {
        display: block;
    }

    .paragraph-show-sp {
        display: none;
        padding-top: 0;
    }

    .footer-mrgn.ml-50 {
        margin-left: 0;
    }

    .footer-mrgn.pt-55 {
        padding-top: 0;
    }

    .about_newsroom_row {
        display: block;
    }

    .footer__widget-title .logo {
        text-align: center;
    }
}

@media only screen and (max-width: 750px) {

    .threesv,
    .temp-summary,
    .tempstaff-ex-in,
    .temp-rec-tbl01 {
        display: block;
    }

    .section__title h2 span {
        padding-top: 20px;
    }
}

@media (min-width: 600px) {

    .List[data-column-count="2"] .List__list,
    .List[data-column-count="3"] .List__list {
        --columnCount: 2;
    }

    .impact-second-section-layout[data-columns="1,1,1"],
    .impact-second-section-layout[data-columns="1,1,1,1"],
    .impact-second-section-layout[data-columns="2,1"],
    .impact-second-section-layout[data-columns="2,1,0"],
    .impact-second-section-layout[data-columns="2,1,1"],
    .impact-second-section-layout[data-columns="2,2"],
    .impact-second-section-layout[data-columns="3,2"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .CustomersUseCaseGridLayout .impact-grid-study-card:nth-of-type(6) {
        grid-row: 3 / span 2;
        grid-column: 2;
    }

    .CustomersUseCaseGridLayout .impact-grid-study-card:first-of-type .impact-grid-study-card-background,
    .CustomersUseCaseGridLayout .impact-grid-study-card:nth-of-type(6) .impact-grid-study-card-background {
        --customersCaseStudyCardBackgroundImageDisplay: none;
        --customersCaseStudyCardBackgroundPortraitImageDisplay: block;
    }

    .CustomersUseCaseGridLayout .impact-grid-study-card:first-of-type {
        grid-row: 1 / span 2;
    }

    .CustomersUseCaseGridLayout {
        grid-template-columns: repeat(2, 1fr);
    }

    .CustomersUseCasesGrid__layoutContainer {
        margin-top: 80px;
    }

    .RowLayout {
        --rowLayoutGapMedium: 48px;
        --rowLayoutGapLarge: 64px;
        --rowLayoutGapXLarge: 96px;
        --rowLayoutGapXXLarge: 64px;
    }

    .career-card {
        max-width: var(--cardMaxWidthTablet, var(--cardMaxWidth));
    }

    .career-graphic__layout {
        grid: 8% 30% min-content 25% auto / 20% 11% 25% 27% auto;
    }

    .career-graphic__layout>:first-child {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .career-graphic__layout>:nth-child(2) {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
    }

    .career-graphic__layout>:nth-child(3) {
        grid-column: 4 / 6;
        grid-row: 2;
    }

    .career-graphic__layout>:nth-child(4) {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .career-graphic__layout>:nth-child(5) {
        grid-column: 4;
        grid-row: 3 / 5;
    }

    .career-graphic__layout>:nth-child(6) {
        grid-column: 2 / 4;
        grid-row: 4 / 6;
    }

    .career-card-carousel {
        max-width: calc(calc(1080px*0.25)* 2);
        margin: 0 auto;
    }

    .career-card-carousel-modal-background {
        display: none;
    }

    .career-card-carousel__card-list {
        min-height: 206px;
    }

    .CareerCard.career-card {
        grid: auto / auto 150px;
        min-height: 196px;
    }

    .career-card-carousel__card-list .CareerCard:not(.MediaCardCarousel__backgroundCard) {
        transform-origin: center calc(100% + 96px);
        bottom: 0;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .impact-grid {
        top: 40px;
        margin: 0 0 -130px;
        grid: repeat(2, 1fr) / repeat(3, 1fr);
    }

    .news-post figure {
        margin: 0 16px;
        grid-area: 1 / 2 / span 2 / 2;
    }
}

@media only screen and (max-width: 600px) {
    .align-side-layout {
        display: block;
        margin-left: 0;
        width: 100%;
        padding: 15px;
    }

    .align-side-layout .card {
        width: 100%;
    }

    .align-layout-left {
        padding-bottom: 30px;
    }

    .achievement__thumb img {
        width: 100%;
    }

    .expart__area {
        padding-top: 20px;
    }

    .features__content-left p,
    .faq__wrapper p {
        padding-right: 0px;
    }

    /* .footer__links {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        grid-template-columns: 1fr;
        gap: 20px;
    } */
    /* .pb-120 {
        padding-bottom: 50px;
    } */
    /* .pt-115 {
        padding-top: 65px;
    } */
    /* .pt-135 {
        padding-top: 65px;
    } */
    .banner-description {
        left: 7%;
        transform: translate(0%, -30%);
        width: 80%;
    }

    .achievement__item {
        padding-right: 0 !important;
        float: left;
        width: 45%;
    }

    .banner-description h1 {
        font-size: 45px;
    }

    .affiliate__area .grid-3>.grid-item {
        width: 100%;
    }

    .social__media .grid-3>.grid-item {
        width: 100%;
    }

    .service__area .header-gradient-bg {
        top: 35%;
        clip-path: polygon(-13% 76%, 236% 0%, 105% 60%, -22% 99%);
    }

    /* .slick-prev {
        left: 80% !important;
    } */
    .box {
        min-height: 370px;
    }

    .impact-grid-study-card.variant--minimal {
        height: auto;
        padding-bottom: 90%;
        width: 100%;
    }

    .pt-200 {
        padding-top: 100px;
    }

    .impact-case-study-carousel {
        display: none;
    }

    .bg__growth__content {
        padding-top: 50px;
    }

    .stories-slider-main article {
        background-size: 195%;
    }

    .stories-slider-main article:hover {
        background-size: 185%;
    }

    .stories {
        padding: 55px 15px;
    }

    .stories-slider-nav {
        display: none !important;
    }

    .news-header {
        order: 1;
    }

    .news-date {
        order: 2;
    }

    .news-date:before {
        display: none;
    }

    .news-header h1 {
        padding-left: 15px;
        line-height: 28px;
    }

    .news-post figure {
        order: 3;
        padding-left: 15px;
        padding-top: 15px;
    }

    .SlantBlueLeft {
        width: 100px;
    }

    .SlantVioletLeft {
        width: 180px;
    }

    .SlantBlueRight {
        width: 100px;
    }

    .SlantVioletRight {
        width: 180px;
    }

    .sub-links-container {
        display: block;
    }

    .footer-mrgn {
        text-align: center;
    }

    .footer__links ul.sub-links>li {
        display: block;
    }

}

@media (max-width: 599px) {
    .impact-grid {
        padding: 24px 16px 24px 0;
        grid: 1fr / repeat(2, 50%);
    }

    .career-graphic__layout>:nth-child(3),
    .career-graphic__layout>:nth-child(5) {
        display: none;
    }

    .career-card__thumbnail {
        display: none;
    }
}

@media screen and (min-width: 578px) and (max-width: 991px) {
    .services__item {
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .services__area .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .services__item {
        text-align: center;
        /* padding-right: 0px; */
    }

    .sales__area {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .section__title h2 {
        font-size: 50px;
    }

    .footer__social {
        margin-top: 0;
    }
}

@media screen and (min-width: 541px) {
    .sdgs-tbl-sp {
        display: none;
    }
}

@media screen and (max-width: 540px) {

    .sp-tbl td,
    .sp-root td {
        display: block;
    }

    .sub_ttl,
    .sp-root {
        padding: 20px;
        text-align: center;
        margin-bottom: 0px;
    }

    .sp-root td {
        padding: 1em;
    }

    .sdgs-tbl-pc {
        display: none;
    }

    .csr-in-img,
    .csr-in-txt {
        width: 100%;
    }

    .csr-in {
        display: block;
    }

    .vltr-in-img {
        flex-wrap: wrap;
    }

    .vltr-in-img>div {
        width: 50%;
        padding: 1em;
    }

    .esg-img img,
    .csr-in-img img {
        width: 300px;
    }

    .banner-description h1 {
        font-size: 35px;
    }
}

@media (min-width: 450px) {
    .CareerCard__content {
        order: -1;
    }
}

@media only screen and (max-width: 430px) {
    .achievement__item {
        padding-right: 0 !important;
        width: 18%;
    }

    .carousel-item {
        flex: 0 0 100%;
    }

    .carousel-wrapper {
        width: 100%;
    }

    .sales__area {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .slick-prev {
        left: 37% !important;
    }

    .slick-next {
        right: 37% !important;
    }

    .SlantBlueLeft {
        width: 60px;
    }

    .SlantVioletLeft {
        width: 140px;
    }

    .SlantBlueRight {
        width: 60px;
    }

    .SlantVioletRight {
        width: 140px;
    }
}

@media only screen and (max-width: 400px) {

    .section__title h2,
    .section__title-3 h2 {
        font-size: 32px !important;
    }

    .custom__h2 h2 {
        font-size: 26px !important;
    }

    .temp__quality__table__area {
        padding-bottom: 20px;
    }

    .sales__area {
        padding-bottom: 0px;
    }

    .globals__area {
        padding-top: 50px;
    }

    /* .about__content p {
        margin-bottom: 0px;
    } */
    .ec__site_area {
        padding-bottom: 30px;
    }

    .b-btns {
        padding-top: 32px;
    }

    .impact-title-side-btns {
        padding-top: 32px;
    }

    .career-title-side-btn {
        padding-top: 32px;
    }
}

@media only screen and (max-width: 400px) {
    .banner-description h1 {
        font-size: 25px;
    }
}


/* RESTRUCTURED */
.hero__title h1 {
    font-size: 50px;
}

.hero__subtitle {
    font-size: 16px;
    padding-right: 120px;
    /* margin-top: 30px; */
}

/* Primary button */
.hero__area .header-gradient-bg {
    height: 100%;
    clip-path: polygon(0% 75%, 180% 1%, 100% 60%, 0% 100%);
    top: 50%;
}

.hero__area .header-gradient-bg:before {
    content: "";
    clip-path: polygon(70% 75%, 50% 90%, 50% 100%, 0% 100%);
}

.hero__area .header-gradient-bg {
    top: -5%;
}

.hero__cta-wrap {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.service__cta-wrap {
    display: flex;
    gap: 15px;
    align-self: center;
    justify-content: center;
}

.service__cta-wrap .btn--ghost {
    color: #fff !important;
    border-color: #fff !important;
}

.service__cta-wrap .fa-long-arrow-left,
.service__cta-wrap .fa-arrow-left {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

.btn--primary {
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    display: inline-block;
    transition: 0.3s;
}

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

.btn--ghost {
    border-color: var(--primary-color);
    color: var(--primary-color);
    padding: 12px 28px;
    border-radius: 6px;
    /* margin-left: 10px; */
    display: inline-block;
    transition: 0.3s;
}

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

.btn--primary i,
.btn--ghost i {
    margin-left: 8px;
}

.entry-tile,
.service-card,
.about-telenet-card {
    padding: 40px 25px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    transition: all 0.35s ease;
    border: 1px solid #eee;
    height: 100%;
}

.entry-tile:hover,
.service-card:hover,
.about-telenet-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.entry-tile img,
.service-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 20px;
}

.news-card {
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    height: 100%;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.news-card__category {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    background: #eaf6fb;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.news-card__date {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

.regions-teaser {
    background: #f8fafc;
}

.region-card {
    padding: 40px 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
}

.region-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.region-badge {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    letter-spacing: 1px;
}

.history .timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.history .timeline .timeline__item {
    width: 100%;
    /* max-width: 700px; */
    display: flex;
    gap: 2rem;
    background: #1F4072;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    color: #fff;
}

.history .timeline .timeline__item {
    display: flex;
    column-gap: 2rem;
    align-items: center;
    background-color: var(--primary-color);
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    transition: .3s ease;
}

.timeline__year {
    font-size: 1.40rem;
    line-height: 1.25rem;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    color: rgba(232, 241, 245, 0.561);
    letter-spacing: .1rem;
}

.timeline__item p {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 500;
    color: #fff;
}

.timeline__item .brief-desc {
    display: flex;
    flex-flow: column;
    gap: .5rem;
}

.compliance-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

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

.compliance-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 15px;
    font-size: 16px;
}

.compliance-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #1196c7;
    font-weight: bold;
}

.compliance-logos {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.compliance-logos img {
    max-height: 70px;
    opacity: 0.85;
    transition: 0.3s ease;
}

.compliance-logos img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Card container */
.leader-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 16px;
    transition: 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

/* Hover effect */
.leader-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Image wrapper */
.leader-img {
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
}

/* Image */
.leader-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text */
.leader-card h5 {
    margin-bottom: 5px;
    font-weight: 600;
}

.leader-card p {
    font-size: 14px;
    color: #777;
    margin: 0;
}

.continue-btn button {
    display: inline;
    float: right;
    margin: 15px auto 0;
    border: 0px;
    background: var(--primary-color);
    border-radius: 3px;
    padding: 8px 15px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

.esg-pillars .row {
    display: flex;
    flex-wrap: wrap;
}

.esg-card {
    height: 100%;
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

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

.page-hero h2 {
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 20px;
}

.page-hero p {
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.85;
}

.sidebar__contact__page {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border-top: 4px solid #1196c7;
}

.sidebar__contact__page h4 {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
}

.cta__content h1 {
    font-size: 40px;
    color: #ffffff;
    font-weight: 900;
    margin-bottom: 0 !important;
}

#form-step-2 button {
    padding: 5px 15px;
}

.role-card {
    background: #fff;
    padding: 45px 30px;
    border-radius: 14px;
    height: 100%;
    transition: all 0.35s ease;
    border: 1px solid #f1f1f1;
    position: relative;
    overflow: hidden;
}

.role-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.role-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--primary-color);
    transition: 0.4s ease;
}

.role-card:hover::before {
    width: 100%;
}

.role-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-svg {
    width: 34px;
    height: 34px;
    color: #fff;
}

.role-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #111;
}

.role-text {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    max-width: 260px;
    margin: 0 auto;
}

.group-mission {
    background: #fff;
}

.mission-box {
    padding: 60px 50px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    position: relative;
}

.mission-heading {
    font-size: 28px;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
    margin-bottom: 25px;
}

.mission-divider {
    width: 100px;
    height: 2px;
    background: var(--primary-color);
    margin: 0 auto 30px auto;
    border-radius: 10px;
}

.mission-text {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 18px;
}

.mission-highlight {
    margin-top: 25px;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* GRID */
.group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.group-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 40px;
    transition: 0.25s ease;
    position: relative;
}

.group-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    background: #fafafa;
}

/* COUNTRY TAG */
.group-company-image {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin-bottom: 20px;
}

.group-country {
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* NAME */
.group-name {
    font-size: 14px;
    font-weight: 700;
    color: #525151;
    margin-bottom: 12px;
}

/* INFO */
.group-info {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* LINK */
.group-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

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

/* GRID */
.offices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.offices-grid.usa {
    display: grid;
    grid-template-columns: repeat(auto-fit, 350px);
    justify-content: center;
    gap: 30px;
}

/* CARD */
.office-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    transition: 0.25s ease;
    padding: 20px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.office-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* IMAGE */
.office-image {
    /* height: 160px; */
    /* overflow: hidden; */
    text-align: center;
}

.office-image img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    transition: 0.4s ease;
}

.office-card:hover .office-image img {
    transform: scale(1.05);
}

/* BODY */
.office-body {
    padding: 18px;
}

.office-body h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111;
}

.office-body p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* PHONE */
.office-phone {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.country-office {
    font-weight: normal;
    color: #686777;
    margin-bottom: 15px;
    line-height: 24px;
}

.omotenashi-image {
    text-align: center;
}

.omotenashi-image img {
    width: 100%;
    max-width: 480px;
    border-radius: 14px;
    object-fit: cover;
}


.quality-card {
    background: #fff;
    padding: 30px 24px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid #eee;
    transition: 0.25s ease;
    height: 100%;
}

.quality-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality-svg {
    width: 40px;
    height: 40px;
    color: #fff;
}

.our-strength {
    border-radius: 5%;
}

.quality-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.quality-icon {
    font-size: 30px;
    margin-bottom: 15px;
}

.ai-content h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* WRAPPER */
.ai-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* FLOW (horizontal) */
.ai-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* BOX */
.ai-box {
    width: 300px;
    padding: 22px 18px;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    border: 1px solid #eee;
    transition: 0.3s ease;
}

.ai-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

/* ICON */
.ai-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

/* HUMAN / TECH COLORS */
.ai-box.human .ai-icon {
    background: var(--primary-color);
}

.ai-box.human .ai-svg {
    fill: #fff;
}

.ai-box.tech .ai-icon {
    background: var(--primary-color);
}

.ai-box.tech .ai-svg {
    fill: #fff;
}

/* TEXT */
.ai-box span {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.ai-box p {
    font-size: 13px;
    color: var(--primary-color);
}

/* CONNECTOR */
.ai-connector span {
    font-size: 20px;
    color: #aaa;
    font-weight: 600;
}

/* RESULT (clean label, not button) */
.ai-result {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    position: relative;
    padding-top: 15px;
}

.ai-result::before {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background: var(--primary-color);
    margin: 0 auto 10px;
}

/* CARD */
.op-card {
    padding: 28px 22px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;
    text-align: center;
    transition: 0.3s ease;
    height: 100%;
}

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

/* ICON */
.op-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-svg {
    width: 26px;
    height: 26px;
    fill: #fff;
}

.op-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.op-card p {
    line-height: 1.6;
}

.op-summary {
    line-height: 1.7;
    position: relative;
    padding-top: 20px;
}

.op-summary::before {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background: var(--primary-color);
    margin: 0 auto 12px;
}

.board-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* TOP */
.tree-top {
    display: flex;
    justify-content: center;
}

/* CONNECTOR LINE */
.tree-line {
    margin: 20px 0;
}

/* ROWS */
.tree-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.ceo-message-card {
    /* background: #fff; */
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
}

.ceo-image {
    width: 100%;
    border-radius: 10px;
}

/* CARD */
.director-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    text-align: center;
    padding: 15px;
    transition: 0.3s;
}

.director-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* IMAGE */
.director-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* TEXT */
.director-card h4 {
    font-size: 15px;
    margin: 5px 0;
}

.director-card span {
    font-size: 13px;
    color: #555;
    display: block;
}

.director-card small {
    font-size: 12px;
    color: var(--primary-color);
    margin-top: 5px;
    display: block;
}

/* COUNTRY TITLE */
.country-title {
    margin-bottom: 20px;
}

/* CARD */
.exec-card {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 16px;
    transition: 0.3s ease;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* hover */
.exec-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* IMAGE */
.exec-card img {
    width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* NAME */
.exec-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #222;
}

/* POSITION */
.exec-card span {
    font-size: 13px;
    color: #777;
}

.tn-grid-wrapper {
    display: contents;
}

.tn-profile-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 14px;
    text-align: center;
    height: 100%;
    transition: 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.tn-profile-card:hover {
    transform: translateY(-5px);
}

.tn-profile-card img {
    width: 200px;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 14px;
}

.tn-profile-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111111;
}

.tn-profile-position {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
}

.tn-profile-company {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #999999;
}

.tn-executive.g-3 {
    row-gap: 30px;
}


.quality-box {
    background: #f7f7f7;
    padding: 40px;
    border-radius: 16px;
}

.quality-item {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.quality-item:last-child {
    border-bottom: none;
}

.quality-item h4 {
    font-weight: 700;
    margin-bottom: 8px;
    color: #222;
}

.quality-item p {
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.security-box {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
}

.security-item {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.security-item:last-child {
    border-bottom: none;
}

.security-item h4 {
    font-weight: 700;
    margin-bottom: 8px;
    color: #222;
}

.security-item p {
    color: #666;
    line-height: 1.6;
}

.contact_services .service-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.contact_services .service-card:hover {
    transform: translateY(-6px);
    border-color: #eaeaea;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
}

.contact_services .service-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
}

.contact_services .service-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* spacing improvement */
.contact_services {
    margin-top: 20px;
}


.bck-btn.contact-btn>button,
.con-btn.contact-btn>button {
    margin: 0 !important;
}


.site-footer {
    background: #ffffff;
    padding: 60px 0 30px;
    border-top: 1px solid #eaeaea;
    font-family: 'Lato', sans-serif;
}

#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.toast {
  min-width: 250px;
  margin-bottom: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.success {
  background: #28a745;
}

.toast.error {
  background: #dc3545;
}

/* Main wrapper */
.footer-grid {
    display: flex;
    flex-direction: column;
}

/* Logo row */
.footer-logo {
    max-width: 180px;
    flex-shrink: 0;
}

/* Description + Links row */
.footer-content-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;

    padding-bottom: 20px;
    /* margin-bottom: 15px; */
    /* border-bottom: 1px solid #eaeaea; */
}

.footer-gc-links .footer__widget-title h4 {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: unset !important;
}

.footer-gc-links .footer__widget-title h4::before,
.footer-gc-links .footer__widget-title h4::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

/* Description */
.footer-about {
    width: 570px;
    display: flex;
    align-items: center;
    /* vertical alignment */
    gap: 10px;
    border-right: 1px solid #eaeaea;
    padding-right: 5px;
}

.footer-about p {
    margin: 0;
    color: #555;
    line-height: 1.7;
    font-size: 15px;
}

/* Links */
.footer-links {
    flex: 1;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 18px;
}

/* Horizontal links */
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
}

.footer-links ul li {
    margin: 0;
}

.footer-links ul li a {
    text-decoration: none;
    color: #444;
    font-size: 15px;
    transition: 0.3s;
}

.footer-links ul li a:hover {
    color: #1196c7;
}

/* Group Companies (for future use) */
.footer-gc-links {
    border-bottom: 1px solid #eaeaea;
}

.footer-gc-links ul {
    list-style: none;
    padding: 0;
    margin: 30px 0;

    display: flex;
    flex-wrap: wrap;
    gap: 10px 45px;
    /* padding-bottom: 20px; */
}

.footer-gc-links .footer__widget-title {
    align-items: center;
    text-align: center;
}

/* Copyright */
.footer-bottom {
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #777;
}

.history__title>h2 {
    margin-bottom: 20px !important;
}

.global-locations .map-grid {
    padding-top: 20px;
    display: flex;
    gap: 0;
    /* remove gap so borders act as separators */
    align-items: stretch;
}

/* LEFT MAP */
.global-locations .map-left {
    flex: 2;
    padding-right: 15px;
    border-right: 2px solid #e5e7eb;
    /* gray separator */
}

.global-locations .map-left img {
    /* width: 100%;
  height: 100%; */
    object-fit: cover;
    border-radius: 12px;
}

/* RIGHT COLUMN */
.global-locations .map-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* TOP RIGHT MAP (Map 1) */
.global-locations .map-top {
    padding-bottom: 15px;
    border-bottom: 2px solid #e5e7eb;
    /* separator line */
}

.global-locations .map-bottom {
    padding-top: 15px;
}

/* IMAGES */
.global-locations .map-right img {
    /* width: 100%;
  height: 100%; */
    padding-left: 20px;
    object-fit: cover;
    border-radius: 12px;
}

.ai-human {
    align-items: center;
}

.ai-content {
    padding-right: 40px;
}

.ai-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.ai-box {
    width: 100%;
    max-width: 420px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-connector {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-connector span {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.ai-result {
    margin-top: 30px;
    text-align: center;
}

/* Location accordion */
.image-panel {
    flex: 1;
    min-height: 500px;
    transition: background 0.6s ease-in-out;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.acc-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 20px;
    margin-top: 120px;
}

.container-acc {
    display: flex;
    width: 100%;
    max-width: 1100px;
    background-color: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.accordion-panel {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #0b2641;
}

.accordion-panel h2 {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    padding-bottom: 30px;
}

.accordion-item {
    border-bottom: 1px solid #e5e7eb8c;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s ease;
    float: unset;
}

.accordion-header p {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 0;
    font-weight: 300;
}

.accordion-header b {
    font-size: 1.4rem;
    color: #fff;
    padding-right: 20px;
    font-weight: bold;
}

.accordion-header:hover {
    color: #fff;
}

.icon {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.3s ease;
    user-select: none;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
}

.accordion-content p {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 24px;
    color: #fff;
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 300;
}

.accordion-item.active .icon {
    transform: rotate(45deg);
}

.accordion-content img {
    display: none;
}

.mobile-break {
    display: none;
}

/* RESPONSIVE */
@media (max-width: 1420px) {
    .about-header-grid-image {
        gap: 1rem;
        grid-template-columns: none !important;
    }

    .footer-about {
        width: 500px;
    }

    .footer-gc-links ul {
        gap: 10px 30px;
    }
}

@media (max-width: 1260px) {
    .about-header-grid-image {
        display: none !important;
    }

    #about__head__area .col-xl-6.col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .about__content__1 {
        /* max-width: 800px; */
        margin: 0 auto;
        text-align: center;
    }

    .about__content__1 p {
        max-width: unset !important;
    }

    .about__content__1 .section__title-3 {
        text-align: center;
    }

    .about__content__1 .about-btn {
        margin-top: 20px;
    }

    .about__content__1 .about-btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .footer-about {
        width: 720px;
    }

    .footer-content-row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }

    .footer-links ul {
        gap: 10px 25px;
    }

    .footer-gc-links ul {
        gap: 10px 20px;
    }

    .footer-about,
    .footer-links {
        border-right: none;
    }

    .slick-prev {
        left: 45% !important;
    }

    .slick-next {
        right: 45% !important;
    }
}

@media (max-width: 1024px) {

    .quality.g-4,
    .ai-human.g-4,
    .operations-philosophy.g-4,
    .board-directors.g-4 {
        gap: 20px;
    }

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

    .footer-bottom {
        text-align: left;
    }

    .footer-links ul {
        grid-template-columns: 1fr !important;
    }

    .slick-prev {
        left: 45% !important;
    }

    .slick-next {
        right: 45% !important;
    }
}

/* RESPONSIVE */
@media (max-width: 992px) {

    .holding-role-cards {
        row-gap: 20px;
    }

    .mission-heading {
        font-size: 16px;
        font-weight: 400;
    }

    .mission-text {
        font-size: 14px;
        text-align: center;
    }

    .offices-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .global-locations .map-left img {
        width: 100%;
        height: 100%;
    }

    .global-locations .map-right img {
        padding-left: 0;
        width: 100%;
        height: 100%;
    }

    .global-locations .map-left {
        flex: 1.2;
        padding-right: 10px;
    }

    .global-locations .map-right {
        flex: 1;
    }

    .accordion-content img {
        display: block;
        width: 100%;
        margin-bottom: 15px;
        border-radius: 8px;
    }

    .overview-card {
        padding: 40px 40px;
    }

    .row-item {
        grid-template-columns: 140px 1fr;
        gap: 25px;
    }

    .history__title h2 {
        font-size: 30px;
    }

    .footer-about {
        width: 700px;
    }

    .footer-logo {
        max-width: 150px;
    }

    .footer-links ul,
    .footer-gc-links ul {
        gap: 10px 15px;
    }

    .slick-prev {
        left: 45% !important;
    }

    .slick-next {
        right: 45% !important;
    }
}


@media (max-width: 768px) {

    .hero__area.pb-200,
    .hero__area.pb-100 {
        padding-bottom: 0 !important;
    }

    .compliance-box {
        padding: 25px;
        text-align: center;
    }

    .compliance-list li {
        padding-left: 0;
    }

    .compliance-list li::before {
        display: none;
    }

    .compliance-logos {
        margin-top: 20px;
    }

    .leadership-photo {
        margin: auto;
        display: block;
    }

    .page-hero h1 {
        font-size: 32px;
    }

    .page-hero h2 {
        font-size: 16px;
    }

    .page-hero p {
        font-size: 14px;
    }

    .btn--ghost.service-btn {
        color: var(--primary-color) !important;
        display: inline-block;
        transition: 0.3s;
        background-color: #fff !important;
    }

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

    .core-values {
        margin-top: 20px;
    }

    .core-values.offset-lg-1 {
        padding-left: 0 !important;
    }

    .ai-flow {
        flex-direction: column;
    }

    .ai-connector {
        transform: rotate(0deg);
        margin: 5px 0;
    }

    .tree-row {
        flex-direction: column;
        align-items: center;
    }

    .director-card {
        width: 100%;
        max-width: 320px;
    }

    .tn-profile-card {
        padding: 14px 10px;
    }

    .tn-profile-card img {
        width: 150px;
        height: 150px;
    }

    .tn-profile-card h5 {
        font-size: 14px;
    }

    .tn-profile-position,
    .tn-profile-company {
        font-size: 11px;
    }

    .global-locations .map-grid {
        flex-direction: column;
    }

    .global-locations .map-left {
        border-right: none;
        padding-right: 0;
        padding-bottom: 15px;
        border-bottom: 2px solid #e5e7eb;
        /* separator after left map */
    }

    .global-locations .map-top {
        border-bottom: 2px solid #e5e7eb;
    }

    .global-locations .map-bottom {
        padding-top: 15px;
    }

    .ai-content {
        text-align: center;
    }

    .ai-content {
        padding-right: 0 !important;
    }

    .achievement__content p {
        margin-bottom: 0 !important;
    }

    .achievement__wrapper {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
        gap: 20px;
    }

    .achievement__item {
        width: 100%;
        max-width: 250px;
        text-align: center;
    }

    .container-acc {
        display: block;
    }

    .image-panel {
        min-height: 380px;
    }

    .mobile-break {
        display: inline;
    }

    .overview-card {
        padding: 30px 25px;
        border-radius: 12px;
    }

    .row-item {
        grid-template-columns: 1fr;
        gap: 8px;

        padding-bottom: 18px;
    }

    .label {
        font-size: 12px;
        letter-spacing: 0.1em;
    }

    .value {
        font-size: 15px;
        line-height: 1.6;
    }

    .history__title h2 {
        font-size: 26px;
    }

    .footer-about {
        width: 100%;
        border-right: none;
        padding-right: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid #eaeaea;
    }

    .footer-links {
        width: 100%;
    }

    .footer-links ul {
        gap: 10px 20px;
    }

    .footer-gc-links ul {
        gap: 10px 20px;
        margin: 20px 0;
    }

    .slick-prev {
        left: 37% !important;
    }

    .slick-next {
        right: 37% !important;
    }
}


@media only screen and (max-width: 400px) {
    .hero__title h1 {
        font-size: 35px !important;
    }
}

@media only screen and (max-width: 575px) {
    .hero__title h1 {
        font-size: 50px;
    }

    .omotenashi h1 {
        font-size: 30px !important;
    }

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

    .hero__cta-wrap a {
        width: 100%;
        text-align: center;
    }

    .esg-pillars .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .esg-card {
        padding: 25px 20px;
    }

    .esg-card h3 {
        font-size: 18px;
    }

    .esg-card p {
        font-size: 13px;
    }

    .cta__content h1 {
        font-size: 20px !important;
    }

    .accordion-panel h2 {
        font-size: 2rem;
        padding-bottom: 0 !important;
    }

    .image-panel {
        display: none;
    }

    .container-acc {
        display: block;
    }

    .accordion-panel {
        width: 100%;
        padding: 30px 20px;
    }

}

@media (max-width: 575px) {
    .section__title h2 {
        font-size: 50px;
    }

    .banner {
        position: relative;
        min-height: 500px;
        /* 👈 base height but can grow */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .banner video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .banner-description {
        position: relative;
        /* 👈 IMPORTANT: back to normal flow */
        transform: none;
        top: auto;
        left: auto;

        z-index: 2;
        width: 100%;
        padding: 0 20px;
        /* 👈 controls spacing & height */
        text-align: center;
    }

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

    /* .achievement__wrapper {
        align-items: unset;
    } */

    .footer-logo {
        max-width: 140px;
    }

    .footer-about {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .footer-about p {
        font-size: 14px;
        line-height: 1.6;
    }

    .footer-links ul {
        flex-direction: column;
        gap: 12px;
    }

    .footer-gc-links ul {
        flex-direction: column;
        gap: 12px;
    }

    .footer-links ul li,
    .footer-gc-links ul li {
        width: 100%;
    }

    .footer-col h4 {
        font-size: 15px;
    }

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

@media (max-width: 375px) {

    .footer-logo {
        max-width: 120px;
    }

    .footer-about p {
        font-size: 13px;
    }

    .footer-links ul,
    .footer-gc-links ul {
        gap: 10px;
    }
}