*, *:before, *:after{
  font-family: 'Gilroy-Medium';
  box-sizing: border-box;
}
  
@font-face {
  font-family: 'Gilroy-Regular';
  font-style: normal;
  font-weight: normal;
  src: local('./fonts/Gilroy-Regular'), url('./fonts/Gilroy-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Gilroy-Medium';
  font-style: normal;
  font-weight: normal;
  src: local('./fonts/Gilroy-Medium'), url('./fonts/Gilroy-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Gilroy-Bold';
  font-style: normal;
  font-weight: normal;
  src: local('./fonts/Gilroy-Bold'), url('./fonts/Gilroy-Bold.woff') format('woff');
}

:root{
  --wrap-base: 1320px;
  --color-on-surface: #FAFAFA;
  --color-surface-highlight: #E6004C;
  --color-surface-light: #FAFAFA;
  --color-surface-dark: #122347;
  --color-text: #062953;
  --color-text-highlight: #E6004C;
}

.wrap{
  max-width: var(--wrap-base);
  margin: 0 auto;
}

@media only screen and (max-width: 959px) {
  .wrap{
    padding-inline: 25px;
  }
}

img{
  max-width: 100%;
  height: auto;
}

.cover{
  display: grid;
  background: url(./header.png) no-repeat top center / cover;
}

@media only screen and (min-width: 959px) {
  .cover{
    height: 850px;
  }
}

@media only screen and (max-width: 960px) {
  .cover{
    padding-inline: 25px;
    padding-block-end: 60px;
    background: var(--color-surface-dark);
    border-inline-start: 15px solid var(--color-surface-highlight);
  }
}

@media only screen and (min-width: 960px) {
  .cover{
    grid-template-columns: 
      [start]
      minmax(20px, 1fr)
      [wrap-start]
      minmax(0, calc(var(--wrap-base) / 2))
      [wrap-middle]
      minmax(0, calc(var(--wrap-base) / 2))
      [wrap-end]
      minmax(20px, 1fr)
      [end]
    ;
  }
}

.cover header {
  padding-block: 50px 100px;
  display: flex;
}

@media only screen and (min-width: 960px) {

  .cover header{
    justify-content: space-between;
  }

}

@media only screen and (max-width: 959px) {

  .cover header {
    
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

}

.cover div {
  grid-column: wrap-middle / wrap-end;
}

.cover .title {
  line-height: 1.2;
  margin-block-end: 40px;
  color: var(--color-on-surface);
}


@media only screen and (min-width: 959px) {
  .cover .title {
    font-size: 52px;
  }
}

@media only screen and (max-width: 960px) {
  .cover .title {
    font-size: 32px;
  }
}

.cover nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}

@media only screen and (max-width: 960px) {
  .cover nav{
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }
}

.cover nav a {
  color: var(--color-on-surface);
  text-decoration: none;
}

.cover p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-on-surface);
}

.enterprise-values {
  max-width: var(--wrap-base);
  margin: 0 auto;
  padding: 48px;
  border-radius: 0.8em;
  background: #FAFAFA;
  display: grid;
  gap: 50px;
  transform: translateY(-25px);
  z-index: 1;
  position: relative;
}

@media only screen and (max-width: 960px) {
  .enterprise-values {
    margin-inline: 25px;
  }
}

@media only screen and (min-width: 960px) {
  .enterprise-values {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.value-title {
  font-size: 36px;
}

.value-topic p {
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.enterprise-cause{
  max-width: var(--wrap-base);
  margin: 50px auto;
  display: grid;
  gap: 16px;
}

@media only screen and (max-width: 959px) {
  .enterprise-cause{
    padding-inline: 25px;
  }
}

@media only screen and (min-width: 960px) {
  .enterprise-cause{
    grid-template-columns: minmax(50px, 1fr) minmax(0, 480px) 2px minmax(0, calc(var(--wrap-base) - 480px)) minmax(50px, 1fr);
  }
}

.quotes-close {
  display: flex;
  align-items: flex-end;
}


.bar {
  height: 20px;
  background: #000;
}

.cause-title {
  font-size: 52px;
  margin-block-end: 24px;
}

.enterprise-cause p{
  font-size: 17px;
  line-height: 1.5;
  margin-block-end: 12px;
}

.enterprise{
  padding-block: 56px 118px;
  padding-inline: 25px;
  background: var(--color-surface-light);
}

@media only screen and (min-width: 960px) {
  .enterprise h1{
    font-size: 38px;
  }
}

@media only screen and (min-width: 960px) {
  .enterprise{
    background: var(--color-surface-light) url(./infinito.png) no-repeat center 60px;
  }
}

.enterprise header{
  text-align: center;
}

.enterprise .wrap{
  padding-block: 36px;
  display: grid;
  gap: 100px;
}

@media only screen and (min-width: 960px) {
  .enterprise .wrap {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: 100px;
  }
}

.enterprise h1{
  font-size: 52px;
}

.enterprise h1:after {
  content: "";
  display: block;
  height: 40px;
  width: 2px;
  background: #000;
  margin: 30px auto;
}

.enterprises{
  text-align: center;
  display: grid;
  gap: 45px;
  grid-template-rows: 55px auto 10px;
  justify-content: center;
}

@media only screen and (min-width: 960px) {
  .enterprises{
    width: 390px;
    margin: 0 auto;
  }
}


.enterprises img{
  height: 55px;
  margin: 0 auto;
}

.enterprises p{
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
}

.enterprises a{
  color: var(--enterprise-link-color, var(--color-text));
  text-decoration: none;
  width: fit-content;
  margin: 0 auto;
  transition: 0.2s;
}


.enterprises a:after{
  content: "";
  display: block;
  height: var(--enterprise-link-bar-height, 2px);
  background-color: var(--enterprise-link-color, var(--color-text));
  width: 100%;
  margin-block-start: 10px;
  transition: 0.2s;
}

.enterprises a:hover{
  --enterprise-link-color: var(--color-text-highlight);
  --enterprise-link-bar-height: 6px;
}




.footer-site-top{
  background-color: var(--color-surface-dark);
  padding-block: 80px 160px;
  color: var(--color-on-surface);
}

.footer-site-top .wrap {
  display: grid;
}

@media only screen and (max-width: 959px) {
  .footer-site-top .wrap {
    gap: 80px;
  }
}

@media only screen and (min-width: 960px) {
  .footer-site-top .wrap {
    gap: 100px;
  }
}

@media only screen and (min-width: 960px) {
  .footer-site-top .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer-site-top .wrap div {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-title{
  font-family: 'Gilroy-Bold';
}

@media only screen and (max-width: 959px) {
  .footer-title{
    font-size: 42px;
  }
}

@media only screen and (min-width: 960px) {
  .footer-title{
    font-size: 52px;
  }
}

.footer-description{
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}


.button{
  color: var(--color-on-surface);
  background-color: #505874;
  font-size: 15px;
  font-weight: bold;
  border-radius: 0.4em;
  padding: 18px 48px;
  text-decoration: none;
  align-self: baseline;
  transition: 0.2s;
}

.button:hover{
  background-color: var(--color-surface-highlight);
}

.footer-site-bottom{
  background-color: var(--color-surface-highlight);
  padding-block: 40px 80px;
}

.footer-site-bottom .wrap {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  color: var(--color-on-surface);
}

@media only screen and (max-width: 959px) {
  .footer-site-bottom .wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

.copyright{
  line-height: 1.5;
}


.footer-site-top nav {
  display: flex;
  gap: 14px;
}

.social {
  background: var(--color-surface-light);
  border-radius: 0.3em;
  width: 28px;
  padding: 4px;
  display: grid;
  place-content: center;
  height: 28px;
  transition: 0.2s;
}

.social:hover {
  background: var(--color-surface-highlight);
}

.address{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-end: 50px;
}

.address-title{
  text-transform: uppercase;
  font-family: 'Gilroy-Bold';
  font-size: 24px;
  margin-block-end: 12px;
}