@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?orkqwr');
  src:  url('fonts/icomoon.eot?orkqwr#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?orkqwr') format('truetype'),
    url('fonts/icomoon.woff?orkqwr') format('woff'),
    url('fonts/icomoon.svg?orkqwr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}







.grid{

    max-width:80%;
    margin:auto;

    display:grid;

    grid-template-columns:1.3fr 1fr;
    grid-template-rows:250px 320px 250px;

    gap:20px;

    grid-template-areas:
        "img logo"
        "img info"
        "small cta";
}

.card{
    overflow:hidden;
    ;border-radius:28px
}

/* Imagen grande */

.img-big{
    grid-area:img;
	height: 80%;
	
}


.img-small img{

    width:100%;
    height:100%;
    object-fit:cover;
}

/* Logo */

.logo{

    grid-area:logo;

    background:#dce8c5;

    display:flex;
    justify-content:center;
    align-items:center;
}

.logo img{
    width:220px;
}

/* Información */

.info{

    grid-area:info;

    background:#26284c;

    color:white;

    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;

    text-align:center;

    padding:40px;
}

.info h2{

    font-size:54px;
    line-height:1;
}

.info p{

    font-size:20px;
    line-height:1.6;
}

.avatars{

    display:flex;
    gap:10px;
}

.avatars img{

    width:65px;
    height:65px;
    border-radius:50%;
    border:3px solid white;
}

/* Imagen inferior */

.img-small{
    grid-area:small;
}

/* CTA */

.cta{

    grid-area:cta;

    background:#d9e8bf;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:50px;
}

.cta h2{

    color:#1e274f;

    font-size:52px;

    margin-bottom:40px;

    line-height:1;
}

.btn{

    width:max-content;

    background:#26284c;
    color:#FFFFFF;

    text-decoration:none;

    padding:18px 35px;

    border-radius:50px;
}

@media(max-width:900px){

.grid{

    grid-template-columns:1fr;

    grid-template-areas:
    "img"
    "logo"
    "info"
    "small"
    "cta";
}

}









.icon-pin:before {
  content: "\e900";
}
.icon-email:before {
  content: "\e901";
}
.icon-phone:before {
  content: "\e902";
}
.icon-right-arrow:before {
  content: "\e903";
}
.icon-creative-design:before {
  content: "\e904";
}
.icon-check:before {
  content: "\e905";
}
.icon-industrial:before {
  content: "\e906";
}
.icon-petroleum:before {
  content: "\e907";
}
.icon-engineering:before {
  content: "\e908";
}
.icon-factory:before {
  content: "\e909";
}
.icon-customer-review:before {
  content: "\e90a";
}
.icon-play-button:before {
  content: "\e90b";
}
.icon-telephone:before {
  content: "\e90c";
}
.icon-sent-mail:before {
  content: "\e90d";
}
.icon-under-construction:before {
  content: "\e90e";
}
.icon-industry:before {
  content: "\e90f";
}
.icon-layout:before {
  content: "\e910";
}
.icon-tick:before {
  content: "\e911";
}
.icon-building:before {
  content: "\e912";
}
.icon-building-1:before {
  content: "\e913";
}
.icon-engineer:before {
  content: "\e914";
}
.icon-engineer-1:before {
  content: "\e915";
}
.icon-magnifying-glass:before {
  content: "\e916";
}
.icon-under-construction-1:before {
  content: "\e917";
}