/*
==================================================
ARENASA
CERTIFICATION SECTION
VERSION 1.0
==================================================
*/

.certification-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(26,92,60,.18) 0%,
            transparent 45%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(212,175,55,.05) 0%,
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #10261A 0%,
            #0A1712 30%,
            #050A08 70%,
            #10261A 100%
        );

}

.certification-section::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at left center,

            rgba(35,120,78,.12),

            transparent 40%

        ),

        radial-gradient(

            circle at right top,

            rgba(212,175,55,.08),

            transparent 30%

        );

    opacity:.9;

}

.certification-section::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.035;

    pointer-events:none;

    background-image:

        radial-gradient(#ffffff 1px, transparent 1px);

    background-size:12px 12px;

}

.certification-section .container{

    position:relative;

    z-index:2;

    max-width:1400px;

}

/*==================================================
HEADER
==================================================*/

.certification-header{

    text-align:center;

    margin-bottom:70px;

}

.certification-header .section-label{

    display:inline-block;

    margin-bottom:18px;

    color:#D4AF37;

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}

.certification-header .section-title{

    margin-bottom:20px;

    color:#FFFFFF;

    font-size:56px;

    line-height:1.15;

    font-family:'Cormorant Garamond',serif;

}

.certification-header .section-title span{

    color:#D4AF37;

}

.certification-header .section-description{

    width:850px;

    max-width:100%;

    margin:auto;

    color:#D8D8D8;

    font-size:18px;

    line-height:1.9;

}

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

.certification-grid{

    display:grid;

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

    gap:35px;

    align-items:stretch;

}

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

.certification-card{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:230px;

    padding:40px;

    border-radius:24px;

    background:rgba(8,20,15,.75);

    border:1px solid rgba(212,175,55,.18);

    backdrop-filter:blur(10px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    overflow:hidden;

}

.certification-card:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

    box-shadow:
        0 20px 50px rgba(0,0,0,.40),
        0 0 30px rgba(212,175,55,.15);

}

/*==================================================
LOGO
==================================================*/

.certification-card img{

    max-width:180px;

    max-height:95px;

    width:auto;

    height:auto;

    object-fit:contain;

    transition:
        transform .35s ease,
        filter .35s ease;

    user-select:none;

    -webkit-user-drag:none;

}

.certification-card:hover img{

    transform:scale(1.06);

    filter:

        drop-shadow(0 0 12px rgba(212,175,55,.30));

}

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

.certification-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(212,175,55,.10),

            transparent 65%

        );

    opacity:0;

    transition:opacity .35s ease;

}

.certification-card:hover::before{

    opacity:1;

}

/*==================================================
BOTTOM GOLD LINE
==================================================*/

.certification-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:#D4AF37;

    transform:translateX(-50%);

    transition:width .35s ease;

}

.certification-card:hover::after{

    width:100%;

}

/*==================================================
ANIMATION
==================================================*/

.certification-card{

    animation:certificateFade .8s ease both;

}

@keyframes certificateFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
SPECIAL SIZE
==================================================*/

.certification-card.iso img{

    max-width:190px;

}

.certification-card.haccp img{

    max-width:185px;

}

.certification-card.halal img{

    max-width:135px;

}

.certification-card.bpom img{

    max-width:155px;

}

.certification-card.nib img{

    max-width:175px;

}

.certification-card.organik img{

    max-width:165px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1400px){

    .certification-section{

        padding:110px 0;

    }

    .certification-header .section-title{

        font-size:52px;

    }

    .certification-grid{

        gap:30px;

    }

}

@media (max-width:1200px){

    .certification-header .section-title{

        font-size:46px;

    }

    .certification-header .section-description{

        width:760px;

    }

    .certification-card{

        min-height:210px;

        padding:35px;

    }

    .certification-card img{

        max-width:160px;

        max-height:85px;

    }

}

@media (max-width:992px){

    .certification-section{

        padding:90px 0;

    }

    .certification-grid{

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

        gap:25px;

    }

    .certification-header{

        margin-bottom:55px;

    }

    .certification-header .section-title{

        font-size:40px;

    }

    .certification-header .section-description{

        width:100%;

        font-size:17px;

    }

    .certification-card{

        min-height:190px;

    }

}

@media (max-width:768px){

    .certification-section{

        padding:75px 0;

    }

    .certification-header{

        margin-bottom:45px;

    }

    .certification-header .section-label{

        font-size:12px;

        letter-spacing:3px;

    }

    .certification-header .section-title{

        font-size:34px;

    }

    .certification-header .section-description{

        font-size:16px;

        line-height:1.8;

    }

    .certification-grid{

        gap:20px;

    }

    .certification-card{

        min-height:170px;

        padding:25px;

        border-radius:20px;

    }

    .certification-card img{

        max-width:145px;

        max-height:75px;

    }

}

@media (max-width:576px){

    .certification-section{

        padding:65px 0;

    }

    .certification-grid{

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

        gap:16px;

    }

    .certification-header .section-title{

        font-size:30px;

    }

    .certification-header .section-description{

        font-size:15px;

    }

    .certification-card{

        min-height:140px;

        padding:18px;

        border-radius:18px;

    }

    .certification-card img{

        max-width:120px;

        max-height:60px;

    }

}

@media (max-width:420px){

    .certification-grid{

        grid-template-columns:1fr;

    }

    .certification-card{

        min-height:130px;

    }

}

@media (prefers-reduced-motion:reduce){

    .certification-card,

    .certification-card *{

        animation:none !important;

        transition:none !important;

    }

}