/*Index setions*/
.index-section {
    padding: 1rem;
}

.section-heading {
    text-transform: uppercase;
    font-family: "Exo", "Roboto", "Segoe UI", "Arial", sans-serif;
    font-weight: 300;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

#about-me {
    border-top: 0.25rem solid#CA5500; 
}

/*Personal Info*/
.personal-info {
    background-color: #f4f4f4;
}

.personal-info-item {
    margin-bottom: 20px;
}

.personal-info-item .key {
    font-weight: bold;
}

.personal-info-item .value {
    padding-right: 0.5rem;
}

.personal-info-item .value .fa-phone {
    color: #333A3F;
}

.personal-info-item .value .fa-whatsapp {
    color: #25D366;
}

.copy-email {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.copy-email:hover {
    color: #CA5500;
}

.copy-email:active {
    transform: scale(1.1)
}

/* About Me */
.about-me {
    background-color: white;
}

.three-reasons-icon-div {
    text-align: center;
}

.three-reasons-icon {
    font-size: 1.5rem;
    padding-top: 0.25rem;
    color: #CA5500;
}

.three-reasons-heading {
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.about-me-bullet {
    padding: 0;
}

@media(max-width:1110px) {
    /* Reduce personal info text size to stay in div */
    .personal-info-item .value,
    .personal-info-item .key {
        font-size: 0.9rem;
    }
}

@media(max-width: 768px) {
    /* Centre the section titles */
    .section-heading {
        text-align: center;
    }
    /* Remove bottom padding on info section */
    .personal-info {
        padding-bottom: 0;
    }
    /* Add margin left to the info keys */
    .personal-info-item .key {
        margin-left: 1rem;
    }
}

@media(max-width: 576px) {
    /*Update spacings on about me on mobile*/
    .three-reasons-icon-div {
        padding: 0;
        width: fit-content;
    }

    .three-reasons-heading {
        text-align: center;
    }
}

@media(max-width: 450px) {
    /* Reduce margin left for the info keys */
    .personal-info-item .key {
        margin-left: 0.5rem;
    }
}