:root {
    --main-color: #2d3c59;
    --background-color: #1b2435;
    --sky-blue: #7dd2d3;
    --background-lighter-blue: #1b283c;

    --mid-dark-blue: rgba(31, 54, 86, 1);

    --orange: #e88147;
    --orange-dark: #f0583b;
    --dark-blue: #2d3c59;
    --dark-pink: #e54947;
    --white: #fff;

    --grey: #f5f7f8;
    --light-blue: rgba(125, 210, 211, 1);
    --text-blue: #1f3656;
    --navbar-height: 3vw;

    --transparent-blue-background: #1c283b;
}

body {
    font-family: "Calibri", sans-serif;
}

.border {
    border: 1px solid #a81a1a;
}

.dir-ltr {
    direction: ltr;
}

.pos-abs {
    position: absolute;
    width: 100%;
    z-index: -99;
    height: 100%;
}

.pos-rel {
    position: relative;
    width: 100%;
}
.height-100 {
    height: 100%;
}

.sqr-abs {
    position: absolute;
}

.color-sq-bg {
    width: 80px;
    height: 80px;
}
.color-sq-md {
    width: 65px;
    height: 65px;
}

.color-sq-sm {
    width: 51px;
    height: 51px;
}

.color-sq-double {
    width: 130px;
    height: 130px;
}

.color-sq-double-mini {
    width: 100px;
    height: 100px;
}

.color-sq-double-bg {
    width: 150px;
    height: 150px;
}

.color-sq-60p {
    width: 60%;
    height: 60%;
}

.color-sq-40p {
    width: 40%;
    height: 40%;
}

.color-sq-50p {
    width: 50%;
    height: 50%;
}

.sq-border {
    border: 3px solid #ffff;
    z-index: 2;
}

.sq-border-blue {
    border: 3px solid var(--dark-blue);
    z-index: 1;
}

.sq-background-orange {
    background-color: var(--orange-dark);
    z-index: 1;
}
.sq-background-yellow {
    background-color: #fbc55a;
    z-index: 2;
}
.sq-background-blue {
    background-color: var(--sky-blue);
    z-index: 1;
}
.sq-background-blue-dark {
    z-index: 1;
    background-color: var(--dark-blue);
}
.sq-background-white {
    z-index: 1;
    background-color: var(--white);
}

.sq-background-pink {
    z-index: 1;
    background-color: var(--dark-pink);
}

* {
    z-index: 3;
}
/* Top positioning */

.top-trans-50 {
    transform: translateY(-50%);
}
.top-trans-40 {
    transform: translateY(-40%);
}

.top-p-0 {
    top: 0%;
}
.top-p-0 {
    top: 0%;
}
.top-p-7- {
    top: -7%;
}
.top-p-3- {
    top: -3%;
}
.top-p-5- {
    top: -5%;
}

.top-p-3 {
    top: 2.5%;
}

.top-p-5 {
    top: 5%;
}

.top-p-10 {
    top: 10%;
}

.top-p-15 {
    top: 15%;
}

.top-p-19 {
    top: 18.5%;
}

.top-p-20 {
    top: 20%;
}

.top-p-25 {
    top: 25%;
}
.top-p-25 {
    top: 25%;
}

.top-p-30 {
    top: 30%;
}
.top-p-35 {
    top: 35%;
}

.top-p-40 {
    top: 40%;
}
.top-p-45 {
    top: 45%;
}

.top-p-50 {
    top: 50%;
}
.top-p-55 {
    top: 55%;
}
.top-p-60 {
    top: 60%;
}

/* Bottom positioning */
.bot-p-20- {
    bottom: -20%;
}
.bot-p-10- {
    bottom: -8%;
}

.bot-p-5- {
    bottom: -5%;
}

.bot-p-5- {
    bottom: -5%;
}
.bot-p-0 {
    bottom: 0%;
}

.bot-p-3 {
    bottom: 2.5%;
}

.bot-p-5- {
    bottom: -5%;
}
.bot-p-10- {
    bottom: -10%;
}

.bot-p-10 {
    bottom: 10%;
}

.bot-p-12 {
    bottom: 12%;
}
.bot-p-15 {
    bottom: 15%;
}
.bot-p-18 {
    bottom: 18%;
}

.bot-p-20 {
    bottom: 20%;
}

.bot-p-25 {
    bottom: 25%;
}

.bot-p-30 {
    bottom: 27%;
}
.bot-p-35 {
    bottom: 35%;
}
.bot-p-40 {
    bottom: 40%;
}

/* Left positioning */
.left-p-0 {
    left: 0%;
}
.left-p-3 {
    left: 2.5%;
}

.left-p-5 {
    left: 5%;
}

.left-p-10 {
    left: 10%;
}

.left-p-15 {
    left: 15%;
}

.left-p-20 {
    left: 20%;
}

.left-p-30 {
    left: 30%;
}

.left-p-40 {
    left: 40%;
}

.left-p-44 {
    left: 43.2%;
}

.left-p-50 {
    left: 50%;
}
.left-p-60 {
    left: 60%;
}

/* Right positioning */

.right-p-0 {
    right: 0%;
}

.right-p-3 {
    right: 2.5%;
}

.right-p-5 {
    right: 5%;
}

.right-p-10 {
    right: 10%;
}

.right-p-15 {
    right: 15%;
}

.right-p-20 {
    right: 20%;
}

.right-p-30 {
    right: 27%;
}

.right-p-40 {
    right: 40%;
}

.right-p-50 {
    right: 50%;
}

.right-p-60 {
    right: 60%;
}

.search-div {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #1b2435f8;
    z-index: 99999;
    overflow-y: auto;
}

.search-input-cont {
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-color-orange {
    color: var(--dark-pink);
}

.auto-color-dark-orange {
    color: var(--dark-pink);
}

.auto-pre-complete {
    color: white;
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding-bottom: 20px;
}
.auto-complete-container {
    width: 100%;
}

.auto-click {
    cursor: pointer;
    transition: 0.3s;
}

.auto-click:hover {
    text-decoration: underline;
}

.search-input-input {
    width: 50%;
    min-height: 50px;
    border-radius: 30px;
    outline: 0px;
    border: none;
    color: var(--dark-blue);
    padding: 0 25px;
    background-color: #f0f2f5;
}

.search-results {
    width: 50%;
    margin: auto;
}

.searched-result-one {
    width: 100%;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
    border: 1px solid transparent;
}

.searched-result-one:hover {
    /* border:1px solid var(--orange-dark); */
    background-color: rgb(0, 5, 27);
}
.searched-result-one:hover > .page-name-span {
    /* border:1px solid var(--orange-dark); */
    /* background-color: var(--orange-dark); */
}
.searched-result-one:hover > .searched-term {
    /* border:1px solid var(--orange-dark); */
    /* background-color: var(--orange-dark); */
}

.searched-term {
    color: var(--orange-dark);
}

#loading-screen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    font-size: 20px;
}

.fm-noto {
}

.fm-inter {
}

#loading-spinner {
    border: 8px solid var(--orange-dark);
    /* Light grey border, represents the background */
    border-top: 8px solid var(--orange);
    border-radius: 50%;
    /* This makes the circle shape */
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    /* Animation applied here */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.psv-hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 0px;
    color: white;
    box-sizing: border-box;
}

.psv-hamburger.ar {
    right: auto;
    left: 0px;
}

.psv-sidebar {
    height: 100%;
    box-sizing: border-box;
    width: 100%;
    right: -100%;
    position: fixed;
    top: 0;
    background-color: var(--background-color);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.psv-sidebar.ar {
    left: -100%;
    right: none;
}

.psv-sidebar.active {
    right: 0;
}

.psv-sidebar.ar.active {
    left: 0;
}

.bg-yellow {
    background-color: #fbc55a !important;
    color: white !important;
}

.psv-inside-sidebar {
    position: relative;
}

.psv-x-button {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;
    padding: 0px 40px;
    font-weight: 700;
    color: white;
    font-size: 24px;

    cursor: pointer;
    transition: 0.3s;
}

.psv-x-button:hover {
    color: var(--orange-dark);
}

.psv-sidebar a,
.psv-menu-item {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
    padding-left: 20px;
    padding-bottom: 20px;
    cursor: pointer;
}

.psv-sidebar a.selected,
.psv-menu-item.selected {
    color: var(--orange-dark);
}

.psv-sidebar a:hover,
.psv-menu-item:hover {
    color: var(--orange-dark);
}

.psv-line {
    background-color: grey;
    width: 90%;
    height: 1px;
    margin-top: 5px;
}

.psv-sub-menu a {
    font-size: 20px;
    padding-left: 30px;
}

.psv-sub-menu {
    display: none;
}

.text-white {
    color: white !important;
}
.text-white2 {
    color: white !important;
}

.text-blue {
    color: #1f3656 !important;
}

.text-orange {
    color: #f0583b !important;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--background-color);
}

.bg-white {
    background-color: var(--white);
    color: var(--background-color);
}

.bg-orange {
    background-color: var(--orange);
    color: white;
}

.bg-orange-og {
    background-color: var(--orange-dark);
}

.bg-blue {
    background-color: var(--dark-blue);
    color: white;
}

.bg-blue {
    background-color: var(--dark-blue);
    color: white;
}

.container {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.transparent {
    opacity: 0;
}

footer {
    background-color: var(--background-color);
    width: 100%;
}

.container-mix {
    max-width: 80vw;
    margin-left: 15vw;
}

.container-mix.ar {
    margin-right: 15vw;
    margin-left: auto;
}

.content-mix-section {
    width: 100%;
    box-sizing: border-box;
    color: white;
    /* background-color: red; */
    align-items: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-mix-section.content-mix-rtl {
    flex-direction: row-reverse;
}

.content-mix-rtl > .content-mix-text.ar,
.content-mix-text.ar.pewpew {
    padding-right: unset;
    padding-left: 4vw;
    font-size: 86px;
}

/* .content-mix-rtl>.content-mix{
    width: 40vw;
} */

.td-none {
    text-decoration: none !important;
}

.inside-all {
    position: relative;
    width: 100%;
    height: 100%;
}

.content-mix {
    position: relative;
    width: 35vw;
    height: 35vw;
    /* background-color: blue; */
}

.content-mix > * {
    box-sizing: border-box;
}

.content-mix > .top {
    top: 0;
    position: absolute;
    width: 100%;
    height: 60%;
    /* background-color: antiquewhite; */
}

.content-mix > .top > .inside-all > .left {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 60%;
    height: 90%;
    box-sizing: border-box;
}

.content-mix > .top > .inside-all > .right {
    position: absolute;

    right: 0px;
    top: 0px;
    width: 40%;
    height: 100%;
    box-sizing: border-box;
    /* background-color: #058b00; */
}

.no-background-pls {
    background-color: transparent !important;
}

.content-mix > .top > .inside-all > .right > .inside-all > .top {
    position: absolute;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    width: 50%;
    height: 33.333%;
}

.content-mix > .top > .inside-all > .right > .inside-all > .bottom {
    position: absolute;
    box-sizing: border-box;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 66.666%;
}

.content-mix > .bottom {
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0px;
    left: 0px;
    box-sizing: border-box;
}

.content-mix > .bottom > .inside-all > .left {
    position: absolute;
    width: 60%;
    height: 100%;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
}

.content-mix > .bottom > .inside-all > .left > .inside-all > .left {
    position: absolute;
    width: 33.333%;
    height: 50%;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
}

.content-mix > .bottom > .inside-all > .left .inside-all > .right {
    position: absolute;
    width: 66.666%;
    height: 100%;
    top: 0px;
    right: 0px;
    box-sizing: border-box;
}

.content-mix > .bottom > .inside-all > .right {
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0px;
    right: 0px;
    box-sizing: border-box;
}

.content-mix
    > .bottom
    > .inside-all
    > .right
    > .inside-all-bottom-right-new
    > .inside-all {
    width: 95%;
    height: 95%;
}

.inside-all-data {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.inside-all-bottom-right-new {
    display: flex;

    width: 100%;
    height: 100%;
}

.inside-all-bottom-right-new.ar {
    justify-content: flex-end;
}

.inside-all-bottom-right-new.le {
    justify-content: flex-end;
}

.a {
    padding: 0.6vw;
    box-sizing: border-box;
}

.inside-all-data > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inside-all-data > .mic-pic {
    width: auto;

    box-sizing: border-box;
}

.inside-all-data.not-an-image {
    height: 95%;
    width: 95%;
    padding: 1vw;
    box-sizing: border-box;
}

.inside-all-data.not-an-image > h3 {
    font-size: 2vw;
    margin: 0px;
}

.mic-pic-box {
    background-color: var(--orange-dark);
    margin-top: 0.5vw;
}

.percentage-box {
    background-color: #7dd2d3;
    margin-left: 0.5vw;
}

.a.down-right-container {
    box-sizing: border-box;
}

.inside-all.a:hover > .inside-all-data > img {
    opacity: 0.6;
}

.inside-all.a:hover > .inside-all-data > .mic-pic {
    opacity: 1;
}

.inside-all.a > .inside-all-data > img {
    transition: opacity 0.7s ease;
    cursor: pointer;
}

.mic-pic-container {
    box-sizing: border-box;
}

.content-mix-section2 {
    display: flex;
}

.inside-all-data {
    cursor: pointer;
}

.not-an-image {
    transition: all 0.7s ease;
    color: white;
}

.inside-all.a:hover > .not-an-image {
    background-color: #000000;
    color: white;
}

.inside-all-data:hover > .image-icon > .image-icon-text {
    background-color: #00000073;
}

.inside-all-data > .image-icon > .image-icon-text {
    transition: all 0.7s ease;
}

.image-icon-right-icon {
    transition: all 0.7s ease;
}

.inside-all-data:hover > .image-icon > .image-icon-right-icon {
    background-color: #000000;
}

.inside-all-data:hover > .image-icon > .image-icon-right-icon.bg-white {
    color: var(--white);
}

.content-mix-text {
    /* width: 100%; */
    flex-grow: 1;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 10px;
    width: 35vw;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: left;

    padding-left: 4vw;
}

.content-mix-text.align-items-center {
    align-items: start;
}

.content-mix-rtl > .content-mix-text {
    padding-left: unset;
    padding-right: 4vw;
    width: 30vw;
}

.content-mix-text.ar {
    padding-left: auto;
    padding-right: 4vw;
}

.content-mix-text.content-mix-rtl.ar {
    padding-left: 4vw;
    padding-right: auto;
}

.content-mix-text > h1 {
    width: 100%;
    font-size: 4vw;
}

.content-mix-text.ar > h1 {
    font-size: 4.5vw;
}

.content-mix-text > p {
    width: 100%;
    font-size: 1.2vw;
    font-weight: 300;
}

.content-mix-text.ar > p {
    font-size: 1.5vw;
}

.content-mix-text > p.message {
    width: 100%;
    font-size: 1.2vw;
    font-weight: 500;
    font-style: italic;
}

.content-mix-text > h1 > span:last-child {
    color: var(--orange-dark);
}

.image-icon-text {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    background-color: black;
    font-size: 1vw;
    padding: 0.2vw 0;
}

.image-icon-right-icon {
    font-family: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 2vw;
    aspect-ratio: 1/1;
}

.image-icon-right-icon.top-left {
    font-size: 3vw;
    font-weight: bold;
}

.image-icon-right-icon.top-left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    box-sizing: border-box;
    font-size: 3vw;
    position: absolute;
    top: 0px;
    left: 0px;
    aspect-ratio: 1/1;
}

header {
    top: 0px;
    left: 0;
    z-index: 99;
    width: 100%;
    background-color: var(--background-color);
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    padding-top: 20px;
    transition: 0.5s ease;
}

.hidden-header {
    transition: 0.5s ease;

    top: -100%;
    /* Move the header out of view */
}

.header-content {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    /* height: var(--navbar-height); */
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 20px;
    justify-content: space-between;
}

.header-logo {
    width: 150px;
}

.container-header {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.header-routes {
    display: flex;
    gap: 28px;
    white-space: nowrap;
    align-items: center;
    /* Prevent wrapping */
}

.route-link-main {
    text-decoration: none;
    color: var(--white);

    font-weight: 300;
    font-size: 21px;
    cursor: pointer;
    transition: all 0.2s linear;
}

.route-link-main:hover {
    color: var(--orange-dark);
}

.route-link-main.selected {
    color: var(--orange-dark);
    font-weight: 600;
}

.children {
    display: none;
    position: absolute;
    /* Position dropdown directly beneath parent item */
    /* transform: translate(0,0); */
    top: 100%;
    z-index: 9;
    width: 100%;
    /* left: 0px; */
    /* margin-top: 40px; */
}

.children-link {
    /* display: none; */
    /* background-color: black; */
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 250px;
    width: 100%;
    height: 100%;
    position: relative;
}

.children-link-background-dark-blue {
    display: none;
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.parent-is-selected {
    display: block;
}

.parent-is-not-selected {
    display: none;
}

.search-and-top-header {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;

    color: var(--white);
    font-size: 14px;
    font-weight: 300;
    gap: 24px;
}

.search-and-top-header > .search {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.x-button {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: end;
}

.x-button-button {
    cursor: pointer;
}

.search-and-top-header > .lang {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-and-top-header > .lang {
    display: flex;
    align-items: center;
}

.search-icon {
    width: 50%;
}

.image-icon-lang {
    width: 30px;
    height: 50%;
    align-items: end;
}

.image-icon {
    /* width: 25px;
    height: 50%;  */
    position: absolute;
    bottom: 0px;
    display: flex;
    align-items: end;
    width: 100%;
}

.animate {
    transition: transform 1s ease;
    transform: scale(0);
    transform-origin: top right;
}

.animate.active {
    transform: scale(1);
}

.animate.active.newbye {
    transform: scale(1) translate(0, -100%);
}

.animate.anime-left {
    transform-origin: top left;
}

.animate.fade {
    transform: scale(1);

    opacity: 0;
    transition: opacity 1s linear 0.3s;
}

.animate.fade.active {
    opacity: 1;
}

.animate.side-fade {
    opacity: 0;
    transform: translate(100%, 0);
    transition: all 1s ease;
}

.animate.side-fade.active {
    transform: translate(0, 0);
    opacity: 1;
}

#fake-header {
    margin-top: 20px;
}

.content-mix-reverse {
    text-align: end;
}

.pre-footer {
    background-color: var(--main-color);
    height: 100px;
    width: 100%;
}
.m-5 {
    margin-top: 5px;
    margin-bottom: 5px !important;
}
.client-sec-img {
    width: 25%;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    object-fit: contain;
    display: flex;
    padding-bottom: 50px;
    align-items: center;
    justify-content: center;
}

.client-sec-cont {
    flex-wrap: wrap;
    justify-content: center;
}
.dp-flex {
    display: flex;
}

.clickable-client {
    cursor: pointer;
    text-decoration: none !important;
}

.flex-center-all {
    display: flex;
    justify-content: center;

    flex-direction: column;
    width: 100%;
    align-items: center;
}
.footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: var(--background-color);
    color: #fff;
    padding: 13px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.footer-column {
    flex: 1;
    margin: 25px;
    box-sizing: border-box;
}

.footer-column1 {
}

.l1 {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
}

.h3 {
    font-weight: 490;
    color: rgb(141, 139, 139);
    font-size: 24px;
    text-wrap: nowrap;
}

.h3 img {
    object-fit: contain;
}

.footer-column ul {
    margin: 0%;
    list-style: none;
    padding: 0px;
}

.footer-column ul li {
    display: list-item;
    margin: 10px 0;
    padding: 3px;
    font-weight: 400;
    font-size: 18px;
}

.social-media-icons {
    display: flex;
    gap: 20px;
}

.Tlogos {
    padding: 4px;
    transition: filter 0.3s ease;
}

.Tlogos:hover {
    filter: brightness(100%) saturate(100%) invert(47%) sepia(99%)
        saturate(1874%) hue-rotate(347deg) brightness(100%) contrast(99%);
}

.Bottom {
    width: 100%;
    padding: 13px;
    text-align: center;
    background-color: var(--background-color);
    color: rgb(165, 165, 165);
    border-top: 1.33px solid rgba(255, 255, 255, 0.12);
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box;
    padding-top: 60px;
    padding-bottom: 60px;
}

li > a {
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

li > a.selected {
    color: var(--orange-dark);
    font-weight: 500;
}

li:hover > a {
    color: var(--orange-dark);
}

.custom-background {
    width: 100%;
    height: 100%;
    color: #fff;
}

.custom-background.thick-cb {
    min-height: unset;
    padding: 100px 0px;
    width: 100%;

    box-sizing: border-box;
}

.inside-banner-background {
    width: 100%;
    padding: 100px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jy-expertise-content.pasd {
    width: 100%;
    padding: 50px 0px;
    justify-content: space-evenly;
}

.header-logo.fake {
    opacity: 0;
    z-index: -1;
}

.button {
    text-align: center;
    padding: 16px 42px;
    background-color: transparent;
    border: 1px solid var(--background-color);
    border-radius: 5px;
    width: fit-content;
    text-decoration: none;
    color: #333;
    font-weight: 400;
    font-size: 26px;

    color: var(--background-color);
    transition: all 0.3s ease;
    margin-left: 60px;
    display: block;
}

.pd-5px {
    padding: 5px !important;
}

.button.ar {
    margin-left: unset;
    margin-right: 60px;
}

.button.white-button-pls {
    border-color: white;
    color: white;
    font-size: 28px;
}

.button:hover {
    background-color: var(--background-color);
    color: white;
}

.button.white-button-pls:hover {
    background-color: #e94560;
    border-color: #e94560;
}

.content-mix-outer {
    width: 45vw;
}

.content-mix-outer.ar {
    display: flex;
    justify-content: center;
}

.ps-rel {
    position: relative;
}
.z-1 {
    z-index: 1;
}
.z-100 {
    z-index: 100;
}

.content-mix
    > .bottom
    > .inside-all
    > .left
    .inside-all
    > .right.inside-all-reversed-2 {
    width: 60%;
    height: unset;
    aspect-ratio: 1/1;
}

.newbye {
    position: absolute;
    width: 6vw;
    height: 6vw;
    right: -6vw;

    top: 98%;
}

.container.footer {
    width: 80%;
}

.leftqwe.www {
    margin-left: 10px;
}

.w-90 {
    width: 90% !important;
}

.w-80 {
    width: 80% !important;
}

.w-70 {
    width: 70% !important;
}

.w-60 {
    width: 60% !important;
}

@media (min-width: 1367px) {
    .w-80,
    .w-60,
    .w-70 {
        width: 100% !important;
    }

    .w-bg-80 {
        width: 80% !important;
    }
}

.pt-none {
    padding-top: 0px !important;
}

.pb-none {
    padding-bottom: 0px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.pl-none {
    padding-left: 0px !important;
}

.pl-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.ptb-none {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.ptb-20 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
.ptb-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.m-none {
    margin: 0px !important;
}

.mt-none {
    margin-top: 0px !important;
}

.mb-none {
    margin-bottom: 0px !important;
}

.min-h-none {
    min-height: unset !important;
}

.min-h-80 {
    min-height: 80vh !important;
}

.min-h-70 {
    min-height: 600px;
}

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

/* Normal */
.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

/* Bold */
.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

.font-computer-h1 {
    font-size: 64px !important;
    font-weight: 500;
}

.font-computer-h2 {
    font-size: 64px !important;
    font-weight: 500;
}

.font-computer-h3 {
    font-size: 42px !important;
    font-weight: 400;
}

.font-computer-h4 {
    font-size: 30px !important;
}

.font-computer-par {
    font-size: 24px !important;
}

.font-computer-p {
    font-size: 24px !important;
}
.font-computer-p-s {
    font-size: 21px !important;
    font-weight: 300;
}
.font-computer-bg {
    font-size: 24px !important;
}
.waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Adjust spacing between bars */
    height: 100px; /* Set a fixed height for the container */
}

.bar {
    width: 4px; /* Width of each line */
    height: 40px; /* Initial height */
    background-color: var(--dark-pink); /* Line color */
    border-radius: 2px; /* Rounded edges */
    transition: height 0.2s ease; /* Smooth transition for height changes */
}

.ahj-popup-overlay {
    direction: ltr;
    position: fixed;
    display: none;

    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.ahj-popup-overlay.active {
    display: block;
}

.ahj-popup-content {
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 720px;
    background-color: transparent;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.ahj-popup-image-container,
.ahj-popup-icon-container {
    position: relative;
    z-index: 2;
    width: 250px;
    height: 250px;
}
.ahj-popup-icon-container {
    width: 350px;

    background-color: var(--orange-dark);
    padding: 50px;
    box-sizing: border-box;

    height: 350px;
}
.ahj-pop-mic {
    display: flex;
    height: 350px;
    width: 100%;
    max-width: 750px;
    align-items: center;
    justify-content: center;
}

.ahj-popup-icon-audio-box {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 450px;
    width: 100%;
    background-color: var(--white);

    height: 300px;
}

.ahj-popup-icon-container img {
    width: 100%;
    height: 100%;
    object-fit: unset !important;
}

.ahj-popup-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ahj-popup-text-container {
    position: absolute;
    padding: 40px 40px 40px 80px;
    box-sizing: border-box;
    top: 30%;
    right: 0px;
    z-index: 1;
    width: 70%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.ahj-pop-left-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 78px;
    background-color: #7dd2d3;
    color: white;
}

.ahj-pop-vid {
    margin-top: 20px;
    position: relative;

    padding-bottom: 27%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    width: 50%;

    background: #000;
}

.closing-button-search {
    padding: 3px 10px;
    margin-top: 5px;
    cursor: pointer;
    transition: 0.15s;
    border-radius: 15px;
}

.closing-button-search:hover {
    background-color: var(--orange-dark);
}

.ahj-video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ahj-pop-vid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ahj-background-color-yellow {
    background-color: #fbc55a;
}

.ahj-background-color-blue-l {
    background-color: #7dd2d3;
}

.ahj-background-color-blue-d {
    background-color: #2d3c59;
}

.ahj-background-color-pink {
    background-color: #d93954;
    color: white !important;
}

.ahj-background-color-white {
    background-color: white;
}

.ahj-popup-text {
    color: black;
}

.ahj-background-color-blue-d > div > h2,
.ahj-background-color-blue-d > div > p {
    color: white;
}
.ahj-background-color-pink > div > h2,
.ahj-background-color-pink > div > p {
    color: white !important;
}
.ahj-popup-description {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.ahj-close {
    position: absolute;
    top: 60px;
    right: -40px;
    font-size: 45px;
    cursor: pointer;
    background-color: black;
    width: 40px;
    height: 40px;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
}

.yt12-button {
    width: 60px;
    height: 60px;
    background-color: #e53954; /* Red color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.yt12-button:hover {
    transform: scale(1.1);
}

.yt12-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent white; /* White color */
}

.yt12-pause-icon {
    display: flex;
    gap: 5px;
}

.yt12-pause-icon::before,
.yt12-pause-icon::after {
    content: "";
    display: block;
    width: 6px;
    height: 20px;
    background-color: white; /* White color */
}
.bg-lighter-blue {
    background-color: var(--background-lighter-blue);
}

.ta-c {
    text-align: center !important;
}
.ta-start {
    text-align: start !important;
}

.al-item-none {
    align-items: unset !important;
}

.chip-pinky {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: #d93954;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

.chip-pinky:hover {
    background-color: #e2546c;
    cursor: pointer;
}

@media (min-width: 1367px) {
    .font-computer-h1.font-computer-h1-s {
        font-size: 56px !important;
    }

    .font-computer-h1.text-white {
        font-size: 56px !important;
    }
    .font-computer-h3.not-h3 {
        font-size: 42px !important;
    }

    .font-computer-h1-smaller {
        font-size: 56px !important;
    }
    .font-computer-h3.only {
        font-size: 48px !important;
    }
    .font-computer-h1-bg {
        font-size: 64px !important;
    }
}

@media (max-width: 1450px) {
    /* .container-header {
        max-width: 1200px;
      } */

    .route-link-main {
        font-size: 18px;
    }

    .header-logo {
        width: 100px;
    }
}

@media (max-width: 1366px) {
    .Tlogos img {
        width: 25px;
    }

    .color-sq-bg {
        width: 65px;
        height: 65px;
    }
    .color-sq-md {
        width: 55px;
        height: 55px;
    }

    .color-sq-sm {
        width: 45px;
        height: 45px;
    }

    .color-sq-double {
        width: 100px;
        height: 100px;
    }

    .color-sq-double-mini {
        width: 80px;
        height: 80px;
    }

    .min-h-70 {
        min-height: 600px;
    }
    .inside-banner-background {
        padding: 100px 0px;
    }

    .custom-background.thick-cb {
        padding: 75px 0px;
    }

    .font-computer-h1 {
        font-size: 54px !important;
        font-weight: 500;
    }
    .font-computer-h1-b {
        font-size: 62px !important;
    }

    .font-computer-h3,
    .font-computer-h3.only {
        font-size: 36px !important;
    }

    .font-computer-h3.only {
        font-size: 34px !important;
    }

    .font-computer-h4 {
        font-size: 26px !important;
    }

    .font-computer-par {
        font-size: 21px !important;
    }

    .font-computer-p {
        font-size: 18px !important;
    }

    .font-computer-p-s {
        font-size: 16px !important;
    }

    .font-computer-h1-bg {
        font-size: 54px !important;
    }
}

@media (max-width: 1254px) {
    .header-logo {
        width: 100px;
    }
    .font-computer-h3.only {
        font-size: auto;
    }
    /* .container-header {
            max-width: 1000px;
          } */
}

@media (max-width: 1367px) {
    .h3 {
        font-weight: 490;
        color: rgb(141, 139, 139);
        font-size: 21px;
        text-wrap: nowrap;
    }

    .footer-column ul li {
        display: list-item;
        margin: 5px 0;
        padding: 3px;
        font-weight: 300;
        font-size: 14px;
    }
}

@media (max-width: 1200px) {
    .header-logo {
        padding-right: 10px;
        box-sizing: border-box;
    }

    .footer {
        padding: 40px 15px;
    }

    /* .footer-column {
        margin: 15px;
    } */

    .container.footer {
        width: 95%;
    }

    .footer-column ul li {
        font-size: 18px;
    }

    .bottom-div {
        padding: 15px;
        font-size: 14px;
    }

    .content-mix-text > p {
        width: 100%;
        font-size: 1.5vw;
    }

    .content-mix-text > p.message {
        font-size: 1.5vw;
    }
}

@media (max-width: 1000px) {
    .Tlogos img {
        width: 30px;
    }

    .pos-abs {
        display: none;
    }
    .ahj-pop-vid {
        padding-bottom: 40%;

        width: 80%;
    }

    .w-80,
    .w-60,
    .w-70,
    .w-90 {
        width: 100% !important;
    }

    .content-mix-section {
        margin-left: 10vw;
    }

    .content-mix-section.ar {
        margin-right: 10vw;
    }

    .content-mix-text > p {
        width: 100%;
        font-size: 2vw;
    }

    .content-mix-text > p.message {
        font-size: 2vw;
    }

    .header-routes {
        gap: 15px;
    }

    /* .route-link-main{
        font-size: 19px;
    } */

    .header-logo.fake {
        display: none;
    }

    /* .container-header {
        max-width: 90%;
      } */
    .route-link-main {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .social-media-icons {
        justify-content: space-around;
        margin-top: 20px;
    }

    .transparent {
        display: none;
    }
    .Tlogos img {
        width: 35px;
    }

    .mt-20-sm {
        margin-top: 20px !important;
    }

    .ahj-popup-icon-audio-box {
        max-width: unset;
        width: 90%;
    }

    .right-p-20 {
        display: none;
    }

    .right-p-30 {
        display: none;
    }

    .right-p-40 {
        display: none;
    }

    .right-p-50 {
        display: none;
    }

    .right-p-60 {
        display: none;
    }
    .left-p-15 {
        display: none;
    }

    .left-p-20 {
        display: none;
    }

    .left-p-30 {
        display: none;
    }

    .left-p-40 {
        display: none;
    }

    .left-p-44 {
        display: none;
    }

    .left-p-50 {
        display: none;
    }

    .ahj-pop-mic {
        width: 100%;
    }

    .ahj-pop-vid {
        padding-bottom: 50%;

        width: 90%;
    }
    .search-input-cont {
    }

    .search-input-input {
        width: 80%;
        min-height: 50px;
    }

    .search-results {
        width: 100%;
        box-sizing: border-box;
        padding: 0px 20px;
        margin: auto;
    }

    .ahj-popup-image-container,
    .ahj-popup-icon-container {
        display: none;
    }

    .ahj-popup-content {
        display: block;
    }

    .ahj-popup-text-container {
        min-width: 80%;
        width: fit-content;
        height: fit-content;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .ahj-close {
        background-color: transparent;
        top: 50px;

        right: -10px;
    }
    .newbye {
        position: absolute;
        width: 15vw;
        height: 15vw;
        right: -15vw;
    }

    .font-computer-h1 {
        font-size: 48px !important;
    }

    .psv-hamburger {
        display: block;
    }

    .header-routes {
        display: none;
    }

    .inside-all-data.not-an-image > h3 {
        font-size: 4vw;
    }

    .content-mix-text,
    .content-mix-rtl > .content-mix-text {
        /* width: 100%; */
        width: 90vw;
        padding-right: unset;
        padding-left: unset;
    }

    .button {
        padding: 12px 38px;

        font-size: 28px;
    }

    .content-mix-text > h1 {
        font-size: 10vw;
    }

    .content-mix-text > p {
        width: 100%;
        font-size: 3vw;
    }

    .content-mix-text > p.message {
        font-size: 3vw;
    }

    .content-mix-text.ar > h1 {
        font-size: 14vw;
    }

    .content-mix-text.ar > p {
        font-size: 6vw;
    }

    .content-mix-text.ar > p.message {
        font-size: 6vw;
    }

    .image-icon-right-icon,
    .image-icon-right-icon.top-left {
        font-size: 4vw;
    }

    .image-icon-text {
        font-size: 2.5vw;
    }

    .content-mix-section,
    .content-mix-section.content-mix-rtl {
        flex-direction: column-reverse;
    }

    .content-mix-reverse {
        text-align: start;
    }

    .content-mix {
        width: 80vw;
        height: 80vw;
    }

    .content-mix-outer {
        width: 95vw;
        display: flex;
        justify-content: start;
    }

    .content-mix-outer > .content-mix {
        width: 75vw;
        height: 75vw;
    }

    .container-mix {
        margin-left: 10vw;
    }

    .container-mix.ar {
        margin-right: 10vw;
    }

    .footer {
        flex-direction: column;
    }

    /* .footer-column {
        margin: 10px 0;
    } */

    .h3 {
        font-size: 28px;
    }

    .footer-column ul li {
        font-size: 22px;
    }

    .bottom-div {
        padding: 10px;
        font-size: 13px;
    }

    .custom-background {
        min-height: auto;
    }
}

@media screen and (max-width: 650px) {
    .pl-sm-20 {
        padding: 0 20px;
    }

    .mt-20-sm {
        margin-top: 30px !important;
    }
    .mic-pic {
        padding: 4px !important;
    }

    .font-computer-h1 {
        font-size: 42px !important;
    }

    .font-computer-h3,
    .font-computer-h3.only {
        font-size: 28px !important;
    }

    .mt-s-none {
        margin-top: 0;
    }

    .button {
        padding: 8px 32px;

        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .font-computer-h1 {
        font-size: 36px !important;
    }

    .content-mix-text > p {
        width: 100%;
        font-size: 4vw;
    }

    .content-mix-text > p.message {
        font-size: 4vw;
    }

    .inside-all-data.not-an-image > h3 {
        font-size: 6vw;
    }

    .image-icon-right-icon,
    .image-icon-right-icon.top-left {
        font-size: 8vw;
    }

    .image-icon-text {
        font-size: 3vw;
    }

    .content-mix-text {
        /* width: 100%; */
        width: 90vw;
    }

    .content-mix-text > h1 {
        font-size: 10vw;
    }

    .content-mix {
        width: 90vw;
        height: 90vw;
        box-sizing: border-box;
    }

    .container-mix {
        margin-left: 0vw;
        max-width: 100%;
    }

    .container-mix.ar {
        margin-right: 0vw;
    }

    .footer {
        padding: 30px 10px;
    }

    .footer-column {
        margin: 5px 0;
    }

    .h3 {
        font-size: 24px;
    }

    .footer-column ul li {
        font-size: 18px;
    }

    .bottom-div {
        padding: 5px;
        font-size: 12px;
    }
}

.unselectable {
    -webkit-user-select: none;
    /* Chrome, Safari, Opera */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}