/*  
Theme Name:Bpract Theme
Theme URI: http://bpract.com
Description: bpract site styles
Version: 2.0
Author: bpract
Author URI: http://bpract.com
*/

/*
Improved browser CSS feature
-------------------------------------
Example: .ie8 .sidebar li{width:85px}

�ie - Internet Explorer (All versions)
�ie8 - Internet Explorer 8.x
�ie7 - Internet Explorer 7.x
�ie6 - Internet Explorer 6.x
�gecko - Mozilla, Firefox (all versions), Camino
�ff3 - Firefox 3
�ff3_5 - Firefox 3.5 new
�opera - Opera (All versions)
�opera8 - Opera 8.x
�opera9 - Opera 9.x
�opera10 - Opera 10.x
�webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
�safari3 - Safari 3.x
�chrome - Google Chrome
*/

@charset "UTF-8";

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

@font-face {
    font-family: "montserratregular";
    src: url("./assets/fonts/montserrat-regular.woff2") format("woff2"),
        url("./assets/fonts/montserrat-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "fira_sansmedium";
    src: url("./assets/fonts/fira-sans.medium.woff2") format("woff2"),
        url("./assets/fonts/fira-sans.medium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gorditaultra';
    src: url('./assets/fonts/gordita_ultra-webfont.woff2') format('woff2'),
        url('./assets/fonts/gordita_ultra-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gorditablack';
    src: url('./assets/fonts/gordita_black-webfont.woff2') format('woff2'),
        url('./assets/fonts/gordita_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gorditabold';
    src: url('./assets/fonts/gordita_bold-webfont.woff2') format('woff2'),
        url('./assets/fonts/gordita_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gorditalight';
    src: url('./assets/fonts/gordita_light-webfont.woff2') format('woff2'),
        url('./assets/fonts/gordita_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gorditamedium';
    src: url('./assets/fonts/gordita_medium-webfont.woff2') format('woff2'),
        url('./assets/fonts/gordita_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gorditaregular';
    src: url('./assets/fonts/gordita_regular-webfont.woff2') format('woff2'),
        url('./assets/fonts/gordita_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.pageLoad {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bodycolor);
    transition: all 0.3s ease;
    z-index: 99999
}

.innerloader {
    position: absolute;
    margin: auto;
    width: 50px;
    height: 95px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.innerloader>div {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 7px;
    position: absolute;
    transition: all 0.5s ease
}

.opacity0 {
    opacity: 0
}

.pageLoad.off .pageLoad.off {
    display: none
}

.innerloader>div:first-child {
    margin-left: -27px;
    animation: one 1.5s linear 1
}

.innerloader>div:nth-child(2) {
    margin-left: 27px;
    animation: two 1.5s linear 1
}

.innerloader>div:nth-child(3) {
    margin-top: 54px;
    margin-left: -27px;
    animation: four 1.5s linear 1
}

.innerloader>div:nth-child(4) {
    margin-top: 54px;
    margin-left: 27px;
    animation: three 1.5s linear 1
}

@keyframes one {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(.3)
    }

    50% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.4)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes two {
    0% {
        transform: scale(1.4)
    }

    25% {
        transform: scale(1)
    }

    50% {
        transform: scale(.3)
    }

    75% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.4)
    }
}

@keyframes three {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.4)
    }

    50% {
        transform: scale(1)
    }

    75% {
        transform: scale(.3)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes four {
    0% {
        transform: scale(.3)
    }

    25% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.4)
    }

    75% {
        transform: scale(1)
    }

    100% {
        transform: scale(.3)
    }
}

.innerloader>div.done {
    margin-left: 0;
    margin-top: 27px
}

.innerloader>div.page {
    transform: scale(40)
}

.pageLoad.off {
    opacity: 0;
    pointer-events: none
}

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box
}

:root {
    --primary-color: #48a52f;
    --secondary-color: #a0cd4e;
    --primaryOffColor: #487d3a;
    --borderlight: #214c15;
    --contactDetils: #10240b;
    --bodycolor: #08141c;
    --bodyOffcolor: #0a1821;
    --bglight: #0d1921;
    --serviceListBox: #0d1921;
    --balck: #1e1e1e;
    --para-color: #afafaf;
    --white: #fff;
    --offwhite: #e5e5e5;
    --subtitle: #c5c5c5;
    --navlink: #e1e1e1;
    --footerTextColr: #999b9f;
    --primaryfont: "gorditaregular";
    --titlefont: "gorditamedium";
    --hrdash: #3a3a3a;
    --fontLight: "gorditalight";
    --fontMedium: "gorditamedium";
    --academydark1: #192C31;
    --box-para: #1a2a38;
}

.secndfontStyle {
    font-family: var(--titlefont);
    -webkit-text-stroke: 1px #cecece;
    color: transparent;
    font-weight: 300
}

.bglight {
    background-color: var(--bglight)
}

.bgbody {
    background-color: var(--bodycolor)
}

.themecolr {
    color: var(--primary-color)
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: var(--white-background-color)
}

::-webkit-scrollbar-thumb {
    background: var(--primaryOffColor)
}

::selection {
    background: var(--primary-color);
    text-shadow: none;
    color: #fff
}

moz::selection {
    background: var(--primary-color);
    text-shadow: none;
    color: #fff
}

html {
    touch-action: manipulation;
    scroll-behavior: smooth
}

html,
body {
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    color: var(--para-color);
    background-color: var(--bodycolor);
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.7;
    font-family: var(--primaryfont);
    overflow-x: hidden;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    width: 100%;
    position: relative;
    letter-spacing: .5px
}

blockquote {
    border-radius: 4px;
    margin-right: 25px;
    padding: 5px 25px;
    color: #fff;
    background: var(--box-para);
    border-left: 8px solid #fff;
    margin-top: 15px
}

.animatn1,
.animatn2,
.animatn3 {
    position: absolute
}

.animatn1 {
    top: 200px;
    left: 30px;
    -webkit-animation: animatntranslate 8s infinite;
    animation: animatntranslate 8s infinite
}

.animatn2 {
    top: 100px;
    left: 0;
    -webkit-animation: animatnzoom 4s infinite;
    animation: animatnzoom 4s infinite
}

.animatn3 {
    top: 100px;
    right: 0;
    -webkit-animation: animatnzoom 4s infinite;
    animation: animatnzoom 4s infinite
}

.sectionTesimonial .animatn3 {
    top: 400px
}

@-webkit-keyframes animatntranslate {
    0% {
        transform: translate(-20px, 0)
    }

    50% {
        transform: translate(-20px, -80px)
    }

    100% {
        transform: translate(-20px, 0)
    }
}

@keyframes animatnzoom {
    0% {
        transform: translate(42px, 18px)
    }

    50% {
        transform: translate(42px, 18px)
    }

    100% {
        transform: translate(42px, 18px)
    }
}

@-webkit-keyframes animatnzoom {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes animatnzoom {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1)
    }
}

.vedioClipBox {
    height: 100vh;
    display: flex;
    opacity: .2;
    align-items: center
}

.vedioClip {
    -webkit-mask-image: url(../../../../../../../../../../wp-content/themes/bpract/assets/images/B.svg);
    mask-image: url(../../../../../../../../../../wp-content/themes/bpract/assets/images/B.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 18% 61%;
    -webkit-mask-size: 18% 61%;
    mask-position: 31% 75%;
    -webkit-mask-position: 31% 75%;
    position: absolute;
    transform: rotate(19deg)
}

.bpr svg path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-dasharray: 2500;
    stroke-dashoffset: 2500;
    -webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards
}

.svg2 svg {
    position: absolute;
    width: 240px;
    left: 0;
    right: 0;
    margin: auto;
    top: -122px;
    transform: rotate(290deg)
}

.svg3 svg {
    position: absolute;
    width: 100px;
    left: 150px;
    margin: auto;
    top: -152px;
    -webkit-animation: animatnzoom 4s infinite;
    animation: animatnzoom 4s infinite
}

.in-view path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-dasharray: 2500;
    stroke-dashoffset: 2500;
    -webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards
}

@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}

img {
    width: 100%;
    max-width: 100%;
    height: auto
}

.page-loader {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: var(--bodycolor);
    z-index: 1005;
    top: 0
}

.loader,
.loader:before,
.loader:after {
    background: var(--bodycolor);
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em
}

.loader {
    color: var(--primary-color);
    text-indent: -9999em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s
}

.loader:before,
.loader:after {
    position: absolute;
    top: 0;
    content: ""
}

.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s
}

.loader:after {
    left: 1.5em
}

@-webkit-keyframes load1 {

    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em
    }

    40% {
        box-shadow: 0 -2em;
        height: 5em
    }
}

@keyframes load1 {

    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em
    }

    40% {
        box-shadow: 0 -2em;
        height: 5em
    }
}

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

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s
}

.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s
}

@-webkit-keyframes bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-30px)
    }

    60% {
        -webkit-transform: translateY(-15px)
    }
}

@keyframes bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-30px)
    }

    60% {
        transform: translateY(-15px)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes shake {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

.wtrefct {
    fill: var(--primaryOffColor);
    position: absolute;
    left: -90px;
    z-index: -1;
    transform: scale(.9);
    top: -110px
}

.circle-1[data-v-1] {
    -webkit-animation: from0to360-1 3s linear infinite;
    animation: from0to360-1 3s linear infinite;
    transform-origin: 145px 150px
}

.circle-2[data-v-1] {
    -webkit-animation: from360to0-1 4s linear infinite;
    animation: from360to0-1 4s linear infinite;
    transform-origin: 155px 150px
}

.circle-3[data-v-1] {
    -webkit-animation: from0to360-1 5s linear infinite;
    animation: from0to360-1 5s linear infinite;
    transform-origin: 150px 145px
}

.circle-4[data-v-1] {
    -webkit-animation: from360to0-1 4.5s linear infinite;
    animation: from360to0-1 4.5s linear infinite;
    transform-origin: 150px 155px
}

@-webkit-keyframes from0to360-1 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes from0to360-1 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes from360to0-1 {
    0% {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0)
    }
}

@keyframes from360to0-1 {
    0% {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0)
    }
}

*,
::after,
::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

footer,
header,
nav,
section {
    display: block
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

p {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 27px
}

a {
    text-decoration: none;
    background-color: transparent
}

img {
    vertical-align: middle;
    border-style: none
}

.video-wrapper {
    height: 100vh;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%
}

.video-element {
    opacity: .07;
    max-width: 100%;
    width: 100%;
}

.instapage {
    background: var(--primary-color);
    margin-top: 100px;
    width: 10px;
    height: 10px;
    display: block;
    transition: all ease-in-out 2s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    overflow: hidden
}

.grow2.instapage {
    width: 100%;
    height: 200vh;
    border-radius: 0%;
    background: var(--bodycolor)
}

label {
    display: inline-block;
    margin-bottom: .5rem
}

button {
    border-radius: 0
}

button:focus:not(:focus-visible) {
    outline: 0
}

button,
input,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[role="button"] {
    cursor: pointer
}

select {
    word-wrap: normal
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
    cursor: pointer
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

textarea {
    overflow: auto;
    resize: vertical
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 400;
    line-height: 1.2;
    font-family: var(--titlefont);
    letter-spacing: -.5px;
}

/* .pt_0
{
    padding-top: 0 !important;
} */
.mainContainer .entry,
.innerBannerSection audio {
    display: none;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.darkHidden {
    display: block;
}

.lightShow {
    display: none;
}

.logoFixedConatiner {
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0;
    z-index: 2;
    width: 90px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column
}

.ConatctfeldRightBox.ContactFormRightBox {
    width: calc(100% - 500px);
    margin-left: 0px;
    padding: 40px 10px 40px 25px;
}

.ConatctfeldRightBox.ContactFormRightBox input,
.ConatctfeldRightBox.ContactFormRightBox select,
.ConatctfeldRightBox.ContactFormRightBox textarea {
    border: 1px solid #5f9c58 !important;
    color: #fff;
    background-color: #788077;
}

.primaryBg {
    background-color: var(--primary-color);
}

@media (min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 765px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

@media (min-width:1520px) {
    .container {
        max-width: 1280px
    }
}

.socialBox {
    height: calc(100vh - 0px);
    position: relative;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center
}

.socialBox ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative
}

.followTitle {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    width: 94px;
    margin-top: 25px !important;
    color: #676767;
}

.socialBox ul:before,
.socialBox ul:after {
    content: "";
    position: absolute;
    height: 60px;
    width: 1px;
    background-color: #3c3c3c
}

.socialBox ul:before {
    top: -70px
}

.socialBox ul:after {
    bottom: -90px
}

.socialBox ul li {
    margin-top: 7px;
    margin-bottom: 7px;
    z-index: 4
}

.socialBox ul li a {
    color: var(--primary-color);
    border: 1px solid #3c3c3c;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 30px;
    float: left;
    transition: 0.4s
}

.socialBox ul li a img {
    width: 17px;
    height: 17px
}

.socialBox ul li a:hover {
    background-color: #3c3c3c;
    background: linear-gradient(var(--bodycolor), var(--bodycolor)) padding-box, linear-gradient(to right, var(--primary-color), var(--secondary-color)) border-box;
    border-radius: 50em;
    border: 1px solid transparent
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

@media (min-width: 576px) {
    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0%;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 768px) {
    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0%;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 992px) {
    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0%;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 1200px) {
    .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0%;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--para-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-control {
        transition: none
    }
}

.form-control::-ms-expand {
    background-color: transparent;
    border: 0
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}

.form-control::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::-moz-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::-ms-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1
}

input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control,
input[type="time"].form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

select.form-control:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #495057
}

select.form-control:focus::-ms-value {
    color: #495057;
    background-color: #fff
}

.form-control-file,
.form-control-range {
    display: block;
    width: 100%
}

select.form-control[multiple],
select.form-control[size] {
    height: auto
}

textarea.form-control {
    height: auto
}

.form-group {
    margin-bottom: 1rem
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .btn {
        transition: none
    }
}

input[type="button"].btn-block,
input[type="reset"].btn-block,
input[type="submit"].btn-block {
    width: 100%
}

.text-center {
    text-align: center
}

.deeper-morph {
    position: absolute;
    left: auto;
    right: -127%;
    top: 0;
    transform: translate(1%, -87%);
    height: 300px
}

.deeper-morph svg {
    float: right;
    height: 100%
}

.logo {
    width: 50px;
    margin-right: 60px
}

.logo img {
    width: auto;
    height: 48px
}

.navbar {
    align-items: center;
    top: 0;
    display: flex;
    flex-direction: row;
    padding: 20px 15px;
    position: fixed;
    z-index: 1000;
    width: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease
}

.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
    backdrop-filter: blur(8px);
    background-color: rgb(8 20 28 / 86%);
    z-index: 999;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 10px 15px
}

.hamburger {
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    outline: none;
    height: 20px;
    position: relative;
    width: 20px
}

.hamburger-line {
    background: #e5e5e5;
    height: 2px;
    position: absolute;
    left: 0;
    transition: all 0.2s ease-out;
    width: 100%
}

.hamburger:hover .hamburger-line {
    background: #777
}

.hamburger-line-top {
    top: 3px
}

.menu-active .hamburger-line-top {
    top: 50%;
    transform: rotate(45deg) translatey(-50%)
}

.hamburger-line-middle {
    top: 50%;
    transform: translatey(-50%)
}

.menu-active .hamburger-line-middle {
    left: 50%;
    opacity: 0;
    width: 0
}

.hamburger-line-bottom {
    bottom: 3px
}

.menu-active .hamburger-line-bottom {
    bottom: 50%;
    transform: rotate(-45deg) translatey(50%)
}

.navbar .push-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: all 0.25s ease-in;
    align-items: center
}

.main-footer h5 {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 24px;
    color: #fff;
    margin-top: 20px
}

.fLogo {
    width: auto;
    margin-bottom: 15px
}

.main-footer .contact-info li {
    margin-bottom: 10px;
    float: left;
    width: 100%;
    display: block
}

.main-footer .contact-info li span {
    font-size: 14px;
    width: 25px;
    float: left
}

.main-footer .contact-info li span img {
    width: auto
}

.main-footer .contact-info li a {
    font-size: 13px;
    color: var(--para-color);
    float: left;
    width: calc(100% - 25px);
    font-weight: 300
}

.main-footer .contact-info li p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 14px;
}

.main-footer p {
    margin-bottom: 15px;
}

.footer-bottom .inner {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.main-footer .sidNavsocialBox {
    margin-top: 10px
}

.main-footer h6 {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 24px;
    color: #fff;
    margin-top: 20px
}

.footer-bottom {
    border-top: 1px solid #464b4e
}

.copyright {
    margin-top: 10px;
    font-size: 13px;
    font-family: var(--titlefont)
}

.foooterbotmUl {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 15px
}

.foooterbotmUl li a {
    padding: 2px 15px 2px 0;
    color: var(--para-color);
    font-size: 14px;
    font-family: var(--titlefont);
    font-weight: 300
}

.foooterbotmUl li a:hover {
    text-decoration: underline
}

.footerUl li a {
    color: var(--para-color);
    font-size: 13px;
    font-weight: 300;
    position: relative;
    transition: 0.4s
}

.footerUl li a:before {
    content: "";
    height: 3px;
    width: 3px;
    background-color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 7px;
    display: none;
    transition: 0.4s
}

.footerUl li {
    margin-bottom: 7px
}

.footerUl li a:hover {
    color: #fff;
    padding-left: 10px
}

.footerUl li a:hover:before {
    display: block
}

.footerproductUl {
    display: flex;
    flex-wrap: wrap
}

.footerproductUl li {
    width: calc(100% / 4 - 8px);
    margin: 0 8px 0 0
}

.footerproductUl li a {
    color: var(--para-color);
    font-size: 14px;
    font-family: var(--titlefont);
    font-weight: 300
}

.footerproductUl li a:hover {
    color: #fff
}

.footerproductbdr {
    border-top: 1px solid #313232;
    margin-top: 15px
}

.main-footer .footerproductbdr h6 {
    margin-top: 15px
}

.BlogPosts {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto;
    flex-wrap: wrap;
    max-width: 1060px;
    height: 340px
}

.BlogPosts .LeftPost {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden
}

.LeftPost>img,
.RightPost>img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover
}

.LeftPost {
    width: calc(100% / 2 - 15px);
    margin-right: 15px;
    position: relative
}

.RightPost {
    width: calc(100% / 2 - 15px);
    margin-left: 15px;
    position: relative;
    height: 100%
}

.RightTopPost {
    margin-bottom: 30px
}

.RightTopPost,
.RightBotPost {
    height: calc(100% / 2 - 15px);
    overflow: hidden;
    position: relative
}

.RightTopPost>img,
.RightBotPost>img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

.blogOverlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: rgb(8, 20, 28);
    background: linear-gradient(0deg, rgb(8 20 28 / 90%) 0%, rgb(10 23 33 / 57%) 29%, rgb(0 0 0 / 5%) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 20px 15px;
    transition: 0.4s
}

.blogOverlay:hover {
    background: linear-gradient(0deg, rgb(72 165 47 / 84%) 0%, rgb(10 23 33 / 57%) 58%, rgb(0 0 0 / 5%) 100%)
}

.blogOverlay:hover .blogauther,
.blogOverlay:hover .blogviews {
    color: #fff
}

.blogtitle {
    color: var(--offwhite);
    font-size: 14px;
    max-height: 42px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 22px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px
}

.blogAutherBox {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.blogauther {
    display: flex;
    justify-content: space-between
}

#social-share {
    display: flex;
    align-items: center;
    margin-top: 15px
}

#social-share span {
    font-size: 14px
}

#social-share a {
    color: var(--primary-color);
    border: 1px solid #3c3c3c;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    float: left;
    transition: 0.4s;
    margin-right: 7px
}

#social-share a img {
    width: 14px;
    height: 14px
}

.auther-date-blog img {
    width: 35px;
    background-color: #fff;
    border-radius: 50%;
    padding: 0;
    border: 1px solid #fff
}

.blogauther span {
    font-size: 14px;
    padding-left: 8px
}

.blogDate {
    color: #fff;
    margin-top: 20px;
    border: 2px solid var(--primary-color);
    width: 60px;
    text-align: center;
    line-height: 21px;
    padding: 7px;
    font-weight: 500;
    font-size: 14px
}

.blogAutherBox {
    color: var(--primary-color);
    font-size: 13px
}

.sectionBlogs .btnBox {
    text-align: center
}

.blogviews {
    position: relative
}

.RightBotPost {
    position: relative
}

.blogviews span {
    float: left;
    margin-right: 5px
}

.contactDetailsBox {
    clear: both;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap
}

.contactDetailsBox li {
    width: calc(100% / 3 - 20px);
    display: flex;
    background-color: #0a1821;
    margin: 10px;
    padding: 30px 20px;
    border: 1px solid var(--borderlight);
    border-radius: 4px;
    transition: 0.8s;
    overflow: hidden;
    position: relative
}

.contactDetailsBox li:after {
    background-color: var(--borderlight);
    content: "";
    height: 45px;
    margin-top: 0;
    opacity: .08;
    max-width: 200px;
    position: absolute;
    left: 0;
    top: 50%;
    width: 45px;
    z-index: -1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: 0.4s
}

.contactDetailsBox li:hover:after {
    height: 100%;
    margin: 0;
    opacity: .4;
    width: 100%;
    -webkit-transform: translate3d(-10%, -50%, 90px) rotate(15deg);
    transform: translate3d(-10%, -50%, 90px) rotate(15deg)
}

.contactDetailsBox li .wtrefct {
    left: auto;
    right: -90px;
    transform: scale(.7)
}

.contactDetailsBox li:hover {
    border: 1px solid var(--primary-color)
}

.contactDetailsBox li:first-child {
    width: calc(100% / 3 - 10px);
    margin-left: 0
}

.contactDetailsBox li:last-child {
    width: calc(100% / 3 - 10px);
    margin-right: 0
}

.contactFormBg {
    background-color: var(--bodyOffcolor);
    padding-right: 30px
}

.ContactDetalLeftBox {
    background-color: var(--contactDetils);
    border-radius: 8px;
    width: 350px;
    position: relative;
    overflow: hidden
}

.mapBox {
    border-radius: 4px;
    overflow: hidden
}

.ContactDetalLeftBox .wtrefct {
    fill: var(--primaryOffColor);
    position: absolute;
    right: -110px;
    z-index: 0;
    transform: scale(.7);
    top: auto;
    left: auto;
    bottom: -130px
}

.ConatctfeldRightBox {
    width: calc(100% - 350px);
    margin-left: 0;
    padding-left:10px;
}

.contactFormBox h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 25px
}

.ConatctfeldRightBox .form-control {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0;
    font-size: 15px;
    color: var(--para-color);
    background-color: var(--bodyOffcolor);
    border: 0;
    border-bottom: 1px solid #214c15;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    margin-bottom: 35px
}

.adressSubBox {
    position: relative;
    z-index: 1;
    margin-bottom: 15px
}

.adressSubBox p {
    margin-top: 0;
    font-size: 13px;
    margin-bottom: 0
}

.adressiconBox {
    text-align: center;
    width: 40px;
    border: 1px solid var(--primary-color);
    height: 40px;
    border-radius: 50%;
    line-height: 36px;
    margin-right: 20px
}

.adresscntntBox {
    width: calc(100% - 60px)
}

.adressiconBox img {
    width: 16px
}

.adresscntntBox h3 {
    color: var(--offwhite);
    margin-bottom: 10px;
    margin-top: 5px;
    font-size: 16px
}

.adresscntntBox a {
    color: var(--para-color)
}

.ContactDetalLeftBox .animatn3 {
    top: auto;
    right: 70px;
    bottom: 60px;
    z-index: 0
}

.socilamdiaBox {
    display: block;
    margin-top: 20px
}

.socilamdiaBox a {
    display: block;
    font-size: 14px;
    position: relative;
    line-height: 25px
}

.socilamdiaBox a:hover {
    text-decoration: underline;
    color: #fff
}

.socilamdiaBox a:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 7px;
    background-color: var(--primary-color);
    left: -20px;
    top: 10px
}

#button {
    display: inline-block;
    background: var(--bodyOffcolor);
    width: 40px;
    height: 40px;
    text-align: center;
    position: fixed;
    bottom: 95px;
    right: 35px;
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
    z-index: 998;
    border-radius: 50%
}

#button::after,
#button::before {
    content: "";
    width: 2px;
    height: 9px;
    position: absolute;
    right: 15px;
    margin-top: 15px;
    transform: rotate(139deg);
    background-color: #fff
}

#button::before {
    right: 21px;
    transform: rotate(-139deg)
}

#button:hover {
    cursor: pointer;
    background-color: #333
}

#button:active {
    background-color: #555
}

#button.show {
    opacity: 1;
    visibility: visible
}

.btn-style-one {
    position: relative;
    display: inline-block;
    text-align: center;
    letter-spacing: .05em;
    background: var(--primary-color);
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer
}

.btn-style-one .btn-title {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: .1em;
    padding: 12px 28px 11px;
    z-index: 1
}

.btn-style-one:hover {
    background: var(--primary-color);
    opacity: .8
}

.CaeerDetalLeftBox.ContactDetalLeftBox {
    padding: 80px 30px;
    border-radius: 8px;
    width: 500px
}

.ConatctfeldRightBox.CaeerDetalRightBox {
    width: calc(100% - 500px) !important;
    margin-left: 0
}

.CaeerDetalLeftBox p {
    font-size: 14px;
    line-height: 24px;
}

.file-input-container {
    display: flex;
    margin: 2px
}

.sm-input-file {
    border: 1px solid #333;
    color: #fff;
    width: 82px;
    opacity: 0
}

.for-sm-input-file {
    width: 130px;
    font-size: 13px;
    height: 41px;
    position: absolute;
    padding: 6px;
    cursor: pointer;
    z-index: 30;
    text-align: center;
    right: 15px;
    background: #1b4211;
    border-radius: 5px;
    color: #fff;
    line-height: 30px;
    border-bottom: 1px solid #214c15
}

.span-text {
    border-bottom: 1px solid #214c15;
    height: 41px;
    color: var(--para-color);
    width: calc(100% - 130px);
    position: absolute
}

.jobOpening {
    display: flex;
    flex-wrap: wrap
}

.jobOpening>li {
    width: calc(100% / 3 - 30px);
    margin: 15px;
    background-color: var(--serviceListBox);
    border: 1px solid var(--bodyOffcolor);
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: 0.4s
}

.jobOpening>li:hover {
    border: 1px solid #26501a
}

.jobOpening>li::before {
    content: "";
    background-color: var(--primary-color);
    backdrop-filter: blur(8px);
    width: 14px;
    height: 10px;
    position: absolute;
    left: 20%;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: 1;
    opacity: .1;
    box-shadow: 20px 2px 34px 43px #4caf50
}

.Jobneed {
    font-size: 13px
}

.Jobneed span {
    font-size: 13px;
    border-right: 1px solid #1e3a37;
    padding: 0 6px
}

.Jobneed span:first-child {
    padding-left: 0
}

.Jobneed span:last-child {
    border-right: 0;
    padding-right: 0
}

.JobTitle {
    font-weight: 400;
    color: #d1d1d1;
    margin-bottom: 10px;
    font-family: var(--titlefont);
    font-size: 16px
}

.jobOpening>li .btnstyle1 {
    font-size: 13px;
    margin-top: 27px
}

.jobOpening>li .btnstyle1:before {
    width: 120px;
    height: 36px;
    top: -6px;
    left: -17px;
    border-radius: 40px
}

.startJorneyBtn.btnstyle1:hover:before {
    width: 175px;
}

.joinBtn.btnstyle1:hover:before {
    width: 115px;
}

.sectionVspace {
    height: 60px
}

.AcademysucceBox {
    background: #A0CD4E;
    background: linear-gradient(18deg, rgba(61, 181, 74, 1) 0%, rgba(160, 205, 78, 1) 100%);
    padding: 50px 30px 35px;
    border-radius: 26px;
    position: relative;
    text-align: center;
    max-width: 300px;
    float: right;
    margin-top: 30px;
}

.AcademysucceBox img {
    width: auto;
}

.AcademysucceBox h3 {
    color: #fff;
    margin-top: 10px;
    font-size: 22px;
}

.AcademysucceBox p {
    color: #fff;
}

.flexBox {
    display: flex;
    flex-wrap: wrap
}

.jobHeader {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--primaryOffColor);
    padding: 20px 0;
    justify-content: center;
    border-radius: 4px
}

.jobHeader li {
    max-width: calc(100% / 4 - 0px);
    margin: 10px;
    padding: 15px;
    display: flex
}

.jobHeader li h3 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px
}

.jobSpci {
    color: #fff;
    font-size: 13px;
    line-height: 20px
}

.jobHeader li .careerIconBox {
    width: 32px;
    float: left;
    margin-right: 5px;
    transition: 0.8s
}

.jobHeader li:hover .careerIconBox {
    -webkit-animation-name: swing;
    animation-name: swing
}

.careerCntntBox {
    width: calc(100% - 37px)
}

.jobDescrption {
    margin-top: 20px
}

.jobDescrption li {
    font-size: 15px;
    margin-bottom: 5px;
    list-style: disc;
    margin-left: 15px
}

.menuRight {
    width: 250px;
    position: relative;
    display: flex;
    align-items: center
}

.chatBtn {
    width: 95px;
    float: left;
    position: absolute;
    right: 31px;
    top: 5px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    font-weight: 400
}

.chatBtn:hover {
    text-decoration: underline
}

.chatBtn img {
    float: left;
    width: 20px;
    margin-right: 5px
}

.nav-menu .menu-item a {
    color: var(--navlink);
    display: block;
    line-height: 30px;
    margin: 0 10px;
    text-decoration: none;
    font-size: 14px
}

.nav-menu .menu-item a:hover,
.nav-menu .menu-item.active a {
    color: var(--secondary-color);
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.sub-nav {
    border: 1px solid #ccc;
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 5px 5px;
    list-style: none;
    width: 230px
}

.nav__link:hover+.sub-nav {
    display: block
}

.sub-nav:hover {
    display: block
}

.mainContainer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: #101c24;
    z-index: 1
}

.bannerSection {
    height: calc(100vh - 0px);
    color: #fff;
    display: flex;
    align-items: center
}

.mainCaption {
    font-size: 70px;
    font-family: 'gorditabold'
}

.mainCaption span.bganimation {
    float: left
}

.bganimation {
    position: relative
}

.in-view.bganimation:after {
    content: "";
    background-color: var(--primary-color);
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    width: 0%;
    position: absolute;
    height: 100%;
    left: 0;
    -webkit-animation: hedngBg 2s;
    animation: hedngBg 2s
}

@keyframes hedngBg {
    0% {
        width: 0%
    }

    50% {
        width: 100%;
        left: 100%
    }

    100% {
        width: 0%;
        left: 100%
    }
}

.h1brandImg img {
    height: 70px;
    width: auto;
    float: left;
    margin-top: 6px;
    margin-right: 2px
}

.strocktext {
    -webkit-text-stroke: 1px #ccc;
    color: transparent;
    font-weight: 500
}

.grtadienttext {
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.aligncenter {
    align-items: center
}

.justifycenter {
    justify-content: center
}

.bannercaption {
    color: var(--para-color);
    font-size: 15px;
    line-height: 28px
}

.btnstyle1 {
    display: inline-block;
    width: auto;
    color: #fff;
    position: relative;
    margin-top: 40px;
    margin-left: 20px
}

.btnstyle1:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    z-index: 0;
    top: -12px;
    left: -20px;
    transition: 0.4s
}

.btnstyle1 span {
    z-index: 1;
    position: relative
}

.btnstyle1:hover:before {
    width: 165px;
    border-radius: 50px
}

.btnstyleblack1 {
    display: inline-block;
    width: auto;
    color: #fff;
    position: relative;
    margin-top: 40px;
    margin-left: 20px
}

.btnstyleblack1:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    background: #08141c;
    z-index: 0;
    top: -12px;
    left: -20px;
    transition: 0.4s
}

.btnstyleblack1 span {
    z-index: 1;
    position: relative
}

.btnstyleblack1:hover:before {
    width: 145px;
    border-radius: 50px
}

.growthBox {

    max-width: 1000px;
    /* margin: auto; */
    margin-top: 90px;
}

.grothSmalBox1,
.grothSmalBox2,
.grothSmalBox3,
.grothSmalBox4,
.grothSmalBox5 {
    background: var(--primary-color);
    background: linear-gradient(18deg, rgba(61, 181, 74, 1) 0%, rgba(160, 205, 78, 1) 100%);
    border-radius: 50%;
    position: relative;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

}

.grothSmalBox_contentheader {
    color: #fff;
    font-size: 20px;
    font-family: var(--titlefont);
    margin-bottom: 8px;
}

.grothSmalBox_contentheader span {
    font-family: var(--primaryfont);
    opacity: .8;
}


.grothSmalBox1 {
    width: 190px;
    height: 190px;
    bottom: 55px;
    left: 225px;
    padding: 45px;
}

.grothSmalBox1_content {
    position: absolute;
    left: 50px;
    top: 130px;
    width: 220px;
}

.grothSmalBox1_content::after {
    content: "";
    height: 162px;
    width: 1px;
    background-color: var(--primary-color);
    position: absolute;
    right: 0;
    z-index: -1;
    top: 18px;
    right: -50px;
    transform: rotate(345deg);
}

.grothSmalBox1_content .grothSmalBox_contentheader::after {
    content: "";
    height: 1px;
    width: 60px;
    background-color: var(--primary-color);
    position: absolute;
    right: 0;
    z-index: -1;
    top: 20px;
    right: -28px;
}

.grothSmalBox2 {
    width: 150px;
    height: 150px;
    bottom: 160px;
    left: 445px;
    padding: 36px;
}

.grothSmalBox2_content {
    position: absolute;
    left: 222px;
    top: -8px;
    width: 220px;
}

.grothSmalBox2_content::after {
    content: "";
    height: 218px;
    width: 1px;
    background-color: var(--primary-color);
    position: absolute;
    right: 0;
    z-index: -1;
    top: 18px;
    right: -50px;
    transform: rotate(348deg);
}

.grothSmalBox2_content .grothSmalBox_contentheader::after {
    content: "";
    height: 1px;
    width: 60px;
    background-color: var(--primary-color);
    position: absolute;
    right: 0;
    z-index: -1;
    top: 20px;
    right: -28px;
}

.grothSmalBox3 {
    width: 110px;
    height: 110px;
    bottom: 243px;
    left: 620px;
    padding: 26px;
}

.grothSmalBox3_content {
    position: absolute;
    right: 30px;
    bottom: 0;
    width: 220px;
}

.grothSmalBox3_content::after {
    content: "";
    height: 145px;
    width: 1px;
    background-color: var(--primary-color);
    position: absolute;
    z-index: -1;
    bottom: 116px;
    right: 272px;
    transform: rotate(348deg);
}

.grothSmalBox3_content .grothSmalBox_contentheader::after {
    content: "";
    height: 1px;
    width: 34px;
    background-color: var(--primary-color);
    position: absolute;
    left: -38px;
    z-index: -1;
    top: 18px;
}

.grothSmalBox4 {
    width: 80px;
    height: 80px;
    bottom: 310px;
    left: 751px;
    padding: 19px;
}


.grothSmalBox4_content {
    position: absolute;
    right: 260px;
    top: -100px;
    width: 260px;
}

.grothSmalBox4_content::after {
    content: "";
    height: 250px;
    width: 1px;
    background-color: var(--primary-color);
    position: absolute;
    right: 0;
    z-index: -1;
    top: 18px;
    right: -20px;
    transform: rotate(348deg);
}

.grothSmalBox4_content .grothSmalBox_contentheader::after {
    content: "";
    height: 1px;
    width: 120px;
    background-color: var(--primary-color);
    position: absolute;
    right: 0;
    z-index: -1;
    top: 20px;
    right: 5px;
}

.grothSmalBox5 {
    width: 60px;
    height: 60px;
    bottom: 390px;
    left: 865px;
    padding: 13px;
}

.grothSmalBox5_content {
    position: absolute;
    right: -180px;
    bottom: 170px;
    width: 220px;
}

.grothSmalBox5_content::after {
    content: "";
    height: 165px;
    width: 1px;
    background-color: var(--primary-color);
    position: absolute;
    z-index: -1;
    bottom: 88px;
    right: 272px;
    transform: rotate(348deg);
}

.grothSmalBox5_content .grothSmalBox_contentheader::after {
    content: "";
    height: 1px;
    width: 34px;
    background-color: var(--primary-color);
    position: absolute;
    left: -36px;
    z-index: -1;
    top: 18px;
}

.academyStudentsBox .btnstyle1:hover:before {
    width: 140px;
    border-radius: 50px
}

.enqurynow:hover:before {
    width: 140px;
}

.joinToday:hover:before {
    width: 130px;
}

.academyBanner .btnstyle1:hover:before {
    width: 115px;
}

.academybtnBox .btnstyle1 {
    margin-top: 0;
}

.academybtnBox {
    display: flex;
    gap: 26px;
    align-items: center;
    margin-top: 25px;
}

.academybtnBox .contactLinkCntnt {
    border-left: 1px solid #444444;
    padding-left: 20px;
}

.academybtnBox .contactLinkCntnt .grtadienttext {
    font-weight: 700;
}

.academybtnBox .contactLinkCntnt b {
    color: var(--para-color);
    display: flex;
    align-items: center;
    gap: 5px;
}

.academybtnBox .contactLinkCntnt b img {
    width: auto;
}

.academyCourseLogoBox {
    margin-top: 45px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.academyCourseLogoBox img {
    width: auto;
    max-width: 140px;
}

.academybtnBox .mainCaption {
    font-size: 66px;
}

.academyBannerImg {
    position: absolute;
    right: 0;
    width: 32%;
}

.academybanner1 {
    position: absolute;
    left: 8%;
    bottom: 50px;
    width: auto;
    animation: zoomInOut 4s infinite ease-in-out;
}

.academybanner2 {
    position: absolute;
    right: -45px;
    top: 50%;
    transform: translate(-50% 0);
    width: auto;
    filter: blur(8px);
    /* animation: animatntranslate 18s infinite ease-in-out; */
}

.academybanner3 {
    position: absolute;
    left: -45px;
    top: 24%;
    transform: translate(-50% 0);
    width: auto;
    filter: blur(8px);
    opacity: .4;
    /* animation: zoomInOut 3.2s infinite ease-in-out; */
}

.academybanner4 {
    position: absolute;
    left: 50%;
    bottom: 30%;
    transform: translate(0 -50%);
    width: auto;
    filter: blur(4px);
    opacity: .4;
    animation: animatntranslate 8s infinite;

}

.academybanner5 {
    position: absolute;
    right: 10%;
    top: 31%;
    transform: translate(-50% 0);
    width: auto;
    animation: animatntranslate 10s infinite;
}

.academybanner6 {
    position: absolute;
    right: 20px;
    top: 22%;
    transform: translate(-50% 0);
    width: auto;
    animation: animatntranslate 4s infinite;
}

.academybanner7 {
    position: absolute;
    right: 50%;
    bottom: 20%;
    transform: translate(-50% 0);
    width: auto;
    animation: animatnzoom 4s infinite;
}

.academyanimation1 {
    position: absolute;
    right: 50%;
    bottom: 0;
    transform: translate(-50% 0);
    width: auto;
    animation: animatnzoom 4s infinite;
    filter: blur(4px);
    opacity: .4;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        /* zoom in */
    }

    100% {
        transform: scale(1);
        /* zoom out */
    }
}

.sylebusSubBox {
    padding: 30px;
    position: relative;
    height: 100%;

}

.sylebusSubBox:before {
    content: "";
    backdrop-filter: blur(8px);
    background-color: rgb(16 28 36 / 86%);
    border: 1px solid #323d32;
    border-radius: 16px;
    opacity: .7;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sylebusSub {
    position: relative;
}

.sylebusSubTilte {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 21px;
    color: #fff;
}


.sylebusSubTilte img {
    width: auto;
}

.syllabusUl {
    margin-top: 30px;
}

.syllabusUl li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 14px !important;
    line-height: 26px;
    width: 96%;
    margin: auto;
}

.syllabusUl li:before {
    position: absolute;
    left: 0;
    content: "";
    width: 28px;
    height: 28px;
    background-size: 100% 100%;
    background-image: url("/wp-content/uploads/2025/05/academy-Check.webp");
}

.academyH2 {
    font-size: 40px;
    color: #fff;
}

.academyStudents {
    position: absolute;
    right: 0px;
    bottom: -20px;
    backdrop-filter: blur(8px);
    background-color: rgb(8 20 28 / 60%);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #364640;
    animation: academyStudentAni2 5s ease-in-out infinite alternate both;

}

.academyStudents::before {
    content: "";
    position: absolute;
    height: 58px;
    width: 50%;
    filter: blur(14px);
    -webkit-filter: blur(14px);
    position: absolute;
    background-color: var(--primary-color);
    z-index: -1;
    opacity: .8;
    left: 27%;
}

@keyframes academyStudentAni2 {
    0% {
        -webkit-transform: scale(.95) translateX(20px) translateY(0);
        transform: scale(.95) translateX(20px) translateY(0);
    }
}

.AcademycareerBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}

.AcademycareerleftSubBox {
    width: calc(40% - 40px);
    padding-right: 40px;
}

.AcademycareerrightSubBox {
    width: 60%;
}

.AcademycareerimgHolder {
    background-image: url("https://bpract.com/wp-content/uploads/2025/05/academy-Success.png");
    min-height: 360px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding: 30px;
    flex-direction: column;
}

.AcademycareerimgHolder h3 {
    font-size: 30px;
}

.AcademycareerrightSubBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.AcademycareerrightSubBox .AcademycareerrightTop {
    display: grid;
    grid-template-columns: minmax(200px, 3fr) minmax(150px, 2fr);
    gap: 30px;
}

.AcademycareerrightTop_Left {
    background: #A0CD4E;
    background: linear-gradient(18deg, rgba(160, 205, 78, 1) 0%, rgba(61, 181, 74, 1) 100%);
    padding: 20px;
    border-radius: 20px;
    color: #fff;
}

.AcademycareerrightTop_Right {
    background: var(--academydark1);
    padding: 20px;
    border-radius: 20px;
}

.AcademycareerrightBottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.AcademycareerrightBottom_Left {
    background: var(--academydark1);
    padding: 20px;
    border-radius: 20px;
}

.AcademycareerrightBottom_Right {
    background: var(--academydark1);
    padding: 20px;
    border-radius: 20px;
}

.academyhdr2 {
    font-size: 21px;
    font-family: var(--titlefont);
    color: #fff;
    margin-bottom: 10px;
}

.academyhdr2~p {
    margin-bottom: 5px;
}

.academyhdr2 span {
    font-family: var(--primaryfont);
}

.academyStudents img {
    width: auto;
}

.academyStudentsTitle {
    font-size: 16px;
    color: #e2dede;
    margin-bottom: 8px;
}

.academySpecialitySection {
    padding: 60px 30px;
    border-radius: 20px;
    background-image: url("https://bpract.com/wp-content/uploads/2025/05/academy-spaeciality-banner.webp");
    background-size: cover;
}



.academyTab-container {
    display: flex;
    margin: 25px auto;
    border-radius: 8px;
    align-items: center;
}

.academyTab-menu {
    width: 250px;
    border-radius: 8px 0 0 8px;
    padding: 10px 0;
}

.academyTab-item {
    padding: 15px 5px;
    color: #ecf0f1;
    cursor: pointer;
    transition: background-color 0.3s, padding-left 0.3s;
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 15px;
    background: var(--academydark1);
    font-family: var(--titlefont);
}

.academyTab-item:hover {
    background: #A0CD4E;
    background: linear-gradient(18deg, rgba(160, 205, 78, 1) 0%, rgba(61, 181, 74, 1) 100%);
}

.academyTab-item.active {
    background: #A0CD4E;
    background: linear-gradient(18deg, rgba(160, 205, 78, 1) 0%, rgba(61, 181, 74, 1) 100%);
    color: #fff;
}

.academyTab-content {
    flex: 1;
    padding: 20px 40px;

}

.academyTabcontent {
    display: none;
    opacity: 0;
    transition: .6s
}

.academyTabcontent.active {
    display: block;
    animation: trnslate2 0.6s;
    opacity: 1;
}

@keyframes trnslate2 {
    from {
        transform: translate(10px, 0);
        opacity: .7
    }

    to {
        transform: translate(0, 0);
        opacity: 1
    }
}

.feesTtile {
    margin-bottom: 20px;
    color: #fff;
    font-size: 20px;
}


.academyslider-container {
    width: 100%;
    background-color: var(--academydark1);
    border-radius: 10px;
    overflow: hidden;
}

.academyslider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    position: relative;
}

.academytestimonial {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 350px;
}

.academytestimonial img {
    width: 300px;
    height: 350px;
    object-fit: cover;
    border-radius: 10px 0 0 0;
}

.academytestimonial-content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.academycontent-wrapper {
    display: flex;
    align-items: stretch;
    flex: 1;

}

.academycontent-wrapper p {
    color: #fff;
    font-size: 17px;
    margin-bottom: 15px;
}

.academycontent-wrapper h4 {
    color: #fff;
    font-size: 20px;
}

.academyinternal-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.academycurrent-slide {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    margin-right: 10px;
}

.academytotal-slides {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    margin-left: 10px;
}

.academylines-container {
    display: flex;
    align-items: center;
}

.academylines {
    display: flex;
    align-items: center;
}

.academyline {
    width: 30px;
    height: 2px;
    background-color: #37494d;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.academyline.active {
    background-color: var(--primary-color);
}

.academyexternal-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    max-width: 600px;
    width: 100%;
    margin: 10px auto 0;
}

.academynav-buttons {
    display: flex;
}

.academynav-buttons button {
    background-color: var(--academydark1);
    color: #fff;
    border: none;
    padding: 10px;
    margin: 0 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.academynav-buttons button:hover {
    background-color: var(--primary-color);
}

.academynav-buttons button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.academtAutotabs-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
}

.academtAutotab-list {
    width: 40%;
    flex-shrink: 0;
}

.academtAutotab {
    position: relative;
    padding: 20px 15px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s;
    font-size: 16px;
    margin-bottom: 20px;
    background-color: rgb(16 28 36 / 86%);
    border: 1px solid #414a41;
    color: #fff;
    font-family: var(--titlefont);
}

.academtAutotab span {
    font-family: var(--primaryfont);
    opacity: .9;
}


.academtAutotab.active {
    background-color: #1b2917;
    color: #fff;


}

/* Smooth clockwise border animation */
.academtAutotab.active::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    box-sizing: border-box;
    border: 3px solid var(--primary-color);
    border-radius: 12px;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    animation: draw-border 6s linear forwards;
    pointer-events: none;
}

/* Pause animation on tabs-container hover */
.academtAutotab-list:hover .academtAutotab.active::before {
    animation-play-state: paused;
}

@keyframes draw-border {
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }

    25% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        /* Top edge */
    }

    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
        /* Top + right edge */
    }

    75% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        /* Top + right + bottom edge */
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        /* Full border */
    }
}


.academtAutotab-content {
    flex: 1;
    padding: 15px 60px;
    display: none;
    min-width: 0;
    transition: .4s;
    opacity: 0;
}

.academtAutotab-content img {

    padding: 15px 100px;
}

.academtAutotab-content p {

    font-size: 18px;
    color: #fff;
    margin-top: 15px;
}

.academtAutotab-content.active {
    display: block;
    animation: trnslate1 0.6s;
    opacity: 1;
}

@keyframes trnslate1 {
    from {
        transform: translate(5px, 0) scale(.8);
        opacity: .7
    }

    to {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }
}

.greentitle {
    font-size: 18px;
    margin-bottom: 10px;
}

.textwhite2 {
    color: #fff;
}

.academysubTitle {
    font-size: 17px;
    font-family: var(--primaryfont);
}

.academySpeaclityUl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 20px;
}

.academySpeaclityUl li {
    padding: 25px;
    border: 1px solid #a7cc98;
    border-radius: 20px;
    position: relative;
}

.academySpeaclityUl li::before {
    content: "";
    background-color: var(--primary-color);
    filter: blur(6px);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: .3;
}

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

.relative {
    position: relative;
}

.academySpeaclityUl li img {
    width: auto;
    transition: .4s;
}

.academySpeaclityUl li h3 {
    font-size: 20px;
    color: #fff;
    margin-top: 20px;
}

.academySpeaclityUl li h3 span {
    font-family: var(--primaryfont);

}

.academySpeaclityUl li p {
    font-size: 15px;
    color: #fff;
}

.academyjobseekerSection {
    background: #A0CD4E;
    background: linear-gradient(5deg, rgba(61, 181, 74, 1) 0%, rgba(160, 205, 78, 1) 100%);
    padding: 50px 40px;
    border-radius: 26px;
    position: relative;
}

.jobseekerTitle {
    font-size: 35px;
    line-height: 1.6;
    color: #fff;
}

.academyjobseekerSection p {
    font-size: 20px;
    color: #fff;
    font-family: var(--primaryfont);
    margin-top: 15px;
}

.academyjobseekerImg {
    position: absolute;
    right: 0;
    top: 0;
    width: 26%;
    top: 50%;
    transform: translate(0px, -50%);
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    text-decoration: none;
    background: #b9b7b7 !important;
    color: #fff
}

.dropdown-menu {
    padding: 0 0px !important;
    left: 32% !important
}

.clearfix {
    display: block;
    min-height: 1px;
    width: 100%;
    clear: both
}

.layer1 {
    height: 90px;
    margin-top: -60px;
    background: rgb(8, 20, 28);
    background: linear-gradient(0deg, rgba(8, 20, 28, 1) 0%, rgba(10, 23, 33, .6867121848739496) 100%)
}

.stripe {
    height: 70px
}

.sidenavbg {
    width: 100%;
    background-color: #000;
    height: 100vh;
    z-index: 998;
    right: -110%;
    position: fixed;
    opacity: .4;
    top: 0
}

.sidenavbg.active {
    right: 0
}

div.hamburger-box {
    width: 36px;
    height: 36px;
    display: block;
    position: absolute;
    top: -4px;
    right: 0;
    z-index: 9999;
    cursor: pointer
}

.menu-toggle.menu-toggeled span {
    background-color: #adadad
}

.super-container {
    position: relative;
    height: 100%;
    z-index: 10
}

.slide-container {
    position: fixed;
    text-align: center;
    height: 100%;
    right: 0;
    top: 0
}

.menu {
    width: 360px;
    background: var(--bodyOffcolor);
    position: absolute;
    top: 0;
    right: -360px;
    margin: 0;
    text-align: left;
    z-index: 1001;
    height: 100vh;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto
}

.menu.active {
    right: 0
}

.sideNavLogo img {
    width: auto
}

.sidnavTitle {
    margin-top: 50%;
    font-size: 17px;
    color: #fff;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 10px
}

.sidNavPara {
    font-size: 14px;
    line-height: 22px
}

.sidNavcontact {
    display: flex;
    flex-wrap: wrap;
    align-items: end
}

.sidNavcontactIcon {
    width: 36px;
    margin-right: 10px
}

.sidNavcontactcntnt {
    width: calc(100% - 46px)
}

.sidNavcontactcntnt b {
    color: #fff;
    font-size: 14px;
    font-weight: 400
}

.sidNavcontactDetails {
    margin-bottom: 0
}

.sidNavcontactDetails span a {
    color: var(--primary-color);
    font-size: 13px
}

.sidNavcontactDetails span:last-child {
    border-left: 1px solid var(--primary-color);
    padding-left: 7px
}

.sidNavcontactAddress {
    margin-top: 30%
}

.sidNavcontactAddress b {
    font-size: 16px;
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    display: block
}

.sidNavcontactAddress p {
    font-size: 14px
}

.slide-container,
.menu {
    transition: right 300ms ease-out;
    -webkit-transition: right 300ms ease-out
}

.menu-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(0deg);
    height: 14px;
    width: 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 300ms ease
}

.menu-toggle span {
    height: 1px;
    background-color: #fff;
    transition: width 200ms ease
}

.menu-toggle span:nth-child(1) {
    width: 80%;
    transition-delay: 200ms
}

.menu-toggle span:nth-child(2) {
    width: 100%
}

.menu-toggle span:nth-child(3) {
    width: 60%;
    transition-delay: 400ms
}

.menu-toggle span:nth-child(4) {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 1px;
    height: 0;
    transition: height 400ms
}

.hamburger-box.active {
    left: auto;
    right: 10px;
    position: fixed;
    top: 25px;
    border: 0;
    width: 31px;
    height: 31px;
    border: 1px solid #707070;
    border-radius: 50%
}

.menu-toggeled {
    transform: translate(-50%, -50%) rotate(45deg);
    transition-delay: 400ms;
    height: 12px;
    width: 16px
}

.menu-toggeled span:nth-child(1) {
    width: 0;
    transition: 200ms ease
}

.menu-toggeled span:nth-child(3) {
    width: 0;
    transition: 200ms ease;
    transition-delay: 150ms
}

.menu-toggeled span:nth-child(4) {
    height: 17px;
    transition: height 200ms ease;
    transition-delay: 200ms
}

.smallcaption1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 500;
    font-family: var(--fontMedium);
    color: var(--white);
    line-height: 35px
}

.smallcaption2 {
    font-size: 15px;
    margin-bottom: 20px;
    font-weight: 300;
    font-family: var(--primaryfont);
    color: var(--para-color);
    line-height: 25px
}

.sectionContainer.firstsection {
    padding-top: 120px
}

.sectionContainer {
    padding: 100px 0 100px
}

.sectionContainer.sectionTestimonials {
    padding-bottom: 20px
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}

.cetersection {
    text-align: center
}

.mt_1 {
    margin-top: 10px
}

.mt_2 {
    margin-top: 20px
}

.mt_3 {
    margin-top: 30px
}

.mt_4 {
    margin-top: 40px
}

.mt_5 {
    margin-top: 50px
}

.mt_7 {
    margin-top: 70px
}

.mb_1 {
    margin-bottom: 10px
}

.mb_2 {
    margin-bottom: 20px
}

.mb_3 {
    margin-bottom: 30px
}

.pt_1 {
    padding-top: 10px
}

.pt_2 {
    padding-top: 20px
}

.pt_3 {
    padding-top: 30px
}

.pb_1 {
    padding-bottom: 10px
}

.pb_2 {
    padding-bottom: 20px
}

.pb_3 {
    padding-bottom: 30px
}

.coinserviceBox {
    display: flex;
    align-items: start;
    flex-wrap: wrap
}

.coinserviceSubBox {
    position: relative;
    width: calc(100%/4 - 20px);
    margin: 20px 10px
}

.coinserviceSubBox>img {
    border-radius: 6px
}

.coinserviceContntBox {
    position: relative;
    border-radius: 6px;
    box-shadow: 0 10px 20px 0 rgba(76, 76, 76, .08);
    width: 92%;
    margin-left: 4%;
    margin-top: -20px;
    padding: 15px;
    font-size: 13px;
    display: block;
    float: left;
    background-color: #0e1e29;
    min-height: 320px
}

.coinserviceSubTitile {
    font-size: 16px;
    font-family: var(--titlefont);
    margin-bottom: 14px;
    border-bottom: 1px dashed #243d4f;
    padding-bottom: 12px;
    min-height: 66px;
    display: flex;
    align-items: center;
    color: #c7c7c7
}

.coinserviceContntBox p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    float: left;
    width: 100%
}

.commmnH5 {
    font-size: 15px;
    margin-top: 20px
}

.coinStandrd {
    display: flex;
    flex-wrap: wrap
}

.coinStandrdBox {
    position: relative;
    width: calc(100%/4 - 20px);
    margin: 20px 10px
}

.positionRelative {
    position: relative
}

.statusContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%
}

.statusSubBox {
    display: flex;
    align-items: center;
    width: calc(100% / 4 - 20px);
    margin: 10px
}

.statusNumberBox {
    font-size: 60px;
    font-family: var(--titlefont);
    -webkit-text-stroke: 1px #4c4c4c;
    color: transparent;
    transition: 0.8s
}

.statusSubBox:hover .statusNumberBox {
    -webkit-text-stroke: 1px var(--primary-color);
    -webkit-animation-name: swing;
    animation-name: swing
}

.statusContentBox {
    line-height: 1.4;
    margin-left: -10px;
    color: #fff;
    font-size: 15px
}

.statusContentBox h3 {
    font-size: 15px
}

.BlogList {
    display: flex;
    flex-wrap: wrap
}

.BlogList li {
    width: calc(100% / 3 - 30px);
    margin: 25px 15px
}

.blogImgBox {
    margin-bottom: 20px
}

.blogCntntBox {
    position: relative;
    z-index: 2;
    margin-top: -43px;
    width: calc(100% - 15px);
    float: right;
    background-color: var(--bodyOffcolor);
    padding: 35px 20px;
    box-shadow: 0 0 20px -7px #060606;
    border-radius: 6px 0 6px 6px
}

.blogCntntBox a.blgttlBox {
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed var(--borderlight);
    margin-bottom: 20px
}

.blogCntntBox h4 {
    font-size: 16px;
    text-align: left;
    font-weight: 500;
    line-height: 25px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 52px;
    color: var(--subtitle)
}

.blogCntntBox h4:hover {
    color: var(--primary-color)
}

.blogCntntBox p {
    font-size: 14px;
    height: 88px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-height: 22px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 15px
}

.blogImgBox .blogDate {
    position: absolute;
    background-color: var(--primary-color);
    z-index: 3;
    width: 81px;
    top: 10px;
    right: 0;
    margin-top: 0
}

.bloginnerSection {
    font-size: 18px;
    line-height: 1.8;
    color: var(--offwhite);
}

.bloginnerSection p {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.8;
    color: var(--para-color);
}

.bloginnerSection img {
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.backqute,
.bloginnerSection blockquote {
    border-left: 4px solid var(--primary-color);
    padding: 25px 30px;
    margin: 35px 0;
    background-color: var(--box-para);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 20px;
    line-height: 1.7;
    color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.blogImgBox {
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    max-height: 250px;
}

.blogImgBox img {
    border-radius: 4px;
    transition: 0.4s;
    height: auto;
    min-height: 240px;
}

.BlogList li:hover img {
    transform: scale(1.1)
}

.moreBtn {
    background-color: var(--primary-color);
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    margin-top: 10px;
    transition: 0.4s;
    padding: 8px 20px;
    border-radius: 31px;
    color: #fff;
    font-size: 14px;
    display: inline-block;
    transition: 0.4s
}

.moreBtn:hover {
    background-color: var(--primary-color);
    background: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 90%)
}

.InnerBlogDetailsBox {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.blogContentWrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 0;
}

.InnerBlogDetailsBox {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bloginnerSection .wp-block-image img {
    width: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 30px 0;
}

.bloginnerSection ul,
.bloginnerSection ol {
    margin: 25px 0;
    padding-left: 30px;
    line-height: 1.8;
}

.bloginnerSection ul li,
.bloginnerSection ol li {
    margin: 12px 0;
    color: var(--offwhite);
    font-size: 15px;
    line-height: 1.8;
}

.bloginnerSection ul li {
    list-style-type: none;
    position: relative;
    padding-left: 25px;
}

.bloginnerSection ul li::before {
    content: "▸";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: -3.5px;
    font-size: 15px;
}

.bloginnerSection ol {
    counter-reset: list-counter;
}

.bloginnerSection ol li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 30px;
}

.bloginnerSection ol li::marker {
    color: var(--primary-color);
    font-weight: bold;
}

.bloginnerSection em {
    font-style: italic;
    color: var(--offwhite);
}

.bloginnerSection code {
    background-color: #f4f4f4;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #e83e8c;
}

.bloginnerSection pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bloginnerSection pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-size: 14px;
    line-height: 1.6;
}

.bloginnerSection table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: none;
    overflow: hidden;
}

.bloginnerSection table th,
.bloginnerSection table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.bloginnerSection table th {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.bloginnerSection table tr:last-child td {
    border-bottom: none;
}

.bloginnerSection hr {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 40px 0;
    border-radius: 2px;
}

.bloginnerSection a {
    color: #48a52f;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.bloginnerSection a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.InnerBlogListBox {
    width: 360px;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px)
}

.BlogInnerList li {
    display: block;
    background-color: var(--bglight);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 3px
}

.BlogInnerList li a {
    display: flex;
    align-items: center
}

.BlogInnerList li a img {
    width: 80px;
    margin-right: 10px
}

.BlogInnerList li a img {
    width: 80px;
    height: auto;
    border-radius: 4px
}

.bloginnerCntntListBox {
    width: calc(100% - 90px)
}

.bloginnerListDate {
    font-size: 13px;
    font-weight: 400;
    color: var(--primary-color)
}

.BlogInnerList li a p {
    font-size: 13px;
    text-align: left;
    font-weight: 500;
    line-height: 21px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 41px;
    color: var(--subtitle);
    margin-bottom: 0
}

.BlogInnerList li a p:hover {
    text-decoration: underline
}

.svg1 {
    position: absolute;
    width: 200px;
    right: -80px;
    top: 150px
}

.mainTilte {
    font-size: 34px;
    margin-bottom: 20px;
    font-weight: 500;
    font-family: var(--titlefont);
    color: var(--white);
    letter-spacing: 3px;
    text-align: center
}

.serviceMainBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    align-items: center
}

.serviceLeftBox {
    width: calc(100% - 400px)
}

.serviceRightBox {
    width: 380px;
    margin-left: 20px;
    position: relative;
    height: 400px
}

.mask1 {
    -webkit-mask-image: url(../../../../../../../../../../wp-content/themes/bpract/assets/images/shape.svg);
    mask-image: url(../../../../../../../../../../wp-content/themes/bpract/assets/images/shape.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 96%;
    -webkit-mask-size: 96%;
    max-width: 385px
}

.serviceRightBox .mask1 {
    position: absolute;
    transition-property: transform, opacity;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    transform: translateX(10%);
    opacity: 0
}

.serviceRightBox .mask1.Imgactive {
    transform: translateX(0%);
    opacity: 1
}

.serviceBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    justify-content: center
}

.index .serviceSubBox {
    width: calc(100% / 2 - 30px);
    margin: 25px 15px;
    display: flex
}

.index .serviceNumberBox {
    width: 100px;
    font-size: 55px;
    font-family: var(--titlefont);
    -webkit-text-stroke: 1px #4c4c4c;
    color: transparent;
    transition: 0.8s
}

.serviceCntntBox {
    width: calc(100% - 120px);
    margin-left: 10px
}

.index .serviceSubBox:hover .serviceNumberBox {
    -webkit-text-stroke: 1px var(--primary-color);
    -webkit-animation-name: swing;
    animation-name: swing
}

.digitalMarheting .serviceBox.webDesignservce .serviceSubBox {
    width: calc(100% / 4 - 30px);
    margin: 25px 15px
}

.serviceBoxtecter .serviceNumberBox:after {
    left: calc(50% - 30px) !important
}

.serviceBoxtecter .serviceTitle {
    text-align: center
}

.digitalMarheting .serviceSubBox {
    width: calc(100% / 3 - 30px);
    margin: 25px 15px
}

.imghover1 {
    position: relative;
    margin: 10px
}

.imghover1>img {
    position: relative;
    height: auto
}

.imghover1::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(25 47 33 / 33%);
    z-index: 1;
    left: 0;
    top: 0;
    transition: 0.4s
}

.imghover1:hover::after {
    background: linear-gradient(0deg, rgb(72 165 47 / 84%) 0%, rgb(10 23 33 / 57%) 58%, rgb(0 0 0 / 5%) 100%)
}

.imghover1:hover .hovercntnt1 {
    background: none
}

.imghover1:hover p {
    color: #fff
}

.imghover1 .hovercntnt1 {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 0;
    padding: 20px;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 20%, rgba(253, 187, 45, 0) 100%)
}

.imghover1 .hovercntnt1 h5 {
    color: #fff;
    font-size: 20px
}

.servc .missionCntntBox {
    width: calc(100% - 75px);
    min-height: 45px
}

.fadeTitle {
    font-size: 48px;
    font-family: var(--titlefont);
    -webkit-text-stroke: 1px #4c4c4c;
    color: transparent;
    position: absolute;
    margin-left: -147px;
    margin-top: -42px;
    opacity: .7;
    transition: 0.5s;
    font-weight: 500
}

.mainTilte:hover .fadeTitle {
    -webkit-text-stroke: 1px var(--primary-color)
}

.digitalMarheting .serviceNumberBox {
    font-size: 54px;
    font-family: var(--titlefont);
    -webkit-text-stroke: 1px #b5b5b5;
    color: transparent;
    margin-right: 20px;
    line-height: 100%;
    transition: 0.4s;
    position: relative;
    display: block;
    margin-bottom: 40px
}

.serviceSubBox:hover .serviceNumberBox {
    -webkit-text-stroke: 1px var(--primary-color)
}

.serviceBoxtecter .serviceNumberBox {
    text-align: center;
    margin-right: 0
}

.digitalMarheting .serviceNumberBox:after {
    content: "";
    height: 25px;
    width: 60px;
    background-color: var(--primary-color);
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 80%);
    position: absolute;
    bottom: -10px;
    left: 7px;
    transform: skew(321deg, 350deg) rotate(9deg);
    z-index: -1;
    transition: 0.4s
}

.digitalMarheting .serviceSubBox:hover .serviceNumberBox:after {
    transform: skew(360deg, 360deg)
}

.serviceCntntBox {
    width: 100%
}

.serviceTitle {
    font-size: 16px;
    color: var(--offwhite);
    margin-bottom: 12px;
    line-height: 1.4;
    font-family: var(--fontMedium);

    a{
        color: var(--offwhite);
        transition: 0.4s;
    }
}

.serviceCntntBox p {
    font-size: 14px;
    color: var(--para-color);
    height: 42px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 22px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0
}

.serviceRightBox .wtrefct {
    left: 160px;
    transform: scale(.5);
    top: 160px;
    z-index: 1
}

.serviceLeftBox .btnBox {
    text-align: center
}

.serviceLeftBox .btnstyle1:hover:before {
    width: 150px
}

.sectionservices {
    position: relative
}

.sectionservices:before {
    content: "";
    background: var(--wpr-bg-5c9d20be-23fa-4b0d-afc9-4739c0b64f80);
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    margin: auto;
    height: 100%;
    width: 100%;
    z-index: -1
}

/* AI Section Styles */
.sectionAI {
    position: relative;
    background: var(--bodycolor);
    overflow: hidden;
}

/* Decorative background orbs */
.ai-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}
.ai-bg-orb--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--primary-color), transparent 70%);
    top: -100px;
    right: -150px;
}
.ai-bg-orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--secondary-color), transparent 70%);
    bottom: -80px;
    left: -100px;
}

/* Subtle dot grid background */
.ai-bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(72, 165, 47, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.sectionAI .container {
    position: relative;
    z-index: 1;
}

/* ---- Bento Grid ---- */
.ai-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.ai-bento__hero {
    display: flex;
}
.ai-bento__capabilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Bento cards base */
.ai-bento__card {
    position: relative;
    background: var(--bodyOffcolor);
    border: none;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}
.ai-bento__card:hover {
    transform: translateY(-4px);
}

/* Card glow effect on hover */
.ai-bento__card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--primary-color), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ai-bento__card:hover .ai-bento__card-glow {
    opacity: 1;
}

/* Hero card */
.ai-bento__card--hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background: linear-gradient(160deg, var(--bodyOffcolor) 0%, rgba(72, 165, 47, 0.04) 100%);
}
.ai-bento__card--hero h3 {
    color: var(--white);
    font-size: 22px;
    margin-bottom: 20px;
    font-family: var(--titlefont);
    line-height: 1.4;
}
.ai-bento__card--hero h3.subtitle:after,
.bgContainerBox .subtitle:after {
    display: none;
}
.ai-bento__card--hero p {
    color: var(--para-color);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}
.ai-bento__card--hero p:last-child {
    margin-bottom: 0;
}

/* AI Brain Infographic */
.ai-brain {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}
.ai-brain--why {
    min-height: 360px;
    margin-top: 36px;
}

.ai-brain__circuits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Center AI badge */
.ai-brain__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 0 30px rgba(72, 165, 47, 0.35), 0 0 60px rgba(72, 165, 47, 0.12);
}
.ai-brain__center span {
    color: #fff;
    font-size: 20px;
    font-family: var(--titlefont);
    font-weight: 700;
    letter-spacing: 1px;
}

/* Quadrant grid */
.ai-brain__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;
}

.ai-brain__quad {
    text-align: center;
    padding: 12px 10px 16px;
}

.ai-brain__quad-inner {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 14px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* Quadrant colors */
.ai-brain__quad--tl .ai-brain__quad-inner {
    background: linear-gradient(145deg, #1a5e2a, #2d8a3e);
    border-bottom-right-radius: 6px;
}
.ai-brain__quad--tr .ai-brain__quad-inner {
    background: linear-gradient(145deg, #2e7d32, #4caf50);
    border-bottom-left-radius: 6px;
}
.ai-brain__quad--bl .ai-brain__quad-inner {
    background: linear-gradient(145deg, #33691e, #558b2f);
    border-top-right-radius: 6px;
}
.ai-brain__quad--br .ai-brain__quad-inner {
    background: linear-gradient(145deg, #43a047, #66bb6a);
    border-top-left-radius: 6px;
}

.ai-brain__quad:hover .ai-brain__quad-inner {
    transform: scale(1.06);
    box-shadow: 0 8px 32px rgba(72, 165, 47, 0.25);
}

/* Quadrant icon */
.ai-brain__quad-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Connection nodes */
.ai-brain__quad-node {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bodycolor);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    z-index: 2;
}
.ai-brain__quad-node--r { right: -6px; top: 50%; transform: translateY(-50%); }
.ai-brain__quad-node--l { left: -6px; top: 50%; transform: translateY(-50%); }
.ai-brain__quad-node--b { bottom: -6px; left: 50%; transform: translateX(-50%); }
.ai-brain__quad-node--t { top: -6px; left: 50%; transform: translateX(-50%); }

/* Quadrant text */
.ai-brain__quad h4 {
    color: var(--white);
    font-size: 15px;
    font-family: var(--titlefont);
    margin-bottom: 4px;
    line-height: 1.3;
}
.ai-brain__quad p {
    color: var(--para-color);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

/* Layout alignment */
.ai-brain__quad--tl { text-align: right; }
.ai-brain__quad--tl .ai-brain__quad-inner { margin-right: 0; margin-left: auto; }
.ai-brain__quad--tr { text-align: left; }
.ai-brain__quad--tr .ai-brain__quad-inner { margin-left: 0; margin-right: auto; }
.ai-brain__quad--bl { text-align: right; }
.ai-brain__quad--bl .ai-brain__quad-inner { margin-right: 0; margin-left: auto; }
.ai-brain__quad--br { text-align: left; }
.ai-brain__quad--br .ai-brain__quad-inner { margin-left: 0; margin-right: auto; }

/* ---- Community / Join Section ---- */
.communityBox {
    position: relative;
    background: var(--bodyOffcolor);
    border: none;
    border-radius: 20px;
    padding: 60px 48px;
    overflow: hidden;
}

/* Gradient orbs */
.communityBox__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
}
.communityBox__orb--1 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, var(--primary-color), transparent 70%);
    top: -120px;
    right: -80px;
}
.communityBox__orb--2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--secondary-color), transparent 70%);
    bottom: -80px;
    left: -60px;
}

/* Subtle dot grid */
.communityBox__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(72, 165, 47, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Title */
.communityBox__title {
    color: var(--white);
    font-size: 28px;
    font-family: var(--titlefont);
    line-height: 1.35;
    margin-bottom: 20px;
}

/* Description */
.communityBox__desc {
    color: var(--para-color);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 32px;
}
.communityBox__desc p {
    margin-bottom: 12px;
}

/* Stats row */
.communityBox__stats {
    display: flex;
    gap: 36px;
}
.communityBox__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.communityBox__stat-num {
    font-size: 36px;
    font-family: var(--titlefont);
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.communityBox__stat-label {
    font-size: 13px;
    color: var(--para-color);
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 991px) {
    .communityBox {
        padding: 40px 28px;
    }
    .communityBox__title {
        font-size: 24px;
    }
}
@media (max-width: 576px) {
    .communityBox {
        padding: 32px 20px;
    }
    .communityBox__stats {
        flex-direction: column;
        gap: 20px;
    }
    .communityBox__stat {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

/* Icon styling */
.ai-bento__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(72, 165, 47, 0.08);
    border: 1px solid rgba(72, 165, 47, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}
.ai-bento__icon--lg {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin-bottom: 24px;
}
.ai-bento__card:hover .ai-bento__icon {
    background: rgba(72, 165, 47, 0.14);
    border-color: rgba(72, 165, 47, 0.3);
    box-shadow: 0 0 24px rgba(72, 165, 47, 0.12);
}

/* Capability cards */
.ai-bento__card--cap h4 {
    color: var(--white);
    font-size: 16px;
    font-family: var(--titlefont);
    margin-bottom: 10px;
    line-height: 1.3;
}
.ai-bento__card--cap p {
    color: var(--para-color);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ---- Why AI Section ---- */
.ai-why {
    padding-top: 40px;
}
.ai-why__intro {
    margin-bottom: 16px;
}
.ai-why__intro h3 {
    color: var(--white);
    font-size: 28px;
    font-family: var(--titlefont);
    line-height: 1.35;
    margin-bottom: 16px;
    border: none;
    text-decoration: none;
}
.ai-why__intro h3::after,
.ai-why__intro h3::before {
    display: none;
}
.ai-why__intro p {
    color: var(--para-color);
    font-size: 14px;
    line-height: 1.7;
}


.ai-why__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ai-why__row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: all 0.35s ease;
}
.ai-why__row:hover {
    background: rgba(72, 165, 47, 0.04);
    border-color: var(--borderlight);
}

.ai-why__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(72, 165, 47, 0.08);
    border: 1px solid rgba(72, 165, 47, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
}
.ai-why__row:hover .ai-why__icon {
    background: rgba(72, 165, 47, 0.14);
    border-color: rgba(72, 165, 47, 0.35);
    box-shadow: 0 0 18px rgba(72, 165, 47, 0.12);
}

.ai-why__text h4 {
    color: var(--white);
    font-size: 18px;
    font-family: var(--titlefont);
    line-height: 1.4;
    margin-bottom: 4px;
}
.ai-why__text p {
    color: var(--para-color);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ---- AI Section Responsive ---- */
@media (max-width: 991px) {
    .ai-bento {
        grid-template-columns: 1fr;
    }
    .ai-brain {
        min-height: 380px;
        margin-bottom: 24px;
    }
    .ai-bento__capabilities {
        grid-template-columns: 1fr 1fr;
    }
    .ai-why__intro {
        text-align: center;
        margin-bottom: 16px;
    }
    .ai-why__intro h3 {
        font-size: 24px;
    }
    .ai-brain--why {
        min-height: 320px;
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    .ai-bento__capabilities {
        grid-template-columns: 1fr;
    }
    .ai-bento__card {
        padding: 24px;
    }
    .ai-brain {
        min-height: 340px;
    }
    .ai-brain__quad-inner {
        width: 90px;
        height: 90px;
        border-radius: 18px;
    }
    .ai-brain__center {
        width: 50px;
        height: 50px;
        border-radius: 12px;
    }
    .ai-brain__center span {
        font-size: 16px;
    }
    .ai-brain__circuits {
        display: none;
    }
    .ai-why__row {
        padding: 16px;
    }
    .ai-why__intro h3 {
        font-size: 22px;
    }
    .ai-bg-orb--1 {
        width: 300px;
        height: 300px;
    }
    .ai-bg-orb--2 {
        width: 250px;
        height: 250px;
    }
}

/* ---- Unified Card Style for all homepage sections ---- */

/* Status / Stats boxes */
.statusSubBox {
    background: var(--bodyOffcolor);
    border-radius: 14px;
    padding: 24px 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}
.statusSubBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--primary-color), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.statusSubBox:hover {
    transform: translateY(-4px);
}
.statusSubBox:hover::before {
    opacity: 1;
}

/* Services section boxes */
.index .serviceSubBox {
    background: var(--bodyOffcolor);
    border-radius: 14px;
    padding: 28px 24px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}
.index .serviceSubBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--primary-color), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.index .serviceSubBox:hover {
    transform: translateY(-4px);
}
.index .serviceSubBox:hover::before {
    opacity: 1;
}

/* Why Choose / Digital Marketing section boxes */
.digitalMarheting .serviceSubBox {
    background: var(--bodyOffcolor);
    border-radius: 14px;
    padding: 28px 24px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}
.digitalMarheting .serviceSubBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--primary-color), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.digitalMarheting .serviceSubBox:hover {
    transform: translateY(-4px);
}
.digitalMarheting .serviceSubBox:hover::before {
    opacity: 1;
}

/* Testimonial box */
.testimaonialbox {
    background: var(--bodyOffcolor);
    border-radius: 16px;
}

/* FAQ accordion items */
.academyFAQ .accordion-item {
    background: var(--bodyOffcolor);
    border-radius: 12px !important;
    border-bottom: none;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.academyFAQ .accordion-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--primary-color), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.academyFAQ .accordion-item:hover {
    transform: translateY(-4px);
}
.academyFAQ .accordion-item:hover::before {
    opacity: 1;
}

/* Blog post cards */
.BlogPosts .LeftPost,
.BlogPosts .RightPost {
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.BlogPosts .LeftPost:hover,
.BlogPosts .RightPost:hover {
    transform: translateY(-4px);
}

/* Talk / CTA section box */
.talkBox {
    border-radius: 14px;
}

.sectionTestimonials {
    background: var(--wpr-bg-6178b7e7-cbdc-4165-9508-383148171468) no-repeat left bottom
}

.testimaonialbox {
    padding: 15px 60px;
    border-radius: 12px;
    position: relative
}

.text-white {
    color: #fff !important
}

.text-left {
    text-align: left !important
}

.testimonial4_slide {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 20%;
    position: relative
}

.carousel-item::before {
    content: "";
    height: 34px;
    width: 42px;
    position: absolute;
    left: 0;
    top: 25px
}

.testimonial4_clent {
    width: 100%;
    margin-top: 10px
}

.testimonial4_slide img {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    display: block;
    margin: 10px auto
}

.testimonial4_slide>p {
    font-size: 15px;
    line-height: 26px;
    margin: 20px 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #1d2a34;
    position: relative
}

.testimonial4_slide>p:before {
    position: absolute;
    content: "";
    background: var(--wpr-bg-31a5727c-5007-42b2-adb8-7cc58b1525f6) no-repeat;
    height: 60px;
    width: 60px;
    left: -100px;
    top: -30px;
    background-size: 60px 60px
}

.testimonial4_slide>p:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1d2a34;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto
}

.testimonial4_clentname {
    text-align: center;
    margin: 10px auto
}

.testimonial4_clentname p {
    font-size: 13px;
    margin: 1px 0 20px
}

.testimaonialbox .carousel {
    padding-bottom: 50px
}

.testimaonialbox .carousel-control-next,
.testimaonialbox .carousel-control-prev {
    bottom: -40px;
    top: auto;
    width: 20px;
    margin-left: 60px
}

.testimaonialbox .carousel-control-prev span,
.testimaonialbox .carousel-control-next span {
    display: none
}

.testimaonialbox .carousel-control-prev {
    transform: rotate(180deg)
}

.testimaonialbox .carousel-control-next {
    right: auto;
    left: 40px
}

.carousel-control-prev i,
.carousel-control-next i {
    font-size: 34px
}

.testimaonialbox .carousel-inner {
    min-height: 250px
}

.mixedSlider {
    position: relative
}

.mixedSlider .MS-content {
    white-space: nowrap;
    overflow: hidden;
    margin: 0 5%;
    text-align: center
}

.mixedSlider .MS-content .item {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    height: 100%;
    white-space: normal;
    padding: 10px;
    padding-bottom: 5px
}

.mixedSlider .MS-controls button {
    position: absolute;
    color: var(--primary-color);
    outline: 0;
    font-size: 16px;
    top: 50%;
    transition: 0.4s linear;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(#08141c, #08141c) padding-box, linear-gradient(to right, #3c3c3c, #3c3c3c) border-box;
    border-radius: 50em;
    border: 1px solid transparent
}

.mixedSlider .MS-controls button:hover {
    background: linear-gradient(var(--bodycolor), var(--bodycolor)) padding-box, linear-gradient(to right, var(--primary-color), var(--secondary-color)) border-box;
    border-radius: 50em;
    border: 1px solid transparent
}

.mixedSlider .MS-controls button {
    top: 30%
}

.mixedSlider .MS-controls .MS-left {
    left: -20px;
    transform: rotate(180deg)
}

.mixedSlider .MS-controls .MS-right {
    right: -20px
}

.main-footer {
    padding: 100px 0 20px;
    background: var(--bodycolor);
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0
}

.main-footer.zClass {
    z-index: 1
}

.talkSectiion {
    margin: 60px 0
}

.talkBox {
    background-color: var(--primary-color);
    background-image: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    margin: auto;
    position: relative;
    border-radius: 2px
}

.talkBtn {
    padding: 6px 16px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 4px;
    font-weight: 300;
    transition: 0.4s
}

.talkBtn a {
    color: #fff
}

.talkBtn:hover {
    border: 1px solid #fff;
    color: var(--primary-color);
    background-color: #fff
}

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

.talkBox .wtrefct {
    fill: var(--bodycolor);
    position: absolute;
    z-index: 0;
    transform: scale(.6);
    bottom: -125px;
    top: auto;
    left: 0
}

.imghr {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    height: 150px;
    width: auto;
    left: 100px
}

.academySpecialitySection .strocktext {
    -webkit-text-stroke: 1px #ffffff;
}

.talkCntntBoxBox b {
    color: #fff;
    font-weight: 400;
    font-size: 17px
}

.talkcontact {
    display: flex;
    align-items: center
}

.talkcontactIcon {
    width: 36px;
    margin-right: 10px
}

.talkcontact p {
    margin-bottom: 0;
    width: calc(100% - 46px);
}

.talkcontact p span a {
    color: var(--offwhite);
    font-size: 14px
}

.talkcontact p a {
    color: #fff
}

.talkcontact span:last-child {
    border-left: 1px solid var(--offwhite);
    padding-left: 7px;
    margin-left: 3px
}

.sidNavsocialBox {
    margin-top: 40px
}

.sidNavsocialBox ul {
    display: flex;
    align-items: center;
    width: 70%
}

.sidNavsocialBox ul li a {
    color: var(--primary-color);
    border: 1px solid #3c3c3c;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    float: left;
    transition: 0.4s;
    margin-right: 7px
}

.sidNavsocialBox ul li a img {
    width: 14px;
    height: 14px
}

.sidNavsocialBox ul li a:hover {
    background-color: #3c3c3c;
    background: linear-gradient(var(--bodycolor), var(--bodycolor)) padding-box, linear-gradient(to right, var(--primary-color), var(--secondary-color)) border-box;
    border-radius: 50em;
    border: 1px solid transparent
}

.innerBannerSection {
    display: flex;
    align-items: center;
    background-color: var(--bodyOffcolor);
    height: 720px;
    background-size: 100% !important
}

.blogSubHd {
    padding-left: 50px
}

.innerBannerSection.aboutBannerBg {
    height: 92vh
}

.servicesBannerBg {
    background: var(--wpr-bg-707a959e-9dc8-4c52-b26f-e7e9e258fcef);
    background-position: bottom center
}

.aboutBannerBg {
    background: var(--wpr-bg-a17e0eba-4e2b-4976-95e9-87d82f56a8bb)
}

.careerBg {
    background: var(--wpr-bg-6ee29016-c100-438f-b5f4-f8f984d6b85e)
}

.contactBg {
    background: var(--wpr-bg-81c833ef-9655-48c3-81d5-ca3c2dae221a);
    background-position: bottom center
}

.blogBg {
    background: var(--wpr-bg-398ea274-820c-47e0-a487-6a9d93b76203);
    background-position: bottom center
}

.mobileappBg {
    background: var(--wpr-bg-f294a8e7-56d0-4cdf-ad00-5f9425953278);
    background-position: bottom center
}

.webdesignBannerBg {
    background: var(--wpr-bg-8b26a45c-8cda-4dd5-a4bd-ac171a73d903);
    background-position: bottom center
}

.digitalmarketBannerBg {
    background: var(--wpr-bg-be639c2a-e9f5-491a-b816-8b94a40091f2);
    background-position: bottom center
}

.softwareBg {
    background: var(--wpr-bg-81585005-0567-49d1-9572-14b59f1dd512);
    background-position: bottom center
}

.uiuxBg {
    background: var(--wpr-bg-aab74591-e2bd-4da3-a088-53293e0d386e);
    background-position: bottom center
}

.cmsBg {
    background: var(--wpr-bg-a7f64b70-c1de-46a5-bb38-49f84559df05) no-repeat;
    background-position: bottom center
}

.coindevBannerBg {
    background: var(--wpr-bg-f25a9b14-e492-4b50-9336-9d0c26f1d94c) no-repeat;
    background-position: bottom center
}

#site-content.innerSiteContent {
    margin-top: 679px
}

#site-content {
    position: relative;
    z-index: 2;
    background-color: var(--bodycolor);
    margin-top: 100vh;
    overflow: hidden;
    overflow-x: hidden;
}

#site-content.aboutSiteContent {
    margin-top: 91vh;
    overflow: visible;
}

.serviceListBox ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px
}

.serviceListBox ul li {
    width: calc(100% / 3 - 40px);
    margin: 20px;
    border-radius: 6px;
    background-color: var(--serviceListBox);
    border: 1px solid var(--bodyOffcolor);
    padding: 35px 35px;
    position: relative;
    transition: 0.4s;
    overflow: hidden
}

.serviceListBox ul li:hover {
    border: 1px solid var(--primary-color)
}

.serviceListBox ul li::before {
    content: "";
    background-color: var(--primary-color);
    backdrop-filter: blur(8px);
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: 1;
    opacity: .1;
    box-shadow: 20px 2px 34px 43px #4caf50
}

.serviceListIcon {
    width: 60px;
    height: 60px;
    background-color: #172a26;
    border-radius: 6px;
    margin-bottom: 15px;
    line-height: 60px;
    text-align: center
}

.serviceListIcon img {
    width: auto
}

.serviceListCntnt h4 {
    font-size: 15px;
    color: var(--offwhite);
    line-height: 24px;
    margin-bottom: 10px
}

.serviceListCntnt h4:after {
    content: "";
    height: 4px;
    width: 4px;
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    margin-top: 13px;
    margin-left: 3px
}

.serviceListCntnt p {
    font-size: 14px;
    color: var(--para-color);
    height: 66px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-height: 22px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0
}

.serviceListBox ul li .btnstyle1:hover:before {
    width: 130px
}

.serviceListBox ul li .btnstyle1:before {
    width: 40px;
    height: 40px;
    top: -7px
}

.terms h4 {
    font-size: 18px;
    color: #fff;
    margin-top: 45px;
    font-weight: 400
}

.terms ul {
    margin-top: 20px;
    margin-bottom: 25px
}

.terms ul li {
    list-style: circle;
    margin-left: 20px;
    margin-bottom: 5px
}

.cleints {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cleints li {
    margin: 15px
}

.cleints li img {
    filter: grayscale(100%);
    opacity: .5
}

.cleints li:hover img {
    filter: grayscale(0%);
    opacity: 1
}

.AboutIntroBox {
    margin-top: 60px
}

.AboutIntroBox {
    display: flex;
    flex-wrap: wrap
}

.AboutIntroImgBox {
    width: 530px;
    display: flex;
    flex-wrap: wrap
}

.AboutIntroLeftImgBox {
    width: calc(50% - 5px);
    margin-right: 5px;
    margin-bottom: 5px
}

.AboutIntroLeftImgBox img,
.AboutIntroRightImgBox img {
    border-radius: 4px;
    height: auto
}

.AboutIntroRightImgBox {
    width: 50%
}

.AboutIntroBottomBox {
    background-color: var(--contactDetils);
    border-radius: 4px;
    margin-top: 5px;
    padding: 20px;
    height: 180px;
    font-size: 23px;
    font-family: var(--titlefont);
    color: var(--white);
    line-height: 40px;
    font-weight: 500;
    position: relative;
    overflow: hidden
}

.AboutIntroBottomBox span {
    position: relative;
    z-index: 2
}

.AboutIntroBottomBox .wtrefct {
    left: auto;
    z-index: 0;
    right: -130px;
    bottom: -195px;
    top: auto
}

.AboutIntro_CntntBox {
    width: calc(100% - 570px);
    margin-left: 40px
}

.largecaption1 {
    font-size: 32x;
    color: var(--white);
    font-family: var(--titlefont);
    margin-bottom: 15px;
    display: block;
    margin-top: 90px
}

.smalltitle {
    font-size: 16px;
    color: var(--primary-color);
    font-family: var(--titlefont);
    margin-bottom: 15px;
    display: block;
    font-weight: 400
}

.subtitle {
    font-size: 21px;
    color: var(--subtitle);
    position: relative;
    margin-bottom: 40px;
    line-height: 29px;
    font-family: var(--titlefont)
}

.subtitle:after {
    content: "";
    height: 2px;
    width: 75px;
    background-color: var(--primary-color);
    position: absolute;
    left: 0;
    bottom: -20px
}

.Aboutviedocontnr {
    position: absolute;
    left: 0;
    right: 0;
    margin: -200px auto 0;
    width: 810px;
    border: 1px solid #7e8c95;
    padding: 5px 5px 0 5px;
    border-radius: 4px
}

.Aboutviedocontnr .videoBox {
    position: relative
}

.Aboutviedocontnr .videoBox:after {
    position: absolute;
    content: "";
    width: calc(100% + 2px);
    height: 100%;
    background-color: #000;
    opacity: .4;
    top: 0;
    left: 0
}

.play-pause-btn {
    display: block;
    width: 66px;
    height: 66px;
    line-height: 52px;
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
    position: absolute;
    z-index: 22222;
    left: auto;
    right: 25px;
    bottom: 25px
}

.play-pause-btn img {
    width: 16px;
    height: 19px
}

.play-pause-btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 65px;
    width: 65px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: ripple 3s infinite;
    box-shadow: 0 0 0 0 var(--primary-color)
}

.play .pauseyBtn,
.pause .playBtn {
    display: none
}

.aboutFirstSection {
    padding-top: 450px
}

.missionBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    position: relative
}

.missionIconBox {
    width: 60px;
    margin-right: 15px
}

.missionIconBox {
    width: 34px;
    height: 34px;
    background-color: var(--primary-color);
    border-radius: 10px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    transition: 0.4s
}

.missionBox::after {
    content: "";
    height: 100%;
    width: 1px;
    border-right: 1px dashed var(--primary-color);
    position: absolute;
    left: 17px;
    top: 30px
}

.missionBox:last-child:after {
    display: none
}

.missionBox:hover .missionIconBox {
    border-radius: 50%
}

.missionCntntBox {
    width: calc(100% - 75px)
}

.misnTitle {
    font-family: var(--fontMedium);
    font-size: 18px;
    color: var(--offwhite)
}

.missionCntntBox p {
    margin-top: 0;
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 23px
}

.ulcomonStyle li {
    margin-bottom: 5px;
    margin-left: 30px;
    position: relative;
    margin-top: 10px;
    line-height: 25px;
    font-size: 15px;
}

.whitefont {
    color: #fff
}

.ulcomonStyle li:before {
    content: "\2713";
    position: absolute;
    left: -25px;
    color: var(--primary-color)
}

.AboutspcialBox {
    width: calc(100% - 120px);
    margin-right: 5px;
    float: right;
    display: flex;
    align-items: center
}

.abtUl {
    display: block;
    margin-top: 50px
}

.abtUl li {
    width: calc(100% / 2 - 28px);
    margin: 10px;
    padding: 20px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    float: left;
    background-color: var(--bodyOffcolor)
}

.abtUl li:first-child,
.abtUl li:nth-child(3) {
    margin-top: 10px
}

.abtUl li:nth-child(2) {
    margin-top: -80px
}

.abtUl li:nth-child(4) {
    margin-top: -125px
}

.abtUl li .iconBox img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 10px auto;
    height: auto;
    transition: 0.8s
}

.abtUl li:hover .iconBox img {
    -webkit-animation-name: swing;
    animation-name: swing
}

.abtUl li b {
    font-size: 34px;
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 500
}

.abtUl li span {
    font-size: 13px;
    display: block;
    text-align: center
}

.spcialBox {
    position: absolute;
    left: 0;
    padding: 20px;
    background-color: var(--bodyOffcolor);
    width: 270px
}

.spcialBox .ulcomonStyle li {
    color: var(--para-color);
    font-size: 13px
}

.smalltitle2 {
    font-size: 27px;
    color: var(--subtitle);
    position: relative;
    margin-bottom: 40px
}

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

.justifyBox .btnstyle1:hover:before {
    width: 130px
}

.contactLinkBox {
    display: flex;
    align-items: center
}

.contactLinkIcon {
    width: 54px;
    height: 54px;
    padding: 6px;
    border: 1px solid var(--secondary-color);
    border-radius: 50%;
    margin-right: 15px
}

.contactLinkIcon span {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    position: relative;
    display: block;
    text-align: center;
    background-color: #fff;
    color: var(--color-accent);
    border-radius: 50%
}

@-webkit-keyframes ripple {
    20% {
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0)
    }

    80% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
    }
}

@-moz-keyframes ripple {
    20% {
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0)
    }

    80% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
    }
}

@-ms-keyframes ripple {
    20% {
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0)
    }

    80% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
    }
}

@-o-keyframes ripple {
    20% {
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0)
    }

    80% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
    }
}

@keyframes ripple {
    20% {
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0)
    }

    80% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
    }
}

.contactLinkIcon span:before,
.contactLinkIcon span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 65px;
    width: 65px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: ripple 3s infinite;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .3)
}

.contactLinkIcon span:before {
    animation-delay: 0.9s
}

.contactLinkIcon span:after {
    animation-delay: 0.6s
}

.contactLinkIcon span img {
    width: auto
}

.contactLinkCntnt b {
    display: block;
    line-height: 20px;
    font-size: 13px;
    font-weight: 500
}

.contactLinkCntnt a {
    color: var(--white)
}

.justifyBox .btnstyle1 {
    margin-top: 5px;
    margin-left: 0;
    margin-right: 40px
}

.Leaders {
    display: flex;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: -40px
}

.leaderBoxTop {
    z-index: 2;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    direction: ltr;
    height: 60px;
    top: 55px
}

.leaderBoxTop svg {
    height: 45px;
    transform: translateX(-50%) rotateY(0deg);
    display: block;
    width: calc(100% + 1.3px);
    position: relative;
    left: 50%
}

.leaderBoxBottom {
    bottom: -1px
}

.leaderBoxBottom {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    direction: ltr;
    bottom: 165px;
    z-index: 2
}

.leaderBoxBottom svg {
    height: 45px;
    transform: translateX(-50%) rotateY(180deg);
    display: block;
    width: calc(100% + 1.3px);
    position: relative;
    transform: rotate(180deg)
}

.shape_fill {
    fill: var(--bodycolor);
    transform-origin: center;
    transform: rotateY(0deg)
}

.Leaders .card {
    margin: 0;
    position: relative;
    transition: transform 4s ease-in;
    overflow: hidden;
    width: calc(100% / 4)
}

.Leaders img {
    width: 100%;
    transition: transform 1s ease-in
}

.Leaders img:hover {
    transform: scale(1.2)
}

.Leaders .card:before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    transform: translateY(-102%);
    font-size: 25px;
    color: #fff;
    display: block;
    background-color: rgba(17, 151, 95, .137);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s ease-in;
    border-top: 1px solid var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
    justify-content: center;
    box-sizing: border-box
}

.Leaders .card:after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    transform: translateY(100%);
    font-size: 25px;
    color: #fff;
    display: block;
    background-color: rgba(188, 143, 143, .137);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    transition: transform 0.4s ease-in;
    border-top: 2px solid var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
    justify-content: center;
    box-sizing: border-box
}

.Leaders .card:hover::before {
    transform: translateY(0%)
}

.Leaders .card:hover::after {
    transform: translateY(0%)
}

.Leaders .card figcaption {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.Leaders .card h5,
.Leaders .card b {
    position: absolute;
    left: 40px;
    right: 40px;
    display: inline-block;
    background: var(--bodyOffcolor);
    -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
    transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
    padding: 12px 5px;
    margin: 0;
    top: 60%;
    text-transform: uppercase;
    font-weight: 400;
    z-index: 9;
    transition: 0.6s;
    text-align: center;
    font-size: 15px;
    color: #fff
}

.Leaders .card:hover h5 {
    -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
    transform: skew(-10deg) rotate(-10deg) translate(0, -50%)
}

.Leaders .card b {
    top: calc(60% + 60px) !important;
    font-size: 13px;
    text-transform: none;
    background: var(--contactDetils)
}

.Leaders .card:hover b {
    -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
    transform: skew(-10deg) rotate(-10deg) translate(0, -50%)
}

.sectionTeam {
    padding-top: 100px
}

.sectionfadebg {
    background-color: var(--bodyOffcolor)
}

.teamLeaders {
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px
}

.teamLeaders li {
    width: calc(100% / 3 - 20px);
    margin: 10px 10px;
    padding: 20px 20px 0 20px;
    position: relative
}

.teamLeaders li img,
.teammembers li img {
    height: auto
}

.teamLeaders li h5 {
    font-size: 14px;
    text-align: center;
    color: #fff;
    margin-top: 15px;
    margin-bottom: 5px;
    text-transform: uppercase
}

.teamLeaders li span {
    font-size: 12px;
    text-align: center;
    color: #fff;
    margin-bottom: 15px;
    display: block
}

.teamLeaders li::before {
    position: absolute;
    content: "";
    background-color: var(--contactDetils);
    bottom: 0;
    left: 0;
    height: 240px;
    width: 100%;
    z-index: -1;
    border-radius: 20px 0 20px 0
}

.teammembers {
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px
}

.teammembers li {
    width: calc(100% / 4 - 20px);
    margin: 15px 10px 2px 10px;
    background-color: var(--serviceListBox);
    padding: 20px 20px 0 20px;
    border-radius: 0 65px 0 30px;
    height: 330px;
    display: flex;
    align-items: end;
    overflow: hidden;
    border: 1px solid var(--primary-color);
    position: relative
}

.teammembers li:nth-child(5),
.teammembers li:nth-child(6),
.teammembers li:nth-child(7),
.teammembers li:nth-child(8),
.teammembers li:nth-child(13),
.teammembers li:nth-child(14),
.teammembers li:nth-child(15),
.teammembers li:nth-child(16),
.teammembers li:nth-child(21),
.teammembers li:nth-child(22),
.teammembers li:nth-child(23),
.teammembers li:nth-child(24),
.teammembers li:nth-child(29),
.teammembers li:nth-child(30),
.teammembers li:nth-child(31),
.teammembers li:nth-child(32) {
    border-radius: 30px 0 65px 0;
    border: 1px solid var(--secondary-color);
    margin: 2px 10px 15px 10px
}

.teammembers li::before {
    content: "";
    background-color: var(--primary-color);
    backdrop-filter: blur(8px);
    width: 100px;
    height: 100px;
    position: absolute;
    left: 20%;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: 1;
    opacity: .1;
    box-shadow: 20px 2px 34px 43px #4caf50;
    transition: 0.4s
}

.teammembers li figcaption {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.teammembers li h5,
.teammembers li b {
    position: absolute;
    left: 40px;
    right: 40px;
    display: inline-block;
    background: var(--bodyOffcolor);
    -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
    transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
    padding: 12px 5px;
    margin: 0;
    top: 50%;
    text-transform: uppercase;
    font-weight: 400;
    z-index: 9;
    transition: 0.6s;
    text-align: center;
    font-size: 14px;
    color: #fff
}

.teammembers li:hover h5 {
    -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
    transform: skew(-10deg) rotate(-10deg) translate(0, -50%)
}

.teammembers li b {
    top: calc(50% + 60px) !important;
    font-size: 12px;
    text-transform: none;
    background: var(--contactDetils)
}

.teammembers li:hover b {
    -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
    transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
    color: var(--offwhite)
}

.bgprimary {
    background-color: var(--primary-color);
    background: linear-gradient(293deg, var(--primary-color) 50%, var(--secondary-color) 100%)
}

.brandBox {
    width: 430px;
    padding: 0 15px
}

.brandBox .mainCaption {
    font-size: 66px;
    line-height: 66px
}

.brandServcBox {
    width: calc(100% - 460px);
    padding: 0 15px
}

.brandServc {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.brandServc li {
    width: calc(100% / 3 - 20px);
    margin: 10px;
    border: 1px solid var(--para-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 3px;
    padding: 25px 15px;
    text-align: center;
    min-height: 150px;
    cursor: pointer
}

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

.brandServc li img {
    margin-bottom: 15px;
    transition: 0.4s
}

.brandServc li:hover img {
    transform: scale(1.2)
}

.brandServc li h5 {
    color: #fff;
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    font-family: var(--primaryfont)
}

.digtlmarkting .serviceSubBox {
    display: flex;
    width: calc(100% / 1 - 0px);
    margin: 15px 0
}

.digtlmarkting .wtrefct {
    left: auto;
    z-index: 0;
    transform: scale(.65);
    top: auto;
    bottom: -65px;
    right: -54px
}

.digtlmarkting .mask1 {
    mask-size: 100%;
    -webkit-mask-size: 100%;
    max-width: 400px
}

.brandServcCntnt {
    background-color: var(--borderlight);
    padding: 0 20px 0;
    margin-left: 10px;
    margin-right: 10px;
    color: var(--offwhite);
    height: 0;
    transition: 0.4s;
    overflow: hidden;
    position: relative
}

.brandServcCntnt.active {
    height: auto;
    padding: 40px 20px 20px;
    top: 0
}

.brandServcCntntBox b {
    position: absolute;
    right: 25px;
    top: 10px;
    cursor: pointer
}

.tetialyTitle {
    font-size: 47px;
    letter-spacing: 1px
}

.Whatdigital {
    margin-top: 40px;
    padding-right: 150px
}

.Whatdigital .wtrefct {
    fill: var(--primaryOffColor);
    position: absolute;
    left: -99px;
    z-index: 0;
    transform: scale(.4);
    top: auto;
    bottom: 10px
}

.digitaltechnic {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.digitaltechnic li {
    width: auto;
    border: #363636 1px solid;
    padding: 2px 10px 2px 10px;
    margin: 4px;
    border-radius: 4px;
    font-size: 13px;
    position: relative;
    letter-spacing: .1px;
}

.digitaltechnic li a {
    padding: 2px 15px 2px 15px;
    color: #afafaf
}

.digitaltechnic li a:hover {
    color: #48a52f
}

.bgfar {
    background-color: var(--bglight);
    padding: 60px;
    border-radius: 8px
}

.bgfar img {
    height: auto
}

.appasrvcBox {
    margin-top: 30px
}

.appasrvcBox {
    text-align: center
}

.hrDash {
    height: 1px;
    width: 100%;
    clear: both;
    border-top: 1px dashed var(--hrdash)
}

.appasrvcBox img {
    display: block;
    margin: 20px auto;
    width: 74px;
    height: auto;
    background-color: #172a26;
    border-radius: 6px;
    text-align: center;
    padding: 10px;
    transition: 0.4s
}

.appasrvcBox h4,
.appasrvcBox h5 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--white)
}

.appasrvcBox:hover img {
    border: 1px solid var(--primary-color)
}

.technology {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0
}

.technology li {
    width: calc(80px)
}

.technology li img {
    display: block;
    margin: 5px auto;
    width: 74px;
    height: auto;
    background-color: #172a26;
    border-radius: 6px;
    text-align: center;
    padding: 10px;
    transition: 0.4s
}

.mlmpanbg {
    position: relative;
    padding: 30px 0 30px 50px
}

.z2 {
    position: relative;
    z-index: 2
}

.blogheadercaption2.mlmpanbg::before {
    content: "";
    background-color: var(--bodycolor);
    border-bottom: #c3ddf9;
    width: 75%;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%
}

.font28 {
    font-size: 28px;
    margin-bottom: 20px
}

.font22 {
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 1.6
}

.font18 {
    font-size: 18px;
    margin-bottom: 20px
}

.bestmlmImg {
    box-shadow: 1px 4px 16px 5px rgb(10 18 6);
    border-radius: 6px;
    height: auto
}

#site-content.innerSiteContent.blogsectnInner {
    margin-top: 589px
}

.innerBannerSection.blogsectnInner {
    height: 590px
}

.bloginnerSection h2 {
    font-size: 32px;
    color: var(--subtitle);
    line-height: 1.3;
    font-family: var(--titlefont);
    margin-top: 45px;
    margin-bottom: 20px;
    font-weight: 700;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--primary-color);
}

.bloginnerSection h3,
.bloginnerSection h4,
.bloginnerSection h5,
.bloginnerSection h6 {
    font-size: 24px;
    color: var(--subtitle);
    line-height: 1.4;
    font-family: var(--titlefont);
    margin-top: 35px;
    margin-bottom: 15px;
    font-weight: 600;
}

.bloginnerSection h3 {
    font-size: 26px;
}

.bloginnerSection h4 {
    font-size: 22px;
}

.bloginnerSection h5 {
    font-size: 20px;
}

.bloginnerSection h6 {
    font-size: 18px;
}

.not-found-center {
    width: 100%
}

.mlmplans ul {
    display: flex;
    flex-wrap: wrap
}

.mlmplans ul li {
    width: calc(100% / 2 - 20px);
    margin: 4px 10px;
    font-size: 13px
}

.mlmsoftwareImg {
    height: auto
}

.accodianTitle {
    font-size: 16px;
    margin-top: 5px;
    cursor: pointer
}

.accodianTitle:hover {
    color: var(--primary-color);
    text-decoration: underline
}

.customeAcodian .missionBox .acc_contnt {
    height: 0;
    overflow: hidden;
    transition: 0.4s height ease-in
}

.customeAcodian .missionBox.active .acc_contnt {
    height: auto;
    overflow: hidden
}

.serviceBox .para {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    font-weight: 400;
    float: left;
    width: 100%
}

.theme-btn {
    border: 0
}

.for-sm-input-file {
    left: 15px !important;
    top: -6px
}

.ConatctfeldRightBox .file-input-container {
    display: block;
    width: 100%
}

.file-input-container .form-control {
    padding-left: 32px
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #be2e30
}

.wpcf7 form .wpcf7-response-output {
    margin: 0em .5em 0em
}

.wpcf7-not-valid-tip {
    margin-top: -30px
}

.errImg {
    width: 260px;
    margin-bottom: 40px
}

.errorbox {
    margin: auto;
    text-align: center
}

.position-relative {
    position: relative
}

.errortitle {
    color: #fff;
    font-size: 24px
}

.errorBtnbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 230px;
    margin: 20px auto
}

.errorBtnbox a {
    color: var(--para-color);
    font-size: 14px
}

.gobackbtn span {
    transform: rotate(180deg);
    margin-left: 5px
}

.errorBtnbox a span {
    display: inline-block;
    margin-right: 5px;
    color: #0a0a0a;
    background-color: #6dc24c;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    border-radius: 50%;
    background-color: var(--primary-color);
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    font-size: 10px
}

.sectionerrors {
    position: relative;
    min-height: calc(100vh - 56px);
    align-items: center;
    justify-content: center;
    display: flex;
    padding-top: 60px
}

.sectionerrors:before {
    content: "";
    background: var(--wpr-bg-11064b73-ff4c-464e-bad4-a90f443f32b2);
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    margin: auto;
    height: 100%;
    width: 100%;
    z-index: -1
}

.share-button {
    float: left;
    position: relative;
    cursor: pointer;
    display: inline-block;
    height: 42px;
    margin-top: 30px;
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    perspective: 200px
}

.share-button__back {
    font-size: 18px;
    border: 1px solid #fff;
    padding: 5px 15px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(0, 0, 0, .1) inset
}

.share-button__front {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--secondary-color) 0%, var(--primary-color) 50%);
    border-radius: 24px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center top;
    -webkit-transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
    -moz-transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
    -ms-transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
    -o-transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
    transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden
}

.share-button__front img {
    width: 14px;
    height: 14px;
    margin-right: 10px
}

.share-button__text {
    margin: 0;
    line-height: 42px;
    font-size: 16px;
    text-align: center;
    color: #fff
}

.share__link {
    position: relative;
    top: 40px;
    display: inline-block;
    opacity: 0;
    margin-left: 4px;
    margin-right: 4px;
    -webkit-transition: top .5s cubic-bezier(.175, .885, .32, 1.275);
    -moz-transition: top .5s cubic-bezier(.175, .885, .32, 1.275);
    -ms-transition: top .5s cubic-bezier(.175, .885, .32, 1.275);
    -o-transition: top .5s cubic-bezier(.175, .885, .32, 1.275);
    transition: top .5s cubic-bezier(.175, .885, .32, 1.275)
}

.share-button:hover .share-button__front {
    transform: rotateX(90deg)
}

.share-button:hover .share__link {
    top: 0;
    opacity: 1
}

.share-button:hover .share__link:nth-of-type(1) {
    transition-delay: 0.1s
}

.share-button:hover .share__link:nth-of-type(2) {
    transition-delay: 0.2s
}

.share-button:hover .share__link:nth-of-type(3) {
    transition-delay: 0.3s
}

.share-button:hover .share__link:nth-of-type(4) {
    transition-delay: 0.4s
}

.whatsapp-sharer img {
    filter: invert(100%)
}

.bloginnerSection p a {
    color: #48a52f;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

.bloginnerSection p a:hover {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color);
}

.bFor {
    position: absolute;
    left: 0;
    top: 9px;
    z-index: -1;
    font-size: 18px;
    color: #85c94c
}

.single-heading-underline {
    position: relative;
    margin-bottom: 40px
}

.single-heading-underline:after {
    content: "";
    height: 2px;
    width: 75px;
    background-color: var(--primary-color);
    position: absolute;
    left: 0;
    bottom: -20px
}

.themechange {
    cursor: pointer
}

.lightmode {
    display: none
}

.darkmode {
    display: block
}

.wp-block-audio audio {
    min-width: 250px;
    width: 250px
}

.page-template-cmstemplate-page .innerSiteContent p a {
    color: #48a52f
}

.missionBox .misnTitle a {
    color: #c5c5c5
}

.missionBox .misnTitle a:hover {
    color: #48a52f
}

.statcounter {
    height: 0;
    float: left
}

.statcounter img {
    height: 0
}

.timestamp {
    display: none;
    font-size: 12px
}

.accordion .accordion-item {
    border-bottom: 1px solid #464b4e
}

.accordion .accordion-item button[aria-expanded='true'] {
    border-bottom: 1px solid #464b4e
}

.accordion button {
    position: relative;
    color: var(--offwhite);
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    font-size: 16px;
    font-weight: 400;
    border: none;
    background: none;
    outline: none
}

.accordion button:hover,
.accordion button:focus {
    cursor: pointer;
    color: var(--primary-color)
}

.accordion button:hover::after,
.accordion button:focus::after {
    cursor: pointer;
    color: var(--primary-color);
    border: 1px solid var(--primary-color)
}

.accordion button .accordion-title {
    padding: 1em 1.5em 1em 0
}

.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 22px
}

.accordion button .icon::before {
    display: block;
    position: absolute;
    content: '';
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: currentColor
}

.accordion button .icon::after {
    display: block;
    position: absolute;
    content: '';
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: currentColor
}

.accordion button[aria-expanded='true'] {
    color: var(--primary-color)
}

.accordion button[aria-expanded='true'] .icon::after {
    width: 0
}

.accordion button[aria-expanded='true']+.accordion-content {
    opacity: 1;
    max-height: 20em;
    transition: all 200ms linear;
    will-change: opacity, max-height;
    clear: both;
    width: 100%
}

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height
}

.accordion .accordion-content p {
    font-size: 16px;
    margin: 0;
}

.faqtitle {
    font-size: 19px;
    color: var(--subtitle);
    position: relative;
    margin-bottom: 25px;
    line-height: 21px;
    font-family: var(--titlefont)
}

.faqtitle:after {
    content: "";
    height: 2px;
    width: 55px;
    background-color: var(--primary-color);
    position: absolute;
    left: 0;
    bottom: -13px
}

.bpract-blog-auther {
    color: #48a52f
}

.wpml-ls-item img {
    width: 18px;
    height: 12px
}

.wpml-ls-item .sub-menu {
    height: 0;
    overflow: hidden;
    transition: height ease-in-out .4s;
    background-color: #142a37;
    position: absolute;
    border-radius: 4px
}

.wpml-ls-item:hover .sub-menu {
    height: auto;
    transition: height ease-in-out .4s;
    padding: 10px 15px
}

.wpml-ls-item .wpml-ls-flag {
    margin-right: 8px
}

.wpml-ls-item .sub-menu .wpml-ls-native,
.wpml-ls-item>a .wpml-ls-native {
    color: var(--navlink);
    background: linear-gradient(to right, #f9f9f9 0%, #ffffff 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--navlink)
}

.talkBtnBox .audio-player {
    display: none !important
}

.academyBanner .mainCaption {
    font-size: 68px;
}


.academyFAQ {

    width: 100%;
}

.academyFAQ .accordion-item {
    border-bottom: 1px solid #1a2a1f;
    margin-bottom: 5px;
    border-radius: 4px;
}

.academyFAQ .accordion-header {

    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    font-size: 16px;
    color: #fff;
}

.academyFAQ .accordion-header:hover,
.academyFAQ .accordion-header.active {
    color: var(--primary-color);
}

.academyFAQ .accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;

    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.academyFAQ .accordion-content.active {
    max-height: 200px;
    padding: 15px;
    opacity: 1;
}

.academyFAQ .icon {
    font-size: 18px;
    transition: transform 0.2s;
    font-size: 28px;
    line-height: .5;
}

.academyFAQ .icon.minus {
    display: none;
    font-size: 28px;

}

.academyFAQ .accordion-header.active .icon.plus {
    display: none;
}

.academyFAQ .accordion-header.active .icon.minus {
    display: inline;
}

    .aiChatBtn
    { 
    border: 0;
    background: #63bd54;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    text-transform: none;
    font-size: 14px;
    margin-right: 5px;
    display: flex;
    gap: 6px;
    align-items: center;
}

 .aiChatBtn svg {
           display: none;
        }
@media (max-width: 1480px) {
    .tetialyTitle {
        font-size: 36px
    }

    .aboutsectionHome:before {
        display: none
    }

    .vedioClip {
        mask-size: 15% 64%;
        -webkit-mask-size: 15% 64%;
        mask-position: 23% 93%;
        -webkit-mask-position: 23% 93%
    }

    .missionBox {
        margin-top: 10px
    }

    .teammembers li {
        height: 270px
    }

    .Aboutviedocontnr {
        margin: -100px auto 0
    }

    .aboutFirstSection {
        padding-top: 520px
    }

    .coinserviceSubBox {
        width: calc(100%/3 - 20px)
    }

    .coinserviceContntBox {
        min-height: 280px
    }
}

@media (max-width: 1280px) {
    .aboutsectionHome:before {
        display: none
    }

    .vedioClip {
        mask-size: 22% 42%;
        -webkit-mask-size: 22% 42%;
        mask-position: 15% 76%;
        -webkit-mask-position: 15% 76%
    }

}

@media (max-width: 1200px) {


    .navbar .container {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .logo {
        margin-right: 10px;
    }

    .grothSmalBox1 {
        width: 150px;
        height: 150px;
    }

    .grothSmalBox2 {
        width: 110px;
        height: 110px;
        bottom: 147px;
        left: 432px;
    }

    .grothSmalBox3 {
        width: 80px;
        height: 80px;
        left: 583px;
        bottom: 225px;
    }

    .grothSmalBox4 {
        width: 65px;
        height: 65px;
        bottom: 286px;
        left: 693px;
    }

    .grothSmalBox5 {
        width: 45px;
        height: 45px;
        bottom: 365px;
        left: 815px;
    }

    .grothSmalBox1_content {
        left: 5px;
        top: 162px;
    }

    .grothSmalBox2_content {
        left: 191px;
        top: 25px;
    }

    .grothSmalBox5_content {
        right: 0px;
        bottom: 146px;
    }

    .grothSmalBox5_content::after {
        right: 71px;
    }

    .grothSmalBox5_content .grothSmalBox_contentheader::after {
        width: 33px;
        left: auto;
    }

    .logoFixedConatiner {
        display: none
    }

    .index .serviceSubBox {
        width: calc(100% / 1 - 0px);
        margin: 15px 0
    }

    .serviceSubBox {
        width: calc(100% / 1 - 0px);
        margin: 5px 0
    }

    .serviceLeftBox .btnBox {
        text-align: left
    }

    .talkBox {
        width: 100%
    }

    .BlogPosts {
        height: 390px
    }

    .Aboutviedocontnr {
        position: relative;
        margin: 0 auto 0;
        width: 800px
    }

    .aboutFirstSection {
        padding-top: 150px
    }

    .innerBannerSection.aboutBannerBg {
        height: 440px
    }

    #site-content.aboutSiteContent {
        margin-top: 439px;
        padding-top: 60px
    }
}

@media (max-width: 1070px) {
    .coinStandrdBox {
        position: relative;
        width: calc(100%/2 - 20px);
        margin: 20px 10px
    }

    .coinserviceSubBox {
        width: calc(100%/2 - 20px)
    }

    .coinserviceContntBox {
        min-height: 250px
    }

    .sidnavTitle {
        margin-top: 25%
    }

    .innerBannerSection {
        height: 480px;
        align-items: end;
        padding-bottom: 40px;
        background-position: center center
    }

    .vedioClip {
        mask-size: 22% 42%;
        -webkit-mask-size: 22% 42%;
        mask-position: 15% 76%;
        -webkit-mask-position: 15% 76%
    }

    #site-content.aboutSiteContent,
    #site-content.innerSiteContent,
    #site-content.innerSiteContent.blogsectnInner {
        margin-top: 0;
        padding-top: 60px
    }

    .largecaption1 {
        font-size: 36px;
        margin-top: 10px
    }

    .mainTilte {
        font-size: 40px
    }

    .statusSubBox {
        width: calc(100% / 2 - 20px)
    }

    .mainCaption {
        font-size: 66px
    }

    .main-footer {
        position: relative
    }

    #site-content {
        margin-bottom: 0px !important
    }

    .mainContainer {
        position: relative;
        top: 0;
        width: 100%;
        overflow: hidden
    }

    .video-wrapper {
        display: none
    }

    .brandBox {
        width: 100%;
        padding: 0 15px
    }

    .brandServcBox {
        width: calc(100% - 0px);
        padding: 0 15px
    }
}

@media (max-width: 991.98px) {
    .lightShow.grothImg {
        display: none;
    }

    .ConatctfeldRightBox.ContactFormRightBox {
        width: calc(100% - 0px);
        padding: 20px 20px 20px 20px;
    }

    .chatBtn {
        width: 40px;
    }

    .innerBannerSection.academyBanner,
    .innerBannerSection.servicesBannerBg {
        height: 600px;
    }

    .growthBox {
        max-width: 300px;
        margin: 60px auto 90px;
    }

    .grothImg {
        display: none;
    }

    .grothSmalBox1,
    .grothSmalBox2,
    .grothSmalBox3,
    .grothSmalBox4,
    .grothSmalBox5,
    .grothSmalBox1_content,
    .grothSmalBox2_content,
    .grothSmalBox3_content,
    .grothSmalBox4_content,
    .grothSmalBox5_content {
        position: relative !important;
    }

    .grothSmalBox1 {
        width: 80px;
        height: 80px;
        bottom: auto;
        top: 195px;
        left: 240px;
        padding: 20px;
    }

    .grothSmalBox1_content {
        left: 0;
        top: 0;
    }

    .grothSmalBox1_content .grothSmalBox_contentheader::after {
        width: 50px;
    }

    .grothSmalBox2 {
        width: 80px;
        height: 80px;
        bottom: auto;
        top: 213px;
        left: 240px;
        padding: 20px;
    }

    .grothSmalBox2_content {
        left: 0px;
        top: 10px;
    }

    .grothSmalBox2_content::after {
        height: 143px;
        top: 18px;
        right: -43px;
    }

    .grothSmalBox3_content {
        position: absolute;
        right: auto;
        bottom: auto;
        width: 220px;
        left: 0;
        top: 50px;
    }

    .grothSmalBox3 {
        width: 80px;
        height: 80px;
        left: 235px;
        bottom: auto;
        top: 240px;
        padding: 20px;
    }

    .grothSmalBox3_content::after {
        bottom: auto;
        right: auto;
        left: 256px;
        top: 16px;
    }

    .grothSmalBox3_content .grothSmalBox_contentheader::after {

        width: 51px;
        left: auto;
        top: 18px;
        right: -22px;
    }

    .grothSmalBox4_content {
        right: auto;
        left: 0;
        top: 50px;
        width: 250px;
    }

    .grothSmalBox4 {
        width: 80px;
        height: 80px;
        bottom: auto;
        top: 252px;
        left: 240px;
        padding: 20px;
    }

    .grothSmalBox4_content::after {
        height: 160px;
        right: 0;
        top: 18px;
        right: -12px;
    }

    .grothSmalBox4_content .grothSmalBox_contentheader::after {
        width: 105px;
    }

    .grothSmalBox5_content .grothSmalBox_contentheader::after {
        width: 105px;
    }

    .grothSmalBox5 {
        width: 80px;
        height: 80px;
        bottom: auto;
        top: 252px;
        left: 240px;
        padding: 20px;
    }

    .grothSmalBox5_content {
        right: auto;
        bottom: auto;
        left: 0;
        top: 77px;
    }

    .grothSmalBox5_content .grothSmalBox_contentheader::after {
        width: 51px;
        left: auto;
        right: 3px;
        top: 19px;
    }

    .grothSmalBox5_content::after {
        height: 165px;
        z-index: -1;
        bottom: auto;
        top: 15px;
        right: auto;
        left: 246px;
        transform: rotate(339deg);
    }



    .AcademycareerrightSubBox {
        width: 100%;
    }

    .AcademycareerrightTop_Left,
    .AcademycareerrightTop_Right {
        margin-bottom: 30px;
    }

    .AcademycareerleftSubBox {
        width: 425px;
        padding-right: 0;
        margin-bottom: 30px;
    }

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


    .chatBtn span {
        display: none
    }

    .academyBannerImg {
        display: none;
    }

    .menuRight {
        width: 150px
    }

    .font28 {
        font-size: 22px;
        margin-bottom: 15px
    }

    .innerBannerSection {
        height: 400px
    }

    .innerBannerSection.blogBanner {
        height: 500px
    }

    #site-content.innerSiteContent,
    #site-content.innerSiteContent.blogsectnInner {
        margin-top: 0
    }

    .abtUl {
        margin-top: 200px;
        margin-bottom: 100px;
        width: 100%;
        float: left
    }

    .Aboutviedocontnr {
        width: 90%;
        margin: auto
    }

    .Aboutviedocontnr video {
        width: 100%
    }

    #site-content.aboutSiteContent {
        margin-top: 50px;
        padding-top: 50px
    }

    .BlogList li {
        width: calc(100% / 2 - 30px)
    }

    .teammembers li {
        width: calc(100% / 3 - 20px);
        height: 270px
    }

    .leaderBoxBottom {
        bottom: 125px
    }

    .leaderBoxTop {
        top: 20px
    }

    .AboutspcialBox {
        margin-top: 25px
    }

    .spcialBox {
        left: 20px
    }

    .AboutIntro_CntntBox {
        width: calc(100% - 0px);
        margin-left: 0;
        margin-top: 30px;
        padding: 20px
    }

    .AboutIntroImgBox {
        margin: auto
    }

    .jobHeader {
        justify-content: inherit
    }

    .jobHeader li {
        width: calc(100% / 2 - 20px);
        max-width: calc(100% / 2 - 20px)
    }

    .jobOpening>li {
        width: calc(100% / 2 - 30px)
    }

    .CaeerDetalLeftBox.ContactDetalLeftBox {
        width: 100%
    }

    .ConatctfeldRightBox.CaeerDetalRightBox {
        width: calc(100% - 0px);
        margin-left: 0
    }

    .contactFormBg.careerformbg {
        padding-right: 0
    }

    .contactFormBox {
        padding: 30px 0
    }

    .RightPost img {
        width: 100%;
        height: auto
    }

    .LeftPost {
        width: calc(100% / 1 - 0px);
        margin-right: 0
    }

    .RightPost {
        width: calc(100% / 1 - 0px);
        margin-left: 0;
        margin-top: 30px
    }

    .cleints {
        flex-wrap: wrap
    }

    .cleints li {
        width: calc(100% / 2 - 30px);
        margin: 30px 15px
    }

    .cleints li img {
        width: auto;
        margin: auto;
        display: block
    }

    .talkBox {
        justify-content: inherit;
        align-items: baseline;
        flex-direction: column;
        padding-left: 232px
    }

    .talkBtnBox {
        margin-top: 20px
    }

    .sectionContainer {
        padding: 60px 0 60px
    }

    .logo {
        margin-right: 0
    }

    .nav-menu .menu-item a {
        margin: 0 7px
    }

    .serviceListBox ul li {
        width: calc(100% / 3 - 20px);
        margin: 10px;
        padding: 35px 25px
    }

    #site-content {
        margin-top: 0
    }

    .Leaders .card {
        width: calc(100% / 3)
    }

    .Leaders {
        flex-wrap: wrap;
        justify-content: center
    }

    .teammembers li:nth-child(1),
    .teammembers li:nth-child(2),
    .teammembers li:nth-child(3),
    .teammembers li:nth-child(7),
    .teammembers li:nth-child(8),
    .teammembers li:nth-child(9),
    .teammembers li:nth-child(13),
    .teammembers li:nth-child(14),
    .teammembers li:nth-child(15),
    .teammembers li:nth-child(19),
    .teammembers li:nth-child(20),
    .teammembers li:nth-child(21),
    .teammembers li:nth-child(25),
    .teammembers li:nth-child(26),
    .teammembers li:nth-child(27),
    .teammembers li:nth-child(31),
    .teammembers li:nth-child(32) {
        border-radius: 0 65px 0 30px;
        margin: 15px 10px 2px 10px;
        border: 1px solid var(--primary-color)
    }

    .teammembers li:nth-child(4),
    .teammembers li:nth-child(5),
    .teammembers li:nth-child(6),
    .teammembers li:nth-child(10),
    .teammembers li:nth-child(11),
    .teammembers li:nth-child(12),
    .teammembers li:nth-child(16),
    .teammembers li:nth-child(17),
    .teammembers li:nth-child(18),
    .teammembers li:nth-child(19),
    .teammembers li:nth-child(22),
    .teammembers li:nth-child(23),
    .teammembers li:nth-child(24),
    .teammembers li:nth-child(28),
    .teammembers li:nth-child(29),
    .teammembers li:nth-child(30) {
        border-radius: 30px 0 65px 0;
        border: 1px solid var(--secondary-color);
        margin: 2px 10px 15px 10px
    }

    .teamLeaders li {
        width: calc(100% / 2 - 20px)
    }

    .BlogPosts {
        height: auto
    }

    .RightTopPost,
    .RightBotPost {
        height: calc(100% / 1 - 0px);
        overflow: hidden
    }
}


@media (min-width: 870px) {
    .mobileLogo {
        display: none
    }

    .bloginnerSection ul li::before{
        font-size: 19px;
    }
}

@media (max-width: 869.98px) {

    .mobileLogo {
        width: 130px;
        height: 47px;
        display: inline-block
    }

    .logo {
        display: none;
    }

    .navbar {
        background-color: rgb(8 20 28 / 86%)
    }

    .hamburger {
        display: inline-block
    }

    .sub-nav {
        position: relative;
        width: 100%;
        display: none;
        background-color: rgba(0, 0, 0, .2);
        box-sizing: border-box
    }

    .nav-menu .menu-item a {
        font-size: 14px;
        margin: 4px 15px;
        line-height: 24px;
        color: #bbb
    }

    .nav-menu {
        background: var(--bodycolor);
        flex-direction: column;
        opacity: 0;
        position: absolute;
        top: 0;
        left: -30px;
        transform: translatey(-100%);
        text-align: left;
        align-items: flex-start;
        height: 100vh;
        width: 250px;
        padding-top: 50px
    }

    .menu-active .nav-menu {
        transform: translatey(0%);
        opacity: 1
    }

    .logo {
        display: none
    }

    .menu-active #menu-toggler {
        left: 170px;
        top: 20px;
        position: absolute;
        z-index: 9
    }
}

@media (max-width: 768px) {


    .academyStudentsBox {
        margin-bottom: 50px;
    }

    .in-view.bganimation:after {
        display: none;
    }

    .AcademysucceBox {
        max-width: 100%;
        margin-top: 45px;
    }

    .academtAutotabs-container {
        flex-direction: column;
    }

    .academtAutotab-list {
        width: 100%;
    }

    .academyjobseekerImg {
        position: static;
        right: 0;
        top: 0;
        width: auto;
        top: auto;
        transform: translate(0px, 0%);
    }

    .academyjobseekerSection {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }

    .jobseekerTitle {
        font-size: 26px;
        line-height: 1.3;
        margin-top: 22px;
    }

    .academySpecialitySection,
    .academyjobseekerSection {
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 30px);
    }

    .academySpecialitySection {
        padding: 60px 5px;
    }

    .academyH2 {
        font-size: 30px;
    }

    .academtAutotab {
        padding: 10px;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .academtAutotab-content {
        padding: 15px;
    }

    .academtAutotab.active::before {
        border-width: 2px;
        /* Thinner border for smaller screens */
    }

    .academytestimonial {
        flex-direction: row;
        height: auto;
    }

    .academycontent-wrapper {
        display: block;
        padding: 30px;
    }

    .academytestimonial-content {
        padding: 30px 0;
    }

    .academytestimonial img {
        border-radius: 0;
    }

    .academytestimonial-content {
        width: 100%;
    }

    .academybanner1 {
        display: none;
    }

    .academyBanner .mainCaption {
        font-size: 35px;
        line-height: 1.4;
    }

    .coinStandrdBox {
        position: relative;
        width: calc(100%/1 - 0px);
        margin: 0 10px
    }

    .coinStandrdBox .serviceNumberBox {
        margin: 5px 0 25px !important
    }

    .coinserviceSubBox {
        width: calc(100%/1 - 0px);
        margin: 15px 0
    }

    .coinserviceContntBox {
        min-height: auto
    }

    .blogheadercaption2.mlmpanbg::before {
        display: none
    }

    .bestmlmImg {
        margin-bottom: 20px
    }

    .innerBannerSection.blogBanner {
        height: auto;
        margin-top: 60px
    }

    .mlmpanbg {
        position: relative;
        padding: 30px 0 30px 20px
    }

    .abtUl {
        margin-top: 120px
    }

    .largecaption1 {
        font-size: 26px
    }

    .InnerBlogDetailsBox {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        padding: 0 15px;
    }

    .blogContentWrapper {
        width: 100%;
    }

    .InnerBlogListBox {
        width: 100%;
        margin-top: 50px;
        position: static;
        height: auto
    }

    .bloginnerSection {
        font-size: 16px;
    }

    /* .bloginnerSection p {
        font-size: 16px;
        line-height: 1.7;
        color: #e3e3e3;
    } */

    .bloginnerSection h2 {
        font-size: 26px;
        margin-top: 35px;
        margin-bottom: 15px;
    }

    .bloginnerSection h3 {
        font-size: 22px;
        margin-top: 30px;
    }

    .bloginnerSection h4 {
        font-size: 20px;
    }

    .bloginnerSection h5,
    .bloginnerSection h6 {
        font-size: 18px;
    }

    .bloginnerSection ul li,
    .bloginnerSection ol li {
        font-size: 14px;
        color: #e3e3e3;
    }

    .bloginnerSection blockquote,
    .backqute {
        font-size: 18px;
        padding: 20px;
        margin: 25px 0;
    }

    .bloginnerSection img {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .bgfar {
        padding: 20px
    }

    .digitalMarheting .serviceSubBox {
        width: calc(100% / 1 - 0px);
        margin: 25px 0;
        text-align: center
    }

    .digitalMarheting .serviceNumberBox {
        display: block;
        margin-bottom: 40px;
        width: 70px;
        margin: 5px auto 25px
    }

    .brandServc li {
        width: calc(100% / 3 - 20px)
    }

    .contactDetailsBox li {
        width: calc(100% / 1 - 0px) !important;
        margin: 10px 0px !important
    }

    .BlogList #searchform input {
        height: 45px;
        outline: none
    }

    .BlogList #searchform #searchsubmit {
        background-color: var(--primary-color);
        padding: 0 16px;
        border: 0;
        color: #fff
    }

    .BlogList li {
        width: calc(100% / 1 - 40px);
        margin: 25px 20px
    }

    .contactDetailsBox {
        margin: 10px
    }

    .Leaders .card {
        width: calc(100% / 3 + 2px)
    }

    .teammembers li {
        width: calc(100% / 2 - 20px);
        height: 270px
    }

    .contactFormBg {
        padding-right: 0
    }

    .ConatctfeldRightBox {
        width: calc(100% - 0px);
        margin-left: 0;
        padding: 30px
    }

    .ContactDetalLeftBox {
        width: 100%;
        margin: 10px
    }

    .foooterbotmUl li {
        width: 50%
    }

    .foooterbotmUl {
        border-top: 1px solid #464b4e;
        padding-top: 20px
    }

    .serviceListBox ul li {
        width: calc(100% / 2 - 20px)
    }

    .footerproductUl li {
        width: calc(100% / 2 - 8px);
        margin: 0 8px 0 0
    }

    .footer-bottom .inner {
        flex-wrap: wrap
    }

    .foooterbotmUl,
    .sidNavsocialBox {
        width: 100%;
        margin-top: 10px
    }

    #site-content.innerSiteContent {
        margin-top: 40px
    }

    .innerBannerSection .animatn1,
    .innerBannerSection .animatn2,
    .innerBannerSection .animatn3 {
        display: none
    }

    .chatBtn span {
        display: none
    }


    .vedioClip {
        mask-size: 37% 95%;
        -webkit-mask-size: 37% 95%;
        mask-position: 5% 66%;
        -webkit-mask-position: 5% 66%
    }

    .main-footer {
        padding: 40px 0 20px
    }

    .talkBox .wtrefct {
        left: -100px
    }

    .rowreverse {
        flex-direction: column-reverse
    }

    .serviceLeftBox {
        width: calc(100% - 0px)
    }

    .imghr {
        left: 30px
    }

    .talkBox {
        padding: 25px 10px;
        padding-left: 145px
    }

    .serviceRightBox {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto
    }

    .serviceLeftBox .btnBox {
        text-align: left;
        margin-left: 90px
    }

    .talkcontactIcon img {
        height: 36px
    }

    .mainTilte {
        font-size: 34px
    }

    .fadeTitle {
        font-size: 30px;
        margin-left: 0;
        margin-top: -30px
    }

    .testimonial4_slide {
        padding: 20px 4%
    }

    .testimaonialbox {
        padding: 15px 10px
    }

    .bannerSection {
        height: auto;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 120px 15px 20px;
        box-sizing: border-box
    }



    .mainCaption {
        font-size: 44px;
        margin-bottom: 20px
    }

    .h1brandImg img {
        height: 38px
    }

    .deeper-morph {
        height: 52vh
    }

    .bannercaption {
        font-size: 14px;
        line-height: 24px
    }


    .clip-element,
    .vedioClipBox,
    .video-wrapper {
        display: none
    }

    .teammembers li:nth-child(1),
    .teammembers li:nth-child(2),
    .teammembers li:nth-child(5),
    .teammembers li:nth-child(6),
    .teammembers li:nth-child(9),
    .teammembers li:nth-child(10),
    .teammembers li:nth-child(13),
    .teammembers li:nth-child(14),
    .teammembers li:nth-child(17),
    .teammembers li:nth-child(18),
    .teammembers li:nth-child(21),
    .teammembers li:nth-child(22),
    .teammembers li:nth-child(25),
    .teammembers li:nth-child(26),
    .teammembers li:nth-child(29),
    .teammembers li:nth-child(30) {
        border-radius: 0 65px 0 30px;
        margin: 15px 10px 2px 10px;
        border: 1px solid var(--primary-color)
    }

    .teammembers li:nth-child(3),
    .teammembers li:nth-child(4),
    .teammembers li:nth-child(7),
    .teammembers li:nth-child(8),
    .teammembers li:nth-child(11),
    .teammembers li:nth-child(12),
    .teammembers li:nth-child(15),
    .teammembers li:nth-child(16),
    .teammembers li:nth-child(19),
    .teammembers li:nth-child(20),
    .teammembers li:nth-child(23),
    .teammembers li:nth-child(24),
    .teammembers li:nth-child(27),
    .teammembers li:nth-child(28),
    .teammembers li:nth-child(31),
    .teammembers li:nth-child(32) {
        border-radius: 30px 0 65px 0;
        border: 1px solid var(--secondary-color);
        margin: 2px 10px 15px 10px
    }

    .innerBannerSection {
        background-position: right;
        background-size: cover
    }

    #site-content.innerSiteContent {
        margin-top: 0
    }

    .digitalMarheting .serviceBox.webDesignservce .serviceSubBox {
        width: calc(100% / 2 - 30px);
        margin: 25px 15px
    }

    .mlmplans ul li {
        width: calc(100% / 1 - 0px);
        margin: 4px 0
    }

    .mlmplans ul {
        margin-left: 30px
    }

    .comments-area .comment-form {
        max-width: 100% !important
    }

    .LeftPost:nth-child(2),
    .LeftPost:nth-child(3) {
        display: none
    }

    .bFor {
        font-size: 9px
    }

    .blogSubHd {
        padding-left: 0
    }
}

@media (min-width: 576.1px) {
    .d-sm-none {
        display: none
    }

}

@media (max-width: 576px) {

     .aiChatBtn span
        {
            display: none;
        }
        .aiChatBtn {
            background: transparent;
            padding: 5px 7px;
        }
 .aiChatBtn svg {
           display: block;
        }
    .h1brandImg img {
        margin-top: 10px;
        height: 35px;
    }

    .academyBanner .mainCaption {
        font-size: 32px;
    }

    .sylebusSubTilte {
        font-size: 14px;
    }

    .academyTab-container {
        flex-direction: column;
    }

    .sylebusSubTilte img {
        width: auto;
        max-width: 90px;
    }

    .academyTab-menu {
        width: 100%;
        border-radius: 8px 8px 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .academyTab-item {
        flex: 1;
        text-align: center;
        padding: 9px;
        min-width: 100px;
        font-size: 14px;
        font-family: var(--primaryfont);
        margin-right: 3px;
    }

    .academyTab-content {
        padding: 15px 0;
    }

    .academySpeaclityUl {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        padding: 20px;
    }

    .BlogPosts {
        height: 200px !important
    }

    .sectionContainer.firstsection {
        padding-top: 60px
    }

    .innerBannerSection.blogBanner {
        margin-top: 0
    }

    .serviceCntntBox {
        margin-left: 0
    }

    .LeftPost>img {
        min-height: auto
    }

    .comments-area .comment-form {
        max-width: 100% !important
    }

    .abtUl li:nth-child(4) {
        margin-top: -150px
    }

    .ContactDetalLeftBox {
        border-radius: 8px 8px 0 0
    }

    .mlmpanbg {
        padding: 60px 15px 0 15px
    }

    /* .bloginnerSection p {
        line-height: 1.7;
        color: #e3e3e3;
        font-size: 16px;
    } */

    .font28 {
        font-size: 19px;
        line-height: 32px
    }

    p {
        line-height: 27px;
        font-size: 14px
    }

    #site-content.aboutSiteContent,
    #site-content.innerSiteContent,
    #site-content.innerSiteContent.blogsectnInner {
        padding-top: 0
    }

    .innerBannerSection.aboutBannerBg,
    .innerBannerSection {
        height: 390px;
        align-items: end
    }

    .brandServc li {
        width: calc(100% / 2 - 10px);
        margin: 5px
    }

    .brandBox .mainCaption {
        font-size: 37px
    }

    .Leaders .card {
        width: 320px
    }

    .teamLeaders li {
        width: 320px;
        margin: auto
    }

    .teammembers li {
        width: 320px;
        height: 340px;
        margin: auto
    }

    .teammembers li:nth-child(odd) {
        border-radius: 0 65px 0 30px;
        margin: 15px auto 2px;
        border: 1px solid var(--primary-color)
    }

    .teammembers li:nth-child(even) {
        border-radius: 30px 0 65px 0;
        margin: 2px auto 20px;
        border: 1px solid var(--secondary-color)
    }

    .AboutIntroImgBox {
        width: 360px
    }

    .AboutIntroBottomBox {
        height: 122px;
        font-size: 18px;
        line-height: 28px
    }

    .jobOpening>li {
        width: calc(100% / 1 - 30px)
    }

    .jobHeader li {
        width: calc(100% / 1 - 0px);
        max-width: calc(100% / 1 - 0px);
        margin: 0
    }

    .blogOverlay {
        padding: 5px 15px 5px
    }

    .blogtitle {
        font-size: 13px;
        max-height: 18px
    }

    .blogDate {
        margin-top: 5px;
        width: 46px;
        line-height: 19px;
        padding: 1px;
        font-size: 13px
    }

    .statusSubBox {
        width: calc(100% / 1 - 0px);
        margin: 0;
        justify-content: center
    }

    .footerproductUl li {
        width: calc(100% / 1 - 0px);
        margin: 0 0 0 0
    }

    .serviceListBox ul li {
        width: calc(100% / 1 - 0px);
        margin: 10px 0
    }

    .innerBannerSection {
        height: auto;
        padding-top: 115px
    }

    .cleints li {
        width: calc(100% / 1 - 30px);
        margin: 20px 15px
    }

    .mainTilte {
        font-size: 22px;
        letter-spacing: 1px
    }

    .smallcaption2 {
        font-size: 14px;
        line-height: 26px
    }

    .largecaption1 {
        font-size: 22px
    }

    .tetialyTitle {
        font-size: 36px;
        line-height: 42px
    }

    .MobileNone {
        display: none
    }

    .ulcomonStyle li {
        line-height: 27px;
        color: var(--para-color)
    }

    .main-footer h5 {
        line-height: 29px
    }

    .subtitle {
        font-size: 18px
    }

    .smallcaption1 {
        font-size: 23px;
    }

    .about-banner-header {
        font-size: 24px;
    }

    .statusContentBox {
        font-size: 16px
    }

    .serviceCntntBox p {
        font-size: 15px
    }

    .AcademycareerleftSubBox {
        width: 100%;

    }

    .AcademycareerrightTop,
    .AcademycareerrightBottom {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .AcademycareerrightTop_Left {
        margin-bottom: 0px;
    }
}

@media (max-width: 495px) {

    .mask1 {
        mask-size: 96%;
        -webkit-mask-size: 96%
    }

    .imghr {
        left: 10px
    }

    .talkBox {
        padding: 25px 10px;
        padding-left: 125px
    }

    .talkCntntBoxBox b {
        font-size: 14px
    }

    .talkcontact p span {
        display: block;
        font-size: 13px
    }

    .talkcontact span:last-child {
        border-left: 0 solid var(--offwhite);
        padding-left: 0;
        margin-left: 0
    }

    .blogauther {
        display: block
    }
}

.chatbtn a {
    color: #fff
}

/* search panel*/
.search-panels, .search-results-wrapper {
  --default-color: #a0cd4e;
  --color-text: #ffffff;
  --color-active: #a0cd4e;
  --color-active-input: #f5f5f5;
  --transition: 150ms cubic-bezier(0.4,0,0.2,1);
  --width-input: 300px;
  display: flex;
  justify-content: flex-end;
}

.search-panels .search-group, .search-results-wrapper .search-group {
  position: relative;
}

.search-panels .input, .search-results-wrapper .input {
  width: var(--width-input);
  border: solid 1.5px var(--default-color);
  border-radius: 80px;
  background: none;
  padding: 1rem;
  padding-right: 1.5rem;
  font-size: 1rem;
  color: var(--color-active-input);
  transition: border var(--transition);
}

.search-panels .enter-label, .search-results-wrapper .enter-label {
  position: absolute;
  left: 20px;
  color: var(--default-color);
  pointer-events: none;
  transform: translateY(1rem);
  transition: var(--transition);
}

.search-panels .enter-label, .search-results-wrapper .enter-label {
  color: #ffffff;
  pointer-events: none;
}

.search-panels .input:focus, .search-panels input:valid, .search-results-wrapper .input:focus, .search-results-wrapper input:valid {
  outline: none;
  border: 1.5px solid var(--color-active);
}

.search-panels .input:focus ~ .enter-label, .search-panels input:valid ~ .enter-label, .search-results-wrapper .input:focus ~ .enter-label, .search-results-wrapper input:valid ~ .enter-label {
  transform: translateY(-50%) scale(0.8);
  background-color: var(--color-active);
  border-radius: 20px;
  padding: .2em .6em;
  color: var(--color-text);
}

.search-panels .btn-box, .search-results-wrapper .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -1em;
  right: 80%;
  border-radius: 100%;
  transition: 300ms cubic-bezier(0.4,0,0.2,1);
  transition-delay: 100ms;
  opacity: 0;
}

.search-panels .input:focus ~ .btn-box, .search-panels input:valid ~ .btn-box, .search-results-wrapper .input:focus ~ .btn-box, .search-results-wrapper input:valid ~ .btn-box {
  right: 10%;
  opacity: 1;
  transition-delay: 0s;
  transition: var(--transition);
}

.search-panels .input:not(:focus) ~ .btn-box, .search-panels input:not(:valid) ~ .btn-box, .search-results-wrapper .input:not(:focus) ~ .btn-box, .search-results-wrapper input:not(:valid) ~ .btn-box {
  transition-property: right, opacity;
  transition-delay: 300ms;
}

.search-panels .input:focus ~ .btn-box:hover, .search-panels input:valid ~ .btn-box:hover, .search-results-wrapper .input:focus ~ .btn-box:hover, .search-results-wrapper input:valid ~ .btn-box:hover {
  transform: scale(1.2);
}

.search-panels .input:focus ~ .btn-box:hover:active, .search-panels input:valid ~ .btn-box:hover:active, .search-results-wrapper .input:focus ~ .btn-box:hover:active, .search-results-wrapper input:valid ~ .btn-box:hover:active {
  transform: scale(1);
}

.search-panels .btn-search, .search-results-wrapper .btn-search {
  position: relative;
  cursor: pointer;
  background-color: var(--color-active);
  width: 2em;
  height: 2em;
  top: 2.5px;
  border: none;
  border-radius: 100%;
  padding: 0;
  transition: var(--transition);
}

.search-panels .btn-search:active, .search-results-wrapper .btn-search:active {
  transform: scale(1);
}

.search-panels .btn-search svg, .search-results-wrapper .btn-search svg {
  position: absolute;
  top: 25%;
  left: 25%;
  fill: var(--color-text);
  width: 12px;
  height: 12px;
}

#svg-circle {
  fill: var(--color-text);
  transition: var(--transition);
}

.search-panels .input:focus ~ .btn-box:hover #svg-circle, .search-panels input:valid ~ .btn-box:hover #svg-circle, .search-results-wrapper .input:focus ~ .btn-box:hover #svg-circle, .search-results-wrapper input:valid ~ .btn-box:hover #svg-circle {
  fill: transparent;
}

.search-panels .btn-box-x, .search-results-wrapper .btn-box-x {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1em;
  right: 7%;
  opacity: 0;
  transform: rotate(-90deg) scale(.1);
  transition: var(--transition);
}

.search-panels .input:focus ~ .btn-box-x, .search-panels input:valid ~ .btn-box-x, .search-results-wrapper .input:focus ~ .btn-box-x, .search-results-wrapper input:valid ~ .btn-box-x {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.search-panels .btn-cleare, .search-results-wrapper .btn-cleare {
  position: relative;
  cursor: pointer;
  background-color: transparent;
  width: 2em;
  height: 2em;
  border: none;
  border-radius: 100%;
  padding: 0;
  transition: var(--transition);
}

.search-panels .btn-cleare svg, .search-results-wrapper .btn-cleare svg {
  width: 15px;
  height: 15px;
}

#cleare-line {
  fill: var(--default-color);
}

.search-panels .btn-box-x:hover #cleare-line, .search-results-wrapper .btn-box-x:hover #cleare-line {
  fill: var(--color-active);
}

/* Style native clear button (Chrome, Edge, Safari) */
.search-panels input[type="search"]::-webkit-search-cancel-button, .search-results-wrapper input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;

    width: 15px;
    height: 15px;
    cursor: pointer;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 12.5 32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
}


/* Home AI Service */

/* AI Enablement Cards v2 */
.serviceAI-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.serviceAI-v2__card {
    position: relative;
    background: var(--bodyOffcolor);
    border: none;
    border-radius: 16px;
    padding: 32px 24px 28px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.serviceAI-v2__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(72, 165, 47, 0.12);
}

/* Gradient top line */
.serviceAI-v2__line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.serviceAI-v2__card:hover .serviceAI-v2__line {
    opacity: 1;
}

/* Step number - stroke style like Why Choose section */
.serviceAI-v2__num {
    font-size: 54px;
    font-family: var(--titlefont);
    -webkit-text-stroke: 1px #4c4c4c;
    color: transparent;
    line-height: 100%;
    margin-bottom: 20px;
    position: relative;
    display: block;
    transition: 0.4s;
}
.serviceAI-v2__card:hover .serviceAI-v2__num {
    -webkit-text-stroke: 1px var(--primary-color);
}

.serviceAI-v2__card h4 {
    color: var(--white);
    font-size: 17px;
    font-family: var(--titlefont);
    line-height: 1.3;
    margin-bottom: 10px;
}

.serviceAI-v2__card p {
    color: var(--para-color);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .serviceAI-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .serviceAI-v2 {
        grid-template-columns: 1fr;
    }
    .serviceAI-v2__card {
        padding: 28px 20px 24px;
    }
}

.about-banner-header {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 500;
    font-family: var(--fontMedium);
    color: var(--white);
    line-height: 48px;
}