/* ***************************************************
0. colors bg
1. root variables
2. containers
3. text
4. buttons
5. hero
6. sliding logos
7. about us
8. CTA 1
9. Services
10. Projects
11. Testimonials
12. Awards
13. Tech Stack
14. CTA 2
15. Contact Us
16. Footer
17. Projects Page
18. Reviews Page
19. Services Page

*************************************************** */


/* *************************************************** */
/* root */
/* *************************************************** */

:root {

  --purple-gr-start: #270C53;
  --purple-gr-end: #5E1469;

  --orange-gr-start: #FAC565;
  --orange-gr-end: #F97F36;

  --dark-purple: #8D1790;

  --overlay-pink : #D59DB6;

  --dark-blue: #200748;


  --blue-gr-start: #67E4E0;
  --blue-gr-end: #149DFF;

  --my-black: #000000;
  --my-white: #FFFFFF;
  --text-gray : #404040;
  --text-light : #8C8C8C;

  --stroke: #EEEEEE;
  --stroke-2: #D9D9D9;

  --stroke-dark: #aaaaaa;

  --blue: #55D5FF;
  --pink: #FF56F9;
  --yellow: #FFD68F;
  --orange: #FF9F8C;
  --green: #5EDB4D;

  --wpforms-label-error-color : #ed7f80 !important; 

  --inter: 'Inter', sans-serif;
  --dm-mono : 'DM Mono', monospace;

  --padding-40: 40px;
  --padding-36: 36px;
  --padding-24: 24px;
  --padding-16: 16px;


  --max-container : 1240px;

  --services-grid : 280px;


  --hero-heading:2.6rem;
  --as-heading : 2.125rem;
  --hero-para : 1.25rem;

  --font-14 : 0.875rem;
  --font-16 : 1rem;
  --font-18 : 1.125rem;
  --font-20 : 1.25rem;
  --font-22 : 1.375rem;
  --font-24 : 1.5rem;
  --font-28 : 1.75rem;
  --font-30 : 1.875rem;

  --big-projects-height : 560px;
  --big-projects-image : 440px;

  --award-logo-size : 180px;

}

/* *************************************************** */
/* Pagination */
/* *************************************************** */

.as-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.as-pagination .as-page-link {
  padding: 12px 24px;
  border: 1px solid var(--stroke-dark);
  /* background: var(--my-black); */
  text-decoration: none;
  color: var(--my-black);
  border-radius: 50px;
  font-weight: bold;
}
.as-pagination .as-page-link.active,
.as-pagination .as-page-link:hover {
  border-color: var(--my-black);
  color: var(--my-black);
}


/* *************************************************** */
/* colors bg */
/* *************************************************** */
.orange-bg {
  background: linear-gradient(90deg, var(--orange-gr-start), var(--orange-gr-end)) !important;
}
.blue-bg{
  background: linear-gradient(90deg, var(--blue-gr-start), var(--blue-gr-end)) !important;
}

.text-white *{
  color: var(--my-white);
}
.text-white .meta-icon
{
  filter: invert(1);
}
.text-white .project-stats ul li p
.text-white .project-stats ul li h4
{
  color: var(--my-white) !important;
}
.text-white .has-border-right,
.text-white .projects-chips.has-border li
{
  border-color: var(--my-white);
}

.text-link{
  color: var(--dark-purple);
  font-weight: 500;
  font-size: var(--font-16)
}
.text-link:hover{
  color: var(--my-black);
  cursor: pointer !important;
}

/* ///////// black */
.text-black{
  color: var(--my-black) !important;
}
.text-black *{
  color: var(--my-black);
}
.text-black .meta-icon
{
  filter: invert(0);
}
.text-black .project-stats ul li p
.text-black .project-stats ul li h4
{
  color: var(--my-black) !important;
}
.text-black .has-border-right,
.text-black .projects-chips.has-border li
{
  border-color: var(--my-black);
}

p, .entry-content p{
  margin: 0;
  font-size: var(--font-18);
  line-height: 1.3;
}
.text-white h2.as-heading
{
  text-align: left;
}
.text-black h2.as-heading{
  color: black !important;
  text-align: left;
}


html,
body {
  overflow-x: hidden;
  font-family: var(--inter);
}

.mt-1{
  margin-top: 1rem;
}


/* .main-header-bar-wrap */
.ast-theme-transparent-header #masthead{
  position: fixed;
}

.main-header-bar-wrap{
  width: 100%;  
}

.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header.ast-header-break-point .main-header-bar-wrap .main-header-menu,
.ast-theme-transparent-header.ast-header-break-point .main-header-bar-wrap .main-header-bar,
.ast-theme-transparent-header.ast-header-break-point .ast-mobile-header-wrap .main-header-bar {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* .ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header.ast-header-break-point .main-header-bar-wrap .main-header-bar {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
} */

/* .ast-theme-transparent-header .main-header-bar::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 0;
    transform: rotate(25deg);
} */

[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill{
  background-color: var(--my-white);
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg{
  fill: var(--my-black);
}

.text-center{
  text-align: center !important;
}




.d-flex-col {
  display: flex;
  flex-direction: column;
}

.d-flex-row {
  display: flex;
  flex-direction: row;
}

ul,li{
  padding: 0px;
  margin: 0;
  list-style-type: none;
}

/* *************************************************** */
/* containers */
/* *************************************************** */
.site-main {
  width: 100%;
}

.as-container {
  width: 100% !important;
  /* min-height: 100svh; */
  position: relative;
  overflow: hidden;
}



.as-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/grid.svg") repeat center;
  mix-blend-mode: color-dodge;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.as-container-blue-start {
  background:
    linear-gradient(0deg,

      var(--purple-gr-start) 20%,
      var(--purple-gr-end) 100%);
}

.as-container-purple-start {
  background:
    linear-gradient(0deg,

      var(--purple-gr-end) 20%,
      var(--purple-gr-start) 100%);
}


.as-content {
  width: 100%;
  max-width: var(--max-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.as-full-width-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
}


/* *************************************************** */
/* text */
/* *************************************************** */


p.copyright {
    color: white;
    font-size: var(--font-14);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--inter);
  line-height: 1.3;
  font-weight: bold;
}

h2.heading-black{
  color: var(--my-black) !important;
}

h2.as-heading {
  color: var(--my-white);
  font-size: var(--as-heading);
  text-align: center;
  padding: 0;
  margin: 0;
}


.text-blue {
  /* background: linear-gradient(90deg, var(--blue-gr-start), var(--blue-gr-end)); */
  background: linear-gradient(90deg,
      var(--blue-gr-start) 0%,
      var(--blue-gr-end) 140%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  color: transparent;
}

.section-heading p {
  font-size: var(--font-18);
  color: var(--my-white);
  line-height: 1.3;
  margin: 0;
}


/* *************************************************** */
/* buttons */
/* *************************************************** */

.as-btn{
  position: relative;
  overflow: hidden;
  padding: 14px 36px;
  border-radius: 8px;
  font-family: var(--inter);
  font-weight: 600;
  font-size: var(--font-16);
  line-height: 1.5rem;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

.as-btn-black,
.as-btn-white:hover{
  background-color: var(--my-black);
  color: var(--my-white);
}
.as-btn-white,
.as-btn-black:hover
{
  background-color: var(--my-white);
  color: var(--my-black);
}
.as-btn-black span,
.as-btn-white:hover span{
  filter: invert(1);
}
.as-btn-black:hover span{
  filter: invert(0);
}

.as-btn span,
.as-btn-primary-ld span{
  font-size: 1.3rem !important;
  transition: transform 0.3s ease;
  display: inline-block;
}

.as-btn-primary-ld,
.wpforms-submit
{
  position: relative !important;
  overflow: hidden !important;
  padding: 14px 36px;
  background: linear-gradient(90deg, var(--blue-gr-start), var(--blue-gr-end)) !important;
  border-radius: 8px;
  font-family: var(--inter) !important;
  font-weight: 600 !important;
  font-size: var(--font-16) !important;
  line-height: 1.5rem;
  color: var(--my-black) !important;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.1);
  animation: pulse-border 1.8s infinite;
}
.wpforms-submit{
  border-radius: 40px !important;
  padding-inline: 24px !important;
  height: 54px !important;
}

.as-btn-primary-ld img {
  margin-top: -2px;
}

/* Pulse animation */
@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(0, 140, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* .as-btn-primary-ld:hover {
  background: linear-gradient(90deg, var(--blue-gr-end), var(--blue-gr-start));
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
} */

/* Shimmer pseudo-element */
.as-btn-primary-ld::before,
.wpforms-submit::before
{
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg) !important;
  transition: none !important;
}

/* Hover effect */
.as-btn-primary-ld:hover::before,
.wpforms-submit:hover::before
{
  left: 100% !important;
  transition: left 0.4s ease-in-out !important;
}

/* Optional hover tweak */
/* .as-btn-primary-ld:hover {
    background: linear-gradient(90deg, var(--blue-gr-end), var(--blue-gr-start));
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
} */
 .as-btn-primary-ld:hover span,
 .as-btn:hover span
 {
  transform:rotate(-45deg)
 }

/* *************************************************** */
/* hero */
/* *************************************************** */

/* .as-container-hero {
  background:
    url("../images/stars.png") no-repeat center top/contain,
    url("../images/gr-light.png") no-repeat center top/cover,
    linear-gradient(0deg,
      var(--purple-gr-start) 0%,
      var(--purple-gr-start) 20%,
      var(--purple-gr-end) 100%);

  background-blend-mode: color-dodge, overlay, normal;
  transition: transform 0.3s ease-out;
} */

.as-container-hero {
  position: relative;
  background:
    /* url("../images/gr-light.png") no-repeat center top / cover, */
    linear-gradient(0deg, var(--purple-gr-start) 0%, var(--purple-gr-start) 20%, var(--purple-gr-end) 100%);
  background-blend-mode: overlay, normal;
  transition: transform 0.3s ease-out;

  --x-offset: 0px;
  --y-offset: 0px;
}


/* stars layer as pseudo-element */
.as-container-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/stars.png") no-repeat center top / contain;
  mix-blend-mode: color-dodge;
  z-index: 0;
  animation: heartbeat 5s infinite;
  transform: translate(var(--x-offset), var(--y-offset));
  transition: transform 0.1s ease-out;
}

/* optional: content stays above */
.as-container-hero>* {
  position: relative;
  z-index: 1;
}


.hero-overlay{
  width: 150svw;
  aspect-ratio: 1 / 1;
  background-color: var(--overlay-pink);
  position: absolute !important;
  top: 0;
  z-index: 0 !important;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -90%);
  mix-blend-mode: overlay;
  filter: blur(120px);
}

/* .hero-overlay {
  width: 150svw;
  aspect-ratio: 1 / 1;
  background-color: var(--overlay-pink);
  position: absolute !important;
  top: 0;
  z-index: 0 !important;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -90%) scale(1);
  mix-blend-mode: overlay;
  filter: blur(120px);
  animation: overlayMove 10s ease-in-out infinite alternate;
}

@keyframes overlayMove {
  0% {
    transform: translate(-55%, -90%) scale(1);
  }
  50% {
    transform: translate(-45%, -90%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -90%) scale(1);
  }
} */


#as-footer,
#as-hero{
  position: relative;
  
}
.footer-overlay{
  top:unset;
  bottom: 0;
  transform: translate(-50%, 90%);
}

/* heartbeat animation */
/* @keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.05); opacity: 0.4; }
  50% { transform: scale(1); opacity: 1; }
  75% { transform: scale(1.05); opacity: 0.4; }
} */

@keyframes heartbeat {

  0%,
  100% {
    opacity: 1;
  }

  25% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 0.4;
  }
}



#hero-section {
  height: 1080px !important;
  /* max-height: 110svh !important; */
  overflow: hidden;
}

#hero-content {
  margin-top: 108px;
}


.as-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: 52px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  overflow: hidden;

  /* transform: translateY(-100px);
  opacity: 0; */
}

.as-hero-content.slide-down {
  animation: slideDownHero 0.5s ease-out forwards;
}

@keyframes slideDownHero {
  to {
    opacity: 1;
    transform: translateY(0);
  }

}

.as-hero-content h1 {
  text-align: center;
  color: var(--my-white);
  font-family: var(--inter);
  font-size:var(--hero-heading);
  line-height: 1.3;
  font-weight: bold;
}

#feature-text {
  overflow: hidden;
  transition: width 0.15s steps(1);
}

#cursor {
  display: inline-block;
  margin-left: 2px;
  font-weight: normal;
  animation: blink 0.8s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}



.as-hero-graphic {
  position: relative;
  width: 200%;
  display: grid;
  place-items: center;
  transition: ease 1s;
  /* opacity: 0;
  transform: translateY(130px); */
}

.as-hero-graphic.slide-up {
  animation: slideUpHero 0.8s ease-out forwards;
}

@keyframes slideUpHero {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.as-hero-graphic:hover {
  /* transform: scale(1.05);     */
}

.as-hero-content:hover+.as-hero-graphic
{
  transform: scale(1.05);
  transition: transform 1s ease;
}

.as-hero-graphic img {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto; */
}

.hero-img-container {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto; */

  grid-area: 1 / 1;

  /* fade bottom */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 50%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  overflow: hidden;
}

.hero-img {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  /* optional: rotation for each image */
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}


.hero-img-container.rotate1 .hero-img {
  transform: rotate(15deg);
}

.hero-img-container.rotate2 .hero-img {
  transform: rotate(-10deg);
}

.hero-img-container.rotate3 .hero-img {
  transform: rotate(8deg);
}



@keyframes rotate-clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-counter {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.hero-img-container.rotate1 .hero-img {
  animation: rotate-clockwise 30s linear infinite;
}

.hero-img-container.rotate2 .hero-img {
  animation: rotate-counter 45s linear infinite;
}

.hero-img-container.rotate3 .hero-img {
  animation: rotate-clockwise 60s linear infinite;
}

/* *************************************************** */
/* sliding logos */
/* *************************************************** */

.as-container-logo-slider {
  position: relative;
  background: linear-gradient(0deg,
      var(--purple-gr-start) 20%,
      var(--purple-gr-end) 50%,
      var(--purple-gr-start) 80%);
  padding-block: 200px;
}

.as-container-logo-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at center, rgba(213, 157, 182, 1), transparent 100%);
  mix-blend-mode: overlay;
  filter: blur(20px);
  pointer-events: none;
}

#company-logos-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
}



.logo-slider {
  overflow: hidden;
  width: 100%;
}

.logo-slider-track {
  display: flex;
  gap: 50px;
  width: max-content;
  /* ensure the track width fits all logos */
  animation: scroll 20s linear infinite;
}

.logo-slider-track:hover {
  animation-play-state: paused;
  /* pause on hover */
}

.logo-slider-track img {
  height: 48px;
  width: auto;
  flex-shrink: 0;     
  object-fit: contain;
  display: block;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* *************************************************** */
/* about us */
/* *************************************************** */

.as-container-about {
  /* background:
    linear-gradient(0deg,
      
      var(--purple-gr-end) 20%,
      var(--purple-gr-start) 100%); */

}

#as-about-content {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: space-between;
  padding-block: 0 70px;
}

#as-about-content>div {
  flex: 1;
}

.about-content,
.about-text {
  display: flex;
  flex-direction: column;
}

.about-content {
  gap: 60px;
}

.about-content h2.as-heading {
  text-align: left;
}

.about-text {
  gap: 18px;
}

.about-text p {
  color: var(--my-white);
  line-height: 1.4;
  font-size: var(--font-18);
}

.about-stats {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  min-width: 110px;
}

.stat-text {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0px;
}

.stat-label {
  margin: 0;
  color: var(--stroke);
  font-size: 1rem;
  font-weight: 500;
}

.stat-item img {
  width: 40px;
  height: 40px;
}

.stat-number {
  margin: 0;
  color: var(--my-white);
  font-size: var(--font-28);
  font-weight: bold;
}

.about-graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: ease 1s;
  position: relative;
  height: 680px;
}

.about-graphic-stack {
  display: grid;
  place-items: center;
  position: absolute;
  right: -100px;
}

.about-content:hover~.about-graphic {
  transform: scale(1.15);
}

.about-graphic-stack img {
  grid-area: 1 / 1;
}

.about-logo-overlay {
  mix-blend-mode: soft-light;
}

/* Rotate everything except last 3 */
.about-graphic-stack img:not(:nth-last-child(-n+3)) {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

#about-outer.rotate1,
#about-inner.rotate1 {
  transform: rotate(0deg);
}

#about-outer.rotate1,
#about-inner.rotate1 {
  animation: rotate-counter 30s linear infinite;
}

#about-mid.rotate2,
#about-earth.rotate2 {
  transform: rotate(0deg);
}

#about-mid.rotate2,
#about-earth.rotate2 {
  animation: rotate-clockwise 30s linear infinite;
}

/* *************************************************** */
/* CTA 1 */
/* *************************************************** */

.as-container-cta {
  overflow: visible;
  padding-block: 32px;
}

/* .cta{
  background: url("../images/cta-image.png") no-repeat center/contain;
  width: 100%;
  height: 562px;
  display: flex;
  flex-direction: row;
  align-items: end;
  border-radius: 36px;
}
.cta::after {
  content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 120px;
    background: rgb(154 71 176);
    filter: blur(50px);
    border-radius: 50%;
    z-index: -1;
    mix-blend-mode: overlay;
} */

.cta {
  position: relative;
  width: 100%;
  height: 562px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 36px;
}

/* background image as pseudo-element */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/cta-image.png") no-repeat center/cover;
  transition: transform 0.5s ease;
  border-radius: 36px;
  z-index: 0;
  /* behind content */
}

/* shimmer overlay */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg) translateX(-100%);
  z-index: 1;
  /* above background image, below content */
  pointer-events: none;
  /* let mouse events pass through */
  transition: none;
  opacity: 0;
}

/* shadow blur */
/* .cta::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: 120px;
  background: rgb(154 71 176);
  filter: blur(50px);
  border-radius: 50%;
  mix-blend-mode: overlay;
  z-index: 1;
} */

.fake-shadow {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: 120px;
  background: rgb(154 71 176);
  filter: blur(50px);
  border-radius: 50%;
  mix-blend-mode: overlay;
  z-index: -2;
  /* above background but below content */
}

/* content above all */
.cta>* {
  position: relative;
  z-index: 2;
}

/* hover effect: only image scales */
/* .cta:hover::before {
  transform: scale(1.1);
} */

/* animate shimmer on hover */
.cta:hover::after {
  transform: skewX(-20deg) translateX(130%);
  transition: transform 0.8s ease-in-out;
  opacity: 1;
}

/* existing hover scale for background image */
.cta:hover::before {
  transform: scale(1.1);
}

.cta>div:nth-child(1) {
  flex: 3;
}
.cta>div:nth-child(2) {
  flex: 2;
}

.cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
}

.cta-text h2.as-heading {
  text-align: left;
}

.cta-text p {
  color: var(--my-white);
  line-height: 1.3;
  font-size: var(--font-18);
  padding: 0;
  margin: 0;
}

.cta-text div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* *************************************************** */
/* Services */
/* *************************************************** */



/* model */
.modal {
  display: none; 
  position: fixed; 
  z-index: 9999; 
  left: 0; top: 0; 
  width: 100%; height: 100%; 
  background: rgba(0,0,0,0.6);
  overflow-y: auto;
}
.model-bottom{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-content {
  background: linear-gradient(135deg, var(--my-white), #F4ECFF);
  margin: 10% auto;
  padding: 40px;
  width: 60%;
  border-radius: 8px;
  /* position: relative;
  z-index: 888; */
}

.modal-close {
  /* position: absolute;
  top: 18px;
  right: 32px; */
  cursor: pointer;
  font-size: 30px;
}
.model-services-content{
  display: flex;
  margin-top: 6px;
  flex-direction: column;
  gap:32px;
  position: relative;
  align-items: start;
  min-height: 400px;
}
.model-services-content p{
  font-size: var(--font-16);
  color: var(--my-black);
}

.model-services-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* 3 equal columns */
    gap: 10px 20px; /* row gap 10px, column gap 20px */
    list-style: none;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}
img.model-image{
  width: 300px;
  position: absolute;
  bottom: 0px;
  right: 0;
}
/* ********************** */
/* ********************** */

#as-services-content {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: flex-start;
  padding-block: 160px;
}

/* #services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    url("../images/as-glass.png") no-repeat left/contain,
    url("../images/as-glass-bg.png") no-repeat left/contain 0.2;
  background-blend-mode: luminosity, multiply;
  z-index: 999;
} */

#services-section {
  position: relative;
}

#services-section .services-overlay::before,
#services-section .services-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#services-section .services-overlay::before {
  background: url("../images/as-glass.png") no-repeat left/contain, url("../images/as-glass.png") no-repeat left/contain;
  mix-blend-mode: luminosity;
  z-index: 1;
  transform: scale(0.9);
  transform-origin: left;
}

/* #services-section .services-overlay::after {
  background: url("../images/as-glass-bg.png") no-repeat left/contain,url("../images/as-glass-bg.png") no-repeat left/contain;
  mix-blend-mode: soft-light;
  z-index: 2;
} */

#services-section .services-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  /* centers the element */

  left: -80px;
  width: 700px;
  height: 700px;
  background-color: var(--my-white);
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}

.services-wrapper {
  background-color: var(--dark-blue);
  padding: 40px 0 40px 40px;
  border-radius: 36px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
  /* width: max-content; */
}

.services-heading {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  /* max-width: 1280px; */
  max-width: calc(var(--max-container) - 3%);
}

.services-heading h2 {
  text-align: left;
  flex: 2
}

.services-heading div {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: end;
  flex: 2;
}

.services-heading p {
  color: var(--my-white);
  font-size: var(--font-18);
  line-height: 1.3;
  max-width: 350px;
}


.services-list::-webkit-scrollbar {
  display: none;
}

.services-item-wrapper {
  flex: 1;
  /* width: 350px; */
  width: var(--services-grid);
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg,
      rgba(39, 12, 83, 0) 0%,
      rgb(180, 17, 205, 0.4) 30%,
      #5E1469 80%,
      rgb(180, 17, 205, 0.9) 100%);
  display: flex;
  /* flex: 0 0 auto;          */
  transform: translateX(1000px);
  opacity: 0;
  /* animation: slideInUp 0.6s forwards; */
  /* scroll-snap-align: center; */
}

.services-item {
  flex: 1;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  gap: 16px;
  /* padding-block: 44px; */
}

/* .services-list{
  padding-right: 40px;
  display: flex;
  flex-direction: row;
  gap:40px;
  align-items: start;
  justify-content: center;
}
.services-item{
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  position: relative;
  overflow: hidden;
  flex: 1;
}
.services-item-wrapper{
 border-radius: 12px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(39, 12, 83, 0) 0%,
    rgba(94, 20, 105, 0.3) 30%,
    #5E1469 100%
  );
  display: flex;
  flex:1; 
} */
.services-item>* {
  z-index: 3;
}

.services-item::after {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 240px;
  height: 240px;
  background-color: var(--my-white);
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 4;
}

/* Ellipse with var(--overlay-pink), blur + overlay */
.services-item::before {
  content: "";
  position: absolute;
  width: 130%;
  height: 160px;
  background-color: var(--overlay-pink);
  border-radius: 50% / 50%;
  filter: blur(50px);
  mix-blend-mode: overlay;
  pointer-events: none;
  bottom: -30px;
  z-index: 2;
}



.service-item-text {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
}

.service-item-text h3 {
  color: var(--my-white);
  font-size: var(--font-20);
  text-align: left;
}

.link-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  font-weight: normal;
  color: var(--my-white);
  font-size: var(--font-28);
  transform: rotate(-45deg);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.link-arrow:hover {
  background: linear-gradient(90deg, var(--blue-gr-start), var(--blue-gr-end));
  color: var(--my-black);
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}


.services-item img {
  transition: transform 0.4s ease, filter 0.4s ease;
  border-radius: 8px;
  /* optional: smooth corners */
}

/* On hover, scale up slightly and add a subtle brightness */
/* .services-item:hover img {
  transform: scale(1.05) translateY(-5px);
  filter: brightness(1.2);
} */

/* When hovering a services-item */
/* .services-list:hover .services-item {
  filter: saturate(0.3) blur(1px);
  transition: filter 0.3s ease;
  
}


.services-list .services-item:hover {
  filter: saturate(1);
} */

/* Optional: keep image hover effect */
.services-item:hover img {
  transform: scale(1.05) translateY(-5px);
  filter: brightness(1.1);
}

/* .services-list {
  display: flex;
  gap: 40px;
  padding-right: 40px;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  overflow-x: auto;
  transition: transform 0.3s ease;
} */

.services-list {
  display: grid;
  grid-auto-flow: column;
  /* grid-auto-columns: minmax(350px, 1fr); */
  gap: 40px;
  padding-right: 40px;
  justify-content: start;
  /* align-items: flex-start; */
  align-items: stretch;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  transition: transform 0.3s ease;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 32px;
}

.slider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.slider-button .link-arrow {
  background-color: var(--dark-purple);
  padding: 24px;
  transform: rotate(0deg);
}

.services-list-wrapper {
  /* width: 90%; */
  width: 90svw;
  overflow: hidden;

}



.services-item-wrapper.slide-in {
  animation: slideInUp 0.6s forwards;
}

@keyframes slideInUp {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.services-item-wrapper.services-item-wrapper-dummy.slide-in {
  visibility: hidden;
}

/* *************************************************** */
/* 10. Projects */
/* *************************************************** */
.as-container-projects {
  padding-block: 0px 120px;
  display: flex;
  flex-direction: column;
  gap: 72px;
  align-items: center;
  justify-content: center;
  /* z-index: -1; */
}

#as-projects-heading-content {
  align-items: start;
}

.projects-heading-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.projects-heading-wrapper .section-heading{
  flex: 8;
}

.as-projects-slider-wrapper{
  position: relative;
}

.as-projects-slider-wrapper .slider-button{
  /* z-index: 4;
  position: relative;
  margin-top: 32px; */
  z-index: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--max-container) + 60px);
  justify-content: space-between;
    /* width: 1360px;
    z-index: 4;
    justify-content: space-between;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */
}
.as-projects-slider-wrapper .slider-button .link-arrow{
  border: 4px solid var(--purple-gr-start);
}

.project-slides-wrapper{
  z-index: 1;
  width: 100svw;
  overflow-x: auto;
  position: relative;
  margin: 0 auto;
  scroll-behavior: smooth;
  /* display: flex;
  justify-content: center;  */
}

.project-slides-wrapper::-webkit-scrollbar {
  display: none;
}

/* .as-projects-slider {
  overflow: hidden;
  width: max-content;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: start;
  justify-content: center;

} */

.as-projects-slider {
  transform: translateX(2000px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--max-container), 1fr);
  gap: 40px;
  padding: 0 50vw;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  align-items: flex-start;
   
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.as-projects-slider.slide-in {
  animation: slideInUp 1s forwards;
}

.as-projects-slide-item {
  scroll-snap-align: center;
  position: relative;
  height: 100%;
  min-height: var(--big-projects-height);
}

/* for projects page */
/* ////// */

.as-projects-wrapper{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.as-projects-wrapper .as-project-details{
  flex:3;
}
.as-projects-wrapper .as-project-image{
  flex:2
}
.as-projects-wrapper .as-projects{
  align-items: center;
  padding: 32px;
  min-height: 450px;
  gap: 24px;
  border-radius: 24px;
}
.as-projects-wrapper .as-project-details{
  gap:20px;
}
.as-projects-wrapper .projects-chips
{
  gap: 12px;
  margin: 0;
  padding: 0;
}
.entry-content ul{
  padding: 0 !important;
  margin: 0 !important;
}
.as-projects-wrapper .as-projects .projects-chips li
{
  gap:8px;
  font-size: 1rem;
}
.as-projects-wrapper .meta-icon
{
  width: 22px;
  height: 22px;
}
.as-projects-wrapper .project-headings{
  gap:8px;
}
.as-projects-wrapper .project-headings h3
{
  font-size: var(--font-20);
  line-height: 1.3;
  margin: 0;
}
.as-projects-wrapper .project-headings p
{
  font-size: 1rem;
  margin: 0;
}
.as-projects-wrapper .project-stats ul
{
  gap:22px;
}

.as-projects-wrapper .project-stats ul li h4{
  font-size: 1.15rem;
}
.as-projects-wrapper .project-stats ul li p
{
  font-size: 0.9rem;
}
.as-projects-wrapper .project-stats ul
{
  margin: 0;
  padding: 0;
}
.as-projects-wrapper .as-project-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.as-projects-wrapper .as-project-image img{
  height: auto;
  width: 400px;

}
.as-projects-wrapper a.as-btn
{
  font-size: 1rem;
  padding: 14px 24px;
}
/* for projects page */
/* ////// */

.as-projects {
  position: relative;
  overflow: hidden;
  padding: 36px;
  height: 100%;
  /* min-height: var(--big-projects-height); */
  /* width: 1320px; */
  border-radius: 36px;
  z-index: 4;
  background: linear-gradient(90deg, var(--purple-gr-start), var(--purple-gr-end));
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: start;
  justify-content: space-between;
  
}

.as-project-image {
    display: flex;
    align-items: center;
    justify-content: end;
    transition: all 0.5s ease;
    transform-origin: right center;
}
.as-project-image img{
  height: var(--big-projects-image);
  object-fit: contain;
}

.as-projects:hover .as-project-details + .as-project-image {
    transform: scale(1.1);
    filter: brightness(1.1);
    /* transition: transform 0.3s ease; */
}


.as-projects>div{
  z-index: 10;
  flex: 1;
}


.as-projects::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 100%;
  background-color: var(--my-white);
  border-radius: 50% / 50%;
  pointer-events: none;
  z-index: 5;
  filter: blur(30px);
  mix-blend-mode: soft-light;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.as-projects::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/as-shape-mask.svg") no-repeat right / cover;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.7;
  z-index: 6;
  pointer-events: none;
}



.fake-shadow-projects {
  content: "";
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 99%;
  height: 100px;
  /* background: var(--my-white); */
  /* background-color: rgb(160 65 255 / 50%); */
  background-color: rgba(153, 71, 176, 0.5);
  filter: blur(10px);
  border-radius: 50%;
  mix-blend-mode: overlay;
  z-index: 0;
}

.as-project-details{
  display: flex;
  flex-direction: column;
  gap:24px;
  align-items: start;
  justify-content: start;
  width: 100%;
}

.projects-chips{
  font-family: var(--dm-mono);
  font-weight: 500;
  font-size: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 16px;
}
.projects-chips li{
  display: flex;
  flex-direction: row;
  gap: 10px;
  font-size: var(--font-16);
  align-items: center;
  justify-content: center;
}
.meta-icon {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
}
.pr-meta-type{
  
  background: url("../images/projects-assets/project.svg") no-repeat center/contain;
}
.pr-meta-time{
  background: url("../images/projects-assets/time.svg") no-repeat center/contain;
}
.pr-meta-country{
  background: url("../images/projects-assets/country.svg") no-repeat center/contain;
}

.projects-chips.has-border li{
  border: 1px solid var(--my-black);
  padding: 4px 18px !important;
  border-radius: 8px;
}
.project-stats{
  width: 100%;
}
.project-stats ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 32px;
}
.project-stats ul li{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 2px;
}
.project-stats ul li p{
  font-size: var(--font-16);
  /* color: var(--my-black); */
}
.project-stats ul li h4{
  font-size: var(--font-22);
  /* color: var(--my-black); */
  font-weight: bold;
  margin: 0;
}
.has-border-right{
  border-right: 1px solid var(--my-black);
  height: -webkit-fill-available;
}

.project-headings{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: start;
  justify-content: start;
}
.projects-heading.section-heading{
  flex: 8;
}
.project-headings p{
  font-size: var(--font-18);
  line-height: 1.3;
  font-family: var(--inter);
  max-height: 200px;
  overflow-x: auto;
}
.project-headings h3{
  font-size: var(--font-22);
  font-family: var(--inter);
}
.project-category, .project-stats, .project-tech{
  padding-top: 8px;
}
.project-cta{
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: start;
  padding-top:16px ;
}



/* *************************************************** */
/* 11. Testimonials */
/* *************************************************** */

/* #testimonials-section{
  
} */

.testimonials-section-wrapper{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 60px;
  
}

.testimonials-section-wrapper::after,
.testimonials-section-wrapper::before {
  z-index: 0; /* behind content */
}
.testimonials-section-wrapper > * {
  position: relative;
  z-index: 1; /* content above pseudo-elements */
}

.testimonials-section-wrapper::after {
  /* right */
  content: "";
  position: absolute;
  width: 250px;
  height: 60%;
  background-color: var(--my-white);
  border-radius: 50% / 50%;
  mix-blend-mode: overlay;
  top: 15%;             
  right: -150px;        
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  transform: rotate(125deg) scale(1.4);
  filter: blur(90px);
}

.testimonials-section-wrapper::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 60%;
  background-color: var(--my-white);
  border-radius: 50% / 50%;
  mix-blend-mode: overlay;
  top: 20%;             
  left: -150px;        
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  transform: rotate(-125deg) scale(1.4);
  filter: blur(90px);
}

.testimonials-content{
  width: var(--max-container);
  margin: 0 auto;
  padding-bottom: 60px;
}

.testimonials-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px; /* spacing between rows */
}


.testimonials-item-wrapper{
  width: 100%;
  transition: all 0.2s ease-in;
}
.testimonials-item.slide-in {
  animation: slideInUp 0.6s forwards;
}
.testimonials-item-wrapper:hover{
  /* transform: rotate(-3deg); */
  transform: translateY(-5px);
  transition: transform 0.2s ease-in;
}

.row-2 .testimonials-item-wrapper,
.row-3 .testimonials-item-wrapper {
  flex: 1;
  display: flex;
}

/* optional: style the testimonial cards */
.testimonials-item {
  transform: translateX(1000px);
  opacity: 0;
  /* background: var(--my-white); */
  background: linear-gradient(135deg, var(--my-white), #F4ECFF);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 32px;
}
.testimonials-item .review-content div{
  display: flex;
  flex-direction: column;
  gap:24px;
  align-items: start;
}
.review-content{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    justify-content: space-between;
    gap:16px;
}

/* stars */

.review-star {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.star {
  width: 24px;
  height: 24px;
  background-color: var(--stroke-dark); /* empty star default */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  position: relative;
  border-radius: 1.5px; /* smooth corners */
}

/* Full star */
.star.full {
  background-color: var(--dark-purple);
}

/* Half star using a pseudo element overlay */
.star.half::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--dark-purple);
  clip-path: unset;
  border-radius: inherit;
}

/* Empty stars remain gray */
.star.empty {
  background-color: var(--stroke-dark);
}

p.review-message{
  font-family: var(--inter);
  font-size: var(--font-16);
  line-height: 1.3;
  color: var(--my-black);
}
.review-user{
  display: flex;
  flex-direction: row;
  gap: 16px;
  /* padding-top:12px; */
  align-items: center;
  justify-content: start;
}
.review-user img{
  background-color: var(--text-gray);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.review-user-meta{
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.review-user-meta h5{
  font-family: var(--inter);
  font-size: var(--font-20);
  color: var(--my-black);
}
.review-user-meta p{
  color: var(--text-gray);
  font-size: var(--font-14);
}

/* *************************************************** */
/* Awards */
/* *************************************************** */

/* .as-container-services{
  padding-block: 80px;
  background-color: pink;
} */
.as-container-awards{
  padding-block: 80px;
}

#as-awards-content {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 72px;
  /* padding-block: 160px; */
}
#as-awards-content .section-heading{
  align-items: center;
  text-align: center;
}


#awards-section {
  position: relative;
}

#awards-section .services-overlay::before,
#awards-section .services-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#awards-section .services-overlay::before {
  background: url("../images/as-glass-logo.png") no-repeat right/contain, url("../images/as-glass-logo.png") no-repeat right/contain;
  mix-blend-mode: luminosity;
  z-index: 1;
  right: -5%;
  transform: scale(0.8);
  transform-origin: right;
}

#as-awards-content p{
  text-align: center;
}


#awards-section .services-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(50%, -50%) scale(0.8);
  width: 700px;
  height: 700px;
  background-color: var(--my-white);
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}


.awards-logo-wrapper {
  width: var(--max-container);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.award-logo{
  width: var(--award-logo-size);
  /* height: 250px; */
  aspect-ratio: 1/1;
  transform: translateY(200px);
  opacity: 0;
}

.award-logo.slide-up {
  animation: slideUp 0.6s forwards;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* *************************************************** */
/* Tech Stack */
/* *************************************************** */

section#tech-section{
  padding-block:32px;
}

#as-tech-content {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 56px;
  padding-block: 60px;
}
#as-tech-content .section-heading{
  align-items: center;
  text-align: center;
}

.tech-chip-wrapper li{
  color: var(--my-white);
  border-color:var(--my-white)  !important;
  padding: 0 !important;
}
.tech-chip-wrapper li a{
  color: var(--my-white);
  font-size: var(--font-16);
  width: 100%;
  height: 100%;
  padding: 4px 18px !important;
  transition: all 0.2s ease-in;
}
#tech-section .projects-chips.has-border li{
  padding: 0 !important;
}
.tech-chip-wrapper li a:hover
{
  color: var(--my-black);
  border-radius: 6px;
  background-color: var(--my-white);
}
.has-bg-white{
  background-color: var(--my-white);
}
.tech-chip-wrapper li.active a,li.tech-chip.active {
  background-color: var(--my-white);
  color: var(--my-black);
  border-radius: 6px;
}

.tech-logo-wrapper {
  width: var(--max-container);
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}
.tech-logo{
  border-radius: 16px;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: var(--my-white);
  padding: 24px;
  font-family: var(--dm-mono);
  font-weight: 600;
  font-size: var(--font-16);
  max-width: 200px;
  gap: 4px;

  transform: translateY(200px);
  opacity: 0;
}

.tech-logo.slide-up {
  animation: slideUp 0.6s forwards;
}

.tech-logo img{
  width: 64px;
  aspect-ratio: 4/3;
  object-fit: contain;
}

/* *************************************************** */
/* CTA 2 */
/* *************************************************** */

#as-cta-content-2{
  padding-block: 56px;
}
#as-cta-content-2 .fake-shadow{
  bottom: 60px;
}
.cta-2::before
{
  background: url(../images/cta-2-image.jpg) no-repeat center / cover;
  border-radius: 36px;
}
.cta-2 .cta-text,
.cta-2 .cta-text div{
  align-items: center;
  text-align: center;
}

/* *************************************************** */
/* Contact Us */
/* *************************************************** */

/* #contact-section {
  position: relative;
}

#contact-section .services-overlay::before,
#contact-section .services-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#contact-section .services-overlay::before {
  background: url("../images/as-glass-logo.png") no-repeat right/contain, url("../images/as-glass-logo.png") no-repeat right/contain;
  mix-blend-mode: luminosity;
  z-index: 1;
  right: -5%;
  transform: scale(0.8);
  transform-origin: right;
}
#contact-section .services-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(50%, -50%) scale(0.8);
  width: 700px;
  height: 700px;
  background-color: var(--my-white);
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
} */

/* Blur circles */

#contact-section{
  /* padding-block: 72px; */
  padding-block: 24px;
}

#contact-section .services-overlay::before,
#contact-section .services-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 500px;
  height: 500px;
  background-color: var(--my-white);
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;

  /* animation: pulse 6s ease-in-out infinite alternate; */
}

#contact-section .services-overlay::before {
  left: 0;
  transform: translate(-70%, -50%) scale(1);
  animation-delay: 0s;
  transform-origin: left;
}

#contact-section .services-overlay::after {
  right: 0;
  transform: translate(70%, -50%) scale(1);
  transform-origin: right;
  animation-delay: 3s; 
}

/* @keyframes pulse {
  0% {
    transform: translate(-70%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-70%, -52%) scale(2);
    opacity: 1;
  }
  100% {
    transform: translate(-70%, -50%) scale(1);
    opacity: 0.7;
  }
} */



/* Images on top of the blur */
#contact-section .services-overlay .overlay-image-left,
#contact-section .services-overlay .overlay-image-right,
#as-hero .services-overlay .overlay-image-right img,
#as-hero .services-overlay .overlay-image-left img
{
  position: absolute;
  top: 50%;
  height: 100%;
  /* max-height:500px; */
  transform: translateY(-50%);
  mix-blend-mode:luminosity;
  z-index: 0;
}

#contact-section .services-overlay .overlay-image-left div,
#contact-section .services-overlay .overlay-image-right div
{
  display: flex;
}
#contact-section .services-overlay .overlay-image-left div img,
#contact-section .services-overlay .overlay-image-right div img
{
  height: unset;
}


#contact-section .services-overlay .overlay-image-left,
#as-hero .services-overlay .overlay-image-left img
{
  left: 0;
  transform: translate(-40%, -50%);
}

#contact-section .services-overlay .overlay-image-right,
#as-hero .services-overlay .overlay-image-right img
{
  right: 0;
  transform: translate(40%, -50%) scaleX(-1);
}

#as-contact-content{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}



.as-contact-info h2.as-heading{
  align-items: start;
  text-align: left;
}
.as-contact-info{
  flex:3;
  display: flex;
  align-items: start;
  text-align: left;
  gap:40px
}
ul.contact-features{
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--my-white);
  font-size: 1rem;
  font-weight: 500;
}
ul.contact-features li,
ul.contact-detail li a
{
  display: flex;
  flex-direction: row;
  gap: 16px;
  font-size: var(--font-16);
  align-items: center;
  justify-content: start;
}
ul.contact-detail li{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: start;
  justify-content: start;
}
.feature-list {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.feature-list::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left: 0 */
  border-radius: 50%;
  z-index: 0;
}

.feature-list::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/contact/check.svg') no-repeat center;
  z-index: 1;
}

.list-white::after{
  filter: invert(1);
}


#feature-blue::before{
  background-color: var(--blue);
}
#feature-black::before{
  background-color: var(--my-black);
}
#feature-purple::before{
  background-color: var(--dark-purple);
}
#feature-pink::before{
  background-color: var(--pink) !important;
}
#feature-yellow::before{
  background-color: var(--yellow) !important;
}

#address{
  margin-block: 32px;
}

ul.contact-detail{
  
  display: flex;
  flex-direction: row;
  gap: 40px;
  color: var(--my-white);
  font-size: 1.2rem;
  font-weight: 600;
  width: 100%;
  /* line-height: 1.3; */
}
ul.contact-detail p{
  font-size: var(--font-16);
  font-weight: 600;
  width: 80%;
  line-height: 1.4;
}
ul.contact-detail li div{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:16px;
}

ul.contact-detail li img{
  width: 44px;
  height : 44px;
  border-radius: 50%;
}
ul.contact-detail li a{
  color: var(--my-white);
  font-size: var(--font-18);
}
ul.contact-detail li a:hover{
  text-decoration: underline;
}

.as-form-section{
  flex: 2;
  background-color: var(--dark-blue);
  padding: 40px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap:24px;
}
.as-form-section h2.as-heading{
  font-size: 2rem;
  text-align: start;
}

/* *************************************************** */
/* Footer Form */
/* *************************************************** */

.wpforms-field-container{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  justify-content: start;
}
.wpforms-field-container input,
.wpforms-field-container select,
.wpforms-field-container textarea{
  background: transparent !important;
  border: 1px solid var(--dark-purple) !important;
  border-radius: 10px !important;
  color: var(--my-white) !important;
  max-width: 100% !important;
  min-height: 50px !important;
}
.wpforms-field-container input::placeholder,
.wpforms-field-container select::placeholder,
.wpforms-field-container textarea::placeholder{
  color: var(--my-white) !important;
  opacity: 0.5;
}

.wpforms-field-container input:focus,
.wpforms-field-container select:focus,
.wpforms-field-container textarea:focus{
  border-color: var(--stroke-dark) !important;
}

.as-form-input{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
}

.wpforms-submit{
  margin-top: 18px !important;
  padding: 14px 36px !important;
}
.wpforms-submit::after {
  content: " ->";
  font-size: 1.3rem !important;
  display: inline-block;       /* so transform works */
  transition: transform 0.3s ease;
}

.wpforms-submit:hover::after {
  transform: rotate(-45deg);
}



/* *************************************************** */
/* Projects Page */
/* *************************************************** */
.as-filters{
  display: flex;
  flex-direction: column;
  gap:24px;
}
.as-filter-group{
  padding: 24px;
  border: 1px solid var(--stroke-2);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.as-filter-group h4{
  font-family: var(--inter);
  font-size: 1.25rem;
  margin: 0;
}
.as-filter-group ul{
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.as-filter-group ul li label{
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: start;
  cursor: pointer;
}
.as-filter-group ul li p{
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: var(--inter);
  color: var(--text-gray);
}

/* Reset default radio look */
.as-filters input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666;
  border-radius: 4px;
  outline: none;
  
  position: relative;
  transition: all 0.2s ease;
}

/* Checked state */
.as-filters input[type="checkbox"]:checked {
  border-color: var(--text-gray);
  background-color: var(--text-gray);
}

/* Inner dot */
.as-filters input[type="checkbox"]:checked::after {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--my-white);
  border-radius: 4px;
  border: 6px solid var(--my-black);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.as-info-section{
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-block: 80px 120px !important;
}

.as-info-header{
  align-items: center;
}
.as-info-header p,
.as-info-header h2{
  margin: 0;
  padding: 0;
  color: var(--my-black);
}
.as-info-header p{
  font-size: var(--font-18);
}
.as-info-section{
  width: var(--max-container);
  margin: 0 auto;
}

.as-info-features{
  display: flex;
  width: 100%;
  flex-direction: row;
  /* gap: 24px; */
  align-items: center;
  justify-content: space-between;
}
.as-info-features .separator{
  width: 1px;
  height: 88px;
  background-color: var(--stroke-dark);
}
.feature-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
}
.feature-box p{
  margin: 0;
  padding: 0;
  font-family: var(--inter);
  font-weight: 600;
  font-size: var(--font-18);
  text-align: center;
}
.feature-box .feature-list,
.feature-box .feature-list::before,
.feature-box .feature-list::after{
    width: 44px;
    height: 44px;
}
.feature-box .feature-list::after{
  z-index: 1;
}

#feature-quality::before { background-color: var(--blue);  }
#feature-quality::after {  background: url('../images/features/quality.svg') no-repeat center; }

#feature-fast::before { background-color: var(--pink);  }
#feature-fast::after {  background: url('../images/features/fast.svg') no-repeat center; }

#feature-solution::before { background-color: var(--yellow);  }
#feature-solution::after {  background: url('../images/features/custom-solution.svg') no-repeat center; }

#feature-expert::before { background-color: var(--green);  }
#feature-expert::after {  background: url('../images/features/expert.svg') no-repeat center; }

#feature-tech::before { background-color: var(--orange);  }
#feature-tech::after {  background: url('../images/features/tech.svg') no-repeat center; }


/* *************************************************** */
/* Reviews Page */
/* *************************************************** */
.as-project-review{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}
.as-all-reviews{
  display: flex;
  flex-direction: column;
  gap:24px;
  align-items: start;
  justify-content: center;
  padding-block: 0 80px;
}
.review-image img{
  z-index: 9;
}
.review-image{

  width: 300px;
  min-width: 300px;
  height: 300px;
  min-height: unset;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 24px;
}
.review-detail{
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 40px;
}
.text-small{
  font-size: 1rem;
}

.as-review-summary{
  padding-block: 60px;
  display: flex;
  width: 100%;
  gap: 24px;
  flex-direction: row;
  justify-content: space-between;
}
.as-review-left{
  flex:3 !important;
  flex-direction: row !important;
  align-items: stretch;
  gap:120px !important;
  justify-content: space-between;
}
.as-review-summary > *,
.as-review-left > *{
  flex:1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.as-review-summary h4{
  font-weight: 600;
}
ul.review-summary{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.review-summary li{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--text-gray);
}
.total-avg-rating{
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
}
.total-avg-rating div{
  display: flex;
    flex-direction: column;
    align-items: end;
    gap: 8px;
}

.counter-bar {
    position: relative;       /* make it a container for absolute child */
    display: block;           /* block to allow full width */
    height: 8px;
    background-color: var(--stroke); /* base bar color */
    border-radius: 5px;
    overflow: hidden;         /* ensures filled bar doesn't overflow */
    flex-grow: 1;
    margin: 0 8px;
}

.counter-bar-filled {
    position: absolute;       /* position inside counter-bar */
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--dark-purple); /* filled color */
    width: 0;
    transition: width 0.5s ease; /* animate */
    border-radius: 5px;
}

#total-reviews li p{
  width: 60px;
  font-size: var(--font-16);
}

.as-all-reviews p,
.as-all-reviews h1,
.as-all-reviews h2,
.as-all-reviews h3,
.as-all-reviews h4,
.as-all-reviews h5,
.as-all-reviews h6,
.as-all-reviews ul, .as-all-reviews li,
.as-review-summary p,
.as-review-summary h1,
.as-review-summary h2,
.as-review-summary h3,
.as-review-summary h4,
.as-review-summary h5,
.as-review-summary h6,
.as-review-summary ul, .as-review-summary li
{
  margin: 0 !important;
  padding: 0 !important;
}

/* *************************************************** */
/* Services Page */
/* *************************************************** */
.all-services-wrapper{
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding-block: 40px 0px;
}
.service-item{
  display: flex;
  flex-direction: row;
  gap: 24px;
  /* background: linear-gradient(135deg, var(--my-white), #F4ECFF); */
  /* border: 1px solid var(--stroke);
  border-radius: 24px;
  padding: 40px; */

}
.service-item.odd{
  flex-direction: row-reverse;
  /* background: linear-gradient(135deg, #F4ECFF,var(--my-white)); */
}
.service-image{
  flex:1;
}
.service-image img{
  width: 80%;
}
.service-description{
  font-size: 1.25rem;
}
.service-content{
  flex:1;
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: start;
  justify-content: center;
}
.service-content-heading{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: start;
}

/* *************************************************** */
/* About Page */
/* *************************************************** */

.as-feature-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.as-feature-grid .feature-box{
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, var(--my-white), #F4ECFF);
  border-radius: 24px;
  align-items: center;
  justify-content: center;
}
.as-feature-grid .feature-box div h5,
.as-feature-grid .feature-box div p{
  padding: 0;
  margin: 0;
  font-size: var(--font-20);
}
.as-feature-grid .feature-box div p{
  font-size: var(--font-16);
}
.as-feature-grid .feature-box div{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100px;
  justify-content: flex-start;
}
.as-feature-grid .feature-box p{
  font-size: 1.15rem;
  font-weight: normal;
}

#feature-rocket::before { background-color: var(--blue);  }
#feature-rocket::after {  background: url('../images/about-us/rocket.svg') no-repeat center; }

#feature-robot::before { background-color: var(--pink);  }
#feature-robot::after {  background: url('../images/about-us/robot.svg') no-repeat center; }

#feature-sdk::before { background-color: var(--yellow);  }
#feature-sdk::after {  background: url('../images/about-us/sdk.svg') no-repeat center; }

#feature-growth::before { background-color: var(--green);  }
#feature-growth::after {  background: url('../images/about-us/growth.svg') no-repeat center; }

#feature-design::before { background-color: var(--orange);  }
#feature-design::after {  background: url('../images/about-us/draw.svg') no-repeat center; }

#feature-collab::before { background-color: var(--overlay-pink);  }
#feature-collab::after {  background: url('../images/about-us/collab.svg') no-repeat center; }


/* Grid container */
.team-grid {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

/* Team member card */
.team-member {
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease;
    position: relative;
    border-radius: 16px;
}

.team-member img {
    width: 300px;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
    border-radius: 16px;    
}

.team-member:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
    border-radius: 16px;
}

.team-member .team-name {
    font-weight: 600;
}

.team-name{
  font-size: 1.2rem;
}
.team-member .team-role {
    font-size: 14px;
    color: var(--my-white);
}
.person-detail{
    background: linear-gradient(180deg, transparent 0%, var(--dark-purple));
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    padding-bottom: 24px;
    gap: 2px;
    color: var(--my-white);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    /* backdrop-filter: blur(3px); */
}

.custom-padding{
  padding-block: 0 140px !important;
}

/* *************************************************** */
/* About Page */
/* *************************************************** */

.contact-page-form{
  padding-block: 140px 20px !important;
  background: transparent !important;
}
.contact-page-form h2.as-heading,
.contact-page-form ul.contact-features,
.contact-page-form ul.contact-detail li a,
.contact-page-form ul.contact-detail,
.contact-page-form .section-heading p
{
  color: var(--my-black);
}

.contact-page-form .img-invert{
  filter: invert(1);
}
.contact-page-form  .as-form-section h2.as-heading{
  color: var(--my-white) !important;
}

.contact-page-form ul{
  padding: 0;
}


/* /////////////////////////////////////// */
/* Single Project  */
/* /////////////////////////////////////// */
#single-project-page{
  width: 100%;
}
#project-hero{
  border-radius: 0;
  height:620px;
  width: 100%;
  display: block;
}
.project-hero-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.as-project-page-hero{
  width: var(--max-container);
  margin: 0 auto;
  display: flex;
}
.as-project-page-hero > div{
  flex: 1;
  z-index: 10;
}

.as-project-page-hero .project-headings p
{
  max-height: unset;
}
.project-stats-section,
.project-review-section,
.project-tech-section,
.project-section
{
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
  padding-block:120px 40px;
  width: var(--max-container);
  margin: 0 auto;
}
#project-why-us{
  padding-bottom: 0;
}
#project-why-us .as-info-section{
  padding-bottom: 0 !important;
}
#project-why-us,#project-contact-us{
  padding-top: 0;
}
.project-stats-section .project-stats ul{
  justify-content: center;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.project-stats-section .project-stats ul li{
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, var(--my-white), #F4ECFF);
  border-radius: 24px;
  padding: 44px;
}
.project-stats-section .project-stats ul li p{
  font-size: var(--font-18);
}
.project-stats-section .project-stats ul li h4{
  font-size: var(--font-28);
}


.project-review-section .testimonials-item-wrapper{
  width: 100%;
}

.project-tech-section .projects-chips{
  justify-content: center;
}

ul.projects-titles-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.projects-titles-list li a{
  color: var(--my-white) !important;
  font-size: var(--font-16);
}
.projects-titles-list li a:hover{
  text-decoration: underline;
}

/* mobile responsive */

/* @media (max-width: 575.98px) { */
@media only screen and (max-width: 767px){

  :root{
    --max-container : 90svw;
    --hero-heading:2rem;
    --as-heading : 1.5rem;
    --award-logo-size : auto;
    --big-projects-image:100%;
    --font-18:1rem;
  }
  .as-hero-content h1{
    height: 200px;
  }
  #hero-section{
    height: 860px !important;
  }
  #as-about-content{
    flex-direction: column;
    gap: 60px;
  }

  .about-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: 40px;
  }
  
  .about-graphic{
    position: relative;
  }
  .about-graphic-stack{
    position: relative;
    right: unset;
    transform: scale(1.25);
  }
  .cta::before{
    background-position: right;
  }
  .cta>div,.cta>div:nth-child(1),.cta>div:nth-child(2){
    flex: unset;    
  }
  .cta-text{
    align-items: center;
    background: linear-gradient(to bottom, transparent 0%, var(--purple-gr-end) 90%);
    padding: 200px 16px 60px 16px;
    width: 100%;
  }
  .cta-text h2.as-heading,.cta-text p{
    text-align: center;
  }

  .services-heading{
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 24px;
  }
  .services-heading > div,
  .services-heading h2
  { 
    width: 90%;
    align-items: start;
    justify-content: start;
  }

  .as-project-details{
    align-items: stretch;
  }

  .projects-heading-wrapper{
      flex-direction: column;
      align-items: center;
      gap: 32px;
  }
  .section-heading p{
    text-align: center;
  }

  .as-projects{
    flex-direction: column;
  }
  .review-image{
    width: 100%;
    max-width: 100%;
    min-width: unset;
  }
  .as-project-image{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .as-projects::before{
    opacity: 0.3;
  }
  .project-cta{
    flex-direction: column;
    align-items: stretch;
  }

  .testimonials-row{
    flex-direction: column;
  }

  .awards-logo-wrapper
  {
    
    display: grid;
    gap: 24px;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
  }

  .tech-logo{
    padding: 12px;
  }
  .tech-logo-wrapper{
    gap:16p;;
  }
  .tech-logo img{
    width: 40px;
  }
  .cta-2::before{
    background-position: center;
  }
  #as-contact-content{
    flex-direction: column;
    gap: 40px;
  }

  ul.contact-detail{
    flex-direction: column;
  }
  ul.contact-detail p{
    text-align: left;
  }
  
  .modal-content{
    width: 90svw;
  }
  .model-services-list{
    grid-template-columns: repeat(1, 1fr);
  }
  .as-btn{
    text-align: center;
  }
  .as-info-features{
    flex-direction: column;
  }
  .as-info-features .separator{
    display: none;
  }

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

  .all-services-wrapper{
    /* max-width: var(--max-container);
    margin: 0 auto; */
    max-width: unset;
    margin: 0 24px;
  }

  .service-item, .service-item.odd{
    flex-direction: column;
  }

  .service-image{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ///////////////////////////////
  projects
  /////////////////////////////// */
  .as-filters,.as-projects-wrapper {
    /* max-width: var(--max-container);
    margin: 0 auto; */
    width: unset;
    margin: 0 24px;
  }

  /* //////////////////////////// */
  /* /////// reviews */
  /* //////////////////////////// */
  
  .as-all-reviews{
    /* width: var(--max-container);
    margin: 0 auto; */
    width: unset;
    margin: 0 24px;
  }
  .as-review-summary{
    /* width: var(--max-container);
    margin: 0 auto; */
    width: unset;
    margin: 0 24px;
    flex-direction: column-reverse;
    align-items: center;
    gap: 50px;
  }
  .as-review-left{
    width: 100%;
    flex-direction: column !important;
    gap: 44px !important;
  }
  #total-reviews li p{
    width: 70px;
  }
  .total-avg-rating div{
    align-items: start;
  }
  .as-project-review{
    flex-direction: column;
  }
  .total-avg-rating{
    width: 100%;
    align-items: start;
    justify-content: start;
  }

  /* /////////////////////
  contact page
  ///////////////////// */
  .contact-page-form .section-heading p{
    text-align: left !important;
  }

  #as-contact-content{
    width: unset;
    margin: 0 24px;
  }

  /* ///////////////////
  about page
  /////////////////// */
  .about-page{
    padding-top: 40px;
  }
  .as-info-section{
    width: unset;
    margin: 0px 24px;
  }
  .about-page .about-text{
    align-items: center;    
  }
  .about-page .about-text p,
  .about-page .about-text h2{
    text-align: center;
  }
  .team-grid{
    width: var(--max-container);
    margin: 0 auto;
  }
  .as-feature-grid{
    grid-template-columns: repeat(1, 1fr);
  }

  .elementor-element.cta-text.e-flex.e-con.e-child {
      margin: 0 auto;
  }

  .model-bottom{
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* //////////////////////
  project page
  ////////////////////// */
  .as-project-page-hero{
    flex-direction: column;
  }
  #project-hero{
    height: auto;
  }
  .project-stats-section,
  .project-review-section,
  .project-tech-section,
  .project-section
  {
    width: unset;
    margin: auto 24px;
    padding-top: 80px;
  }
  .project-review-section .as-review-summary{
    margin: unset;
    width: 100%;
  }
  .project-stats-section .project-stats ul{
    
    grid-template-columns: repeat(1, 1fr);
  }

  /* single project */
  #project-contact-us .as-content{
    margin: 0;
  }
}

/* ////////////////// */
/* tablet */
/* ////////////////// */

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  :root{
    --max-container : 720px;
    --hero-heading:2rem;
    --as-heading : var(--font-30);
  }
  
  #as-about-content{
    flex-direction: column;
  }
  .about-graphic{
    position: relative;
  }
  .about-graphic-stack{
    position: relative;
    right: unset;
  }
  .services-heading p{
    max-width: 100%;
  }
  .cta::before{
    background-position: right;
  }
  .cta>div,.cta>div:nth-child(1),.cta>div:nth-child(2){
    flex: unset;    
  }
  
  .as-projects-slider-wrapper .slider-button{
    width: calc(var(--max-container) - 60px);
  }

  .projects-heading-wrapper .section-heading{
    align-items: center;
  }

  .project-section .cta-text{
    padding-inline: 24px;
  }

  .cta-text{
    align-items: center;
    background: linear-gradient(to bottom, transparent 0%, var(--purple-gr-end) 90%);
    padding: 200px 0 60px 0;
    width: 100%;
  }
  .cta-text h2.as-heading,.cta-text p{
    text-align: center;
  }

  .services-heading{
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 24px;
  }
  .services-heading > div,
  .services-heading h2
  { 
    width: 90%;
    align-items: start;
    justify-content: start;
  }

  .as-project-details{
    align-items: stretch;
  }

  .projects-heading-wrapper{
      flex-direction: column;
      align-items: center;
      gap: 32px;
  }
  .section-heading p{
    text-align: center;
  }

  .projects-heading.section-heading{
    align-items: center;
  }
  .as-projects{
    flex-direction: column;
    gap: 0;
  }
  .as-project-image{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .as-projects::before{
    opacity: 0.3;
  }
  
  .as-projects-slider{
    grid-auto-columns: minmax(600px, 1fr);
  }
  

  .testimonials-row{
    flex-direction: row;
  }
  .testimonials-row.row-3{
    flex-direction: column;
  }

  .awards-logo-wrapper
  {
    
    display: grid;
    gap: 24px;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
  }

  .tech-logo{
    padding: 12px;
  }
  .tech-logo-wrapper{
    gap:16p;;
  }
  .tech-logo img{
    width: 40px;
  }
  .cta-2::before{
    background-position: center;
  }
  #as-contact-content{
    flex-direction: column;
    gap: 40px;
  }
  ul.contact-detail p{
    text-align: left;
  }

  /* ul.contact-detail{
    flex-direction: row;
  }
  ul.contact-detail p{
    text-align: left;
  } */
  
  .modal-content{
    width: 90svw;
  }
  .as-info-features{
    width: 100vw !important;
    max-width: 90vw;
  }
  .feature-box{
    padding: 10px;
  }

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

  .all-services-wrapper{
    max-width: var(--max-container);
    margin: 0 auto;
  }

  .service-item, .service-item.odd{
    flex-direction: column;
  }

  .service-image{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .as-filters,.as-projects-wrapper {
    max-width: var(--max-container);
    margin: 0 auto;
  }

  /* //////////////////////////// */
  /* /////// reviews */
  /* //////////////////////////// */
  
  .as-all-reviews{
    width: var(--max-container);
    margin: 0 auto;
  }
  .as-review-summary{
    width: var(--max-container);
    margin: 0 auto;
    flex-direction: column-reverse;
    align-items: center;
    gap: 50px;
  }
  .total-avg-rating div{
    align-items: start;
  }
  .as-review-left{
    width: 100%;
    gap: 44px !important;
  }
  #total-reviews li p{
    width: 70px;
  }
  .total-avg-rating{
    width: 100%;
    align-items: start;
    justify-content: start;
  }
  .as-project-review{
    flex-direction: column;
  }

  /* /////////////////////
  contact page
  ///////////////////// */
  .contact-page-form .section-heading p{
    text-align: left !important;
  }

  /* ///////////////////
  about page
  /////////////////// */
  .about-page{
    padding-top: 40px;
  }
  .about-page .about-text{
    align-items: center;    
  }
  .about-page .about-text p,
  .about-page .about-text h2{
    text-align: center;
  }
  .team-grid{
    width: var(--max-container);
    margin: 0 auto;
  }
  .as-feature-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .elementor-element.cta-text.e-flex.e-con.e-child {
      
      margin: 0 auto;
  }

  /* //////////////////////
  project page
  ////////////////////// */
  .as-project-page-hero{
    flex-direction: column;
  }
  #project-hero{
    height: auto;
  }
  .project-stats-section,
  .project-review-section,
  .project-tech-section,
  .project-section
  {
    width: unset;
    margin: auto 24px;
    padding-top: 80px;
  }
  .project-review-section .as-review-summary{
    margin: unset;
    width: 100%;
  }
  .project-stats-section .project-stats ul{
    
    align-items: stretch;
  }
  .project-stats-section .project-stats ul li{
    padding: 24px 44px;
    align-items: start;
  }

  
}



/*
@media (max-width: 767.98px) {
  :root{
    --max-container : 720px;
    --hero-heading:2rem;
    --as-heading : 1.5rem;
  }
  
}





@media (max-width: 991.98px) {
  :root{
    --max-container : 960px;
    --hero-heading:2rem;
    --as-heading : 1.5rem;
  }
  
}

@media (max-width: 1199.98px) {
  :root{
    --max-container : 1140px;
    --hero-heading:2.25rem;
    --as-heading : 2rem;
    --award-logo-size : 180px;
  }
}
*/

/* @media (max-width: 1400px) {
  :root{
    --max-container : 1320px;
    --hero-heading:2.25rem;
    --as-heading : 2rem;
    --award-logo-size : 200px;
  }
} */
.qr-contact ul{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qr-contact li{
  border: 1px solid var(--my-white);
  border-radius: 40px;
  display: flex;
  flex-direction: row;
  align-items: start !important;
  justify-content: start !important;
  padding: 0 !important;
}

.qr-contact li a{
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  align-items: start !important;
  justify-content: start !important;
}