:root {
  --spacing: 1.5rem;

  --clr-dark-shadow-5: rgba(0, 0, 10, 5%);
  --clr-dark-shadow-10: rgba(0, 0, 10, 10%);
  --clr-dark-shadow-20: rgba(0, 0, 10, 20%);
  --clr-dark-shadow-50: rgba(0, 0, 10, 50%);
  --clr-light-shadow-5: rgba(200, 200, 255, 5%);
  --clr-light-shadow-10: rgba(200, 200, 255, 10%);
  --clr-light-shadow-20: rgba(200, 200, 255, 20%);
  --clr-light-shadow-50: rgba(200, 200, 255, 50%);

/*
  --secondary-dark-clr: #003450;
  --primary-dark-clr: #078581;
  --primary-light-clr #0fdfab;
  --tertiary-light-clr #e6e6f5;

  --link-dark-clr: #003450;
  --link-light-clr: #e6e6f5;
  --title-clr #003450; */

  --clr-white: #f5f5ff;
  --clr-black: #00001e;
  --clr-gray: #c5c5c5;
  --clr-light-gray: #ebe8e8;


  --table-min-width: 60rem;
  --biggest-font-size: 5rem;
  --bigger-font-size: 4rem;
  --big-font-size: 3.2rem;
  --medium-font-size: 2.4rem;
  --small-font-size: 1.6rem;
  --smaller-font-size: 1.4rem;
  --smallest-font-size: 1.2rem;
  --transition-fast: 300ms;
  --transition-medium: 600ms;
  --transition-slow: 1s;
  --default-border-radius: 4px;

    /* Spacings */
  --spacing-micro: 0.8rem;
  --spacing-smlst: 1.5rem;
  --spacing-smlr: 2rem;
  --spacing-sm: 2.5rem;
  --spacing-base: 3rem;
  --spacing-bg: 4rem;
  --spacing-bgr: 5rem;
  --spacing-bgst: 6rem;

    /* Font-Sizes */
  /* https://royalfig.github.io/fluid-typography-calculator/ */
  --fs-smlst: clamp(1.2rem, 1.092307692307692rem + 0.256410256410256vw, 1.4rem);
  --fs-smlr: clamp(1.4rem, 1.292307692307692rem + 0.2564102564102566vw, 1.6rem);
  --fs-sm: clamp(1.6rem, 1.4923076923076923rem + 0.25641025641025633vw, 1.8rem);
  --fs-base: clamp(1.8rem, 1.6923076923076923rem + 0.25641025641025633vw, 2rem);
  --fs-bg: clamp(2rem, 1.7846153846153847rem + 0.5128205128205127vw, 2.4rem);
  --fs-bgr: clamp(2.4rem, 1.969230769230769rem + 1.025641025641026vw, 3.2rem);
  --fs-bgst: clamp(3.2rem, 2.876923076923rem + 0.7692307692307687vw, 3.8rem);

  --fs-h1: clamp(3.8rem, 3.2615384615384615rem + 1.282051282051282vw, 4.8rem);
  --fs-h2: clamp(2.8rem, 1.938461538461538rem + 2.051282051282052vw, 4.4rem);
  --fs-h3: clamp(2.4rem, 1.969230769230769rem + 1.025641025641026vw, 3.2rem);
  --fs-h4: clamp(2.2rem, 1.8769230769230774rem + 0.7692307692307687vw, 2.8rem);
  --fs-h5: clamp(1.8rem, 1.476923076923077rem + 0.769230769230769vw, 2.4rem);
  --fs-h6: clamp(1.6rem, 1.2769230769230768rem + 0.7692307692307694vw, 2.2rem);
}

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth;

}

body {
  font-family: Cambria, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  font-size: var(--small-font-size);

}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}


img,
svg {
  margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--spacing-base) 0;
}

h1 {
  font-size: 44px; /* Fallback value */
  font-size: var(--fs-h1);
}

h2 {
  font-size: 38px; /* Fallback value */
  font-size: var(--fs-h2);
}

h3 {
  font-size: 34px; /* Fallback value */
  font-size: var(--fs-h3);
}

h4 {
  font-size: 28px; /* Fallback value */
  font-size: var(--fs-h4);
}

h5 {
  font-size: 24px; /* Fallback value */
  font-size: var(--fs-h5);
}

h6 {
  font-size: 20px; /* Fallback value */
  font-size: var(--fs-h6);
}

pre {
  max-width: 100%;
  overflow-x: auto;
  line-height: 1.2;
  font-size: var(--fs-smlr);
}

/* UTILITIES */
.content {
  max-width: 75vw;
  margin: 0 auto;
  min-height: 100vh;

  /* padding: var(--spacing-bgst); */
  /* background: var(--background-secondary-color);
  box-shadow: 2px 2px 5px var(--clr-dark-shadow-5);
  border-radius: var(--default-border-radius); */
}

.content h1, h2, h3 {
  text-transform: uppercase;
}

.content p, ul {
  font-size: var(--fs-base);
}

.content ul {
  list-style: none;
  padding-left: 3rem;
}

.banner {
  /* background: var(--block-background-color); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center ;
  /* color: var(--text-color); */
  width: 100%;
}

/* .banner h1, h2, h3, h4, h5 {
  color: var(--title-color);
} */

.banner-content {
  opacity: 0.9;
  text-align: center;
  /* background-color: var(--block-background-color); */
  padding: 3rem;
  border-radius: 0.5rem;
}

.banner-button {
  margin-top: 2rem;
  border: 0.5rem solid /*var(--title-color)*/; 
  background: none;
  /* color: var(--title-color); */
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  text-decoration: none;
}

/* .banner button:hover {
  background: var(--title-color);
  color: var(--block-background-color)
} */

/* SIMPLE GRID CONTENT */
.grid-content {
  padding: 15rem 0;
}

.grid-description p {
  margin-top: -2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.grid-item {
  padding-bottom: 2rem;
}

/* .grid-item h1, h2, h3, h4, h5 {
  color: var(--title-secondary-color);
} */

.grid-button {
  margin-top: 2rem;
  border: 0.5rem solid /*var(--title-color)*/; 
  background: none;
  /* color: var(--title-color); */
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  text-decoration: none;
}

/* SIMPLE CONTENT */
.simple-content {
  padding: 15rem 0;
}

.simple-description p {
  text-align: justify;
}

.simple-box {
  margin-top:5rem;
  padding:2rem;
  /* background-color:var(--box-background-primary-color);  */
  border-radius:0.5rem;
}

.simple-content-box h2 {
  color:var(--box-title-color);
  text-align: center;
}

.simple-content-box p {
  color:var(--box-text-color)
}

.simple-button {
  margin-top: 2rem;
  border: 0.5rem solid /*var(--title-color)*/; 
  background: none;
  /* color: var(--title-color); */
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  text-decoration: none;
}

/* CATALOGUE CONTENT */
.catalogue-content {
  padding: 15rem 0;
}

.catalogue-description p {
  margin-top: -2rem;
}

.catalogue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  justify-self: center;
}

.catalogue-item {
  padding-bottom: 2rem;
}

/* .grid-item h1, h2, h3, h4, h5 {
  color: var(--title-secondary-color);
} */

.catalogue-button {
  margin-top: 2rem;
  border: 0.5rem solid /*var(--title-color)*/; 
  background: none;
  /* color: var(--title-color); */
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  text-decoration: none;
}


.top-banner-bg {
  background: var(--background-primary-color);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center ;
  color: white;
  width: 100%;
}

.primary-bg {
  background: var(--background-primary-color);

}

.primary-bg h1, h2, h3, h4 {
  color: var(--title-secondary-color);
}

.primary-bg p {
  color: var(--text-secondary-color);
}

.secondary-bg {
  background: var(--background-secondary-color);
  color: var(--text-primary-color);
}

.secondary-bg h1, h2, h3, h4 {
  color: var(--title-primary-color);
}

.secondary-bg p {
  color: var(--text-primary-color);
}

.form-bg {
  background: var(--form-background-color);
  color: var(--form-text-color);
}

/* HEADER */
.header {
  background: var(--header-color);
  box-shadow: 0 5px 10px 2px var(--clr-dark-shadow-20);
  z-index: 1;
  min-height: 15rem;
}

.header-content {
  padding: 1rem 5rem;
  /* font-size: var(--biggest-font-size); */
}

.header-content button {
  border-color: var(--menu-link-primary-color);
}

.header-content button span {
  color: var(--menu-link-primary-color);
  font-size: 2.5rem;
}

.header-content-logo a {
  text-decoration: none;
}

/* .header-content-logo img {
  width: 30rem;
  min-width: 20rem;
} */

.header-content-menu li {
  padding: var(--spacing-micro);
}

.header-content-menu li a {
  color: var(--menu-link-primary-color);
  text-transform: uppercase;
  font-size: var(--fs-base);
  font-weight: bold;
}

.header-content-menu li a:hover {
  color: var(--menu-link-secondary-color);
  text-decoration: none;
}

.top-banner-text-box {
  opacity: 0.9;
  text-align: center;
  background-color: var(--background-secondary-color);
}

.top-banner-text h1 {
  color: var(--title-primary-color);
}

.top-banner-text p {
  color: var(--text-primary-color);
}

.top-banner-media-box {
  opacity: 0.9;
  text-align: center;
  background-color: var(--background-secondary-color);

}

.top-banner-media img {
  opacity: unset ;
  /* max-width: 70vw; */
  /* max-height: 60vh; */
}

.top-banner-media iframe {
   width: 100vw;
   height: 50vh;
}

.top-banner-button button {
  margin-top: 2rem;
  border: 0.5rem solid var(--general-button-primary-color);
  background: none;
  color: var(--title-primary-color);
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.top-banner-button button {
  text-decoration: none;
}

.top-banner-button button:hover {
  background: var(--general-button-primary-color);
  color: var(--title-secondary-color)
}





/* PRODUCT ITEM */
.product-card {
  /* position: relative;
  padding-bottom: 2rem; */
  background: var(--background-secondary-color);
  padding: 1.5rem;
  margin: 0 var(--spacing-micro);
  box-shadow: 2rem 2rem 5rem var(--clr-dark-shadow-20);
  min-width: 33rem;
  min-height: 23rem;
}

.product-card-cover img {
  min-height: 100%;
  min-width: 100%;
}

.product-card div h5 a {
  color: var(--general-link-primary-color);
  margin-top: 0rem;
  font-size: 3rem;
}

.product-card div h5 a:hover {
  color: var(--general-link-secondary-color);
  text-decoration: none;
}

.product-card p {
  font-size: var(--fs-base);
  color: var(--text-primary-color)
}

.product-button button {
  margin-top: 2rem;
  border: 0.5rem solid var(--background-primary-color
  );
  background: none;
  color: var(--title-primary-color
  );
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.product-button button {
  text-decoration: none;
}

.product-button button:hover {
  background: var(--background-primary-color
  );
  color: var(--title-secondary-color
  )
}

.product-detail-cover {
  width:60rem;
  border-radius:1rem;
  border: solid 0.1rem var(--clr-dark-shadow-10);
}

.product-detail-text {
  text-align:justify;
}

.product-detail-images {
  padding-top:4rem;
}

.product-detail-images img {
  width: 30rem;
  border-radius:1rem;
  border-style: solid 0.1rem var(--clr-light-gray);

}


/* BLOG ITEM */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-micro);
}


.blog-post-card {
  /* position: relative;
  padding-bottom: 2rem; */
  background: var(--background-secondary-color);
  padding: 1.5rem;
  margin: 0 var(--spacing-micro);
  box-shadow: 2rem 2rem 5rem var(--clr-dark-shadow-20);
  min-width: 33rem;
  min-height: 23rem;
}

.blog-post-card-cover img {
  min-height: 100%;
  min-width: 100%;
}

.blog-post-card div h5 a {
  color: var(--general-link-primary-color);
  margin-top: 0rem;
  font-size: 3rem;
}

.blog-post-card div h5 a:hover {
  color: var(--general-link-secondary-color);
  text-decoration: none;
}

.blog-post-card p {
  font-size: var(--fs-base);
  color: var(--text-primary-color)
}

.blog-button button {
  margin-top: 2rem;
  border: 0.5rem solid var(--background-primary-color
  );
  background: none;
  color: var(--title-primary-color
  );
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.blog-button button {
  text-decoration: none;
}

.blog-button button:hover {
  background: var(--background-primary-color
  );
  color: var(--title-secondary-color
  )
}

.form-content-new {
  border: none;
  padding: 15rem 0;
  height: auto;
}

.form-content-new h1 {
  text-transform: uppercase;
}

.form-content-new p {
  margin-top: -2rem;
}

.form-group-new {
  flex: 1 1 32rem;
}

.form-group-new label {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-base);

}

.form-group-new input, .form-group-new textarea {
  border: none;
  background: white;
  padding: 1.5rem 2rem;
  font-size: var(--fs-base);
  width: 100%;
  outline: none;
}

.form-group-new input:focus, .form-group-new textarea:focus {
  box-shadow: 0 0 10px 2px var(--background-primary-color
  );
}

.form-group-new button {
  border: 0.5rem solid var(--form-button-dark-color
  );
  background: none;
  color: var(--form-button-dark-color
  );
  padding: 1.5rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.form-group-new button:hover {
  background: var(--form-button-dark-color);
  color: var(--form-background-color)
}

.form-group-new::placeholder {
  color: #909bb9;
}



/* FOOTER */
.footer {
  /* position: fixed; */
  background: var(--footer-color);
  padding: var(--spacing);
  z-index: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.footer-img-logo {
  padding: 2rem 0;
  width: 20rem;
  min-width: 20rem;
}

.footer-contato{
  padding-right: 10rem;
  text-align:end;
  color: var(--footer-elements-color);
}

.footer-developer h4 {
  text-align:center;
  font-size: var(--small-font-size);
  color: var(--footer-elements-color);
}

.footer-developer h4 a {
  text-decoration:none;
  color: var(--footer-elements-color);
}

.footer-developer h4 a:hover {
  text-decoration:underline;
  color: var(--menu-link-secondary-color);
}

.footer-social {
  padding-top: 3rem;
}

.footer-social a {
  background-color: var(--footer-color);
  color: var(--footer-elements-color);
  font-weight: bold;
  font-size: var(--fs-base);
  border: none;
  border-radius: var(--default-border-radius);
  cursor: pointer;
  transition: filter var(--transition-fast) ease-in-out;
}

/* WHATSAPP ITEM */
.whatsappButton {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#2bb741;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 1px 1px 2px #888;
}

.whatsappButton a {
  color:#FFF;
}

.whatsappButton a i {
  margin-top: 30px;
}


/*COOKIES*/

#consent-popup {
  transition: opacity 1s ease;
  &.hidden {
      opacity: 0;
  }
}
.cookieConsentContainer{
  z-index:999;
  width:35rem;
  min-height:2rem;
  box-sizing:border-box;
  padding:1rem 2rem;
  background:black;
  overflow:hidden;
  position:fixed;
  bottom:0 ;
  left:3rem;
  /*
  display:none;
  */
  }

.cookieConsentContainer .cookieTitle h4 {
  font-family: OpenSans,arial,sans-serif;
  color: var(--cookie-consent-elements-color);
  line-height:2rem;
  display:block;
}

.cookieConsentContainer .cookieDesc p {
  margin:0;
  padding:0;
  font-family:OpenSans,arial,sans-serif;
  color:var(--cookie-consent-elements-color);
  font-size:13px;
  line-height:20px;
  display:block;
  margin-top:10px;
  }
.cookieConsentContainer .cookieDesc a{
  font-family:OpenSans,arial,sans-serif;
  color:var(--cookie-consent-elements-color);
  text-decoration:underline;
  }
.cookieConsentContainer .cookieButton a{
  display:inline-block;
  font-family:OpenSans,arial,sans-serif;
  color:var(--menu-link-primary-color);
  font-size:14px;
  font-weight:700;
  margin-top:14px;
  background: var(--header-color);
  box-sizing:border-box;
  padding:15px 24px;
  text-align:center;
  transition: background .3s;
  }
.cookieConsentContainer .cookieButton a:hover{
  cursor:pointer;
  color: var(--menu-link-secondary-color);
  text-decoration: none;
  }



@media (max-width: 1400px) {
  .content p, ul {
    font-size: var(--fs-sm);
  }

  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
    gap: var(--spacing-micro);
  }

  .catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
    gap: var(--spacing-sm);
  }

}

@media (max-width: 820px) {
  /* .content p {
    font-size: var(--fs-base);
  } */

  .cookieConsentContainer{
    bottom:0!important;
    left:0!important;
    width:100%!important;
  }

  .single-contact {
    max-width: 80%;
    margin: calc(var(--spacing) * 2) auto;
  }

  .footer-contato{
    padding-right: 0rem;
    text-align:center;
  }

  .top-banner-media iframe {
    width: 100vw;
    height: 30vh;
 }

 .top-banner-media img {
    max-width: 30rem;
    max-height: 15rem;
}

  .grid {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-smlr);
}

  .grid-item {
    padding-bottom: 0rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
  gap: var(--spacing-micro);
}

.catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
    gap: var(--spacing-micro);
  }

}

/*
.menu {
  background: blue;
  margin: var(--spacing);
  display: flex;

  align-items: center;
  justify-content: end;

}

.menu-list {
  background-color: yellow;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  margin: 1rem;
}

.menu-link {
  display: block;
  padding: var(--spacing);
  color: var(--menu-link-primary-color);
  text-decoration: none;
  transition: background-color var(--transition-fast) ease-in-out;
  border-radius: var(--default-border-radius);
  font-size: 2rem;
  font-weight: bold;

}

.menu-link:hover {
  background: var(--clr-light-shadow-10);
  color: var(--menu-link-secondary-color);
}

.header {
  background: var(--header-color);
  padding: var(--spacing);
  box-shadow: 0 5px 10px 2px var(--clr-dark-shadow-20);
  z-index: 1;
  position: relative;
}

.header-heading {
  font-size: var(--biggest-font-size);
  text-align: center;
  justify-items: center;
}

.header-link {
  color: var(--menu-link-primary-color);
  text-decoration: none;
  transition: filter var(--transition-fast) ease-in-out;
}

.header-link:hover {
  filter: brightness(70%);

}
.content-top-banner {
  margin: 0;
  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.content-top-banner-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
*/

.service-card-box {
  background: var(--post-background-color);
  padding: 1.5rem;
  margin: var(--spacing);
  box-shadow: 2px 2px 5px var(--clr-dark-shadow-20);
  min-width: 330px;
  min-height: 230px;
}

.service-card-image {
  width: 300px;
  height: 150px;
  margin: auto;

}

.service-card-text {

}

.content-text-box {
  padding: var(--spacing-bgst);
  color: var(--text-primary-color);
}

.content-text-box h1, h2, h3 {
  color: var(--title-primary-color);
}

.content-text-box p {
  color: var(--text-primary-color);
  font-size: var(--medium-font-size);
}

.content-text-box ul {
  list-style: none;
}

.content-bottom-banner {
  margin: 0;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.content-bottom-banner-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}





/* Card Grid */
.content-card-grid {
  background: var(--background-secondary-color);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));

}

.posts {
  background: var(--post-background-color);
  padding: 1.5rem;
  margin: var(--spacing);
  box-shadow: 2px 2px 5px var(--clr-dark-shadow-20);
  min-width: 330px;
  min-height: 230px;
}

.post-resume {
  color: var(--post-title-color);
}

.post-resume-image-box{
  /*
  border-width: 0.1rem;
  border-color: var(--secondary-dark-clr);
  border-style: solid;
  */
  width: 15rem;
}

.post-resume-image img {
  width: 100%;
  max-height: 540px;
}

.post-body {
  color: var(--post-text-color);
  font-size: 2rem;
}

.post-link {
  color: var(--general-link-primary-color);
  transition: color var(--transition-fast) ease-in-out;
  text-decoration: none;
}

.post-link:hover {
  color: var(--general-link-secondary-color);
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
}

.contacts-table {
  width: 100%;
  min-width: var(--table-min-width);
  border-collapse: collapse;
}

.table-caption {
  font-size: var(--medium-font-size);
  font-weight: bold;
  padding: var(--spacing);
}

.table-row {
  text-align: left;
  text-overflow: ellipsis;
  transition: background-color var(--transition-fast) ease-in-out;
}

.table-row:nth-of-type(2n) {
  background: var(--clr-dark-shadow-5);
}

.table-row:not(.table-row-header):hover {
  background: var(--clr-dark-shadow-10);
}

.table-row-header {
  background: var(--clr-light-gray);
  color: var(--clr-black);
}

.table-cel,
.table-header {
  padding: var(--spacing);
}

.table-link {
  color: var(--link-dark-clr);
  transition: color var(--transition-fast) ease-in-out;
  text-decoration: none;
}

.table-link:hover {
  color: var(--clr-black);
}



.single-contact h1 {
  margin: 1rem 0;
}

.single-contact p {
  margin: 1rem 0;
}

/* Pagination */
.pagination-wrapper {
  font-size: var(--small-font-size);
}

.step-links {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.step-links > * {
  display: block;
  padding: calc(var(--spacing) * 0.8);
}

/* Sections */


.pagination {
  margin-top: var(--spacing);
  display: flex;
  justify-content: center;
  padding: calc(var(--spacing) * 0.8);
  font-size: var(--small-font-size);
  color: var(--general-link-primary-color);
}

.pagination .step-links {
  display: flex;
  gap: calc(var(--spacing) * 0.8);
}

.pagination .step-links a {
  color: var(--general-link-primary-color);
  transition: color var(--transition-fast) ease-in-out;
  text-decoration: none;
  display: block;
}

/* Search */
.search-content {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row nowrap;
gap: 0;
position: relative;
isolation: isolate;
max-width: 40rem;
margin-inline: auto;
font-size: inherit;
}

.search-input {
width: 100%;
background-color: var(--background-secondary-color);
border: 2px solid var(--menu-link-primary-color);
/* font-size: var(--fs-base); */
padding: var(--spacing);
padding-inline-end: calc(var(--spacing) + var(--spacing));
border-radius: 5px;
outline: none;
}
.search-input::placeholder {
color: var(--menu-link-primary-color);
}

.search-input:focus {
border: 2px solid var(--menu-link-primary-color);
}

.search-btn {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
border: none;
background: transparent;
font-size: var(--fs-base);
padding-inline: var(--spacing);
color: var(--menu-link-primary-color);
}

.search-content:focus-within .search-btn {
color: var(--menu-link-primary-color);
}

.message {
  max-width: 600px;
  margin: var(--spacing) auto;
  margin-top: calc(var(--spacing) * 2);
  padding: var(--spacing);
  text-align: center;
  border-radius: var(--default-border-radius);
  font-size: var(--smaller-font-size);
}

.message.success {
  background: rgba(0, 255, 0, 0.3);
  border: 1px solid rgba(0, 255, 0, 90%);
}

.message.error {
  background: rgba(255, 0, 0, 0.3);
  border: 1px solid rgba(255, 0, 0, 90%);
}

.message.warning {
  background: rgba(255, 255, 0, 0.3);
  border: 1px solid rgba(255, 255, 0, 90%);
}


.errorlist {
  list-style: none;
  font-size: var(--smaller-font-size);
  color: tomato;
}
.errorlist.nonfield {
  color: inherit;
}

.form {
  background-color: var(--form-background-color);
}


.form-wrapper {
  max-width: 60rem;
  margin: var(--spacing) auto;
  padding: var(--spacing-smlst);
  background-color: var(--form-background-color);
}

.form-label {
  color: var(--form-text-color);
  font-size: var(--fs-base);
}

.form-wrapper h3 {
  color: var(--form-text-color);
}

.form-content {
  margin: var(--spacing) 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  /* padding-bottom: var(--spacing); */
}

.form-group p {
  margin: 1em 0;
  color: var(--form-text-color);
}

.form-group .help-text,
.form-group .help-text ~ ul {
  margin: 0;
  font-size: var(--smallest-font-size);
  list-style: none;
  color: var(--form-text-color);
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 1rem;
  border-radius: var(--default-border-radius);
  border: 1px solid var(--menu-link-primary-color);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  box-shadow: 0 0 5px var(--menu-link-primary-color);
}

.form-button {

  background-color: var(--form-button-dark-color);
  color: var(--clr-white);
  font-weight: bold;
  font-size: var(--fs-base);
  border: none;
  padding: 1rem 2rem;
  border-radius: var(--default-border-radius);
  cursor: pointer;
  transition: filter var(--transition-fast) ease-in-out;
}

.form-button:hover{
  background-color: var(--form-button-light-color);
}

.btn {
  background-color: var(--general-link-primary-color);
  color: var(--clr-white);
  font-weight: bold;
  font-size: var(--fs-base);
  border: none;
  padding: 1rem 2rem;
  border-radius: var(--default-border-radius);
  cursor: pointer;
  transition: filter var(--transition-fast) ease-in-out;
}

.btn:hover {
  /* filter: brightness(50%); */
  color: var(--clr-white);
  background-color: var(--general-link-secondary-color)
}

.btn:focus,
.btn:active {
  filter: brightness(80%);
  box-shadow: 0 0 5px var(--menu-link-primary-color);
}

/* Utilities */
.pb-base {
padding-bottom: var(--spacing-base);
}

.mt-base {
margin-top: var(--spacing-base);
}

.center {
text-align: center;
}

.separator {
width: 50%;
margin-inline: auto;
height: 1px;
flex-shrink: 0;
}

/* Single Post */
.single-post-content {
padding-top: var(--spacing-smlst);
color: var(--post-text-color);
}

.single-post-title,
.single-post-excerpt {
margin: 0;
}

.single-post-excerpt {
color: var(--post-title-color);
font-size: var(--fs-bg);
font-style: italic;
}

/* Post Meta */
.post-meta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-base);
flex-flow: row wrap;
}

.post-meta-link {
display: flex;
gap: var(--spacing-micro);
align-items: center;
justify-content: center;
color: var(--general-link-primary-color);
text-decoration: none;
}

.post-meta-link:hover {
text-decoration: none;
}

/* Post tags */

.post-card-cover img {
min-height: 268px;
}

.post-tags {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: var(--spacing-smlst);
}

.post-tags .post-tag-link,
.post-tags .post-tag-link i {
color: var(--general-link-primary-color);
}

.post-tags .post-tag-link:hover,
.post-tags .post-tag-link:hover i {
color: var(--general-link-secondary-color);
text-decoration: none;
}

.post-tag-link {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: var(--spacing-micro);
}

.note-video-clip {
display: block;
margin: auto;
}

/* CodeMirror */
.CodeMirror {
  height: auto !important;
  font-size: var(--fs-smlr) !important;
}


.cookie-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--header-color);
  color: var(--menu-link-primary-color);
  padding: 15px;
  text-align: center;
  border-top: 2px solid #ddd;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.cookie-popup button {
  background-color: var(--menu-link-primary-color);
  color: var(--header-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.cookie-popup button:hover {
  background-color: var(--menu-link-secondary-color);
  color: var(--menu-link-primary-color);
  transition: 0.5s;

}