/* =============== ACHIEVEMENTS ======================== */

.about__achievements {
    margin-top: 3rem;    
}

.about__achievements-container {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 5rem;    
}

.about__achievements-right > p {
    margin: 1.6rem 0 2.5rem;
}

.about__achievements-left {
    width: 100%;
    height: 100%;
    overflow: hidden;        /* hides anything outside the box */
    display: flex;
    align-items: center;
    justify-content: center;
    
}


.about__achievements-left img {
  width: 75%;
  height: 75%;
  object-fit: cover;        /* fills the space, crops edges */
  object-position: center;  /* centers the image */
}

.achievements__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.achievement__card {
    background: var(--color-bg1);
    padding: 1.6rem;
    border-radius: 1rem;
    text-align: center;
    transition: var(--transition);
}

.achievement__card:hover {
    background: var(--color-bg2);
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3);
}

.achievement__icon {
    font-size: 2rem;
}

/* =============== OUR SERVICES ======================== */

.our__services {
    background: var(--color-bg1);
    box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
    height: 35rem;
    margin-top: 0;
}

.services__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.2rem;
}

.services > p {
    margin: 1.6rem 0 2.5rem;
}

.services {
    background: var(--color-danger);
    padding: 2rem;
    border-radius: 2rem;
    transition: var(--transition);
}

.services:hover {
    background: var(--color-bg2);
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3);
}

/* =============== WHY US ======================== */

.why__us {
    height: 35rem;
    margin-top: 0;
}

.why_us__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.2rem;
}

.why_us > p {
    margin: 1.6rem 0 2.5rem;
}

.why_us {
    background: var(--color-danger);
    padding: 2rem;
    border-radius: 2rem;
    transition: var(--transition);
}

.why_us:hover {
    background: var(--color-bg2);
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3);
}


/* =============== MEDIA QUERIES (TABLETS) ================== */

@media screen and (max-width: 1024px) {
    .container {
        width: var(--container-width-md);
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.4rem;
    }

/* ====================== ACHIEVEMENTS (TABLET) ======================== */

    .about__achievements {
        margin-top: 2rem;    
    }

    .about__achievements-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4rem;    
    }

    .about__achievements-left {
        align-items: center;
        width: 90%;
        margin: 0 auto;
    }
/* ====================== OUR SERVICES (TABLET) ======================== */

    .our__services {
        height: auto;
    }

    .services__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

/* ====================== WHY US (TABLET) ======================== */

    .why__us {
        height: auto;
    }

    .why_us__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* =============== MEDIA QUERIES (PHONES) ================== */

@media screen and (max-width: 600px) {
    .achievements__cards {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }
}