/* -------------------------- global style --------------------------- */

:root{
    --primary:hsl(39, 100%, 20%);
    --primary-light:hsl(39, 100%, 40%);
    --primary-lighter:hsl(39, 100%, 60%);
    --primary-lighter-plus:hsl(39, 100%, 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%);
}

*{
    margin:0;
    padding:0;
}

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

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

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

.root{
    display:grid;
    min-width:300px;
    grid-template-columns: minmax(20px, auto) minmax(260px, 1000px) minmax(20px, auto);
    grid-auto-rows:max-content;
}

.root > *{
    display:grid;
    grid-template-columns:subgrid;
    grid-column:1/-1;
}

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

.header-wrap{
   background-color:var(--primary);
}

.header{
    grid-column:2/3;
    display:flex;
    justify-content:space-between;
    height:80px;
    align-items:center;
}

.header-action{
    padding:10px;
    border-radius:5px;
    background-color:var(--primary-light);
}

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

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

.brand{
    font-size:2rem;
    color:var(--primary-light);
}

.header-top, .nav-wrap, .nav{
    display:contents;
}

.header-top button{
    display:none;
    padding:10px;
    background-color:var(--primary-light);
    border-radius:5px;
}

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

@media(max-width:700px){

    .header{
        height:initial;
        flex-direction:column;
        justify-content:initial;
        align-items:initial;
    }

    .header-top button{
        display:initial;
    }

    .header-top{
        display:flex;
        justify-content:space-between;
        height:auto;
        align-items:center;
        height:80px;
    }

    .nav-wrap{
        display:initial;
        max-height:0;
        transition:max-height 0.5s;
        overflow-y:hidden;
    }

    .nav-wrap[open]{
        max-height:500px;
    }

    .nav{
        display:flex;
        flex-direction:column;
        gap:25px;
        align-items:center;
        padding-block:20px;
    }

    .nav-item{
        text-align:center;
    }

    .nav-list{
        flex-direction:column;
    }
}

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

.hero-wrap{
    position:relative;
    height:500px;
}

.hero-wrap 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;
    z-index:1;
    background-color:rgba(255, 255, 255, 0.5);
}

.hero-content{
    grid-column:2/3;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    z-index:2;
    height:100%;
}

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

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

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

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

.services-wrap{
    background-color:var(--primary-lighter);
}

.services{
    grid-column:2/3;
    display:flex;
}

.service{
    display:flex;
    flex-direction:column;
    gap:30px;
    padding:40px;
}

.service:nth-child(2){
    background-color:var(--primary-light);
}

.service span{
    font-size:1.5rem;
    font-weight:bold;
}

.service p{
    line-height:1.6;
    color:var(--white);
    font-size:1.1rem;
}

.service a{
    padding:10px;
    border-radius:5px;
    background-color:var(--white);
    color:var(--primary);
    align-self:start;
}   


@media(max-width:900px){

    .services{
        flex-direction:column;
    }
}

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

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

.about{
    grid-column:2/3;
    display:grid;
    grid-template-columns: 400px auto;
    gap:40px;
}

.about-image-wrap{
    position:relative;
    aspect-ratio:1/1;
}

.about-image-wrap img{
    position:absolute;
    object-fit:cover;
    width:70%;
    height:70%;
}

.about-image-wrap img:first-child{
    top:0;
    left:0;
}

.about-image-wrap img:last-child{
    right:0;
    bottom:0;
}

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

.about-content > span:first-of-type{
    font-size:1.5rem;
    color:var(--primary);
    border-bottom:1px solid var(--primary);
}

.about-content > span:last-of-type{
    font-size:2rem;
    color:var(--primary);
    font-weight:bold;
}

.about-content > p{
    line-height:1.6;
    color:var(--grey-light);
    font-size:1.1rem;
}

.about-content > a{
    padding:10px;
    border-radius:5px;
    background-color:var(--primary);
    color:var(--primary-light);
    align-self:start;
}

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

.about-detail{
    display:flex;
    gap:15px;
    align-items:center;
}

.about-detail span{
    color:var(--primary);
}

.about-detail p{
    line-height:1.6;
    font-size:1.1rem;
    color:var(--grey-light);
}

@media(max-width:900px){

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

    .about-image-wrap{
        aspect-ratio:3/2;
    }

    .about-content > span:first-of-type{
        max-width:500px;
    }

}

/* -------------------------- departments --------------------------- */

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

.departments{
    grid-column:2/3;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.departments > span{
    text-align:center;
    font-size:2rem;
    color:var(--primary);
    font-weight:bold;
}

.departments > p{
    text-align:center;
    align-self:center;
    line-height:1.6;
    font-size:1.1rem;
    color:var(--primary);
    max-width:500px;
}

.department-details{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:20px;
}

.department-detail{
    display:flex;
    flex-direction:column;
    box-shadow:2px 2px 5px;
    background-color:var(--white);
}

.department-detail-image-wrap{
    position:relative;
    aspect-ratio:3/2;
}

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

.department-detail-content{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:20px;
}

.department-detail-content span{
    font-weight:bold;
    font-size:1.5rem;
}

.department-detail-content p{
    line-height:1.6;
    color:var(--grey-light);
}

.department-detail-content a{
    padding:10px;
    border-radius:5px;
    background-color:var(--primary-light);
    color:var(--white);
    align-self:start;
}

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

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

.assets{
    grid-column:2/3;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.assets-top{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.assets-top button{
    padding:10px;
    border-radius:5px;
    background-color:var(--primary);
    color:var(--white);
}

.assets-top button[active]{
    background-color:var(--primary-light);
}

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

.asset{
    display:grid;
    grid-template-columns:auto 400px;
    gap:40px;
    grid-column:1/-1;
    grid-row:1/2;
    transition:opacity 0.5s;
    opacity:0;
}

.asset[active]{
    opacity:1;
}

.asset-image-wrap{
    position:relative;
    aspect-ratio:3/2;
}

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

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

.asset-content span{
    font-size:1.5rem;
    font-weight:bold;
    color:var(--primary);
}

.asset-content p{
    line-height:1.6;
    color:var(--grey-light);
    font-size:1.1rem;
}

@media(max-width:800px){

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

/* -------------------------- action --------------------------- */

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

.action{
    grid-column:2/3;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.action-item{
    position:relative;
}

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

.action-item-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    background-color:rgba(200, 123, 0, 0.5);
}

.action-item-content{
    display:flex;
    flex-direction:column;
    gap:20px;
    z-index:2;
    position:relative;
    padding:30px;
}

.action-item-content span{
    font-size:2rem;
    font-weight:bold;
    color:var(--white);
}

.action-item-content p{
    line-height:1.6;
    font-size:1.1rem;
    color:var(--primary-lighter-plus);
}

.action-item-content a{
    padding:10px;
    border-radius:5px;
    background-color:var(--white);
    color:var(--primary);
    align-self:start;
}

@media(max-width:800px){

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

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

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

.footer{
    grid-column:2/3;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
}

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

.footer-section:not(:first-child) > span{
    font-size:1.5rem;
    font-weight:bold;
    color:var(--white);
    padding:10px;
    border-bottom:1px solid var(--primary-light);
}

.footer-section:first-child > span{
    font-size:2.5rem;
    color:var(--primary-light);
}

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

.footer-section > p{
    color:var(--grey-lighter-plus);
    line-height:1.6;
    font-size:1.1rem;
}

.footer-section > div > *{
    color:var(--grey-lighter-plus);
}

@media(max-width:800px){

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

}

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

.testimonials-wrap{
    /* padding-block:40px; */
}

.testimonials{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:auto;
    overflow-x:hidden;
}

.testimonial{
    grid-column:1/-1;
    grid-row:1/2;
    position:relative;
    height:400px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-block:40px;
}

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

.testimonial-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.4);
    z-index:1;
}

.testimonial-content{
    display:flex;
    flex-direction:column;
    gap:30px;
    z-index:2;
    position:relative;
    align-items:center;
}

.testimonial-content span{
    font-size:1.5rem;
    color:var(--primary-light);
}

.testimonial-content p{
    line-height:1.6;
    color:var(--white);
    font-size:1.1rem;
    text-align:center;
}

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

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

.team{
    grid-column:2/3;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.team > span{
    font-size:2rem;
    font-weight:bold;
    color:var(--primary);
}

.team-control{
    display:flex;
    gap:20px;
}

.team-control button{
    color:var(--primary-light);
    font-size:1.1rem;
}

.team-list{
    display:grid;
    grid-template-columns:auto;
    overflow-x:hidden;
}

.team-item{
    grid-column:1/-1;
    grid-row:1/2;
    display:flex;
    flex-direction:column;
    position:relative;
}

.team-item-image-wrap{
    position:relative;
    aspect-ratio:3/2;
}

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

.team-item-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:20px;
    background-color:var(--primary);
}

.team-item-content :first-child{
    font-size:1.5rem;
    font-weight:bold;
}

.team-item-content :last-child{
    color:var(--primary-light);
}