/**************************/
/* CSS Reset */

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

/**************************/
/* Custom properties (variables) for colors, font-weights, font-sizes, spacing */

:root {
  --clr-bg: hsl(167, 22%, 32%);
  --clr-bg-tint: hsl(167, 22%, 42%);
  /* --clr-bg-shade: #2c4641; */
  --clr-bg-shade-1: hsla(167, 22%, 22%, 85%);
  --clr-bg-shade-2: hsla(167, 22%, 22%, 95%);
  /* --clr-box-shadow: hsla(169, 17%, 45%, 0.2); */
  --clr-box-shadow: hsla(167, 22%, 22%, 25%);
  --clr-heading: hsl(0, 0%, 90%);
  --clr-text: hsl(0, 0%, 80%);
  --clr-link: hsl(21, 65%, 45%);
  --clr-link-tint: hsl(21, 65%, 50%);
  --fw-regular: 400;
  --fw-bold: 700;
  --fs-xsm: 0.75rem;
  --fs-sm: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.75rem;
  --fs-xl: 2.25rem;
  --sp-xsm: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2rem;
  --sp-xl: 3.5rem;
}

/**************************/
/* Local Fonts */
/* google-webfonts-helper */
/* A Hassle-Free Way to Self-Host Google Fonts */
/* https://gwfh.mranftl.com/fonts */

/* inter-regular - greek_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/inter-v18-greek_latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - greek_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/inter-v18-greek_latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ======================= */
/* Reusable components */
/* ======================= */
.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

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

.flex-ai-c {
  align-items: center;
}

.flex-ai-st {
  align-items: start;
}

.flex-jc-c {
  justify-content: center;
}

.wrapper {
  padding: var(--sp-md);
  background-color: var(--clr-bg-shade-1);
  border-radius: 10px;
}

.w-100 {
  width: 100%;
}

.center-txt {
  text-align: center;
}

.inline-blk {
  display: inline-block;
}

/* ======================= */
/* Animation for call-outline icon*/
/* ======================= */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(-3px);
  }

  40% {
    transform: translateX(3px);
  }

  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

/* ======================= */
/* General styling */
/* ======================= */
body {
  min-height: 100vh;
  line-height: 1.5;
  /* background-color: var(--clr-bg); */
  /* background-image: url("images/tree-bg.svg");
  background-repeat: no-repeat;
  background-position: left 135% bottom 2%;
  background-size: 80% auto; */

  background-image: url("images/tree-bg.svg"),
    linear-gradient(
      in oklch,
      var(--clr-bg) 0%,
      hsl(167, 22%, 32%, 0.9) 30%,
      var(--clr-bg) 60%,
      hsl(167, 22%, 32%, 0.9) 80%,
      var(--clr-bg) 90%
    );
  background-repeat: no-repeat;
  background-position: left 135% bottom 2%, top;
  background-size: 80% auto, auto;

  color: var(--clr-text);
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: var(--fs-sm);
  padding: var(--sp-md);
  gap: var(--sp-lg);
}

/* Image */
img {
  max-width: 100%;
  display: block;
  height: auto;
}

/* Typography */
.h-1,
.h-2,
.h-3 {
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
}

.h-1,
.h-2 {
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.h-1 {
  font-size: var(--fs-xl);
  line-height: 1.1;
  margin-block-end: var(--sp-xl);
}

.h-2 {
  font-size: var(--fs-lg);
  line-height: 1.2;
  margin-block-end: var(--sp-lg);
}

.h-3 {
  font-size: var(--fs-md);
  line-height: 1.3;
  letter-spacing: 0.5px;
  margin-block-end: var(--sp-md);
}
.subheading {
  text-wrap: balance;
}

p {
  max-width: 120ch;
  margin-block-end: var(--sp-sm);
  text-wrap: pretty;
}

.list span {
  max-width: 110ch;
}

/* Button */
.btn {
  cursor: pointer;
  display: inline-block;
  width: fit-content;
  text-decoration: none;
  background-image: linear-gradient(
    to bottom,
    var(--clr-link),
    var(--clr-link-tint)
  );
  color: var(--clr-text);
  padding: 0.8rem 1.6rem;
  border-radius: 25px;
  box-shadow: 0 10px 15px 0 var(--clr-box-shadow);
  transition: all 0.3s;

  &:hover,
  &:active {
    background-image: linear-gradient(
      to bottom,
      var(--clr-link-tint),
      var(--clr-link)
    );
  }
}

.btn:hover .icon[name="call-outline"] {
  animation-name: shake;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--clr-bg-tint);
}

.btn-box {
  gap: var(--sp-xsm);
}

/* Icon */
.icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
  flex-shrink: 0;
}

/* List */
.list {
  list-style: none;
  margin-block-end: var(--sp-lg);
}

.list li {
  gap: var(--sp-xsm);
  padding-inline-start: var(--sp-xsm);
}

/* Anchor link */
.link:link,
.link:visited {
  text-decoration: none;
  letter-spacing: 0.5px;
  color: var(--clr-text);
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--clr-link);
  padding-bottom: 1px;
  transition: all 0.25s;
}

.link:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--clr-link-tint);
  border-bottom: 2px solid transparent;
  border-radius: 4px;
}

.link:hover,
.link:active {
  color: var(--clr-link);
  border-bottom: 2px solid transparent;
}

/* ======================= */
/* Sitewide styling */
/* ======================= */

/* Header */
.logo {
  height: 8rem;
}

/* Main and Footer max-width */
.main,
.footer {
  max-width: 75rem;
  /* 1200px */
}

/* Main */
.main {
  gap: var(--sp-md);
}

/* Footer */
.footer {
  font-size: var(--fs-xsm);
}

/* ======================= */
/* Homepage */
/* ======================= */

/* Hero section */
.section-hero {
  background-image: url(/images/office-interior-crop.webp);
  background-image: linear-gradient(
      to bottom,
      oklch(0% 0 0 / 0.8) 0%,
      oklch(0% 0 0 / 0.7) 40%,
      oklch(0% 0 0 / 0.3) 100%
    ),
    url(/images/office-interior-crop.webp);
  background-position: 80% center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 50vh;
  padding: var(--sp-md);
  border-radius: 10px;
  gap: var(--sp-xl);
}

.section-hero .h-1 {
  text-shadow: 0px 0px 2px var(--clr-link);
}

/* Bio section */
.section-bio {
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}

.bio-image-box {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  height: min-content;
}

/* Services section */
.list-item {
  display: flex;
  align-items: start;
}

.section-services .btn {
  margin-inline: auto;
}

/* Contact section */
.contact-box {
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}

.contact-box-item {
  border-radius: 4px;
  padding: var(--sp-xsm);
  background-color: var(--clr-bg-shade-2);
  border: 1px solid var(--clr-bg-tint);
  transition: transform 0.3s ease-out;
}

.contact-box-item:hover {
  transform: translateY(-8px);
}

.contact-box-item p {
  line-height: 1.75;
}

.contact-item-content {
  gap: var(--sp-sm);
}

/* ======================= */
/* Politiki aporritou page */
/* ======================= */

.privacy-subsection {
  margin-block-end: var(--sp-xl);
}

/* ================================= */
/* MEDIA QUERIES */
/* ================================= */
/* -------Portrait Tablet and Large Phones breakpoint */
/* 640px */
@media (width >= 40rem) {
  /* ======================= */
  /* Sitewide styling */
  /* ======================= */
  :root {
    --fs-xsm: 0.8125rem;
    --fs-sm: 1.0625rem;
    --fs-md: 1.5rem;
    --fs-lg: 2rem;
    --fs-xl: 2.5rem;
    --sp-xsm: 0.625rem;
    --sp-sm: 1.25rem;
    --sp-md: 2rem;
    --sp-lg: 2.25rem;
    --sp-xl: 4rem;
  }
  /* Header */
  .logo {
    height: 5.5rem;
  }

  /* ======================= */
  /* Homepage */
  /* ======================= */
  /* Hero section */
  .section-hero {
    background-image: linear-gradient(
        to right,
        oklch(0% 0 0 / 0.8) 0%,
        oklch(0% 0 0 / 0.7) 60%,
        oklch(0% 0 0 / 0.3) 100%
      ),
      url(/images/office-interior-landscape-tablet.webp);
    min-height: 60vh;
    justify-content: center;
  }
  /* Bio section */
  .section-bio {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "image text";
  }

  .bio-image-box {
    grid-area: image;
  }

  .bio-text-box {
    grid-area: text;
  }

  /* Services section */
  .list-item {
    align-items: center;
  }

  /* Contact section */
  .contact-box {
    grid-template-columns: 1fr 1fr;
  }

  .contact-address {
    grid-column: 1/-1;
  }
}

/* -------Laptops-Desktops breakpoint */
/* 992px */
@media (width >= 62rem) {
  /* ======================= */
  /* Sitewide styling */
  /* ======================= */
  :root {
    --fs-md: 1.625rem;
    --fs-lg: 2.125rem;
    --fs-xl: 2.625rem;
    --sp-sm: 1.375rem;
    --sp-md: 2.125rem;
    --sp-lg: 2.5rem;
    --sp-xl: 4.25rem;
  }
  /* Header */
  .logo {
    height: 6.25rem;
  }

  /* ======================= */
  /* Homepage */
  /* ======================= */
  /* Hero section */
  .section-hero {
    background-image: linear-gradient(
        to right,
        oklch(0% 0 0 / 0.8) 0%,
        oklch(0% 0 0 / 0.7) 60%,
        oklch(0% 0 0 / 0.3) 100%
      ),
      url(/images/office-interior-landscape-desktop.webp);
  }

  .subheading {
    max-width: 50ch;
  }

  /* Bio section */
  .section-bio {
    grid-template-columns: 1fr 2.8fr;
  }

  /* Contact section */
  .contact-box {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact-address {
    grid-column: 1/2;
  }
}

/* -------Large Desktops breakpoint */
/* 1600px */
@media (width >= 100rem) {
  /* ======================= */
  /* Sitewide styling */
  /* ======================= */
  :root {
    --fs-xsm: 0.875rem;
    --fs-sm: 1.125rem;
    --fs-md: 1.75rem;
    --fs-lg: 2.25rem;
    --fs-xl: 2.75rem;
    --sp-xsm: 0.75rem;
    --sp-sm: 1.5rem;
    --sp-md: 2.25rem;
    --sp-lg: 2.75rem;
    --sp-xl: 4.5rem;
  }

  .main,
  .footer {
    max-width: 90rem;
    /* 1440px */
  }

  /* Header */
  .logo {
    height: 7rem;
  }
}