@font-face {
  font-family: 'Tanker-Regular';
    src: url('./Fonts/OTF/Tanker-Regular.otf'),
    url('./Fonts/WEB/fonts/Tanker-Regular.woff2') format('woff2'),
    url('./Fonts/WEB/fonts/Tanker-Regular.woff') format('woff'),
    url('./Fonts/WEB/fonts/Tanker-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Metropolies';
  src: url('./metropolis/Metropolis-Light.otf') format('opentype');
  font-weight: 400; /* ExtraLight */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Metropolies';
  src: url('./metropolis/Metropolis-Bold.otf') format('opentype');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}
 *{
    font-family: 'Metropolies';
    margin: 0;
    padding: 0;
 }
 h1 {
    font-family: 'Tanker-Regular';
    font-weight: 400;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -1.2px;
    color: #FFFFFF;
}
 h2 {
    font-family: 'Tanker-Regular';
    font-weight: 400;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.6px;
    color: #FFFFFF;
 }
 h3 {
    font-family: 'Tanker-Regular';
    font-weight: 400;
    font-size: 34px;
    line-height: 36px;
    color: #FFFFFF;
 }
 h4 {
    font-family: 'Metropolies';
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: #FFFFFF;
    text-transform: uppercase;
 }
 p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.6px;
    color: #FFFFFF;
}
.primary-button, p, .secondary-button, .sub-menu li {
     font-family: 'Metropolies';
}
a {
   transition: 0.5s; 
}
a:hover {
    transform: scale(1.1);
}
.main_menu_bar {
    font-family: 'Tanker-Regular';
}
.sub-menu li{
    font-family: 'Metropolies';
}
body {
    background-color: #0f0f0f;
    background-image: 
        radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
    /*background-blend-mode: multiply;*/
    background-size: cover, 200px 200px;
    margin:0;
}

.menu-col-left {
    width: 50%;
    padding: 0 5em;
}
.menu-col-right {
    width: 50%;
}
.menu-col-right img {
    width: 100%;
}
.page-width {
    max-width: 1440px;
    margin: auto;
    padding: 0;
}
.sec-padding {
    padding: 100px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.sec-top {
   padding-top:0 !important;
}

.sec-bottom {
   padding-bottom:0 !important;
}
.mobile-on {
    display: none;
}
.col-right {
    grid-area: col-right;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}
.col-left {
    grid-area: col-left;
    text-align: left;
}
.button {
    padding: 20px 24px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
}
.menu-drawer {
    display: flex;
    cursor: pointer;
}
.mega-menu {
    cursor: pointer;
}
.menu-drawer-container {
    display: flex;
    align-items: center;
    height: 100vh;
}
.menu-drawer-container .menu-col-right {
    background-color: #C6FF00;
}
.mega-menu ul li, .main_menu_bar .main-menu li {
    list-style: none;
}
.main_menu_bar {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    gap: 80px;
}
.mega-menu ul li a {
    color: #fff;
    text-decoration: none;
}
.sub-menu {
  max-height: calc(10 * 47px); /* adjust item height if needed */
  overflow-y: auto;
  padding-right: 6px;
}
.nehish-image-gallery {
    padding-bottom: 0 !important;
}
.nehish-text {
    padding-bottom: 0 !important;
}
.nehish-text .client-work {
    max-width: 500px;
}
.nehish-text .client-work td.service-title {
    padding: 10px 10px 10px 0;
}
.nehish-image-gallery .gallery-grid .gallery-item {
    width: 100%;
}
.nehish-image-gallery .gallery-grid .gallery-item img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    display: flex;
}
.nehish-image-gallery .gallery-grid.item-cards {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin: 60px 0;
}
/* optional scrollbar styling */
.sub-menu::-webkit-scrollbar {
  width: 4px;
}
.sub-menu::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.header__wrepp .grid-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
}
.menu-drawer-poppup {
    position: fixed;
    width: 100%;
    display: none;
    top: 0;
    z-index: 1;
    background-image: url('./img/body_bg.png');
    background-color: #000;
    background-position: center;
    background-size: contain;
}
.menu-drawer-poppup .close-button {
    position: absolute;
    left: 0;
    right: 0;
    text-align: right;
}
.main_menu_bar .sub-menu {
    display: none;
}
.cross_icon {
    background: unset;
    border: none;
    margin-top: 10px;
}
.main-menu li a {
    color: rgba(233, 233, 233, 0.3);
    font-size: 48px;
    line-height: 1.7;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Tanker-Regular';
}
.sub-menu li {
    font-size: 18px;
    line-height: 1.3;
    text-transform: uppercase;
    padding: 13px 0;
    letter-spacing: -0.2px;
    font-weight: 400;
}
.main-menu li a.active {
    color: #E9E9E9 !important;
}
.sub-menu li:last-child {
    text-decoration: underline 3px;
    text-underline-offset: 24.5%;
}
.menu-back{
    display: none;
}
.sub-menu li:hover {
    font-weight: 900;
}
.complete-solutions {
    position: relative;
}
.comp-sol-flex {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.comp-icon {
    position: absolute;
    top: 23%;
    left: 4%;
}
.comp-head {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}
.comp-headings {
    color: #fff;
    gap: 26px;
    display: flex;
    flex-direction: column;
    width: 85%;
}
.comp-headings h4 {
    color: #fff;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    margin: 0;
}
.comp-btn {
    width: 15%;
    text-align: end;
}
.comp-headings h2 {
    width: 83%;
}
.comp-btn a {
    color: #C6FF00;
    text-decoration: none;
    border: 1px solid #C6FF00;
    padding: 17px;
    display: flex;
    gap: 16px;
    justify-content: center;
    /*transition: 0.5s;*/
}
.splide__slide img {
    width: 100%;
}
.image-description {
    position: absolute;
    top: 0;
    padding: 26px;
    background: #fff;
    width: 100%;
}
.splide__slide {
    position: relative;
    overflow: hidden;
}
.splide__slide h3 {
    max-width: 88%;
    color: #000;
}
ul.splide__pagination.splide__pagination--ltr {
    display: none;
}
.splide__arrow--next {
    right: 47% !important;
    background: #ffffff !important;
    opacity: 1 !important;
}
.splide__arrow {
    top: 100% !important;
    margin-top: 48px !important;
    border-radius: 0 !important;
    padding: 15px 13px !important;
}
.splide__arrow--prev {
    left: 47% !important;
    transform: translateY(-50%) rotate(-180deg)!important;
}
.splide__arrow:hover:not(:disabled) {
    opacity: 1 !important;
    background: #fff !important;
}
.primary-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 8px;
    border: 1px solid #C6FF00;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: -0.2px;
    color: #C6FF00;
}
.secondary-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: -0.2px;
    color: #000000;
}
.main-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.main-section-content {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    position: relative;
}
.main-section-content h1 strong {
    color: #C6FF00;
    font-size: 110px;
    font-family: 'Tanker-Regular';
}
.main-section-content p {
    text-align: right;
}
.content-sub-div-one {
    position: absolute;
    left: -20%;
    bottom: 25%;
}
.float-icon {
  display: inline-block;
  animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* move up */
  }
  100% {
    transform: translateY(0);
  }
}
.content-sub-div-two {
    position: absolute;
    right: 0%;
    top: 15%;
}
.rotate-icon {
  display: inline-block;
  animation: slowRotate 10s linear infinite;
}

@keyframes slowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.main-sectin-image-and-cta {
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.main-section-image {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
.main-section-image-div-one {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 33.33333333333333%;
}
.main-section-image-div-one img {
    transform: translate(27%, 13%);
}
.image-sub-div-one {
    position: absolute;
    top: -8%;
    left: -4%;
}
.main-section-image-div-two {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 33.33333333333333%;
}
.image-sub-div-two {
    position: absolute;
    top: 25%;
    right: -25%;
}
.main-section-image-div-three {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.33333333333333%;
}
.main-section-image-div-three img {
    transform: translate(-15%, 0);
}
.main-section-cta {
    display: none; /*---------- flex ----------*/
    flex-direction: row-reverse;
}
/*----------second-section----------*/

.second-section-card-sub-div h2 {
    line-height: 0;
    color: #C6FF00;
}
.second-section-card-sub-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}
.second-section-card-sub-div h4 {
    font-family: 'Tanker';
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: normal;
    letter-spacing: -0.6px;
    color: #EEEEEE;
    margin: 0 !important;
}
.second-section-card h4 {
    margin-bottom: 20px;
}
.second-section-wrapper {
    display: flex;
    gap: 126px;
    flex-direction: row;
}
.second-section-card  p {
    font-size: 18px;
}
/*----------forth-section-wrapper----------*/
.forth-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important; 
}
.forth-section-wrapper-div-one {
    background-color: #C6FF00;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 63px 0;
}
.forth-section-wrapper h2 {
    color: #000000;
}
.forth-section-wrapper h5 {
    color: #000000;
}
.forth-section-wrapper-div-two {
    display: flex;
    gap: 26px;
    flex-direction: column;
}
.forth-sec-flex {
    display: flex;
    flex-direction: column;
    gap: 63px;
}
.forth-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.horizontal-divider {
    overflow: hidden;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}
/* Marquee Container - fixed width, hides overflow */
.logo-marquee {
    overflow: hidden;
    width: 100%;
    margin: 30px 0;
    position: relative;
    /* Soft fade edges (optional) */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.marquee-flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Content wrapper - holds both tracks */
.logo-marquee-content {
    display: flex;
    width: fit-content;
    animation: marquee-scroll 30s linear infinite;
}

/* Each track holds logos */
.logo-marquee-track {
    display: flex;
    gap: 80px;
    padding-right: 80px;
    flex-shrink: 0;
}

/* Reverse direction for row 2 */
.logo-marquee-reverse .logo-marquee-content {
    animation-direction: reverse;
}

/* Pause on hover */
.logo-marquee:hover .logo-marquee-content {
    animation-play-state: paused;
}

/* Logo styling */
.logo-marquee img {
    height: 40px;
    width: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.logo-marquee img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Seamless scroll animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/*-------professionals-sec-------*/
.professionals {
    background-image: url('./img/web-solution-bg.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 400px;
}
.prof-flex {
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.prof-heading {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 17px;
}
.prof-grid {
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    gap: 36px 50px;
}
.impact {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.impact-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.impact-heading h4 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.2px;
}
.impact-heading p {
    width: 80%;
    font-size: 14px !important;
}

/*---------portfolio---------*/


.projects-flex {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.project-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.proj-head-main h2 {
    width: 66%;
}
.proj-head-main {
    width: 80%;
    display: flex;
    gap: 26px;
    flex-direction: column;
}
.proj-head-btn {
    width: 20%;
}

.projects-flex .carousel-container {
    width: 100%;
    height: 93vh;
    position: relative;
    overflow: hidden;
}

.projects-flex .geometric-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.projects-flex .diagonal-line {
    position: absolute;
    width: 2px;
    height: 150%;
    background: #000;
    transform-origin: top;
}

.line-1 {
    left: 15%;
    top: -25%;
    transform: rotate(15deg);
}

.line-2 {
    left: 25%;
    top: -25%;
    transform: rotate(-15deg);
}

.line-3 {
    right: 25%;
    top: -25%;
    transform: rotate(15deg);
}

.line-4 {
    right: 15%;
    top: -25%;
    transform: rotate(-15deg);
}

.projects-flex .carousel-content {
    position: relative;
    z-index: 2;
    height: 74vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.projects-flex .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 34px;
}

.projects-flex .slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.projects-flex .slide.active {
    opacity: 1;
    pointer-events: auto;
}

.projects-flex .slide-content {
    text-align: center;
    max-width: 900px;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.projects-flex .project-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 35px;
    border: 2px solid #000000;
    border-radius: 30px;
    background: #fff;
    color: #000000;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(100px);
    position: relative;
    box-shadow: 0 1px 6px 0px #00000087;
}

.projects-flex .slide.active .project-button {
    animation: slideInFromRight 0.8s ease 0.2s forwards;
}

.projects-flex .slide.active.from-left .project-button {
    animation: slideInFromLeft 0.8s ease 0.2s forwards;
}

.project-button:hover {
    color: #000;
    box-shadow: 0 2px 11px 0px #00000087;
}

.project-button .arrow {
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: transform 0.2s ease;
    user-select: none;
}

.project-button .arrow:hover {
    transform: scale(1.3);
}

.project-button .arrow-left:hover {
    transform: translateX(-3px) scale(1.3);
}

.project-button .arrow-right:hover {
    transform: translateX(3px) scale(1.3);
}

.project-button .project-text {
    pointer-events: none;
}

/* Pagination */
.pagination {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.pagination-current {
    font-size: 2rem;
    font-weight: bold;
    min-width: 40px;
    text-align: right;
}

.pagination-separator {
    font-size: 1.5rem;
    margin: 0 5px;
}

.pagination-total {
    font-size: 1.2rem;
    opacity: 0.6;
    min-width: 30px;
}

/* Animations */
@keyframes slideInFromRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*--------- Portfolio Approach CSS ---------*/

.portfolio_approach_wrapper {
    display: flex;
    align-items: center;
    gap:100px;
    justify-content: center;
}
.portfolio_ap_heading h2 {
    padding-top: 15px;
    padding-bottom: 50px;
}
.portfolio_app_inner_content {
    display: flex;
    gap: 20px;
    padding-bottom: 50px;
}
.portfolio_app_inner_heading h4 {
    font-weight: 700;
    padding-bottom: 16px;
}
.portfolio_app_inner_subheading h4 {
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: lowercase;
    width: 100%;
    max-width: 360px;
}
.portfolio_approach_wrapper .portfolio_app_content {
    width: 50%;
}
.portfolio_image img {
    width: 100%;
}
.mobile-approach .portfolio_ap_heading {
    display: none;
}

/*--------- End Portfolio Approach CSS ---------*/

/*--------- faq-section ---------*/

.faq-section-wrapper {
    background-image: url(img/faq-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 80px 0 144px 0;
}
.faq-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 42px;
}
.faq-heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.faq-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 952px;
}
.faq-items-content {
    padding: 34px;
    background-color: #ffffff;
    gap: 70px;
    width: 100%;
    transition:0.5s;
    cursor: pointer;
}
.faq-items-content h4 {
    color: #000000;
    font-weight: 700;
}
.faq-items-content p {
    margin-top: 28px;
    color: #000000;
    width: 100%;
    max-width: 740px;
    font-size: 18px;
}
.faq-heading-icon {
    display: inline-block;
}
.faq-items-content-paragraph{
    display: none;
}
.faq-items-content-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-items-content-subheading p {
    display: none;
}
.active .faq-items-content-subheading p {
    display: block;
}
.faq-heading-icon img, .faq-items-content.active {
  transition: 0.5s ease;
}
.faq-items-content.active .faq-heading-icon img {
  transform: rotate(45deg); 
}
/*----------testimonials section----------*/

.testimonials-section {
    position: relative;
    overflow: hidden;
    padding-bottom: 300px;
}
.testimonal-header {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.testimonial-card {
    display: flex;
    background-image: url('img/testimonials-background.svg');
    color: #000;
    padding: 40px 55px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 355px;
    flex-direction: column;
    justify-content: center;
}

.profile-image {
    width: 60px;
    height: 60px;
    background: #f0f0f0;
    border: 2px solid #333;
    border-radius: 4px;
    margin-bottom: 20px;
}
.profile-rate {
    display: flex;
    align-items: flex-end;
    gap: 30px;
}

/* Rating Stars */
.rating {
    margin-bottom: 20px;
    font-size: 2.7rem;
    color: #FFA500;
    letter-spacing: 2px;
}

/* Testimonial Text */
.testimonial-text {
    font-size: 18px;
    line-height: 1.7;
    color: #000;
    margin-bottom: 25px;
    min-height: 120px;
}

/* Client Name */
.client-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-transform: uppercase;
    color: #000;
}

/* Client Position */
.client-position {
    font-size: 18px;
    color: #000;
    font-weight: 400;
}


/* Override all Splide default styles */
#testimonials-carousel .splide__arrows,
#testimonials-carousel .splide__arrow {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

/* Show on hover */
#testimonials-carousel:hover .splide__arrows,
#testimonials-carousel:hover .splide__arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Keep visible while hovering arrows themselves */
#testimonials-carousel .splide__arrows:hover,
#testimonials-carousel .splide__arrows:hover .splide__arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#testimonials-carousel .splide__arrow.splide__arrow--prev {
    left: 1.5% !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}

#testimonials-carousel .splide__arrow.splide__arrow--next {
    right: 1.5% !important;
    top: 40% !important;
}
#testimonials-carousel .splide__arrow:hover svg {
    fill: #000 !important;
}
#testimonials-carousel .splide__arrow {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid #000 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 999 !important;
    padding: 8px !important;
}
#testimonials-carousel .splide__arrow:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.ufo-icon {
    width: 120px;
    height: auto;
}

/* Wave */
.wave-container {    
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    z-index: 3;
}

.wave {
    width: 100%;
    height: 60px;
    display: block;
}

.star,
.ufo-container {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Position decorative elements */
.star {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

.star-1 {
    top: 50px;
    left: 150px;
}

.star-2 {
    top: 30px;
    right: 200px;
}

.star-3 {
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
}
.ufo-container {
    position: absolute;
    bottom: -24px;
    right: 20%;
    z-index: 10;
    pointer-events: none;
}
/* Optional: Add gentle floating animation when mouse is not moving */
@keyframes gentle-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.star img,
.ufo-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Add floating to UFO when idle */
.ufo-container img {
    animation: gentle-float 4s ease-in-out infinite;
}

/*-------------Footer--------------------*/
/* TOP CARD */
.footer-top-card {
   border: 1px solid #fff;
   border-radius: 12px;
   padding: 72px 50px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   position: relative;
   background: #11111100;
}

/* ── Animated Dots ── */
.dots-track {
   position: absolute;
   top: -8px;
   left: 24px;
   display: flex;
   gap: 8px;
   z-index: 10;
}

.dots-track img {
 /* REPLACE: img/dots.svg */
   width: auto;
   height: 16px;
   transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Individual dot spans for animation */
.dot {
   width: 13px;
   height: 13px;
   border-radius: 50%;
   transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   display: inline-block;
}

.dot-1 {
   background: #00e676; transition-delay: 0s;
}
.dot-2 {
   background: #2979ff; transition-delay: 0.08s;
}
.dot-3 {
   background: #ff6d00; transition-delay: 0.16s;
}
.dot-4 {
   background: #f50057; transition-delay: 0.24s;
}

/* Slide right when footer enters view */
.footer-section.in-view .dot-1 {
   transform: translateX(35px); 
}
.footer-section.in-view .dot-2 {
   transform: translateX(50px);
}
.footer-section.in-view .dot-3 {
   transform: translateX(65px);
}
.footer-section.in-view .dot-4 {
   transform: translateX(80px);
}

 /* ── LEFT: Brand ── */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 54px;
}
.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo img {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.8rem;
    color: #bbb;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #bbb;
}

.contact-item a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
    transition: 0.3s;
}
.contact-item a:hover {
   color: #fff;
}

/* ── RIGHT: Reels ── */
.reels-label {
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 6px;
}

.reels-title {
   letter-spacing: 2px;
   margin-bottom: 18px;
   text-transform: uppercase;
}

.reels-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}

.reel-thumb {
   aspect-ratio: 1/1;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   background: #1a1a1a;
   border: 1px solid #2a2a2a;
   display: block;
   text-decoration: none;
}

.reel-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
   display: block;
}
/* Instagram gradient + icon overlay on hover */
.reel-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: linear-gradient(
        45deg,
        rgba(253, 244, 151, 0.85) 0%,
        rgba(253, 89, 73,  0.85) 30%,
        rgba(214, 36, 159, 0.85) 60%,
        rgba(40,  90, 235, 0.85) 100%
    );
    border-radius: 8px;
}

/* Instagram SVG icon */
.reel-overlay svg {
    width: 36px;
    height: 36px;
    fill: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.reel-overlay span {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
}

/* FIXED: Show overlay on hover */
.reel-thumb:hover img {
    transform: scale(1.08);
}

.reel-thumb:hover .reel-overlay { 
/* ← CHANGED from ::after to .reel-overlay */
    opacity: 1;
}

/* Instagram placeholder */
.reel-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #444;
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.reel-placeholder svg {
    fill: #444;
}

/* nav*/
.footer-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 82px 60px 40px;
}
.footer-nav a {
    font-size: 48px;
    letter-spacing: 3px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    transition: color 0.3s;
    font-weight: 400;
    font-family: 'Tanker-Regular';
    transition: 0.5s
}
.footer-nav a::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background: #fff;
   transition: width 0.3s ease;
}

.footer-nav a:hover {
    color: #fff;
}
.footer-nav a:hover::after {
   width: 100%;
}

/* SOCIAL ALIENS */
.footer-aliens {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   gap: 60px;
   padding: 60px 60px 0;
}

.alien-link {
  display: block;
  text-decoration: none;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Scale up on hover */
.alien-link:hover {
   transform: scale(1.1) translateY(-12px);
}
 /* White alien - shown by default */
.alien-white {
    width: 242px;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}
/* Colorful alien - hidden by default, shown on hover */
.alien-color {
  width: 242px;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* On hover: hide white, show colorful */
.alien-link:hover .alien-white {
   opacity: 0;
}
.alien-link:hover .alien-color {
   opacity: 1;
}

/* Ground line */
.footer-ground {
    height: 46px;
    border-radius: 100%;
    background: #12121299;
    margin-top: -24px;
}
.copywrite {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 75px;
}
#footer {
    padding-bottom: 45px;
}
/*--------inner-banner------------*/
.inner-banner {
    background: url('img/banner-bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    padding: 150px 0 200px;
}
.banner-content {
    display: flex;
    align-items: center;
    position: relative;
}
.banner-content h1 {
    display: flex;
    flex-direction: column;
    color: #000;
}
.banner-content h1 strong {
    color: #fff;
    font-weight: 400;
}
.banner-content p {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 10px;
    line-height: 1;
}
.banner-icon-1 {
    position: absolute;
    left: 0;
    top: 0;
}
.banner-icon-2 {
    position: absolute;
    top: -36%;
    right: 22%;
}
.banner-icon-3 {
    position: absolute;
    right: 0;
    bottom: -45%;
}

/*-----------------------portfolio-page--------------------------------------*/
/*---------folio-sec--------------*/
.folio-flex {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.folio-heading {
    display: flex;
    gap: 16px;
    flex-direction: column;
}
.folio-projects {
    display: flex;
    flex-direction: column;
    gap: 90px;
}
.folio-flexbox {
    display: flex;
    flex-direction: row;
    gap: 80px;
}
.folio-box-big {
    width: 60%;
}
.folio-box-short {
    width: 40%;
}
.folio-box {
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: hidden;
    transition: 0.5s;
}
.folio-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.folio-content h3 {
    color: #C6FF00;
}
.folio-npara {
    font-weight: 700;
    text-transform: uppercase;
}
.folio-img {
    overflow: hidden;
}
/* By default, ALL portfolios are blurred */
.folio-projects .folio-box {
    filter: blur(4px) brightness(0.7);
    opacity: 0.5;
    transform: scale(0.98);
}
/* Only the first .folio-box inside the first .folio-flexbox is active */
.folio-projects .folio-flexbox:first-child .folio-box:first-child {
    filter: blur(0) brightness(1);
    opacity: 1;
    transform: scale(1.02);
}

.folio-projects .folio-flexbox:first-child .folio-box:first-child .folio-img img {
    transform: scale(1.08);
}
/* When hovering container, ALL items blur first */
.folio-projects:hover .folio-box {
    filter: blur(4px) brightness(0.7);
    opacity: 0.5;
    transform: scale(0.98);
}

/* Override first-child active state during hover */
.folio-projects:hover .folio-flexbox:first-child .folio-box:first-child {
    filter: blur(4px) brightness(0.7);
    opacity: 0.5;
    transform: scale(0.98);
}

/* THEN make the hovered item active (higher specificity) */
.folio-projects .folio-box:hover {
    filter: blur(0) brightness(1) !important;
    opacity: 1 !important;
    transform: scale(1.02) !important;
}

.folio-box:hover .folio-img img {
    transform: scale(1.08);
}
/*-----------------------portfolio-page-end----------------------------*/

/*--------------about-page------------------------------*/
.about-banner {
    background: url('img/about-img-new.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 200px 0;
}
.about-banner .banner-content p {
    color: #fff !important;
    margin-top: 10px;
}
.about-banner .banner-content p span {
    color: #000 !important;
    margin-top: 15px;
}
.choose-flex {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.choose-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.choose-content {
    display: flex;
    gap: 60px;
}
.choose-cards {
    width: 33.3%;
    padding: 32px;
}
.choose-card1 {
    background: #704EE7;
}
.choose-card2 {
    background: #FF82DA;
}
.choose-card3 {
    background: #FFC451;
}
.choose-cards {
    width: 33.3%;
    padding: 32px 62px 120px 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: relative;
}
.choose-cards p {
    font-size: 18px;
}
.choose-cards img {
    height: 168px;
    width: 220px;
    position: absolute;
    bottom: -47px;
    right: -20px;
}
.choose-card3 img {
    right: -46px;
}
.our-core {
    background-image: url('img/about-core.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.core-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 65px;
}
.core-img {
    width: 60%;
}
.core-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 40%;
}
.core-heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.core-cards-flex {
    display: flex;
    flex-direction: column;
    gap: 42px;
}
.core-card {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
}
.core-card-cnt {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.core-card-cnt h4 {
    font-weight: 700;
}
.core-card-cnt p {
    width: 60%;
}
.team-flex {
    display: flex;
    flex-direction: column;
    gap: 70px;
    align-items: center;
}
.team-heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.team-cnt {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 3fr);
    gap: 60px;
}
.team-cnt-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.team-cnt-card-head {
    display: flex;
    flex-direction: column;
    gap: 17px;
}
.team-cnt-card-head h4 {
    font-weight: 700;
}
.we-are-flex {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.we-are-head {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.are-head-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.are-head-para {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 85%;
}
.we-are-cnt {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    gap: 48px 0;
}
.are-cnt-card {
    border: 1px solid #fff;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.are-cnt-card p {
    width: 87%;
}
.tech-alien {
    background-image: url('img/alien-tech-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.tech-heading {
    width: 40%;
}
.tech-imgs {
    width: 60%;
    position: relative;
}
.tech-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.tech-heading h1 strong {
    font-family: 'Tanker-Regular';
    color: #000;
    font-weight: 400;
}
.tech-heading h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tech-drop {
    position: absolute;
    bottom: 40px;
    left: -40px;
}
.tech-reverse-drop {
    position: absolute;
    right: -28px;
    top: 40px;
}
.team-cnt-card-img img, .tech-main-img, .core-img img {
    width: 100%;
}
.who-we-are {
    padding-top: 0 !important;
}


/*--------------about-page-end--------------------------*/

/*--------contact-us--------------*/
.contact-banner {
    padding: 200px 0 !important;
}
.contact-banner .banner-icon-1 {
    top: -45%;
}
.contact-banner .banner-icon-2 {
    right: 14%;
    top: -160%;
}
.contact-banner .banner-icon-3 {
    bottom: -140%;
}
.contact-banner .banner-content h1 {
    color: #fff !important;
}
.cnt-form {
    background-color: #704EE7;
}
.form-heading-flex {
    display: flex;
    justify-content: space-between;
}

/*cnt-form*/

.card {
      width: 100%;
      animation: fadeUp 0.6s ease both;
    }

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

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.4rem 3rem;
    }

    .form-grid .field {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      animation: fadeUp 0.6s ease both;
    }

    .field:nth-child(1) { animation-delay: 0.05s; }
    .field:nth-child(2) { animation-delay: 0.10s; }
    .field:nth-child(3) { animation-delay: 0.15s; }
    .field:nth-child(4) { animation-delay: 0.20s; }
    .field:nth-child(5) { animation-delay: 0.25s; }

    .field.full { grid-column: 1 / -1; }

    .form-grid label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.95rem;
      letter-spacing: 0.12em;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
    }

    .form-grid label svg {
      width: 16px;
      height: 16px;
      opacity: 0.7;
      flex-shrink: 0;
    }

    .form-grid input, .form-grid textarea {
      background: #0000;
      border: none;
      font-size: 0.88rem;
      font-weight: 300;
      letter-spacing: 0.04em;
      padding: 0.55rem 0;
      outline: none;
      width: 100%;
      transition: border-color 0.25s ease;
      color: #fff;
      border-bottom: 1px solid #fff;
    }

    .form-grid input::placeholder, .form-grid textarea::placeholder {
      color: #fff;
      font-style: normal;
      font-size: 0.82rem;
    }

    .form-grid input:focus, .form-grid textarea:focus {
      border-bottom-color: #fff;
    }

    .form-grid textarea {
      resize: none;
      height: 80px;
      line-height: 1.7;
    }

    .line {
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 1.5px;
      background: #fff;
      transition: width 0.35s ease;
      pointer-events: none;
    }

    input:focus ~ .line,
    textarea:focus ~ .line {
        width: 100%;
    }

    .error-msg {
      font-size: 0.73rem;
      color: red;
      letter-spacing: 0.03em;
      min-height: 1rem;
      font-weight: 500;
    }

    .btn-row {
      margin-top: 2.8rem;
      animation: fadeUp 0.6s 0.35s ease both;
    }

    #submitBtn {
      background: #000;
      color: #fff;
      border: none;
      border-radius: 3px;
      padding: 1.75rem 2.4rem;
      font-size: 1rem;
      letter-spacing: 0.18em;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .form-grid .btn:hover {
      background: #000;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }

    .form-grid .btn:active {
        transform: translateY(0);
    }

    .form-grid .btn .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      transform: scale(0);
      animation: ripple 0.5s linear;
      pointer-events: none;
    }

    @keyframes ripple {
      to { transform: scale(4); opacity: 0; }
    }

    /* Success overlay */
    .success-banner {
      display: none;
      align-items: center;
      gap: 0.7rem;
      margin-top: 1.4rem;
      color: #fff;
      font-size: 1.05rem;
      letter-spacing: 0.1em;
      animation: fadeUp 0.4s ease both;
    }

    .success-banner svg {
        width: 20px;
        height: 20px;
    }
    .success-banner.show {
        display: flex;
    }

    /* Collected data preview */
    .data-preview {
      display: none;
      margin-top: 2rem;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      padding: 1.4rem 1.8rem;
      animation: fadeUp 0.4s 0.1s ease both;
    }

    .data-preview.show {
        display: block;
    }

    .data-preview h3 {
      letter-spacing: 0.12em;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.55);
      margin-bottom: 1rem;
    }

    .data-row {
      display: flex;
      gap: 0.6rem;
      margin-bottom: 0.55rem;
      font-size: 0.85rem;
      line-height: 1.5;
    }

    .data-key {
      color: rgba(255,255,255,0.45);
      font-weight: 600;
      letter-spacing: 0.05em;
      min-width: 110px;
      font-size: 0.78rem;
      text-transform: uppercase;
    }

    .data-val {
       color: #fff;
       word-break: break-word;
    }
    
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px #0000 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #0000;
  transition: background-color 5000s ease-in-out 0s;
}

    

/*cnt-form-end*/

.info-flex {
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.info-heading {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.location-info-flex {
    display: flex;
    gap: 20px;
    flex-direction: row;
}
.info-card-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 33.3%;
}
.info-card-flex h4 {
    font-weight: 600;
}
.email-location {
    color: #C6FF00;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
}
.info-icon img {
    width: 50px;
}

/*--------location-map---------------*/
/* ── Outer card ── */
    .map-card {
      background: #fff;
      overflow: hidden;
      animation: rise 0.6s cubic-bezier(.22,.68,0,1.2) both;
      padding: 40px 50px 50px;
    }
 
    @keyframes rise {
      from { opacity: 0; transform: translateY(32px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)   scale(1); }
    }
    
    /*map-heading*/
    .map-head h4 {
       color: #000;
       font-weight: 600;
    }
    .map-head {
      margin-bottom: 30px;
    }
     
    /* ── Map wrapper ── */
    .map-wrapper {
    position: relative;
    width: 100%;
    height: 455px;
    overflow: hidden;
    background: #e5e3df;
}
 
    .map-wrapper iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      filter: contrast(1.02) saturate(0.95);
      transition: filter 0.3s;
    }
 
    .map-wrapper:hover iframe { filter: contrast(1.05) saturate(1.05); }
 
    /* ── Loading overlay ── */
    .map-loader {
      position: absolute;
      inset: 0;
      background: #e8e6e2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.9rem;
      z-index: 10;
      transition: opacity 0.5s ease;
    }
 
    .map-loader.hidden { opacity: 0; pointer-events: none; }
 
    .loader-pin {
      width: 36px; height: 36px;
      position: relative;
      animation: bounce 1s ease-in-out infinite alternate;
    }
 
    @keyframes bounce {
      from { transform: translateY(0); }
      to   { transform: translateY(-10px); }
    }
 
    .loader-pin::before {
      content: '';
      position: absolute;
      inset: 0;
      background: red;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
    }
 
    .loader-pin::after {
      content: '';
      position: absolute;
      width: 12px; height: 12px;
      background: #fff;
      border-radius: 50%;
      top: 8px; left: 8px;
    }
 
    .loader-shadow {
      width: 20px; height: 6px;
      background: rgba(0,0,0,0.2);
      border-radius: 50%;
      animation: shadow 1s ease-in-out infinite alternate;
    }
 
    @keyframes shadow {
      from { transform: scaleX(1); opacity: 0.3; }
      to   { transform: scaleX(0.6); opacity: 0.15; }
    }
 
    .loader-text {
      font-size: 0.78rem;
      font-weight: 500;
      color: #888;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

/*--------contact-us-end-------------*/

/*-------services-page-------------*/

.shopify-services {
            padding: 50px 20px;
            /* background: #1B1B1B; */
        }

        .wordpress-services {
            padding: 50px 20px;
            background: #1B1B1B;
           
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .services-header {
            margin-bottom: 35px;
        }

        .main-title {
            /*font-family: Tanker;*/
            /*font-size: 48px;*/
            font-weight: 400;
            color: #C6FF00;
            letter-spacing: -0.6px;
            margin-bottom: 12px;
            line-height: 52px;
        }

        .main-description {
            font-size: 18px;
            line-height: 25px;
            color: rgba(255, 255, 255, 0.7);
            /* background: #FFFFFF; */

            max-width: 800px;
            letter-spacing: 0.6px;
            font-weight: 400;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
    .service-card {
    background: #191919;
    border: 1px solid #191919;
    border-radius: 8px;
    padding: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /*min-height: 200px;*/
}


.wordpress-services .service-card {
    background: #000;
}

        .service-card:hover {
            border-color: #C6FF00;
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(191, 255, 0, 0.15);
        }

        .service-title {
            /*font-size: 18px;*/
            font-weight: 700;
            color: #FFFFFF;
            line-height: 100%;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: -0.2px;
        }


        .service-desc {
            /*font-size: 18px;*/
            line-height: 25px;
            color: #FFFFFF;
            font-weight: 400;
            letter-spacing: 0.6px;
            max-width: 334px;


        }


        .approach-section {
            padding: 100px 20px;
            background: #000;
        }

        .approach-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }


        .banners-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 100px;
            padding: 40px 0;


        }

        .banner {
            position: relative;
            display: block;
            width: 650px;
            max-width: 100%;
            /* padding: 35px 50px; */
            margin: 0 auto;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            transition: all .3s ease;
            overflow: hidden;
        }


        .banner:hover {
            transform: scale(1.03);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
        }

        .banner-pink {
            background: linear-gradient(135deg, #ff6b9d, #ff1f6e);
            transform: rotate(-10deg);
            z-index: 3;
        }

        .banner-purple {
            background: linear-gradient(135deg, #7b68ee, #4b3fd9);
            transform: rotate(3deg);
            margin-top: -60px;
            z-index: 2;
        }

        .banner-yellow {
            background: linear-gradient(135deg, #ffd700, #ffa500);
            transform: rotate(-7deg);
            margin-top: -60px;
            z-index: 1;
        }



        .banner-text {
            font-size: 28px;
            font-weight: 900;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-style: italic;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .banner-image {
            position: absolute; 
          
            width: 100%;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.35;
            display: none;

        }

        .banner-image img {
            width: 100px;
        
        }

       
        .approach-content {
            padding: 0;
        }

        .approach-header {
            margin-bottom: 40px;

        }
        

        .approach-label {
           
            font-size: 18px;
            /*font-weight: 500;*/
            color: #FFFFFF;
            text-transform: uppercase;
            letter-spacing: -0.2px;
            margin-bottom: 8px;
            line-height: 100%;
        }

        .approach-title {
          
            font-size: 48px;
            /*font-weight: 400;*/
            color: #fff;
            text-transform: uppercase;
            letter-spacing: -0.6px;
            line-height: 52px;

        }

        .approach-steps {
            display: flex;
            flex-direction: column;
            gap: 35px;

        }

        .approach-step {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            padding: 15px;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        

        .approach-step:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateX(8px);
        }

        .step-icon {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            background: #fff;
            /*border-radius: 5px;*/
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: all 0.3s ease;
 
        }


        .approach-step:hover .step-icon {
            transform: scale(1.08) rotate(3deg);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
        }

        .step-icon img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        .step-content {
            flex: 1;
        }

        .step-title {
            /*font-family: Metropolis;*/
            font-size: 18px;
            font-weight: 700;
            color: #FFFFFF;
            text-transform: uppercase;
            margin-bottom: 15px;
            letter-spacing: -0.2px;
            line-height: 100%;
        }


        .step-desc {
            /*font-size: 18px;*/
            line-height: 25px;
            color: #FFFFFF;
            /*font-family: Metropolis;*/
            font-weight: 400;
            letter-spacing: 0.6px;
            max-width: 306px;
        }

        @media (max-width: 1300px) {
        .nehish-image-gallery .gallery-grid.item-cards {
            gap: 40px;
            margin: 40px 0;
        }
        }

        @media (max-width: 1024px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .main-title {
                font-size: 40px;
            }

            .approach-grid {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .banner {
                max-width: 100%;

            }


            .banner-text {
                font-size: 24px;
            }

            .approach-title {
                font-size: 38px;
            }
        }
       
           

        @media (max-width: 768px) {
        .nehish-text .client-work td.service-title {
            font-size: 12px;
        }
        .nehish-image-gallery .gallery-grid.item-cards {
            gap: 20px;
            margin: 20px 0;
        }
            .shopify-services {
                padding: 35px 15px;
            }

            .banner-pink {
                transform: rotate(-6deg);
                /* display: none; */
            }

            .banner-purple {
                transform: rotate(2deg);
                margin-top: -40px;
            }

            .banner-yellow {
                transform: rotate(-4deg);
                margin-top: -40px;
            }

            .services-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .services-header {
                margin-bottom: 25px;
            }

            .main-title {
                font-size: 32px;
                margin-bottom: 10px;
            }

            .main-description {
                font-size: 14px;
            }

            /*.service-card {*/
            /*    padding: 18px;*/
            /*}*/

            .service-title {
                font-size: 18px;
                margin-bottom: 6px;
            }

          

           

            .banners-column {
                padding: 30px 0;
                gap: 100px;
            }

            .banner {
                padding: 50px 35px;
            }

            .banner-purple {
                margin-top: -50px;
            }


            .banner-yellow {
                margin-top: -50px;
            }

            .banner-text {
                font-size: 20px;
            }

            .approach-header {
                margin-bottom: 30px;
            }

            .approach-title {
                font-size: 30px;
            }

            .approach-steps {
                gap: 28px;
            }

            .approach-step {
                gap: 15px;
                padding: 12px;
            }
           

            .step-icon {
                width: 48px;
                height: 48px;
            }

            .step-icon img {
                width: 24px;
                height: 24px;
            }

            .step-title {
                font-size: 15px;
            }
           
            /*.step-desc {*/
            /*    font-size: 13px;*/
            /*}*/
        }

        @media (max-width: 480px) {

            .shopify-services {
                padding: 25px 12px;
            }

            .banners-column {
                gap: 40px;
            }

            .banner {
                transform: rotate(0deg) !important;
                margin-top: 0 !important;
            }

        }

        .main-title {
            font-size: 26px;
        }

        /*.service-card {*/
        /*    padding: 16px;*/
        /*}*/

        .banner {
            padding: 50px 30px;
        }

        .banner-text {
            font-size: 40px;
            letter-spacing: 1px;
        
        }

        .banner-image img {
            width: 80px;
        }

        .approach-title {
            font-size: 26px;
        }
      
        .step-title {
            font-size: 14px;
        }
        
        
/*----------Responisve----------*/
@media (max-width:1440px) {
.page-width {
    max-width: 1280px;
}
.image-sub-div-one {
    position: absolute;
    top: -12%;
    left: -6%;
}
.comp-btn {
    width: 17%;
    text-align: end;
}
.comp-headings {
    width: 83%;
}
.comp-icon {
    position: absolute;
    top: 26%;
    left: 2%;
}
/*-------------testimonial--------------*/
.ufo-container {
    bottom: -36px;
    right: 5%;
}
.wave-container {
    position: absolute;
    bottom: -33px;
    left: -118px;
    width: 100%;
    z-index: 3;
}
.star-1 {
    top: 5%;
    left: 31%;
}
.star-3 {
    top: 44%;
    left: 0%;
    animation-delay: 2s;
}
.testimonial-card {
    min-height: 330px;
}
}
@media (max-width:1366px) {
.page-width {
    max-width: 1280px;
}
.comp-btn {
    width: 18%;
}
.comp-headings {
    width: 82%;
}
.sec-padding {
    padding: 80px 20px;
}
.image-sub-div-one {
    top: -18%;
    left: -4.5%;
}
.image-sub-div-two {
    right: -28%;
}
.comp-icon {
    top: 18%;
    left: 1%;
}
/*-----------testimonial------------*/
.testimonials-section {
    padding-bottom: 250px;
}
.ufo-container {
    bottom: -61px;
    right: 9%;
}
.star-1 {
    top: 4%;
    left: 31%;
}
.star-3 {
    top: 77%;
    left: 4%;
    animation-delay: 2s;
}
.star-2 {
    top: 8%;
    right: 6%;
}
.professionals {
    padding-bottom: 338px !important;
}
.complete-solutions {
    padding-bottom: 120px !important;
}
/*-----------about-us---------------*/
.tech-reverse-drop {
    right: -39px;
}
.about-banner {
    padding: 150px 0;
}
}
@media (max-width:1280px) {
.page-width {
    max-width: 1240px;
} 
.image-sub-div-one {
    top: -24%;
    left: -2.5%;
}
.main-section-image-div-one img {
    transform: translate(30%, -4%);
}
.main-section-image-div-three img {
    transform: translate(-6%, 0);
}
.image-sub-div-one img {
    width: 85%;
}
.comp-icon {
    top: 33%;
    left: 2%;
}
/*----------testimonial----------*/
.ufo-container {
    bottom: -82px;
    right: 3%;
}
/*------about-us------------*/
.core-card-cnt p {
    width: 70%;
}
}
@media (max-width: 1240px) {
.page-width {
    max-width: 1200px;
} 
.comp-btn {
    width: 20%;
}
.comp-headings {
    width: 80%;
}
h3 {
    font-size: 30px;
}
.image-sub-div-two {
    right: -31%;
}
.comp-icon {
    top: 34%;
}
/*------------testimonial--------------*/
.testimonial-card {
    min-height: 311px;
} 
#testimonials-carousel .splide__arrow.splide__arrow--prev {
    left: 1% !important;
}
#testimonials-carousel .splide__arrow.splide__arrow--next {
    right: 1% !important;
}
}
@media (max-width:1200px) {
   .page-width {
    max-width: 1160px;
}
}
@media (max-width:1160px) {
.page-width {
    max-width: 1120px;
}
.comp-btn {
    width: 21%;
}
.comp-headings {
    width: 79%;
}
h3 {
    font-size: 27px;
}
.image-sub-div-two {
    right: -36%;
}
.image-sub-div-two img {
    width: 88%;
}
.image-sub-div-one img {
    width: 80%;
}
.content-sub-div-one {
    left: -16%;
    bottom: 33%;
}
.main-section-image-div-one img {
    transform: translate(20%, 9%);
}

/*------------testimonial--------------*/
.testimonial-card {
    min-height: 280px;
}
.testimonial-text {
    font-size: 15px;
    line-height: 1.7;
    color: #000;
    margin-bottom: 25px;
    min-height: 120px;
}
}
@media (max-width:1120px) {
    .page-width {
    max-width: 1080px;
}
}
@media (max-width:1080px) {
    .page-width {
    max-width: 1040px;
}
.alien-white, .alien-color {
    width: 210px;
}
.footer-nav a {
    font-size: 40px;
}
.footer-nav {
    padding: 82px 45px 40px;
}
.second-section-wrapper {
    display: flex;
    gap: 110px;
    flex-direction: row;
}
.comp-btn {
    width: 23%;
}
.comp-headings {
    width: 77%;
}
}
@media (max-width:1040px) {
    .page-width {
    max-width: 1024px;
}
.second-section-wrapper {
    gap: 97px;
}
.proj-head-main h2 {
    width: 81%;
}
.footer-aliens {
    gap: 42px;
}
}
@media (max-width:1024px) {
h1 {
    font-size: 75px;
}
h2 {
    font-size: 40px;
}
.menu-col-right {
    display: none;
}
.menu-col-left {
    width: 100%;
    padding: 0 2em;
}
.main-menu li {
    font-size: 30px;
}
header {
    padding: 0 20px;
}
.cross_icon {
    margin-right: 10px;
}
.menu-drawer-poppup {
    top: 0;
    left: 0;
}
.menu-col-left {
    width: 100%;
    padding: 2em 2em;
    margin: 0 !important;
}
.main-menu li a {
    font-size: 42px;
}
.splide__arrow--prev {
    left: 46% !important;
}
.splide__arrow--next {
    right: 46% !important;
}
.comp-headings {
    width: 72%;
}
.comp-btn {
    width: 27%;
}
.sec-padding {
    padding: 60px 20px;
}
.comp-headings h2 {
    width: 88%;
}
.forth-section-wrapper-div-one {
    padding: 45px 0;
}
.comp-headings {
    width: 72%;
}
.main-section-image-div-one img {
    transform: translate(11%, 11%);
    width: 80%;
}
.main-section-image-div-three img {
    transform: translate(30%, 0);
    width: 50%;
}
.image-sub-div-two {
    right: -51%;
}
.image-sub-div-one {
    top: -14%;
    left: -6.5%;
}
.image-sub-div-one img {
    width: 76%;
}
.second-section-wrapper {
    display: flex;
    gap: 54px;
    flex-direction: row;
}
.star-1 {
    top: 29px;
    left: 337px;
}
.star-2 {
  top: 20px;
  right: 50px;
}
.star-3 {
  left: 20px;
}
.portfolio_approach_wrapper .portfolio_app_content {
    width: 69%;
}
/*--------portfolio-----------*/
.pagination {
    bottom: 20px;
}
.projects-flex .carousel-content {
    height: 47vh;
}
.projects-flex .carousel-container {
    height: 62vh;
}
/*--------faq---------*/
.faq-items {
    width: 90%
}
/*--------testimonal-----------*/
.wave-container {
    bottom: -65px;
}
.ufo-container {
    bottom: -83px;
    right: 21%;
}
.testimonials-section {
    padding-bottom: 250px !important;
}
.testimonial-card {
    min-height: 286px;
    padding: 21px 29px;
}
.testimonial-text {
    min-height: 120px;
}
.profile-image {
    margin-bottom: 12px;
}
.rating {
    margin-bottom: 12px;
}
/*-------footer---------*/
.footer-top-card {
   grid-template-columns: 1fr;
   margin: 20px 20px 0;
   padding: 30px;
}
.footer-nav {
     padding: 30px 20px; flex-wrap: wrap; gap: 16px;
}
.footer-aliens {
   gap: 30px; padding: 30px 20px 0;
}
.alien-white, .alien-color {
    width: 195px;
}
.footer-brand {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.footer-nav a {
    font-size: 35px;
}
/*--------inner-banner-------------*/
.banner-icon-1 {
    left: -2%;
}
.banner-icon-2 {
    right: 11%;
}
.banner-icon-3 {
    right: 3%;
}
/*--------folio-sec--------------*/
.folio-flexbox {
    display: flex;
    flex-direction: row;
    gap: 65px;
}
/*-------about-us-----------*/
.tech-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.tech-reverse-drop {
    right: -29px;
}
.tech-drop {
    left: -23px;
}
.choose-content {
    flex-wrap: wrap;
}
.about-banner {
    padding: 120px 0 ;
}
.are-cnt-card {
    padding: 28px;
    gap: 10px;
}
.core-img {
    width: 50%;
}
.core-content {
    width: 50%;
    gap: 28px;
}
.core-card-cnt p {
    width: 80%;
}
.choose-cards {
    width: 37.3%;
}
.tech-heading {
    width: 100%;
}
.tech-imgs {
    width: 90%;
}
.are-cnt-card p {
    width: 100%;
}
.core-heading, .team-heading, .are-head-main {
    gap: 12px;
}
.core-card-cnt, .team-cnt-card-head {
    gap: 13px;
}
.team-cnt, .team-flex {
    gap: 40px;
}
.are-head-para {
    width: 90%;
}
/*-----contact-us----------*/
.form-heading-flex img {
    width: 10%;
}
.contact-banner {
    padding: 150px 0 !important;
}
.float-icon {
    width: 82%;
}
.map-card {
    padding: 40px 40px 40px;
}
}
@media (max-width: 886px) {
h2 {
    font-size: 36px;
}
.comp-headings {
    gap: 20px;
}
.comp-headings {
    width: 72%;
}
.comp-btn {
    width: 28%;
}
#second_section_card {
    width: 48%;
}
.second-section-wrapper {
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
}
.image-sub-div-two {
    right: -53%;
    top: 7%;
}
.image-sub-div-one {
    top: -20%;
}
.image-sub-div-one img {
    width: 70%;
}
.main-section-image-div-two img {
    width: 64%;
}
.main-section-image-div-three img {
    width: 46%;
}
.main-section-image-div-one img {
    transform: translate(38%, 11%);
    width: 70%;
}
.forth-section-wrapper-div-one {
    padding: 36px 0;
}
.comp-icon {
    top: 31%;
}
}
@media (max-width:857px) {
h2 {
   font-size: 38px;
}
h3 {
   font-size: 30px;
}
.comp-headings {
    width: 71%;
}
.comp-btn {
    width: 29%;
}
.splide__arrow--prev {
    left: 45% !important;
}
.splide__arrow--next {
    right: 45% !important;
}
.image-sub-div-two {
    right: -55%;
}
.proj-head-main h2 {
    width: 85%;
}
}
@media (max-width: 831px) {
.comp-headings {
    width: 69%;
}
.comp-btn {
    width: 30%;
}
.comp-btn a {
    gap: 14px;
}
.alien-white, .alien-color {
    width: 187px;
}
.footer-aliens {
    gap: 22px;
}
.footer-nav a {
    font-size: 30px;
}
}
@media (max-width: 800px){
.comp-headings {
    width: 68%;
}
.comp-btn {
    width: 31%;
}
.forth-section-wrapper-div-one {
    padding: 30px 0;
}
h2 {
    font-size: 35px;
}
.image-sub-div-two {
    right: -60%;
}
.comp-icon {
    top: 33%;
}
.proj-head-main h2 {
    width: 90%;
}
.proj-head-main {
    width: 67%;
}
.comp-btn {
    width: 33%;
}
.projects-flex .slide-title {
    font-size: 32px;
    margin-bottom: 27px;
}
}
@media (max-width: 777px) {
.comp-btn {
    width: 32%;
}
.comp-headings {
    width: 66%;
}
.main-section-content h1 strong {
    font-size: 98px;
}
h1 {
    font-size: 70px;
}
h2 {
    font-size: 33px !important;
}
h4 {
    font-size: 16px;
}
p {
    font-size: 16px;
}
.slide-title {
    font-size: 2rem;
}
.pagination {
    bottom: 40px;
}
.pagination-current {
    font-size: 1.5rem;
}
.pagination-separator {
    font-size: 1.2rem;
}
.pagination-total {
    font-size: 1rem;
}
.faq-heading {
    gap: 10px;
}
.second-section-wrapper {
    display: flex;
    gap: 50px 20px;
    flex-direction: row;
    flex-wrap: wrap;
}
.second-section-card-sub-div h2 {
    font-size: 48px !important;
}
.image-sub-div-two {
    right: -74%;
}
.main-section-image-div-one img {
    transform: translate(3%, 11%);
}
.image-sub-div-one {
    left: -10%;
}
/*------------marquee----------------------*/
.logo-marquee-track {
    gap: 50px;
    padding-right: 50px;
}
.logo-marquee-content {
    animation-duration: 20s;
} 
.logo-marquee img {
    height: 30px;
}
/*-------------testimonal-----------------*/
.card-inner {
   padding: 30px 25px;
}   
.section-title {
    font-size: 1.8rem;
}
.star {
    font-size: 1.5rem;
}
.star-2 {
    font-size: 2rem;
}
.ufo-container {
    bottom: -96px;
    right: 23%;
}
.ufo-icon {
    width: 80px;
}
.testimonial-text {
    font-size: 18px;
}
.testimonial-card {
    height: 375px;
    max-width: 98%;
    min-width: 84%;
    padding: 40px 57px;
}
.star-1 {
    left: 34%;
    top: 14px;
}
.testimonials-section {
    padding-bottom: 233px;
}
/*---------professionals & portfolio----------*/
.professionals {
    background: url(img/comp-web-mobile-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 150px !important;
}
.prof-grid {
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    gap: 22px 28px;
}
.proj-head-btn {
    width: 39%;
}
.proj-head-main {
    width: 74%;
}
.projects-flex .slide-title {
    font-size: 2rem;
}
.projects-flex .carousel-content {
    height: 38vh;
}
.projects-flex .carousel-container {
    height: 53vh;
}
.proj-head-main h2 {
    width: 89%;
}
.portfolio_approach_wrapper {
    display: flex;
    flex-direction: column;
}
.portfolio_approach_wrapper .portfolio_image {
    width: 100%;
    text-align: center;
}
.portfolio_app_inner_content {
    display: flex;
    justify-content: flex-start;
}
.portfolio_image img {
    width: 75%;
}
.portfolio_approach_wrapper .portfolio_app_content {
   width:100%;
}
.portfolio_app_inner_subheading h4 {
    max-width: 100%;
}

/*-------footer-------*/
.alien-white, .alien-color {
    width: 158px;
}
.footer-nav a {
    font-size: 25px;
}
.contact-item a {
    font-size: 16px;
}
/*-------inner-banner-----------*/
.banner-icon-1 img {
    width: 63%;
}
.banner-icon-3 img {
    width: 87%;
}
.banner-icon-1 {
    left: -8%;
    top: -61%;
}
.banner-icon-2 {
    top: -44%;
    right: 4%;
}
.banner-icon-3 {
    right: 1%;
    bottom: -55%;
}
/*-------folio-sec------------*/
.folio-heading {
    align-items: center;
}
.folio-flexbox {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
/*------about-us-------------*/
.choose-cards {
    width: 100%;
}
.core-flex {
    display: flex;
    flex-direction: column;
}
.core-img {
    width: 70%;
}
.core-content {
    width: 100%;
}
.we-are-cnt {
    display: grid;
    grid-template-columns: repeat(1, 3fr);
}
.tech-reverse-drop {
    right: -45px;
}
/*--------contact-us------------------*/
.location-info-flex {
    gap: 52px;
    flex-wrap: wrap;
}
.info-card-flex {
    width: 46%;
}
}
@media (max-width: 767px) {
.header__wrepp .col-right a {
    display: none;
}
.main-menu li a {
    font-size: 45px;
}
.main-section-content h1 strong {
    font-size: 94px;
}
h2 {
    font-size: 34px !important;
}
h4 {
    font-size: 17px;
}
.comp-headings {
    width: 68%;
}
.comp-btn {
    width: 31%;
}
h3 {
    font-size: 25px;
}
.comp-btn {
    display: none;
}
.mobile-on {
    width: 53%;
    margin-top: 60px;
    display: block;
}
.comp-head {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.comp-headings {
    width: 100%;
}
 .comp-btn {
    width: 60%;
}
.splide__slide h3 {
    max-width: 88%;
}
.comp-headings h2 {
    width: 89%;
}
.image-sub-div-two {
    right: -64%;
}
.image-sub-div-one img {
    width: 60%;
}
.comp-icon {
    top: 17%;
}
.image-sub-div-one {
    top: -20%;
    display: none;
}
.image-sub-div-two {
    right: -64%;
    display: none;
}
.main-section-image-div-one img {
    transform: translate(-7%, 3%);
    width: 70%;
}
.main-section-cta {
    justify-content: center;
}
/*----------professional-------------------*/
/* Grid becomes horizontal scroll container */
.prof-grid {
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-bottom: 80px;
    scrollbar-width: thin;
    scrollbar-color: #fff #FFFFFF1A;
}
/* Webkit browsers (Chrome, Safari, Edge) */
.prof-grid::-webkit-scrollbar {
    height: 6px;
}   
/* Scrollbar background/track */
.prof-grid::-webkit-scrollbar-track {
    background: #FFFFFF1A;  /* ← Your specified color */
    border-radius: 10px;
}    
/* Scrollbar thumb (the draggable part) */
.prof-grid::-webkit-scrollbar-thumb {
    background: #fff;  /* ← White scrollbar */
    border-radius: 10px;
}    
/* Hover state for thumb */
.prof-grid::-webkit-scrollbar-thumb:hover {
   background: #ffffff;
   opacity: 0.9;
}    
/* Each card */
.impact {
    flex: 0 0 290px;
    min-width: 290px;
    scroll-snap-align: start;
}

/*------------approach--------------------*/
.mobile-approach {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.mobile-approach .portfolio_ap_heading {
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
}
.portfolio_ap_heading {
    display: none;
}
.mobile-approach .portfolio_ap_heading h2 {
    padding-top: 0;
    padding-bottom: 0px;
}
.portfolio_approach_wrapper {
    gap: 50px;
}
.portfolio_app_inner_subheading h4 {
    max-width: 94%;
}
/*-------------portfolio-------------------*/
.proj-head-main {
    width: 70%;
}
.comp-btn {
    width: 30%;
}
.projects-flex, .comp-sol-flex {
    align-items: center;
}
.proj-head-btn.comp-btn.mobile-on {
    margin-top: 0;
}
/*--------------testimonal----------------*/
.splide__arrows {
    opacity: 1;
    pointer-events: auto;
}
/*---------footer----------*/
.footer-aliens {
   gap: 16px;
}
.reels-grid {
  gap: 6px;
}
}
@media (max-width: 676px) {
h1 {
    font-size: 60px;
}
.comp-icon {
    top: 27%;
    left: 44%;
    transform: rotate(180deg);
}
.proj-head-main {
    width: 64%;
}
.comp-btn {
    width: 36%;
}
.forth-section-wrapper h2 {
    text-align: center;
}
/*-----------footer----------------*/
.alien-white, .alien-color {
    width: 132px;
}
.reels-grid {
    grid-template-columns: repeat(2, 2fr);
}
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 37px;
}
.footer-nav {
    gap: 30px;
}
/*-------contact-us---------*/
.info-card-flex {
    width: 45%;
}
.form-heading-flex img {
    display: none;
}
}
@media (max-width: 567px) {
.sec-padding {
    padding: 60px 20px;
}
h2 {
    font-size: 26px !important;
    line-height: 1.3;
}
.forth-section-wrapper h2 {
    text-align: center;
}
.forth-section-wrapper-div-one {
    padding: 30px 20px;
}
.image-sub-div-two img {
    width: 52%;
}
.image-sub-div-one img {
    width: 45%;
}
.main-section-image-div-one img {
    transform: translate(-42%, 6%);
    width: 100%;
}
.main-section-image-div-three img {
    transform: translate(46%, 0);
    width: 100%;
}
.image-sub-div-two {
    display: none;
}
.main-section-image-div-two img {
    width: 100%;
}
.image-sub-div-one {
    display: none;
}
.content-sub-div-one {
    left: -10%;
    bottom: 47%;
}
.main-section-content h1 strong {
    font-size: 90px;
}
.main-section-cta {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
.splide__arrow--next{
    right: 43% !important;
}
.splide__arrow--prev {
    left: 43% !important;
}
.comp-headings h2 {
    width: 100%;
}
.comp-headings {
    gap: 10px;
    text-align: center;
}
.comp-icon {
    top: 28%;
}
.star-1 {
    left: 11%;
    top: 80%;
}
.star-2 {
    top: 78%;
}
.star.star-3 {
    display: none;
}
h4 {
    font-size: 18px;
}
.portfolio_approach {
    padding-bottom: 20px;
}
.complete-solutions {
    padding-bottom: 60px !important;
}
#second_section_card {
    width: 46%;
}
.project-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}
.proj-head-main {
    width: 100%;
}
.ufo-container {
    bottom: -105px;
    right: 15%;
}
.proj-head-main h2 {
    text-align: center;
}
.proj-head-main {
    align-items: center;
}
.faq-items-content p {
    font-size: 14px;
}
.faq-items-content h4 {
    line-height: 1.3;
    width: 87%;
}
.logo-marquee {
    margin: 15px 0;
}
.second-section-card-sub-div h2 {
    line-height: 0;
    color: #C6FF00;
    font-size: 48px !important;
}
/*-----------professional--------------*/
.prof-grid {
    padding-bottom: 30px;
}
/* Smaller cards on very small screens */
.impact {
    flex: 0 0 260px;
    min-width: 260px;
    padding: 20px;
}
.impact-icon {
    width: 50px;
    height: 50px;
} 
.impact-heading h4 {
    font-size: 1rem;
}   
.impact-heading p {
    font-size: 0.85rem;
}
/*-------------testimonial----------------*/
.testimonial-card {
    height: 436px;
    max-width: 100%;
    min-width: 77%;
    background-image: url('img/testimonial-mobile-bg.svg');
    padding: 0px 32px;
}
.testimonial-text {
    line-height: 1.5;
    margin-bottom: 20px;
}
.profile-image {
    margin-bottom: 10px;
}
.rating {
    margin-bottom: 6px;
}
.profile-image {
    width: 50px;
    height: 50px;
}
.testimonal-header {
    align-items: center;
}
.testimonials-section {
    min-height: 445px;
    padding-bottom: 200px !important;
}
/*----------portfolio-----------------*/
.projects-flex .carousel-container {
    height: 38vh;
}
.projects-flex .carousel-content {
    height: 22vh;
}
.projects-flex .project-button {
    padding: 7px 16px;
}
/*---------footer------------*/
.alien-white, .alien-color {
    width: 100px;
}
.dots-track {
    top: -13px;
}
.dot {
    width: 23px;
    height: 23px;
}
.contact-item a {
    font-size: 14px;
    font-weight: 500;
}
.reels-grid {
    grid-template-columns: repeat(4, 1fr);
}
.footer-nav {
    gap: 10px 55px;
    justify-content: flex-start;
}
.footer-aliens {
    gap: 7px;
}
/*-------about-us----------*/
.about-banner {
    padding: 70px 0;
}
.team-cnt {
    grid-template-columns: repeat(2, 5fr);
}
.are-head-para {
    width: 100%;
}
/*------contact-us----------*/
#submitBtn {
    padding: 1.3rem 2.4rem;
}
.contact-banner .banner-icon-1 {
    left: -12%;
    top: 0%;
}
.contact-banner .banner-icon-2 {
    right: 7%;
    top: -212%;
}
.contact-banner .banner-icon-3 {
    bottom: -230%;
}
.map-card {
    padding: 30px 40px 40px;
}
.map-head {
    margin-bottom: 20px;
}
}
@media (max-width: 492px) {
h1 {
    font-size: 52px;
}
.main-section-content h1 strong {
    font-size: 78px;
}
.second-section-card  p {
    font-size: 16px;
}
.second-section-card h4 {
    margin-bottom: 14px;
}
.forth-sec-flex {
    gap: 30px;
}
    .image-sub-div-two {
    right: -119%;
}
.comp-icon {
    top: 25%;
    left: 55%;
    transform: rotate(180deg);
}
.image-sub-div-two img {
    width: 42%;
}
.splide__arrow--next, .splide__arrow--prev {
    right: 40% !important;
}
.proj-head-main h2 {
    width: 100%;
}
.impact-heading p {
    width: 100%;
}
.impact-heading h4 {
    font-size: 17px;
}
.prof-flex {
    gap: 30px;
}
.prof-heading h2 {
    text-align: center;
}
/*--------------faq-----------------------*/
.faq-items-content {
    padding: 25px;
    width: 98%;
}
/*-------------testimonal-------------------*/
    .testimonials-slider {
        padding: 0 30px;
    }
    
    .card-inner {
        padding: 25px 20px;
    }
    
.testimonial-text {
    font-size: 16px;
}
    
    .client-name {
        font-size: 0.9rem;
    }
    
    .client-position {
        font-size: 0.75rem;
    }
    
    .slider-arrow {
        opacity: 1;
    }
.profile-rate {
    gap: 20px;
}
/*------contact-us-------------*/
.contact-banner {
    padding: 120px 0 !important;
}
.info-card-flex {
    width: 100%;
}
.info-flex {
    gap: 40px;
}
.banner-icon-1 img {
    width: 46%;
}
.banner-icon-3 img {
    width: 68%;
}
.float-icon {
    width: 78%;
}
.contact-banner .banner-icon-1 {
    left: -20%;
    top: 5%;
}
.contact-banner .banner-icon-2 {
    right: 1%;
    top: -210%;
}
.btn-row {
    margin-top: 0.8rem;
}
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem 3rem;
}
}
@media (max-width:440px) {
.main-section-content h1 strong {
    font-size: 56px;
}
h2 {
    font-size: 40px !important;
}
    .image-sub-div-two {
    right: -135%;
}
.image-sub-div-one {
    top: -29%;
    left: -7.5%;
}
.content-sub-div-one {
    left: -10%;
    bottom: 45%;
}
.header__wrepp .col-left img {
    width: 78%;
}
.header__wrepp .menu-drawer img {
    width: 80%;
}
.complete-solutions {
    padding-bottom: 90px;
}
.second-section-wrapper {
    gap: 50px 26px;
}
.forth-section-wrapper-div-one {
    padding: 30px 14px;
}
.comp-btn {
    width: 56%;
}
.comp-icon {
    left: 59%;
}
.comp-sol-flex {
    gap: 25px;
}
.choose-heading {
    gap: 6px;
}
.choose-cards {
    gap: 10px;
}
.choose-flex {
    gap: 30px;
}
.why-choose {
    padding-bottom: 80px !important;
}
.core-flex {
    gap: 28px;
}
.team-cnt {
    grid-template-columns: repeat(1, 9fr);
}
.team-cnt-card-head, .team-cnt-card {
    align-items: center;
}
.are-cnt-card {
    padding: 25px;
}
.tech-drop {
    left: -48px;
    bottom: -10px;
}
.tech-reverse-drop {
    right: -52px;
    top: -11px;
}
.team-cnt-card {
    gap: 20px;
}
.core-img {
    width: 100%;
}
}
@media (max-width:425px) {
.comp-headings {
    gap: 10px;
}
.splide__arrow--prev {
    left: 40% !important;
}
.splide__arrow--next {
    right: 40% !important;
}
.sec-padding {
    padding: 50px 20px;
}
.main-section-cta {
    justify-content: center;
}
.content-sub-div-one img {
    width: 80%;
}
.second-section-wrapper {
    gap: 21px;
}
.content-sub-div-one {
    bottom: 50%;
}
.header__wrepp .col-left img {
    width: 76%;
}
.complete-solutions {
    padding-bottom: 80px;
}
.logo-marquee {
    margin: 20px 0;
}
.alien-white, .alien-color {
    width: 85px;
}
.contact-item {
    gap: 10px;
}
.reels-label {
    font-size: 13px;
}
.projects-flex .carousel-content {
    height: 22vh;
}
.projects-flex .slide {
    padding-bottom: 7px;
}
.projects-flex .carousel-container {
    height: 32vh;
}
.portfolio_approach_wrapper {
    gap: 50px;
}
.footer-nav {
    gap: 0 50px;
}
.footer-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.faq-items-content p {
    font-size: 15px;
}
.faq-items-content h4 {
    font-size: 17px;
}
.impact-heading h4 {
    font-size: 16px;
}
.forth-section {
    padding: 40px 0;
}
.forth-section-wrapper-div-one {
    margin: 0 20px;
}
.testimonial-card {
    height: 410px;
}
.pagination {
    bottom: 10px;
}
.prof-grid {
    gap: 0px;
}
}
@media (max-width: 390px) {
h1 {
    font-size: 54px;
}
.main-section-content h1 strong {
    font-size: 58px;
}
.primary-button {
    padding: 13px 16px;
}
h2 {
    font-size: 36px !important;
    line-height: 45px;
}
.second-section-card p {
    font-size: 14px;
}
.comp-btn {
    width: 65%;
}
.logo-marquee img {
    height: 23px;
}
.comp-icon {
    left: 69%;
}
.footer-nav {
    gap: 0 32px;
}
.footer-aliens {
    gap: 10px;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
}
@media (max-width: 375px) {
    #second_section_card {
    width: 100%;
}
.splide__slide h3 {
    max-width: 100%;
}
.comp-btn {
    width: 86%;
}
.splide__arrow--next {
    right: 38% !important;
}
.splide__arrow--prev {
    left: 38% !important;
}
.main-section-content p {
    text-align: center;
}
.footer-nav {
    gap: 0 22px;
}
.footer-top-card {
    padding: 26px;
}
.content-sub-div-two {
    top: 7%;
}
.content-sub-div-one {
    bottom: -40%;
    left: -4%;
}
.comp-icon {
    left: 86%;
}
#second_section_card {
    width: 100%;
}
.second-section-wrapper {
    gap: 37px;
}
.main-section-image {
    display: none;
}
.choose-cards {
    padding: 26px 26px 130px 26px;
}
.core-card-cnt p {
    width: 100%;
}
}
@media (max-width:320px) {
.alien-white, .alien-color {
    width: 67px;
}
h4 {
    font-size: 18px;
    line-height: 1.3;
}
.footer-nav {
    gap: 0 44px;
}
.contact-item a {
    font-size: 12px;
    font-weight: 500;
}
.testimonials-section {
    padding-bottom: 217px !important;
}
.profile-rate {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}
.profile-image, .rating {
    margin-bottom: 0;
}
.testimonial-card {
    height: 540px;
}
.ufo-container {
    bottom: -72px;
    right: -1%;
}
.portfolio_app_inner_content {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}
.content-sub-div-one {
    bottom: -14%;
    left: 0%;
}
.content-sub-div-two {
    right: -3%;
}
.splide__slide h3 {
    max-width: 83%;
}
.core-card {
    gap: 20px;
}
}

 @media (min-width: 1025px) and (max-width:1300px){
.main_menu_bar {
    gap: 0px;
}
.main-menu li {
    font-size: 35px;
}
}

/* MOBILE ONLY */
@media (max-width: 1025px) {
.menu-drawer-container {
    flex-direction: column;
  }

  .menu-col-left {
    width: 100%;
    padding-top: 50px;
  }

  .menu-col-right {
    display: none;
  }

  .menu-back {
    display: none;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 15px;
  }

  .mega-menu {
    display: none;
  }

  /* when submenu is active */
  .menu-col-left.show-submenu .main-menu {
    display: none;
  }

  .menu-col-left.show-submenu .menu-back,
  .menu-col-left.show-submenu .mega-menu {
    display: block;
    color: #fff;
  }
  .main_menu_bar {
    justify-content: center;
    text-align: center;
}
.main-menu {
    padding-left: 0;
}
}