@import url(https://fonts.cdnfonts.com/css/segoe-ui-variable-static-display);
body,
ul {
    padding: 0;
}
.mega-menu a,
.sidebar ul li > a,
a {
    text-decoration: none;
}
html,body {
    margin: 0;
    font-family: "Segoe UI";
}
ul {
    list-style: none;
}
a {
    color: #fff;
}
input:focus,
textarea:focus {
    outline: 0;
}
.custom-web .screen-img img,
.phones1 img,
.project-cards-wrapper .project-big-card .card-image img,
.project-cards-wrapper .small-card .card-image img,
.service-banner-image img,
.service-details .ai-header,
input,
textarea {
    width: 100%;
}
.header-bg {
    background-color: #0b0c20;
    padding: 55px 0;
    overflow: hidden;
    position: relative;
    margin-top: -112px;
}
.header-bg .navbar {
    margin: auto;
}
.navbar {
    width: 90%;
    margin: 20px auto;
    border: 1px solid #ffffff29;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 0 20px;
    background: linear-gradient(to bottom, #ffffff29, #ffffff21);
}
.navbar .logo {
    height: 70px;
    width: 200px;
}
.about-banner-image img,
.banner .arrows-container .arrow-div img,
.banner .arrows-container .arrow-div2 img,
.dmm-img img,
.navbar .logo img,
.service-cards-wrapper .service-card .service-card-icon img,
.service-wrap .service-list-icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.navbar .menu-list {
    display: flex;
    gap: 30px;
    position: relative;
}
.navbar .menu-item.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
}
.project-banner .hero-section {
    padding-bottom: 0;
    padding-right: 0;
}
.banner,
.other-banner {
    background-color: #0b0c20;
    margin-top: -120px;
    position: relative;
}
.banner .lineImg1,
.other-banner .lineImg1 {
    position: absolute;
    top: 0;
    left: 27.4%;
    height: 200px;
}
.banner .lineImg2,
.other-banner .lineImg2 {
    position: absolute;
    left: 3.5%;
    top: 15%;
}
.banner .lineImg3 {
    position: absolute;
    bottom: 10%;
    left: 27.4%;
}
.banner .lineImg4,
.other-banner .lineImg4 {
    position: absolute;
    left: 51.3%;
    top: 30%;
}
.banner .lineImg5,
.other-banner .lineImg5 {
    position: absolute;
    right: 11.5%;
    top: 22%;
}
.banner .lineImg6 {
    position: absolute;
    right: 11.5%;
    bottom: 13%;
    height: 230px;
}
@keyframes heightPulse {
    0%,
    100% {
        height: 100px;
        opacity: 0.3;
    }
    50% {
        height: 300px;
        opacity: 1;
    }
}
.banner .lineImg1,
.banner .lineImg2,
.banner .lineImg3,
.banner .lineImg4,
.banner .lineImg5,
.banner .lineImg6,
.other-banner .lineImg1,
.other-banner .lineImg2,
.other-banner .lineImg4,
.other-banner .lineImg5 {
    animation: 4s ease-in-out infinite heightPulse;
}
.other-banner .hero-section {
    padding: 160px 80px 100px;
}
.hero-section {
    padding: 160px 80px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.banner::before,
.other-banner::before {
    background-image: url(images/banner-bg-image.png);
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
}
.banner .banner-bg-line,
.other-banner .banner-bg-line {
    position: absolute;
    right: 0;
    width: 840px;
    top: 80px;
}
.banner-bg-shadow {
    position: absolute;
    top: 0;
    width: 800px;
    left: 18%;
    box-shadow: 0 0 304 100px #5f37ea4d;
}
.banner .banner-text-area,
.other-banner .banner-text-area {
    width: 45%;
    position: relative;
    z-index: 0;
    padding: 70px 30px 0 0;
}
.banner-text-area .banner-btn {
    background-color: #4564ff;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 500;
}
.banner-text-area .banner-heading {
    font-size: 40px;
    font-weight: 700;
    line-height: 59px;
    color: #fff;
    margin: 20px 0;
}
.banner-text-area .banner-text {
    color: #fff;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 24px;
}
.banner .banner-image {
    width: 38%;
    padding: 30px;
}
.banner .banner-container {
    border: 1px solid #ffffff29;
    position: relative;
    z-index: 0;
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(5px);
    background: linear-gradient(to right, #ffffff38, #ffffff21);
    width: 264px;
}
.banner-container .container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner-container .container-header .icon img,
.banner-container .users-icon img,
.mobile-desktop .picture img {
    height: 100%;
    width: 100%;
}
.ic a img,
.topsocialicons .icondiv a {
    height: 24px;
}
.banner-container .container-header .icon {
    height: 40px;
    width: 50px;
}
.banner-container .container-searchbar {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    border: 1px solid #ffffff29;
    padding: 10px;
    border-radius: 12px;
}
.service-list .service-wrap,
.topsocialicons {
    border: 1px solid #ffffff29;
    width: max-content;
    gap: 10px;
    display: flex;
}
.container-searchbar input {
    background-color: transparent;
    border: none;
}
.service-list {
    position: relative;
    left: -75px;
}
.service-list .service-wrap:hover {
    transform: translateX(10px);
    transition: 0.35s linear;
}
.service-list .service-wrap {
    background: #5e5e6e;
    border-radius: 30px;
    color: #fff;
    padding: 5px 20px;
    align-items: center;
    margin-bottom: 10px;
    transition: 0.35s linear;
}
.service-wrap .service-list-icon {
    height: 30px;
    width: 30px;
}
.banner-container .arrows-container {
    position: relative;
    left: 25%;
    top: 10px;
}
.banner .arrows-container .arrow-div2 {
    margin-left: 40px;
}
.banner .arrows-container .arrow-div,
.banner .arrows-container .arrow-div2 {
    height: 20px;
    width: 100px;
    margin-bottom: 30px;
    animation: 2s ease-in-out infinite alternate movingarrow;
}
@keyframes movingarrow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-10px);
    }
}
.banner-container .users-icon {
    height: 50px;
    width: 50px;
    border-radius: 12px;
    padding: 5px;
    background: linear-gradient(to right, #ffffff38, #ffffff21);
    border: 1px solid #ffffff29;
    position: absolute;
    left: -30px;
    bottom: 50px;
    animation: 3s infinite alternate rotate;
    transform: rotate(-30deg);
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}
.allicons {
    display: flex;
    background: linear-gradient(to right, #4564ff, #879bff);
    width: max-content;
    padding: 10px;
    border-radius: 10px;
    flex-direction: column;
    animation: 2.5s infinite updown;
    transform: translateY(-10px);
}
@keyframes updown {
    0%,
    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}
.icc {
    margin-bottom: 20px;
}
.ic a img {
    width: 24px;
}
.rightboxicon {
    right: -20px;
    position: absolute;
    bottom: -80px;
}
.generative-ai {
    background-image: url(images/AboutUs.webp);
    display: flex;
    padding: 80px;
    overflow: hidden;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.topsocialicons {
    background: #1f2033;
    border-radius: 12px;
    padding: 10px;
    flex-direction: column;
    position: absolute;
    top: 25px;
    right: -75px;
}
.topsocialicons .icondiv {
    height: 40px;
    background: 0 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff29;
    border-radius: 12px;
}
.service-container {
    background-color: #f7f7f7;
    padding: 80px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: start;
}
.about-ai,
.project-detail-body,
.projects,
.work-section,
footer {
    background-color: #0b0c20;
}
.service-container .ai-header .ai-section-heading,
.service-container .ai-header .ai-section-text,
tr td:first-child,
tr th:first-child {
    text-align: left;
}
.price span,
.service-container .ai-header .ai-section-heading {
    font-size: 36px;
}
.service-container .ai-header .service-bg-icon {
    position: absolute;
    height: 500px;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 30px;
}
.service-container .ai-header {
    margin: 0;
    align-items: start;
    width: 42%;
    position: sticky;
    top: 10%;
    z-index: 1;
}
.service-container .service-cards-wrapper {
    padding: 0 15px;
    width: 51%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.service-cards-wrapper .service-card .service-title {
    font-size: 22px;
    margin: 0;
}
.service-cards-wrapper .service-card .service-card-link {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
    font-size: 15px;
}
.service-cards-wrapper .service-card:nth-child(2) {
    position: sticky;
    top: 10%;
    z-index: 2;
}
.service-cards-wrapper .service-card:nth-child(3) {
    position: sticky;
    top: 10%;
    z-index: 3;
}
.service-cards-wrapper .service-card:nth-child(4) {
    position: sticky;
    top: 10%;
    z-index: 4;
}
.service-cards-wrapper .service-card:nth-child(5) {
    position: sticky;
    top: 10%;
    z-index: 5;
}
.service-cards-wrapper .service-card:nth-child(6) {
    position: sticky;
    top: 10%;
    z-index: 6;
}
.service-cards-wrapper .service-card:first-child {
    position: sticky;
    top: 10%;
}
/*.service-cards-wrapper .service-card:first-child:hover {*/
/*    background: url(images/bggg1.png) top right/cover no-repeat;*/
/*    transition: 0.35s linear;*/
/*}*/
/*.service-cards-wrapper .service-card:nth-child(2):hover {*/
/*    transition: 0.35s linear;*/
/*    background: url(images/bggg2.png) top right/cover no-repeat;*/
/*}*/
/*.service-cards-wrapper .service-card:nth-child(3):hover {*/
/*    transition: 0.35s linear;*/
/*    background: url(images/bggg3.png) top right/cover no-repeat;*/
/*}*/
/*.service-cards-wrapper .service-card:nth-child(4):hover {*/
/*    background: url(images/bggg4.png) top right/cover no-repeat;*/
/*    transition: 0.35s linear;*/
/*}*/
/*.service-cards-wrapper .service-card:nth-child(5):hover {*/
/*    background: url(images/bggg5.png) top right/cover no-repeat;*/
/*    transition: 0.35s linear;*/
/*}*/
/*.service-cards-wrapper .service-card:nth-child(6):hover {*/
/*    transition: 0.35s linear;*/
/*    background: url(images/bggg6.png) top right/cover no-repeat;*/
/*}*/
.about-ai .ai-section-heading,
.about-ai .ai-section-text,
.about-ai .ai-service-card .ai-service-card-des,
.about-ai .ai-service-card .ai-service-card-title,
.custom-web .ai-section-heading,
.custom-web .ai-section-text,
.highlight .save,
.mobile-header .toggle svg,
.service-cards-wrapper .service-card:hover .service-card-link,
.service-cards-wrapper .service-card:hover .service-des,
.service-cards-wrapper .service-card:hover .service-title {
    color: #fff;
}
.service-cards-wrapper .service-card:hover .white-icon {
    display: block !important;
}
.f-img,
.project-tab-content,
.service-cards-wrapper .service-card .service-card-icon .white-icon,
.service-cards-wrapper .service-card:hover .real-icon,
.sidebar ul > li:hover .dropdown {
    display: none;
}
.service-cards-wrapper .service-card {
    transition: 0.35s linear;
    box-shadow: 0 0 32px 0 #00000029;
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    background-color: #fff;
}
.service-cards-wrapper .service-card .service-card-icon {
    height: 140px;
    width: 140px;
}
.generative-ai .ai-text-area,
.work-text-area {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.top-service-btn {
    border: 1px solid #fff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    width: max-content;
    font-size: 15px;
}
.about-us-section,
.ai-section,
.appointment,
.contact,
.plan-section,
.projects {
    padding: 80px;
}
.generative-ai-text {
    color: #fff;
    line-height: 25px;
    margin: 0;
}
.generative-ai-heading {
    color: #fff;
    font-size: 46px;
    line-height: 60px;
    margin: 0;
}
.orbit-section {
    position: relative;
    width: 50%;
    left: 80px;
    height: 450px;
}
.orbit-section .shadow-image {
    position: absolute;
    width: 20px;
    border-radius: 50%;
    left: 39%;
    top: 67%;
    height: 20px;
}
@keyframes round {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.orbit-section .border1 {
    border: 1px solid #78768d;
    height: 450px;
    width: 450px;
    position: absolute;
    border-radius: 50%;
    animation: 20s linear infinite round;
}
.orbit-section .border2 {
    border: 1px solid #78768d;
    height: 380px;
    width: 380px;
    position: absolute;
    border-radius: 50%;
    top: 35px;
    left: 36px;
    animation: 25s ease-in-out infinite reverse round;
}
.orbit-section .border3 {
    border: 1px solid #78768d;
    height: 300px;
    width: 300px;
    position: absolute;
    border-radius: 50%;
    top: 71px;
    left: 73px;
    animation: 30s ease-in infinite alternate round;
}
.orbit-section .border4 {
    border: 1px solid #78768d;
    height: 225px;
    width: 225px;
    position: absolute;
    border-radius: 50%;
    top: 104px;
    left: 113px;
    animation: 35s ease-out infinite round;
}
.orbit-section .center-circle img {
    height: 60px;
    width: 90px;
    object-fit: contain;
    margin-top: 10px;
}
.orbit-section .center-circle {
    border: 1px solid #78768d;
    background-color: #3c326d;
    height: 150px;
    width: 150px;
    position: absolute;
    border-radius: 50%;
    top: 140px;
    display: flex;
    align-items: center;
    left: 150px;
    justify-content: center;
}
.orbit-section .small-icon {
    height: 30px;
    width: 30px;
    position: absolute;
    border: 1px solid #78768d;
    background-color: #322e53;
    padding: 5px;
    border-radius: 50%;
    object-fit: contain;
}
.vue {
    right: 13px;
    top: 20%;
}
.node {
    left: -18px;
    top: 40%;
}
.react {
    bottom: 0;
    right: 27%;
}
.sass {
    left: -8px;
    top: 62%;
}
.net {
    top: -20px;
    left: 45%;
}
.angular {
    right: -17px;
    top: 52%;
}
.php {
    left: 0;
    top: 22%;
}
.python {
    bottom: -15px;
    right: 37%;
}
.java {
    right: -17px;
    top: 40%;
}
.ai-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
    gap: 15px;
}
.ai-section-heading,
.ai-section-text {
    color: #0c0d1f;
    margin: 0;
    text-align: center;
}
.ai-section-heading {
    font-size: 40px;
    line-height: 46px;
}
.ai-section-text {
    line-height: 25px;
}
.ai-services-wrapper {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.about-ai .ai-services-wrapper .ai-service-card {
    background-color: #212234;
}
.ai-services-wrapper .ai-service-card {
    border-radius: 12px;
    background-color: #ededed;
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 20px;
    width: 26%;
}
.ai-service-card-button {
    color: #1462bf;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
}
.ai-service-card .ai-service-card-title {
    color: #0b0c20;
    margin: 0;
}
.ai-service-card .ai-service-card-des {
    color: #0b0c20;
    margin: 0;
    font-size: 15px;
    line-height: 25px;
}
.ai-service-card .ai-service-card-icon {
    height: 60px;
    width: 60px;
}
.ai-service-card .ai-service-card-icon img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}
.work-section {
    padding: 80px;
    position: relative;
    height: 600px;
    overflow-y: hidden;
}
.work-section .work-text-area {
    width: 40%;
    position: relative;
    z-index: 2;
}
.work-text-area .generative-ai-text {
    font-size: 14px;
}
.work-section .shadow-image {
    position: absolute;
    height: 10px;
    width: 10px;
    left: -20%;
    top: 145px;
    border-radius: 50%;
    box-shadow: 0 0 304px 220px #5f37ea4d;
    z-index: -1;
}
.projects::before,
.work-section::after {
    position: absolute;
    box-shadow: 0 0 304px 150px #5f37ea4d;
    height: 0;
    content: "";
}
.work-section::after {
    background-image: url(images/work-bg-blur.png);
    right: 0;
    bottom: 0;
    width: 270px;
    border-radius: 50%;
}
.work-bg-line {
    position: absolute;
    width: 90%;
}
.menu-list,
.projects,
.work-section-cards {
    position: relative;
}
.work-section-cards .work-card {
    transition: 0.35s linear;
    position: absolute;
    width: 28%;
}
.blogs-section .blog-card .blog-date,
.footer-bottom .right p,
.work-section-cards .work-card .work-title {
    color: #fff;
    margin: 0;
}
.project-card-des,
.work-section-cards .work-card .work-des {
    color: #fff;
    margin: 10px 0;
    font-size: 15px;
    line-height: 25px;
}
.work-card .work-data {
    position: absolute;
    top: 35%;
    left: 14%;
}
.work-section-cards .work-card span {
    font-size: 150px;
    color: #fff;
    opacity: 0.3;
    font-weight: 700;
}
.work-section-cards .card-1 {
    top: 150px;
    left: 19px;
}
.work-section-cards .card-2 {
    top: 80px;
    left: 30%;
}
.work-section-cards .card-3 {
    top: 20px;
    right: 13%;
}
.work-section-cards .card-4 {
    right: -6%;
    top: -185px;
}
.projects {
    overflow: hidden;
}
.projects::before {
    top: 80px;
    left: 39%;
    width: 300px;
    background-image: url(images/project-bg.webp);
    overflow-y: hidden;
}
.projects-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    position: relative;
}
.projects-header .generative-ai-text {
    text-align: center;
}
.project-cards-wrapper .project-big-card {
    border: 1px solid #78768d;
    display: flex;
    flex-wrap: wrap;
    padding: 30px;
    position: relative;
    align-items: center;
    border-radius: 12px;
    margin-top: 20px;
    background: #111224;
    justify-content: space-between;
}
.project-cards-wrapper .card-nmbr {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}
.project-cards-wrapper .project-card-title {
    color: #fff;
    margin: 0;
    font-size: 31px;
    font-weight: 500;
}
.project-cards-wrapper .card-text-area {
    width: 47%;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.project-small-cards {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.project-small-cards .small-card {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #111224;
    border: 1px solid #78768d;
    border-radius: 12px;
    width: 44%;
    margin-bottom: 20px;
}
.project-cards-wrapper .small-card .card-text-area {
    width: 100%;
    gap: 10px;
}
.mobile-desktop .desktop-devlopment,
.project-cards-wrapper .project-big-card .card-image {
    width: 50%;
}
.project-cards-wrapper .small-card .card-image {
    width: 100%;
    position: relative;
    height: 350px;
    margin-bottom: 10px;
}
.project-cards-wrapper .small-card .card-image img {
    height: 100%;
    border-radius: 12px;
}
.project-cards-wrapper .small-card .card-image .image-1 {
    position: absolute;
    width: 300px;
    bottom: -48px;
    right: -31px;
    animation: 2s infinite alternate imageupdown;
    transition: 0.35s linear;
}
@keyframes imageupdown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}
.ourCustomers {
    padding: 80px 0;
}
.testimonialContainer {
    margin-top: 40px;
    overflow: hidden;
    position: relative;
}
.testimonialTrack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.testimonialRow {
    display: flex;
    gap: 24px;
    animation: 25s linear infinite slide;
}
.testimonialRow:nth-child(2) {
    animation: 25s linear infinite slideReverse;
}
.testimonialCard {
    min-width: 500px;
    background: #ededed;
    border-radius: 12px;
    padding: 20px 32px;
}
.testimonialCard img {
    width: 64px;
    height: 64px;
}
.quoteIcon {
    color: #0188d0;
    width: 91px;
    height: 91px;
}
.testimonialCard p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-weight: 400;
    margin-bottom: 24px;
}
.testimonialAuthor {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.testimonialAuthor img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.authorInfo h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #333;
}
.downArrow {
    width: 24px;
}
.authorInfo span {
    font-size: 14px;
    color: #666;
    font-weight: 400;
}
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes slideReverse {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
footer {
    padding: 80px 80px 20px;
}
.blogs-section .blog-card:hover button,
.footer-bottom .footer-pages a:hover,
footer .lets-connect a:hover {
    color: #0188d0;
    transition: 0.35s linear;
}
.footer-links .links .arrow,
footer .lets-connect a {
    transition: 0.35s linear;
}
.about-points .point p,
footer .lets-connect h1 {
    margin: 0;
}
footer .lets-connect {
    align-items: center;
    color: #fff;
    margin-top: 10px;
    display: flex;
    gap: 10px;
}
footer .projects-header {
    width: 80%;
}
footer .lets-talk {
    background-image: url(images/box-shadowwebp.webp);
    border: 1px solid #78768d;
    border-radius: 40px;
    padding: 60px 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.footer {
    border: 1px solid #78768d;
    background-color: #0c0d1f;
    border-radius: 20px;
    margin-top: 20px;
    padding: 40px;
    position: relative;
}
.footer::before {
    position: absolute;
    content: "";
    background-image: url(images/circle-shadow.webp);
    height: 0;
    width: 400px;
}
.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-logo img {
    height: 100%;
    width: 30%;
}
.footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer .links-container:first-child {
    width: 15%;
}
.footer .links-container:nth-child(2) {
    width: 28%;
}
.footer .links-container:nth-child(3) {
    width: 27%;
}
.blog-detail-section .blog-sidebar,
.blog-sidebar,
.footer .links-container:last-child {
    width: 30%;
}
.footer-links .links-container .links a {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    transition: 0.35s linear;
    align-items: start;
    font-size: 15px;
}
.footer-links .links-title {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}
.footer-links .links a:hover .arrow {
    transform: rotate(45deg);
    transition: 0.35s linear;
}
.footer-links .links a:hover {
    color: #0188d0;
    transition: 0.35s linear;
    letter-spacing: 0.5px;
}
.footer-bottom {
    border-radius: 20px;
    background-color: #111224;
    border: 1px solid #78768d;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    flex-wrap: wrap;
}
.footer-bottom .social-icons {
    display: flex;
    gap: 20px;
    margin: 0;
}
.footer-bottom .social-icons .media-icon:hover {
    background-color: #0188d0;
    transition: 0.35s linear;
    border: 2px solid #0188d0;
}
.footer-bottom .social-icons .media-icon {
    border: 2px solid rgba(255, 255, 255, 0.8);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 4px;
    transition: 0.35s linear;
}
.footer-bottom .footer-pages a {
    text-decoration: underline;
    transition: 0.35s linear;
}
.about-banner-image {
    height: 400px;
    width: 450px;
    position: relative;
}
.about-us-section .ai-header {
    justify-content: start;
    align-items: start;
    width: 100%;
    gap: 10px;
}
.about-us-section .ai-section-text {
    text-align: left;
    font-size: 18px;
    line-height: 28px;
}
.brand-identity-card h3,
.brand-identity-card p,
.dmm-service-banner,
.faq-section .faq-head,
.note,
.over,
.sidebar ul li,
.technologies h1,
.text-container p,
td,
th {
    text-align: center;
}
.about-points .point {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
.about-us-section .mission-vision {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 50px;
}
.about-us-section .mission-vision .card {
    background-color: #ededed;
    padding: 20px;
    border-radius: 20px;
}
.service-cate {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    gap:25px;
}
.service-cate .icon-box {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px 0 #00000040;
    gap: 20px;
}
.service-cate .icon-box img {
    width: 70px;
    object-fit: contain;
}
.custom-web {
    background-color: #0b0c20;
    padding: 80px 80px 0;
    background-attachment: fixed;
    position: relative;
}
.custom-web .f-img img {
    width: 100%;
    object-fit: contain;
    animation: 2s infinite alternate imageupdown;
    transition: 0.35s linear;
}
.custom-web .f-img {
    position: absolute;
    height: 700px;
    width: 700px;
    right: 0;
}
.custom-web .screen-img {
    width: 800px;
    position: relative;
    top: 47px;
}
.custom-web .ai-header {
    position: relative;
    z-index: 3;
}
.ecommerce-solution {
    padding: 80px 80px 0;
    background-color: #fff;
}
.mobile-desktop {
    display: flex;
    padding: 80px;
    flex-wrap: wrap;
}
.mobile-desktop .picture {
    height: 350px;
    margin-top: 20px;
}
.mobile-desktop .mbl-devlopment {
    position: relative;
    width: 50%;
}
.mobile-desktop .mbl-devlopment::before {
    position: absolute;
    content: "";
    background-image: url(images/Line\24png);
    height: 500px;
    width: 2px;
    right: 0;
    top: 0;
}
.text-container p {
    margin: 0;
    line-height: 28px;
}
.project-tab-content.active {
    display: block;
}
.tab-btn {
    padding: 10px 20px;
    margin: 10px;
    background: #fff;
    color: #0188d0;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    font-weight: 600;
}
.tab-btn.active {
    background: #0188d0;
    color: #fff;
}
.project-tabs {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
}
.text-container {
    padding: 50px;
}
.field {
    width: 100%;
    margin-top: 30px;
}
.field .input {
    border: 1px solid #00000052;
    padding: 10px;
    border-radius: 8px;
    margin: 10px 0;
}
.checkboxes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.custom-checkbox {
    display: inline-block;
    background-color: #fff;
    color: #3064f1;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #0188d0;
    font-size: 14px;
    transition: background 0.3s, color 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    user-select: none;
}
.custom-checkbox.active {
    background-color: #3064f1;
    color: #fff;
}
.field textarea {
    height: 100px;
    font-family: "Segoe UI Variable Static Display", sans-serif;
}
.contact-form button {
    border: 1px solid #0188d0;
    background-color: #0188d0;
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    transition: 0.35s linear;
    font-weight: 600;
}
.contact-form button:hover {
    transition: 0.35s linear;
    background-color: #fff;
    color: #0188d0;
}
.blog-page {
    background-color: #0b0c20;
    padding: 80px 80px 0;
    position: relative;
}
.blogs-section {
    display: flex;
    flex-wrap: wrap;
    padding-top: 80px;
    position: relative;
    z-index: 1;
}
.blogs-section .blog-cards-container .row {
    display: flex;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.blogs-section .blog-cards-container,
.pricingplan-banner .banner-text {
    width: 70%;
}
.blogs-section .blog-card .blog-img img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    transition: 0.35s linear;
}
.blogs-section .blog-card .blog-img {
    height: 250px;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}
.blogs-section .blog-card {
    width: 42%;
    border: 1px solid #78768d4d;
    border-radius: 30px;
    padding: 20px;
    transition: 0.35s linear;
    height: max-content;
}
.blog-card:hover {
    border-top: 5px solid #0188d0;
    border-right: 2px solid #0188d0;
    border-bottom: none;
    border-left: none;
}
.blogs-section .blog-card .blog-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.blogs-section .blog-card .blog-card-title {
    color: #fff;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}
.blogs-section .blog-card .blog-card-button button {
    background-color: transparent;
    border: none;
    color: #fff;
}
.blogs-section .blog-card .blog-card-button {
    display: flex;
    justify-content: space-between;
    transition: 0.35s linear;
    font-weight: 600;
}
.blogs-section .blog-card:hover .blog-img img {
    transform: scale(1.1);
    transition: 0.35s linear;
}
.blogs-section .blog-card .svg-icon {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s linear;
    border: 2px solid #0188d0;
}
.blogs-section .blog-card:hover .svg-icon {
    border: 2px solid transparent;
    transition: 0.35s linear;
}
.blog-sidebar .search-container input {
    border: none;
    padding: 10px;
    width: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.blog-sidebar .search-container .searchBar {
    display: flex;
    border-radius: 10px;
}
.blog-sidebar .category-container .category a {
    display: flex;
    color: #000;
    justify-content: space-between;
    transition: 0.35s linear;
    font-size: 12px;
}
.blog-sidebar .searchBar .search-btn {
    background-color: #396df1;
    color: #fff;
    height: 40px;
    width: 70px;
    align-items: center;
    display: flex;
    justify-content: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.post .post-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.post .post-img {
    height: 70px;
    width: 120px;
}
.blog-sidebar .category-container,
.blog-sidebar .posts-container,
.blog-sidebar .search-container,
.blog-sidebar .tags-container {
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}
.blog-sidebar .category-container .category {
    margin-top: 20px;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
}
.blog-sidebar .posts-container .post {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-direction: column;
}
.blog-sidebar .posts-container .date {
    display: flex;
    gap: 5px;
    font-size: 14px;
    color: #fff;
}
.blog-sidebar h2,
.blog-sidebar h4 {
    color: #fff !important;
}
.blog-sidebar .post-row {
    display: flex;
    gap: 10px;
}
.tags-container .tags-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tags-container .tags-buttons button:hover {
    background-color: #0188d0;
    border: 1px solid #0188d0;
    transition: 0.35s linear;
}
.tags-container .tags-buttons button {
    color: #fff;
    border-radius: 30px;
    background-color: transparent;
    padding: 10px 15px;
    border: 1px solid #fff;
    transition: 0.35s linear;
}
.blog-details-section {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}
.blog-details-section .shadow-image {
    position: absolute;
    left: -40%;
    z-index: -1;
    height: 700px;
    width: 700px;
}
.main-service-all .shadow-image2 {
    position: absolute;
    right: -26%;
    top: -35%;
    z-index: -1;
    height: 700px;
    width: 700px;
}
.blog-details-section .shadow-image3 {
    position: absolute;
    left: -35%;
    bottom: -15%;
    z-index: -1;
    height: 700px;
    width: 700px;
}
.blog-details-container {
    width: 67%;
    color: #fff;
    gap: 30px;
}
.blog-details .admin,
.blog-details .blog-date,
.blog-details .technology-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}
.blog-details-container .tags h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}
.blog-details-container .tags button:hover {
    background: #0188d0;
    color: #fff;
    transition: 0.2s linear;
    border: 1px solid #0188d0;
}
.blog-details-container .tags button {
    background: 0 0;
    transition: 0.2s linear;
    border: 1px solid #eaecf0;
    padding: 8px 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 30px;
}
.blog-details-container .tags {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 20px;
}
.comment-form {
    background-color: #f0f3fc;
    padding: 30px;
}
.about-smm,
.calendar-main,
.comment-form .user-detail {
    display: flex;
}
.comment-form .user-detail .user-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 20px 0;
}
.comment-form .comment-textarea {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.comment-form .comment-textarea textarea {
    height: 150px;
}
.comment-form .comment-textarea textarea,
.comment-form .user-detail .user-info input {
    padding: 10px;
    border: none;
}
.blog-details-img {
    height: 400px;
    width: 750px;
}
.blog-details-img img,
.pricing-contact .about-banner-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.privacy-policy-section {
    padding: 80px 80px 0;
    background-color: #0b0c20;
    color: #fff;
}
.privacy-policy-section h2 {
    font-size: 24px;
    font-weight: 600;
}
.privacy-policy-section strong {
    font-weight: 500;
}f
.privacy-policy-section p {
    line-height: 25px;
    margin-bottom: 0;
}
.technologies {
    background: #e2e8fa80;
    padding: 42px 0;
    margin-bottom: 62px;
}
.customAccordion-content,
.customAccordion-item {
    font-size: 14px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    color: #fff;
}
.technologies h1 {
    font-size: 34px;
    font-weight: 500;
    margin: 0;
    padding-bottom: 22px;
}
.alltechnologies {
    width: 94%;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 49px;
    flex-wrap: wrap;
}
.technologies-img-title p {
    margin: 0;
    text-align: center;
}
.phones img,
.technologies-img-title img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}
.firebase-imgs {
    width: 100px;
    height: 100px;
}
.customAccordion {
    display: flex;
    flex-direction: column;
    width: 45%;
    padding: 20px;
}
.customAccordion-item {
    cursor: pointer;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: dotted;
    margin-top: 15px;
    border-top: 1px solid #78768d4d;
}
.customAccordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: max-height 0.35s, padding 0.35s;
}
.customAccordion-content.active {
    max-height: 200px;
    padding: 20px;
}
.customAccordion-item .icon svg {
    transition: transform 0.35s;
}
.customAccordion-item.active .icon svg {
    transform: rotate(180deg);
}
.faq-section {
    margin-top: -120px;
    background-color: #0b0c20;
    padding: 120px 80px 0;
}
.faq-section .faq-head .faq-description {
    font-size: 18px;
    line-height: 28px;
    color: #fff;
}
.faq-section .faq-head .faq-heading {
    font-size: 58px;
    font-weight: 500;
    margin-bottom: 0;
    color: #fff;
}
.faq-section .faq-head {
    width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.faq-details {
    display: flex;
    flex-wrap: wrap;
}
.service-main-content {
    padding: 0 80px 80px;
    background-color: #0b0c20;
    position: relative;
    overflow: hidden;
}
.main-service-all {
    width: 94%;
    margin: auto;
}
.main-service-card-img img {
    width: 190px;
    height: 100%;
}
.main-service-card {
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid #ddd;
    padding: 30px 0;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.main-service-card-text h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 500;
}
.main-service-card-text p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    padding: 10px 0 0;
    font-weight: 400;
    color: #fff;
}
.main-service-card-text a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0044eb;
    font-size: 17px;
    margin-top: 14px;
    font-weight: 300;
}
.main-service-card-text a img {
    width: 30px;
}
.button-text {
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #fff;
}
.arrow-wrapper {
    position: relative !important;
    margin-top: 4px;
}
.arrow-wrapper img {
    height: 28px !important;
    width: 40px !important;
    transition: width 0.4s !important;
    z-index: 2 !important;
    position: relative;
}
.arrow-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: -11px !important;
    left: 12px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 1px solid #0044eb !important;
    background-color: transparent !important;
    transition: background-color 0.4s !important;
    box-sizing: border-box !important;
}
.custom-button:hover .arrow-wrapper::before {
    background-color: #0044eb !important;
}
.custom-button:hover .arrow-wrapper img {
    width: 45px !important;
}
.custom-button {
    background: 0 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    cursor: pointer !important;
    color: #1f2022 !important;
}
.over {
    color: #fff;
    margin-bottom: 50px;
}
.over h1 {
    font-size: 48px;
    font-weight: 600;
}
.main-service-all .shadow-image2 {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 500px;
    right: -10%;
}
.main-service-all .shadow-image3 {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -20%;
}
.navbar-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.mobile-header {
    display: none;
    background-color: transparent;
}
.sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #0b0c20f0;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s;
    z-index: 1000;
}
.sidebar.show {
    right: 0;
}
.sidebar-header {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    font-size: 18px;
    cursor: pointer;
}
.sidebar-body {
    padding: 20px;
    font-size: var(--font-size-small);
}
.sideBar-menu .sidebar-item {
    border-bottom: 1px solid #fff;
}
.sidebar ul li {
    position: relative;
    padding: 20px;
    line-height: 20px;
}
.dropdown li {
    padding-bottom: 0 !important;
}
.sidebar .dropdown {
    display: none;
    padding-left: 20px;
}
.sidebar ul li > a {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
}
.sidebar .dropdown-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.dropdown li a {
    display: block;
    padding: 5px 0;
    color: #fff;
    font-size: 18px !important;
    font-weight: 400 !important;
}
.toggle {
    border: 1px solid #fff;
    border-radius: 5px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-logo {
    height: 50px;
}
.cross-icon {
    height: 30px;
    width: 30px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 4px;
}
.calendar-section,
.form-section {
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
    background: #fff;
    padding: 20px;
}
.booking-container {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}
.calendar-section {
    width: 60%;
}
.form-section {
    width: 40%;
}
.calendar .day,
.time-slot {
    background-color: #edf2ff;
}
.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    gap: 30px;
}
.calendar-header button:hover {
    background-color: #3b82f6;
    transition: 0.35s linear;
    color: #fff;
}
.calendar-header button {
    transition: 0.35s linear;
    background: #edf2ff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 50%;
}
.calendar div,
.time-slot {
    font-size: 14px;
    cursor: pointer;
}
#monthYear,
.plan {
    font-weight: 700;
}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.calendar div {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}
.booking-btn button,
.calendar .day.selected,
.calendar .day:hover,
.time-slot.active,
.time-slot:hover {
    background-color: #3b82f6;
    color: #fff;
}
#time-slots {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 25%;
    padding: 10px 0 10px 20px;
}
.time-slot {
    padding: 12px;
    border: none;
    border-radius: 8px;
    transition: 0.2s;
}
.dmm-section,
.dmm-section-2 {
    background-color: #0b0c20;
    display: flex;
}
.form-section input,
.form-section textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0 15px;
    font-size: 16px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    font-family: "Segoe UI";
}
.form-section textarea {
    height: 100px;
}
.booking-btn {
    display: flex;
    justify-content: center;
}
.booking-btn button {
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
}
.calendar-div {
    width: 70%;
    border-right: 2px dashed grey;
    padding: 10px 10px 10px 0;
}
#selected-date-display {
    font-weight: 600;
}
#booking-form {
    width: 95%;
}
.dmm-service-banner {
    width: 85% !important;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.challenge h1,
.dmm-service-banner .banner-heading {
    margin-bottom: 0;
}
.other-banner .sm-icons,
.smm-icons {
    position: absolute;
}
.other-banner .yt {
    top: 30%;
    left: 10%;
    height: 100px;
}
.other-banner .insta {
    bottom: 25px;
    height: 170px;
    left: 0;
}
.other-banner .tiktok {
    height: 50px;
    top: 40%;
    left: 35%;
}
.other-banner .fb {
    height: 70px;
    right: 20%;
    top: 35%;
}
.other-banner .blur-yt {
    height: 50px;
    right: 30%;
}
.other-banner .blur-fb {
    height: 70px;
    right: 35%;
    bottom: 8px;
}
.other-banner .blur-tiktok {
    height: 70px;
    right: 0;
    bottom: 10%;
}
.dmm-section-2 {
    flex-wrap: wrap;
    padding: 80px 80px 0;
}
.dmm-section {
    flex-wrap: wrap;
    padding: 80px;
}
.dmm-section-3 .ai-header {
    width: 47%;
    margin: 0;
    align-items: flex-start;
    padding-left: 50px;
}
.dmm-section .ai-header,
.dmm-section-2 .ai-header {
    width: 50%;
    margin: 0;
    align-items: flex-start;
}
.dmm-section .ai-header .ai-section-heading,
.dmm-section .ai-header .ai-section-text,
.dmm-section-2 .ai-header .ai-section-heading,
.dmm-section-2 .ai-header .ai-section-text {
    color: #fff;
    text-align: left;
}
.dmm-img {
    height: 500px;
    width: 48%;
}
.dmm-section-3 {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    padding: 80px;
}
.dmm-section-3 .ai-header .ai-section-heading,
.dmm-section-3 .ai-header .ai-section-text {
    color: #0b0c20;
    text-align: left;
}
.portfolio-detail-banner .banner-header h1{
    width:40%;
}
.portfolio-detail-banner .banner-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 130px 80px 0;
    position: relative;
    color: #fff;
    flex-wrap:wrap;
}
.portfolio-detail-banner .banner-btns button {
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 8px 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    background-color: transparent;
    font-family: "Segoe UI";
}
.portfolio-image {
    width: 100%;
    height: max-content;
}
.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.portfolio-detail {
    padding: 20px 80px 80px;
}
.portfolio-des span,
.project-details span {
    color: #b14dff;
}
.portfolio-des p {
    font-size: 1.5rem;
    color: #fff;
}
.detail-imgs .big-image img,
.detail-imgs .small-imgs .img img {
    height: 100%;
    width: 100%;
    border-radius: 30px;
    object-fit: cover;
}
.detail-imgs .big-image {
    height: 400px;
    width: 100%;
    margin-bottom: 20px;
}
.detail-imgs .small-imgs .img {
    width: 50%;
    height: 400px;
}
.client-background {
    color: #fff;
    margin-top: 50px;
    position: relative;
}
.client-background img {
    position: absolute;
    height: 500px;
    width: 500px;
    left: -10%;
    top: 0;
    z-index: -1;
}
.project-details {
    width: 400px;
    margin-top: 20px;
}
.project-details li {
    display: flex;
    padding: 10px 0;
}
.project-details strong {
    width: 200px;
}
.project-details li:first-child,
.project-details li:last-child {
    border-bottom: 1px dashed #fff;
    border-top: 1px dashed #fff;
}
.challenge-img {
    height: 400px;
    width: 100%;
}
.challenge-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
}
.challenge {
    color: #fff;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.brandIdentity {
    width: 87%;
    margin: auto;
    color: #fff;
}
.brand-identity-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: 0 0;
    position: relative;
    flex-wrap: wrap;
    padding: 10px 0 70px;
    z-index: 1;
}
.brand-identity-card {
    color: #fff;
    width: 22%;
}
.brand-identity-icon {
    margin: 0 auto 18px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: 0 0;
}
.mega-menu,
.results-columns {
    display: flex;
    justify-content: space-between;
}
.brand-identity-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0 14px;
    color: #fff;
}
.brand-identity-card p {
    font-size: 13px;
    color: #e0e0e0;
    line-height: 1.6;
    margin: 0;
}
.brand-identity-container > div:first-child,
.brand-identity-container > div:nth-child(2),
.brand-identity-container > div:nth-child(3) {
    border-right: 1px dashed #969696;
    padding-right: 25px;
}
.results-section {
    background: 0 0;
    color: #fff;
    padding: 40px 0 80px;
    width: 100%;
}
.results-title {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}
.results-description {
    font-size: 16px;
    color: #e0e0e0;
    margin-bottom: 38px;
    max-width: 1100px;
}
.results-columns {
    gap: 32px;
    width: 100%;
    margin-top: 20px;
    position: relative;
}
.results-blue,
.results-check {
    display: inline-flex;
    min-width: 22px;
    min-height: 22px;
}
.results-col {
    width: 32%;
    background: 0 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.7;
    position: relative;
}
.results-col h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #fff;
}
.results-col ul {
    padding-left: 0;
    margin: 0;
}
.results-col li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    color: #e0e0e0;
    font-size: 15px;
}
.results-check {
    color: #afff7f;
    font-size: 18px;
    margin-top: 2px;
    align-items: center;
    justify-content: center;
}
.results-blue {
    color: #1a9cff;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
}
.results-columns > .results-col:not(:last-child) {
    border-right: 1.5px dashed #969696;
    padding-right: 32px;
}
.results-columns > .results-col:not(:first-child) {
    padding-left: 32px;
}
.mega-menu {
    position: absolute;
    top: 50px;
    left: -425px;
    width: 1100px;
    background: linear-gradient(to right, #1c1f2b, #3a2f65);
    padding: 40px;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    gap: 40px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
    z-index: 1000;
    border: 1px solid #ffffff29;
}
.about-list,
.banner-links {
    gap: 20px;
    display: flex;
    position: relative;
}
.mega-menu .column h4 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
}
.mega-menu .column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-menu .column ul li {
    padding: 4px 0;
    font-size: 14px;
}
.services-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mega-menu a {
    color: #fff;
    transition: color 0.3s;
}
.mega-menu a:hover {
    color: #0188d0;
}
.banner-links {
    justify-content: space-between;
    bottom: -100px;
}
.banner-links .link-item a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.subtitle {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 40px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
tr {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
td,
th {
    padding: 15px;
}
.highlight {
    background-color: #3b5bff;
    color: #fff;
}
.price {
    font-size: 16px;
    font-weight: 700;
}
.save {
    color: #a020f0;
    font-size: 0.9em;
}
.note {
    margin-top: 40px;
    font-size: 0.95em;
    color: #333;
}
.note strong {
    display: block;
    font-size: 1.2em;
    color: #3b5bff;
    margin-bottom: 10px;
}
.pricing-table {
    padding-top: 30px;
}
.pricing-contact {
    margin-top: 0 !important;
    margin-bottom: 80px;
}
.pricing-contact .about-banner-image {
    height: 450px;
    width: 555px;
    position: relative;
}
.pricing-contact .banner-text-area .banner-heading {
    font-size: 42px;
}
.pricing-contact .hero-section {
    padding: 30px 80px 0;
}
.pricing-contact .banner-links {
    bottom: 0;
    flex-direction: column;
    gap: 10px;
}
.pricing-contact .banner-links .link-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.contact-logo {
    padding: 80px 80px 0;
}
.about-pricing .top-heading {
    padding: 80px 300px 40px 80px;
}
.about-pricing .top-heading span {
    color: #357bee;
}
.about-smm .img-container {
    height: 500px;
    width: 40%;
}
.about-smm .img-container img {
    height: 100%;
    width: 100%;
    transform: rotate(30deg);
    position: relative;
    left: -25px;
}
.about-container {
    display: flex;
    width: 60%;
}
.about-list {
    width: 54%;
    flex-direction: column;
}
.about-list-item .count {
    background-color: #0044eb;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.item-detail h4 {
    margin-top: 0;
}
.about-list .line {
    position: absolute;
    z-index: 5;
}
.line1 {
    top: 3%;
    left: 75%;
    width: 240px;
}
.line2 {
    top: 33%;
    left: 50%;
    width: 370px;
}
.line3 {
    bottom: 37%;
    left: 57%;
    width: 450px;
}
.round-images {
    width: 50%;
    position: relative;
    top: -30%;
}
.round-images .round-image {
    position: absolute;
    right: 0;
}
.round-images .img1 {
    height: 600px;
}
.round-images .img2 {
    height: 500px;
    top: 10%;
}
.round-images .img3 {
    height: 400px;
    top: 20%;
}
.icon1 {
    width: 30px;
    top: 40%;
    left: 30%;
    z-index: 1;
}
.icon2 {
    width: 40px;
    top: 55%;
    left: 75%;
    z-index: 3;
}
.icon3 {
    width: 40px;
    top: 62%;
    left: 40%;
    z-index: 2;
}
.phones,
.phones1 {
    width: 47%;
}
.phones {
    height: 400px;
}
.card-image2 {
    height: 350px;
    margin-bottom: 25px;
}
.service-banner-image {
    width: 48%;
}
.lets-connect img {
    width: 249px;
    height: 24px;
}
.card-image2 img {
    object-fit: cover;
    height: 100%;
    border-radius: 12px;
}