:root {
    --gradient: linear-gradient(90deg, rgba(114, 39, 189, 1) 0%, rgba(237, 29, 36, 1) 100%);
    --primary: #ED1D24;
    --secondary: #7227BD;
    --white: #FFFFFF;
    --black: #000000;
    --blue: #0C0041;
    --blue-dark: #0D141E;
    --mute: #F5F5F5;
    --mute1: #E5E5E5;
    --light-text: #525252;
    --light-text1: #D4D6D7;
    --grey-text: #444444;
    --mute-text: #758495;
    --section-padding: 90px 0;
    --heading-font: "Inter", sans-serif;
    --body-font: "Lato", sans-serif;
}

body {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--light-text);
    font-weight: 500;
}

a {
    display: inline-block;
    color: var(--primary);
    text-decoration: none;
}

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

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.animated {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.gradientText {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/*** 
=============================================
    Float Bob Y Animation Css
=============================================
***/
@-webkit-keyframes float-bob-y {
    0% {
        transform: translateY(-30px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(-30px);
    }
}

@keyframes float-bob-y {
    0% {
        transform: translateY(-30px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(-30px);
    }
}

.float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/***
=============================================
Scroll To Top Css
=============================================
***/
.scroll-to-top {
    display: flex;
    align-items: center;
    width: auto;
    height: 35px;
    background: transparent;
    position: fixed;
    bottom: 60px;
    right: -12px;
    z-index: 99;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: rotate(-90deg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.scroll-to-top:hover {
    color: var(--primary);
}

.scroll-to-top__text {
    display: inline;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-left: 10px;
}

.scroll-to-top__wrapper {
    display: inline-block;
    width: 30px;
    height: 4px;
    background-color: var(--primary);
    position: relative;
    overflow: hidden;
}

.scroll-to-top__inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    bottom: 70px;
}

/* Common Button Css Start */
.cmnBtn {
    position: relative;
    background: var(--gradient);
    font-size: 18px;
    color: var(--white);
    font-weight: 600;
    padding: 12px 30px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease 0s;
    z-index: 1;
}

/* Add a :hover effect to the common button */
.cmnBtn:hover {
    opacity: .85;
    color: var(--white);
}

.blueBtn.cmnBtn {
    background: var(--blue);
}

/* Common Button Css End */


/* Header Css End */
.hdrBlock {
    position: relative;
    background-color: var(--white);
    border-bottom: 1px solid transparent;
    padding: 10px 0;
    z-index: 2;
}

.hdrFixed {
    background-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    border-bottom: 1px solid #4B4B4B;
    z-index: 1;
}

.hdrLogo .gmarkWhiteLogo {
    display: none;
}

.hdrFixed .hdrLogo .gmarkWhiteLogo {
    display: inline-block;
}

.hdrFixed .hdrLogo .gmarkLogo {
    display: none;
}

.hdrRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.hdrMenuList>ul>li {
    display: inline-block;
}

.hdrMenuList>ul>li+li {
    margin-left: 6px;
}

.hdrMenuList>ul>li>a,
.hdrMenuList>ul>li>button {
    background: transparent;
    position: relative;
    font-size: 16px;
    color: var(--mute-text);
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    transition: all 0.3s ease 0s;
}

.hdrFixed .hdrMenuList>ul>li>a,
.hdrFixed .hdrMenuList>ul>li>button {
    color: var(--white);
}

.hdrMenuList>ul>li>a>i {
    position: relative;
    top: -11px;
    left: 6px;
}

.hdrMenuList>ul>li>a:hover,
.hdrMenuList>ul>li>button:hover {
    color: var(--primary);
}

.hdrMenuList>ul>li>a.active,
.hdrMenuList>ul>li>button.show {
    background-color: var(--blue);
    color: var(--white);
}

.hdrFixed .hdrMenuList>ul>li>a.active,
.hdrFixed .hdrMenuList>ul>li>button.show {
    background-color: rgba(65, 105, 225, 0.15);
    color: var(--primary);
}

.menuDrpdwnBtn {
    padding-right: 32px !important;
}

.menuDrpdwnBtn::after {
    display: none;
}

.menuDrpdwnBtn i {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease 0s;
}

.menuDrpdwnBtn.show i {
    transform: rotate(180deg);
}

.menuDrpdwnBtn i svg {
    width: 20px;
    height: 20px;
}

.menuDrpdwnCntnr {
    background: rgba(10, 15, 38, 0.78);
    width: 100%;
    max-width: 678px;
    padding: 0;
    border: 1px solid rgba(99, 130, 241, 0.15);
    border-radius: 1rem;
    left: -20% !important;
    top: 10px !important;
    backdrop-filter: blur(24px);
    box-shadow: rgba(0, 0, 0, 0.6) 0px 24px 80px;
}

.menuDrpHdr {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 28px;
    border-bottom: 1px solid rgba(99, 130, 241, 0.15);
}

.menuDrpHdr i {
    background: var(--gradient);
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.menuDrpHdr i svg {
    width: 20px;
    height: 20px;
}

.menuDrpHdr h4 {
    font-size: 17px;
    color: var(--white);
    font-weight: 600;
    line-height: 22px;
    margin: 0;
}

.menuDrpHdr p {
    font-size: 15px;
    color: var(--white);
    font-weight: 500;
    line-height: 22px;
    opacity: 0.45;
    margin: 0;
}

.menuDrpBdy {
    padding: 16px;
}

.menuDrpBdy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.menuDrpBdy ul li {
    width: calc(50% - 6px);
}

.menuDrpBdy ul li a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 16px;
    transition: all 0.3s ease 0s;
}

.menuDrpBdy ul li a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.menuDrpBdy ul li a i {
    background-color: rgba(65, 105, 225, 0.125);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: 1px solid rgba(65, 105, 225, 0.19);
    border-radius: 12px;
}

.menuDrpBdy ul li a i svg {
    width: 20px;
}

.menuDrpBdy ul li a h5 {
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    line-height: 22px;
    margin: 0;
}

.menuDrpBdy ul li a p {
    font-size: 14px;
    color: var(--white);
    font-weight: 500;
    line-height: 20px;
    opacity: 0.4;
    margin: 0;
}

.menuDrpFtr {
    background: rgba(65, 105, 225, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 28px;
    border-top: 1px solid rgba(99, 130, 241, 0.15);
}

.menuDrpFtrLink {
    font-size: 15px;
    color: var(--primary);
    font-weight: 600;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    transition: all 0.3s ease 0s;
}

.menuDrpFtrLink i svg {
    width: 20px;
    height: 20px;
}

.menuDrpFtrLink:hover {
    gap: 12px;
}

.menuDrpFtr .cmnBtn {
    font-size: 14px;
    padding: 8px 16px;
    gap: 8px;
    border-radius: 8px;
}

.menuDrpFtr .cmnBtn i svg {
    width: 20px;
}

.hdrOptns {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hdrGetEstimateBtn a {
    position: relative;
    background: var(--gradient);
    font-size: 16px;
    color: var(--white);
    font-weight: 500;
    padding: 8px 24px;
    border: 0;
    transition: all 0.3s ease 0s;
    z-index: 1;
}

.hdrFixed .hdrGetEstimateBtn a {
    background: transparent;
}

.hdrFixed .hdrGetEstimateBtn a::before {
    position: absolute;
    content: "";
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gradient);
    -webkit-mask:
        linear-gradient(var(--white) 0 0) content-box,
        linear-gradient(var(--white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.hdrGetEstimateBtn a:hover {
    background: var(--gradient);
    color: var(--white);
    opacity: .85;
}

.hdrFixed .hdrGetEstimateBtn a:hover {
    opacity: 1;
}

.hdrFixed .hdrGetEstimateBtn a:hover::before {
    opacity: 0;
}

.hdrMenuBtn a {
    display: inline-block;
}

.hdrMenuBtn .menuWhiteIcon {
    display: none;
}

.hdrFixed .hdrMenuBtn .menuWhiteIcon {
    display: inline-block;
}

.hdrFixed .hdrMenuBtn .menuDarkIcon {
    display: none;
}


.tw-menu-bar {
    display: block;
    text-align: right;
    padding: 0;
    width: 30px;
    line-height: 2px;
}

.tw-menu-bar span:nth-child(2) {
    width: 24px;
}

.tw-menu-bar:hover {
    cursor: pointer;
}

.tw-menu-bar span {
    display: inherit;
    background: #fff;
    height: 3px;
    width: 100%;
}

.tw-menu-bar span:nth-child(2) {
    margin: 5px 0;
    width: 30px
}

.tw-menu-bar span:nth-child(1),
.tw-menu-bar span:nth-child(2),
.tw-menu-bar span:nth-child(3) {
    -webkit-animation: animateline 2s infinite linear;
    animation: animateline 2s infinite linear
}

.tw-menu-bar span:nth-child(2) {
    -webkit-animation-delay: 2s;
    animation-delay: 1s
}

.tw-menu-barspan:nth-child(3) {
    -webkit-animation-delay: 3s;
    animation-delay: 2s
}

@-webkit-keyframes animateline {
    0% {
        width: 20%
    }

    50% {
        width: 100%
    }

    100% {
        width: 20%
    }
}

@keyframes animateline {
    0% {
        width: 20%
    }

    50% {
        width: 100%
    }

    100% {
        width: 20%
    }
}

.hdrMenuBtn {
    transform: rotate(-180deg);
}

.hdrBlock.hdrFixed .tw-menu-bar span {
    background: var(--white) !important;
}

.hdrBlock .tw-menu-bar span {
    background: var(--primary) !important;
}

.mobile-menu {
    background-image: url("../images/menu-card.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mobile-menu-header {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 20px 10px 10px 10px;
    background: #fff;
}

.btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
}

.mobile-menu-content {
    max-height: calc(100vh - 82px);
    overflow: auto;
}

.mobile-menu-list>ul>li {
    display: block;
    border-bottom: 1px solid #383838;
}

.mobile-menu-list>ul>li>a,
.mobile-menu-list>ul>li>button {
    position: relative;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    padding: 15px 20px;
    width: 100%;
    border: 0;
    transition: all 0.5s ease-in-out;
}

.mobile-menu-list>ul>li>a:hover,
.mobile-menu-list>ul>li>button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.mobile-menu-list .menuDrpdwnBtn i {
    top: 15px;
}

.mobile-menu-list .menuDrpdwnCntnr {
    position: static !important;
    border: 0;
    border-radius: 0;
    transform: inherit !important;
}

.mobile-menu-list .menuDrpHdr {
    display: none;
}

.mobile-menu-list .menuDrpBdy ul li {
    width: calc(100% - 6px);
}

.menu-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0;
    justify-content: center;
}

.menu-social a {
    background: transparent;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary);
    border-radius: 40px;
    transition: all .5s ease-in-out;
}

.menu-social a:hover {
    background: var(--gradient);
    color: var(--white);
}

/* Header Css End */

/* Main Banner Css Start */
.mainBnrBlock {
    position: relative;
    background-image: url("../images/banner-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 250px 0;
    overflow: hidden;
}

.mainBnrCntnt {
    text-align: center;
}

.mainBnrCntnt h1 {
    font-size: 80px;
    color: var(--white);
    font-weight: 700;
    line-height: 90px;
    margin: 0;
}

.mainBnrCntnt p {
    font-size: 20px;
    color: var(--white);
    font-weight: 500;
    line-height: 32px;
    max-width: 900px;
    margin: 20px auto;
}

.mainBnrBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Main Banner Css End */

/* Rating Bar Css Start */
.mainBnrBtm {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.mainBnrBtmList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.mainBnrBtmList p {
    font-size: 18px;
    color: var(--white);
    font-weight: 400;
    line-height: 26px;
}

.mainBnrBtmList span {
    font-size: 14px;
    font-size: 18px;
    color: var(--white);
    font-weight: 400;
    line-height: 26px;
}

.mainBnrBtmList>i {
    background: var(--gradient);
    width: 6px;
    height: 6px;
    border-radius: 6px;
}

.mainBnrBtmList>em {
    background-color: rgba(255, 255, 255, 0.15);
    font-style: normal;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
}

.mainBnrBtmList>em i {
    font-style: normal;
}

.mainBnrBtmList>em span {
    margin-left: 8px;
}

/* Rating Bar Css End */

/* Clients Css Start */
.clntsBlock {
    background-color: var(--blue);
    padding: 40px 0;
    overflow: hidden;
}

.clntHdng {
    position: relative;
    text-align: center;
    margin-bottom: 32px;
    z-index: 1;
}

.clntHdng::before {
    background: var(--white);
    position: absolute;
    content: "";
    left: 0;
    top: 14px;
    right: 0;
    height: 1px;
    opacity: 0.25;
    z-index: -1;
}

.clntHdng h6 {
    position: relative;
    background-color: var(--blue);
    font-size: 18px;
    color: var(--white);
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    padding: 0 20px;
    margin: 0;
}

.clntSldr {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    width: fit-content;
}

.clntSldr span {
    float: left;
    margin-right: 60px;
}

/* Clients Css End */

/* Main Heading Css Start */
.mainHdng {
    margin-bottom: 60px;
}

.mainHdng>h6 {
    font-size: 18px;
    color: var(--primary);
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
}

.mainHdng>h6 span {
    color: var(--light-text);
    text-transform: initial;
}

.mainHdng>h2 {
    font-size: 56px;
    color: var(--blue);
    font-weight: 700;
    line-height: 68px;
    margin: 0;
}

.white.mainHdng>h2 {
    color: var(--white);
}

.medium.mainHdng>h2 {
    font-size: 48px;
    line-height: 60px;
}

.small.mainHdng>h2 {
    font-size: 42px;
    line-height: 52px;
}

.mainHdng>h2 span {
    color: var(--gradient);
}

.mainHdng>p {
    font-size: 18px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 28px;
    margin: 16px 0 0 0;
}

.white.mainHdng>p {
    color: var(--white);
}

.text-center.mainHdng>p {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.hdngBrdr {
    text-align: center;
    margin-top: 48px;
}

.hdngBrdr span {
    background: var(--gradient);
    width: 80px;
    height: 3px;
    display: inline-block;
}

/* Main Heading Css End */

/* About Css Start */
.abtBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.abtInfoList {
    margin-top: 40px;
}

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

.abtInfoItem+.abtInfoItem {
    margin-top: 40px;
}

.abtInfoItem h3 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 56px;
    min-width: 160px;
    margin: 0;
}

.abtInfoItem h3 span {
    display: inline-block;
    min-width: 96px;
}

.abtInfoItem p {
    font-size: 18px;
    color: var(--blue);
    font-weight: 800;
    line-height: 24px;
    margin: 0;
}

.abtCntntBtn {
    margin-top: 72px;
}

.abtImg img {
    max-width: 100%;
    border-radius: 12px;
}

/* About Css End */


/* Services Css Start */
.srvcsBlock {
    position: relative;
    background-image: url("../images/services-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: var(--section-padding);
    overflow: hidden;
}

.srvcItem {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    padding: 60px 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease 0s;
    min-height: 384px;
}

.dark.srvcItem {
    border-color: var(--light-text1);
}

.srvcItem:hover {
    background: var(--gradient);
    border-color: transparent;
}

.srvcItem i {
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.dark.srvcItem:hover i {
    filter: invert(1);
}

.srvcItem h4 {
    font-size: 24px;
    color: var(--white);
    font-weight: 700;
    line-height: 30px;
    padding-right: 40px;
    margin: 16px 0;
    transition: all 0.3s ease 0s;
}

.dark.srvcItem h4 {
    color: var(--blue);
}

.dark.srvcItem:hover h4 {
    color: var(--white);
}

.srvcItem p {
    font-size: 16px;
    color: var(--light-text1);
    font-weight: 500;
    line-height: 24px;
    margin: 0;
    transition: all 0.3s ease 0s;
}

.dark.srvcItem p {
    color: var(--light-text);
}

.dark.srvcItem:hover p {
    color: var(--light-text1);
}

/* Services Css End */

/* Solutions Css Start */
.solutnsBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.solutnInfo {
    background-image: url("../images/text-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 50px;
    border-radius: 10px;
}

.solutnInfo h3 {
    font-size: 32px;
    color: var(--white);
    font-weight: 600;
    line-height: 40px;
    margin: 0;
}

.solutnInfo h3 span {
    color: var(--gradient);
}

.solutnInfo p {
    font-size: 18px;
    color: var(--white);
    line-height: 28px;
    margin: 24px 0;
}

.solutnItem {
    position: relative;
    background-color: var(--mute);
    padding: 60px 40px;
    border-radius: 12px;
    transition: all 0.3s ease 0s;
}

.solutnItem::before {
    position: absolute;
    content: "";
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gradient);
    -webkit-mask:
        linear-gradient(var(--white) 0 0) content-box,
        linear-gradient(var(--white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.solutnItem:hover::before {
    opacity: 1;
}

.solutnItem i {
    display: inline-block;
}

.solutnItem h4 {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
    line-height: 30px;
    padding-right: 130px;
    margin: 16px 0;
}

.solutnItem p {
    font-size: 16px;
    color: var(--grey-text);
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

/* Solutions Css End */

/* Case Study Css Start */
.caseStudyBlock {
    position: relative;
    background-color: #080325;
    background-image: radial-gradient(circle at 50% 20%, rgba(147, 51, 234, 0.15), transparent 70%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1), transparent 60%);
    padding: var(--section-padding);
    overflow: hidden;
}

.csAccordionWrapper {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    height: 540px;
    width: 100%;
}

.csCard {
    position: relative;
    flex: 1;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--bg-img);
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s ease, filter 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.csCard:not(.active) {
    filter: brightness(0.65);
}

.csCard:hover,
.csCard.active {
    flex: 2.5;
    filter: brightness(1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.3);
}

.csBadge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    z-index: 3;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.csCard:hover .csBadge,
.csCard.active .csBadge {
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.csOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(237, 29, 36, 0) 6%,
            rgba(170, 34, 119, 0.55) 56%,
            rgba(114, 39, 189, 1) 98%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 28px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.csCard:hover .csOverlay,
.csCard.active .csOverlay {
    opacity: 1;
    visibility: visible;
}

.csContent {
    position: relative;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, visibility 0.4s ease 0.1s;
}

.csCard:hover .csContent,
.csCard.active .csContent {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.csContent h3 {
    font-size: 28px;
    color: var(--white);
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 34px;
    white-space: nowrap;
}

.csContent p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 22px;
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.csArrowBtn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.csArrowBtn:hover {
    background: var(--white);
    color: var(--blue);
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .csAccordionWrapper {
        display: block;
        flex-direction: column;
        height: auto;
    }

    .csCard {
        width: 100%;
        height: 340px;
    }

    .csCard+.csCard {
        margin-top: 30px;
    }

    .csCard:hover,
    .csCard.active {
        flex: 1;
        height: 340px;
    }
}

/* Case Study Css End */

/* Testimonials Css Start */
.tstmnlBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.tstmnlSldrOuter {
    background-image: url("../images/testimonial-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 40px;
    box-shadow: 0 3px 16px 4px rgba(0, 0, 0, .1);
    border-radius: 12px;
    overflow: hidden;
}

.testimonialSwiper .swiper-wrapper {
    height: auto;
}

.testi-tp-dis p {
    font-size: 20px;
    color: var(--white);
    line-height: 35px;
    margin-bottom: 0;
}

.clnt-img {
    padding-left: 90px;
    position: relative;
    margin-top: 30px;
}

.clnt-rvew-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.clnt-rvew-img img {
    width: 70px;
    height: 70px;
}

.clnt-rvew-dtl h4 {
    font-size: 24px;
    color: var(--primary);
    font-weight: 600;
    margin: 0;
}

.clnt-rvew-dtl p {
    font-size: 20px;
    color: var(--white);
    margin: 6px 0 0 0;
}

/* Testimonials Css End */

/* Sliding Text Css Start */
.sliding-text-one {
    position: relative;
    display: block;
    background-image: url("../images/slider-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 32px 0 42px 0;
    z-index: 4;
    overflow: hidden;
}

.sliding-text-one__wrap {
    position: relative;
    display: block;
}

.sliding-text-one__list {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    width: fit-content;
}

.sliding-text-one__list li {
    position: relative;
    display: block;
    float: left;
    margin-right: 35px;
}

.sliding-text-one__title {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
    font-size: 42px;
    line-height: 42px;
    margin-bottom: 0;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sliding-text-one__list li:hover .sliding-text-one__title {
    color: var(--blue);
}

.sliding-text-one__title:before {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    color: var(--blue);
    white-space: nowrap;
    content: attr(data-hover);
    transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87);
}

.sliding-text-one__list li:hover .sliding-text-one__title:before {
    width: 100%;
    color: var(--primary);
}

.sliding-text-one__title img {
    margin-left: 35px;
    position: relative;
    width: auto;
    animation: textRotate 10s linear 0s forwards infinite alternate;
}

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

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

/* Sliding Text Css End */

/* Technology Css Start */
.techBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.subs-tab .sub-dis-btn {
    text-align: center
}

.subs-tab .nav.nav-tabs {
    border-bottom: 1px solid var(--light-text1)
}

.subs-tab .nav-tabs {
    position: relative;
    clear: both;
    display: inline-block
}

.subs-tab .nav-tabs>.nav-item {
    float: left;
    margin-bottom: 0;
    margin-right: 40px
}

.subs-tab .nav-tabs>.nav-item>button {
    margin-right: 0;
    line-height: 1.42857143;
    border: 0;
    border-radius: 0;
    color: var(--blue);
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 600
}

.subs-tab .nav-tabs>.nav-item>button:hover {
    text-decoration: none;
    background-color: transparent
}

.subs-tab .nav-tabs>.nav-item>button.active,
.subs-tab .nav-tabs>.nav-item>button.active:focus,
.subs-tab .nav-tabs>.nav-item>button.active:hover {
    color: var(--primary);
    cursor: default;
    background-color: transparent;
    border: 0;
    border-bottom-color: transparent;
    border-bottom: 2px solid var(--primary)
}

.subs-tab .sub-dis {
    margin-top: 40px
}

.feature-info {
    text-align: center;
    background: var(--white);
    padding: 40px 0;
    transition: all .4s ease-in-out;
    margin-top: 20px
}

.feature-info:hover {
    box-shadow: 0 7px 10px rgba(14, 19, 43, .05);
    transform: translateY(-5px)
}

.feature-info-icon span {
    filter: grayscale(100%)
}

.feature-info:hover .feature-info-icon span {
    filter: grayscale(0)
}

.feature-info:hover {
    box-shadow: 0 7px 10px rgba(14, 19, 43, .05);
    transform: translateY(-5px)
}

.feature-info .feature-info-content {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.feature-info-title {
    font-size: 20px;
    margin-top: 25px
}

.sprite {
    display: inline-block;
    vertical-align: middle;
    background-image: url(../images/cms.png);
    background-position: left center;
    background-repeat: no-repeat
}

.sprite.drupal_png {
    background-position: 0 0;
    width: 40px;
    height: 40px
}

.sprite.joomla_png {
    background-position: 0 -70px;
    width: 40px;
    height: 40px
}

.sprite.magento_png {
    background-position: 0 -140px;
    width: 40px;
    height: 40px
}

.sprite.opencart_png {
    background-position: 0 -210px;
    width: 40px;
    height: 40px
}

.sprite.shopify_png {
    background-position: 0 -280px;
    width: 40px;
    height: 40px
}

.sprite.wordpress_png {
    background-position: 0 -350px;
    width: 40px;
    height: 40px
}

.sprite1 {
    display: inline-block;
    vertical-align: middle
}

.sprite1 {
    background-image: url(../images/mobile-app-icn.png);
    background-position: left center;
    background-repeat: no-repeat
}

.sprite1.android_png {
    background-position: 0 0;
    width: 40px;
    height: 40px
}

.sprite1.ionic_png {
    background-position: 0 -70px;
    width: 40px;
    height: 40px
}

.sprite1.ios_png {
    background-position: 0 -140px;
    width: 40px;
    height: 40px
}

.sprite1.kotlin_png {
    background-position: 0 -210px;
    width: 40px;
    height: 40px
}

.sprite1.react_png {
    background-position: 0 -280px;
    width: 40px;
    height: 40px
}

.sprite1.swift_png {
    background-position: 0 -350px;
    width: 40px;
    height: 40px
}

.sprite2 {
    display: inline-block;
    vertical-align: middle
}

.sprite2 {
    background-image: url(../images/backend-lst.png);
    background-position: left center;
    background-repeat: no-repeat
}

.sprite2.cake_png {
    background-position: 0 0;
    width: 40px;
    height: 40px
}

.sprite2.code_lightner_png {
    background-position: 0 -70px;
    width: 40px;
    height: 40px
}

.sprite2.java_png {
    background-position: 0 -140px;
    width: 40px;
    height: 40px
}

.sprite2.js_png {
    background-position: 0 -210px;
    width: 40px;
    height: 40px
}

.sprite2.node_png {
    background-position: 0 -280px;
    width: 40px;
    height: 40px
}

.sprite2.phython_png {
    background-position: 0 -350px;
    width: 40px;
    height: 40px
}

.sprite2.react_png {
    background-position: 0 -420px;
    width: 40px;
    height: 40px
}

.sprite2.zend_png {
    background-position: 0 -490px;
    width: 40px;
    height: 40px
}

.sprite3 {
    display: inline-block;
    vertical-align: middle
}

.sprite3 {
    background-image: url(../images/database-icns.png);
    background-position: left center;
    background-repeat: no-repeat
}

.sprite3.firebase_png {
    background-position: 0 0;
    width: 40px;
    height: 40px
}

.sprite3.mongo_png {
    background-position: 0 -70px;
    width: 40px;
    height: 40px
}

.sprite3.mssql_png {
    background-position: 0 -140px;
    width: 40px;
    height: 40px
}

.sprite3.mysql_png {
    background-position: 0 -210px;
    width: 40px;
    height: 40px
}

.sprite4 {
    display: inline-block;
    vertical-align: middle
}

.sprite4 {
    background-image: url(../images/front-end-lst.png);
    background-position: left center;
    background-repeat: no-repeat
}

.sprite4.angular_png {
    background-position: 0 0;
    width: 40px;
    height: 40px
}

.sprite4.bootstrap_png {
    background-position: 0 -70px;
    width: 40px;
    height: 40px
}

.sprite4.css_png {
    background-position: 0 -140px;
    width: 40px;
    height: 40px
}

.sprite4.html_png {
    background-position: 0 -210px;
    width: 40px;
    height: 40px
}

.sprite4.react_png {
    background-position: 0 -280px;
    width: 40px;
    height: 40px
}

.sprite4.typescript_png {
    background-position: 0 -350px;
    width: 40px;
    height: 40px
}

.sprite4.vue_png {
    background-position: 0 -420px;
    width: 40px;
    height: 40px
}

.sprite5 {
    display: inline-block;
    vertical-align: middle
}

.sprite5 {
    background-image: url(../images/ui-ux-icns.png);
    background-position: left center;
    background-repeat: no-repeat
}

.sprite5.ae_png {
    background-position: 0 0;
    width: 40px;
    height: 40px
}

.sprite5.ai_png {
    background-position: 0 -70px;
    width: 40px;
    height: 40px
}

.sprite5.corel_png {
    background-position: 0 -140px;
    width: 40px;
    height: 40px
}

.sprite5.figma_png {
    background-position: 0 -210px;
    width: 40px;
    height: 40px
}

.sprite5.photo_shop_png {
    background-position: 0 -280px;
    width: 40px;
    height: 40px
}

.sprite5.sketch_png {
    background-position: 0 -350px;
    width: 40px;
    height: 40px
}

.sprite5.xd_png {
    background-position: 0 -420px;
    width: 40px;
    height: 40px
}

.sprite2 {
    background-image: url(../images/backend-lst.png);
    background-position: left center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle
}

.sprite2.cake_png {
    background-position: 0 0;
    width: 40px;
    height: 40px
}

.sprite2.code_lightner_png {
    background-position: 0 -70px;
    width: 40px;
    height: 40px
}

.sprite2.java_png {
    background-position: 0 -140px;
    width: 40px;
    height: 40px
}

.sprite2.js_png {
    background-position: 0 -210px;
    width: 40px;
    height: 40px
}

.sprite2.node_png {
    background-position: 0 -280px;
    width: 40px;
    height: 40px
}

.sprite2.phython_png {
    background-position: 0 -350px;
    width: 40px;
    height: 40px
}

.sprite2.react_png {
    background-position: 0 -420px;
    width: 40px;
    height: 40px
}

.sprite2.zend_png {
    background-position: 0 -490px;
    width: 40px;
    height: 40px
}

/* Technology Css End */

/* Counter Css Start */
.cuntrBlock {
    position: relative;
    background-color: #070320;
    background-image: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15), transparent 70%);
    padding: 100px 0 120px 0;
    overflow: hidden;
}

.cuntrRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cuntrItem {
    text-align: center;
    flex: 1;
}

.cuntrNumber {
    font-family: var(--heading-font);
    font-size: 76px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    background: linear-gradient(180deg, #FFFFFF 0%, #C7D2FE 55%, #818CF8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.cuntrItem p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    line-height: 24px;
    margin: 14px 0 0 0;
}

.cuntrDot {
    width: 10px;
    height: 10px;
    background: var(--gradient);
    border-radius: 50%;
    box-shadow: 0 0 12px #EC4899, 0 0 20px #8B5CF6;
    flex-shrink: 0;
    margin: 0 10px;
}

.cuntrBlock::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 220px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 -4px 50px rgba(56, 189, 248, 0.45), inset 0 2px 25px rgba(56, 189, 248, 0.35);
    border-top: 2px solid rgba(56, 189, 248, 0.6);
    pointer-events: none;
}

/* Counter Css End */

/* Teams Css Start */
.teamsBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.crclShapeLargeIcon {
    text-align: center;
    margin-top: 160px;
}

.crclShapeLargeIcon img {
    width: 320px;
}

.teamItem {
    position: relative;
}

.teamItem+.teamItem {
    margin-top: 48px;
}

.teamItemRight {
    margin-top: 60px;
}

.teamMedia {
    position: relative;
}

.teamMedia img {
    max-width: 100%;
}

.teamShare {
    position: absolute;
    right: 20px;
    bottom: -30px;
}

.teamShare a {
    background: var(--gradient);
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    transition: all 0.3s ease 0s;
}

.teamShare a img {
    width: 20px;
}

.teamInfo {
    margin-top: 20px;
}

.teamInfo h4 {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
    line-height: 32px;
    margin: 0;
}

.teamInfo p {
    font-size: 16px;
    color: var(--primary);
    font-weight: 500;
    line-height: 20px;
    margin: 4px 0 0 0;
}

/* Teams Css End */

/* Awards Css Start */
.awrdBlock {
    position: relative;
    background-image: url("../images/awards-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: var(--section-padding);
    overflow: hidden;
}

.awardItem {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 100%;
}

.awardItem img {
    max-width: 100%;
}

.awrdCntnt {
    text-align: right;
}

.awrdCntctBtn {
    margin-top: 24px;
}

/* Awards Css End */

/* News Css Start */
.newsBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.newsItem {
    transition: all 0.3s ease 0s;
}

.newsMedia a {
    display: block;
    border-radius: 6px;
    overflow: hidden;
}

.newsMedia a img {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.newsCntnt {
    margin-top: 24px;
}

.newsMeta span {
    background: var(--gradient);
    font-size: 14px;
    color: var(--white);
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 16px;
}

.newsMeta i {
    position: relative;
    font-size: 14px;
    color: var(--light-text);
    font-weight: 500;
    font-style: normal;
    line-height: 16px;
    padding-left: 48px;
}

.newsMeta i::before {
    background-color: var(--light-text);
    position: absolute;
    content: "";
    width: 20px;
    height: 1px;
    left: 18px;
    top: 9px;
}

.newsCntnt h3 {
    font-size: 26px;
    color: var(--blue);
    font-weight: 700;
    line-height: 32px;
    margin: 16px 0 0 0;
}

.newsCntnt h3 a {
    color: var(--blue);
    transition: all 0.3s ease 0s;
}

.newsItem:hover h3,
.newsItem:hover h3 a {
    color: var(--primary);
}

/* News Css End */

/* Footer Css Start */
.ftrBlock {
    position: relative;
    background: var(--blue-dark);
    overflow: hidden;
}

.ftrIcon {
    position: absolute;
    right: 40px;
    top: 40px;
}


.ftrMain {
    padding: var(--section-padding);
}

.ftrLogo a {
    display: inline-block;
}

.ftrWdgt+.ftrWdgt {
    margin-top: 24px;
}

.ftrWdgt>h4 {
    font-size: 24px;
    color: var(--white);
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 32px;
}

.ftrWdgt>h5 {
    font-size: 20px;
    color: var(--white);
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 20px;
}

.ftrCntctItem {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ftrCntctItem+.ftrCntctItem {
    margin-top: 40px;
}

.ftrCntctItem p {
    font-size: 17px;
    color: var(--white);
    font-weight: 600;
    margin: 0;
}

.ftrCntctItem p a {
    color: var(--white);
}

.ftrCntctItem span {
    display: inline-block;
    font-size: 14px;
    color: var(--light-text1);
    font-weight: 400;
}

.nwsltrForm form {
    position: relative;
    margin: 0;
}

.nwsltrForm input {
    background-color: transparent;
    font-size: 18px;
    color: var(--white);
    height: 60px;
    padding: 8px 48px 8px 24px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    transition: all 0.3s ease 0s;
}

.nwsltrForm input:hover,
.nwsltrForm input:focus {
    background-color: transparent;
    border-color: var(--white);
    box-shadow: none;
}

.nwsltrForm input::placeholder {
    color: var(--white);
}

.nwsltrForm button {
    background-color: transparent;
    border: 0;
    padding: 0;
    position: absolute;
    top: 20px;
    right: 20px;
}

.quickLinks ul {
    margin-top: -12px;
}

.quickLinks li {
    display: inline-block;
    width: 32%;
    margin-top: 12px;
}

.quickLinks li a {
    font-size: 16px;
    color: var(--light-text1);
    transition: all 0.3s ease 0s;
}

.quickLinks li a:hover {
    color: var(--primary);
}

.ftrPhone a {
    font-size: 32px;
    color: var(--light-text1);
    font-weight: 700;
    line-height: 40px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.ftrPhone a:hover {
    color: var(--primary);
}

.ftrPhone p {
    font-size: 18px;
    color: var(--light-text1);
    line-height: 26px;
    margin: 8px 0 0 0;
}

.ftrScl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 32px 0 60px 0;
}

.ftrScl a {
    background: transparent;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: var(--gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
    transition: all 0.3s ease 0s;
}

.ftrScl a:hover {
    background: var(--gradient);
    color: var(--white);
}

.ftrRvws {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ftrBtm {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
}

.copyright p {
    font-size: 16px;
    color: var(--white);
    line-height: 24px;
    margin: 0;
}

/* Footer Css End */


/* Services Page Css Start */
.srvcBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
    z-index: 1;
}

.darkHdrBg {
    background-image: url("../images/dark-hdr-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.lightBg {
    background-color: var(--mute);
}

.darkBg {
    background-image: url("../images/dark-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.gradientBg {
    background: var(--gradient);
}

.srvcMedia {
    position: relative;
    text-align: center;
    z-index: -1;
}

.srvcMedia img {
    max-width: 100%;
}

.srvcMainBlock .srvcMedia img {
    width: 100%;
    border-radius: 12px;
}

.srvcCntnt h6 {
    font-size: 18px;
    color: var(--primary);
    font-weight: 500;
}

.srvcCntnt h1 {
    font-size: 48px;
    color: var(--white);
    font-weight: 600;
    margin: 10px 0 0 0;
}

.srvcCntnt h3 {
    font-size: 48px;
    color: var(--blue);
    font-weight: 600;
    margin: 0;
}

.srvcCntnt h3 a {
    color: var(--blue);
}

.darkHdrBg .srvcCntnt h3,
.darkBg .srvcCntnt h3,
.gradientBg .srvcCntnt h3,
.darkHdrBg .srvcCntnt h3 a,
.darkBg .srvcCntnt h3 a,
.gradientBg .srvcCntnt h3 a {
    color: var(--white);
}

.srvcCntnt p {
    font-size: 18px;
    color: var(--mute-text);
    line-height: 34px;
    margin: 30px 0 0 0;
}

.darkHdrBg .srvcCntnt p,
.darkBg .srvcCntnt p,
.gradientBg .srvcCntnt p {
    color: var(--white);
}

.srvcCntnt ul {
    margin-top: 30px;
}

.srvcCntnt ul li {
    position: relative;
    font-size: 17px;
    color: var(--blue);
    font-weight: 500;
    padding-left: 40px;
    margin-bottom: 20px;
}

.darkHdrBg .srvcCntnt ul li,
.darkBg .srvcCntnt ul li,
.gradientBg .srvcCntnt ul li {
    color: var(--white);
}

.srvcCntnt ul li::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    content: '';
    background: var(--primary);
}

.srvcBtmText {
    -webkit-text-stroke-color: var(--blue);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    font-size: 130px;
    font-weight: 600;
    line-height: 130px;
    position: absolute;
    bottom: -10px;
    right: 0;
    opacity: .2 !important;
    text-transform: uppercase;
    z-index: -1;
}

.darkHdrBg .srvcBtmText,
.darkBg .srvcBtmText,
.gradientBg .srvcBtmText {
    -webkit-text-stroke-color: var(--white);
}

.srvcBtmText.left {
    left: 0;
    right: inherit;
}

.srvcsPgBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

/* Services Page Css End */

/* Service Detail Page Css Start */
.srvcHowBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.srvcHowItem {
    position: relative;
    padding: 32px;
    border-radius: 12px;
    height: 100%;
    transition: all 0.3s ease 0s;
}

.srvcHowItem::before {
    position: absolute;
    content: "";
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gradient);
    -webkit-mask:
        linear-gradient(var(--white) 0 0) content-box,
        linear-gradient(var(--white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.srvcHowItem:hover::before {
    opacity: 1;
}

.srvcHowItem i {
    display: inline-block;
    width: 60px;
    height: 60px;
}

.srvcHowItem i img {
    width: 60px;
    height: 60px;
}

.srvcHowItem h4 {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
    line-height: 30px;
    margin: 16px 0 0 0;
}

.srvcHowItem p {
    font-size: 16px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 16px 0 0 0;
}

.srvcDvlpFrmBlock {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

.dvlpFrm .formGroup input {
    background-color: var(--white);
    font-size: 16px;
    color: var(--black);
    padding: 10px 20px;
    height: 51px;
    border: 1px solid var(--mute1);
    border-radius: 8px;
    box-shadow: none;
}

.srvcStepBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.step-icn {
    position: relative;
    height: 60px;
    margin-bottom: 35px;
}

.step-icn::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 110%;
    height: 1.5px;
    background: var(--white);
    content: '';
    transition: all .5s ease-in-out;
}

.step-choose-card:hover .step-icn::before {
    background: var(--primary);
}

.stp-num {
    background: var(--gradient);
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    box-shadow: 0 7px 10px rgba(14, 19, 43, .05);
}

.stp-num img {
    width: 36px;
}

.step-choose-dis h3 {
    font-size: 24px;
    color: var(--white);
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
}

.step-choose-dis p {
    font-size: 17px;
    color: var(--white);
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 0;
}

.srvcChoseBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.srvcChooseMedia {
    position: absolute;
    left: 0;
    top: 0;
    bottom: -1px;
    width: calc(50% - 16px);
}

.srvcChooseMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.srvcChooseCntnt h3 {
    font-size: 32px;
    color: var(--white);
    font-weight: 600;
    line-height: 40px;
    margin: 0;
}

.srvcChooseCntnt p {
    font-size: 17px;
    color: var(--white);
    font-weight: 500;
    line-height: 24px;
    margin: 16px 0 0 0;
}

.srvcChooseCntnt ul {
    margin-top: 32px;
}

.srvcChooseCntnt ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    color: var(--white);
    font-weight: 500;
    line-height: 24px;
}

.srvcChooseCntnt ul li+li {
    margin-top: 20px;
}

.srvcWhyChoseBlock {
    position: relative;
    padding: var(--section-padding);
    padding-bottom: 0;
    overflow: hidden;
}

.whyChsRow .row {
    margin: 0;
}

.whyChsCol.col-lg-3 {
    width: 20%;
    padding: 0;
}

.whyChsItem {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 404px;
    transition: all 600ms ease;
}

.whyChsCol:first-child .whyChsItem {
    background: url("../images/one-img.png");
}

.whyChsCol:nth-child(2) .whyChsItem {
    background: url("../images/two-img.png");
}

.whyChsCol:nth-child(3) .whyChsItem {
    background: url("../images/three-img.png");
}

.whyChsCol:nth-child(4) .whyChsItem {
    background: url("../images/four-img.png");
}

.whyChsCol:last-child .whyChsItem {
    background: url("../images/fifth-img.png");
}

.whyChsItem::before {
    position: absolute;
    content: '';
    left: 0px;
    transition: all 300ms ease;
    background-color: rgba(0, 0, 0, .2);
    right: 0;
    top: 0;
    bottom: 0;
}

.whyChsItem::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(360deg, var(--primary) 20%, transparent 100%);
    z-index: 0;
    opacity: 0.8;
    transition: all 500ms ease;
}

.whyChsCol:nth-child(2n) .whyChsItem::after {
    background: linear-gradient(360deg, var(--blue) 20%, transparent 100%);
}

.whyChsCol .whyChsItem:hover::after {
    background: linear-gradient(360deg, var(--primary) 100%, transparent 100%);
    opacity: .85;
}

.whyChsCol:nth-child(2n) .whyChsItem:hover::after {
    background: linear-gradient(360deg, var(--blue) 100%, transparent 100%);
    opacity: .85;
}

.whyChsInfo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    z-index: 2;
}

.whyChsInfo i {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.whyChsInfo i img {
    width: 60px;
}

.whyChsInfo h4 {
    font-size: 22px;
    color: var(--white);
    font-weight: 500;
    line-height: 32px;
    margin: 15px 0 0 0;
}

.srvcTypoBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.trustedBlock {
    position: relative;
    background-image: url("../images/gradient-shape-bg.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: var(--section-padding);
    padding-top: 150px;
    overflow: hidden;
}

.trustedBlock h3 {
    font-size: 32px;
    color: var(--white);
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
}

/* Service Detail Page Css End */

/* Contact Us Page Css Start */
.cntctFormBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
    z-index: 1;
}

.cntctFormBlock::before {
    background-color: var(--mute);
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    width: 47%;
    z-index: -1;
}

.cntctFrmCntnt {
    padding-right: 70px;
}

.cntctFrmList ul li {
    position: relative;
    font-size: 16px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    padding-left: 24px;
    display: inline-block;
    width: 45%;
}

.cntctFrmList ul li+li {
    margin-top: 12px;
}

.cntctFrmList ul li:before {
    background-image: url("../images/rating-star.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    content: "";
    left: 0;
    top: 4px;
    width: 13px;
    height: 13px;
    z-index: -1;
}

.cntctFrmItem+.cntctFrmItem {
    margin-top: 40px;
}

.cntctFrmItem span {
    background: var(--gradient);
    font-size: 20px;
    color: var(--white);
    width: 36px;
    height: 36px;
    border-radius: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cntctFrmItem p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 20px 0 0 0;
}

.cntctFrmOuter {
    position: relative;
}

.cntctFrm .form-group label {
    font-weight: 500;
    font-size: 16px;
    color: var(--grey-text);
}

.cntctFrm .form-group .form-control {
    background-color: var(--white);
    background-image: none;
    display: block;
    font-size: 14px;
    color: var(--grey-text);
    line-height: 1.42857143;
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--grey-text);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

.cntctFrm .form-group .form-control:focus {
    border-color: var(--primary);
}

.cntctInfoBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.cntctInfoItem i {
    display: inline-block;
}

.cntctInfoItem h3 {
    font-size: 24px;
    color: var(--blue);
    font-weight: 600;
    line-height: 32px;
    margin: 20px 0 0 0;
}

.cntctInfoItem p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 16px 0;
}

.cntctInfoItem a {
    font-size: 16px;
    color: var(--blue);
    font-weight: 600;
    line-height: 24px;
    transition: all 0.3s ease 0s;
}

.cntctInfoItem a:hover {
    color: var(--primary);
}

/* Contact Us Page Css End */

/* Case Study Page Css Start */
.mainCaseStudyBlock {
    position: relative;
    overflow: hidden;
}

.mainCaseStudyOuter {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.salon.mainCaseStudyOuter {
    background-color: #F4F0E7;
}

.trueLove.mainCaseStudyOuter {
    background-color: #FFF1F4;
}

.mymedi.mainCaseStudyOuter {
    background-color: #DFF2FF;
}

.dhl.mainCaseStudyOuter {
    background-color: #FFF4D9;
}

.biorga.mainCaseStudyOuter {
    background-color: #EDDFD2;
}

.mainCaseStudyMedia {
    -webkit-filter: drop-shadow(0px 16px 36px rgba(0, 0, 0, 0.11));
    filter: drop-shadow(0px 16px 36px rgba(0, 0, 0, 0.11));
    position: relative;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 60px;
    z-index: 1;
    overflow: hidden;
    background-position: center center;
}

.mainCaseStudyMedia::before {
    background: var(--black);
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    z-index: -1;
}

.mainCaseStudyMedia img {
    max-width: 100%;
}

.case-main-hd {
    margin: 24px 0;
}

.case-main-hd h3 {
    font-size: 32px;
    color: var(--blue-dark);
    font-weight: 600;
    line-height: 45px;
    margin: 0;
}

.caseFeaCol {
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 2px solid var(--blue);
    border-radius: 12px;
    box-shadow: 0 6px 20px 4px rgba(0, 0, 0, .1);
    cursor: pointer;
    height: 100%;
    transition: all 0.3s ease 0s;
}

.salonFeaList .caseFeaCol {
    background-color: #E7DECB;
    border-color: #B6975B;
}

.trueLoveFeaList .caseFeaCol {
    background-color: #FFDCE4;
    border-color: #FF89A3;
}

.mymediFeaList .caseFeaCol {
    background-color: #CCE8FF;
    border-color: #103178;
}

.dhlFeaList .caseFeaCol {
    background-color: #FFE8AE;
    border-color: #FDB700;
}

.biorgaFeaList .caseFeaCol {
    background-color: #D9D8C4;
    border-color: #729855;
}

.caseFeaCol span {
    background-color: var(--blue);
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 8px;
    transition: all 0.3s ease 0s;
}

.salonFeaList .caseFeaCol span {
    background-color: #B6975B;
}

.trueLoveFeaList .caseFeaCol span {
    background-color: #FF89A3;
}

.mymediFeaList .caseFeaCol span {
    background-color: #103178;
}

.dhlFeaList .caseFeaCol span {
    background-color: #FDB700;
}

.biorgaFeaList .caseFeaCol span {
    background-color: #729855;
}

.caseFeaCol span img {
    max-width: 100%;
}

.caseFeaCol h4 {
    font-size: 16px;
    color: var(--blue-dark);
    font-weight: 500;
    line-height: 24px;
    margin: 0;
    transition: all 0.3s ease 0s;
}

.exlrMoreBtn {
    margin-top: 24px;
}

.exlrMoreBtn a {
    font-size: 18px;
    color: var(---blue);
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.salon .exlrMoreBtn a {
    color: #B6975B;
}

.trueLove .exlrMoreBtn a {
    color: #FF89A3;
}

.mymedi .exlrMoreBtn a {
    color: #103178;
}

.dhl .exlrMoreBtn a {
    color: #FDB700;
}

.biorga .exlrMoreBtn a {
    color: #729855;
}

.round {
    position: relative;
    width: 35px;
    height: 35px;
    border: 2px solid var(--primary);
    border-radius: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;
}

.salon .round {
    border-color: #B6975B;
}

.trueLove .round {
    border-color: #FF89A3;
}

.mymedi .round {
    border-color: #103178;
}

.dhl .round {
    border-color: #FDB700;
}

.biorga .round {
    border-color: #729855;
}

#cta {
    width: 100%;
    cursor: pointer;
}

#cta .arrow {
    left: 30%;
}

.arrow {
    position: absolute;
    bottom: 0;
    margin-left: 0px;
    background-size: contain;
    top: 4px;
    display: inline-block;
}

.segunda {
    margin-left: 8px;
}

.next {
    font-size: 20px;
}

@keyframes bounceAlpha {
    0% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }

    25% {
        opacity: 0;
        transform: translateX(10px) scale(0.9);
    }

    26% {
        opacity: 0;
        transform: translateX(-10px) scale(0.9);
    }

    55% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}

.bounceAlpha {
    animation-name: bounceAlpha;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.arrow.primera.bounceAlpha {
    animation-name: bounceAlpha;
    animation-duration: 1.4s;
    animation-delay: 0.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.round .arrow {
    animation-name: bounceAlpha;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.round .arrow.primera {
    animation-name: bounceAlpha;
    animation-duration: 1.4s;
    animation-delay: 0.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Case Study Page Css Start */

/* Case Study Detail Page Css Start */
.caseStudyPgHdrBlock {
    position: relative;
    padding: var(--section-padding);
    padding-bottom: 0;
    overflow: hidden;
    z-index: 1;
}

.caseStudyPgHdrBlock::before {
    background-color: var(--white);
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    z-index: -1;
}

.caseStudyPgImg {
    text-align: right;
}

.caseAbtBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.caseAbtItem {
    position: relative;
    background-color: var(--mute);
    padding: 60px 40px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease 0s;
}

.caseAbtItem::before {
    position: absolute;
    content: "";
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gradient);
    -webkit-mask:
        linear-gradient(var(--white) 0 0) content-box,
        linear-gradient(var(--white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.caseAbtItem:hover::before {
    opacity: 1;
}

.caseAbtItem i {
    display: inline-block;
}

.caseAbtItem h4 {
    font-size: 28px;
    color: var(--blue);
    font-weight: 700;
    line-height: 36px;
    margin: 24px 0;
}

.caseAbtItem p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

.solutnProvideBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.trueLove.solutnProvideBlock {
    background-color: #FFF1F4;
}

.solPrvdImg {
    position: absolute;
    top: 50%;
    right: 0;
    width: 835px;
    height: 458px;
    text-align: right;
    transform: translateY(-50%) !important;
}

.solPrvdImg img {
    max-width: 100%;
}

.typographyBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.typoLftSec h4 {
    font-size: 28px;
    color: var(--blue);
    font-weight: 500;
    margin: 0;
}

.typoLftFnt {
    padding-left: 130px;
    position: relative;
    margin-top: 25px;
}

.fntSmple {
    position: absolute;
    left: 0;
    font-size: 80px;
    color: #212121;
    font-family: Metropolis;
    font-weight: 500;
    top: 50%;
    transform: translateY(-50%);
}

.typoLftFnt p {
    font-size: 16px;
    color: #212121;
    line-height: 32px;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.typoFntStyle {
    font-size: 18px;
    padding-left: 130px;
    margin-top: 10px;
}

.typoFntStyle ul li {
    font-size: 17px;
    color: #222;
    font-weight: 400;
    display: inline-block;
    margin-right: 20px;
}

.regular {
    font-weight: 500 !important;
}

.semi-bld {
    font-weight: 600 !important;
}

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

.poppinsFont.typoLftSec h4,
.poppinsFont.typoLftSec p,
.poppinsFont .typoFntStyle ul li,
.poppinsFont .fntSmple {
    font-family: Poppins;
}

.typoClrRow ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
}

.typoClrRow ul li {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.typoClrRow ul li:last-child {
    margin-right: 0 !important;
}

.typoClrRow ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--white);
    width: 130px;
    height: 130px;
    border: 10px solid var(--mute);
    border-radius: 130px;
}

.prmryClr {
    background: var(--primary);
}

.scndryClr {
    background: var(--gradient);
}

.nrmlClr {
    background: var(--blue);
}

.trueLovePrmryClr.prmryClr {
    background: linear-gradient(90deg, #FF9DB3 9.93%, #FF95AD 96.63%);
}

.trueLoveScndryClr.scndryClr {
    background: #003459;
}

.trueLoveNrmlClr.nrmlClr {
    background: #363636;
}

.typoClrRow ul li p {
    font-size: 17px;
    color: #000;
    margin: 12px 0 0 0;
}

.toolBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.toolRow ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.toolRow ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.toolRow ul li img {
    width: 140px;
}

.toolRow ul li p {
    font-size: 16px;
    color: var(--black);
    font-weight: 500;
    line-height: 24px;
    margin: 16px 0 0 0;
}

.visualBlock {
    position: relative;
    background-color: var(--mute);
    padding: var(--section-padding);
    overflow: hidden;
}

.trueLoveBg.visualBlock {
    background-color: #FF89A3;
}

.visualSlider .swiper-wrapper {
    height: auto;
}

.visualSlider .swiper-slide {
    height: auto;
    transform: translateY(30px);
    transition: all .6s ease-in-out;
}

.visualSlider .swiper-slide-active .visualItem {
    box-shadow: 0 3px 16px 4px rgba(0, 0, 0, .2);
}

.visualItem {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin: 60px 0;
}

.visualItem::before {
    background-color: rgba(0, 0, 0, .15);
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
}

.visualSlider .swiper-slide-active .visualItem::before {
    opacity: 0;
}

.visualItem img {
    width: 100%;
    border-radius: 12px;
}

.currntStatBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

/* Case Study Detail Page Css End */

/* About Us Page Css Start */
.abtHdrBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
    z-index: 1;
}

.abtHdrBlock .srvcMedia img {
    width: 100%;
    border-radius: 12px;
}

.abtLongLastlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.connectBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.badgeItem a img {
    width: 100%;
}

/* About Us Page Css End */

/* Career Page Css Start */
.empoloyeeBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.emplyItem {
    position: relative;
}

.emplyQuoteIcon {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
}

.emplyQuoteIcon img {
    width: 100%;
}

.emplyQuoteInfo p {
    font-size: 18px;
    color: var(--mute-text);
    line-height: 34px;
}

.emplyQuoteImg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.emplyQuoteImg i {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    overflow: hidden;
}

.emplyQuoteImg i img {
    width: 60px;
    height: 60px;
}

.emplyQuoteImg h4 {
    font-size: 24px;
    color: var(--blue);
    font-weight: 600;
    margin: 0;
}

.emplyQuoteImg p {
    font-size: 18px;
    color: var(--primary);
    font-weight: 500;
    margin: 6px 0 0 0;
}

.employeeTabs .nav-tabs {
    justify-content: center;
    gap: 24px;
    border: 0;
}

.employeeTabs .nav-tabs>.nav-item>.nav-link {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.emplProfile {
    width: 140px;
    height: 140px;
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden;
}

.employeeTabs .nav-tabs>.nav-item>.nav-link.active .emplProfile {
    box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
}

.emplProfile img {
    filter: blur(2px) grayscale(200%) !important;
    -webkit-filter: blur(2px) grayscale(200%) !important;
    width: 100%;
    transition: all .3s ease-in-out;
}

.employeeTabs .nav-tabs>.nav-item>.nav-link.active .emplProfile img {
    filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
}

.traineBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.traineSliderOutr {
    position: relative;
}

.traineSlider .swiper-wrapper {
    height: auto;
}

.traineItem {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 750px;
    margin: 0 auto;
}

.traineMedia {
    width: 180px;
    min-width: 180px;
    height: 180px;
    border-radius: 6px;
    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, .3);
    margin: 8px 8px 24px 8px;
    overflow: hidden;
}

.traineMedia img {
    width: 180px;
    height: 180px;
}

.traineInfo p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

.traineName {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30px;
}

.traineName h4 {
    position: relative;
    font-size: 24px;
    color: var(--primary);
    font-weight: 600;
    line-height: 24px;
}

.traineName h4::before {
    background-color: var(--primary);
    position: absolute;
    content: '';
    left: -50px;
    width: 40px;
    height: 2px;
    top: 50%;
}

.traineName h4 i {
    font-size: 17px;
    color: var(--grey-text);
    font-weight: 500;
    line-height: 24px;
}

.traineSliderOutr .swiper-button-next,
.traineSliderOutr .swiper-button-prev {
    color: var(--primary);
}

.jobBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.crclShapeJobIcon,
.crclShapeJobBtmIcon {
    position: absolute;
}

.crclShapeJobIcon {
    top: 80px;
    left: 40px;
}

.crclShapeJobBtmIcon {
    right: 40px;
    bottom: 80px;
}

.crclShapeJobIcon img,
.crclShapeJobBtmIcon img {
    width: 150px;
}

.jobAccrOutr {
    max-width: 990px;
    margin: 0 auto;
}

.jobAccrOutr .accordion-item {
    background-color: transparent;
    border: 0;
}

.jobAccrOutr .accordion-item+.accordion-item {
    margin-top: 16px;
}

.jobAccrOutr .accordion-item .accordion-header .accordion-button {
    background: var(--gradient);
    font-size: 17px;
    color: var(--white);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

.jobAccrOutr .accordion-item .accordion-item .accordion-header .accordion-button {
    background: var(--white);
    color: var(--blue);
    text-decoration: underline;
}

.jobAccrOutr .accordion-item .accordion-item .accordion-header .accordion-button span {
    color: var(--light-text);
    text-decoration: none;
}

.jobAccrOutr .accordion-item .accordion-header .accordion-button::after {
    display: none;
}

.jobAccrOutr .accordion-item .accordion-header .accordion-button span {
    display: flex;
    align-items: center;
    gap: 16px;
}

.jobAccrOutr .accordion-item .accordion-body {
    padding: 20px;
}

.jobDetails {
    background-color: var(--white);
    padding: 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

.jobDetails h3 {
    position: relative;
    font-size: 20px;
    color: var(--blue);
    font-weight: 600;
    padding-bottom: 16px;
    margin: 20px 0;
}

.jobDetails h3::before {
    background-color: var(--primary);
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
}

.jobDetails p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 16px;
}

.jobDetails li {
    position: relative;
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 26px;
    padding-left: 25px;
    margin-bottom: 12px;
}

.jobDetails li::before {
    background-color: var(--primary);
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 10px;
    height: 2px;
}

.jobAplyBtn {
    margin-top: 20px;
}

.abtGalBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.abtGalItem {
    position: relative;
    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.abtGalItem img {
    width: 100%;
    transition: all .9s ease 0s;
}

.abtGalItem:hover img {
    transform: scale(1.1);
}

.abtGalLink {
    background-color: var(--white);
    position: absolute;
    font-size: 24px;
    color: var(--primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .4s ease 0s;
    transform: scale(0);
}

.abtGalItem:hover .abtGalLink {
    transform: scale(1);
}

/* Career Page Css Start */

/* Page Header Css Start */
.pageHdrBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.pageHdrLogo {
    background-color: var(--white);
    display: inline-block;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.pageHdrCntnt h6 {
    font-size: 18px;
    color: var(--primary);
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.pageHdrCntnt h1 {
    font-size: 48px;
    color: var(--white);
    font-weight: 600;
    line-height: 56px;
    margin: 0;
}

.pageHdrCntnt p {
    font-size: 17px;
    color: var(--white);
    font-weight: 500;
    line-height: 24px;
    max-width: 900px;
    margin: 24px auto 0 auto;
}

.pageHdrImg img {
    width: 100%;
    border-radius: 12px;
}

/* Page Header Css End */

/* Privacy Policy Page Css Start */

.infrmtnCntntBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.infrmtnCntnt h2 {
    font-size: 28px;
    color: var(--blue);
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 26px;
}

.infrmtnCntnt h3 {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
    margin: 0 0 26px 0;
}

.infrmtnCntnt h4 {
    font-size: 20px;
    color: var(--blue);
    font-weight: 600;
    margin: 0 0 26px 0;
}

.infrmtnCntnt p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 26px;
}

.infrmtnCntnt p strong {
    color: var(--blue);
}

.infrmtnCntnt ul {
    margin-bottom: 26px;
}

.infrmtnCntnt li {
    position: relative;
    padding-left: 55px;
}

.infrmtnCntnt li::before {
    background-color: var(--primary);
    position: absolute;
    content: "";
    left: 0;
    top: 10px;
    width: 16px;
    height: 3px;
}

.infrmtnCntnt li p {
    font-size: 16px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 10px 0;
}

/* Privacy Policy Page Css Start */

/* Get An Estimate Page Css Start */
.getEstmtBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.getEstmtItem {
    position: relative;
    transition: all 0.3s ease 0s;
}

.getEstmtItem a {
    background: var(--mute);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 40px;
    border: 1px solid var(--light-text1);
    border-radius: 12px;
    transition: all 0.3s ease 0s;
}

.getEstmtItem:hover a {
    background: var(--gradient);
}

.getEstmtItem i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.getEstmtItem i img {
    width: 120px;
    height: 120px;
    transition: all 0.3s ease 0s;
}

.getEstmtItem:hover i img {
    filter: brightness(0) invert(1);
}

.getEstmtItem h4 {
    font-size: 20px;
    color: var(--blue);
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    margin: 0;
    transition: all 0.3s ease 0s;
}

.getEstmtItem:hover h4 {
    color: var(--white);
}

.getEstmtBtm {
    max-width: 940px;
    text-align: center;
    margin: 60px auto 0 auto;
}

.getEstmtBtm p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

.getEstmtBtn {
    margin-top: 24px;
}

/* Get An Estimate Page Css End */

/* Get An Estimate Individual Page Css Start */
.getEstmtIndvdlBlock {
    position: relative;
    overflow: hidden;
}

.getEstmtPgIcon {
    position: absolute;
    right: 60px;
}

.getEstmtPgIcon img {
    width: 120px;
    height: 120px;
    filter: brightness(0) invert(1);
    opacity: 0.5;
}

.getEstmtIndvdlLft {
    padding: var(--section-padding);
}

.getEstmtIndvdlItem {
    position: relative;
    background: var(--mute);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 4px;
    border: 1px solid var(--light-text1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

.getEstmtIndvdlItem:hover {
    background: var(--gradient);
}

.getEstmtIndvdlItem i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.getEstmtIndvdlItem i img {
    height: 44px;
    transition: all 0.3s ease 0s;
}

.getEstmtIndvdlItem:hover i img {
    filter: brightness(0) invert(1);
}

.getEstmtIndvdlItem h4 {
    font-size: 15px;
    color: var(--blue);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    margin: 0;
    transition: all 0.3s ease 0s;
}

.getEstmtIndvdlItem:hover h4 {
    color: var(--white);
}

.getEstmtIndvdlSdbr {
    background-color: var(--mute);
    padding: var(--section-padding);
    padding-left: 30px;
    padding-right: 30px;
    border-left: 1px solid var(--light-text1);
    min-height: 100%;
}

.getEstmtWdgt+.getEstmtWdgt {
    border-top: 1px solid var(--light-text1);
    padding-top: 24px;
    margin-top: 24px;
}

.getEstmtWdgt h4 {
    position: relative;
    font-size: 22px;
    color: var(--blue);
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 16px;
    margin: 0;
    z-index: 1;
}

.getEstmtWdgt h4::before {
    background: var(--gradient);
    position: absolute;
    content: "";
    width: 68px;
    height: 2px;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.getEstmtSlctdList ul {
    margin-top: 24px;
}

.getEstmtSlctdList ul li {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--mute1);
    border-radius: 8px;
}

.getEstmtSlctdList ul li+li {
    margin-top: 16px;
}

.getEstmtSlctdList ul li span {
    font-size: 16px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 20px;
}

.getEstmtSlctdTtl {
    background-color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 20px;
    border-radius: 8px;
    margin-top: 24px;
}

.getEstmtSlctdTtl span {
    font-size: 18px;
    color: var(--white);
    font-weight: 600;
    line-height: 20px;
}

.getEstmtWdgt h3 {
    font-size: 28px;
    color: var(--blue);
    font-weight: 600;
    line-height: 36px;
    margin: 0;
}

.getEstmtWdgt p {
    font-size: 17px;
    color: var(--mute-text);
    font-weight: 500;
    line-height: 24px;
    margin: 16px 0 0 0;
}

.getEstmtFrm {
    margin-top: 24px;
}

.getEstmtFrmGrp input,
.getEstmtFrmGrp textarea {
    background-color: var(--white);
    font-size: 16px;
    color: var(--black);
    padding: 10px 20px;
    height: 44px;
    border: 1px solid var(--mute1);
    border-radius: 8px;
    box-shadow: none;
    transition: all 0.3s ease 0s;
}

.getEstmtFrmGrp input::placeholder,
.getEstmtFrmGrp textarea:placeholder {
    color: var(--mute-text);
}

.getEstmtFrmGrp input:focus,
.getEstmtFrmGrp textarea:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.getEstmtFrmGrp textarea {
    height: 120px;
    resize: none;
}

/* Get An Estimate Individual Page Css End */


/* 404 Error Page Css Start */
.errorBlock {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

.errorLeftIcon,
.errorRightIcon {
    position: absolute;
    width: 300px;
    top: 50%;
    transform: translateY(-50%);
}

.errorLeftIcon {
    left: 0;
}

.errorRightIcon {
    right: 0;
}

.errorLeftIcon img,
.errorRightIcon img {
    max-width: 100%;
}

.errorCntnt {
    text-align: center;
}

.errorImg {
    max-width: 540px;
    margin: 0 auto;
}

.errorImg img {
    max-width: 100%;
}

.errorCntnt h1 {
    font-size: 36px;
    color: var(--white);
    font-weight: 600;
    line-height: 44px;
    margin: 0;
}

.errorCntnt p {
    font-size: 17px;
    color: var(--white);
    font-weight: 500;
    line-height: 24px;
    opacity: 0.7;
    margin: 20px 0 0 0;
}

.errorBackBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.errorBackBtn a {
    position: relative;
    background-color: var(--white);
    font-size: 17px;
    color: var(--blue);
    font-weight: 600;
    width: 175px;
    height: 175px;
    border-radius: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
}

.errorBackBtn a::before {
    position: absolute;
    content: "";
    width: 175px;
    height: 175px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 175px;
    top: -5px;
    left: 7px;
    z-index: -1;
}

/* 404 Error Page Css End */
.copyright {
    text-align: right;
}