/* ----------------------------- initial styling ----------------------------- */

:root{
    --primary:hsl(300, 76%, 20%);
    --primary-light:hsl(300, 76%, 40%);
    --primary-lighter:hsl(300, 76%, 60%);
    --primary-lighter-plus:hsl(300, 76%, 80%);
    --black:hsl(0, 0%, 0%);
    --grey:hsl(0, 0%, 20%);
    --grey-light:hsl(0, 0%, 40%);
    --grey-lighter:hsl(0, 0%, 60%);
    --grey-lighter-plus:hsl(0, 0%, 80%);
    --white:hsl(0, 0%, 100%);
    --inner-max-width:900px;
}

*{
    padding:0;
    margin:0;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    background-color:transparent;
    border-width:0;
    cursor:pointer;
}

html, body{
    width:100%;
    height:100%;
}

.section-title{
    font-size:2rem;
    font-weight:bold;
    color:var(--primary-light);
}

.root{
    width:100%;
    min-height:100%;
    min-width:360px;
    background-color:var(--grey);
}

/* ----------------------------- header ----------------------------- */

.header-wrap{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1;
}

.header{
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:var(--inner-max-width);
    margin-inline:auto;
    padding-inline:20px;
}

.nav{
    display:flex;
    gap:20px;
}

.nav a{
    color:var(--primary-light);
}

.nav a:hover{
    color:var(--primary);
}

.header-top button{
    display:none;
    font-size:1.5rem;
    color:var(--white);
}

.header-top a{
    font-size:2rem;
    color:var(--primary);
}

.header-top, .header-body{
    display:contents;
}

@media(min-width:701px){

    .header-wrap[scroll]{

        background-color:var(--primary);

        .header-top a{
            color:var(--white);
        }

        .nav a{
            color:var(--primary-lighter);
        }

        .nav a:hover{
            color:var(--white);
        }
    }
}

@media(max-width:700px){

    .header[open]{

        .header-top button:first-of-type{
            display:none;
        }

        .header-top button:last-of-type{
            display:initial;
        }

        .header-body{
            max-height:500px;
        }
    }

    .header{
        display:contents;
    }

    .header-top{
        display:flex;
        justify-content:space-between;
        padding-inline:20px;
        height:80px;
        background-color:var(--primary);
        align-items:center;
    }

    .header-top a{
        color:var(--white);
    }

    .header-body{
        display:block;
        transition:max-height 0.5s;
        overflow-y:hidden;
        max-height:0;
    }

    .nav{
        flex-direction:column;
        padding:20px;
        background-color:var(--grey-light);
    }

    .nav a{
        color:var(--grey);
        align-self:center;
    }

    .nav a:hover{
        color:var(--grey-lighter-plus);
    }

    .header-top button:first-of-type{
        display:initial;
    }
}

/* ----------------------------- hero ----------------------------- */

.hero{
    position:relative;
    height:500px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    top:0;
    left:0;
}

.hero-overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(255,255,255,0.5);
}

.hero-content{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:40px;
    margin-inline:auto;
    max-width:var(--inner-max-width);
    padding-inline:20px;
}

.hero-content span{
    font-size:2.5rem;
    font-weight:bold;
    color:var(--primary-light);    
}

.hero-content p{
    line-height:1.6;
    color:var(--grey);
    font-size:1.1rem;
    max-width:700px;
}

.hero-content a{
    padding:20px;
    align-self:start;
    background-color:var(--primary);
    color:var(--white);
}

/* ----------------------------- about ----------------------------- */

.about-wrap{
    padding-block:40px;
}

.about{
    max-width:var(--inner-max-width);
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:40px;
    padding-inline:20px;
}

.about-top{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.about-top-image-wrap{
    position:relative;
    aspect-ratio:3/2;
    box-shadow:2px 2px 10px;
}

.about-top-image-wrap img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.about-body{
    display:flex;
    gap:30px;
    flex-direction:column;
}

.about-body-content{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.about-body-item{
    display:flex;
    flex-direction:column;
}

.about-item-title{
    display:flex;
    justify-content:space-between;
    padding:10px;
    background-color:var(--primary);
    cursor:pointer;
}

.about-item-title *{
    color:var(--white);
    font-size:1.2rem;
}

.about-item-title span:last-of-type{
    display:none;
}

.about-item-desc{
    transition:max-height 0.5s;
    max-height:0;
    overflow-y:hidden;
}

.about-item-desc p{
    padding:20px;
    line-height:1.6;
    color:var(--grey-lighter-plus);
    background-image:linear-gradient(to bottom, var(--primary), transparent);
}

.about-body-item[open]{

    .about-item-desc{
        max-height:500px;
    }

    .about-item-title span:last-of-type{
        display:initial;
    }

    .about-item-title span:nth-of-type(2){
        display:none;
    }
}

@media(max-width:800px){

    .about{
        grid-template-columns:auto;
    }
}

/* ----------------------------- assets ----------------------------- */

.assets-wrap{
    padding-block:40px;
    background-color:var(--grey-lighter);
}

.assets{
    max-width:var(--inner-max-width);
    padding-inline:20px;
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
}

.asset{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.asset :first-child{
    font-size:2.5rem;
    color:var(--primary);
    text-align:center;
}

.asset :last-child{
    color:var(--white);
    text-align:center;
}


@media(max-width:600px){

    .assets{
        grid-template-columns:auto;
        gap:40px;
    }
}

/* ----------------------------- team ----------------------------- */

.team-wrap{
    padding-block:40px;
}

.team{
    max-width:var(--inner-max-width);
    margin-inline:auto;
    padding-inline:20px;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.team > span{
    text-align:center;
}

.team-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:20px;
}

.team-member{
    position:relative;
    aspect-ratio:5/4;
}

.team-member:hover p{
    max-height:500px;
}

.team-member img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.team-member-info{
    position:absolute;
    bottom:20px;
    left:20px;
    right:20px;
    display:flex;
    flex-direction:column-reverse;
    gap:20px;
    background-color:var(--white);
    padding:20px;
}

.team-member-info span:first-of-type{
    color:var(--grey-lighter);
    font-weight:bold;
}

.team-member-info span:last-of-type{
    font-weight:bold;
    font-size:1.1rem;
}

.team-member-info p{
    line-height:1.6;
    color:var(--grey-light);
    max-height:0;
    overflow-y:hidden;
    transition:max-height 0.5s;
}

/* ----------------------------- testimonials ----------------------------- */

.testimonials-wrap{
    padding-block:40px;
    background-color:var(--white);
}

.testimonials{
    display:flex;
    flex-direction:column;
    gap:30px;
    margin-inline:auto;
    max-width:var(--inner-max-width);
    padding-inline:20px;
}

.testimonials > span{
    text-align:center;
}

.testimonial-list{
    display:grid;
    grid-template-columns:auto;
}

.testimonial-item{
    grid-column:1/-1;
    grid-row:1/2;
    display:flex;
    flex-direction:column;
    gap:15px;
    transition:opacity 0.5s;
    opacity:0;
}

.testimonial-item[active]{
    opacity:1;
}

.testimonial-item > p{
    text-align:center;
    font-size:1.1rem;
    color:var(--grey-light);
    line-height:1.6;
}

.testimonial-item > span{
    text-align:center;
    font-weight:bold;
    font-size:1.5rem;
    color:var(--grey);
}

.testimonial-image-wrap{
    position:relative;
    width:60px;
    height:60px;
    overflow:hidden;
    border-radius:100%;
    align-self:center;
}

.testimonial-image-wrap img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;;
}

.testimonial-indicator{
    display:flex;
    justify-content:center;
    gap:10px;
}

.testimonial-indicator button{
    border-radius:100%;
    width:10px;
    height:10px;
    background-color:var(--primary-light);
}

.testimonial-indicator button[active]{
    background-color:var(--primary);
}

.testimonial-indicator button:hover{
    background-color:var(--primary);
}

/* ----------------------------- services ----------------------------- */

.services-wrap{
    padding-block:40px;
}

.services{
    max-width:var(--inner-max-width);
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-inline:20px;
}

.services > span{
    text-align:center;
}

.service-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:30px;
}

.service-item{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.service-item span{
    text-align:center;
    font-size:1.5rem;
    font-weight:bold;
    color:var(--white);
}

.service-item p{
    text-align:center;
    line-height:1.6;
    color:var(--grey-lighter);
    font-size:1.1rem;
}

/* ----------------------------- blog ----------------------------- */

.blog-wrap{
    padding-block:40px;
}

.blog{
    padding-inline:20px;
    max-width:var(--inner-max-width);
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.blog > span{
    text-align:center;
}

.blog > p{
    line-height:1.6;
    font-size:1.1rem;
    text-align:center;
    color:var(--grey-lighter);
}

.blog-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.blog-item{
    display:grid;
    gap:20px;
    grid-template-columns:300px auto;
}

.blog-item-top{
    display:flex;
    flex-direction:column;
    background-color:var(--white);
    padding:20px;
    justify-content:space-between;
}

.blog-item-top :first-child{
    color:var(--primary);
    font-weight:bold;
    font-size:1.1rem;
}

.blog-item-top :last-child{
    color:var(--grey-lighter);
    font-size:0.9rem;
}

.blog-item-body{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.blog-item-body p{
    line-height:1.6;
    color:var(--grey-lighter);
}

.blog-item-body a{
    padding:10px;
    background-color:var(--primary);
    color:var(--white);
    align-self:start;
}

@media(max-width:700px){

    .blog-list{
        grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
        display:grid;
        flex-direction:initial;
    }

    .blog-item{
        grid-template-columns:auto;
        grid-template-rows:100px auto;
    }
}

/* ----------------------------- footer ----------------------------- */

.footer-wrap{
    padding-block:40px;
    background-color:var(--primary);
}

.footer{
    max-width:var(--inner-max-width);
    padding-inline:20px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
    margin-inline:auto;
}

.footer-section{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.footer-section > span{
    font-size:1.5rem;
    color:var(--white);
}

.footer-section > p{
    line-height:1.6;
    color:var(--primary-lighter-plus);
}

.footer-section > div{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.footer-section > div *{
    line-height:1.6;
    color:var(--primary-lighter-plus);
}

@media(max-width:800px){

    .footer{
        grid-template-columns:auto;
    }
}