* {
    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;
    position: relative;
}

.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 h1 {
    font-size: 80px;
    color: white;
    font-weight: bold;
}

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

.navbarSecText {
    margin-bottom: 200px;
}

/* .navbarSecText svg {
    position: absolute;
    left: 18%;
    top: 13%;
} */

.navbarSecText p {
    font-size: 24px;
    width: 60%;
    margin: auto;
    line-height: 40px;
    color: white;
}

.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 {
    display: flex;
    justify-content: space-between;
    font-size: 60px;
    align-items: flex-start;
}

.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 img {
    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;
}

.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: absolute;
    top: 72%;
    justify-content: center;
}

.headerCards .col-lg-3 {
    background-color: #8DB849;
    text-align: center;
    border: 8px solid white;
    height: 400px;
    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;
}

.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;
}

.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;
}

/* Main Title Section Start */
.blogPageTitle h1 {
    font-size: 80px;
}

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

.blogPageTitle p {
    color: #444;
    font-size: 24px;
    width: 70%;
    line-height: 40px;
    margin: auto;
}

/* Main Title Section Start */

.blogsCategories ul {
    gap: 5px;
}

.blogsCategories ul li a:hover {
    background: linear-gradient(266.86deg, #A4E1FC 0.67%, #00B2FF 97.4%);
    color: white;
    border-radius: 10px;
    border: none;
    font-weight: bold;
}

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

.blogsCategories ul li a {
    font-weight: bold;
}

.searchBar {
    width: 40%;
    display: flex;
    justify-content: center;
    margin: auto;
}

.socialLinks ul li {
    cursor: pointer;
    padding: 8px 16px;
    font-family: 'Archivo';
    text-transform: capitalize;
    font-weight: bold;
    border: 2px solid #444;
    border-radius: 12px;
    margin-left: 10px;
}

.socialLinks ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.socialLinks ul li a {
    color: #444;
    font-weight: bold;
    font-family: 'Archivo';
    box-shadow: 0px 1px 2px 0px rgba(105, 81, 255, 0.05);
}

.socialLinks ul li a i {
    color: #444;
    font-size: 30px;
}

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

.footerPaymentCard img {
    width: 76px;
    height: 24px;
}

/* 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) {
    .blogPageTitle h1 {
        font-size: 60px;
    }

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

    .blogPageTitle h2 {
        font-size: 40px;
    }
}

@media screen and (max-width: 780px) {
    .blogPageTitle p {
        width: 100%;
    }

    .navbarList {
        justify-content: center;
    }

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

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

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

    .blogPageTitle p {
        color: black;
        font-size: 20px;
    }

    .blogsCategories ul li a {
        font-weight: bolder;
        font-size: 12px;
    }

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

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

@media screen and (max-width: 480px) {
    .hireUsbtn {
        padding: 1rem 1rem;
        font-weight: bold;
        font-size: .9rem;
    }
    
    .footer2ndSec .justify-content-around {
        flex-direction: column;
    }

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

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

    .blogsCategories ul {
        flex-direction: column;
        text-align: center;
    }

    .blogPageTitle h1 {
        font-size: 23px;
    }

    .blogPageTitle h2 {
        font-size: 27px;
    }

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

    .searchBar {
        width: 100%;
    }

    .navbarList li a {
        font-size: 17px;
    }

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

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

    .footer2ndlastSecImg p {
        width: 90%;
    }

    .navbarList {
        justify-content: center;
        gap: 7%;
    }
}

@media screen and (max-width: 330px) {
    .companyFooterLogo {
        width: 225px;
        height: 106px
    }

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

    .footerPaymentCard img {
        display: none;
    }

    .blogPageTitle h2 {
        font-size: 23px;
    }

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

/* My Media Query End */