/*
GENERAL
*/
.full-width {
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.boxed-in {
    width: 100%;
    max-width: 1500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.row {
    flex-direction: row;
}

/* 
HERO CONTENT
*/
.hero {
    position: relative;
    height: 80vh;
    min-height: 500px;
    display: flex;
    background-color: var(--desite-grey);
    color: var(--desite-white);
    padding: 6rem 4rem;
    background-image: url('/media/images/desite-hero-image-green.png');
    background-position: center;
    background-size: cover;
    backdrop-filter: blur(2px);
    align-items: flex-start;
}

.hero-box-container {
    display: flex;
    flex-direction: row;
}

.hero-box-wrapper {
    display: flex;
    height: auto;
    max-width: 900px;
    flex-direction: column;
}
.hero-cta-wrapper {
    display: flex;
    flex-direction:  row;
}

.title-wrapper, .tag-line-wrapper {
    margin: 2rem 0;
}


/*Animation start */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes boldShift {
    0% { font-weight: normal; color: #333; }
    50% { font-weight: bold; color: #069172; }
    100% { font-weight: normal; color: #333; }
}

.title-wrapper {
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
}

.bold-text {
    display: inline-block;
    animation: boldShift 2s ease-in-out infinite;
}

/* Animation end */
/* Hero - responsive */


/*
SOLUTIONS
*/
.solutions {
    height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 3rem 0;
}

.solutions > h1 {
    font-size: 2rem;
}
.section-bar {
    width: 100%;
    padding: 1px 0;
    background-color: var(--desite-blue);
    margin: 2rem 0;
}

/*
ABOUT ME
*/

.about {
    background-color: var(--desite-grey);
    color: var(--desite-white);

    flex-direction: column;
    height: fit-content;
    min-height: 100vh;
}
.about-section-wrapper {
    flex-grow: 1;
}
.about-me {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.left-column {
    display: flex;
    width: 40%;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.left-column > p {
    font-size: 2.2rem;
}

.right-column {
    display: flex;
    flex-direction: column;
    width: 30%;

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

.abt-img {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    top: -50px;
    height: fit-content;
}

.abt-cta {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 0px;
    width: 100%;
    padding: 1.5rem;
}


.about-me-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--desite-blue);
    border-radius: 2rem;
    padding: 2rem;
}

.card-icon {
    flex-grow: 1;
}


.card-icon, .card-heading, .card-text {
    justify-content: center;
    text-align: center;
    margin: 1rem 0;
}

.card-icon {
    padding: 2rem 0;
}

.card-heading > h3 {
    font-size: 1.3rem;
    font-weight: 450;
}

.card-heading > p {
    font-weight: 400;
}

#expertise {
    grid-column: 1 / 2;
}

#transparency {
    grid-column: 2 / 3;
}

#values {
    grid-column: 3 / 4;
}

/*
SERVICES
*/
.services {
    display: flex;
    flex-direction: column;
    height: 150vh;
    width: 100vw;

background: #34454F;
background: linear-gradient(180deg, rgba(52, 69, 79, 1) 67%, rgba(6, 145, 115, 1) 100%);
}