.main_company{
    background-color: gainsboro;
    gap: 1.6rem; 
}

strong {
    font-weight: 600;
}

.main_company-icon {
    color: darkseagreen;
    font-size: 3rem;
   /* padding: 0rem 1rem 0rem 0rem;*/
}

.main_company__icon_orange {
    color: orange;
    font-size: 3rem;
   /* padding: 0rem 1rem 0rem 0rem;*/
}

.main_company-hero{
    background-color:#fff;
    width:80%;
    margin-inline: auto;
    padding: 4rem 4rem 2rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 
    "heading     takeaway"
    "description takeaway";
}

.main_company-hero_heading {
    grid-area: heading;
    background-color: red;
    /*width: 80%; <- esta propiedad usaria solo el 80% del espacio asignado en el heading que es 2fr*/
}

.main_company-section-title {
    grid-area: title;
    background-color: #fff;
    color: var(--ultra_graphite);
    font-size: 2.5rem;
    padding: 1rem 1rem 2rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main_company-hero-headline {
    background-color: #fff;
    color: var(--dark_graphite);
    font-size: 2rem;
    padding: 0rem 2rem 2rem 2rem;
}

.main_company-hero_description {
    grid-area: description;
    background-color: #fff;
    color: var(graphite);
    font-size: 1.6rem;
    padding:0rem 2rem 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.main_company-hero_takeaway {
    grid-area: takeaway;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    position: relative;
    background-color: rgba(143, 188, 143, 0.200);
    color: var(--dark_graphite);
    padding: 2rem 2rem;
    font-size: 2rem;
    text-align: center;
    border-radius: 0.3rem;
}

.main_company-hero_takeaway .fa-quote-left {
    position: absolute;
    color: var(--dark_graphite);
    opacity: 0.25;
    top: 2rem;
    left: 2rem;
    font-size: 2.25rem;
}


.main_company-what_we_do {
    width:80%;
    font-size: 2rem;
    background-color: white;
    margin-inline: auto;
    padding: 4rem 4rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
    "image title      "
    "image description";
    /* margin-top: 1rem;*/
   /* border-radius: 0.8rem;*/
    text-align: center;
}

.main_company-image-container {
    grid-area: image;
    padding: 0rem 2rem 2rem 2rem ;
}

.main_company-image {
    object-fit: cover;
    border-radius: 0.5rem;
    width: 100%; /* de su contenedor */
    height: 100%; 
    opacity: 95%; 
    transition: 0.3s;
}

.main_company-image:hover {
    opacity: 100;
    transform: scale(1.02);
}

.main_company-how_we_work {
    width:80%;
    background-color: white;
    margin-inline: auto;
    padding:  4rem 4rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "title title title title                        "
    "description description description description"
    "block block block block";
    /* margin-top: 1rem;*/
   /* border-radius: 0.8rem;*/
    text-align: center;
}

.main_company-how_we_work-block_set {
    grid-area: block; /* hijo de un grid map */
    width: 100%;
    height: 100%;
    gap: 1.5rem;
    object-fit: cover;
/*     border-radius: 0.3rem;
    opacity: 90%;
    transition: 0.3s; */
    display: flex;
    padding:0rem 2rem;
}

.main_company-how_we_work-block {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    background-color: rgba(143, 188, 143, 0.200);
    color: var(--dark_graphite);
    padding: 2rem 2rem;
    font-size: 1.4rem;
    text-align: left;
    border-radius: 0.3rem;
    transition: 0.3s;
}

.main_company-how_we_work-block:hover {
        background-color: rgba(143, 188, 143, 0.300);
}

.main_company-how_we_work-block h3 {
    font-size: 2rem;
    text-align: left;
}


/* SECCION OUR APPROACH - NUESTRO ENFOQUE  */
.main_company__our_approach {
    /* nuestro enfoque notación BEM*/
    width:80%;
    background-color: white;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
    "description  image";
    padding:  2rem 2rem;
    /* margin-top: 1rem;*/
   /* border-radius: 0.8rem;*/
/*     text-align: left; */
}

.main_company__our_approach__description_container {
    grid-area: description;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
    "title title"
    "functional market";
    width: 100%;
    height: 100%;
}

.main_company__our_approach__description_container h3 {
   font-size: 2rem;
}

.main_company__our_approach__description_container p {
   font-size: 1.6rem;
   text-align: left;
}

.main_company__our_approach__description_container ul {
   font-size: 1.6rem;
   padding: 0rem 1rem;
   list-style: none;
   padding: 0;
}

.main_company__our_approach__description_container li::before {
   content: "";
   display: inline-block;
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
   background-color: darkseagreen;
   opacity: 75%; 
}

.main_company__our_approach__description_container li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main_company__our_approach__functional {
    grid-area: functional;
    background-color:  rgba(143, 188, 143, 0.100);
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap:1.5rem;
    border-radius: 0.3rem;
}

.main_company__our_approach__market {
    grid-area: market;
    background-color: white;
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.main_company__our_approach__image {
    grid-area: image;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.3rem;
    opacity: 100%;
    transition: 0.3s;
    border-radius: 0.5rem;
}



.main_company__differentiators {
    width:80%;
    background-color: white;
    margin-inline: auto;
    padding: 2rem 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.main_company__differentiators__icon {
    color: orange;
    font-size: 2rem;
    opacity: 75%;
}

.main_company__differentiators_card_container {
    display: flex;
/*     grid-template-columns: repeat(3 1fr);
    grid-template-areas:
    "knowlegde research evolution"; */
    font-size: 1.8rem;
    gap: 2rem;
}

.main_company__differentiators_card_container h3 {
    font-size: 1.8rem;
    color: var(--ultra_graphite);
    display: flex;
    flex-direction: row;
    justify-content: baseline;
    align-items:  left;
    gap: 1rem;
}

.main_company__differentiators_card_container p {
    text-align: left;
}

.main_company__differentiators__knowlegde,
.main_company__differentiators__research,
.main_company__differentiators__evolution {
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    gap: 1rem;
    padding: 3rem 2rem;
    background-color: rgba(255, 166, 0, 0.125);
    border-radius: 0.3rem;
    transition: 0.3s;
}

.main_company__differentiators__knowlegde:hover,
.main_company__differentiators__research:hover,
.main_company__differentiators__evolution:hover {
    background-color: rgba(255, 166, 0, 0.200);
}

.main_company__our_purpose {
    width:80%;
    background-color: white;
    margin-inline: auto;
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 
    "title       title"
    "description takeaway";
}

.main_company__our_purpose strong {
    font-weight: 600;
    color: black;
}


.main_company__section_description {
    grid-area: description;
    font-size: 1.6rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 2rem 1rem 1rem;
}

.main_company__our_purpose__takeaway {
    grid-area: takeaway;
    background-color: rgba(143, 188, 143, 0.300);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    /* position: relative; */

    gap: 2rem;
    font-size: 1.8rem;
    padding: 3rem 2.5rem;
    border-radius: 0.3rem;
    width: fit-content;
    justify-self: center;
}

.main_company__our_purpose__takeaway h3 {
/*     color: var(--dark_graphite); */
    display: flex;
    align-items: center;
    gap: 1rem;
/*     z-index: 1; */
}

.main_company__our_purpose__takeaway p, 
.main_company__our_purpose__takeaway strong {
    color: var(--dark_graphite);
/*     z-index: 1; */
}

.main_company__cta {
    width:80%;
    background-color:white;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-areas: " action2";
    padding: 3rem;
    gap: 2rem;
/*     text-align: center; */
}

.main_company__cta_action1 {
    grid-area: action1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:2rem;
    font-size: 1.8rem;
    text-align: center;
}

.main_company__cta_action2 {
    text-align: center;
    grid-area: action2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:2rem;
    font-size: 1.8rem;
}
 
.main_company__cta a {

    font-size: 1.8rem;
    text-decoration: none;
    padding: 1.5rem 3rem;
    background-color: rgba(255, 166, 0, 0.900);

    margin: auto;

    border-style: solid;
    border-width: 0.075rem;
    border-color:  rgba(255, 166, 0, 0.6000);

    font-weight: 600; 
    color:white;
    border-color: orange;
    border-radius: 1rem;
    transition: 0.3s

}

.main_company__cta a:hover {
    background-color:orange;
    font-weight: 700;
    /* transform: scale(1.025); */
}

/* FUNCINALIDAD WEVB RESPONSIVE */

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

.main_company-hero{
    display: flex;
    flex-direction: column;
    width:100%;
}

.main_company-what_we_do{
    width:100%;
    font-size: 2rem;
    background-color: white;
    margin-inline: auto;
    padding: 4rem 4rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
    " title      "
    " image      "
    " description";
    text-align: center;
}

.main_company-how_we_work {
    width: 100%;
}

.main_company-how_we_work-block_set {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding:0rem 2rem;
}

    .main_company__our_approach{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .main_company__differentiators {
        width: 100%;
    }

    .main_company__differentiators_card_container{
        display: flex;
        flex-direction: column;
/*         width:80%; */
        margin: auto;
    }

    .main_company__our_purpose{
        width:100%;
        background-color: white;
        padding: 4rem 2rem;
        display: grid;
        grid-template-columns:  1fr;
        grid-template-areas: 
        "title"
        "description"
        "takeaway";
        gap: 1rem;
    }

   .main_company__cta {
        width:100%;
        background-color:whitesmoke;
/*         margin-inline: auto;
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        "action1"
        "action2";
        gap: 2rem; */
        display: flex;
        flex-direction: column;
    } 


}

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

.main_company__our_approach__description_container {
    display: flex;
    flex-direction: column;
}

}