* {
    margin: 0;
    padding: 0;
    /* user-select: none; */
    box-sizing: border-box;
}

@font-face {
    font-family: 'Monument Extended';
    src: url('../assets/fonts/Monument-Extended/MonumentExtended-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo';
    src: url('../assets/fonts/Archivo/static/Archivo/Archivo-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.MonumentExtended {
    font-family: 'Monument Extended', sans-serif;
}

.Archivo {
    font-family: 'Archivo';
}

/* HEADER CSS START */
.mainSec {
    background-color: #141B38;
}

.navbarList {
    list-style: none;
    display: flex;
    gap: 10%;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.navbarList li a {
    color: white;
    font-weight: 400;
    font-family: 'Archivo';
    font-size: 18px;
    text-decoration: none;
}

.navbarList li a:hover {
    color: #A4E1FC;
}

.contactUsBtn button {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    padding: 8px 20px;
    border-radius: 20px;
    background: linear-gradient(118.72deg, #A4E1FC 13.98%, #00B2FF 97.47%);
    color: black;
}

/* HEADER CSS END */
.navbar {
    font-size: 20px;
    color: white;
    line-height: 28px;
    text-transform: uppercase;
    box-shadow: 0 8px 6px -6px gray;
    border-bottom: 1px solid gray;
    font-weight: bold;
}

.highlight {
    position: absolute;
    left: 14%;
    top: 13%;
    color: #1A2345;
}

.services {
    color: white;
    position: absolute;
    left: 12%;
    top: 19%;
}

.works {
    position: absolute;
    left: 53%;
    top: 53%;
    color: #1A2345;
}

.bestWorks {
    font-family: 'Monument Extended';
    color: white;
    position: absolute;
    top: 9%;
    left: 13%;
}

.navbarSecText h3 {
    font-weight: 400px;
    font-family: 'Monument Extended', sans-serif;
    font-size: 48px;
    line-height: 58px;
}

.navbarSecText p {
    font-size: 18px;
    width: 60%;
    margin: auto;
    padding: auto;
    line-height: 40px;
}

.mainSec .row {
    align-items: center;
}

.nav-link {
    text-transform: capitalize;
    color: black;
    font-weight: 600;
}

.headerCards {
    animation: fadeInRight;
    animation-duration: 2s;
}

/* Footer Start */
.footer-link {
    border-left: 2px solid;
}

.footer {
    background-color: #5AC9E4;
}

.footer a {
    color: black;
    font-size: 16px;
    text-decoration: none;
}

.footer .d-flex {
    justify-content: center;
}

.InspireInnovateBuildSec {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.sparkleIcon {
    color: transparent;
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
}

.my-path {
    fill: red;
}

.InspireInnovateBuildSec p {
    font-size: 72px;
}

.checked {
    /* font-size: 3em; */
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.bar {
    border-bottom: 3px solid black;
    width: 45%;
}

.barStar {
    font-size: 60px;
}

.footer2ndlastSecImg {
    height: 465px;
    width: 100%;
    border-radius: 40px;
}

.footer2ndlastSecImg p {
    width: 60%;
    margin: auto;
    text-align: center;
    font-family: 'Archivo';
}

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

.processTitle {
    font-size: 40px;
    text-align: center;
    position: relative;
}

.DigitalThinkersTextSec .col-lg-8 h1 {
    font-size: 40px;
}

.bestWorkSecTitle h1 {
    font-size: 40px;
}

.companyFooterLogo {
    width: 50%;
    height: 77px
}

/* .boonConsultBtn span {}

.boonConsultBtn span:hover {} */

.OurServiceTitle {
    font-size: 40px;
    position: relative;
}

.HireUsSec div {
    color: black;
    font-family: 'Archivo';
    width: 260px;
    text-align: center;
    padding: 24px 32px 24px 32px;
    border-radius: 48px;
    border: 1px solid black;
    font-size: 20px;
    font-weight: 600;
}

.HireUsSec .hireUsBtn {
    font-family: 'Archivo';
    width: 260px;
    text-align: center;
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    padding: 24px 32px 24px 32px;
    border-radius: 48px;
    border: 1px solid black;
    font-size: 20px;
    font-weight: 600;
    color: white;
    border: none;
}

.HireUsSec div:hover {
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    color: white;
    border: none;
}

/* Footer End*/

.headerCards {
    display: flex;
    /* position: relative;
    top: 130px; */
    justify-content: center;
}

.headerCards .col-lg-3 {
    background-color: #8DB849;
    text-align: center;
    border: 8px solid white;
    height: 298px;
    width: 21%;
    box-shadow: 15px 20px 130px 5px #000000FF;
    overflow: hidden;
    transform: rotate(8deg);
    border-radius: 20px;
    padding: 10px 20px;
}

.headerCards .ShopifyCard {
    transform: rotate(-6deg);
}

.headerCards .AmazonCard {
    transform: rotate(8deg);
    background: #FF9900;
}

.headerCards .WalmartCard {
    transform: rotate(-3deg);
    background: #3D96EE;
}

.headerCards .TiktokCard {
    background: black;
    transform: rotate(8deg);
}

.headerCards .col-lg-3 p {
    font-weight: bolder;
    color: #CCEB9C;
}

/* Footer-Start */
.footer-links {
    list-style: none;
    display: flex;
    gap: 5px;
    color: black;
}

.footer-links li a {
    color: black;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 20px;
    transition-delay: 2s;
    background-color: white;
}

.footer-links li a:hover {
    background: linear-gradient(118.72deg, #A4E1FC 13.98%, #00B2FF 97.47%);
}

.footer-main-sec {
    background-color: #141B38;
}

.footerEnd {
    border-top: 2px solid white;
    color: white;
}

.footer2ndSec {
    background-color: #182144;
    border-radius: 20px;
    font-style: italic;
}

.UsefulLinksSec {
    list-style: none;
    padding: 0;
}

.UsefulLinksSec li {
    color: white;
    padding: 10px 0 0 0;
    padding: 0;
}

.UsefulLinksSec li a {
    text-decoration: none;
    font-size: 15px;
    color: white;
}

.footer-titles {
    font-size: 24px;
    color: white;
    font-family: 'Archivo';
}

.footerFindUs i {
    color: white;
    font-size: 30px;
}

.footerFindUs p {
    color: white;
}

.footerFindUs {
    align-items: center;
    gap: 20px;
}

/* Footer-End */

.team-img {
    width: 100%;
    height: 524.06px;
    border-radius: 50px;
}

/* Our Services Section Start */
.our-ser-sec-title {
    font-size: 40px;
    display: inline-block;
    font-weight: 400;
}

.our-service-sec-list {
    list-style: none;
    display: flex;
    padding: 0;
    flex-direction: column;
    gap: 20px;
}

.our-service-sec-list li {
    padding: 32px 40px 32px 40px;
    background: #141B38;
    display: flex;
    align-items: center;
    border-radius: 120px;
    justify-content: space-between;
    border: 1px solid #DDDDDD;
}

.our-service-sec-list li {
    padding: 32px 40px 32px 40px;
    background: white;
    display: flex;
    text-align: center;
    align-items: center;
    border-radius: 120px;
    justify-content: space-between;
    border: 1px solid #DDDDDD;
}

.our-service-sec-list li a {
    text-decoration: none;
    font-size: 24px;
    color: black;
    font-family: 'Archivo';
    font-weight: 600px;
    line-height: 26px;
    letter-spacing: -1%;
}

.our-service-sec-list li a i {
    color: black;
}

.our-service-sec-list li:hover a {
    background: #141B38;
    color: white;
}

.our-service-sec-list li:hover i {
    background: #141B38;
    color: white;
}

.our-service-sec-list li:hover {
    background: #141B38;
}

.our-service-sec-list li:hover span {
    color: #00B2FF;
}

.ourSerSecImg {
    border-radius: 30px;
    height: 580px;
    width: 100%;
    border-radius: 40px;
}

.rotateArrow {
    rotate: -30deg;
    transition: transform 0.5s ease;
    background-color: white;
    color: black;
    border-radius: 50%;
    padding: 20px;
    height: 64px;
    width: 64px;
}

.rotateArrow:hover {
    transform: rotate(0deg);
    rotate: 0deg;
}

.ourSer2ndSec {
    background: #141B38;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 26px 20px;
    height: 280px;
}

.exploreMore {
    font-weight: 600;
    font-size: 24px;
}

.ourSer2ndSec1 {
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 26px 20px;
    height: 280px;
}

/* Our Services Section End */


/* How Our Magical Process Works Section Start*/
.ProcessingTitle {
    background-color: #141B38;
    border-top: 4px solid #00B2FF;
    color: white;
}

.processSecSparkle {
    position: absolute;
    right: 50px;
    top: 100px;
    height: 40px;
}

.processSecSparkle1 {
    position: absolute;
    left: 50px;
    height: 40px;
}

.ProcessingSec {
    padding: 20px 25px;
    background: #182144;
    border-radius: 60px;
}

.ProcessingSec img {
    width: 100%;
    /* width: 500px; */
    height: 300px;
    margin: auto;
    border-radius: 30px;
}

.numbering {
    color: #666666;
}

.ProcessingSecText {
    width: 50%;
    text-align: center;
    margin: auto;
}

/* How Our Magical Process Works Section End*/
.seeMoreBtn {
    background-color: white;
    float: right;
    color: black;
    border-radius: 20px;
    padding: 6px 10px;
    border: 1px solid black;
    align-items: center;
    /* width: 25%; */
    font-weight: 500;
}

/* Our Best Work Section Start */
.carouselSec {
    background: #1D5DFF;
    padding: 23px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 32px;
    border: 8px;
}

.carouselSec1 {
    background: #141B38;
    padding: 23px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 32px;
    border: 8px;
}

.carouselSec img {
    border-radius: 30px;
}

.carouselSec1 img {
    border-radius: 30px;
}

.motion-sportsSecText h1 {
    font-family: Monument Extended;
    font-size: 32px;
    font-weight: 400;
    line-height: 38.4px;
    align-content: center;
    align-items: center;
    text-align: center;
    letter-spacing: -0.01em;
    text-align: left;
}

.motion-sportsSecText i {
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    border: none;
    border-radius: 550px;
    padding: 7px 0 0 0;
    font-size: 10px;
    text-align: center;
    width: 40px;
    height: 40px;
    transform: rotate(-30deg);
}

/* Our Best Work Section End */

.BestWorkbtns {
    background: #F0F0F0;
    width: Hug (121px)px;
    height: Hug (32px)px;
    padding: 6px 12px 6px 12px;
    font-weight: 500;
    gap: 8px;
    border-radius: 32px;
}

.BestWorkbtns span {
    color: #888888;
}

.button-prev {
    text-align: center;
    width: 56px;
    height: 56px;
    background-color: #141B38;
    border-radius: 60%;
    padding: 10px;
    top: 50%;
    right: 100%;
    color: white;
    font-size: 25px;
}

.button-next {
    text-align: center;
    height: 56px;
    width: 56px;
    background-color: whitesmoke;
    border-radius: 60%;
    padding: 10px;
    top: 50%;
    left: 100%;
    color: black;
    font-size: 25px;
}

.DigitalThinkersTextSec {
    margin: 100px 0 0 0;
}

.contactUsForm input {
    border-radius: 80px;
    padding: 10px 20px;
    border: none;
}

/* FAQ's CSS Start*/
.details {
    --padding: 10px;
    border-bottom: 1px solid #8d8d8d;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.details+.details {
    margin-top: 15px;
}

.details__title {
    --width: 20px;
    --height: 3px;
    --radius: 1px;
    font-size: 25px;
    --color: currentColor;
    margin: 0;
    font-weight: bold;
    padding: var(--padding) calc(var(--width) * 2) var(--padding) var(--padding);
    cursor: pointer;
    transition: all .2s ease-in-out;
    position: relative;
}

.details__title:before,
.details__title:after {
    content: '';
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    position: absolute;
    border-radius: var(--radius);
    top: calc(50% - (var(--height) / 2));
    right: calc(var(--width) / 2);
    transition: all .2s ease-in-out;
}

.details__title:after {
    rotate: 90deg;
}

.details__container[open] .details__title:before {
    rotate: 45deg;
}

.details__container[open] .details__title:after {
    rotate: 135deg;
}

.details__container[open] .details__title {
    background-color: #141B38;
}

.details__summary::marker {
    content: '';
}

.details__desc {
    visibility: hidden;
    display: grid;
    grid-template-rows: 0fr;
    transition: all .2s ease-in-out;
    overflow: hidden;
    padding-inline: var(--padding);
    pointer-events: none;
}

.details__container[open]+.details__desc {
    visibility: visible;
    grid-template-rows: 1fr;
    padding-block: var(--padding);
}

.details__desc-inner {
    min-height: 0;
    font-size: 20px;
    color: #878C91;
}

.faqMainSec {
    border-top: 4px solid #00B2FF;
    background-color: #141B38;
    color: white;
}

.FAQsparkle {
    position: absolute;
    left: 5%;
    top: 50%;
}

.FAQsparkle1 {
    position: absolute;
    left: 96%;
}

.FaqTitle {
    font-size: 40px;
    text-align: center;
}

/* _______________________________________________________________________________________________________ */
.ContactPageTitle .mt-5 {
    font-size: 65px;
}

.ContactPageTitle h2 {
    font-size: 48px;
}

.ContactPageTitle p {
    font-size: 24px;
    line-height: 35px;
    width: 60%;
    line-height: 40px;
    margin: auto;
}

.digitalClipPath {
    clip-path: polygon(7% 0%, 100% 0%, 96% 100%, 2% 100%);
    border-radius: 20px;
    display: inline-block;
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    color: white;
    padding: 6px 36px;
}

.ClipPath {
    clip-path: polygon(7% 0%, 100% 0%, 96% 100%, 2% 100%);
    border-radius: 10px;
    display: inline-block;
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    color: white;
    padding: 6px 36px;
}

.userSvg {
    position: absolute;
    top: 29%;
    left: 29%;
}

.emailSvg {
    position: absolute;
    top: 29%;
    left: 53%;
}

.phoneSvg {
    position: absolute;
    top: 37%;
    left: 29%;
}

.sendNowBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 70px;
    background: var(--Gradient, linear-gradient(267deg, #A4E1FC 0.67%, #00B2FF 97.4%));
    border: none;
    color: white;
    font-size: 20px;
    padding: 13px 16px;
    gap: 20px;
}

.ContactUsSection {
    background-image: url(../assets/imgs/img85.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    border: 8px solid #141B38;
    padding: 80px;
}

.ContactUsSection .col-md-12 {
    padding: 20px;
    border-radius: 20px;
    background: rgba(12, 18, 45, 0.40);
}

.ContactUsSection .col-md-12 .contactUsForm .MonumentExtended {
    font-size: 30px;
    color: white;
}

.contactUsForm textarea {
    border-radius: 30px;
    border: none;
}

.faqText {
    width: 75%;
    margin: auto;
}

.faqText p {
    color: #AAA;
    text-align: center;
    font-size: 22px;
}

/* Animation Btn Start */
.hireUsbtn {
    padding: 1rem 4rem;
    font-size: 1.4rem;
    font-family: sans-serif;
    text-transform: capitalize;
    background: transparent;
    color: black;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 100px;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hireUsbtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    color: white;
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    z-index: -1;
    transition: 0.5s;
}

.hireUsbtn:hover::before {
    width: 100%;
    color: white;
}

.hireUsbtn:hover {
    color: white;
}

.hireUsbtn a:hover {
    color: white;
}

/* second button */
.hireUsbtn:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    color: white;
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    transition: 0.5s;
    z-index: -1;
}

.hireUsbtn:nth-child(2):hover::before {
    height: 100%;
}

/* Animation Btn End */

/* My Media Query Start */
@media screen and (max-width: 970px) {
    .InspireInnovateBuildSec p {
        font-size: 40px;
    }
}

@media screen and (max-width: 780px) {
    .ContactPageTitle .mt-5 {
        font-size: 45px;
    }

    .contactUsForm input {
        margin: 0 0 20px 0;
    }

    .contactUsForm .d-flex {
        flex-direction: column;
        gap: 20px;
    }

    .ContactPageTitle h2 {
        font-size: 30px;
    }

    .ContactPageTitle p {
        font-size: 20px;
        line-height: 20px;
    }

    .InspireInnovateBuildSec p {
        font-size: 27px;
    }

    .FaqTitle {
        font-size: 30px;
    }

    .userSvg {
        top: 11%;
        left: 90%;
    }

    .emailSvg {
        top: 62%;
        left: 90%;
    }

    .phoneSvg {
        top: 10%;
        left: 90%;
    }

    .HireUsSec .hireUsBtn {
        width: 100%;
        padding: 26px 5px;
    }

    .HireUsSec div {
        width: 100%;
        padding: 26px 5px;
    }

    .navbarList {
        justify-content: center;
    }

    .ContactUsSection {
        padding: 20px;
    }

    .phoneSvg {
        display: none;
    }

    .userSvg {
        display: none;
    }

    .emailSvg {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    /* .phoneSvg {
        display: block;
    }

    .userSvg {
        display: block;
    }

    .emailSvg {
        display: block;
    } */

    .hireUsbtn {
        padding: 1rem 1rem;
        font-weight: bold;
        font-size: .9rem;
    }

    .InspireInnovateBuildSec p {
        font-size: 17px;
    }

    .FAQsparkle {
        top: 64%;
        display: none;
    }

    .FAQsparkle1 {
        left: 85%;
        display: none;
    }

    .footer2ndSec .justify-content-around {
        flex-direction: column;
    }

    .FaqTitle {
        font-size: 20px;
    }

    .userSvg {
        top: 11%;
        left: 84%;
    }

    .emailSvg {
        top: 62%;
        left: 84%;
    }

    .phoneSvg {
        top: 10%;
        left: 84%;
    }

    .ContactPageTitle .mt-5 {
        font-size: 25px;
    }

    .ContactPageTitle h2 {
        font-size: 21px;
    }

    .ContactPageTitle p {
        font-size: 15px;
        line-height: 30px;
        width: 100%
    }

    .sendNowBtn {
        font-size: 19px;
        padding: 9px 8px;
    }

    .ContactUsSection .col-md-12 {
        padding: 10px;
    }

    .ContactUsSection .col-md-12 .contactUsForm .MonumentExtended {
        font-size: 20px;
        margin-top: 10px;
    }

    .faqText {
        width: 90%;
        font-size: 10px;
        margin: auto;
    }

    .faqText p {
        font-size: 17px;
    }

    .digitalClipPath {
        clip-path: none;
        border-radius: 0;
        background: none;
        color: black;
        padding: 0 10px;
    }

    .HireUsSec div {
        padding: 9px 5px;
    }

    .companyFooterLogo {
        width: 225px;
        height: 106px
    }

    #btn {
        padding: 1rem 1rem;
        font-weight: bold;
        font-size: .9rem;
    }

    .navbarList {
        justify-content: center;
    }

    .ContactUsSection {
        padding: 5px;
    }

    .footer2ndlastSecImg p {
        width: 90%;
    }

    .footer2ndlastSecImg {
        height: 180px;
        border-radius: 15px;
    }

    .ClipPath {
        clip-path: none;
        border-radius: 0;
        background: none;
        color: white;
        padding: 0;
    }
}

@media screen and (max-width: 330px) {
    .ContactPageTitle .mt-5 {
        font-size: 20px;
    }

    .FaqTitle {
        font-size: 23px;
    }

    .faqText {
        width: 100%;
    }

    .FAQsparkle {
        display: none;
    }


    .FAQsparkle1 {
        display: none;
    }

    .companyFooterLogo {
        width: 100%;
        height: 100%;
    }
}

/* My Media Query End */