/*=========================================
            ABOUT SECTION
=========================================*/

.about{

    position:relative;

    background:#0B0B0B;

    overflow:hidden;

}

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

.about-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:100px;

    align-items:center;

}

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

.about-grid h2{

    position:relative;

    max-width:700px;

    font-family:'Anton',sans-serif;

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:.95;

    letter-spacing:2px;

    text-transform:uppercase;

}

.about-grid h2::before{

    content:"ABOUT";

    position:absolute;

    top:-65px;

    left:0;

    font-size:.8rem;

    font-family:'Inter',sans-serif;

    font-weight:700;

    letter-spacing:4px;

    color:var(--red);

}

.about-grid h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-28px;

    width:120px;

    height:5px;

    background:var(--red);

}

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

.about-grid p{

    font-size:1.15rem;

    line-height:2;

    color:#db7f7f;

    margin-bottom:35px;

}

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

.about-info{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.info-box{

    padding:25px;

    border:1px solid #f5f2ed;

    transition:.4s ease;

}

.info-box h4{

    font-family:'Anton',sans-serif;

    font-size:1.5rem;

    margin-bottom:10px;

    letter-spacing:1px;

}

.info-box p{

    margin:0;

    font-size:.95rem;

    line-height:1.8;

    color:#863e3e;

}

.info-box:hover{

    transform:translateY(-8px);

    border-color:var(--red);

    box-shadow:0 25px 50px #f5f2ed;

}

/*=========================================
        SIGNATURE
=========================================*/

.signature{

    margin-top:50px;

}

.signature h3{

    font-family:'Anton',sans-serif;

    font-size:2rem;

    letter-spacing:2px;

}

.signature span{

    display:block;

    margin-top:10px;

    color:var(--gray);

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.85rem;

}

/*=========================================
        BACKGROUND TEXT
=========================================*/

.about::before{

    content:"CREATIVE";

    position:absolute;

    right:-120px;

    top:80px;

    font-family:'Anton',sans-serif;

    font-size:14rem;

    color: #41403f;;

    pointer-events:none;

    user-select:none;

}

/*=========================================
        DECORATIVE SHAPE
=========================================*/

.about::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(217,23,23,.03);

    left:-220px;

    bottom:-220px;

}

/*=========================================
        EXPERIENCE BADGE
=========================================*/

.experience-badge{

    width:180px;

    height:180px;

    border-radius:50%;

    background:#050505;

    color:#f5f2ed;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-top:60px;

}

.experience-badge h2{

    font-size:3.2rem;

    line-height:1;

}

.experience-badge p{

    color:#f5f2ed;

    text-align:center;

    font-size:.8rem;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-top:10px;

}

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

@media(max-width:1100px){

    .about-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .about-grid h2{

        max-width:100%;

    }

}

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

@media(max-width:768px){

    .about{

        padding:90px 0;

    }

    .about-grid{

        gap:50px;

    }

    .about-grid h2{

        font-size:3rem;

    }

    .about-grid p{

        font-size:1rem;

    }

    .about-info{

        grid-template-columns:1fr;

    }

    .experience-badge{

        width:150px;

        height:150px;

    }

    .about::before{

        display:none;

    }

}

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

@media(max-width:480px){

    .about-grid h2{

        font-size:2.4rem;

    }

    .info-box{

        padding:20px;

    }

    .signature h3{

        font-size:1.5rem;

    }

}