/*Common Section*/
body {

    transition: background-color .5s;
    background-color: #C0A1ED;
}

@font-face {
    font-family: 'CabinetGrotesk-Variable';
    src: url(../fonts/CabinetGrotesk-Variable.ttf);
}

html {
    scroll-behavior: smooth;
}

:root {
    --themeColor: #4B00FF;
    --secondaryColor: #ffb84c;
    --bgColor: #F5F8FD;
    --lessBgColor: #0E1F2F;
    --primaryTextColor: #464646;
    --secondaryTextColor: #CDCED0;
    --font-family: 'CabinetGrotesk-Variable';
    --font-weight-bold: 700;
    --font-weight-regular: 400;
    --line-height: 1.5;
    --color-white: white;
    --line-height-titles: 1.2;
    --grid-gap: 40px 60px;
    --box-shadow10: 1px 5px 10px 0px #DEECFF;
    --box-shadow20: 1px 5px 20px 0px #DEECFF;
    --box-shadow40: 0 .5rem 2rem rgba(0, 0, 0, .1);
    --box-shadow50: 0 .5rem 2rem rgba(0, 0, 0, .2);
    --Approved: #239B56;
    --New: #B03A2E;
    --InProgress: #F39C12;
    --OnHold: #FF5733;
    --Closed: #2ECC71;
    --Assigned: #0096CC;
    --ButtonBg: linear-gradient(to right, #cf1e1d, #bb125e, #863980, #4a497f, #2c4862);
    ;
}

h1,
h2,
h3 {
    color: var(--primary-text-color);
    font-family: var(--font-family);
}

h4,
h5,
h6,
p {
    color: var(--secondary-text-color);
    font-family: var(--font-family);
}

/*Common Section*/

/*NAVBAR*/
.navbar .container-fluid {
    padding: 0% 0% 0% 0%;
    margin: 0px;
}

.navbar {
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 9999;
    border: 0;
    position: fixed;
    width: 63%;
    border-radius: 45px;
    overflow: hidden;
    box-shadow: var(--box-shadow40);
    margin: 15px 0px 0px 20px;
    padding: 7px 35px 7px 35px;
    backdrop-filter: blur(10px);
    font-family: var(--font-family);
    line-height: 1.42857143 !important;
    letter-spacing: 1.2px;
}

.navbar .container-fluid {
    padding: 0% 10% 0% 7.5%;
}

.nav {
    float: right;
}

.navbar-nav li a {
    color: white;
    font-weight: 400;
    font-size: 1.2em;
    margin-top: 10px;
    cursor: pointer;
    transition: 0.5s ease-in;
}

.navbar-nav li a:hover {
    color: white;
    transition: 0.5s ease-in;
    transition: 0.3s ease-in;
    background-color: transparent;
}

.brandImage img {
    height: 65px;
    padding: 0px;
    margin: 3px 0px 5px 0px;
}

/*NAVBAR*/

/*Common Styles*/


.sectionHeader .sectionSubHead p {
    text-align: left;
    font-size: 1.4em;
    padding-top: 10px;
    color: var(--secondaryTextColor);
}

.subHeadingComp {
    background-color: var(--secondaryColor);
    padding: 5px;
    border-radius: 40px;
}

#particles-js {
    height: 100%;
    position: fixed;
    opacity: 0.2;
    width: 100%;
}

/*Common Styles*/

/*================= INDEX PAGE STARTS ======================*/

/* ------------- LandingSection STARTS ----------------*/



#LandingSection .mySlides {
    overflow: hidden;
}

#LandingSection .mySlides img {
    vertical-align: middle;
    border-radius: 15px;
    animation: zoom-out 6s ease-out infinite;
}



   .containerWrapper{
              position:relative;z-index:5;
              display:flex;
              flex-direction:column;
              gap:28px;
              max-width:100%;
              width:100%;
              backdrop-filter: blur(10px);
              -webkit-backdrop-filter: blur(10px);
              background: white;
              border:1px solid var(--border);
              border-radius:20px;
              padding: 25px;
              box-shadow:0 20px 50px rgba(0,0,0,0.5);
              animation: floatBox 8s ease-in-out infinite alternate;
              }

/* ------------- LandingSection ENDS ----------------*/

/* ------------- inAmazingServices STARTS ----------------*/





.servicesComp .well h2 {
    color: white;
    line-height: 40px;
    text-align: left;
    font-weight: 600;
}

.serviceLowerCard .servicesComp .well h2 {
    color: white;
    line-height: 40px;
    text-align: left;
    font-weight: 600;
}

.servicesComp .well h4 {
    font-size: 1.3em;
    text-align: left;
    color: var(--secondaryTextColor);
    line-height: 30px;
}

.servicesComp .well .serviceCounter h5 {
    font-size: 1.5em;
}

.servicesComp .well img {
    transition: 0.2s ease-in;
    color: white;
}


.servicesComp .well .serviceCounter {
    background-color: #21364A;
    height: 105px;
    aspect-ratio: 1;
    color: white;
    padding: 15px;
    border-radius: 50px 30px 0px 50px;
    right: -105px;
    top: 20px;
    transition: 0.3s ease-in;
    position: absolute;
    opacity: 0;
}

.servicesComp .well:hover .serviceCounter {
    right: 10px;
    transition: 0.3s ease-in;
    opacity: 1;
}



#inAmazingServices .servicesHead h3 {
    text-align: center;
    background-color: #0E1F2F;
    position: relative;
    color: white;
    margin-top: 45px;
    padding: 15px;
    border-radius: 15px;
}


/* ------------- inAmazingServices ENDS ----------------*/

/* ------------- inPerformCount STARTS ----------------*/
#inPerformCount {
    background-color: var(--themeColor);
}

.sliderTopImg {
    position: absolute;
    width: 80%;
}

#inPerformCount .counterComp {
    background-color: white;
    padding: 15px 20px;
    margin-top: 25px;
    border-left: 0px solid var(--secondaryColor);
    border-radius: 15px;
}


.conterTopImgOne {

    position: absolute;
    overflow: hidden;
    height: 350px;
    width: 350px;
    z-index: 0;
    opacity: 0.4;
    animation: conterTopImgOne 10s infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes conterTopImgOne {
    0% {
        left: -220px;
        top: -120px;
    }

    50% {
        left: -250px;
        top: -150px;
    }

    100% {
        left: -240px;
        top: -110px;
    }
}

.conterTopImgTwo {

    position: absolute;
    overflow: hidden;
    height: 350px;
    width: 350px;
    z-index: 0;
    opacity: 0.2;
    animation: conterTopImgTwo 12s infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes conterTopImgTwo {
    0% {
        left: -200px;
        top: -200px;
    }

    25% {
        left: -100px;
        top: -220px;
    }

    50% {
        left: -200px;
        top: -150px;
    }

    75% {
        left: -150px;
        top: -270px;
    }

    100% {
        left: -100px;
        top: -200px;
    }
}

.conterTopImgThree {

    position: absolute;
    height: 350px;
    width: 350px;
    opacity: 0.3;
    z-index: 0;
    animation: conterTopImgThree 15s infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes conterTopImgThree {
    0% {
        left: 200px;
        top: -200px;
    }

    25% {
        left: 100px;
        top: -220px;
    }

    50% {
        left: 200px;
        top: -150px;
    }

    75% {
        left: 250px;
        top: -270px;
    }

    100% {
        left: 100px;
        top: -200px;
    }
}


#inPerformCount p {
    text-align: center;
    color: white;
    margin-top: 0px;
    font-size: 1.5em;
    padding-bottom: 25px;
}

#inPerformCount span {
    text-align: center;
    color: var(--secondaryColor);
}


.counterComp h2 {
    font-weight: 600;
    color: var(--themeColor);
    text-align: center;
    transition: all .6s ease-out;
}

.counterComp h4 {
    color: #535558;
    text-align: center;
    font-size: 1.3em;
    line-height: 25px;
    transition: all .6s ease-out;
}


.counterComp {
    display: block;
    background: linear-gradient(to right,
        var(--secondaryColor) 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.counterComp:hover {
    background-position: left bottom;
}

.counterComp:hover h2 {
    color: white;
}

.counterComp:hover h4 {
    color: white;
}

/* ------------- inPerformCount ENDS ----------------*/

/* ------------- inCommitment STARTS ----------------*/


.preimiumSerComp .well {
    padding: 0px;
    overflow: hidden;
    border: 1px solid var(--themeColor);
    background-color: #0E1F2F;
    border-radius: 15px;
    box-shadow: var(--box-shadow40);
}

.serImageComp {}

.overlayCommitment {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96.2%;
    width: 94%;
    opacity: 0;
    margin-left: 15px;
    margin-top: 0px;
    border-radius: 10px;
    transition: .5s ease;
    background-image: linear-gradient(to right top, #051937, #00246b, #002b9f, #0028d2, #4b00ff);
}

.preimiumSerComp .well:hover .overlayCommitment {
    opacity: 1;
}

.textOverlay {
    padding: 0% 3% 0% 3%;
}

.textOverlay h2 {
    color: white;
    font-weight: bold;
    line-height: 45px;
    font-size: 2.5em;
    text-align: left;
}

.textOverlay h6 {
    color: var(--secondaryTextColor);
    font-size: 1.4em;
    line-height: 30px;
    text-align: left;
}

.preimiumSerComp {
    padding-top: 3%;
}

.flip-box {
    width: 70px;
    height: 80px;
    overflow: hidden;
    perspective: 1000px;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.3s;
    transform-style: preserve-3d;
}

.preimiumSerComp .well:hover .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
    color: black;
}

.flip-box-back {
    color: white;
    transform: rotateY(180deg);
}



.dividerComp {
    background-image: linear-gradient(to right top, #051937, #00246b, #002b9f, #0028d2, #4b00ff);
    height: 10px;
    width: 100%;
}



.serDetails {
    padding: 20px;
}

.serDetails h2 {
    font-weight: 600;
    margin: 0px;
    text-align: center;
    color: white;
    padding-top: 10px;
}

.serDetails h6 {
    font-size: 1.3em;
    line-height: 30px;
    margin: 0px;
    text-align: center;
    color: var(--secondaryTextColor);
    padding: 15px 0px;
}

.serDetails .readMoreServ {
    margin: 10px 0px 0px 0px;
    background-color: var(--bgColor);
    padding: 10px 30px;
    color: var(--themeColor);
    border-radius: 10px;
    transition: 0.4s ease-in;
    border: 1px solid rgba(29, 40, 100, 0.3);
}

.preimiumSerComp .well:hover .serDetails .readMoreServ {
    background-color: var(--themeColor);
    padding: 10px 30px;
    color: white;
    transition: 0.2s ease-in;
    border-radius: 40px;
    border: 1px solid rgba(29, 40, 100, 0.3);
}

/* ------------- inCommitment ENDS ----------------*/


/* ------------- inProPeers STARTS ----------------*/



#inProPeers .well {
    background-image: url(../image/boxGrid.png);
    background-size: cover;
    background-color: var(--lessBgColor);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    padding: 15px 25px;
    border: 1px solid var(--themeColor);
}

.proPeersImageComp .topImage img {
    border-radius: 15px;
    margin-top: -95px;
    margin-left: -20px;
    transition: 0.3s ease-in;
    box-shadow: 0px 15px 20px -10px var(--themeColor);
}

#inProPeers .well:hover .topImage img {
    transform: translate(-20px, -30px);
    transition: 0.5s ease-in;
}

.proPeersImageComp .bottomImage img {
    border-radius: 15px;
    margin-top: -25px;
    margin-right: 25px;
    transition: 0.3s ease-in;
    box-shadow: 0px 15px 20px -10px var(--themeColor);
}

#inProPeers .well:hover .bottomImage img {
    transform: translate(20px, 30px);
    transition: 0.3s ease-in;
}

.sectionTeamHead {
    padding: 7% 5% 0% 5%;
}

.sectionTeamHead p {
    text-align: center;
    line-height: 25px;
    font-size: 1.5em;
    color: var(--secondaryTextColor);
    padding-bottom: 15px;
}

#inProPeers .BtnServices {
    text-align: center;
    background-color: white;
    border-radius: 45px;
    color: var(--themeColor);
    padding: 15px;
    width: 100%;
    font-size: 16px;
    margin-top: 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
}

@property --k {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

svg[height="0"] {
    position: absolute;
}



/* ------------- inProPeers ENDS ----------------*/

/* ------------- inTestimonials STARTS ----------------*/
#inTestimonials .container-fluid {
    padding: 5% 9% 5% 12%;
    background-image: url(../image/bgBanner02.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#inTestimonials .sectionHeader h5 {
    color: white;
}

#inTestimonials .sectionHeader h1 {
    color: var(--themeColor);
}

#inTestimonials .sectionHeader p {
    color: white;
}

.testiCardOuter .well {
    border-radius: 15px;
    padding: 0px;
    background-color: white;
    padding: 25px;
    border: none;
    margin-top: 25px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--box-shadow40);
    transition: 0.3s;
}

.innerCircle {
    height: 150px;
    width: 150px;
    z-index: 0;
    background-color: var(--secondaryColor);
    border-radius: 40px;
    position: relative;
    opacity: 0.2;
    left: -100px;
    top: -100px;
    transition: 0.3s;

}

.testiCardOuter .well:hover .innerCircle {
    transform: rotate(45deg);
    transition: 0.5s;
    opacity: 1;
}

.testiCardOuter .well:hover {
    background-image: url(../image/boxGrid.png);
    background-size: cover;
    background-position: center;
    transition: 0.3s;
}

.testiInnerCard {
    display: flex;
    margin-top: -100px;
}

.testiInnerCard .imageCard {
    height: 70px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.testiHeadingCard h2 {
    margin: 0px;
    padding: 15px 0px 0px 15px;
    font-size: 1.4em;
    font-weight: 700;
}

.testiHeadingCard h5 {
    margin: 0px;
    padding: 5px 0px 0px 15px;
    font-size: 1em;
    font-weight: 600;
    color: var(--secondaryColor);
    font-style: italic;
}

.testiFooterCard h6 {
    font-size: 1.1em;
    line-height: 22px;
    padding: 25px 0px 25px 0px;
    color: var(--secondaryTextColor);
    overflow: hidden;
}

.ratingComp h5 {
    font-weight: 600;
}

.ratingComp span {
    color: var(--InProgress);
}

.swiper-slide {
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.autoplay-progress {
    position: absolute;
    right: 20px;
    bottom: 35px;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--themeColor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--secondaryColor);
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--secondaryColor);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

/* ------------- inTestimonials ENDS ----------------*/

/* ------------- inProjects STARTS ----------------*/




#inProjects .sectionHeader .sectionSubHead h5 {
    text-align: center;
}

#inProjects .sectionHeader .sectionSubHead h1 {
    text-align: center;
}

#inProjects .mySwiper {
    width: 100%;
    height: 100%;
    padding: 5px 0px 20px 0px;

}

.swiper-slide {
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.autoplay-progress {
    position: absolute;
    right: 20px;
    bottom: 35px;
    z-index: 10;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #cf1e1d, #bb125e, #863980, #4a497f, #2c4862);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: white;
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

/* ------------- inProjects ENDS ----------------*/

/* --------------- inClients STARTS -------------------------- */

/* --------------- inClients ENDS -------------------------- */

/* ------------- inAboutUsBanner STARTS ----------------*/
.whatWeDoComp .boxWhatWeDo h1 {
    text-align: center;
    color: white;
    font-size: 2.7em;
    line-height: 45px;
    font-weight: bold;
}

.whatWeDoComp .boxWhatWeDo:hover h1 {
    display: none;
}

.whatWeDoComp .boxWhatWeDo .iconWhatWeDo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: red;
    transition: 0.5s;
    z-index: 1;
}

.whatWeDoComp .boxWhatWeDo:hover .iconWhatWeDo {
    top: 20px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.whatWeDoComp .boxWhatWeDo .iconWhatWeDo .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    transition: 0.5s;
    color: #fff;
}

.whatWeDoComp .boxWhatWeDo:hover .iconWhatWeDo .fa {
    font-size: 40px;
}

.whatWeDoComp .boxWhatWeDo .contentWhatWeDo {
    position: absolute;
    top: 100%;
    height: calc(100% - 100px);
    text-align: center;
    padding: 20px;
    boxWhatWeDo-sizing: border-boxWhatWeDo;
    transition: 0.5s;
    opacity: 0;
}

.whatWeDoComp .boxWhatWeDo:hover .contentWhatWeDo {
    top: 100px;
    opacity: 1;
}

.whatWeDoComp .boxWhatWeDo .contentWhatWeDo h2 {
    padding: 0;
    color: white;
    margin: 0px;
    font-weight: bold;
    font-size: 1.8em;
    line-height: 30px;
}

.whatWeDoComp .boxWhatWeDo .contentWhatWeDo h4 {
    padding: 0;
    color: var(--secondaryTextColor);
    font-size: 1.4em;
    line-height: 30px;
}

.whatWeDoComp .boxWhatWeDo:nth-child(1) .iconWhatWeDo {
    background: var(--lessBgColor);
}

.whatWeDoComp .boxWhatWeDo:nth-child(1) {
    background-image: var(--ButtonBg);
    border-radius: 15px;
}

.aboutUsHeader h3 {
    color: white;
    text-align: center;
    font-weight: bold;
}

.whatWeDoComp {}

.whatWeDoComp h3 {
    padding: 5px 0px 25px 0px;
    color: white;
    text-align: center;
    font-weight: bold;
}

.whatWeDoComp .well {
    padding: 15px;
    border: 1px solid var(--lessBgColor);
    background-color: var(--lessBgColor);
    border-radius: 15px;
}

.whatWeDoComp .well h4 {
    color: var(--secondaryTextColor);
    font-size: 1.4em;
    line-height: 35px;
    text-align: center;
}

#inAboutUsBanner .aboutUsHeader img {
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

.aboutUsHeader .well .BtnServices {
    text-align: center;
    background-color: var(--secondaryColor);
    border-radius: 10px;
    color: white;
    padding: 15px 15px;
    width: 100%;
    margin-top: 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
}

.aboutUsHeader .well {
    text-align: center;
    border-radius: 15px;
    border: 0px solid white;
    background-color: transparent;
    box-shadow: 0px 40px 45px -15px rgba(0, 0, 0, .4);
    transition: 0.3s ease-in;
}


.aboutUsHeader .well h2 {
    transition: 1s ease-in;
    font-weight: bold;
    /*background: linear-gradient(to right, #2c4862, #4a497f, #863980, #bb125e, #cf1e1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    color: white;
    letter-spacing: 2px;
}


.aboutUsHeader .well h4 {
    color: var(--secondaryTextColor);
    font-size: 1.8em;
    line-height: 35px;

}

/* ------------- inAboutUsBanner ENDS ----------------*/

/* ------------- inFooterComp STARTS ----------------*/
#footerCompanySlider h2 {
    color: white;
    padding-left: 15px;
    padding-top: 5px;
}

.footerNavComp .container-fluid { 
    background-color: var(--themeColor);
    background-image: url(../image/bgFooter.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}





.footerHead h4 {
    font-size: 1em;
    line-height: 22px;
    color: var(--secondaryTextColor);
    font-weight: 500;
    transition: 0.4s ease-in;
}

.footerHead span {
    float: right;
    color: var(--secondaryColor);
}

.footerHead a {
    text-decoration: none;
    color: white;
}

.footerHead h4:hover {
    text-decoration: none;
    color: var(--secondaryColor);
    font-weight: bold;
    transition: 0.4s ease-in;
    text-decoration: underline;
}

.copyrightWidget {
    padding-top: 30px;
}
 
.copyrightWidget a {
    color: white;
    text-decoration: underline;
}

    .copyrightWidget h6 {
        margin: 0px;
        color: white;
        font-size: 10px;
        padding-top: 25px;
        padding-left: 0px;
        text-align: left;
    }

.mainContainer {
    position: relative;
    display: flex;
    padding-top: 00px;
    margin-left: 00px;
}

.mainContainer span {
    color: var(--secondaryColor);
    font-weight: bold;
    opacity: 0;
    text-align: left;
    animation-iteration-count: 2;
    animation: drop 0.4s linear forwards;
}

.mainContainer span:nth-child(2) {
    animation-delay: 0.2s;
}

.mainContainer span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes drop {
    0% {
        transform: translateY(-200px) scaleY(0.9);
    }

    5% {
        opacity: 0.7;
    }

    50% {
        transform: translateY(0px) scaleY(1);
        opacity: 1;
    }

    65% {
        transform: translateY(-17px) scaleY(0.9);
    }

    75% {
        transform: translateY(-22px) scaleY(0.9);
    }

    100% {
        transform: translateY(0px) scaleY(1);
        opacity: 1;
    }
}

.footerNavComp .BtnServices {
    text-align: center;
    background-color: var(--secondaryColor);
    border-radius: 10px;
    color: white;
    letter-spacing: 1px;
    margin-top: 25px;
    width: 100%;
    text-transform: uppercase;
    border: none;
}

.footerNavComp .ButtonDark {
    text-align: center;
    background-image: transparent;
    border-radius: 10px;
    color: var(--themeColor);
    letter-spacing: 1px;
    margin-top: 25px;
    width: 100%;
    text-transform: uppercase;
    border: 1px solid var(--secondaryColor);
}

.slideshowFooter-container h2 {
    color: white;
    padding-left: 15px;
    font-weight: bold;
}

.slideshowFooter-container h2 span {
    color: var(--secondaryColor);
    font-weight: bold;
    font-size: 2.5em;
}

.contToTheTop {
    position: fixed;
}

.arrow {
    stroke-width: 3;
    transform: rotate(90deg) scale(0.5);
}

.progressBar {
    margin: 1rem auto;
    width: 40px;
    height: 40px;
    z-index: 9999;
    color: white;
    background-color: var(--themeColor);
    border-radius: 50%;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.progressBar svg {
    position: absolute;
    top: 0;
    left: 0;
}

.progress-bar-background {
    fill: none;
    stroke: var(--themeColor);
    stroke-width: 10;
}

.progress-bar-fill {
    fill: none;
    stroke: var(--bgColor);
    stroke-width: 10;
    transition: stroke-dasharray 0.3s ease;
}

/* ------------- inFooterComp ENDS ----------------*/

/*================= INDEX PAGE ENDS ======================*/

/* COMMON FOR OTHER PAGES STARTS */





#Wrapper .container-fluid {
    padding: 0%;
    margin: 0%;
}

@keyframes landingBodyH1 {
    0% {
        margin-left: -20px;
    }

    100% {
        margin-left: 0;
    }
}

#Wrapper .slideshow-container .text h1 {
    color: white;
    font-weight: bold;
}

#Wrapper .slideshow-container .text h4 {
    color: white;
}

#Wrapper .slideshow-container .BtnServices {
    text-align: center;
    background-color: var(--secondaryColor);
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    letter-spacing: 1px;
    margin-top: 25px;
    text-transform: uppercase;
    border: none;
}

#Wrapper .mySlides img {
    vertical-align: middle;
    border-radius: 15px;
    animation: zoom-out 6s ease-out infinite;
}

#Wrapper .slideshow-container {
    position: relative;
    margin: auto;
}

@keyframes zoom-out {
    0% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1.1, 1.1);
    }
}

/* Caption text */
#Wrapper .text {
    border-radius: 0px 0px 25px 25px;
}

/* The dots/bullets/indicators */
#Wrapper .dot {
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

#Wrapper .active {
    background-color: white;
}

/* Fading animation */
#Wrapper .fade {
    animation-name: fade;
    animation-duration: 6s;
}

@keyframes fade {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 0.3;
    }
}

/* COMMON FOR OTHER PAGES ENDS */

/*ABOUT US*/
.aboutUsComp {
    text-align: left;
}

.aboutUsComp h3 {
    color: white;
    font-weight: bold;
}

.aboutUsComp h4 {
    font-size: 1.4em;
    line-height: 35px;
    color: var(--secondaryTextColor);
}

#inAboutUs {
    padding: 6% 0% 4% 0%;
}

.ourMisson {
    padding: 0% 0%;
}

.ourMisson h3 {
    font-size: 2em;
    color: white;
    font-weight: bold;
}

.ourMisson h4 {
    font-size: 1.5em;
    color: var(--secondaryTextColor);
    line-height: 35px;
}

.aboutOurClient {
    padding: 7% 0%;
}

.aboutOurClient img:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in;
}

.globalPresence .slideshowAbout-container h2 {
    color: white;
    font-weight: bold;
}

.globalPresence .slideshowAbout-container h2 span {
    color: var(--secondaryColor);
    font-weight: bold;
    font-size: 2.5em;
}

.mainContainerAbout {
    position: relative;
    display: flex;
    padding-top: 00px;
    margin-left: 00px;
}

.mainContainerAbout span {
    color: var(--secondaryColor);
    font-weight: bold;
    opacity: 0;
    font-size: 4em;
    text-align: left;
    animation-iteration-count: 2;
    animation: dropAbout 0.4s linear forwards;
}

.mainContainerAbout span:nth-child(2) {
    animation-delay: 0.2s;
}

.mainContainerAbout span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dropAbout {
    0% {
        transform: translateX(-200px) scaleX(0.9);
    }

    5% {
        opacity: 0.7;
    }

    50% {
        transform: translateX(0px) scaleX(1);
        opacity: 1;
    }

    65% {
        transform: translateX(-17px) scaleX(0.9);
    }

    75% {
        transform: translateX(-22px) scaleX(0.9);
    }

    100% {
        transform: translateX(0px) scaleX(1);
        opacity: 1;
    }
}



.inAboutUs .box {
    width: 250px;
    height: 250px;
    padding: 25px;
    z-index: 1;
    background: transparent;
    overflow: hidden;
    border: 1px solid rgba(207, 30, 29, .2);
    border-radius: 5px;
    transition: .5s;
}

.inAboutUs .box h1 {
    margin: 0;
    padding: 0;
    color: white;
    font-size: 1.7em;
    transition: .5s;
    font-weight: bold;
}

.inAboutUs .box p {
    padding-top: 10px;
    line-height: 30px;
    transition: .5s;
    font-size: 1.4em;
    color: var(--secondaryTextColor);
}

.inAboutUs .box:before {
    content: '';
    position: absolute;
    top: 0%;
    right: 0%;
    width: 0;
    height: 0;
    padding: 15px;
    background: var(--ButtonBg);
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.inAboutUs .box:hover:before {
    height: 100%;
    width: 100%;
}

.inAboutUs .box:hover h1,
.inAboutUs .box:hover p {
    color: #fff;
}

.inAboutUs .box:hover {
    transition-delay: .5s;
    border: 5px solid #fff;
    box-shadow: 0 20px 15px rgba(0, 0, 0, .4);
}

.globalPresence {
    padding: 5% 0%;
}

.globalPresence h3 {
    color: white;
    font-weight: bold;
}

.globalPresence h4 {
    color: var(--secondaryTextColor);
}

.ourExpertise {
    padding: 2% 0%;
}

.ourExpertise h3 {
    color: white;
    padding-bottom: 15px;
    text-align: center;
    font-weight: bold;
}

.ourExpertise .card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 15px;
    margin-bottom: 40px;
    background-color: var(--lessBgColor);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.ourExpertise .card .post-image img {
    transition: .5s;
    border-radius: 10px;
}

.ourExpertise .card:hover .post-image img {
    transform: scale(1.2) translateY(-50px);
    rotate: -5deg;
}

.ourExpertise .card .news-content {
    position: absolute;
    bottom: -58px;
    padding: 0px;
    width: 100%;
    background: var(--lessBgColor);
    transition: .5s;
}

.ourExpertise .card .news-content h2 {
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 1.8em;
    margin: 0px;
    padding: 10px 0px 15px 0px;
}

.ourExpertise .card .news-content p {

    color: var(--secondaryTextColor);
    font-size: 1.3em;
    margin: 0px;
    padding: 12px 15px;
    text-align: center;
}

.ourExpertise .card:hover .news-content {
    bottom: 0;
}

.ourExpertise .card .news-content .post-meta a {
    text-decoration: none;
    padding-right: 10px;
    color: black;
    font-weight: bold;
    transition: .5s;
}

.ourExpertise .card .news-content .post-meta a:hover {
    color: #df084a;
}

.ourExpertise .card:hover .news-content p {
    opacity: 1;
}


.DiscoverOurWork .well {
    padding: 25px;
    border-radius: 15px;
    background-color: var(--lessBgColor);
    border: 1px solid var(--lessBgColor);
    box-shadow: 0 20px 15px rgba(0, 0, 0, .4);
    transition: 0.3s ease-in;
}

.DiscoverOurWork .well h3 {
    font-size: 3em;
    padding-bottom: 15px;
    color: white;
    margin: 0px;
    text-align: left;
    font-weight: bold;
    line-height: 55px;
}

.DiscoverOurWork .well h4 {
    font-size: 1.4em;
    color: white;
    text-align: left;
    line-height: 30px;
}


.DiscoverOurWork .well .BtnServices {
    text-align: center;
    background-image: white;
    padding: 15px 25px;
    border-radius: 10px;
    color: var(--themeColor);
    letter-spacing: 0px;
    margin-top: 25px;
    width: 100%;
    text-transform: uppercase;
    transition: 0.5s ease-in;
    border: none;
}

.DiscoverOurWork .well .BtnDark {
    text-align: center;
    background-color: var(--secondaryColor);
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    letter-spacing: 0px;
    margin-top: 25px;
    width: 100%;
    text-transform: uppercase;
    transition: 0.5s ease-in;
    border: none;
}

/*ABOUT US*/

/* OUR SERVICES */
.trustedLeaders {
    text-align: center;
}

.trustedLeaders h3 {
    color: white;
    font-weight: bold;
}

.trustedLeaders h4 {
    color: var(--secondaryTextColor);
}

.MotioCapture {
    text-align: left;
}

.motionCaptureRight {
    padding: 0% 0% 5% 0%;
}

.MotioCapture .motionCaptureRight h3 {
    font-size: 4em;
    color: white;
    text-align: center;
    font-weight: bold;
    background: linear-gradient(to right, #2c4862, #4a497f, #863980, #bb125e, #cf1e1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: white;
}

.MotioCapture .motionCaptureRight h4 {
    font-size: 1.5em;
    color: var(--secondaryTextColor);
    text-align: center;
    line-height: 35px;
}

.MotioCapture .motionCaptureLeft h3 {
    font-size: 4em;
    color: white;
    font-weight: bold;
    background: linear-gradient(to right, #2c4862, #4a497f, #863980, #bb125e, #cf1e1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.MotioCapture .motionCaptureLeft h4 {
    font-size: 1.5em;
    color: var(--secondaryTextColor);
    line-height: 35px;
}

.MotioCapture .applicationOfMotionCapture h3 {
    color: white;
    font-weight: bold;
}

.MotioCapture .applicationOfMotionCapture h4 {
    color: var(--secondaryTextColor);
}

.applicationOfMotionCapture .applicationTypeMotion {
    background-color: var(--lessBgColor);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 15px;
    transition: 0.3s ease-in;
}

.applicationOfMotionCapture .applicationTypeMotion:hover {
    background-image: var(--ButtonBg);
    transition: 0.3s ease-in;
}

.applicationTypeMotion img {
    height: 80px;
    aspect-ratio: 1;
    margin-left: 45px;
}

.applicationTypeMotion h5 {
    font-size: 1.3em;
    line-height: 25px;
    color: var(--secondaryTextColor);
    text-align: center;
}

.servicesType {
    padding: 0% 0% 6% 0%;
}

.servicesType .serviceTypeHead h2 {
    font-size: 4em;
    color: white;
    text-align: center;
    background: linear-gradient(to right, #2c4862, #4a497f, #863980, #bb125e, #cf1e1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: white;
    font-weight: bold;
}

.servicesType .serviceTypeHead h5 {
    font-size: 1.5em;
    color: var(--secondaryTextColor);
    text-align: center;
    line-height: 35px;
}

.servicesType .serviceTypeHead h3 {
    font-size: 1.7em;
    color: white;
    text-align: left;
    font-weight: bold;
    line-height: 35px;
}

.servicesType .serviceTypeHead h4 {
    font-size: 1.3em;
    color: var(--secondaryTextColor);
    text-align: left;
    line-height: 30px;
}

.GameplayAnimation {
    padding: 4% 0%;
}

.GameplayAnimation .GameplayAnimationHead h2 {
    font-size: 4em;
    color: white;
    text-align: center;
    background: linear-gradient(to right, #2c4862, #4a497f, #863980, #bb125e, #cf1e1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: white;
    font-weight: bold;
}

.GameplayAnimation .GameplayAnimationHead h5 {
    font-size: 1.5em;
    color: var(--secondaryTextColor);
    text-align: center;
    line-height: 35px;
}

.GameplayAnimation .GameplayAnimationHead h3 {
    font-size: 1.7em;
    color: white;
    text-align: left;
    font-weight: bold;
    line-height: 35px;
}

.GameplayAnimation .GameplayAnimationHead h4 {
    font-size: 1.2em;
    color: var(--secondaryTextColor);
    text-align: left;
    line-height: 30px;
}



.letsTalk .well {
    padding: 25px;
    border-radius: 15px;
    background-color: var(--lessBgColor);
    border: 1px solid var(--lessBgColor);
    box-shadow: 0 20px 15px rgba(0, 0, 0, .4);
    transition: 0.3s ease-in;
}


.letsTalk .well h3 {
    font-size: 3em;
    padding-bottom: 15px;
    color: white;
    text-align: center;
    font-weight: bold;
    line-height: 40px;
}

.letsTalk .well h4 {
    font-size: 1.4em;
    color: var(--secondaryTextColor);
    text-align: center;
    line-height: 30px;
}



.letsTalk .well .BtnServices {
    text-align: center;
    background-color: var(--secondaryColor);
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    letter-spacing: 1px;
    margin-top: 25px;
    width: 100%;
    text-transform: uppercase;
    transition: 0.5s ease-in;
    border: none;
}

.OurClientsInclude .card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 15px;
    margin-bottom: 40px;
    background-color: var(--lessBgColor);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.OurClientsInclude .card .post-image img {
    transition: .5s;
}

.OurClientsInclude .card:hover .post-image img {
    transform: scale(1.2) translateY(-50px);
}

.OurClientsInclude .card .news-content {
    position: absolute;
    bottom: -60px;
    padding: 0px;
    width: 100%;
    background: var(--lessBgColor);
    transition: .5s;
}

.OurClientsInclude .card .news-content h2 {
    color: white;
    margin: 0px;
    font-size: 1.5em;
    padding: 15px 0px 15px 0px;
}

.OurClientsInclude .card .news-content p {

    color: var(--secondaryTextColor);
    font-size: 1.3em;
    margin: 0px;
    padding: 5px 15px;
}

.OurClientsInclude .card:hover .news-content {
    bottom: 0;
}

.OurClientsInclude .card .news-content .post-meta a {
    text-decoration: none;
    padding-right: 10px;
    color: black;
    font-weight: bold;
    transition: .5s;
}

.OurClientsInclude .card .news-content .post-meta a:hover {
    color: #df084a;
}

.OurClientsInclude .card:hover .news-content p {
    opacity: 1;
}

.trustedLeaders ul {
    position: relative;
    display: flex;
    margin: 15% 0%;
    justify-content: center;
    padding: 0;
    width: 800px;
    height: 400px;
}

.trustedLeaders ul li {
    list-style: none;
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 15px;
    background: #000;
    transform: rotate(45deg);
    transition: .5s;
    margin: -27px;
    overflow: hidden;
    opacity: .5;
}

.trustedLeaders ul li:hover {
    opacity: 1;
}

.trustedLeaders ul li.item1 {
    top: 0;
    left: 0;
}

.trustedLeaders ul li.item2 {
    bottom: 0;
    left: 25%;
}

.trustedLeaders ul li.item3 {
    top: 0;
    left: 50%;
}

.trustedLeaders ul li.item4 {
    bottom: 0;
    left: 75%;
}

.trustedLeaders ul li.item5 {
    top: 0;
    left: 100%;
}

.trustedLeaders ul li .bg {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg) scale(1.42);
}

.trustedLeaders ul li.item1 .bg {
    background: url(../image/LandingSlider01.svg);
    background-size: cover;
}

.trustedLeaders ul li.item2 .bg {
    background: url(../image/LandingSlider02.svg);
    background-size: cover;
}

.trustedLeaders ul li.item3 .bg {
    background: url(../image/LandingSlider03.svg);
    background-size: cover;
}

.trustedLeaders ul li.item4 .bg {
    background: url(../image/LandingSlider04.svg);
    background-size: cover;
}

.trustedLeaders ul li.item5 .bg {
    background: url(../image/landingSection01.jpg);
    background-size: cover;
}

.OurClientsInclude {
    text-align: center;
    padding: 4% 0%;
}

.OurClientsInclude h3 {
    color: white;
    font-weight: bold;
}

.OurClientsInclude h4 {
    font-size: 1.5em;
    color: var(--secondaryTextColor);
    line-height: 35px;
}


.GameplayAnimation i,
.MotioCapture i,
.servicesType i {
    font-size: 0.8em;
    background-image: var(--ButtonBg);
    padding: 5px;
    border-radius: 50%;
}

.riggigSetupRight {
    padding-top: 8%;
}

/* OUR SERVICES */

/* OUR PROJECTS */
.ourClientPortfolioImg {
    padding: 4% 0%;
}

.ourClientPortfolioImg img {
    transition: 0.3s ease-in;
}

.ourClientPortfolioImg img:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in;
}

#Wrapper .wideBody .container-fluid {
    padding: 2% 7% 2% 7%;

}

.wideBody .mySwiper {
    width: 100%;
    height: 100%;
    padding: 5px 0px 20px 0px;
}

.wideBody .swiper-slide {
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wideBody .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    margin-bottom: -15px;
    border-radius: 15px;
    object-fit: cover;
}

.wideBody .autoplay-progress {
    position: absolute;
    right: 20px;
    bottom: 35px;
    z-index: 10;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #cf1e1d, #bb125e, #863980, #4a497f, #2c4862);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.wideBody .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: white;
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

.projectVideos {
    padding: 7% 4.7% 5% 4.5%;
}

.navTabs {
    display: flex;
    justify-content: space-evenly;
}

.navTabs a {
    background-color: var(--lessBgColor);
    color: white;
    padding: 0px 35px;
    margin: 10px;
    font-size: 1.4em;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s ease-in;
}

.navTabs a:hover {
    text-decoration: none;
    transition: 0.3s ease-in;
    background-color: var(--secondaryColor);
}

.projectVideos .tab-content {
    margin-top: 35px;
}

.projectVideos .tab-content .tab-pane {

    border-radius: 10px;
    background-color: var(--lessBgColor);
}

.videoComp video {
    border-radius: 15px;
    margin-bottom: 15px;
}

/* OUR PROJECTS */

/*CONTACT US*/
input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(2);
    /* IE */
    -moz-transform: scale(2);
    /* FF */
    -webkit-transform: scale(2);
    /* Safari and Chrome */
    -o-transform: scale(2);
    /* Opera */
    transform: scale(2);
    padding: 10px;
}



.formPannel label {
    font-weight: normal;
    color: var(--secondaryTextColor);
    letter-spacing: 0px;
    font-size: 1.2em;
}

.formPannel input {
    background-color: #21364A;
    padding: 30px;
    border: none;
    font-size: 1.2em;
    margin: 10px 0px;
    color: white;
    border-radius: 10px;
}

.formPannel textarea {
    background-color: #21364A;
    padding: 30px;
    border: none;
    font-size: 1.2em;
    margin: 10px 0px;
    color: white;
    border-radius: 10px;
}

.formPannel .BtnServices {
    text-align: center;
    background-color: var(--secondaryColor);
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    letter-spacing: 1px;
    margin-top: 25px;
    width: 100%;
    text-transform: uppercase;
    border: none;
}



.formPannel .agreeTerms {
    padding-top: 25px;
}

.formPannel .agreeTerms input {
    padding: 20px;
}

.formPannel .agreeTerms span {
    color: white;
    font-size: 1.2em;
    padding-left: 15px;
}

.formPannel .agreeTerms a {
    color: white;
    color: var(--secondaryColor);
    font-weight: bold;
}

/*CONTACT US*/

/*POLICY PAGE */
.PolicyBoxWrap {
    position:relative;
z-index:5;
display:flex;
flex-direction:column;
gap:15px;
max-width:100%;
width:100%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: var(--bgColor);
border:1px solid var(--border);
border-radius:20px;
padding: 25px;
box-shadow:0 20px 50px rgba(0,0,0,0.5); 
}
  .PolicyBoxWrap h1 {
        font-size: 26px; 
        }
        .PolicyBoxWrap h5 {
        font-size: 18px; 
        margin: 0px;
        padding: 10px 0px 10px 0px;
        line-height: 25px;
        color: var(--primaryTextColor);
        font-weight: bold;
         opacity: 0.75;
        }
        .PolicyBoxWrap p {
        font-size: 16px; 
         margin: 0px;
         line-height: 25px;
         color: var(--primaryTextColor);
         opacity: 0.75;
        padding: 0px;
        }
.PolicyBoxWrap ul li{
    opacity: 0.7;
    line-height: 25px;
}

/*POLICY PAGE*/