@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  /* colors */
  --black: #312c2c;
  --white: #ffffff;
  --primary: #c82dd0;
  --secondary: #631bc7;
  --secondary-hover: #4a149e;
  --gradient: linear-gradient(to right, var(--primary), var(--secondary));
  --gradient-hover: linear-gradient(45deg, var(--primary), var(--secondary));
  --background: #e1e1e1;
  --grey: #585555;

  /* device dimensions */
  --smartphone-max-width: 480px;

  --tablet-min-width: 480px;
  --tablet-max-width: 1100px;

  --notebook-min-width: 1100px;
  --notebook-max-width: 1400px;

  --desktop-min-width: 1400px;

  /* other */
  --box-shadow: rgba(0, 0, 0, 0.15) 4px 5px 6px 2px;
  --box-shadow-2: rgba(0, 0, 0, 0.15) 3px 4px 20px 8px;
}

html {
  font-size: 16px;
}

* {
  box-sizing: border-box;
  font-family: "Inter", serif;
  margin: 0;
  padding: 0;
}

/* this container class is important to make sure that all the content of the page is centralized, 
 it wont expand in super large screens and it is responsive */
.container {
  background-color: transparent;
  margin: 0 auto;
  max-width: 85%;
  width: 1400px;
}

/* gradient highlight */
.gradient-highlight {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* title default styles */
.title,
.centered-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: var(--black);
}

.centered-title {
  text-align: center;
}

/* website banner */

.website-banner {
  align-items: center;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 8rem 0;
}

.banner-title {
  align-items: center;
  color: var(--black);
  display: flex;
  flex-direction: column;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  gap: 0.5rem;
  text-align: center;
}

.banner-subtitle {
  color: var(--black);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  margin: 3rem auto;
  max-width: 80ch;
  text-align: center;
}

.banner-statistics {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.banner-statistic {
  align-items: center;
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  height: 130px;
  justify-content: center;
  padding: 1rem;
  width: 200px;
}

.banner-statistic-number {
  font-size: 2rem;
  font-weight: 800;
}

.banner-statistic-text {
  color: var(--black);
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}

.banner-links {
  display: flex;
  gap: 1rem;
  margin-top: 7rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.banner-link {
  background: var(--gradient);
  border-radius: 40px;
  border: none;
  color: var(--white);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
}

.banner-link:hover {
  background: var(--gradient-hover);
}

/* about me section */
.about-me {
  margin: 12rem 0;
}

.about-me-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  color: var(--black);
}

.about-me-link {
  align-self: center;
  background: var(--secondary);
  border-radius: 40px;
  border: none;
  color: var(--white);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 3rem;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  width: fit-content;
}

.about-me-link:hover {
  background: var(--secondary-hover);
}

/* technical expertise section */

.technical-expertise {
  background-color: var(--background);
  padding: 8rem 0;
}

.technical-expertise-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  justify-content: center;
}

.technical-expertise-item {
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  height: 250px;
  justify-content: space-evenly;
  padding: 1rem;
  width: 320px;
}

.technical-expertise-item-header {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.technical-expertise-item-icon {
  height: 30px;
  width: 30px;
}

.technical-expertise-item-title {
  color: var(--black);
  font-size: 1.2rem;
  font-weight: 600;
}

.technical-expertise-item-description {
  color: var(--grey);
  font-size: 1rem;
  font-weight: 400;
}

/* development approach section */

.approach {
  background-color: var(--white);
  padding: 8rem 0;
}

.approach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: center;
  list-style: none;
}

.approach-item {
  border-radius: 10px;
  box-shadow: var(--box-shadow-2);
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 330px;
  justify-content: center;
  padding: 2.2rem;
  width: 320px;
}

.approach-item-header {
  align-items: start;
  display: flex;
  flex-direction: column;
  height: 40%;
  justify-content: space-between;
}

.approach-item-title {
  color: var(--black);
  font-size: 2.3rem;
  font-weight: 600;
}

.approach-item-icon {
  height: 30px;
  width: 30px;
}

.approach-item-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 40%;
}

.approach-item-subtitle {
  color: var(--black);
  font-size: 1.2rem;
  font-weight: 600;
}

.approach-item-description {
  color: var(--grey);
  font-size: 1rem;
  font-weight: 400;
}

/* services section */
.services {
  background-color: var(--background);
  padding: 8rem 0;
}

.services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: center;
  list-style: none;
}

.services-item {
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  height: 550px;
  max-width: 95%;
  padding: 2rem;
  width: 380px;
}

.services-item-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services-item-title {
  color: var(--black);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.services-item-list {
  align-items: start;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
  list-style: none;
  margin-bottom: 1rem;
}

.services-item-list-item {
  align-items: center;
  display: flex;
  gap: 1rem;
  color: var(--black);
}

.services-item-description {
  color: var(--grey);
  display: block;
  font-size: 1rem;
  font-weight: 400;
  height: 100px;
  margin-bottom: 2rem;
}

.services-item-link {
  align-self: center;
  background: var(--secondary);
  border-radius: 40px;
  border: none;
  color: var(--white);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  margin-top: auto;
  padding: 0.8rem 2rem;
  text-align: center;
  text-decoration: none;
}

.services-item-link:hover {
  background: var(--secondary-hover);
}

@media (max-width: 380px) {
  .services-item {
    height: 650px;
  }

  .services-item-description {
    height: 140px;
  }
}

/* contact section */
.contact {
  background-color: var(--white);
  padding: 8rem 0;
}

.contact-list {
  display: flex;
  gap: 1rem;
  gap: 2rem;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
}

.contact-item {
  align-items: center;
  border-radius: 10px;
  box-shadow: var(--box-shadow-2);
  display: flex;
  gap: 1rem;
  height: 100px;
  padding: 1rem;
  width: 320px;
}

.contact-item-icon {
  height: 30px;
  width: 30px;
}

.contact-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-item-content-title {
  color: var(--grey);
  font-size: 0.9rem;
}

.contact-item-content-text {
  color: var(--black);
  font-size: 1rem;
  font-weight: 700;
}

.linkedin-contact-link {
  align-items: center;
  align-self: center;
  background: var(--secondary);
  border-radius: 40px;
  color: var(--white);
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: space-between;
  margin: auto;
  padding: 0.8rem 2rem;
  text-align: center;
  text-decoration: none;
}

.linkedin-contact-link:hover {
  background: var(--secondary-hover);
}

.contact-list-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}