/* [project]/styles/globals.css [client] (css) */
root {
  --services-hover-color: #303030;
}

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

body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: Hanken Grotesk, sans-serif;
  background-color: #f2f2f2;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.scroll-animation {
  animation: 2s infinite scrollAnimation;
}

@keyframes gravityIcon1 {
  0% {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(15px)rotate(10deg);
  }

  100% {
    transform: translateY(0)rotate(0);
  }
}

@keyframes gravityIcon2 {
  0% {
    transform: translateY(0) rotate(10);
  }

  50% {
    transform: translateY(15px)rotate(20deg);
  }

  100% {
    transform: translateY(0)rotate(10deg);
  }
}

@keyframes gravityIcon3 {
  0% {
    transform: translateY(0)rotate(30deg);
  }

  50% {
    transform: translateY(15px)rotate(40deg);
  }

  100% {
    transform: translateY(0)rotate(30deg);
  }
}

.gravity-icon:first-child {
  animation: 10s infinite gravityIcon1;
}

.gravity-icon:nth-child(2) {
  animation: 10s infinite gravityIcon2;
}

.gravity-icon:nth-child(3) {
  animation: 10s infinite gravityIcon3;
}

.hero-scroll-icon-div {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

@media screen and (width <= 768px) {
  .hero-scroll-icon-div.hide {
    display: none;
  }
}

.default-button {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #000;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  background-color: #0000;
}

.light-bg-btn {
  border: 1px solid #000;
  color: #000;
}

.light-bg-btn:hover {
  background-color: #000;
  color: #fff;
  transition: all .5s;
}

.dark-bg-btn {
  border: 1px solid #fff;
  color: #fff;
}

.dark-bg-btn:hover {
  background-color: #fff;
  color: #000;
  transition: all .5s;
}

@media (width <= 768px) {
  .light-bg-btn:hover {
    background-color: initial;
    color: #000;
    transition: none;
  }

  .dark-bg-btn:hover {
    background-color: initial;
    color: #fff;
    transition: none;
  }
}

.section-title {
  margin-bottom: 10px;
}

.section-title h2 {
  font-size: 72px;
  font-weight: 500;
  text-transform: uppercase;
}

@media screen and (width <= 768px) {
  .section-title h2 {
    font-size: 32px;
    font-weight: 500;
    line-height: 63px;
  }
}

.default-input {
  width: 100%;
  display: grid;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
}

.default-input label {
  text-transform: capitalize;
}

.default-input input {
  height: 70px;
  padding-left: 24px;
  font-size: 16px;
  outline: none;
  border-radius: 8px;
  border: .5px solid #000;
}

.default-input textarea {
  height: 186px;
  padding: 24px;
  font-size: 16px;
  outline: none;
  border-radius: 8px;
  border: .5px solid #000;
}

.default-input .files-input {
  height: 107px;
  padding-left: 24px;
  font-size: 16px;
  outline: none;
  border-radius: 8px;
  border: .5px dashed #000;
  line-height: 107px;
}

.default-input.with-icon .input-container {
  position: relative;
}

.default-input.with-icon .country-icon {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 70px;
  font-size: 16px;
  outline: none;
  border-radius: 8px;
  border: .5px solid #000;
}

.default-input.with-icon input {
  border: 1px solid #000;
  height: 68px;
  border: none;
}

.flag-border-checkout {
  outline: none;
  border-radius: 8px;
  width: 100%;
  background-color: #fff;
  padding-left: 16px;
}

.pagination-section {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media screen and (width <= 768px) {
  .pagination-section {
    justify-content: center;
  }
}

.custom-pagination {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
}

@media screen and (width <= 768px) {
  .custom-pagination {
    font-size: 16px;
  }
}

.custom-pagination-item {
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
}

@media screen and (width <= 768px) {
  .custom-pagination-item {
    margin: 0 5px;
  }
}

.custom-pagination-active {
  background-color: #f7931e;
  color: #fff;
}

.read-full-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.read-full-btn p {
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 20px;
  border-bottom: 1px solid;
}

.drop-down-section {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.drop-down-section button {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #fff;
  text-transform: capitalize;
  border: 1px solid #000;
  border-radius: 8px;
  cursor: pointer;
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
}

@media screen and (width <= 768px) {
  .drop-down-section button {
    padding: 12px;
    font-size: 14px;
  }
}

.drop-down-section button p {
  text-transform: capitalize;
}

.dropdown-menu {
  min-width: 300px;
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5%);
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
  background-color: #fff;
  list-style-type: none;
  margin-top: 8px;
  border-radius: 4px;
  border: .5px solid #000;
}

@media screen and (width <= 768px) {
  .dropdown-menu {
    margin-top: 4px;
  }
}

.dropdown-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-menu li {
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 45px;
  text-transform: capitalize;
  cursor: pointer;
  padding: 0 16px;
}

@media screen and (width <= 768px) {
  .dropdown-menu li {
    font-size: 14px;
    padding: 0 12px;
  }
}

.dropdown-menu li:first-child {
  height: 60px;
  padding-top: 16px;
}

@media screen and (width <= 768px) {
  .dropdown-menu li:first-child {
    padding-top: 12px;
  }
}

.dropdown-menu li:last-child {
  height: 60px;
  padding-bottom: 16px;
}

@media screen and (width <= 768px) {
  .dropdown-menu li:last-child {
    padding-bottom: 12px;
  }
}

.dropdown-menu li:hover {
  background-color: #8787871d;
}

.form-drop-down-section {
  position: relative;
  display: inline-block;
  width: 100%;
  z-index: 1;
}

.form-drop-down-section div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  background-color: #fff;
  text-transform: capitalize;
  border: 1px solid #000;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 16px;
  font-size: 16px;
  font-weight: 400;
}

@media screen and (width <= 768px) {
  .form-drop-down-section div {
    padding: 16px;
    font-size: 14px;
  }
}

.form-drop-down-section div p {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

@media screen and (width <= 768px) {
  .form-drop-down-section div p {
    font-size: 14px;
  }
}

.form-dropdown-menu {
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5%);
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
  background-color: #fff;
  list-style-type: none;
  margin-top: 8px;
  border-radius: 4px;
  border: .5px solid #000;
}

@media screen and (width <= 768px) {
  .form-dropdown-menu {
    margin-top: 4px;
  }
}

.form-dropdown-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.form-dropdown-menu li {
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 45px;
  text-transform: capitalize;
  cursor: pointer;
  padding: 0 16px;
}

@media screen and (width <= 768px) {
  .form-dropdown-menu li {
    font-size: 14px;
    padding: 0 12px;
  }
}

.form-dropdown-menu li:first-child {
  height: 60px;
  padding-top: 16px;
}

@media screen and (width <= 768px) {
  .form-dropdown-menu li:first-child {
    padding-top: 12px;
  }
}

.form-dropdown-menu li:last-child {
  height: 60px;
  padding-bottom: 16px;
}

@media screen and (width <= 768px) {
  .form-dropdown-menu li:last-child {
    padding-bottom: 12px;
  }
}

.form-dropdown-menu li:hover {
  background-color: #8787871d;
}

.page-transition {
  animation: .5s forwards fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.visible-section {
  opacity: 0;
  transition: transform 2s, opacity 1s;
}

.visible-section.animated-ref {
  opacity: 1;
}


/* [project]/components/Header/Header.css [client] (css) */
.header-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 60px;
  background-color: #0000;
  position: fixed;
  top: 24px;
  z-index: 2;
}

@media screen and (width <= 768px) {
  .header-section {
    padding: 0 24px;
  }
}

.header-logo {
  display: flex;
  color: #fff;
  align-items: center;
  font-size: 30px;
  gap: 16px;
  cursor: pointer;
}

.header-icon {
  width: 82px;
  height: 77px;
  background-color: #fff;
  border-radius: 16px;
  display: grid;
  place-items: center;
}

@media screen and (width <= 768px) {
  .header-icon {
    border-radius: 8px;
    width: 58px;
    height: 55px;
  }
}

.header-icon svg {
  width: 50px;
  height: 35px;
}

@media screen and (width <= 768px) {
  .header-icon svg {
    width: 38px;
    height: 27px;
  }
}

@media screen and (width <= 768px) {
  .logo-text {
    display: none;
  }
}

.logo-slide-in {
  opacity: 1;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  transform: translateX(0);
}

.logo-slide-out {
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}

.header-nav-links {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header-rest-links {
  background-color: #fff;
  padding: 28px 12px 28px 16px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 1;
  width: 100%;
  transition: width 1s;
}

@media screen and (width <= 768px) {
  .header-rest-links {
    display: none;
  }
}

.header-rest-links.hide {
  animation: 1s forwards hideNavLinks;
}

@keyframes hideNavLinks {
  0% {
    transform: translateX(20%);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translateX(40%);
    opacity: 0;
    display: none;
  }
}

.header-rest-links.show {
  animation: .5s forwards showNavLinks;
}

@keyframes showNavLinks {
  0% {
    transform: translateX(40%);
    opacity: 0;
    display: none;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translateX(13%);
    opacity: 1;
    display: flex;
  }
}

.header-rest-links .nav-link {
  text-decoration: none;
  color: #000;
}

.header-rest-links .nav-link:last-child {
  margin-right: 40px;
}

.header-rest-links .nav-link:hover {
  opacity: .7;
}

.header-menu-icon {
  background-color: #fff;
  padding: 23.1px 12px 23.1px 16px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  display: none;
}

@media screen and (width <= 768px) {
  .header-menu-icon {
    display: unset;
    padding: 12.5px 15px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}

@media screen and (width <= 768px) {
  .header-menu-icon.active {
    background-color: #000;
  }
}

.header-menu-icon .showBurger {
  stroke: #000;
  background-color: red;
}

.header-menu-icon.active .showBurger {
  stroke: #fff;
}

.header-menu-icon.show {
  animation: 1s forwards showNavMenu;
}

@media screen and (width <= 768px) {
  .header-menu-icon.show {
    animation: none;
  }
}

@keyframes showNavMenu {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
    width: fit-content;
  }
}

.header-menu-icon.hide {
  animation: .5s forwards hideNavMenu;
}

@media screen and (width <= 768px) {
  .header-menu-icon.hide {
    animation: none;
  }
}

@keyframes hideNavMenu {
  0% {
    transform: translateX(0);
    opacity: 1;
    width: fit-content;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.header-menu-icon svg {
  cursor: pointer;
}

.header-menu-icon svg.active {
  fill: #fff;
}

.header-contact-link {
  background-color: #fff;
  padding: 28px 16px 28px 12px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  z-index: 2;
}

@media screen and (width <= 768px) {
  .header-contact-link {
    display: unset;
    padding: 17px 5px 17px 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}

.header-contact-link .nav-link {
  background-color: #000;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: #fff;
}

@media screen and (width <= 768px) {
  .header-contact-link.active {
    background-color: #000;
  }
}

@media screen and (width <= 768px) {
  .header-contact-link.active .nav-link {
    background-color: #fff;
    color: #000;
  }
}

.header-drop-down {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .25s ease-in-out, transform .45s ease-in-out;
  background-color: #fff;
  margin-top: -77px;
  margin-left: -3px;
  margin-right: -3px;
  padding: 77px 16px 16px;
  border-radius: 16px;
  display: none;
}

@media screen and (width <= 768px) {
  .header-drop-down {
    display: block;
    margin-top: -56px;
    padding: 55px 16px 16px;
    border-radius: 8px;
  }
}

.header-drop-down.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

@media screen and (width <= 768px) {
  .dropdown-nav-links {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}

.nav-link-res {
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  font-size: 16px;
  font-weight: 400;
}

.dropdown-nav-links .nav-link-res:hover {
  color: #f7931e;
}


/* [project]/components/EyeExpand/EyeExpand.css [client] (css) */
.eye-expand-div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #000;
  padding: 24px 0;
}

@media screen and (width <= 768px) {
  .eye-expand-div {
    padding: 12px 0;
  }
}

.eye-expand-texts {
  display: grid;
}

.eye-expand-texts p {
  font-size: 30px;
  font-weight: 400;
  line-height: 39px;
  letter-spacing: 0;
  max-width: 80%;
}

@media screen and (width <= 768px) {
  .eye-expand-texts p {
    font-size: 24px;
    font-weight: 400;
    line-height: 31px;
    max-width: 95%;
  }
}

.eye-expand-texts div p a {
  text-decoration: none;
}

.eye-expand-texts div p {
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  max-width: 80%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s, padding-top .5s;
}

@media screen and (width <= 768px) {
  .eye-expand-texts div p {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    max-width: 95%;
  }
}

.opened-eye, .closed-eye {
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}

@media screen and (width <= 768px) {
  :is(.opened-eye, .closed-eye) {
    min-width: 20px;
    min-height: 20px;
  }
}

.eye-expand-texts .expanded p {
  max-height: 100%;
  padding-top: 24px;
}


/* [project]/components/Footer/Footer.css [client] (css) */
.footer-section {
  background-color: #191919;
  color: #f2f2f2;
  padding: 80px 60px;
}

@media screen and (width <= 768px) {
  .footer-section {
    padding: 60px 30px;
  }
}

.footer-section .footer-title {
  color: #fff;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 500;
  line-height: 70.36px;
  text-align: center;
  margin-bottom: 50px;
}

@media screen and (width <= 768px) {
  .footer-section .footer-title {
    line-height: 130%;
    margin-bottom: 25px;
  }
}

.footer-main-contents {
  display: flex;
  align-items: center;
  gap: 100px;
}

@media screen and (width <= 1080px) {
  .footer-main-contents {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 50px;
  }
}

.address-cards {
  display: flex;
  gap: 30px;
}

@media screen and (width <= 768px) {
  .address-cards {
    flex-direction: column;
    gap: 20px;
  }
}

.address-card {
  border: 1px solid #afafaf;
  display: grid;
  text-align: center;
  border-radius: 24px;
}

.address-title {
  padding: 24px 24px 14px;
  border-bottom: 1px solid #afafaf;
  text-wrap: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 500;
  line-height: 26.06px;
}

.address-details {
  padding: 20px 24px 24px;
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 400;
  line-height: 20.85px;
  display: grid;
  place-items: center;
  gap: 24px;
}

.address-details button {
  font-size: 16px;
  font-weight: 500;
  line-height: 20.85px;
  border-radius: 30px;
  padding: 7.5px 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #0000;
  border: 1px solid #afafaf;
  color: #e8e8e8;
}

.footer-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

@media screen and (width <= 1080px) {
  .footer-desc {
    align-items: center;
  }
}

.footer-contact-btns {
  display: flex;
  gap: 20px;
}

@media screen and (width <= 768px) {
  .footer-contact-btns {
    flex-direction: column;
    gap: 10px;
  }
}

.footer-desc button {
  font-size: 16px;
  font-weight: 500;
  line-height: 20.85px;
  border-radius: 30px;
  padding: 7.5px 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #0000;
  border: 1px solid #afafaf;
  color: #e8e8e8;
}

.socail-medias-footer {
  display: flex;
  gap: 16px;
}

.socail-medias-footer svg {
  cursor: pointer;
}


/* [project]/components/Home/Home.css [client] (css) */
.noise {
  background: linear-gradient(90deg, #231111e6 60%, #351717e6), url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.overlay-for-scroll {
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  background-color: #2720208e;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease-in-out;
}

.overlay-for-scroll.is-scrolled {
  opacity: 1;
}

.hero-section {
  margin: 12px;
}

.hero-image-container {
  position: relative;
  width: 100%;
  height: 96.5dvh;
  border-radius: 32px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

@media screen and (width <= 768px) {
  .hero-image-container {
    justify-content: end;
  }
}

.hero-image {
  border-radius: 32px;
  width: 100%;
}

.hero-text-div {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 48px 38px;
  z-index: 1;
  flex-direction: row-reverse;
}

@media screen and (width <= 768px) {
  .hero-text-div {
    display: grid;
    justify-content: end;
    align-items: end;
    margin: 0;
  }
}

.hero-text {
  color: #fddeb9;
}

@media screen and (width <= 768px) {
  .hero-text {
    position: absolute;
    bottom: 40%;
    right: 14px;
    line-height: 60px;
  }
}

@media screen and (width <= 768px) {
  .scroll-arrow-home {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.hero-text p {
  font-weight: 900;
  margin: 0;
  text-align: end;
  text-transform: uppercase;
  font-size: clamp(78px, 8vw, 105px);
}

@media screen and (width <= 1280px) {
  
}

@media screen and (width <= 768px) {
  .hero-text p {
    font-weight: 900;
    font-size: 50px;
    margin: 0;
    text-align: end;
  }
}

@media screen and (width <= 480px) {
  .hero-text p {
    font-weight: 800;
    font-size: 42px;
  }
}

.text-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-size: 4vh 4vh;
}

.text-wrapper p {
  position: relative;
  color: #ffffff1a;
  animation: 9s infinite displayText;
  animation-delay: calc(-3s * var(--i));
}

@keyframes displayText {
  0% {
    display: inline-block;
  }

  33.33%, 100% {
    display: none;
  }
}

.text-wrapper p:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fddeb9;
  overflow: hidden;
  animation: 3s linear infinite animateText;
}

@keyframes animateText {
  0%, 10%, 100% {
    width: 0;
  }

  70%, 90% {
    width: 100%;
  }
}

.work-section {
  margin: 0 60px 60px;
}

.works-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.works-card {
  border-radius: 4px;
  width: calc(50% - 12px);
  cursor: pointer;
}

.works-card-img {
  overflow: hidden;
  min-height: 300px;
}

@media screen and (width <= 1080px) {
  .works-card-img {
    min-height: 195px;
  }
}

.works-card-img:hover img {
  transform: scale(1.1);
}

.works-card-img:first-child {
  transition-delay: .1s;
}

.works-card-img:nth-child(2) {
  transition-delay: .3s;
}

.works-card-img:nth-child(3) {
  transition-delay: .3s;
}

.works-card-img:nth-child(4) {
  transition-delay: .4s;
}

.works-title {
  margin: 24px 0;
}

.works-card h1 {
  font-size: 30px;
  text-transform: capitalize;
  font-weight: 400;
}

@media screen and (width <= 768px) {
  .works-card h1 {
    font-size: 24px;
  }
}

.works-card h1 span {
  color: #878787;
}

.works-btn-div {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

@media screen and (width <= 768px) {
  .work-section {
    margin: 0 24px 24px;
  }

  .works-card {
    width: 100%;
  }
}

.home-about-section {
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  padding: 60px;
  color: #fff;
}

@media screen and (width <= 768px) {
  .home-about-section {
    display: flex;
    flex-direction: column-reverse;
    padding: 120px 24px 60px;
  }
}

.home-about-content {
  display: grid;
  flex-direction: column;
  gap: 24px;
}

.text-reveal p span {
  color: #fff3;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, #fff, #fff);
  transition: background-position 5s ease-in-out;
  animation: linear forwards text-reveal;
  animation-timeline: view();
}

.text-reveal .home-about-title span {
  animation-range: contain -70vh;
}

.text-reveal .home-about-context span {
  animation-range: contain -25vh;
}

@keyframes text-reveal {
  to {
    background-size: 200% 100%;
  }
}

@media (width <= 768px) {
  .text-reveal p span {
    background-size: 100% 100%;
    animation: none;
  }
}

.home-about-content h1 {
  font-size: 72px;
  text-transform: uppercase;
  font-size: 500px;
}

@media screen and (width <= 768px) {
  .home-about-content h1 {
    font-size: 43px;
  }
}

.home-about-content p:nth-child(2) {
  font-size: 18px;
  max-width: 539px;
  line-height: 28px;
}

.robo-icons-div {
  margin-right: 60px;
}

@media screen and (width <= 768px) {
  .robo-icons-div {
    display: flex;
    margin-right: 0;
  }
}

@keyframes fall1 {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  70% {
    transform: translateY(0%);
    opacity: 1;
  }

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

@keyframes fall2 {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    margin-bottom: 80px;
    opacity: 1;
  }
}

@keyframes fall3 {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  70% {
    transform: translateY(0%);
    opacity: 1;
  }

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

.animated-ref .robot-icon1 {
  animation: 1.5s ease-out fall1;
  animation-fill-mode: forwards;
}

@media screen and (width <= 768px) {
  .animated-ref .robot-icon1 {
    animation: none;
  }
}

.animated-ref .robot-icon2 {
  animation: 1.5s ease-out fall2;
  animation-fill-mode: forwards;
}

@media screen and (width <= 768px) {
  .animated-ref .robot-icon2 {
    animation: none;
    position: relative;
    bottom: 60px;
  }
}

.animated-ref .robot-icon3 {
  animation: 1.5s ease-out fall3;
  animation-fill-mode: forwards;
}

@media screen and (width <= 768px) {
  .animated-ref .robot-icon3 {
    animation: none;
  }
}

.home-services-section {
  margin: 120px 60px 60px;
}

@media screen and (width <= 768px) {
  .home-services-section {
    margin: 120px 24px 24px;
  }
}

.home-services-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 60px;
}

.services-card {
  background-color: #ffdd78;
  padding: 52px 60px 0%;
  height: 80vh;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  width: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out, width 1s ease-in-out;
  overflow: hidden;
  position: relative;
}

@media screen and (width <= 768px) {
  .services-card {
    padding: 24px;
    height: 100%;
  }
}

.services-card.animated-ref {
  opacity: 1;
  width: 100%;
  gap: 24px;
}

.services-card.normal {
  flex-direction: row-reverse;
}

@media screen and (width <= 768px) {
  .services-card.normal {
    flex-direction: column-reverse;
    gap: 24px;
  }
}

.services-card.reverse {
  flex-direction: row;
}

@media screen and (width <= 768px) {
  .services-card.reverse {
    flex-direction: column-reverse;
    gap: 24px;
  }
}

.home-services-content {
  line-height: 90px;
  flex-direction: column;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 1s ease-in-out, transform .5s ease-in-out;
  transition-delay: 1s;
}

.services-card.animated-ref .home-services-content {
  opacity: 1;
  transform: translateX(0);
}

.home-services-content h2 {
  font-size: 48px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 55px;
  margin-bottom: 24px;
}

@media screen and (width <= 768px) {
  .home-services-content h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

.home-services-content p:nth-child(2) {
  font-size: 18px;
  max-width: 539px;
  line-height: 28px;
}

@media screen and (width <= 768px) {
  .home-services-content p:nth-child(2) {
    max-width: 400px;
    font-size: 16px;
  }
}

.services-img-container {
  position: relative;
  overflow: hidden;
}

.home-services-img {
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 1s ease-in-out, transform .7s ease-in-out;
  transition-delay: 1.1s;
  max-width: 449px;
}

@media screen and (width <= 768px) {
  .home-services-img {
    border-radius: 20px;
    max-width: 300px;
    height: auto;
  }
}

.services-img {
  width: 100%;
  height: auto;
}

.services-card.animated-ref .home-services-img {
  opacity: 1;
  transform: translateX(0);
}

.services-btn-div {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.testimonial-section {
  margin: 60px 0;
  display: grid;
  gap: 60px;
}

.testimonials-div {
  height: 288px;
  display: grid;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

@media screen and (width <= 768px) {
  .testimonials-div {
    height: 171px;
  }
}

.testimonials {
  background-color: #000;
  height: 204px;
  width: 100%;
  box-shadow: 9999px 0 #000, -7px 0 #000, 7px 0 #000;
  transform: rotate(-3deg);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 60px;
  position: relative;
  overflow: hidden;
}

@media screen and (width <= 768px) {
  .testimonials {
    height: 147px;
  }
}

.testimonials h1 {
  color: #fff;
  font-size: 72px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  animation: 10s linear infinite moveText;
}

@media screen and (width <= 768px) {
  .testimonials h1 {
    font-size: 48px;
  }
}

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

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

.testimonials-img-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (width <= 1080px) {
  .testimonials-img-div {
    flex-direction: column;
    gap: 56px;
    margin: 60px 0;
  }
}

.testimonials-text-img {
  border-radius: 16px;
}

.testimonials-explore-div {
  text-align: center;
  display: grid;
  place-items: center;
  gap: 24px;
  margin: 0 24px;
}

.testimonials-explore-div h1:first-child {
  font-size: clamp(48px, 4vw, 72px);
  font-weight: 400;
  text-transform: uppercase;
}

.testimonials-explore-div p:nth-child(2) {
  font-size: clamp(16px, 4vw, 18px);
}

.heroVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
}

.heroImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
}

#preload-image {
  display: none;
}

#actual-image {
  display: block;
}


/* [project]/components/InnerBanner/InnerBanner.css [client] (css) */
.inner-banner-section {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.banner-title {
  font-size: clamp(60px, 8vw, 120px);
  font-weight: 900;
  line-height: 156px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  max-width: 800px;
  position: relative;
}

.banner-title span {
  color: #f7931e;
}

@media screen and (width <= 768px) {
  .banner-title {
    font-weight: 900;
    line-height: 78px;
    letter-spacing: 0;
    text-align: center;
    max-width: 400px;
  }
}

@media screen and (width <= 448px) {
  .banner-title {
    font-size: 48px;
  }
}

.inner-banner-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%);
  width: 100%;
  height: 312px;
}

@media screen and (width <= 768px) {
  .inner-banner-icons {
    transform: translate(-50%, -50%);
  }
}

.inner-banner-icons img {
  filter: drop-shadow(60px 20px 4px #0000004d);
}

.inner-banner-icons img:first-child {
  position: absolute;
  top: 110px;
  left: 40px;
  width: 100px !important;
}

@media screen and (width <= 768px) {
  .inner-banner-icons img:first-child {
    top: 150px;
    left: 20px;
    width: 73px !important;
  }
}

.inner-banner-icons img:nth-child(2) {
  position: absolute;
  top: 230px;
  left: 380px;
  width: 100px !important;
}

@media screen and (width <= 768px) {
  .inner-banner-icons img:nth-child(2) {
    top: 200px;
    left: 170px;
    width: 73px !important;
  }
}

.inner-banner-icons img:nth-child(3) {
  position: absolute;
  left: 550px;
  top: -60px;
  transform: rotate(50deg);
  width: 100px !important;
}

@media screen and (width <= 768px) {
  .inner-banner-icons img:nth-child(3) {
    left: 260px;
    top: 80px;
    width: 73px !important;
  }
}


/* [project]/components/RoutesMap/breadCrumb.css [client] (css) */
@media screen and (width <= 768px) {
  .bread-crumps-section {
    margin-top: 32px;
    width: 30ch;
    overflow: hidden;
  }
}

@media screen and (width <= 768px) {
  .bread-crumps-text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* [project]/components/Testimonials/Testimonials.css [client] (css) */
.testimonial-section {
  margin: 120px 0;
}

.testimonials-qoutes-div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 172px;
}

@media screen and (width <= 768px) {
  .testimonials-qoutes-div {
    display: grid;
    margin: 0 24px;
    justify-content: start;
  }
}

.testimonials-carousel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonials-carousel-inner {
  white-space: nowrap;
  transition: transform .7s;
}

.testimonials-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  white-space: normal;
}

.testimonials-card p:first-child {
  font-size: 152px;
  width: 65px;
  height: 50px;
  margin-bottom: 10px;
}

@media screen and (width <= 768px) {
  .testimonials-card p:first-child {
    font-size: 102px;
    width: 31px;
    height: 24px;
  }
}

.testimonials-card p:nth-child(2) {
  font-size: 30px;
  font-weight: 400;
  line-height: 39px;
  letter-spacing: 0;
  text-align: left;
}

@media screen and (width <= 768px) {
  .testimonials-card p:nth-child(2) {
    font-size: 18px;
    line-height: 23px;
  }
}

.testimonials-card p:nth-child(3) {
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  text-transform: capitalize;
}

@media screen and (width <= 768px) {
  .testimonials-card p:nth-child(3) {
    font-weight: 500;
  }
}

.testimonials-card p:nth-child(3) span {
  color: #878787;
}

.testimonials-qoutes-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media screen and (width <= 768px) {
  .testimonials-qoutes-btns {
    gap: 24px;
    justify-content: center;
    margin-top: 32px;
  }
}

.testimonials-qoutes-btns p {
  font-size: 18px;
}

.testimonials-qoutes-btns button {
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 12px 16px;
  border: 1px solid #000;
  border-radius: 8px;
}

.testimonials-text-img {
  width: 100%;
  height: auto;
}


/* [project]/components/WorkProcess/WorkProcess.css [client] (css) */
.work-process-section-x {
  max-height: 100vh;
}

@media screen and (width <= 768px) {
  .work-process-section-x {
    display: none;
  }
}

.work-process-section-y {
  display: none;
}

@media screen and (width <= 768px) {
  .work-process-section-y {
    display: block;
    height: 100%;
  }
}

.check-point-icon {
  filter: drop-shadow(2px 4px 6px #0003);
}

.work-process-card {
  rotate: 90deg;
  width: 100%;
  height: 100%;
  padding: 150px 60px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 100px;
  filter: drop-shadow(4px 4px 6px #0003) drop-shadow(-4px -4px 6px #0003);
}

@media screen and (width <= 768px) {
  .work-process-card {
    padding: 24px;
    rotate: none;
    width: 100px;
    height: 100px;
  }
}

.work-process-card .title-div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.work-process-card .title-div img {
  rotate: -90deg;
}

.work-process-card .title-div h1 {
  font-size: 48px;
  font-weight: 500;
}

.work-process-points {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media screen and (width <= 768px) {
  .work-process-points {
    gap: 10px;
  }
}

.work-process-points ul {
  list-style-type: none;
  padding-left: 0;
}

.work-process-points ul li {
  position: relative;
  padding-left: 25px;
}

.work-process-points ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
}

.work-process-points ul li::marker {
  display: none;
}

.horizontal-section {
  margin: 120px 0;
  width: 100vh;
  height: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  transform: rotate(-90deg)translateX(-100vh);
  transform-origin: 0 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.boxes {
  transform: rotate(90deg)translateY(0);
  width: 100vh;
  display: flex;
  flex-direction: row;
  transition: background-color .5s;
  position: relative;
}

.work-process-section-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-process-card-mobile {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.title-div-mobile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-div-mobile p {
  font-size: 24px;
  font-weight: 500;
}

.work-process-points-mobile {
  font-size: 16px;
  font-weight: 400;
}

.work-process-points-mobile ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.work-process-points-mobile ul li {
  position: relative;
  padding-left: 20px;
}

.work-process-points-mobile ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #000;
  border-radius: 50%;
}

.work-process-points-mobile ul li::marker {
  display: none;
}


/* [project]/pages/about/about.css [client] (css) */
@media screen and (width <= 768px) {
  .banner-title {
    font-size: 60px;
    font-weight: 900;
    line-height: 78px;
    letter-spacing: 0;
    text-align: center;
  }

  .about-scroll-btn {
    display: none;
  }
}

.about-scroll-btn {
  position: absolute;
  bottom: 60px;
  color: #000;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

:root {
  --cards: 3;
  --cardTopPadding: 4.9em;
  --cardHeight: 67vh;
  --cardMargin: 4vw;
}

@media screen and (width <= 768px) {
  :root {
    --cardTopPadding: 2.5em;
    --cardHeight: 70vh;
  }
}

.about-cards-section {
  margin: 0 60px;
}

@media screen and (width <= 768px) {
  .about-cards-section {
    margin: 24px;
  }
}

#about-cards {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--cards), var(--cardHeight));
  gap: var(--cardMargin);
  padding-bottom: calc(var(--cards) * var(--cardTopPadding));
  margin-bottom: var(--cardMargin);
}

#about-card1 {
  --index: 1;
}

#about-card2 {
  --index: 2;
}

#about-card3 {
  --index: 3;
}

.about-card {
  position: sticky;
  top: 0;
  padding-top: calc(var(--index) * var(--cardTopPadding));
}

@media screen and (width <= 768px) {
  .about-card {
    top: 120px;
  }
}

#about-card1 .about-card-body {
  background-color: #ffdd78;
}

#about-card2 .about-card-body {
  background-color: #c3dfff;
}

#about-card3 .about-card-body {
  background-color: #dcd2f7;
}

.about-card-body {
  box-sizing: border-box;
  padding: 60px;
  height: 445px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: all .5s;
}

@media screen and (width <= 768px) {
  .about-card-body {
    padding: 32px;
    height: var(--cardHeight);
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
  }
}

.about-content-div {
  width: 590px;
}

@media screen and (width <= 768px) {
  .about-content-div {
    width: 278px;
  }
}

.about-content-div p:first-child {
  font-size: 72px;
  font-weight: 500;
  line-height: 93px;
  text-transform: uppercase;
}

@media screen and (width <= 768px) {
  .about-content-div p:first-child {
    font-size: 48px;
    line-height: 62px;
  }
}

.about-content-div p:nth-child(2) {
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  margin-top: 24px;
}

@media screen and (width <= 768px) {
  .about-content-div p:nth-child(2) {
    font-size: 16px;
  }
}

.about-content-cards-count {
  font-size: 48px;
  font-weight: 500;
  line-height: 63px;
}

@media screen and (width <= 768px) {
  .about-content-cards-count {
    font-size: 24px;
  }
}


/* [project]/pages/blogs/blogs.css [client] (css) */
.blog-list-container {
  margin: 60px;
}

@media screen and (width <= 768px) {
  .blog-list-container {
    margin: 24px;
  }
}

.recent-blog-container {
  display: grid;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .recent-blog-container {
    gap: 12px;
  }
}

.recent-blog-container-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #878787;
}

@media screen and (width <= 768px) {
  .recent-blog-container-title {
    font-size: 16px;
  }
}

.recent-blog {
  display: flex;
  border-right: 10px solid #ffdd78;
  border-radius: 4px;
  background-color: #fff;
}

@media screen and (width <= 768px) {
  .recent-blog {
    display: grid;
    border-right: none;
    border-bottom: 10px solid #ffdd78;
  }
}

.recent-blog-img {
  width: 650px;
  max-height: 350px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  flex: 1;
}

@media screen and (width <= 768px) {
  .recent-blog-img {
    width: 100%;
    max-height: 176px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}

.recent-blog-skeleton-img {
  min-width: 500px;
}

@media screen and (width <= 768px) {
  .recent-blog-skeleton-img {
    min-width: 300px;
  }
}

.list-blog-skeleton-img {
  min-width: 100px;
}

@media screen and (width <= 768px) {
  .list-blog-skeleton-img {
    min-width: 300px;
  }
}

.detail-blog-skeleton-img {
  min-width: 930px;
  height: 386px;
}

@media screen and (width <= 768px) {
  .detail-blog-skeleton-img {
    min-width: 300px;
  }
}

.recent-blog-content-div {
  flex: 1;
  display: grid;
  align-content: space-between;
  padding: 32px;
}

@media screen and (width <= 768px) {
  .recent-blog-content-div {
    padding: 12px;
    gap: 8px;
  }
}

.recent-blog-content p:first-child {
  max-width: 95%;
  font-size: 30px;
  font-weight: 400;
  line-height: 39px;
  letter-spacing: 0;
  margin-bottom: 24px;
}

@media screen and (width <= 768px) {
  .recent-blog-content p:first-child {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 8px;
    max-width: 100%;
  }
}

.recent-blog-content p:nth-child(2) {
  max-width: 95%;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
  color: #878787;
}

@media screen and (width <= 768px) {
  .recent-blog-content p:nth-child(2) {
    max-width: 100%;
  }
}

.list-all-blogs-section {
  margin: 120px 0;
}

.all-blogs-title-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.list-all-blogs {
  margin-top: 30px;
}

.list-all-blogs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-start;
  gap: 32px;
}

.blog-card {
  width: calc(33.33% - 32px);
  margin-bottom: 24px;
  border-radius: 4px;
  background-color: #fff;
}

@media screen and (width <= 768px) {
  .blog-card {
    width: 100%;
  }
}

.blog-card-img {
  width: 100%;
  object-fit: cover;
  max-height: 176px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

@media screen and (width <= 768px) {
  
}

.blog-card-content-div {
  margin: 32px;
}

@media screen and (width <= 768px) {
  .blog-card-content-div {
    margin: 12px;
  }
}

.blog-card .blog-card-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 39px;
  margin-bottom: 8px;
}

.blog-card .blog-card-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  margin-bottom: 24px;
}

.blog-detailed-banner {
  padding: 140px 60px;
}

@media screen and (width <= 768px) {
  .blog-detailed-banner {
    padding: 100px 24px;
  }
}

.blog-detailed-text-div {
  display: grid;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .blog-detailed-text-div {
    gap: 24px;
  }
}

.blog-detailed-banner p:first-child {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

@media screen and (width <= 768px) {
  .blog-detailed-banner p:first-child {
    font-size: 14px;
  }
}

.blog-detailed-banner p:first-child span {
  color: #878787;
}

.blog-detailed-text {
  font-size: 72px;
  font-weight: 900;
  line-height: 94px;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media screen and (width <= 768px) {
  .blog-detailed-text {
    font-size: 30px;
    line-height: 45px;
  }
}

.blog-detailed-text span {
  color: #f7931e;
}

.detailed-blog {
  display: grid;
  place-items: center;
  gap: 8px;
}

.detailed-blog-img {
  border-radius: 4px;
  object-fit: cover;
}

@media screen and (width <= 768px) {
  .detailed-blog-img {
    width: 100%;
    height: 144px;
  }
}

.blog-author-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 930px;
  padding: 0 24px;
}

@media screen and (width <= 768px) {
  .blog-author-div {
    width: 100%;
    padding: 0;
  }
}

.blog-author-details {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: -14px;
}

@media screen and (width <= 768px) {
  .blog-author-details {
    margin-top: 0;
  }
}

.blog-author-details span {
  display: flex;
  flex-direction: column;
}

.author-blog-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

@media screen and (width <= 768px) {
  .author-blog-img {
    width: 30px;
    height: 30px;
  }
}

.blog-author-name {
  color: #000;
}

.blog-author-details span {
  color: #878787;
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  gap: 8px;
}

@media screen and (width <= 768px) {
  .blog-author-details span {
    font-size: 14px;
    gap: 0;
  }
}

.blog-date {
  font-size: 16px;
  font-weight: 400;
  color: #878787;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

@media screen and (width <= 768px) {
  .blog-date {
    font-size: 14px;
    gap: 0;
  }
}

.blog-content-section {
  margin: 0 60px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media screen and (width <= 768px) {
  .blog-content-section {
    margin: 0 24px;
  }
}

.detailed-blog-title-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detailed-blog-title-div button {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #000;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}

@media screen and (width <= 768px) {
  .detailed-blog-title-div button {
    display: none;
  }
}

.detailed-blog-title-div button:hover {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
}

.detailed-blog-title {
  font-size: 48px;
  font-weight: 900;
}

@media screen and (width <= 768px) {
  .detailed-blog-title {
    font-size: 30px;
  }
}

.blog-contact-section {
  margin: 120px 60px;
}

@media screen and (width <= 768px) {
  .blog-contact-section {
    margin: 60px 24px;
  }
}

.contact-form-section {
  display: grid;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .contact-form-section {
    gap: 32px;
  }
}

.contact-form-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
}

@media screen and (width <= 768px) {
  .contact-form-div {
    flex-direction: column;
    justify-content: center;
    gap: 50px;
  }
}

.contact-form-section p {
  font-size: 48px;
  font-weight: 500;
  line-height: 63px;
  justify-self: start;
}

@media screen and (width <= 768px) {
  .contact-form-section p {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
  }
}

.contact-form {
  display: grid;
  justify-self: end;
  gap: 24px;
  width: 50%;
}

@media screen and (width <= 768px) {
  .contact-form {
    justify-self: center;
    width: 100%;
    gap: 12px;
  }
}

.contact-form span {
  display: flex;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .contact-form span {
    display: grid;
    gap: 12px;
  }
}

.contact-form button {
  width: 203px;
  height: 45px;
  padding: 12px 16px;
  border-radius: 8px;
  gap: 10px;
  border: none;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-transform: uppercase;
  justify-self: right;
  cursor: pointer;
}

@media screen and (width <= 768px) {
  .contact-form button {
    width: 100%;
  }
}

.detailed-blog-seperate-section {
  display: flex;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .detailed-blog-seperate-section {
    flex-direction: column;
  }
}

.subtitle-content-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 4;
}

.subtitle-content-section .table {
  margin: 20px auto;
  width: 100%;
  border-collapse: collapse;
}

.subtitle-content-section .table table {
  width: 100%;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.subtitle-content-section .table thead {
  background-color: #e2e2e2;
  font-weight: bold;
  text-align: center;
}

.subtitle-content-section .table thead tr:first-child {
  line-height: 50px;
  text-transform: uppercase;
  font-size: x-large;
}

.subtitle-content-section .table thead tr {
  line-height: 30px;
  text-transform: capitalize;
  font-size: larger;
}

.subtitle-content-section .table tbody td {
  border: 1px solid #ddd;
  padding: 10px;
}

.subtitle-content-section .table tbody td {
  text-align: center;
}

.subtitle-content-section .table td[colSpan] {
  text-align: center;
}

.subtitle-content-section .table td {
  padding: 12px;
}

.subtitle-content-section .table thead td {
  font-size: 1.1em;
}

.subtitle-content-section .table tbody td {
  font-size: 1em;
}

.subtitle-content-section h2, .subtitle-content-section h3 {
  font-size: 30px;
  font-weight: 600;
  line-height: 39px;
}

@media screen and (width <= 768px) {
  :is(.subtitle-content-section h2, .subtitle-content-section h3) {
    font-size: 24px;
  }
}

.subtitle-content-section p {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  width: 90%;
}

@media screen and (width <= 768px) {
  .subtitle-content-section p {
    width: 100%;
    font-size: 18px;
  }
}

h4, h5 {
  font-size: 22px;
}

.subtitle-content-section ol, .subtitle-content-section ul {
  margin-left: 25px;
}

.subtitle-content-section li {
  font-size: 18px;
  font-weight: 400;
  line-height: 31px;
  margin-bottom: 15px;
}

.blog-points-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-points-section img {
  width: 669px;
  height: 397px;
}

@media screen and (width <= 768px) {
  .blog-points-section img {
    width: 100%;
    height: 203px;
  }
}

.blog-title-navigate-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

@media screen and (width <= 768px) {
  .blog-title-navigate-section {
    display: none;
  }
}

.blog-title-navigate-section P {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.blog-title-navigates {
  max-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.blog-title-navigates p {
  cursor: pointer;
}

.blog-title-navigates::-webkit-scrollbar {
  width: 2px;
}

.blog-title-navigates::-webkit-scrollbar-thumb {
  border-radius: 46px;
  border: 2px solid #000;
}

.blog-title-navigates::-webkit-scrollbar-track {
  background-color: #0000001a;
}

.blog-title-navigates::-webkit-scrollbar-track:hover {
  background-color: #0003;
}

.blog-title-navigates p {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.sub-blogs-section {
  display: flex;
  flex-direction: column;
  gap: 60px;
  flex: 1;
}

@media screen and (width <= 768px) {
  .sub-blogs-section {
    display: none;
  }
}

.sub-blogs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sub-blogs p {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  text-transform: capitalize;
}

.sub-blog p {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.sub-blog-img {
  width: 265px;
  max-height: 98px;
  object-fit: cover;
  border-radius: 4px;
}


/* [project]/pages/careers/careers.css [client] (css) */
.openings-section {
  margin: 60px;
}

@media screen and (width <= 768px) {
  .openings-section {
    margin: 24px;
  }
}

.openings-tabs-section {
  width: 100%;
}

@media screen and (width <= 768px) {
  .openings-tabs-section {
    display: none;
  }
}

.tab-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 60px;
  align-items: center;
  border-bottom: 2px solid #878787;
  position: relative;
  overflow-y: auto;
  white-space: nowrap;
}

@media screen and (width <= 768px) {
  
}

.tab-box::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  font-size: 30px;
  font-weight: 400;
  border: none;
  cursor: pointer;
  padding-bottom: 24px;
  position: relative;
}

.bottom-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  background-color: #f7931e;
  border-radius: 57px;
  transition: all .3s;
}

.tab-btn.active + .bottom-line {
  width: auto;
}

.content-box {
  margin-top: 20px;
  animation: .3s moving;
}

.openings-cards-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
}

.openings-cards-list .openings-card {
  flex-basis: calc(50% - 15px);
  margin: 8px 0;
}

@media screen and (width <= 768px) {
  .openings-cards-list .openings-card {
    flex-basis: 100%;
  }
}

.openings-card {
  display: none;
  background-color: #ffdd78;
  padding: 24px;
  text-transform: capitalize;
  animation: .7s ease-in-out movingTabs;
}

@keyframes movingTabs {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

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

.openings-card.active {
  display: block;
}

.openings-card-title {
  font-size: 48px;
  font-weight: 500;
  margin-bottom: 24px;
}

@media screen and (width <= 768px) {
  .openings-card-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 12px;
  }
}

.openings-card div {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

@media screen and (width <= 768px) {
  .openings-card div {
    gap: 8px;
    margin-bottom: 24px;
  }
}

.openings-card div p {
  font-size: 30px;
  font-weight: 400;
}

@media screen and (width <= 768px) {
  .openings-card div p {
    font-size: 18px;
    font-weight: 400;
  }
}

.openings-eye-expand-component {
  display: none;
}

@media screen and (width <= 768px) {
  .openings-eye-expand-component {
    display: block;
  }
}

.openings-eye-expand {
  border-bottom: 1px solid #000;
}

.openings-eye-expand-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 0;
}

.openings-eye-expand-title p {
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
  max-width: 95%;
}

.career-requirements-section {
  margin: 140px 60px;
}

@media screen and (width <= 768px) {
  .career-requirements-section {
    margin: 140px 24px;
  }
}

.careers-detailed-text-div {
  display: grid;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .careers-detailed-text-div {
    gap: 24px;
  }
}

.careers-detailed-text-div p {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

@media screen and (width <= 768px) {
  .careers-detailed-text-div p {
    font-size: 14px;
  }
}

.careers-detailed-text-div p span {
  color: #878787;
}

.title-right .apply-btn {
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #000;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}

.title-right .share-btn {
  background-color: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #000;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}

.title-right .share-btn:hover {
  background-color: #000;
  color: #fff;
}

.careers-job-requirements {
  background-color: #fff;
  margin: 60px 200px;
  padding: 60px;
  border-radius: 4px;
}

@media screen and (width <= 768px) {
  .careers-job-requirements {
    margin: 60px 0;
    padding: 24px;
  }
}

.requirements-top-section {
  border-bottom: 1px solid #0003;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 24px;
  text-transform: capitalize;
}

@media screen and (width <= 768px) {
  .requirements-top-section {
    flex-direction: column;
    align-items: start;
    gap: 24px;
  }
}

.requirements-top-section .title-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (width <= 768px) {
  
}

.requirements-top-section .title-left .title {
  font-size: 48px;
  font-weight: 500;
}

@media screen and (width <= 768px) {
  .requirements-top-section .title-left .title {
    font-size: 30px;
  }
}

.requirements-top-section .title-left .sub-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 20px;
  font-weight: 400;
}

.requirements-top-section .title-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .requirements-top-section .title-right {
    gap: 12px;
  }
}

.requirements-mail {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  text-transform: lowercase;
}

.requirements-mail a {
  color: #000;
  font-size: 18px;
  font-weight: 500;
}

.requirements-content-section {
  margin: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .requirements-content-section {
    margin: 32px 0;
    gap: 32px;
  }
}

.requirements-content-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.requirements-content-card p {
  font-size: 30px;
  font-weight: 600;
}

.requirements-content-card ul li {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

@media screen and (width <= 768px) {
  .requirements-content-card ul li {
    font-size: 18px;
  }
}

.job-apply-btn {
  display: flex;
  justify-content: space-between;
}

.job-apply-btn .apply-btn {
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #000;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}

.job-apply-btn .share-btn {
  background-color: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #000;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}

.job-apply-btn .share-btn:hover {
  background-color: #000;
  color: #fff;
}

.wibato-gallery {
  margin: 120px 60px;
}

@media screen and (width <= 768px) {
  .wibato-gallery {
    margin: 60px 24px;
  }
}

.gallery-section {
  display: grid;
  place-items: center;
}

.gallery-container {
  columns: 4;
  width: 100%;
}

@media screen and (width <= 1280px) {
  .gallery-container {
    columns: 3;
    width: 90%;
  }
}

.gallery-container .gallery-box img {
  width: 313px;
  height: auto;
  margin-bottom: 12px;
  object-fit: cover;
}

.gallery-container .gallery-box:nth-child(4n+1) img, .gallery-container .gallery-box:nth-child(4n+2) img {
  margin-top: 30px;
}

.gallery-container .gallery-box:nth-child(4n+2) img, .gallery-container .gallery-box:nth-child(4n+3) img {
  margin-bottom: 30px;
}

.more-gallery-btn {
  margin-top: 30px;
  display: grid;
  place-items: center;
}

@media screen and (width <= 768px) {
  .gallery-container {
    columns: 2;
    grid-auto-flow: column;
    width: auto;
  }

  .gallery-container .gallery-box img {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .gallery-container .gallery-box:nth-child(odd) img {
    margin-top: 10px;
  }

  .gallery-container .gallery-box:nth-child(2n) img {
    margin-bottom: 10px;
  }
}


/* [project]/pages/contact/contact.css [client] (css) */
.contact-contact-section {
  margin: 180px 60px;
}

@media screen and (width <= 768px) {
  .contact-contact-section {
    margin: 60px 24px;
  }
}

.contact-form-section {
  display: grid;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .contact-form-section {
    gap: 32px;
  }
}

.contact-form-section p {
  font-size: 48px;
  font-weight: 500;
  line-height: 63px;
  justify-self: start;
}

@media screen and (width <= 768px) {
  .contact-form-section p {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
  }
}

.contact-form-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
}

@media screen and (width <= 768px) {
  .contact-form-div {
    flex-direction: column;
    justify-content: center;
    gap: 50px;
  }
}

.contact-form-div .contact-form-icon {
  width: 291px;
  height: 300px;
}

@media screen and (width <= 768px) {
  .contact-form-div .contact-form-icon {
    width: 191px;
    height: 200px;
  }
}

.contact-form-div .contact-form-icon .ring-1 {
  animation: 5s linear infinite ring1;
}

.contact-form-div .contact-form-icon .ring-2 {
  animation: 4.5s linear infinite ring2;
}

.contact-form-div .contact-form-icon .ring-3 {
  animation: 4s linear infinite ring3;
}

@keyframes ring1 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes ring2 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes ring3 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.contact-form {
  display: grid;
  gap: 24px;
  width: 50%;
}

@media screen and (width <= 768px) {
  .contact-form {
    width: 100%;
    gap: 12px;
  }
}

.contact-form span {
  display: flex;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .contact-form span {
    display: grid;
    gap: 12px;
  }
}

.contact-form button {
  width: 203px;
  height: 45px;
  padding: 12px 16px;
  border-radius: 8px;
  gap: 10px;
  border: none;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-transform: uppercase;
  justify-self: right;
  cursor: pointer;
}

@media screen and (width <= 768px) {
  .contact-form button {
    width: 100%;
  }
}


/* [project]/pages/services/services.css [client] (css) */
.services-page-cards {
  margin: 60px 60px 180px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .services-page-cards {
    margin: 24px;
    gap: 12px;
  }
}

.services-page-card {
  background-color: #faebd7;
  padding: 60px;
  border-radius: 4px;
  margin-bottom: 0;
  flex-grow: 1;
  flex-basis: calc(50% - 20px);
  width: 100%;
  word-wrap: break-word;
}

@media screen and (width <= 768px) {
  .services-page-card {
    flex-basis: 100%;
    padding: 32px;
    gap: 24px;
  }
}

.services-page-card:last-child {
  display: none !important;
}

.services-page-card:nth-child(2), .services-page-card:nth-child(4), .services-page-card:nth-child(6), .services-page-card:nth-child(7), .services-page-card:nth-child(8) {
  top: 30px;
}

@media screen and (width <= 768px) {
  :is(.services-page-card:nth-child(2), .services-page-card:nth-child(4), .services-page-card:nth-child(6), .services-page-card:nth-child(7), .services-page-card:nth-child(8)) {
    top: 0;
  }
}

@media screen and (width <= 1280px) {
  .services-page-card:nth-child(5) {
    top: 30px;
  }
}

@media screen and (width <= 1280px) {
  .services-page-card:nth-child(6) {
    top: 30px;
  }
}

@media screen and (width <= 1280px) {
  .services-page-card:nth-child(7) {
    top: 30px;
  }
}

@media screen and (width <= 1280px) {
  .services-page-card:nth-child(8) {
    top: 30px;
  }
}

.services-page-card.custom-width-55 {
  flex-basis: calc(55% - 20px) !important;
}

@media screen and (width <= 1280px) {
  .services-page-card.custom-width-55 {
    flex-basis: 40% !important;
  }
}

@media screen and (width <= 768px) {
  .services-page-card.custom-width-55 {
    flex-basis: 100%;
  }
}

.services-page-card.custom-width-45 {
  flex-basis: calc(45% - 20px) !important;
}

@media screen and (width <= 1280px) {
  .services-page-card.custom-width-45 {
    flex-basis: 40% !important;
  }
}

@media screen and (width <= 768px) {
  .services-page-card.custom-width-45 {
    flex-basis: 100%;
  }
}

.services-page-card.custom-width-35 {
  flex-basis: calc(40% - 20px) !important;
}

@media screen and (width <= 1280px) {
  .services-page-card.custom-width-35 {
    flex-basis: 30% !important;
  }
}

@media screen and (width <= 768px) {
  .services-page-card.custom-width-35 {
    flex-basis: 100%;
  }
}

.services-page-card.custom-width-65 {
  flex-basis: calc(60% - 20px) !important;
}

@media screen and (width <= 1280px) {
  .services-page-card.custom-width-65 {
    flex-basis: 30% !important;
  }
}

@media screen and (width <= 768px) {
  .services-page-card.custom-width-65 {
    flex-basis: 100%;
  }
}

.services-page-card p:first-child {
  font-size: 72px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-size: clamp(32px, 4vw, 72px);
}

.services-page-card p:nth-child(2) {
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  margin-bottom: 24px;
}

@media screen and (width <= 768px) {
  .services-page-card p:nth-child(2) {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
  }
}

.services-detailed-banner {
  padding: 170px 60px;
}

@media screen and (width <= 768px) {
  .services-detailed-banner {
    padding: 170px 24px;
  }
}

.services-detailed-text-div {
  display: grid;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .services-detailed-text-div {
    gap: 24px;
  }
}

.services-detailed-banner p:first-child {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

@media screen and (width <= 768px) {
  .services-detailed-banner p:first-child {
    font-size: 14px;
  }
}

.services-detailed-banner p:first-child span {
  color: #878787;
}

.services-detailed-text {
  font-size: clamp(30px, 8vw, 72px);
  font-weight: 900;
  line-height: 94px;
  line-height: 105%;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media screen and (width <= 768px) {
  .services-detailed-text {
    line-height: 45px;
  }
}

.services-detailed-text span {
  color: #f7931e;
}

.services-detailed-content-div {
  background: linear-gradient(#1a1003, #342007);
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 60px 150px 60px 60px;
}

@media screen and (width <= 768px) {
  .services-detailed-content-div {
    padding: 24px;
    flex-direction: column-reverse;
    gap: 27px;
  }
}

@media screen and (width <= 768px) {
  .services-detailed-content-div svg {
    position: unset;
    right: 0;
    width: 207px;
    height: 207px;
  }
}

.services-detailed-content-texts {
  display: grid;
  gap: 24px;
}

.services-detailed-content-texts p:first-child {
  font-size: 72px;
  font-weight: 500;
  line-height: 94px;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media screen and (width <= 768px) {
  .services-detailed-content-texts p:first-child {
    font-size: 48px;
    font-weight: 500;
    line-height: 63px;
  }
}

.services-detailed-content-texts p:nth-child(2) a {
  text-decoration: none;
  color: #fff;
}

.services-detailed-content-texts p:nth-child(2) {
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  width: 649px;
}

@media screen and (width <= 768px) {
  .services-detailed-content-texts p:nth-child(2) {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    width: 100%;
  }
}

.services-faq-section {
  margin: 120px 60px;
}

@media screen and (width <= 768px) {
  .services-faq-section {
    margin: 24px;
  }
}

.service-contact-section {
  margin: 120px 60px;
}

@media screen and (width <= 768px) {
  .service-contact-section {
    margin: 60px 24px;
  }
}

.contact-form-section {
  display: grid;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .contact-form-section {
    gap: 32px;
  }
}

.contact-form-section p {
  font-size: 48px;
  font-weight: 500;
  line-height: 63px;
  justify-self: start;
}

@media screen and (width <= 768px) {
  .contact-form-section p {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
  }
}

.contact-form-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
}

@media screen and (width <= 768px) {
  .contact-form-div {
    flex-direction: column;
    justify-content: center;
    gap: 50px;
  }
}

.contact-form {
  display: grid;
  justify-self: end;
  gap: 24px;
  width: 50%;
}

@media screen and (width <= 768px) {
  .contact-form {
    justify-self: center;
    width: 100%;
    gap: 12px;
  }
}

.contact-form span {
  display: flex;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .contact-form span {
    display: grid;
    gap: 12px;
  }
}

.contact-form button {
  width: 203px;
  height: 45px;
  padding: 12px 16px;
  border-radius: 8px;
  gap: 10px;
  border: none;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-transform: uppercase;
  justify-self: right;
  cursor: pointer;
}

@media screen and (width <= 768px) {
  .contact-form button {
    width: 100%;
  }
}

.service-working-process-section {
  margin: 120px 60px;
}

@media screen and (width <= 768px) {
  .service-working-process-section {
    margin: 60px 24px;
  }
}

.testimonials-qoutes-di {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

@media screen and (width <= 768px) {
  .testimonials-qoutes-di {
    display: grid;
    justify-content: start;
  }
}

.testimonials-carouse {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonials-carousel-inne {
  white-space: nowrap;
  transition: transform .7s;
}

.working-process-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  white-space: normal;
  width: 100%;
  padding: 60px;
  background-color: #fff;
}

@media screen and (width <= 768px) {
  .working-process-card {
    padding: 24px;
  }
}

.working-process-title {
  font-size: clamp(18px, 6vw, 48px);
}

.working-process-count {
  font-size: clamp(18px, 4vw, 48px);
}

.scroll-btns {
  width: 100%;
  height: 20px;
  display: flex;
  gap: 10px;
  flex-direction: row;
  justify-content: center;
}

.scroll-btn {
  height: 10px;
  background-color: #000;
  transition: width .5s;
  border-radius: 4px;
  cursor: pointer;
}

.card-top-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 48px;
  font-weight: 500;
}

@media screen and (width <= 768px) {
  .card-top-div {
    font-size: 20px;
    flex-direction: column-reverse;
    align-items: start;
  }
}

@media screen and (width <= 768px) {
  .card-top-div p:nth-child(2) {
    font-size: 30px;
  }
}

.card-bottom-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  width: 100%;
  position: relative;
}

@media screen and (width <= 768px) {
  .card-bottom-div {
    flex-direction: column;
    gap: 24px;
  }
}

.card-sub-data-list {
  flex: 2;
  overflow-y: scroll;
  height: 360px;
}

@media screen and (width <= 768px) {
  .card-sub-data-list {
    height: 200px;
  }
}

.testimonials-text-img {
  flex: 1;
  width: 100%;
  max-height: 312px;
}

.card-sub-data-list::-webkit-scrollbar {
  display: none;
}

.related-works-section {
  margin: 120px 60px;
}

@media screen and (width <= 768px) {
  .related-works-section {
    margin: 0 24px;
  }
}

.related-works-content-section {
  position: relative;
  height: 500px;
}

@media screen and (width <= 768px) {
  .related-works-content-section {
    height: 350px;
  }
}

.related-works-content-section.hide {
  display: none;
  animation: 1s hideWorksSection;
}

@keyframes hideWorksSection {
  0% {
  }

  100% {
    display: none;
  }
}

.related-works-cards .related-works-card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

@media screen and (width <= 768px) {
  .related-works-cards .related-works-card-content {
    gap: 20px;
  }
}

.related-works-cards .related-works-card-content .lock-icon {
  width: 106px;
  height: 112px;
}

@media screen and (width <= 768px) {
  .related-works-cards .related-works-card-content .lock-icon {
    width: 74px;
    height: 78px;
  }
}

.related-works-cards .related-works-card-content .related-works-card-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  color: #878787;
  text-align: center;
}

@media screen and (width <= 768px) {
  .related-works-cards .related-works-card-content .related-works-card-text {
    font-size: 14px;
  }
}

.related-works-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  padding: 60px;
  transition: all .3s;
}

@media screen and (width <= 768px) {
  .related-works-card {
    padding: 24px;
    width: 267px;
    height: 267px;
  }
}

.related-works-card:first-child {
  background-color: #fff;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.related-works-card:first-child.fade-works {
  animation: 2s forwards opacityCard;
}

@keyframes opacityCard {
  0% {
    rotate: 3deg;
  }

  50% {
    rotate: -3deg;
  }

  100% {
    rotate: none;
  }
}

.related-works-card:nth-child(2) {
  background-color: #ffe3c2;
  transform: translate(-50%, -50%)rotate(24deg);
  content-visibility: hidden;
}

.related-works-card:nth-child(3) {
  background-color: #f6c4fe;
  transform: translate(-50%, -50%)rotate(16deg);
  content-visibility: hidden;
}

.related-works-card:nth-child(4) {
  background-color: #c2f5b0;
  transform: translate(-50%, -50%)rotate(8deg);
  content-visibility: hidden;
}

.related-works-card:nth-child(5) {
  background-color: #dcd2f7;
  transform: translate(-50%, -50%)rotate(-24deg);
  content-visibility: hidden;
}

.related-works-card:nth-child(6) {
  background-color: #c3dfff;
  transform: translate(-50%, -50%)rotate(-16deg);
  content-visibility: hidden;
}

.related-works-card:nth-child(7) {
  background-color: #ffdd78;
  transform: translate(-50%, -50%)rotate(-8deg);
  content-visibility: hidden;
}

.related-works-card:nth-child(2).fade-works {
  animation: 1.5s forwards fallWorksCard2;
}

.related-works-card:nth-child(3).fade-works {
  animation: 1.5s forwards fallWorksCard3;
}

.related-works-card:nth-child(4).fade-works {
  animation: 1.5s forwards fallWorksCard4;
}

.related-works-card:nth-child(5).fade-works {
  animation: 1.5s forwards fallWorksCard5;
}

.related-works-card:nth-child(6).fade-works {
  animation: 1.5s forwards fallWorksCard6;
}

.related-works-card:nth-child(7).fade-works {
  animation: 1.5s forwards fallWorksCard7;
}

@keyframes fallWorksCard2 {
  0% {
    opacity: 1;
    rotate: none;
  }

  100% {
    rotate: -20deg;
    transform: translateY(500px);
    transform: translateX(-100px);
    opacity: 0;
  }
}

@keyframes fallWorksCard3 {
  0% {
    opacity: 1;
    rotate: none;
  }

  100% {
    rotate: -30deg;
    transform: translateY(500px);
    transform: translateX(-200px);
    opacity: 0;
  }
}

@keyframes fallWorksCard4 {
  0% {
    opacity: 1;
    rotate: none;
  }

  100% {
    rotate: -40deg;
    transform: translateY(500px);
    transform: translateX(-300px);
    opacity: 0;
  }
}

@keyframes fallWorksCard5 {
  0% {
    opacity: 1;
    rotate: none;
  }

  100% {
    rotate: -50deg;
    transform: translateY(500px);
    transform: translateX(-400px);
    opacity: 0;
  }
}

@keyframes fallWorksCard6 {
  0% {
    opacity: 1;
    rotate: none;
  }

  100% {
    rotate: -60deg;
    transform: translateY(500px);
    transform: translateX(-500px);
    opacity: 0;
  }
}

@keyframes fallWorksCard7 {
  0% {
    opacity: 1;
    rotate: none;
  }

  100% {
    rotate: -70deg;
    transform: translateY(500px);
    transform: translateX(-600px);
    opacity: 0;
  }
}

.project-cards-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 60px 0 0;
}

@media screen and (width <= 768px) {
  
}

.projects-card {
  position: relative;
  width: calc(50% - 12px);
  margin-bottom: 24px;
  border-radius: 4px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .projects-card {
    width: calc(100% - 12px);
    padding: 24px;
  }
}

.projects-card p:first-child {
  font-size: 48px;
  font-weight: 500;
}

.projects-card p:nth-child(2) {
  font-size: 30px;
  font-weight: 400;
}

.projects-card p:nth-child(3) {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.projects-card-img {
  width: 300px;
  position: absolute;
  top: 60px;
  right: 60px;
  border-radius: 4px;
  opacity: 0;
  transition: all .3s;
}

.projects-card-img:hover {
  opacity: 1;
}

@media screen and (width <= 768px) {
  .projects-card-img:hover {
    opacity: 0;
  }
}

.is-fade {
  display: none;
  animation: 3s isFadeProjects;
}

@keyframes isFadeProjects {
  0% {
    display: block;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.service-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.service-platform {
  display: grid;
  place-items: center;
  width: calc(12.5% - 16px);
  padding: 32px;
  border-radius: 8px;
}

@media (width <= 1080px) {
  .service-platform {
    padding: 16px;
  }
}

@media (width <= 850px) {
  .service-platform {
    padding: 8px;
  }
}

@media (width <= 750px) {
  .service-platform {
    width: calc(25% - 16px);
  }
}

@media (width <= 480px) {
  .service-platform {
    width: calc(50% - 16px);
  }
}

.service-platform:first-child {
  background: #ffdd78;
}

.service-platform:nth-child(2) {
  background: #f6c4fe;
}

.service-platform:nth-child(3) {
  background: #c3dfff;
}

.service-platform:nth-child(4) {
  background: #dcd2f7;
}

.service-platform:nth-child(5) {
  background: #f7d2db;
}

.service-platform:nth-child(6) {
  background: #ffe3c2;
}

.service-platform:nth-child(7) {
  background: #ffdd78;
}

.service-platform:nth-child(8) {
  background: #f6c4fe;
}

.service-platform svg {
  margin-bottom: 6px;
  width: 48px;
  height: auto;
}

@media (width <= 1200px) {
  .service-platform svg {
    width: 40px;
  }
}

@media (width <= 1080px) {
  .service-platform svg {
    width: 32px;
  }
}

.service-platform p {
  color: #000;
  font-size: 16px;
  margin: 0;
}

@media (width <= 820px) {
  .service-platform p {
    font-size: 12px;
  }
}

.outcomes-section {
  padding: 0 60px;
}

.outcomes-section .paragraph {
  text-indent: 30px;
}

.outcomes-section .outcomes .content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.outcomes {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.outcomes-section .outcomes .content h1 {
  font-size: clamp(48px, 5vw + 1rem, 72px);
  font-weight: 500;
}

.outcomes-section .outcomes .content p {
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 30px;
}

.outcomes-section .outcomes .content p a {
  text-decoration: none;
}

.sub-content .content h2 {
  font-size: clamp(24px, 4vw + 1rem, 48px);
  font-weight: 400;
}

.sub-content .content .paragraph a {
  text-decoration: none;
}

.adv-dis-cards {
  display: flex;
  gap: 48px;
}

.sub-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.adv-card, .dis-card {
  display: flex;
  gap: 32px;
  flex: 1;
  flex-direction: column;
  background-color: #fff;
  padding: 32px;
  padding-top: 40px;
}

.adv-card .content h2, .dis-card .content h2 {
  font-size: 30px;
  font-weight: 500;
}

.adv-card .content p, .dis-card .content p {
  color: #878787;
}

.adv-card-list, .dis-card-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card-list-points {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.card-list-points div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-list-points h3 {
  font-size: 24px;
  font-weight: 400;
}

.card-list-points p {
  font-size: 16px;
  font-weight: 400;
  color: #878787;
}

.outcomes-question {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.outcomes-question h2 {
  font-size: clamp(16px, 6vw, 34px);
  font-weight: 400;
}

.outcomes-question-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.outcomes-question-card {
  flex: calc(33.33% - 10px);
  box-sizing: border-box;
  padding: 32px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.outcomes-question-card:first-child {
  background-color: #ffdd78;
}

.outcomes-question-card:nth-child(2) {
  background-color: #c3dfff;
}

.outcomes-question-card:nth-child(3) {
  background-color: #dcd2f7;
}

.outcomes-question-card h2 {
  font-size: clamp(24px, 6vw, 48px);
  font-weight: 500;
}

.outcomes-question-card p {
  font-size: 18px;
  font-weight: 400;
}

.summery-content {
  width: 100%;
  display: grid;
  place-items: center;
  text-align: start;
  gap: 32px;
  background-color: #fff;
  padding: 48px;
}

.summery-content p span a {
  text-decoration: none;
}

.summery-content h2 {
  font-size: clamp(24px, 4vw + 1rem, 48px);
  font-weight: 400;
}

@media (width <= 1024px) {
  .outcomes-section {
    padding: 0 30px;
  }

  .outcomes {
    gap: 32px;
  }

  .outcomes-section .outcomes .content {
    gap: 16px;
  }

  .outcomes-section .outcomes .content h1 {
    font-size: 48px;
  }

  .sub-content .content h2 {
    font-size: 36px;
  }

  .adv-dis-cards {
    flex-direction: column;
    gap: 24px;
  }

  .outcomes-question-card {
    flex: calc(50% - 10px);
  }
}

@media (width <= 768px) {
  .outcomes-section {
    padding: 0 24px;
  }

  .outcomes-section .outcomes .content h1 {
    font-size: 36px;
  }

  .outcomes-section .outcomes .content p {
    font-size: 16px;
  }

  .sub-content .content h2 {
    font-size: 30px;
  }

  .adv-card, .dis-card {
    padding: 16px;
    padding-top: 40px;
  }

  .adv-card .content h2, .dis-card .content h2 {
    font-size: 24px;
  }

  .card-list-points div:first-child svg {
    width: 24px;
  }

  .adv-card .content p, .dis-card .content p, .card-list-points p {
    font-size: 14px;
  }

  .card-list-points h3 {
    font-size: 20px;
  }

  .outcomes-question-card {
    flex: calc(100% - 10px);
  }

  .summery-content {
    padding: 32px;
  }

  .summery-content p {
    width: 100%;
  }
}

@media (width <= 480px) {
  .outcomes-section .paragraph {
    text-indent: 15px;
  }

  .outcomes-section .outcomes .content h1 {
    font-size: 28px;
  }

  .outcomes-section .outcomes .content p {
    font-size: 14px;
  }

  .sub-content .content h2 {
    font-size: 24px;
  }

  .adv-card .content h2, .dis-card .content h2 {
    font-size: 20px;
  }

  .card-list-points h3 {
    font-size: 18px;
  }

  .card-list-points p {
    font-size: 12px;
  }

  .summery-content p {
    width: 100%;
  }
}


/* [project]/pages/team/team.css [client] (css) */
.team-banner-section {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 60px;
  margin: 0 60px;
}

.banner-content-wrapper {
  position: relative;
}

.banner-content-wrapper img {
  width: 100%;
}

@media screen and (width <= 768px) {
  .banner-content-wrapper img {
    height: auto;
  }
}

.team-banner-title {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.team-banner-title h2 {
  font-size: clamp(26px, 4vw, 72px);
}

.team-banner-title p {
  font-size: clamp(13px, 4vw, 32px);
  font-weight: 500;
}

.team-banner-section .sub-content p {
  font-size: clamp(18px, 4vw, 36px);
  font-weight: 500;
}

.team-moments-wrapper {
  background-color: #202124;
  padding: 20px 0;
  color: #fff;
}

.team-moments {
  margin: 40px 60px;
}

.team-moments .team-content {
  text-align: center;
  margin-bottom: 30px;
}

.team-moments .team-content h2 {
  font-size: clamp(26px, 4vw, 72px);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.team-moments .team-content p {
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 400;
}

.gallery {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}

.gallery > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.gallery .tall {
  grid-row: span 2;
}

@media (width <= 1080px) {
  .team-banner-section {
    margin: 0 32px;
    gap: 30px;
  }

  .team-moments {
    margin: 40px 30px;
  }
}

@media (width <= 768px) {
  .team-banner-section {
    margin: 0 24px;
    gap: 16px;
  }

  .team-banner-title {
    top: 50%;
  }

  .team-moments {
    margin: 40px 24px;
  }
}

@media (width <= 480px) {
  .team-banner-section {
    margin: 0 16px;
  }

  .team-moments {
    margin: 40px 16px;
  }
}


/* [project]/pages/works/works.css [client] (css) */
.works-portfolio {
  margin: 60px;
}

@media screen and (width <= 768px) {
  .works-portfolio {
    margin: 24px;
  }
}

.all-portfolio-title-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 60px;
}

@media screen and (width <= 768px) {
  .all-portfolio-title-section {
    margin-bottom: 32px;
    flex-direction: column;
    align-items: end;
  }
}

.portfolio-container-title {
  font-size: 72px;
  font-weight: 500;
  text-transform: uppercase;
}

@media screen and (width <= 768px) {
  .portfolio-container-title {
    font-size: 48px;
    font-weight: 500;
    line-height: 63px;
    width: 100%;
  }
}

.work-img {
  width: 100%;
}

@media screen and (width <= 768px) {
  .work-img {
    height: auto;
  }
}

.work-detailed-section {
  display: flex;
  flex-direction: column;
}

.work-banner-section {
  width: 100%;
  padding: 200px 60px 120px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media screen and (width <= 768px) {
  .work-banner-section {
    padding: 130px 24px 80px;
  }
}

.industry-section {
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(19px, 4vw, 24px);
}

.industry-title {
  opacity: .5;
}

.img-banner {
  display: flex;
  flex-direction: column;
}

.img-banner .company-name {
  font-size: clamp(48px, 6vw, 120px);
  font-weight: 900;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}

.img-banner img {
  border-radius: 12px;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.work-description-section {
  padding: 120px 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

@media screen and (width <= 1024px) {
  .work-description-section {
    padding: 60px 24px;
    gap: 30px;
  }
}

.work-description-section img {
  border-radius: 4px;
  object-fit: contain;
  width: 100%;
}

@media screen and (width <= 1024px) {
  .work-description-section img {
    height: 100%;
  }
}

.work-description-title {
  text-transform: uppercase;
  font-size: clamp(16px, 6vw, 72px);
  font-weight: 500;
}

.work-description {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .work-description {
    flex-direction: column;
  }
}

.service-provided {
  flex: 1;
}

.service-provided h1 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 24px;
}

.work-description .work-description-paragraphs {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-weight: 400;
  line-height: 31.27px;
  line-height: 31.27px;
  font-size: clamp(12px, 4vw, 24px);
}

@media screen and (width <= 768px) {
  .work-description .work-description-paragraphs {
    gap: 10px;
  }
}

.case-studies-sections {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 120px;
}

@media screen and (width <= 768px) {
  .case-studies-sections {
    gap: 60px;
  }
}

.case-studies-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 60px;
  padding: 0 60px;
}

@media screen and (width <= 768px) {
  .case-studies-section {
    padding: 0 24px;
    gap: 30px;
  }
}

.case-studies-images {
  display: flex;
  flex-wrap: wrap;
}

.case-studies-images img {
  width: calc(100% - 10px);
  margin: 5px;
  height: 100%;
}

@media (width <= 600px) {
  .case-studies-images img {
    width: 100%;
    margin: 0;
  }
}

.case-studies-section-desc {
  padding: 0 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media screen and (width <= 768px) {
  .case-studies-section-desc {
    padding: 0;
  }
}

.case-studies-section-desc h1 {
  font-size: 72px;
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 500;
  text-align: center;
}

@media screen and (width <= 768px) {
  .case-studies-section-desc h1 {
    text-align: start;
  }
}

.case-studies-section-desc h2 {
  text-transform: uppercase;
  position: absolute;
  left: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .03em;
  background-color: #f9d8b1;
  padding: 10px 16px;
  border-radius: 244px;
}

@media screen and (width <= 768px) {
  .case-studies-section-desc h2 {
    position: unset;
    width: fit-content;
  }
}

.case-studies-section-desc .work-description-paragraphs {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  font-size: clamp(12px, 4vw, 24px);
}

@media screen and (width <= 768px) {
  .case-studies-section-desc .work-description-paragraphs {
    text-align: start;
  }
}


/* [project]/pages/careers/_components/ResumeUpload.css [client] (css) */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.popup {
  margin: 180px 60px;
  padding: 60px;
  background-color: #fff;
  border-radius: 4px;
  background-color: #fff;
  max-height: 95vh;
  overflow-y: auto;
  width: 850px;
  z-index: 1001;
  position: relative;
}

@media screen and (width <= 768px) {
  .popup {
    margin: 180px 24px;
    padding: 24px;
  }
}

.popup::-webkit-scrollbar {
  display: none;
}

.resume-form-section {
  display: grid;
  gap: 60px;
}

@media screen and (width <= 768px) {
  .resume-form-section {
    gap: 32px;
  }
}

.resume-form-section h1 {
  font-size: 48px;
  font-weight: 500;
  line-height: 63px;
  justify-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
}

@media screen and (width <= 768px) {
  .resume-form-section h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
  }
}

.resume-contact-form {
  display: grid;
  gap: 24px;
  width: 100%;
}

@media screen and (width <= 768px) {
  .resume-contact-form {
    justify-self: center;
    width: 100%;
    gap: 12px;
  }
}

.resume-contact-form span {
  display: flex;
  gap: 24px;
}

@media screen and (width <= 768px) {
  .resume-contact-form span {
    display: grid;
    gap: 12px;
  }
}

.resume-contact-form button {
  width: 203px;
  height: 45px;
  padding: 12px 16px;
  border-radius: 8px;
  gap: 10px;
  border: none;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-transform: uppercase;
  justify-self: right;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (width <= 768px) {
  .resume-contact-form button {
    width: 100%;
  }
}

.resume-form-close {
  position: absolute;
  top: 24px;
  right: 24px;
  border-radius: 50%;
  border: 1px solid #878787;
  height: 36px;
  width: 36px;
  cursor: pointer;
  display: grid;
  place-items: center;
}


/* [project]/pages/team/_components/teamcatecard.css [client] (css) */
.teamcatecard-container-wrapper {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin: 60px;
}

.teamcatecard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  gap: 10px;
  border-radius: 20px;
  background-color: #fff;
}

.teamcatecard {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.teamcatecard h1 {
  color: #202124;
  text-align: center;
  font-size: clamp(34px, 4vw, 60px);
  font-style: normal;
  font-weight: 600;
  margin-bottom: 16px;
}

.teamcatecard p {
  color: #2f2f2f;
  font-size: 18px;
  font-weight: 400;
  margin-top: 16px;
  width: 80%;
  text-align: center;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.team-member {
  width: calc(25% - 30px);
  min-width: 250px;
  border-radius: 10px;
  background: #fbfbfb;
  box-shadow: 0 0 4px #00000040;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-member p {
  color: #444;
}

.team-member img {
  width: 100%;
  border-radius: 8px;
}

.people-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
}

.people-info h2 {
  width: 100%;
  color: #222;
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 600;
  text-transform: capitalize;
}

.people-info p {
  color: #444;
  font-size: clamp(12px, 4vw, 16px);
  font-weight: 500;
  text-transform: capitalize;
}

.linked-in {
  display: grid;
  place-items: center;
}

@media screen and (width <= 1080px) {
  .teamcatecard-container-wrapper {
    margin: 30px;
  }

  .teamcatecard-container {
    padding: 30px;
  }

  .team-member {
    width: calc(33.33% - 30px);
  }

  .linked-in {
    place-items: center;
  }
}

@media screen and (width <= 768px) {
  .teamcatecard-container-wrapper {
    margin: 24px;
  }

  .teamcatecard-container {
    padding: 24px;
  }

  .team-member {
    width: calc(50% - 30px);
  }

  .card-container {
    gap: 16px;
  }

  .linked-in {
    place-items: center;
  }
}

@media screen and (width <= 480px) {
  .teamcatecard-container-wrapper {
    margin: 16px;
  }

  .teamcatecard-container {
    padding: 16px;
  }

  .team-member {
    width: 100%;
  }

  .card-container {
    gap: 16px;
  }

  .linked-in {
    place-items: center;
  }
}


/* [project]/components/Home/_components/homeSections.css [client] (css) */
.home-services-container {
  color: #f2f2f2;
  background-color: #191919;
  padding: 60px;
}

@media screen and (width <= 1080px) {
  .home-services-container {
    padding: 60px 24px;
  }
}

.home-services-contents-wrapper {
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  margin-bottom: 80px;
}

@media screen and (width <= 768px) {
  .home-services-contents-wrapper {
    flex-direction: column;
    gap: 100px;
  }
}

@media screen and (width <= 1080px) {
  .home-services-contents-wrapper {
    flex-direction: column;
    gap: 70px;
  }
}

.home-services-contents-wrapper .home-services-contents, .home-services-contents-wrapper .animated-service-icon {
  flex: 1;
}

@media screen and (width <= 768px) {
  .home-services-contents-wrapper .animated-service-icon svg {
    width: 103px;
  }
}

@media screen and (width <= 768px) {
  .home-services-contents-wrapper .animated-service-icon svg:nth-child(2) {
    width: 150px;
  }
}

.home-services-contents-wrapper .home-services-contents {
  text-align: start;
}

.home-services-contents h1 {
  font-size: clamp(40px, 3vw, 72px);
  font-weight: 500;
  line-height: 93.82px;
  text-transform: uppercase;
}

.home-services-contents h2 {
  font-size: clamp(28px, 2vw, 40px);
  font-weight: 300;
  line-height: 52.12px;
  color: #d3d3d3;
  margin-bottom: 40px;
}

@media screen and (width <= 768px) {
  .home-services-contents h2 {
    line-height: 130%;
  }
}

.home-services-contents h2 strong {
  color: #f2f2f2;
}

.home-services-contents p {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 23.45px;
  color: #d3d3d3;
}

.home-service-cards {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.home-service-card {
  border: 1px solid #6b6b6b;
  border-radius: 24px;
  margin-right: 12px;
  margin-left: 12px;
  padding: 30px;
  height: 100%;
  display: grid;
}

@media screen and (width <= 768px) {
  .home-service-card {
    padding: 30px 16px;
  }
}

@media screen and (width <= 1080px) {
  .home-service-card {
    padding: 30px 16px;
  }
}

.home-service-card h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  margin-bottom: 36px;
  height: 104.24px;
}

@media screen and (width <= 1080px) {
  .home-service-card h2 {
    line-height: 130%;
    margin-bottom: 20px;
  }
}

.home-service-card p {
  color: #d3d3d3;
  margin-bottom: 60px;
  font-size: clamp(15px, 1.5vw, 16px);
  font-weight: 400;
}

@media screen and (width <= 768px) {
  .home-service-card p {
    margin-bottom: 20px;
  }
}

@media screen and (width <= 1080px) {
  .home-service-card p {
    margin-bottom: 20px;
  }
}

.home-service-card .card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.home-service-card .card-bottom svg {
  width: 40px;
}

.home-service-card .card-bottom button {
  border: 1px solid #f2f2f2;
  text-wrap: nowrap;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 400;
  line-height: 20.85px;
  width: 146px;
  height: 40px;
  padding: 6px 16px;
  gap: 12px;
  border-radius: 20px;
  background-color: #0000;
  color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
}

@media screen and (width <= 768px) {
  .home-service-card .card-bottom button {
    width: 136px;
    padding: 3px 13px;
  }
}

.home-service-card .card-bottom button svg rect, .home-service-card .card-bottom button svg path {
  transition: all .3s;
}

.home-service-card .card-bottom button:hover {
  background-color: #f2f2f2;
  color: #191919;
  width: 149px;
  height: 43px;
}

@media screen and (width <= 768px) {
  .home-service-card .card-bottom button:hover {
    width: 139px;
  }
}

.home-service-card .card-bottom button:hover svg rect {
  fill: #191919;
}

.home-service-card .card-bottom button:hover svg path {
  stroke: #f2f2f2;
}

.home-service-cardsss .custom-left-arro {
  position: absolute;
  top: 80%;
  left: 0;
  z-index: 999;
}

.home-service-cardsss .custom-right-arro {
  position: absolute;
  top: 80%;
  right: 0;
  z-index: 999;
}

.cards-carouse {
  position: relative;
}

.home-service-card-bg-icon {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.home-works-section {
  padding: 60px;
}

@media screen and (width <= 1080px) {
  .home-works-section {
    padding: 60px 24px;
  }
}

.home-works-section h1 {
  font-size: clamp(40px, 4vw, 72px);
  font-weight: 500;
  line-height: 93.82px;
  color: #2a2a2a;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 60px;
}

@media screen and (width <= 1080px) {
  .home-works-section h1 {
    line-height: 130%;
  }
}

.home-works-cards {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

@media screen and (width <= 1080px) {
  .home-works-cards {
    flex-direction: column;
  }
}

.home-works-card {
  width: calc(20% - 30px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media screen and (width <= 1080px) {
  .home-works-card {
    flex-direction: row;
    width: 100%;
    gap: 10px;
  }
}

.home-works-card .doted-line {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(45%);
  border: 1px dotted #2a2a2a;
  width: 60%;
}

@media screen and (width <= 1080px) {
  .home-works-card .doted-line {
    left: 23px;
    top: 0;
    transform: translate(0%, -70%);
    height: 40%;
    width: 0;
  }
}

.home-works-card:first-child .doted-line {
  display: block;
}

@media screen and (width <= 1080px) {
  .home-works-card:first-child .doted-line {
    display: none;
  }
}

.home-works-card:last-child .doted-line {
  display: none;
}

@media screen and (width <= 1080px) {
  .home-works-card:last-child .doted-line {
    display: block;
  }
}

.home-works-card h2 {
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 700;
  line-height: 31.27px;
  height: 62px;
  text-align: center;
  display: grid;
  place-items: center;
}

.home-works-card p {
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 400;
  line-height: 20.85px;
}

.home-works-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 36px;
}

@media screen and (width <= 1080px) {
  .home-works-icon {
    margin-bottom: 0;
    min-width: 40px;
    height: 40px;
  }
}

@media screen and (width <= 1080px) {
  .home-works-card .home-works-icon svg {
    width: 24px;
    height: 24px;
  }
}

.home-works-card:nth-child(odd) .home-works-icon {
  background-color: #2a2a2a;
}

.home-works-card:nth-child(odd) .home-works-icon svg path {
  fill: #e4e4e4;
}

.home-works-card:nth-child(2n) .home-works-icon {
  background-color: #e4e4e4;
}

.home-works-card:nth-child(2n) .home-works-icon svg path {
  fill: #2a2a2a;
}

.works-line-dot {
  position: relative;
  margin: 4px 0 16px;
}

@media screen and (width <= 1080px) {
  .works-line-dot {
    transform: rotate(270deg);
    margin: 0 20px 0 15px;
  }
}

.home-works-card-desc {
  padding: 16px 20px;
  border-radius: 16px;
  min-height: 190px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.85px;
}

@media screen and (width <= 1300px) {
  .home-works-card-desc {
    min-height: 250px;
  }
}

@media screen and (width <= 1080px) {
  .home-works-card-desc {
    min-height: 100%;
  }
}

.home-works-card:nth-child(odd) .home-works-card-desc {
  background-color: #2a2a2a;
  color: #f2f2f2;
}

.home-works-card:nth-child(2n) .home-works-card-desc {
  background-color: #e4e4e4;
  color: #2a2a2a;
}

.works-line {
  height: 40px;
  width: 1px;
  background-color: #2a2a2a;
}

.works-dot {
  background-color: #2a2a2a;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-43%, 50%);
}

.home-testimonials {
  display: flex;
  gap: 24px;
  margin: 80px 60px;
}

@media screen and (width <= 768px) {
  .home-testimonials {
    margin: 60px 24px 0;
    flex-direction: column;
  }
}

.home-testimonial {
  border: 1px solid #b8b8b8;
  padding: 30px;
  border-radius: 16px;
  width: calc(50% - 24px);
  height: 100%;
  display: grid;
  gap: 20px;
}

@media screen and (width <= 768px) {
  .home-testimonial {
    width: 100%;
  }
}

.home-testimonial .testimonial-desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
}

@media screen and (width <= 768px) {
  .home-testimonial .testimonial-desc {
    font-size: 20px;
  }
}

.testimonial-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}


/* [project]/components/ChatIcon/chatIcon.css [client] (css) */
.chat-icon-div {
  position: fixed;
  bottom: 15px;
  right: 30px;
  z-index: 10;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .6s ease-in-out, transform .6s ease-in-out;
}

@media screen and (width <= 768px) {
  .chat-icon-div {
    bottom: 15px;
    right: 15px;
  }
}

.chat-icon-div.scrolled {
  opacity: 1;
  transform: translateX(0);
}

.chat-icon-div .chat-icon-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-icon-box .chat-icon-text {
  width: 87px;
  height: 30px;
  border-radius: 50px;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-icon-box .chat-icon-text p {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.chat-icon-div .chat-icon svg {
  width: 54px;
  height: 61px;
  cursor: pointer;
}

@media screen and (width <= 768px) {
  .chat-icon-div .chat-icon svg {
    width: 39px;
    height: 39px;
  }
}

.chat-close-icon {
  width: 55px;
  height: 55px;
  background-color: #f7931e;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}

@media screen and (width <= 768px) {
  .chat-close-icon {
    width: 39px;
    height: 39px;
  }
}

.chat-close-icon svg {
  width: 34px;
  height: 34px;
}

@media screen and (width <= 768px) {
  .chat-close-icon svg {
    width: 25px;
    height: 25px;
  }
}

.chat-box-div {
  width: 0;
  height: 331px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  right: 0;
  bottom: 130%;
  transition: width .5s ease-in-out;
}

.chat-box-div.show {
  width: 315px;
}

.chat-box-header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #f7931e;
  height: 97px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}

.chat-box-header p:first-child {
  font-size: 18px;
  font-weight: 600;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.chat-box-header p:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.chat-box-header p.show {
  opacity: 1;
  visibility: visible;
}

.chat-persons {
  overflow-y: scroll;
  height: 226px;
}

.chat-persons::-webkit-scrollbar {
  display: none;
}

.chat-person {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: #efefef;
  border-radius: 4px;
  margin: 16px;
}

.chat-person .chat-platform-icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.chat-person img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}

.person-name {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-transform: capitalize;
}

.person-name p:first-child {
  font-size: 18px;
  font-weight: 500;
}

.person-name p:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  color: #878787;
}


/*# sourceMappingURL=_f43622._.css.map*/