/* section styles */

section[class*="-section"] {
  --spacing: var(--spacing-600);
  padding-top: var(--spacing-700);
  padding-bottom: var(--spacing-700);
}

/* section[class*="-section"] > * > * + * {
  margin-top: var(--spacing-);
} */

/* Header */

.header {
  position: relative;
}

/* .mobile-nav, .mobile-nav-btn {
  display: none;
} */

.mobile-nav-btn {
  cursor: pointer;
}

.mobile-nav {
  position: absolute;
  top: 100%;
  right: 0;

  padding: var(--spacing-600);
  background-color: var(--color-primary);
  color: var(--color-white);

  z-index: 10000;
}

.mobile-nav ul {
  gap: var(--spacing-600);
}

.header-nav .flex {
  --spacing-flex: var(--spacing-500);
}

.header-nav a,
.mobile-nav a {
  transition: text-decoration 20s ease;
}

.header-nav a:hover,
.mobile-nav a:hover {
  text-decoration: 3px underline var(--color-primary);
}

/* Hero */

.hero-section {
  padding-top: 0 !important;
}

.hero-sect-part-2 {
  position: relative;
}

.hero-abs-text {
  position: absolute;
  top: 2rem;
  right: 0rem;
}

/* Skill person */

.skills-section {
  .container {
    display: grid;
    gap: 5rem;
    grid-template-columns: 1fr 1fr;
  }
}

/* services section */

.service-section .grid-2-auto {
  grid-template-columns: 2fr 3fr;
}

.click-image {
  width: 45%;
}

.click-btn img {
  max-width: auto;
  margin-left: auto;
}

.grid-part-2 .flex.flex-start {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

/* Project Section */

.client-card {
  transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
}

.clients-section-header-content h2 {
  width: 300%;
}

.clients-section-header-content div {
  width: 300%;
}

.client-image {
  width: 40rem;
}

[class*="client_"] {
  flex-basis: 80%;
  flex-shrink: 0;
}

.cta-section {
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.footer-logo-image {
  width: 70%;
}

.footer-sec .nav-icon-arrows {
  margin-top: auto;
}
