header .menu-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
header .menu-item a {
position: relative;
display: inline-block; color: var(--primary-txt-color);
text-decoration: none;
transition: color 0.2s ease;
}
header .menu-item a::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 12px;
height: 12px;
background-color: currentColor;
mask: url(https://bpo.tp-devserver.com/wp-content/uploads/2025/06/Vector.svg) no-repeat center;
-webkit-mask: url(https://bpo.tp-devserver.com/wp-content/uploads/2025/06/Vector.svg) no-repeat center;
mask-size: contain;
-webkit-mask-size: contain;
transform: translateY(-50%);
transition: background-color 0.2s ease;
display: none;
}
header .menu-item a:hover { }
.header-bar {
position: absolute;
left: 0;
width: 100%;
background-color: #000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
z-index: 1000;
padding: 30px 0px;
position: sticky;
top: 0;
margin-bottom: -103px;
}
header .header-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
header .header-bar__logo img {
max-height: 50px;
}
header .header-bar__nav .menu--main {
display: flex;
align-items: center;
gap: 54px;
list-style: none;
margin: 0;
padding: 0;
}
header .header-bar__nav .menu--main li a {
text-decoration: none;
color: var(--primary-txt-color);
font-weight: 500;
font-family: Outfit;
font-weight: 500;
font-size: 20px;
line-height: 117%;
letter-spacing: 0%;
text-transform: capitalize;
&:focus,
&:focus-visible {
outline: none;
}
}
header .header-bar__nav .menu--main li a:hover { } header .header-bar__logo img {
height: 40px;
}  .toggle-container {
display: flex;
justify-content: center;
align-items: center;
} .toggle-checkbox {
display: none;
} .toggle-label {
position: relative;
width: 96px;
height: 36px;
background-color: var(--purple-bg-color-typ1);
border-radius: 99px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.20);
cursor: pointer;
transition: background-color 0.5s ease;
padding: 4px 6px;
margin-bottom: 0;
}
.toggle-slider {
position: absolute;
top: 3px;
right: 6px;
width: 29px;
height: 29px;
background-color: transparent;
border-radius: 50%;
transition: all 0.5s ease;
opacity: 1;
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.20)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.17));
}
.toggle-slider::after {
content: '';
position: absolute;
background: url(https://truperformancedigital.com/wp-content/uploads/2024/10/Handle-2.svg) center center/cover no-repeat;
left: 51%;
top: 61%;
width: 37px;
height: 37px;
transform: translate(-51%, -47%);
transition: background 0.5s ease, opacity 0.3s ease;
}
.toggle-checkbox:checked+.toggle-label {
background-color: #ECEDED;
}
.toggle-checkbox:checked+.toggle-label .toggle-slider {
transform: translateX(-56px);
filter: unset;
box-shadow: none;
}
.toggle-checkbox:checked+.toggle-label .toggle-slider::after {
background: url(https://truperformancedigital.com/wp-content/uploads/2024/10/Handle-3.svg) center center/cover no-repeat;
} header .header-bar__nav .menu--main li a {
display: flex;
align-items: center;
column-gap: 4px;
}
header .wrapper-menu-dropdown--DropheadDesktop {
background: var(--primary-bg-color, #010101);
}
header .wrapper-menu-dropdown--DropheadDesktop .menu-dropdown--DropheadDesktop {
padding: 110px 0px 80px;
}
header .grid-dropdown--DropheadDesktop {
display: flex;
flex-direction: row;
align-items: stretch;
}
header .card-wrraper-content--DropheadDesktop {
display: flex;
flex-direction: row; }
header .card-submenu-list--DropheadDesktop {
padding: 0px 24px 0px 0px;
margin: 0px; border-right: 1px solid #C1C1C1;
display: flex;
flex-direction: column; list-style: none; width: 33.33%;
}
header .block-wrraper-menuDropdownHeader { width: 66.66%;
}
header .card-submenu-list--DropheadDesktop button {
padding: 0px;
outline: none;
background: none;
box-shadow: none;
border: none;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 12px;
color: var(--primary-txt-color, #FFFFFF);
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 1.17;
cursor: default;
&:focus {
outline: none;
box-shadow: none;
border: none;
}
}
header .card-submenu-list--DropheadDesktop button a {
text-decoration: none;
color: var(--primary-txt-color, #FFFFFF);
}
header .card-submenu-list--DropheadDesktop button svg {
transform: rotate(-45deg);
}
header .card-submenu-list--DropheadDesktop button.active-submenu-list--DropheadDesktop {
font-size: 26px; 
font-weight: 600;
}
header .card-submenu-list--DropheadDesktop button.active-submenu-list--DropheadDesktop svg {
width: 40px;
height: 40px; transform: rotate(0deg);
}
header .card-submenu-list--DropheadDesktop button.active-submenu-list--DropheadDesktop svg path {
fill: var(--orange-bg-color-typ1, #FF6138);
}
header .card-submenu-list--DropheadDesktop li:not(:last-child) {
margin-bottom: 48px;
}
header .card-content--DropheadDesktop h4 {
margin-bottom: 24px;
display: inline-block;
font-family: Inter;
font-weight: 600;
font-size: 24px;
line-height: 1.3;
letter-spacing: 0%;
}
header .card-content--DropheadDesktop p {
margin-bottom: 18px;
font-size: 16px;
}
header .card-content--DropheadDesktop .caption-card-content--DropheadDesktop {
margin-bottom: 5px;
color: var(--primary-txt-color, #FFFFFF);
}
header .card-content--DropheadDesktop ul {
padding: 0px 0px 0px 25px;
margin: 0px;
list-style: '•';
margin-bottom: 24px;
}
header .card-content--DropheadDesktop ul li {
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
color: var(--secondary-txt-color, #D2D2D2);
}
header .card-content--DropheadDesktop ul li::marker {
letter-spacing: 10px;
}
header .card-content--DropheadDesktop ul li:not(:last-child) {
margin-bottom: 10px;
}
header .card-wrraper-content--DropheadDesktop .host-img-card-wrraper-content--DropheadDesktop {
max-width: 357px;
width: 100%;
height: 100%;
aspect-ratio: 1/1;
object-fit: contain;
} header .menu-dropdown--DropheadDesktop {
display: none;
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
position: absolute;
top: calc(100% - 30px);
left: 0;
width: 100%;
min-height: 615px;
z-index: 999;
background: var(--primary-bg-color, #010101);
}
header .menu-dropdown--DropheadDesktop.active-MainMenuDropdown {
display: block;
opacity: 1;
visibility: visible;
}
header .submenu-tab-pane--headDesktop {
display: none;
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}
header .submenu-tab-pane--headDesktop.activate-submenutabpane {
display: block;
opacity: 1;
visibility: visible;
}
header .accordion-btn-header-menu-m.active-bbttn {
box-shadow: inset 3px 0px 0px -1px var(--purple-border-color-typ1);
}
header .rightside-host-img--headerDrops {
width: 357px;
width: 48%;
height: 100%;
aspect-ratio: 395 / 415; object-fit: cover;
align-self: stretch;
}
header .card-wrraper-content--DropheadDesktop .desc-card-content--DropheadDesktop { margin-bottom: 36px;
}
header .card-wrraper-content--DropheadDesktop .desc-card-content--DropheadDesktop * {
color: #2B2B2B;
}
header .card-content--DropheadDesktop {
width: 52%;
padding: 0 40px;
}
header .nested-sub-menu-list--DropheadDesktop {
padding: 0 0 0 40px;
margin: 0;
list-style: none;
width: 48%;
border-left: 1px solid #C1C1C1;
height: auto;
align-self: stretch;
} header .nested-sub-menu-list--DropheadDesktop li {
position: relative;
}
header .nested-sub-menu-list--DropheadDesktop a {
color: #2B2B2B;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 1.17;
text-transform: capitalize;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 24px;
transition: 0.3s;
margin-bottom: 6px; } header .nested-sub-menu-list--DropheadDesktop a .svg-arrow-nested-submenu--DropheadDesktop {
visibility: hidden;
opacity: 0;
transition: 0.3s;
}
header .nested-sub-menu-list--DropheadDesktop a:hover {
color: var(--orange-bg-color-typ1-light, #FF5A24);
}
header .nested-sub-menu-list--DropheadDesktop a:hover .svg-arrow-nested-submenu--DropheadDesktop {
visibility: visible;
opacity: 1;
} */ @media (min-width: 1200px) and (max-width: 1279px) {
header .card-submenu-list--DropheadDesktop {
width: 380px;
}
header .rightside-host-img--headerDrops {
width: 300px;
}
}
@media (min-width:1020px) and (max-width: 1199px) { }
@media (max-width: 1199px) {
.header-bar {
margin-bottom: -65px;
background: #00000099;
}
.d-flex-theme-modes {
display: flex;
align-items: center;
column-gap: 20px;
}
.header-bar {
padding: 20px 0px;
}
.navbar {
padding: 0px;
}
.navbar .container-fluid {
padding: 0px 32px;
}
.navbar .navbar-brand {
padding: 0px;
margin: 0px;
font-size: unset;
height: 100%;
line-height: 17px;
}
.navbar .navbar-brand img {
height: 21px;
}
.navbar-nav {
margin: 0px;
}
.navbar-nav * {
color: #fff !important;
}
.navbar.mobile-view-block {
display: block;
}
.burger-menu-lit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 5px;
position: relative;
z-index: 9;
}
.accordion-button.header-toggle-accordion-btn-m.collapsed .burger-menu-lit {
row-gap: 4px;
}
.accordion-button.header-toggle-accordion-btn-m .burger-menu-lit {
row-gap: 5px;
}
.burger-menu-lit span {
width: 16px;
background: #FFFFFF;
height: 2px;
border-radius: 1px;
border: 1px solid #FFFFFF;
transition: 0.3s;
} .accordion-button.header-toggle-accordion-btn-m.collapsed span.first-burger-lid {
transform: rotate(0deg) translate(0px, 0px);
}
.accordion-button.header-toggle-accordion-btn-m span.first-burger-lid {
transform: rotate(45deg) translate(5px, 5px);
transition: 0.3s;
} .accordion-button.header-toggle-accordion-btn-m.collapsed span.second-burger-lid {
transform: rotate(0deg) translate(0px, 0px);
transition: 0.3s;
}
.accordion-button.header-toggle-accordion-btn-m span.second-burger-lid {
transform: rotate(-45deg) translate(0px, 0px);
transition: 0.3s;
} .accordion-button.header-toggle-accordion-btn-m.collapsed span.third-burger-lid {
visibility: visible;
transition: 0.3s;
opacity: 1;
width: 16px;
}
.accordion-button.header-toggle-accordion-btn-m span.third-burger-lid {
visibility: hidden;
transition: 0.3s;
opacity: 0;
width: 0;
}
nav.navbar.header-mobile-view.mobile-view-block .container {
z-index: 10;
position: relative;
}
header .header-toggle-accordion-m {
position: absolute;
top: -20px;
width: 100%;
padding-top: 60px;
z-index: 9;
background: var(--bg-color-typ0);
padding-bottom: 15px;
}
header .header-toggle-accordion-m .btn--primary {
max-width: 930px;
width: 100%;
margin: auto;
display: block;
padding: 0px 32px;
margin-top: 18px;
}
header .svg-arrow-toggle-MobileHeadDropdown svg {
transform: rotate(180deg);
}
header .svg-arrow-toggle-MobileHeadDropdown.collapsed svg {
transform: rotate(0deg);
}
header .svg-arrow-toggle-MobileHeadDropdown svg path {
stroke: var(--purple-bg-color-typ1);
}
header .svg-arrow-toggle-MobileHeadDropdown.collapsed svg path {
stroke: #fff;
} .accordion-menu-header {}
.accordion-menu-header h2 {
margin: 0px;
}
.accordion-btn-header-menu-m {
background: var(--bg-color-typ0);
padding: 12px 32px;
width: 100%;
border: 0px;
color: var(--primary-txt-color);
font-family: Outfit;
font-size: 12px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.12px;
box-shadow: inset 3px 0px 0px -1px var(--purple-border-color-typ1);
}
.d-flex-btn-header-menu {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center; width: 100%;
margin: auto;
}
.accordion-btn-header-menu-m .d-flex-btn-header-menu a {
color: var(--primary-txt-color, #FFFFFF);
}
.accordion-btn-header-menu-m .d-flex-btn-header-menu a:hover {
color: var(--orange-bg-color-typ1, #FF6138);
}
.accordion-btn-header-menu-m.collapsed {
box-shadow: inset 0px 0px 0px var(--purple-border-color-typ1);
}
.header-submenu-body-m {
margin: 0px;
padding: 0px 32px;
list-style: none;
background: var(--bg-color-typ7);
}
.header-submenu-body-m li a {
color: var(--primary-txt-color);
font-family: Outfit;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.12px;
text-decoration: none;
padding: 12px 32px;
display: block;
width: 100%;
}
.header-submenu-body-m li a:active {
color: var(--orange-bg-color-typ1-light, #FF5A24);
}
header .d-flex-btn-header-menu .svg-arrow-toggle-MobileHeadDropdown {
position: relative;
width: 16px;
}
header .d-flex-btn-header-menu .svg-arrow-toggle-MobileHeadDropdown::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 300%;
height: 200%;
transform: translate(-50%, -50%);
z-index: 2;
}
header .navbar.header-mobile-view.mobile-view-block .btn--primary a {
font-size: 12px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.header-bar {
margin-bottom: -75px;
}
.navbar .navbar-brand img {
height: 34px;
}
header .header-toggle-accordion-m {
padding-top: 82px;
padding-bottom: 48px;
}
.navbar .container-fluid {
padding: 0px 15px;
max-width: 960px;
}
.accordion-btn-header-menu-m {
padding: 20px 32px;
}
.accordion-btn-header-menu-m,
.header-submenu-body-m li a {
font-size: 18px;
}
header .header-toggle-accordion-m .btn--primary {
margin-top: 18px;
padding: 0px;
}
.d-flex-btn-header-menu { }
}
@media (min-width: 768px) and (max-width: 991px) {
nav.navbar.header-mobile-view.mobile-view-block .container-fluid,
header .header-toggle-accordion-m .btn--primary { }
.d-flex-btn-header-menu { }
}
@media (max-width: 767px) {
nav.navbar.header-mobile-view.mobile-view-block .container-fluid { }
.d-flex-btn-header-menu {  }
header .header-toggle-accordion-m .btn--primary {
margin-top: 12px; }
} @media (max-width: 1199px) {
.header-submenu-body-m {
padding: 0;
}
.accordion-btn-header-menu-m {
padding: 12px 32px;
}
.accordion-btn-header-menu-m .d-flex-btn-header-menu a {
text-align: left;
}
.nested-menu-2lvl-item {
padding-top: 0;
padding-bottom: 0;
}
.nested-menu-2lvl-item button.accordion-btn-header-menu-m {
padding: 0;
background: transparent;
}
.header-submenu-body-m.nested-menu-2lvl-ul-body {
background: #525252; 
}
.header-submenu-body-m.nested-menu-2lvl-ul-body li a {
padding: 12px 48px;
}
header .nested-active-btnnn.accordion-btn-header-menu-m .d-flex-btn-header-menu a { }
header .nested-active-btnnn .svg-arrow-toggle-MobileHeadDropdown svg path {
stroke: var(--purple-bg-color-typ1);
}
header .nnested-menu-2lvl-item .svg-arrow-toggle-MobileHeadDropdown svg { }
.nested-menu-2lvl-item .accordion-btn-header-menu-m .d-flex-btn-header-menu {
justify-content: space-between;
}
.nested-menu-2lvl-item .accordion-btn-header-menu-m .d-flex-btn-header-menu a {
margin: unset;
width: max-content;
} }
@media (min-width: 992px) and (max-width: 1199px) {
.d-flex-btn-header-menu {
max-width: 930px;
}
.header-submenu-body-m li a {
max-width: 930px;
margin: auto;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.d-flex-btn-header-menu {
max-width: 696px;
}
.header-submenu-body-m li a {
max-width: 696px;
margin: auto;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.d-flex-btn-header-menu {
max-width: calc(540px - 64px);
}
.header-submenu-body-m li a {
max-width: calc(540px - 64px);
margin: auto;
}
.nested-menu-2lvl-item .accordion-btn-header-menu-m .d-flex-btn-header-menu a,
.header-submenu-body-m li a {
padding-left: 16px;
}
.header-submenu-body-m.nested-menu-2lvl-ul-body li a {
padding: 12px 32px;
}
}
@media (max-width: 575px) {
.d-flex-btn-header-menu {
max-width: 100%;
}
.header-submenu-body-m li a {
max-width: calc(100% - 32px);
margin: auto;
}
.nested-menu-2lvl-item .accordion-btn-header-menu-m .d-flex-btn-header-menu a,
.header-submenu-body-m li a {
padding-left: 16px;
}
.header-submenu-body-m.nested-menu-2lvl-ul-body li a {
padding: 12px 32px;
}
.nested-menu-2lvl-item .accordion-btn-header-menu-m .d-flex-btn-header-menu,
.header-submenu-body-m li a {
max-width: calc(100% - 64px);
}
}
@media (min-width: 1025px) and (max-width: 1199px) {
header .navbar.header-mobile-view.mobile-view-block .btn--primary a {
font-size: 18px;
}
}