@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

html {
   box-sizing: border-box;
}

*, *::after, *::before {
   box-sizing: inherit;
}

body {
   margin: 0;
   font-family: 'Rubik', sans-serif;
   line-height: 1.25;
}

img {
   max-width: 100%;
}

h2, h3, p {
   margin: 0;
}

a {
   text-decoration: none;
}

.container {
   max-width: 100%;
   margin: 0 auto;
   padding: 0 16px;
}

.wrapper {
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.section {
   padding-top: 40px;
   padding-bottom: 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
}

.section__body {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   grid-gap: 48px;
}

.section__info h3 {
   margin-bottom: 16px;
   font-size: 18px;
   font-weight: 400;
   color: #293651;
}

.section__info p {
   margin: 0;
   text-indent: 24px;
   text-align: justify;
   font-size: 16px;
   color: #646f87;
}

.section__info a {
   display: block;
   padding-top: 40px;
   color: #ff0000;
}

.footer {
   padding: 32px 0;
   background-color: #f8f8f8;
}

.footer__logo {
   margin-bottom: 38px;
   text-align: center;
}

.footer__socials {
   display: flex;
   justify-content: center;
   margin-bottom: 38px;
}

.footer__socials a {
   display: block;
   margin: 0 12px;
   color: #646f87;
   transition: color .2s;
}

.footer__socials a:hover {
   color: #e60f26;
}

.footer__socials a {
   display: block;
   margin: 0 12px;
}

.underline {
   position: relative;
}

.underline::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -3px;
   width: 100%;
   height: 1px;
   background-color: #0f1542;
   transform: scale(0);
   transition: 0.3s all ease;
}

.underline:hover::after {
   transform: none;
}

.footer__email {
   text-align: center;
}

.footer__email a {
   font-size: 42px;
   color: #0f1542;
}

@media screen and (min-width: 768px) {
   .container {
      max-width: 720px;
   }
}

@media screen and (min-width: 992px) {
   .container {
      max-width: 960px;
   }
}

@media screen and (min-width: 1200px) {
   .container {
      max-width: 1140px;
   }
}

@media screen and (min-width: 1400px) {
   .container {
      max-width: 1320px;
   }
}

@media screen and (max-width: 992px) {
   .section__body {
      grid-template-columns: 1fr;
   }
}