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

.about-hero{

    padding:180px 0 120px;

    background:#070707;

    overflow:hidden;
}

.about-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.about-title{

    font-size:110px;

    line-height:.92;

    margin:25px 0 30px;
}

.about-description{

    font-size:20px;

    color:#bdbdbd;

    line-height:1.8;

    max-width:600px;

    margin-bottom:45px;
}

.about-hero-stats{

    display:grid;

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

    gap:20px;

    max-width:500px;
}

.about-stat{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

    border:1px solid rgba(212,168,95,.12);

    border-radius:22px;

    padding:28px;

    transition:all .35s ease;
}

.about-stat::before{

    content:'';

    position:absolute;

    top:-80px;
    right:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,168,95,.12),
        transparent 70%
    );

    opacity:0;

    transition:.35s ease;
}

.about-stat:hover{

    transform:translateY(-6px);

    border-color:rgba(212,168,95,.35);

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);
}

.about-stat:hover::before{

    opacity:1;
}

.about-stat strong{

    display:block;

    font-family:'Bebas Neue';

    font-size:58px;

    color:var(--primary);

    line-height:1;

    margin-bottom:10px;

    letter-spacing:1px;
}

.about-stat span{

    color:#bdbdbd;
}

.about-hero-image{

    position:relative;
}

.about-hero-image img{

    width:100%;

    border-radius:30px;

    display:block;
}

.about-hero-image::before{

    content:'';

    position:absolute;

    inset:-20px;

    background:
    radial-gradient(
        circle,
        rgba(212,168,95,.15),
        transparent 70%
    );

    z-index:-1;
}

/* ====================================
   ABOUT STORY
==================================== */

.about-story{

    padding:120px 0;

    background:#090909;
}

.about-story-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    align-items:start;
}

.about-story-content p{

    color:#bdbdbd;

    font-size:18px;

    line-height:1.9;

    margin-bottom:24px;
}

.story-quote{

    background:
    linear-gradient(
        135deg,
        rgba(212,168,95,.12),
        rgba(212,168,95,.04)
    );

    border:1px solid rgba(212,168,95,.15);

    border-radius:24px;

    padding:40px;
}

.story-quote h3{

    margin-bottom:20px;

    color:var(--primary);
}

.story-quote p{

    color:#d5d5d5;

    line-height:1.9;
}

@media(max-width:991px){

    .about-story-grid{

        grid-template-columns:1fr;
    }

}

/* ====================================
   ABOUT EXPERTISE
==================================== */

.about-expertise{

    padding:120px 0;

    background:#070707;
}

.expertise-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,168,95,.25);
}

.expertise-card h3{

    font-size:22px;

    margin-bottom:15px;
}

.expertise-card p{

    color:#bdbdbd;

    line-height:1.8;
}

@media(max-width:1200px){

    .expertise-grid{

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

}

@media(max-width:767px){

    .expertise-grid{

        grid-template-columns:1fr;
    }

}

/* ====================================
   CERTIFICATES
==================================== */

.about-certificates{

    padding:120px 0;

    background:#090909;
}

.certificate-stats{

    display:grid;

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

    gap:25px;

    margin:60px 0;
}

.certificate-stat{

    background:#111111;

    border-radius:24px;

    padding:35px;

    text-align:center;

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

.certificate-stat strong{

    display:block;

    font-family:'Bebas Neue';

    font-size:60px;

    color:var(--primary);

    line-height:1;

    margin-bottom:10px;
}

.certificate-stat span{

    color:#bdbdbd;
}

.certificates-grid{

    display:grid;

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

    gap:20px;
}

.certificate-card{

    background:#111111;

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

    border-radius:24px;

    padding:35px 25px;

    text-align:center;

    transition:.35s ease;

    overflow:hidden;

    position:relative;
}

.certificate-card img{

    width:90px;

    height:90px;

    object-fit:contain;

    margin:0 auto 25px;

    display:block;
}

.certificate-card h3{

    font-size:20px;

    margin-bottom:12px;
}

.certificate-card p{

    color:#bdbdbd;

    line-height:1.7;

    font-size:14px;
}

.certificate-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,168,95,.30);

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);
}

.certificate-card:hover{

    border-color:rgba(212,168,95,.25);

    transform:translateY(-5px);
}

@media(max-width:991px){

    .certificate-stats{

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

    .certificates-grid{

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

}

@media(max-width:767px){

    .certificates-grid{

        grid-template-columns:1fr;
    }

}

/* ====================================
   PHILOSOPHY
==================================== */

.about-philosophy{

    padding:120px 0;

    background:#070707;
}

.philosophy-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.philosophy-card{

    background:#111111;

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

    border-radius:24px;

    padding:35px;

    transition:.3s ease;

    text-align:center;
}

.philosophy-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,168,95,.25);
}

.philosophy-icon{

    display:flex;

    justify-content:center;

    margin-bottom:24px;
}

.philosophy-card h3{

    margin-bottom:15px;
}

.philosophy-card p{

    color:#bdbdbd;

    line-height:1.8;
}

@media(max-width:991px){

    .philosophy-grid{

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

}

@media(max-width:767px){

    .philosophy-grid{

        grid-template-columns:1fr;
    }

}

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

@media(max-width:991px){

    .about-hero{

        padding:140px 0 80px;
    }

    .about-hero-grid{

        grid-template-columns:1fr;

        gap:50px;
    }

    .about-hero-image{

        order:-1;
    }

    .about-title{

        font-size:72px;
    }

    .about-description{

        font-size:17px;
    }

}

@media(max-width:767px){

    .about-title{

        font-size:58px;
    }

    .about-hero-stats{

        grid-template-columns:1fr 1fr;
    }

    .about-stat{

        padding:20px;
    }

    .about-stat strong{

        font-size:42px;
    }

}

/* ====================================
   ABOUT STUDIO
==================================== */

.about-studio{

    padding:120px 0;

    background:#090909;
}

.studio-hero-image{

    margin-top:60px;

    overflow:hidden;

    border-radius:32px;

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

.studio-hero-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    display:block;

    transition:.5s ease;
}

.studio-hero-image:hover img{

    transform:scale(1.03);
}

.studio-gallery{

    display:grid;

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

    gap:25px;

    margin-top:25px;
}

.studio-item{

    overflow:hidden;

    border-radius:28px;

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

    background:#111111;

    aspect-ratio:4/3;
}

.studio-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s ease;
}

.studio-item:hover img{

    transform:scale(1.05);
}

@media(max-width:991px){

    .studio-hero-image img{

        height:500px;
    }

}

@media(max-width:767px){

    .studio-gallery{

        grid-template-columns:1fr;
    }

    .studio-hero-image img{

        height:auto;
    }

}

/* ====================================
   ABOUT STATS
==================================== */

.about-stats{

    padding:120px 0;

    background:#070707;
}

.about-stats-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.about-stat-card{

    text-align:center;

    background:#111111;

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

    border-radius:24px;

    padding:45px 25px;

    transition:.3s ease;
}

.about-stat-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,168,95,.25);
}

.about-stat-number{

    display:block;

    font-family:'Bebas Neue';

    font-size:82px;

    line-height:1;

    color:var(--primary);

    margin-bottom:12px;
}

.about-stat-label{

    color:#bdbdbd;

    font-size:16px;
}

@media(max-width:991px){

    .about-stats-grid{

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

}

@media(max-width:767px){

    .about-stats-grid{

        grid-template-columns:1fr;
    }

}

/* ====================================
   ABOUT CTA
==================================== */

.about-cta{

    padding:120px 0 140px;

    background:#090909;
}

.about-cta-box{

    position:relative;

    overflow:hidden;

    padding:90px 60px;

    text-align:center;

    border-radius:36px;

    background:#0f0f0f;

    border:1px solid rgba(212,168,95,.15);
}

.about-cta-box::after{

    content:'';

    position:absolute;

    inset:0;

    background-image:url('../img/about/cem-oncu-about.webp');

    background-size:cover;

    background-position:center top;

    opacity:.08;

    z-index:0;
}

.about-cta-box .section-tag,
.about-cta-box h2,
.about-cta-box p,
.about-cta-buttons{

    position:relative;

    z-index:2;
}

.about-cta-box::before{

    content:'';

    position:absolute;

    top:-120px;
    right:-120px;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,168,95,.15),
        transparent 70%
    );
}

.about-cta-box h2{

    font-size:64px;

    line-height:1.05;

    margin:20px auto 25px;

    max-width:800px;

    text-shadow:
0 0 25px rgba(212,168,95,.12);

}

.about-cta-box p{

    max-width:700px;

    margin:0 auto 40px;

    color:#d0d0d0;

    font-size:18px;

    line-height:1.9;
}

.about-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

@media(max-width:767px){

    .about-cta-box{

        padding:60px 30px;
    }

    .about-cta-box h2{

        font-size:42px;
    }

    .about-cta-buttons{

        flex-direction:column;
    }

}

.philosophy-icon svg,
.philosophy-icon img{

    color:var(--primary);

    filter:
        brightness(0)
        saturate(100%)
        invert(73%)
        sepia(35%)
        saturate(624%)
        hue-rotate(356deg)
        brightness(95%)
        contrast(89%);
}