*{
    box-sizing:border-box;
}

html,
body{

    overflow-x:hidden;

}

/*====================================
ABOUT HERO
====================================*/

.about-hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.about-hero-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

.about-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.42);

}

.about-hero .container{

    position:relative;

    height:100%;

    z-index:2;

}

.about-hero-content{

    position:absolute;

    left:0;
    right:0;
    bottom:55px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

}

.about-hero-content h1{

    font-family:"Monument", sans-serif;

    font-size:48px;

    font-weight:400;

    color:#fff;

    letter-spacing:1px;

}

.about-scroll{

    display:flex;

    justify-content:center;

    align-items:center;

    animation:aboutBounce 2s infinite;

}

.about-scroll svg{

    width:56px;

    height:56px;

    transition:.3s;

}

.about-scroll:hover{

    transform:translateY(6px);

}

@keyframes aboutBounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(8px);

    }

    60%{

        transform:translateY(4px);

    }

}

/*====================================
TABLET
====================================*/

@media(max-width:991px){

.about-hero-content h1{

    font-size:34px;

}

.about-scroll svg{

    width:46px;
    height:46px;

}

}

/*====================================
MOBILE
====================================*/

@media(max-width:768px){

.about-hero{

    height:100vh;

    min-height:650px;

}

.about-hero-content{

    bottom:120px;

}

.about-hero-content h1{

    font-size:22px;

}

.about-scroll svg{

    width:36px;

    height:36px;

}

}






/*======================================
OUR PROJECTS
======================================*/

.our-projects{

    padding:90px 0;

    background:#fff;

}

/*==========================
FILTER
==========================*/

.projects-filter{

    display:flex;

    gap:35px;

    align-items:center;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.filter-btn{

    background:none;

    border:none;

    cursor:pointer;

    font-family:"DM Sans",sans-serif;

    font-size:16px;

    color:#7D7D7D;

    transition:.3s;

    padding:0;

}

.filter-btn.active{

    color:#81C341;

    font-weight:600;

}

.filter-btn:hover{

    color:#81C341;

}

/*==========================
GRID
==========================*/

.projects-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

/*==========================
CARD
==========================*/

.project-card{

    position:relative;

    height:620px;

    border-radius:14px;

    overflow:hidden;

    text-decoration:none;

    display:block;

}

.project-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.project-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.82),

        rgba(0,0,0,.15)

    );

}

/*==========================
CONTENT
==========================*/

.project-content{

    position:absolute;

    left:28px;

    right:28px;

    bottom:28px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    z-index:2;

}

.project-content h3{

    font-family:"Monument", sans-serif;

    font-size:28px;

    color:#fff;

    margin-bottom:12px;
    font-weight: 400;

}

.project-content p{

    font-family:"DM Sans";

    font-size:15px;

    color:#fff;

    line-height:1.7;

    max-width:80%;

}

.project-arrow{

    width:54px;

    height:54px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.35);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#81C341;

    font-size:30px;

    transition:.35s;

    flex-shrink:0;

}

/*==========================
HOVER
==========================*/

.project-card:hover img{

    transform:scale(1.08);

}

.project-card:hover .project-arrow{

    background:#81C341;

    color:#fff;

    border-color:#81C341;

}

/*==========================
TABLET
==========================*/

@media(max-width:991px){

.projects-grid{

    gap:18px;

}

.project-card{

    height:470px;

}

.project-content h3{

    font-size:22px;

}

.project-content p{

    font-size:14px;

}

}

/*==========================
MOBILE
==========================*/

@media(max-width:768px){

.our-projects{

    padding:60px 0;

}

.projects-filter{

    gap:16px;

    margin-bottom:30px;

    overflow-x:auto;

    flex-wrap:nowrap;

    padding-bottom:6px;

}

.projects-filter::-webkit-scrollbar{

    display:none;

}

.filter-btn{

    white-space:nowrap;

    font-size:14px;

}

.projects-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.project-card{

    height:420px;

}

.project-content{

    left:20px;

    right:20px;

    bottom:20px;

}

.project-content h3{

    font-size:22px;

}

.project-content p{

    max-width:90%;

    font-size:13px;

}

.project-arrow{

    width:46px;

    height:46px;

    font-size:24px;

}

}