/*
 * Font
 */

@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');

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

  font-family: "Overpass", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/*
 * Colour Definitions
 */

.light {
 --theme-base-text: #6D5E3C;
 --theme-base-bg: #FFFFFF;
 --theme-accent-text: #FFFFFF;
 --theme-accent-subtle: #E4DCCE;
 --theme-accent-bg: #6D5E3C;
}

.night {
 --theme-base-text: #978453;
 --theme-base-bg: #201F1D;
 --theme-accent-text: #FFFFFF;
 --theme-accent-subtle: #E4DCCE;
 --theme-accent-bg: #6D5E3C;
}

.high-contrast {
 --theme-base-text: #FFFFFF;
 --theme-base-bg: #000000;
 --theme-accent-text: #FFFFFF;
 --theme-accent-subtle: #FFFFFF;
 --theme-accent-bg: #000000;
}

body {
  background-color: var(--theme-base-bg);
}

a {
  color: var(--theme-base-text);
  font-weight: 400;
}

/*
 * Theme Toggle
 */

#theme-toggle {
  background-color: var(--theme-accent-bg);
  width: 64px;
  height: 24px;
  border-radius: 16px;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5);
}

.toggle-switch {
  background-color: var(--theme-accent-text);
  border: 4px solid var(--theme-accent-subtle);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  cursor: pointer;
  transition: 0.5s ease;
}

.toggle-switch.primary {
  transform: translate(0px, -4px);
}

.toggle-switch.secondary {
  transform: translate(16px, -4px);
}

.toggle-switch.tertiary {
  transform: translate(32px, -4px);
}

/*
 * Logo
 */

.logo {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.2723,0,0,1.2723,-64.6222,-64.6222)"><path d="M169.051,193.388C157.157,200.875 143.081,205.208 128,205.208C85.388,205.208 50.792,170.612 50.792,128C50.792,105.563 60.383,85.349 75.685,71.237C76.882,74.635 79.07,77.567 81.902,79.685C69.155,91.851 61.208,109.005 61.208,128C61.208,164.863 91.137,194.792 128,194.792C164.863,194.792 194.792,164.863 194.792,128C194.792,109.091 186.917,92.007 174.272,79.851C177.134,77.778 179.364,74.883 180.614,71.514C195.742,85.613 205.208,105.71 205.208,128C205.208,143.081 200.875,157.157 193.388,169.051L250.477,226.141C252.511,228.175 252.511,231.472 250.477,233.506L233.506,250.477C231.472,252.511 228.175,252.511 226.141,250.477L169.051,193.388ZM187.176,177.571C184.261,181.046 181.046,184.261 177.571,187.176L229.823,239.428L234.626,234.626L239.428,229.823L187.176,177.571ZM145.805,63.612C140.136,62.045 134.165,61.208 128,61.208C121.976,61.208 116.137,62.008 110.584,63.506C110.228,59.844 108.774,56.502 106.555,53.814C113.364,51.846 120.56,50.792 128,50.792C135.557,50.792 142.863,51.88 149.768,53.908C147.57,56.606 146.139,59.951 145.805,63.612ZM158.522,175.89L158.522,105.179L131.882,131.819C129.85,133.852 126.549,133.852 124.517,131.819L97.877,105.18L97.877,176.142C94.08,173.76 90.584,170.941 87.46,167.756L87.46,92.605C87.46,90.499 88.729,88.6 90.675,87.794C92.622,86.987 94.862,87.433 96.351,88.923L128.2,120.771L160.048,88.923C161.537,87.433 163.778,86.987 165.724,87.794C167.67,88.6 168.939,90.499 168.939,92.605L168.939,167.345C165.823,170.586 162.327,173.458 158.522,175.89ZM92.668,52.263C99.843,52.263 105.668,58.088 105.668,65.263C105.668,72.438 99.843,78.263 92.668,78.263C85.494,78.263 79.668,72.438 79.668,65.263C79.668,58.088 85.494,52.263 92.668,52.263ZM163.731,52.263C170.906,52.263 176.731,58.088 176.731,65.263C176.731,72.438 170.906,78.263 163.731,78.263C156.556,78.263 150.731,72.438 150.731,65.263C150.731,58.088 156.556,52.263 163.731,52.263Z" style="fill:%23fff;"/></g></svg>');
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  background-size: cover;
  transition: transform 0.4s;
}

.logo:hover {
  transform: translate(0px, -4px);
}

.logo-text {
  margin-left: 56px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/*
 * Icons
 */

.ico-book {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(0.827299,0,0,0.827299,22.1057,-23.7886)"><path d="M120.785,266.321C93.351,247.995 70.053,251.235 53.844,254.754C44.777,256.723 37.371,258.591 32,258.591L19.565,258.591L19.41,246.157C19.123,223.19 19.409,149.422 19.409,121L19.409,112.89L26.793,109.536C75.672,87.336 112.404,103.122 128,112.653C143.596,103.122 180.328,87.336 229.207,109.536L236.591,112.89C236.591,112.89 236.591,121.022 236.591,121.033C236.591,149.414 236.875,222.864 236.592,246C236.591,246.053 236.591,246.105 236.59,246.157L236.435,258.591L224,258.591C218.629,258.591 211.223,256.723 202.156,254.754C195.519,253.313 187.693,251.919 178.88,252.033C165.32,252.815 149.906,256.516 135.209,266.325C134.79,266.618 134.356,266.882 133.909,267.119C132.077,268.095 130.053,268.592 128,268.591C125.919,268.592 123.891,268.082 122.072,267.109C121.629,266.874 121.199,266.611 120.785,266.321ZM115.409,134.518C105.57,128.464 79.748,116.465 44.585,129.429C44.552,156.079 44.401,203.438 44.493,231.068C45.773,230.761 47.109,230.447 48.5,230.146C65.472,226.46 88.435,223.219 115.409,234.784L115.409,134.518ZM211.409,129.426C176.249,116.467 150.429,128.464 140.591,134.518L140.591,234.784C157.097,227.707 172.101,226.174 185.149,226.895C195.243,226.946 204.248,228.152 211.409,229.575L211.409,129.426Z"/></g></svg>');
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
  background-size: cover;
}

.ico-doc {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,41.6,41.6)"><path d="M53.583,138.417L8.783,138.417L8.783,-10.417L119.217,-10.417L119.217,34.383L164.017,34.383L164.017,183.217L53.583,183.217L53.583,138.417ZM98.383,34.383L98.383,10.417L29.617,10.417L29.617,117.583L98.383,117.583L98.383,34.383ZM74.417,138.417L74.417,162.383L143.183,162.383L143.183,55.217L119.217,55.217L119.217,138.417L74.417,138.417Z"/></g></svg>');
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
  background-size: cover;
}

.ico-list {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-55,-42)"><path d="M117.583,138.417L117.583,117.583L140.417,117.583L140.417,138.417L117.583,138.417ZM163.583,138.417L163.583,117.583L248.417,117.583L248.417,138.417L163.583,138.417ZM117.583,180.417L117.583,159.583L140.417,159.583L140.417,180.417L117.583,180.417ZM163.583,180.417L163.583,159.583L248.417,159.583L248.417,180.417L163.583,180.417ZM117.583,222.417L117.583,201.583L140.417,201.583L140.417,222.417L117.583,222.417ZM163.583,222.417L163.583,201.583L248.417,201.583L248.417,222.417L163.583,222.417Z"/></g></svg>');
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
  background-size: cover;
}

/*
 * Header
 */

header {
  background-color: var(--theme-accent-bg);
  padding: 32px;
  border-bottom: 4px solid var(--theme-accent-subtle);
}

header a {
  text-decoration: none;
  color: var(--theme-accent-text);
}

header li {
  list-style: none;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 1.5rem;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: var(--theme-accent-text);
  transition: transform 0.4s;
  padding: 8px 4px;
}

nav ul li a:hover {
  transform: translate(0px, -4px);
}

/*
 * Page Content
 */

.page-content {
  padding: 2rem 0;
}

.section {
  margin-bottom: 3rem;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.2rem;
  color: var(--theme-base-text);
}

.section-description {
  text-align: center;
  color: var(--theme-base-text);
  max-width: 800px;
  margin: 0 auto 2rem;
}

/*
 * Hero Section
 */

.hero {
  color: var(--theme-accent-subtle);
  background-color: black;
  height: 50vh;
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  margin: 0;
}

.hero-image {
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)),
               url('../img/hero/hero.jpg');
  background-size: cover;
  background-position: center 75%;
  width: 100%;
  height: 100%;
  /*transition: filter 0.5s ease;*/
  filter: blur(1px);
}

/*
.hero-image:hover {
  filter: blur(2px);
}
*/

.hero-content {
  max-width: 600px;
  margin: 0 auto;
  z-index: 2;
  position: absolute;
  transform: translate(calc(50vw - 50%), 0%);
  padding: 32px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn {
  display: inline-block;
  background-color: var(--theme-accent-bg);
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

.btn:hover {
  background-color: var(--theme-accent-text);
  color: var(--theme-base-text);
}

/*
 * About Me
 */

.about-me {
  background-color: var(--theme-accent-text);
  border-radius: 10px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.about-me img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.about-me .section-title {
  color: var(--theme-accent-bg);
}

/*
 * Services
 */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  background-color: var(--theme-accent-subtle);
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-icon {
  font-size: 3rem;
  color: var(--theme-accent-text);
  margin-bottom: 1rem;
  margin: 0 auto;
  display: block;
}

/*
 * Blog
 */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.blog-card {
  background-color: var(--theme-accent-subtle);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-content {
  padding: 1.5rem;
}

.blog-title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;

}

.blog-meta {
  color: #666;
  font-size: 0.9rem;
}

/*
 * Contact
 */

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: var(--theme-base-text);
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.form-group textarea {
  height: 150px;
  resize: vertical;
}

.submit-btn {
  background-color: var(--theme-accent-bg);
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
}

.submit-btn:hover {
  background-color: var(--theme-accent-subtle);
  color: var(--theme-accent-bg);
}

/*
 * Footer
 */

footer {
    background-color: var(--theme-accent-bg);
    color: var(--theme-accent-text);
    padding: 3rem 0 0;
    border-top: 4px solid var(--theme-accent-subtle);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.25rem;
}

.footer-section ul li a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 200;
}

.footer-section ul li a:hover {
    color: var(--accent);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: var(--text-light);
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--accent);
}

.copyright {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * Responsive Elements
 */

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 1rem;
  }

  nav ul {
    margin-top: 2rem;
    flex-direction: column;
    gap: 1rem;
  }

  nav li {
    text-align: center;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .services-grid, .blog-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}