@font-face {
  font-family: 'Tanker-Regular';
  src: url('./Fonts/WEB/fonts/Tanker-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolies';
  src: url('./metropolis/Metropolis-Light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; 
}
@font-face {
  font-family: 'Metropolies';
  src: url('./metropolis/Metropolis-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap; 
}
 *{
    font-family: 'Metropolies';
    margin: 0;
    padding: 0;
 }
 h1 {
    font-family: 'Tanker-Regular';
    font-weight: 400;
    font-size: 82px;
    line-height: 1;
    letter-spacing: 1.2px;
    color: #FFFFFF;
}
 h2 {
    font-family: 'Tanker-Regular';
    font-weight: 400;
    font-size: 48px;
    line-height: 1.3;
    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;
}
.main_menu_bar .main-menu li { 
    padding: 10px 0px;
}
.sub-menu li, .project-button .arrow, .pagination-total, .faq-items-content p, .contact-item a, .choose-cards p, .blog-content h3, .main-description, .approach-label, .step-title {
    font-size: 18px;
}
.primary-button, .secondary-button, .footer-bottom p, .banner-content p, .form-grid input, .form-grid textarea, .form-grid input::placeholder, .form-grid textarea::placeholder, .data-preview h3, .data-row, .blog-content p, .blog-btn, .fqs-overline, .fqs-body-inner {
    font-size: 14px;
}
.projects-flex .project-button, .form-grid label, #submitBtn, .success-banner, .filter-btn, .dbls-card-title {
    font-size: 16px;
}
.pagination-current {
    font-size: 32px;
}
.pagination-separator {
    font-size: 24px;
}
.badge, .test-card, .test-card .avatar, .test-card .by, .contact-item, .reel-overlay span, .reel-placeholder, .error-msg, .data-key, .loader-text, .blog-category, .fqs-num
 {
    font-size: 12px;
 }
.main_menu_bar, .mega-menu ul li a, .header-menu ul li a, .comp-headings, .comp-headings h4, .pagination, .section-title, .contact-item a, .contact-item a:hover, .reel-overlay span, .footer-nav a, .footer-nav a:hover, .banner-content h1 strong,
.about-banner .banner-content p, .contact-banner .banner-content h1, .form-grid label, #submitBtn, .data-val, .blog-btn , .service-title, .service-desc,
.banner-text, .approach-label, .approach-title, .step-title, .step-desc, .blog-cnt span, .dbls-title, .dbls-desc, .dbls-arr, .fqs-title, .fqs-subtitle, .fqs-item.fqs-open .fqs-q, .fqs-body-inner, .sub-menu.active a, .blog-cnt-subpara ul li, .blog-cnt ul li, .success-banner {
    color: #FFFFFF !important;
}
.button, .image-description, .splide__arrow--next, .secondary-button, .projects-flex .project-button, .faq-items-content, .line, .map-card, .loader-pin::after, .step-icon, .faq-items-content {
    background-color: #fff !important;
}
.button, .splide__slide h3, .secondary-button, .hero-btn a, .forth-section-wrapper h2, .forth-section-wrapper h5, .projects-flex .project-button, .project-button:hover, .faq-items-content h4, .faq-items-content p,
.banner-content h1, .banner-content p, .about-banner .banner-content p span, .tech-heading h1 strong, .map-head h4, .button.load-more-other:hover, header, .testimonial-text {
    color: #000 !important;
}
.menu-drawer-poppup, .hero-sec, .projects-flex .diagonal-line, #submitBtn, .form-grid .btn:hover, .wordpress-services .service-card, .approach-section  {
    background-color: #000 !important;
}
.primary-button, p, .secondary-button, .sub-menu li {
     font-family: 'Metropolies';
}
a {
   transition: 0.5s; 
   text-decoration: none;
}
a:hover {
    transform: scale(1.03);
}
.main_menu_bar {
    font-family: 'Tanker-Regular';
}
body {
    background-color: #0f0f0f;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}
ul.main-menu {
    width: 46%;
}
.splide__arrows.splide__arrows--ltr {
    position: relative;
    margin: 0 auto;
    max-width: 85px;
}

.all-services-heading {
    text-align: center;
    padding: 100px 20px 0 20px;
}

.all-services-heading h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: capitalize;
}
.menu-drawer, .mobile-menu-overlay, .mobile-menu {
    display: none;
}
.menu-col-left {
    width: 50%;
    padding: 50px 20px 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:150px !important;
}

.sec-bottom {
   padding-bottom:150px !important;
}
.mobile-on {
    display: none;
}
.header-menu ul li .button {
    padding: 20px 24px;
    text-decoration: none;
    color:#000 !important;
    letter-spacing:-0.2px;
    font-size:14px;
}
.mega-menu {
cursor: pointer;
width:40%;
    padding: 0 0 0 35px;
}
.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;
    gap: 50px;
}
.mega-menu ul li a {
    text-decoration: none;
}
.sub-menu {
  overflow-y: auto;
  padding-right: 6px;
   display: none !important;
   
}
.header-menu ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
}
.header__wrepp .col-left {
    width: 25% !important;
}
.header__wrepp .col-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
  .header-menu ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0;
    margin: 0;
  }
  .header-menu ul li a {
    position: relative;
    display: inline-block;
    padding: 9px 18px;
    color: #777;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease;
    z-index: 1;
  }
  .header-menu ul li a svg.border-trace {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .header-menu ul li a svg.border-trace rect {
    fill: none;
    stroke: #c6ff00;
    stroke-width: 1.5;
    opacity: 0;
  }
  .header-menu ul li a:hover {
      color: #c6ff00;
      transform: scale(1);
  }
.header-menu ul li.active:not(.menu-btn) > a {
    color: #c6ff00 !important;
}

  @keyframes borderRun {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -var(--perimeter); }
  }
  
.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;
    flex-direction: row;
}
header{
    padding: 15px 30px;
}
.menu-drawer-poppup {
    position: fixed;
    width: 100%;
    top: 90px !important;
    left: 0;
    /*max-height: calc(100vh - 90px);  */
    overflow-y: auto;                  
    z-index: 999 !important;
    background-image: url('./img/body_bg.png');
    background-color: #000;
    background-position: center;
    background-size: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.menu-drawer-poppup .close-button {
    position: absolute;
    left: 0;
    right: 0;
    text-align: right;
    display: none !important;
}
.main_menu_bar .sub-menu {
    display: none;
}
.cross_icon {
    background: unset;
    border: none;
    margin-top: 10px;
}
/*--updated code for hover--*/
.main-menu li a {
    color: rgba(233, 233, 233, 0.3);
    font-size: 35px;
    line-height: 1.7;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Tanker-Regular';
    transition: color 0.3s ease;
}

.main-menu li:hover a,
.main-menu li.active a {
    color: #fff !important;
}

.sub-menu li {
    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;
}
.mega-menu ul li:last-child {
    text-decoration: underline 3px;
    text-underline-offset: 24.5%;
}

.mega-menu .sub-menu {
    padding: 10px 0;
}
.menu-back{
    display: none;
}

.sub-menu li:hover {
    text-decoration: underline;
}
.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 {
    gap: 26px;
    display: flex;
    flex-direction: column;
    width: 80%;
}
.comp-headings h4 {
    letter-spacing: -0.2px;
    text-transform: uppercase;
    margin: 0;
}
.comp-btn {
    width:fit-content;
}
.comp-headings h2 {
    width: 83%;
}
.comp-btn a {
    color: #C6FF00;
    text-decoration: none;
    border: 1px solid #C6FF00;
    padding: 17px;
    display: flex;
    gap: 16px;
    width: fit-content;
    margin: 0 auto;
    justify-content: center;
    
}
#image-carousel {
    height: auto;
}
#image-carousel-track {
    height: auto;
}
.splide__slide img {
    width: 100%;
    height: auto;
}
.splide__slide {
    position: relative;
    overflow: hidden;
}
.splide__slide h3 {
    max-width: 88%;
    padding: 10px 15px;
}
ul.splide__pagination.splide__pagination--ltr {
    display: none;
}
.splide__arrow--next {
    right: 0 !important;
    opacity: 1 !important;
}
.splide__arrow {
    margin-top: 48px !important;
    border-radius: 0 !important;
    padding: 15px 13px !important;
}
.splide__arrow--prev {
    left: 0 !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;
    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;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.2px;
}
.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: 82px;
    font-family: 'Tanker-Regular';
}

/*-------------new-hero-sec--------------*/
.hero-imgs img {
    width: 100%;
}
.hero-sec {
    background-image: /* Smooth lime-green glow — top right */
    radial-gradient(ellipse 90% 90% at 90% 25%,
      rgba(160, 215, 0, 0.95) 0%,
      rgba(130, 190, 0, 0.75) 15%,
      rgba(90,  150, 0, 0.45) 35%,
      rgba(40,   90, 0, 0.18) 55%,
      rgba(10,   40, 0, 0.05) 68%,
      transparent              80%
    ),
    /* Smooth white glow — bottom left corner */
    radial-gradient(ellipse 45% 40% at -2% 108%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(220, 220, 220, 0.45) 25%,
      rgba(150, 150, 150, 0.15) 50%,
      rgba( 60,  60,  60, 0.04) 68%,
      transparent                80%
    );
}
.hero-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hero-head, .hero-cnt {
    width: 50%;
}
.hero-crac {
    display: flex;
    justify-content: space-between;
    border: 1px solid #FFFFFF3B;
    padding: 20px 30px;
    gap: 60px;
}
.crac-box {
    display: flex;
    gap: 20px;
    align-items: center;
}
.hero-cnt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 43px;
}
.hero-head {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.hero-head p {
    width: 78%;
}
.hero-btn a {
    background: #c6ff00;
    font-weight: 600;
}
.hero-head h1 strong {
    color: #FFC900;
    text-transform: uppercase;
    font-family: 'Tanker-Regular';
    font-weight: 500;
}


/*----------new-hero-sec-end------------*/

/*----------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: 50px;
}


/*----------forth-section-wrapper----------*/
.forth-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important; 
}
.forth-section-wrapper-div-one {
    background: linear-gradient(90deg, #c6ff00 0%, #00e676 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 63px 0;
    text-align: center;
}

.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: fit-content;
    width: auto;
    object-fit: cover;
    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%;
}


/*---------portfolio---------*/
.main-section-cta.team-btn.about-us-btn {
    display: block;
}
.projects-flex {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.project-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}
.proj-head-main h2 {
    width: 66%;
}
.proj-head-main {
    width: 80%;
    display: flex;
    gap: 26px;
    flex-direction: column;
}
.projects-flex .carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.projects-flex .slide {
    display: none;
    position: relative;
}

.projects-flex .slide.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    opacity: 1;
    pointer-events: auto;
}
.projects-flex .project-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border: 1px solid #000000;
    border-radius: 30px;
    font-weight: 500;
    position: relative;
    font-size: 14px;
}
.slide-content {
    position: absolute;
    bottom: 30px;
}
.project-button:hover {
    box-shadow: 0 2px 11px 0px #00000087;
}

.project-button .arrow {
    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;
}
.slide-image img {
    width: 100%;
}
/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding-top: 40px;
}

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

.pagination-separator {
    margin: 0 5px;
}

.pagination-total {
    opacity: 0.6;
    min-width: 30px;
}
/*--------- 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;
}


/*--------- 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;
    gap: 70px;
    width: 100%;
    transition:0.5s;
    cursor: pointer;
    position: relative;
    padding-right: 50px;
}
.faq-items-content h4 {
    font-weight: 700;
}
.faq-items-content p {
    margin-top: 28px;
    width: 100%;
    max-width: 740px;
}
.faq-heading-icon {
    display: inline-block;
}
.faq-items-content-paragraph{
    display: none;
}
.faq-items-content-heading {
    display: flex;
    justify-content: space-between;
    
     align-items: flex-start;  
    gap: 20px;
}

.faq-items-content-subheading p {
    display: none;
    margin-top: 10px;
}
.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); 
}
.faq-heading-icon svg line {
    transition: opacity 0.3s ease;
}

/*----------new testimonials section-----------*/
.testimonials-section {
    padding: 200px 0px;
    background: #0a0a0a;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  }
  .center-content {
    text-align: center;
    position: relative;
    z-index: 10;
  }
  .badge {
    display: inline-block;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
  }
  .section-title {
    font-size: clamp(26px, 5vw, 48px);
    font-weight: 700;
    font-family: sans-serif;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  .stars {
    font-size: 28px;
    letter-spacing: 4px;
    line-height: 1;
  }
 

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

/* ── Animated Dots ── */
.dots-track {
   position: absolute;
    top: -7px;
    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;
    justify-content: flex-start;
}

.footer-logo img {
    width: 100%;
    object-fit: contain;
}
.footer-bottom p {
    color: black;
}
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

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

.contact-item a {
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 700;
    letter-spacing: -0.2px;
    transition: 0.3s;
}
/* nav*/
.footer-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 82px 60px 40px;
}
.footer-nav a {
    font-size: 25px;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    transition: color 0.3s;
    font-weight: 400;
    font-family: 'Tanker-Regular';
    transition: 0.5s;
    border: 1px solid #fff;
    padding: 7px 31px;
    border-radius: 50px;
}
.footer-nav a:hover::after {
   width: 100%;
}

/* SOCIAL ALIENS */
/*-------------Footer--------------------*/
/* TOP CARD */
.footer-top-card {
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 72px 50px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    position: relative;
    background: #11111100;
    align-items: center;
    overflow: visible;
}

/* SOCIAL ALIENS */
.footer-aliens {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 14px;
   padding: 20px 0 0 0;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   overflow: visible;
}

.alien-link {
  display: block;
  text-decoration: none;
  position: relative;
  width: 130px;
  height: 130px;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.alien-link:hover {
   transform: scale(1.1) translateY(-8px);
}

.alien-white {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s ease;
}

/* Ground line */
.footer-ground {
    height: 46px;
    border-radius: 100%;
    background: #12121299;
    margin-top: 15px;
}
.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.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    padding: 150px 30px;
}
.banner-content {
    display: flex;
    align-items: center;
    position: relative;
}
.banner-content h1 {
    display: flex;
    flex-direction: column;
}
.banner-content h1 strong {
    font-weight: 400;
}
.banner-content p {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 10px;
    line-height: 1;
}
.banner-icon-1 {
    position: absolute;
    left: -16px;
    top: 0;
}
 
.banner-icon-2 {
    position: absolute;
    top: -71px;
    right: 77px;
}
.banner-icon-3 {
    position: absolute;
    right: 0;
    bottom: -130px;
}

/*-----------------------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: 70%;
}
.folio-box-short {
    width: 30%;
}
.folio-box.folio-box-big:not([data-category="home"]) {
    width: 50%;
}
.folio-box.folio-box-short:not([data-category="home"]) {
    width: 50%;
}
.folio-box {
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: hidden;
    transition: 0.5s;
    align-items: flex-start;
}
.folio-box-short.folio-box {
    display: flex;
    align-items: center;
}
.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;
}


/*-----------------------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 {
    margin-top: 10px;
}
.about-banner .banner-content p span {
    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-card1 {
    background: #704EE7;
}
.choose-card2 {
    background: #FF82DA;
}
.choose-card3 {
    background: #FFC451;
}
.choose-cards {
    width: 34.3%;
    padding: 32px 62px 120px 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: relative;
}
.choose-cards img {
    height: auto;
    width: auto;
    position: absolute;
    bottom: -47px;
    right: -20px;
}
.choose-card3 img {
    right: -46px;
}
.our-core {
    background-image: url('img/about-core.webp');
    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: 40%;
}
.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: 76%;
}
.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: 30px 30px;
}
.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';
    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%;
}
.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;
      letter-spacing: 0.12em;
      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;
      transition: width 0.35s ease;
      pointer-events: none;
    }

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

    .error-msg {
      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 {
      border: none;
      border-radius: 3px;
      padding: 1.75rem 2.4rem;
      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 {
      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;
      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;
      color: rgba(255,255,255,0.55);
      margin-bottom: 1rem;
    }

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

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

    .data-val {
       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 {
      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 {
       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;
      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-weight: 500;
      color: #888;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

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

/*----------blog-page-----------------*/
.blog-header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
}
/* Grid Layout */
.blog-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
/* Filter */
.blog-filter {
    margin-top: 20px;
    margin-bottom: 52px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 15px 40px;
    border: 1px solid #f2f2f2;
    background: transparent;
    cursor: pointer;
    transition: 0.3s;
    color: #b3b3b3;
    
}
.filter-btn.active, .filter-btn:hover {
    background: #f2f2f2;
    color: #000000;
}
/* Card */
.blog-card {
    overflow: hidden;
    transition: 0.3s ease;
    border: 1px solid #302e2e;
    padding: 20px;
    border-radius: 15px;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 2px 15px 9px 2px #000;
}
.blog-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.blog-content {
    padding: 20px 0;
}
.blog-category {
    color: #C6FF00;
    display: block;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0.6px;
    background: #C6FF001A;
    width: max-content;
    padding: 5px 10px;
}
.blog-content h3 {
    margin-bottom: 10px;
}
.blog-content p {
    color: #555;
    margin-bottom: 15px;
}
.blog-btn {
    text-decoration: none;
    border-bottom: 1px solid #fff;
}
/*----------blog-page-end----------------*/
/*-------services-page-------------*/
.shopify-services {
    padding: 50px 30px;
}
.wordpress-services {
    padding: 50px 20px;
    background: #1B1B1B;
}
.container {
    max-width: 1400px;
    margin: 0 auto;
}
.services-header {
    margin-bottom: 35px;
}
.main-title {
    font-weight: 400;
    color: #C6FF00;
    letter-spacing: -0.6px;
    margin-bottom: 12px;
    line-height: 52px;
}
.main-description {
    line-height: 25px;
    color: rgba(255, 255, 255, 0.7);
    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;
    box-shadow: 0px 0px 4px 3px #00000073;
}
.service-card.hover,
.service-card:hover {
    border-color: #C6FF00;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(191, 255, 0, 0.15);
}

#shopify {
    padding-top: 0;
}
.service-title {
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: -0.2px;
}
.service-desc {
    line-height: 25px;
    font-weight: 400;
    letter-spacing: 0.6px;
    max-width: 334px;
}
.approach-section {
    padding: 100px 20px;
}
.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%;
    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;
    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 {
    text-transform: uppercase;
    letter-spacing: -0.2px;
    margin-bottom: 8px;
    line-height: 100%;
}
.approach-title {
    font-size: 48px;
    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;
    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-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: -0.2px;
    line-height: 100%;
}
.step-desc {
    line-height: 25px;
    font-weight: 400;
    letter-spacing: 0.6px;
    max-width: 306px;
}

.service-card {
    scroll-margin-top: 100px;
}
.service-card.highlight {
    animation: highlightPulse 1.5s ease;
}

@keyframes highlightPulse {
    0% {
        background-color: rgba(132, 204, 22, 0.3);
        box-shadow: 0 0 0 2px #84cc16;
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}
.mobile-mega-wrapper {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
    background: #111;
    padding: 10px 0;
}
.mobile-mega-wrapper.open {
    display: block;
}
.mobile-clone-main {
    list-style: none;
    padding: 0;
}
.mobile-clone-main li {
    padding: 10px 15px;
    cursor: pointer;
    color: #999;
}
.mobile-clone-main li.active {
    color: #fff;
    font-weight: bold;
}
.mobile-clone-mega .sub-menu {
    display: none;
    list-style: none;
    padding: 0 15px;
}
.mobile-clone-mega .sub-menu.active {
    display: block;
}
.mobile-clone-mega .sub-menu li {
    padding: 8px 0;
}
.mobile-services-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobile-arrow {
    transition: transform 0.3s;
}
.mobile-services-link.active .mobile-arrow {
    transform: rotate(180deg);
}
/*-------services-page-end------------*/
/*---------blog-inner-page----------------*/
.blog-inner {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.blog-cnt {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.blog-cnt-flx {
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.blog-cnt-subpara {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.blog-cnt-subpara h4 {
    font-weight: 600;
    text-decoration: underline;
}
.blog-cnt-subpara ul li, .blog-cnt ul li {
    line-height: 1.9;
}
/*---------blog-inner-page-end---------------*/
/*--------blog-section-homepage-----------*/
.custom-btn-arrow-icon {
    width: unset !important;
}
.dbls-root {
   background:#0d0d0d;
   padding:150px 40px 150px;
}
.dbls-head {
   display:flex;
   align-items:flex-end;
   justify-content:space-between;
   margin-bottom:48px;
}
.dbls-title {
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    display: flex;
    gap: 10px;
}
.dbls-title span {
    color: #FFC900;
    text-transform: uppercase;
    font-family: 'Tanker-Regular';
    font-weight: 500;
}
.dbls-desc {
    font-size: 15px;
    line-height: 1.7;
    margin-top: 12px;
    max-width: 574px;
}
.dbls-viewbtn,
.dbls-btn a {
   font-size:13px;
   font-weight:600;
   letter-spacing:0.06em;
   text-transform:uppercase;
   color:#0d0d0d;
   background:#84cc16;
   border:none;
   padding:13px 28px;
   border-radius:6px;
   cursor:pointer;
   display:flex;
   align-items:center;
   gap:8px;
   transition:background 0.18s,transform 0.1s;
   white-space:nowrap; 
   flex-shrink:0;
   align-self:flex-start;
   margin-top:6px;
   text-decoration: none;
}
.dbls-viewbtn:hover,
.dbls-btn a:hover {
   background:#a3e635;
}
.dbls-viewbtn:active,
.dbls-btn a:active { 
   transform:scale(0.97);
}

.dbls-slider-wrap{
   position:relative;
}
.dbls-overflow {
   overflow:hidden;
}
.dbls-rail {
   display:flex;
   gap:24px;
   transition:transform 0.46s cubic-bezier(.4,0,.2,1);
   will-change:transform;
}
.dbls-card {
   min-width:calc(33.333% - 16px);
   background:#1a1a1a;
   border:1px solid #2a2a2a;
   border-radius:14px;
   overflow:hidden;
   display:flex;
   flex-direction:column;
   transition:border-color 0.22s,transform 0.22s;
   cursor:pointer;
}
.dbls-card:hover {
    border-color: #84cc16;
    transform: translateY(0);
}
.dbls-card-img img {
    width: 100%;
    object-fit: cover;
}
.dbls-card-img {
   width:100%;
   height:196px;
   overflow:hidden;
   position:relative;
   flex-shrink:0;
}
.dbls-card-img svg {
   width:100%;
   height:100%;
   display:block;
   transition:transform 0.4s;
}
.dbls-card:hover .dbls-card-img svg {
   transform:scale(1.04);
}
.dbls-card-body {
    padding: 22px 22px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}
.dbls-card-title {
   font-weight:700;
   color:#f5f5f5;
   line-height:1.45;
   text-transform:uppercase;
   letter-spacing:0.02em;
   margin-bottom:10px;
}
.dbls-card-desc{
   font-size:13px;
   color:#737373;
   line-height:1.7;
   flex:1;
   margin-bottom:20px;
}
.dbls-controls { 
   display:flex;
   align-items:center;
   justify-content:space-between;
   margin-top:36px;
}
.dbls-dots {
   display:flex;
   gap:8px;
}
.dbls-dot {
   width:8px;
   height:8px;
   border-radius:50%;
   background:#2a2a2a;
   border:none;
   cursor:pointer;
   padding:0;
   transition:all 0.22s;
}
.dbls-dot.dbls-active { 
   background:#84cc16;
   width:28px;
   border-radius:4px;
}
.dbls-arrows {
   display:flex;
   gap:12px;
}
.dbls-arr {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid #2a2a2a;
    background: #f9f9f9;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
}
.dbls-arr:hover {
   background:#84cc16;
   border-color:#84cc16;
   color:#0d0d0d;
}
.dbls-arr:disabled {
   opacity:0.25;
   cursor:default;
   pointer-events:none;
}


section[id] {
    scroll-margin-top: 130px;
}


/*--------blog-section-homepage-end-----------*/

/*--------Testimonial-----------*/
.fqs-inner {
    max-width: 100%;
    margin: 0 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.fqs-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fqs-overline {
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #84cc16;
    margin-bottom: 12px;
}
.fqs-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    text-align: center;
}
.fqs-title span {
    color: #84cc16;
    font-family: 'Cute Monster', sans-serif;
    font-weight: normal;
}
.fqs-subtitle {
    font-size: 15px;
    line-height: 1.75;
    max-width: 780px;
    font-weight: 400;
    text-align: center;
}
.fqs-list {
   display:flex;
   flex-direction:column;
}
.fqs-item {
    border-bottom:1px solid #1f1f1f;
    overflow:hidden;
}
.fqs-item:first-child { 
   border-top:1px solid #1f1f1f;
}
.fqs-trigger { 
   width:100%;
   background:none;
   border:none;
   padding:24px 0;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:20px;
   cursor:pointer;
   text-align:left;
}
.fqs-q-wrap { 
   display:flex;
   align-items:center;
   gap:16px;
   flex:1;
}
.fqs-num {
    font-weight: 700;
    color: #919191;
    letter-spacing: 0.1em;
    width: 28px;
    flex-shrink: 0;
    transition: color 0.2s;
    font-family: 'Poppins', sans-serif !important;
}
.fqs-item.fqs-open .fqs-num {
   color:#84cc16;
}
.fqs-q { 
   font-size:17px;
   font-weight:700;
   color:#e5e5e5;
   line-height:1.3;
   text-transform:uppercase;
   letter-spacing:0.02em;
   transition:color 0.2s;
   font-family: 'Poppins', sans-serif !important;
}
.fqs-trigger:hover .fqs-q {
   color:#84cc16;
}
.fqs-icon { 
   width:38px;
   height:38px;
   border-radius:50%;
   border:1.5px solid #2a2a2a;
   display:flex;
   align-items:center;
   justify-content:center;
   flex-shrink:0;
   transition:all 0.25s;
}
.fqs-icon svg {
   width:14px;
   height:14px;
   stroke:#737373;
   transition:transform 0.35s,stroke 0.2s;
}
.fqs-item.fqs-open .fqs-icon { 
   background:#84cc16;
   border-color:#84cc16;
}
.fqs-item.fqs-open .fqs-icon svg { 
   stroke:#0d0d0d;
   transform:rotate(45deg);
}
.fqs-body { 
   max-height:0;
   overflow:hidden;
   transition:max-height 0.42s cubic-bezier(.4,0,.2,1),opacity 0.3s ease;
}
.fqs-body.fqs-open { 
   opacity:1;
}
.fqs-body-inner {
    padding: 0 0 26px 44px;
    line-height: 1.8;
    max-width: 100%;
}
header.scrolled {
    background: #111 !important;
}

.faq-icon {
    position: absolute;
    top: 15px;    
    right: 15px;  
}
.faq-heading-icon {
    position: absolute;
    top: 34px;       
    right: 34px;     
    flex-shrink: 0;
    transition: 0.3s ease;
}
a.button.load-more-center.load-more-other.custom-btn-new {
    background: #CCFF00 !important;
}

.faq-items-content.active .faq-heading-icon svg line:first-child {
    opacity: 0 !important;
}


.faq-items-content.active .faq-items-content-subheading p {
    display: block;
}

    .button.load-more-other {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border: 1.5px solid #CCFF00;
    color: #CCFF00;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: all 0.3s ease;
    margin-top: 16px;
}

.button.load-more-other:hover {
    background: #CCFF00;
}

.button.load-more-other:hover svg line,
.button.load-more-other:hover svg polyline {
    stroke: #000;
}
.our-celebrations {
    padding-bottom: 110px;
}
.our-celebrations .header-wrapper {
    text-align: center;
    color: #fff;
    max-width: 665px;
    margin: auto;
}
.our-celebrations .section-wrapper {
    padding: 70px 0px;
}
.our-celebrations .header-wrapper .text {
    padding-top: 15px;
    line-height: 1.3;
}
.our-celebrations .box-wrap {
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 32px;
}

.our-celebrations .box-wrap {
padding: 5px 0;
gap: 10px;
}

.our-celebrations .section-wrapper .card .image {
    display: flex;
}
.our-celebrations .section-wrapper .card .image img {
    width: 100%;
    border-radius: 20px; 
}
.our-celebrations .section-wrapper .card {
    width: 100%;
}
.our-celebrations .section-wrapper .two-box .card.one {
    width: 70%;
}
.our-celebrations .section-wrapper .button-box {
    padding: 16px 0;
}

.our-celebrations .button.load-more {
padding: 10px 15px;
font-size: 10px;
}
/*mega-menus*/

.mobile-clone-main li {
    display: flex;
    gap: 10px;
    margin-bottom:0 !important;
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease;
}

/* Mega menu open hone par header black */
header.mega-active {
    background: #111 !important;
}

.site-header,
.header,
.header-menu {
    position: relative;
    z-index: 9999;
}

/* ========================
   MEGA MENU POPUP
======================== */
.menu-drawer-poppup {
    background: #111;
}


/* Open state */
.menu-drawer-poppup.mega-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: block !important;
}

.sub-menu.active {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
}

body .crisp-client .cc-vk540 .cc-1jku3 {
    display : none !important;
}

/* inner page css*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


section.common-padding {
    padding-top: 110px;
    padding-bottom: 30px;
}

p.p {
    width: 100%;
    max-width: 80%;
    line-height: 29px;
    margin: 0 auto;
    font-weight: 500;
    padding: 15px 0;
    color: #fff;
    text-align: center;
}

.service-top .top .left,
.service-top .top .right,
.services-three-img .repeat{
    width: 100%;
    
    margin: 20px auto;
}

.service-top .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.service-top .top .left {
    width: 30%;
}

.service-top .cmn {
    border-radius: 24px;
    height: 400px;
    padding: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position:relative;
}
.service-top .cmn {
    margin: 20px auto;
}
.service-top .bottom .inner {
    max-width: 860px;
}
.service-top .top .right .inner {
    max-width: 749px;
}
.service-top .top .right {
    width: 68%;
}
.service-top  .bottom {
    margin-top: 35px;
}
.service-top .inner {
    position: absolute;
    bottom: 0;
    color: #fff;
}
.service-top .cmn {
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
}
.services-three-img {
    display: flex;
    align-content: flex-end;
        padding: 70px 0 0px 0;
}
.services-three-img p {
    color: #fff;
}
.services-three-img-right.repeat .content {
    max-width: 400px;
    margin: 0 30px 95px 0px;
    text-align: right;
    width: 100%;
    float: right;
}
.services-three-img .repeat {
    padding: 0px;
        width: 50%;
}
.services-three-img .repeat img{
    width: 100%;
        padding: 15px;
}
@keyframes infiniteScroll {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }


.margue {
      width: 100%;
      overflow-x: hidden;
          background: #C6FF00;
    }

    .horizontal-scrolling-items {
      display: flex;
      width: 2600px;
      animation-name: infiniteScroll;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

     .horizontal-scrolling-items__item {
      white-space: nowrap;
      padding: 8px 70px 3px 20px;
      text-transform: uppercase;
      /*font-family: "Brandon";*/
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-top: 6px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
    }
    
.horizontal-scrolling-items__item img {
    width: 120px;
}

p.autoplay-slider.font-bin{
    margin-left:30px;
    margin-right:30px;
    
}

p.autoplay-slider {
    color: #C6FF00;
}

p.autoplay-slider {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}
.inner-btn h3.h3 {
    margin-bottom: 20px;
}
.inner-btn {
    padding: 60px 30px;
    max-width: 735px;
    margin: 0 auto;
    text-align: center;
    background-repeat: no-repeat;
        border-radius: 24px;
    background-position: center;
}

.image-banner-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 130px 0px 200px 0px;
}

.image-banner-display .box-left {
    margin: unset;
}
.image-banner-right-image {
    position: relative;
}

img.store,
img.js,
img.react,
img.shopi,
img.word,
img.arro,
.pol {
    position: absolute;
}

img.react {
    left: 37%;
}

img.word {
    left: 61.5%;
    top: 87%;
}

img.shopi {
    right: 30px;
}

img.arro {
    top: 83%;
    left: 4%;
}

img.pol {
    right: 30px;
    top: 90px;
}

.store,
.arro,
.shopi,
.react {
    animation: bounceTopToBottom 3s ease-in-out infinite;
}

@keyframes bounceTopToBottom {
    from {
        transform: translate(0, 0);
    }

    65% {
        transform: translate(0, 1rem);
    }

    to {
        transform: translate(0, 0);
    }
}

.word,
.arro,
.js,
.pol {
    animation: bounceBottomToTop 3s ease-in-out infinite;
}

@keyframes bounceBottomToTop {
    from {
        transform: translate(0, 1rem);
        /* Starts at the bottom */
    }

    65% {
        transform: translate(0, 0);
        /* Moves to the top */
    }

    to {
        transform: translate(0, 1rem);
        /* Returns to the bottom */
    }
}
.h2{
    color:#fff;
        text-align: center;
    line-height:1.3;
}

.h3{
    color:#fff;
    line-height:1.3;
    margin: 0 0px 12px 0;
}
.h2 span,
.h3 span{
    font-weight: normal;
    color: #C6FF00;
}
   
.global-banner img.react {
    left: 37%;
}

.global-banner img.word {
    left: -43%;
    top: 92%;
}

.global-banner img.shopi {
    right: -12.5%;
    top: 78%;
}

.global-banner img.arro {
    top: 83%;
    left: 0%;
}

.global-banner img.pol {
    right: 6px;
    top: 110px;
}
.global-banner img.js { 
    left: -5%;
    top: 0%;
} 
.global-banner img.store { 
    right: 200px;
    top: -22%;
}


.image-banner-right-image img {
    display: flex;
}

.about-bnner {
    justify-content: center;
}

/* ========================
   MAIN MENU LINKS
======================== */
.header-menu ul li.has-mega > a {
    color: rgba(255,255,255,.35);
    transition: all .3s ease;
}

/* Active + hover */
.header-menu ul li.has-mega.active > a,
.header-menu ul li.has-mega:hover > a {
    color: #c6ff00 !important;
    opacity: 1;
}

/* Smooth movement - sirf desktop */
.header-menu ul li.has-mega {
    transition: transform .3s ease;
}

.header-menu ul li.has-mega:hover {
    transform: translateX(5px);
}

/* Submenu links */
.sub-menu.active li {
    text-decoration: none;
    font-size: 15px;
    transition: all .3s ease;
    cursor: unset !important;
    
}

.sub-menu.active a:hover {
    color: #d4ff00;
    padding-left: 6px;
}
.filter-arrow{
    display:none;
}
.our-celebrations .button-box {
    display: flex;
    justify-content: center;
}
.blog-inner a {
    color: #c6ff00 !important;
}
.projects {
    padding-bottom: 0;
}

/*--------End Testimonial-----------*/

/*----------Responisve----------*/
@media (max-width:1440px) {
.sec-padding {
        padding: 100px 30px;
}
.image-sub-div-one {
    position: absolute;
    top: -12%;
    left: -6%;
}
.comp-headings {
    width: 83%;
}
/*-------------testimonial--------------*/
.footer-ground {
    margin-top: -12px;
}
.choose-content {
    gap: 20px;
}
.choose-card3 img {
    right: -25px;
}
}
@media (max-width:1366px) {
.professionals {
    padding: 80px 30px 20rem !important;
}    
.testimonials-section{
    padding-top:200px !important;
    padding-bottom:200px !important;
}
.header-menu ul li a, .header-menu ul li.active a {
    font-size: 14px;
}
.complete-solutions {
    padding-bottom: 120px !important;
}
.hero-crac {
    padding: 20px 20px;
    gap: 20px;
}
h1 {
    font-size: 75px;
}
.comp-headings {
    width: 82%;
}
.sec-padding {
    padding: 80px 30px;
}
.image-sub-div-one {
    top: -18%;
    left: -4.5%;
}
.copywrite {
    margin-top: 18px;
}
/*-----------about-us---------------*/
.tech-reverse-drop {
    right: -39px;
}
.about-banner {
    padding: 150px 0;
}
.nehish-image-gallery .gallery-grid.item-cards {
    gap: 40px;
    margin: 40px 0;
}
}


@media (max-width:1280px) {
.comp-headings {
    width: 80%;
}
h3 {
    font-size: 30px;
}

/*------------testimonial--------------*/
 
#testimonials-carousel .splide__arrow.splide__arrow--prev {
    left: 1% !important;
}
#testimonials-carousel .splide__arrow.splide__arrow--next {
    right: 1% !important;
}
.header-menu ul {
    gap: 17px;
}
.image-sub-div-one {
    top: -24%;
    left: -2.5%;
}
.image-sub-div-one img {
    width: 85%;
}
/*----------testimonial----------*/
.ufo-container {
    bottom: -82px;
    right: 3%;
}
/*-----footer------*/
.folio-flexbox {
    gap: 60px;
}
.page-folio {
    padding-bottom: 50px;
}
}
@media (max-width:1200px) {
.filter-btn {
    padding: 15px 24px;
}
.header-menu ul li .button {
    padding: 20px 17px;
}
.header-menu ul li a {
    padding: 7px 10px;
}
.splide__arrows.splide__arrows--ltr {
    margin: 0 auto 30px auto;
}
.footer-nav a {
    font-size: 20px;
    padding: 7px 14px;
}
.comp-headings h2 {
    width: 100%;
}
.button {
    padding: 14px 12px;
    font-size: 15px;
    white-space: nowrap;
}    
.comp-headings {
    width: 79%;
}
h3 {
    font-size: 27px;
}

.button {
    padding: 17px 16px;
}
/*------------testimonial--------------*/


.header-menu ul {
    gap: 10px;
}
}
@media (min-width:1025px){
.testimonial-mobile {
    display: none !important;
}
 .test-card {
    position: absolute;
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 18px 20px;
    color: #ddd;
    font-family: sans-serif;
    line-height: 1.55;
    width: 450px;
    transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.1s ease;
    will-change: transform, opacity;
  }
  .test-card .author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }
  .test-card .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
  }
  .test-card .by {
    color: #888;
  }
  
}

@media (max-width: 1150px) {
section.common-padding {
    padding-top: 60px;
    padding-bottom: 20px;
}
.service-top .top .right {
    width: 56%;
}
.service-top .top .left {
    width: 40%;
}
.business-section {
    flex-direction: column;
}
}

@media (max-width:1024px) {
.global-banner img.shopi {
    right: 0%;
    top: 78%;
}
.global-banner img.word {
    left: -3% !important;
    top: 113% !important;
}
.global-banner img.arro {
    left: 11% !important;
}
.filter-btn {
    padding: 10px 7px;
}    
.blog-filter {
    gap: 10px;
}
.avatar {
    padding-bottom: 15px;
}
.center-content {
    margin-bottom: 30px;
}
 .slick-dots li.slick-active button:before {
    color: #fff !important;
}
.slick-dots li button:before {
    color: #fff !important;
    font-size: 10px !important;
}
.testimonial-mobile{
    position: relative;
    padding-bottom: 40px; /* Space for dots */
}

.testimonial-mobile .slick-dots{
    position: absolute;
    bottom: 20px;
}
 .test-cards {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 18px 20px;
    min-height: 300px;
}   
.testimonials-section {
    min-height: unset;
    /*min-height: 750px;*/
    border-radius:unset;
}


.testimonials-section {
    padding-bottom: 0px !important;
    padding-top: 40px !important;
}

.author {
    color: #fff;
    padding-top: 30px;
}
.testimonial-mobile{
    background:#0a0a0a;
}
.testimonial-slide{
    padding: 0 0 20px 0;
    margin:0 10px;
}
.our-celebrations {
   padding-bottom: 0;
}
.sol-bin {
    color: #C6FF00;
}


.footer-nav {
    padding: 50px 15px 40px;
}
.comp-btn.mobile-on.custom-project-btn {
    display: none !important;
}
 .second-section-wrapper {
    flex-wrap: wrap;
}    
.second-section-card {
    width: 45%;
}    
.menu-drawer-poppup {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 20px !important;
}
.header-menu ul li.has-mega:hover {
    transform: none; 
}
.sub-menu.active a {
    font-size: 14px;
}
.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;
}
.header__wrepp .col-left {
    width: 30% !important;
}
.header-menu ul {
    gap: 16px;
}
.header-menu ul li a {
    padding: 6px 7px;
    font-size: 12px;
}
.button {
    padding: 14px 16px;
    font-size: 13px;
}  
.hero-head p {
    width: 75%;
}
.hero-head{
    align-items: center;
}
.hero-head p{
    text-align:center;
}
.hero-flex {
    flex-direction: column;
    gap: 40px;
}
.hero-head,
.hero-cnt {
    width: 100%;
}
.hero-crac {
    gap: 30px;
    padding: 16px 20px;
}
.forth-sec-flex {
    gap: 40px;
}
.logo-marquee-track {
    gap: 50px;
     padding-right: 50px;
}
.logo-marquee img {
   height: 35px;
}
.prof-flex {
   gap: 40px;
}
 .project-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.proj-head-main {
    width: 100%;
}
.proj-head-main h2 {
    width: 100%;
}
/* ✅ Mobile button show, desktop button hide */
.proj-head-btn:not(.mobile-on) {
    display: none;
}
.mobile-on {
    display: block !important;
}
.portfolio_approach_wrapper {
    gap: 40px;
}
.portfolio_approach_wrapper .portfolio_app_content {
    width: 60%;
}
.portfolio_app_inner_content {
    padding-bottom: 30px;
}
.faq-section {
    gap: 30px;
}
.faq-items {
    max-width: 100%;
}
.faq-items-content {
    padding: 24px;
    padding-right: 60px;
}
.faq-items-content p {
    font-size: 16px;
    max-width: 100%;
}
.test-card {
    display:none;
    width: 340px;
    font-size: 12px;
}
h1 {
    font-size: 60px;
}
h2 {
    font-size: 40px;
}
.menu-col-right {
    display: none;
}
.menu-col-left {
    width: 100%;
    padding: 0 2em;
}
.main-menu li a{
    font-size: 30px;
}
.cross_icon {
    margin-right: 10px;
}
.menu-drawer-poppup {
    top: 0;
    left: 0;
}
.menu-col-left {
    width: 100%;
    padding: 2em 2em;
    margin: 0 !important;
}

.comp-headings {
    width: 72%;
}
.sec-padding {
    padding: 40px 20px;
}
.comp-headings {
    width: 72%;
}

.portfolio_approach_wrapper .portfolio_app_content {
    width: 69%;
}

.profile-image {
    margin-bottom: 12px;
}
.rating {
    margin-bottom: 12px;
}
/*-------footer---------*/
.footer-top-card {
   grid-template-columns: 1fr;
   padding: 30px;
}
.footer-brand {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.header-menu ul li a, .header-menu ul li.active a {
    font-size: 12px;
}
.contact-item a {
    font-size: 16px;
}
.header__wrepp .col-left {
    width: 25% !important;
}
/*--------folio-sec--------------*/
.folio-flexbox {
    display: flex;
    flex-direction: row;
    gap: 45px;
}
/*-------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;
}
.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;
}
/*-----contact-us----------*/
.form-heading-flex img {
    width: 10%;
}
.contact-banner {
    padding: 150px 0 !important;
}
.map-card {
    padding: 40px 40px 40px;
}
.services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.approach-grid {
    grid-template-columns: 1fr;
    gap: 50px;
}
.banner {
    max-width: 100%;
}
.banner-text {
    font-size: 24px;
}
.approach-title {
    font-size: 38px;
}
.blog-wrapper {
    grid-template-columns: repeat(2, 1fr);
}
.choose-cards img {
    display: none;
}
.core-flex {
    flex-direction: column;
    gap: 40px;
}
.core-img {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
}
.core-img img {
    width: 80% !important;
    margin: 0 auto !important;
}
.core-content {
    width: 100%;
    align-items: center !important;
    text-align: center !important;
    /* display: flex !important; */
    flex-direction: column !important;
    gap: 28px;
}
.core-heading {
    align-items: center !important;
    text-align: center !important;
    gap: 12px;
}
.core-cards-flex {
    align-items: center;
    flex-direction: column;
}
.core-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
}
.core-card > img {
    margin: 0 auto !important;
    display: block !important;
    width: 48px;
    height: 48px;
}
.core-card-cnt {
    align-items: center !important;
    text-align: center !important;
    /* display: flex; */
    flex-direction: column;
    gap: 13px;
}
.we-are-cnt {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.are-cnt-card p {
    width: 100%;
}
.tech-flex {
    flex-direction: column;
    text-align: center;
    gap: 40px;
    align-items: center;
}
.tech-heading,
.tech-imgs {
    width: 100%;
}
}

@media (max-width:920px) {
    .header-menu ul {
    gap: 8px;
}
}
@media (max-width: 886px) {
.comp-headings {
    gap: 20px;
}
.comp-headings {
    width: 72%;
}

}
@media (max-width:880px) {
    .nav-demo {
    display: none;
}
.menu-drawer {
    display: flex;
    cursor: pointer;
}
.mobile-menu-overlay {
  display: block;
}
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9998;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 85%;
    height: 100vh;
    padding: 30px 20px;
    transition: 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
    background: #000;
}

.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.mobile-menu-close {
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu ul li {
    margin-bottom: 25px;
}

.mobile-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    display: block;
}
.mobile-menu.active {
    right: 0;
    display: block;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.folio-flexbox {
    display: flex;
    flex-direction: column;
}
.folio-box {
    width: 100%;
}
.folio-img img {
    width: 100%;
}
.folio-projects:hover .folio-box, .folio-projects .folio-box:hover {
    filter: none;
    opacity: 1;
    transform: none;
}
.folio-projects {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.banner-icon-1 {
    left: -80px;
}
}
@media (max-width:857px) {
h3 {
   font-size: 30px;
}
/*.comp-headings {*/
/*    width: 71%;*/
/*}*/
/*.image-sub-div-two {*/
/*    right: -55%;*/
/*}*/
}
/*@media (max-width: 831px) {*/
/*.comp-headings {*/
/*    width: 69%;*/
/*}*/
/*.comp-btn a {*/
/*    gap: 14px;*/
/*}*/
/*}*/
/*@media (max-width: 800px){*/
/*.image-sub-div-two {*/
/*    right: -60%;*/
/*}*/
/*.projects-flex .slide-title {*/
/*    font-size: 32px;*/
/*    margin-bottom: 27px;*/
/*}*/
/*}*/
@media (max-width: 777px) {
.comp-headings {
    width: 66%;
}
.main-section-content h1 strong {
    font-size: 98px;
}
h1 {
    font-size: 50px;
}
.faq-heading {
    gap: 10px;
}

/*------------marquee----------------------*/
.logo-marquee-content {
    animation-duration: 20s;
} 
/*-------------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;
}

.testimonials-section {
    padding-bottom: 233px;
}
/*---------professionals & portfolio----------*/
.professionals {
   
     background: url(img/Group_1484579879.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.projects-flex .slide-title {
    font-size: 2rem;
}
.portfolio_approach_wrapper {
    display: flex;
    flex-direction: column;
}
.portfolio_approach_wrapper .portfolio_image {
    width: 100%;
    text-align: center;
}
.portfolio_image img {
    width: 75%;
}
.portfolio_approach_wrapper .portfolio_app_content {
   width:100%;
}
/*-------footer-------*/
.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;
}
.core-flex {
    display: flex;
    flex-direction: column;
}
.core-img {
    width: 70%;
}
.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:768px) {
.professionals {
    padding: 60px 30px  !important;
}
p.p {
    max-width: 100%;
}
img.pol {
    right: 9px !important;
    top: 40px !important;
}
img.store {
    right: 132px !important;
    top: -21% !important;
}
.splide__slide h3 {
    max-width: 100%;
}
.are-head-para {
    width: 100%;
}
.crac-box p {
    font-size: 14px;
}
.folio-box, .folio-box:hover,
.folio-box.active,
.folio-box.blurred {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
}
.alien-link,
.alien-white {
    width: 90px;
    height: 90px;
}
.footer-aliens {
    flex-wrap: unset;
    gap:0;
}
.footer-nav {
    flex-wrap: wrap;
    padding: 50px 20px 25px;
    gap: 20px;
    justify-content: center;
}
.footer-nav a {
    font-size: 15px;
    letter-spacing: 0.6px;
}
.pagination {
    padding-top: 20px;
}
.complete-solutions {
    padding-bottom: 70px !important;
}

.our-celebrations .section-wrapper {
    padding: 40px 0px 70px 0px;
}
p {
        font-size: 16px;
}
.impact {
    padding: 20px 0;
}
.hero-crac {
    gap: 20px;
}
h2 {
    font-size: 35px;
}    
header {
    background: #111 !important;
}
header.mega-active {
    background: #111 !important;
}
.menu-drawer-poppup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /*height: 100vh !important;*/
    overflow-y: auto !important;
    padding: 60px 20px 20px !important;
    z-index: 9998 !important;
}
.header-menu ul li.has-mega:hover {
    transform: none;
}
.sub-menu.active {
    gap: 10px;
}
.sub-menu.active a:hover {
    padding-left: 4px; 
}   
.grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.header__wrepp .col-left {
    width: 100% !important;
    text-align: center;
}
.header-menu ul {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}
.header-menu ul li a {
    font-size: 11px;
    padding: 6px 8px;
    color: #fff !important;
}
.button {
    display: block;
    padding: 10px 20px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}
.close-button {
    display: none;
}
.hero-flex {
    flex-direction: column;
    gap: 30px;
    text-align: center;
}
 .hero-btn {
    width: 70%;
}
.hero-cnt {
    width: 100%;
    gap: 24px;
}
.hero-imgs img {
    width: 100%;
}
.crac-box {
    gap: 10px;
}
.second-section-card-sub-div h4 {
    font-size: 36px;
}
.forth-sec-flex {
    gap: 24px;
}
.logo-marquee {
    margin: 16px 0;
}
.logo-marquee img {
    height: 28px;
}
.marquee-flex {
    gap: 6px;
}
.prof-flex {
    gap: 30px;
}
.prof-heading {
    text-align: center;
}
.prof-grid {
    grid-template-columns: repeat(2, 1fr); /* ✅ 2 columns */
    gap: 24px 20px;
}
.impact-heading {
    gap: 8px;
}
.projects-flex {
    gap: 30px;
}
.proj-head-main {
    gap: 16px;
}
.projects-flex .project-button {
    padding: 10px 20px;
    gap: 10px;
    font-size: 14px;
}
.portfolio_approach_wrapper {
    flex-direction: column;  /* ✅ Column layout */
    gap: 30px;
}
.portfolio_approach_wrapper .portfolio_app_content {
    width: 100%;
}
/* ✅ Mobile pe image aur heading show karo */
.mobile-approach {
    width: 100%;
}
.mobile-approach .portfolio_ap_heading {
    display: block !important;  /* ✅ Mobile pe show */
    text-align: center;
    margin-bottom: 20px;
}
/* ✅ Desktop heading hide karo */
.portfolio_app_content .portfolio_ap_heading {
    display: none;
}
.portfolio_image img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
}
.portfolio_ap_heading h2 {
    padding-bottom: 20px;
}
.faq-section {
    gap: 24px;
}
.faq-heading {
    gap: 16px;
}
.faq-items {
    gap: 16px;
}
.faq-items-content {
    padding: 20px;
    padding-right: 50px;
}
.faq-items-content p {
    font-size: 15px;
    margin-top: 16px;
    max-width: 100%;
}
.faq-heading-icon {
    top: 20px;
    right: 20px;
}
.section-title {
    font-size: 24px;
}
.stars {
    font-size: 22px;
}
/* ✅ Mobile pe cards absolute nahi - normal flow */

.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 30px;
}
.banner-pink {
    transform: rotate(-6deg);
}
.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 {
    margin-bottom: 10px;
}
.main-description {
    font-size: 14px;
}
.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;
}
.header__wrepp .col-left {
    text-align: left;
}
.header__wrepp .col-right {
    gap: 20px;
}
.banner-icon-1 img {
    width: 49%;
}
.banner-icon-3 img {
    width: 74%;
}
.banner-icon-1 {
    left: -108px;
    top: 127px;
}
.about-banner {
    padding: 100px 0;
}
.choose-flex,
.choose-content {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.choose-cards {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    padding: 24px 24px 50px 24px;
    width: 47%;
}
.choose-cards p {
    font-size: 15px;
}
.core-card img {
    width: 48px;
    height: 48px;
}
.we-are-cnt {
    gap: 20px;
}
.tech-drop,
.tech-reverse-drop {
    display: none;
}
.tech-heading h1 {
    font-size: 28px;
}

.services-three-img-right.repeat .content {
    margin: 0 auto 40px auto;
    text-align: center;
}
.service-top .cmn {
    margin: 20px auto;
    
    max-width: 400px;
}
.service-top .top,
.services-three-img{
    flex-direction: column;
}
.service-top .top .left,
.service-top .top .right,
.services-three-img .repeat{
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
}
}

@media (max-width: 767px) {
    .comp-carousel {
        width: 100%;
    }
    
#image-carousel .splide__slide {
    width: 100% !important;
}    
.mobile-services-link.active {
    /*margin-bottom: 10px;*/
}
.comp-btn.mobile-on.custom-project-btn {
    display: block !important;
}
.col-right .button {
    display: none;
}

.main-menu li a {
    font-size: 45px;
}
.main-section-content h1 strong {
    font-size: 70px;
}
.header__wrepp .col-left {
    width: 68% !important;
    text-align: justify;
}
.comp-headings {
    width: 68%;
}
h3 {
    font-size: 25px;
}
.comp-btn {
    display: none;
}
.mobile-on {
    margin-top: 60px;
    display: block;
}
.comp-head {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.comp-headings {
    width: 100%;
}

/*----------professional-------------------*/
/* Grid becomes horizontal scroll container */
.prof-grid {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    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: 0px;
}
.mobile-approach .portfolio_ap_heading {
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}
.portfolio_ap_heading {
    display: none;
}
.portfolio_approach_wrapper {
    gap: 50px;
}
/*-------------portfolio-------------------*/
.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----------*/
/*-------blog-page-----------*/
.blog-wrapper {
    grid-template-columns: 1fr;
}
.blog-image img {
    height: auto;
}
.blog-header h2 {
    font-size: 24px;
}
.blog-header h4 {
    font-size: 14px;
}
.blog-content h3 {
    font-size: 16px;
}
.blog-content p {
    font-size: 14px;
}
.filter-btn {
    font-size: 14px;
    padding: 12px 15px;
    width: 100%;
    margin-top: 25px;
    display: flex;
    gap: 10px;
    align-items: center;
  justify-content: space-between;
}
.blog-filter .filter-btn {
    margin-top: 0;
}
.filter-arrow{
    display:block;
}
.filter-arrow{
    transition: transform .3s ease;
}

.banner-icon-2 {
    top: -93px;
    right: 66px;
}
.slide-content {
    bottom: -58px;
}
.pagination {
    padding-top: 76px;
}
.pagination-current {
    font-size: 28px;
}
.blog-filter{
    display:flex;
    flex-direction:column;
    gap:15px;
}
}
@media (max-width: 676px) {
/*-------contact-us---------*/
.info-card-flex {
    width: 45%;
}
.form-heading-flex img {
    display: none;
}
}
@media (max-width: 567px) {
.second-section-card {
    width: 100%;
}

.content-sub-div-one {
    left: -10%;
    bottom: 47%;
}
.comp-headings {
    gap: 10px;
    text-align: center;
}
.portfolio_approach {
    padding-bottom: 20px;
}
.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;
}
/*-----------professional--------------*/
/* Smaller cards on very small screens */
.impact-icon {
    width: 50px;
    height: 50px;
} 
/*-------------testimonial----------------*/

.profile-image {
    margin-bottom: 10px;
}
.rating {
    margin-bottom: 6px;
}
.profile-image {
    width: 50px;
    height: 50px;
}
.testimonal-header {
    align-items: center;
}
/*----------portfolio-----------------*/
.projects-flex .project-button {
    padding: 7px 16px;
}
/*---------footer------------*/
.contact-item a {
    font-size: 14px;
    font-weight: 500;
}
/*-------about-us----------*/
.about-banner {
    padding: 70px 0;
}
.team-cnt {
    grid-template-columns: repeat(2, 5fr);
}
/*------contact-us----------*/
#submitBtn {
    padding: 1.3rem 1.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) {
 .hero-head p {
    width: 100%;
}
h1 {
    font-size: 40px;
}

.second-section-card h4 {
    margin-bottom: 14px;
}
.forth-sec-flex {
    gap: 30px;
}

.impact-heading p {
    width: 100%;
}
.prof-flex {
    gap: 30px;
}
/*--------------faq-----------------------*/
.faq-items-content {
    padding: 25px;
    width: 98%;
    
}
/*-------------testimonal-------------------*/
    .testimonials-slider {
        padding: 0 30px;
    }
    
    .card-inner {
        padding: 25px 20px;
    }
    
   .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%;
}
.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:480px){
.test-cards {
    min-height: 200px;
    text-align:center;
}

.alien-link,
.alien-white {
    width: 50px;
    height: 50px;
}
.footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.footer-nav a {
    display: flex;
    justify-content: center;
    padding: 8px;
}
h2 {
    font-size: 28px;
}
.forth-section-wrapper h2{
    font-size:30px;
}

.content-sub-div-one {
    left: -10%;
    bottom: 45%;
}
.header__wrepp .col-left img {
    width: 40%;
}
.header__wrepp .menu-drawer img {
    width: 80%;
}
.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%;
}
.choose-cards {
    width: 100% !important;
}
.menu-drawer-poppup {
    padding: 50px 15px 15px !important;
}
.sub-menu.active a {
    font-size: 13px;
    margin-left: 30px !important;
}   
.hero-btn {
    width: 100%;
}
.second-section-card {
    width: 100%;              
}
.second-section-card-sub-div h4 {
    font-size: 28px;
}
.logo-marquee-track {
    gap: 30px;
    padding-right: 30px;
}
.logo-marquee img {
    height: 24px;
}
.projects-flex .project-button {
    padding: 8px 16px;
    font-size: 13px;
    gap: 8px;
}
    /* Diagonal lines mobile pe hide */
.projects-flex .diagonal-line {
    display: none;
}
.portfolio_approach_wrapper {
    gap: 20px;
}
.portfolio_app_inner_content {
    padding-bottom: 40px;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.portfolio_app_inner_subheading h4 {
    max-width: 100%;
}
.potfolio_inner_image img {
    width: 40px;
}
.faq-items-content {
    padding: 16px;
}
.faq-items-content p {
    font-size: 14px;
    margin-top: 12px;
}
 .faq-heading-icon {
    top: 16px;
    right: 16px;
}
.faq-heading-icon svg {
    width: 16px;
    height: 16px;
}
.shopify-services {
    padding: 25px 30px;
}
.banners-column {
    gap: 40px;
}
.banner {
    transform: rotate(0deg) !important;
    margin-top: 0 !important;
}
.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;
}
.testimonials-section {
    padding: 40px 16px;
    border-radius: 8px;
}
.test-card {
    padding: 16px;
    font-size: 12px;
    border-radius: 10px;
}
.test-card .avatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
}
.test-card .by {
    font-size: 11px;
}
.badge {
    font-size: 11px;
}
.stars {
    font-size: 18px;
}
.main-section-content h1 strong {
    font-size: 50px;
}
.banner-icon-1 {
    left: -108px;
    top: 100px;
}
.are-cnt-card {
    padding: 24px;
}
.are-cnt-card:last-child {
    grid-column: span 1;
}
.we-are-cnt {
    grid-template-columns: 1fr;
    gap: 16px;
}
}
@media (max-width:425px) {
.hero-crac {
    gap: 5px;
    padding: 10px 5px;
}
.primary-button {
    padding: 13px 16px;
}
.logo-marquee img {
    height: 23px;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}    

.main-section-content p {
    text-align: center;
}
.footer-top-card {
    padding: 26px;
}
.content-sub-div-two {
    top: 7%;
}
.content-sub-div-one {
    bottom: -40%;
    left: -4%;
}
.core-card-cnt p {
    width: 100%;
}    
.comp-headings {
    gap: 10px;
}
.content-sub-div-one img {
    width: 80%;
}
.content-sub-div-one {
    bottom: 50%;
}
.header__wrepp .col-left img {
    width: 76%;
}
.logo-marquee {
    margin: 20px 0;
}
.contact-item {
    gap: 10px;
}
.projects-flex .slide {
    padding-bottom: 7px;
}
.portfolio_approach_wrapper {
    gap: 50px;
}
.faq-items-content p {
    font-size: 15px;
}
.forth-section {
    padding: 40px 0;
}
.prof-grid {
    gap: 20px;
}
}
@media (max-width:320px) {
.hero-crac{
    flex-wrap:wrap;
}
.contact-item a {
    font-size: 12px;
    font-weight: 500;
}
.profile-rate {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}
.profile-image, .rating {
    margin-bottom: 0;
}
.content-sub-div-one {
    bottom: -14%;
    left: 0%;
}
.content-sub-div-two {
    right: -3%;
}

.core-card {
    gap: 20px;
}
}
 @media (min-width: 1025px) and (max-width:1330px){
.main_menu_bar {
    gap: 0px;
}
.main-menu li a{
    font-size: 35px;
}
.alien-link {
    width: 90px;
    height: 90px;
}
}

@media (max-width: 780px) {
    .sub-menu.active li {
        text-transform: capitalize !important;
        padding: 4px 0 !important;
        margin-left: 30px !important;
    }
}