/* ==========================================================
   ABOUT PAGE
   PT. ANISA SUKSES ARENINDO
   ========================================================== */

:root{

    --about-primary:#0c4b31;
    --about-secondary:#d4af37;
    --about-dark:#1f1f1f;
    --about-light:#ffffff;
    --about-bg:#f7f8f9;

}

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

.about-hero{

    position:relative;

    min-height:90vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(rgba(8,45,29,.82),rgba(8,45,29,.82)),
    url('../img/about/about-hero.jpg');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(212,175,55,.25),
    transparent 38%);

}

.hero-overlay{

    position:absolute;

    inset:0;

}

.about-hero .container{

    position:relative;

    z-index:3;

}

.hero-content{

    max-width:760px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:60px;

    background:rgba(255,255,255,.12);

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

    color:#fff;

    font-weight:600;

    margin-bottom:30px;

    backdrop-filter:blur(12px);

}

.hero-content h1{

    font-size:72px;

    line-height:1.1;

    color:#fff;

    margin-bottom:28px;

    font-weight:800;

}

.hero-content h1 span{

    color:var(--about-secondary);

}

.hero-content p{

    font-size:19px;

    line-height:2;

    color:rgba(255,255,255,.92);

    margin-bottom:40px;

}

.hero-button{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:60px;

    text-decoration:none;

    background:var(--about-secondary);

    color:#1d1d1d;

    font-weight:700;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:60px;

    text-decoration:none;

    background:#ffffff;

    color:var(--about-primary);

    font-weight:700;

    transition:.35s;

}

.btn-secondary:hover{

    transform:translateY(-5px);

}

.breadcrumb-section{

    padding:22px 0;

    background:#ffffff;

    border-bottom:1px solid #ececec;

}

.breadcrumb-section ul{

    display:flex;

    gap:15px;

    align-items:center;

    list-style:none;

}

.breadcrumb-section a{

    color:var(--about-primary);

    text-decoration:none;

    font-weight:600;

}

.breadcrumb-section li{

    color:#777;

}

.company-introduction{

    padding:110px 0;

    background:#fff;

}

.intro-header{

    text-align:center;

    margin-bottom:60px;

}

.intro-header span{

    color:var(--about-secondary);

    font-weight:700;

    letter-spacing:2px;

}

.intro-header h2{

    margin-top:18px;

    font-size:48px;

    color:var(--about-primary);

}

.intro-content{

    max-width:980px;

    margin:auto;

}

.intro-content p{

    text-align:center;

    font-size:18px;

    line-height:2.1;

    color:#555;

    margin-bottom:30px;

}

.history-section{

    padding:110px 0;

    background:var(--about-bg);

}

.history-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.history-image{

    position:relative;

}

.history-image img{

    width:100%;

    display:block;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.history-content h3{

    font-size:42px;

    color:var(--about-primary);

    margin-bottom:35px;

}

.history-content p{

    line-height:2.1;

    color:#555;

    margin-bottom:25px;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:var(--about-secondary);

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.section-title h2{

    font-size:46px;

    color:var(--about-primary);

    margin-bottom:20px;

}

.section-title p{

    max-width:780px;

    margin:auto;

    color:#666;

    line-height:2;

}

@media(max-width:992px){

    .history-grid{

        grid-template-columns:1fr;

    }

    .hero-content h1{

        font-size:50px;

    }

}

@media(max-width:768px){

    .about-hero{

        min-height:75vh;

    }

    .hero-content h1{

        font-size:38px;

    }

    .intro-header h2{

        font-size:34px;

    }

    .history-content h3{

        font-size:30px;

    }

}

/* ==========================================================
   TIMELINE
========================================================== */

.timeline-section{

    padding:120px 0;

    background:#ffffff;

    position:relative;

}

.timeline{

    position:relative;

    max-width:1000px;

    margin:80px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:160px;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(
        to bottom,
        #d4af37,
        #f4d97d,
        #d4af37
    );

    border-radius:20px;

}

.timeline-item{

    position:relative;

    display:grid;

    grid-template-columns:140px 40px 1fr;

    gap:30px;

    align-items:flex-start;

    margin-bottom:70px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-year{

    text-align:right;

    font-size:26px;

    font-weight:700;

    color:#0c4b31;

    padding-top:10px;

}

.timeline-dot{

    width:22px;

    height:22px;

    border-radius:50%;

    background:#d4af37;

    border:6px solid #ffffff;

    box-shadow:0 0 0 4px #d4af37;

    position:relative;

    z-index:2;

}

.timeline-content{

    background:#ffffff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.35s;

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

}

.timeline-content:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.timeline-content h3{

    color:#0c4b31;

    font-size:26px;

    margin-bottom:18px;

}

.timeline-content p{

    color:#666;

    line-height:2;

}

.timeline-item{

    opacity:0;

    transform:translateY(60px);

    animation:timelineFade .8s forwards;

}

.timeline-item:nth-child(1){

    animation-delay:.15s;

}

.timeline-item:nth-child(2){

    animation-delay:.30s;

}

.timeline-item:nth-child(3){

    animation-delay:.45s;

}

.timeline-item:nth-child(4){

    animation-delay:.60s;

}

.timeline-item:nth-child(5){

    animation-delay:.75s;

}

.timeline-item:nth-child(6){

    animation-delay:.90s;

}

@keyframes timelineFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.timeline-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(212,175,55,.06);

    top:-120px;

    right:-160px;

}

.timeline-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(12,75,49,.05);

    bottom:-80px;

    left:-120px;

}

@media(max-width:900px){

    .timeline::before{

        left:18px;

    }

    .timeline-item{

        grid-template-columns:40px 1fr;

        gap:25px;

    }

    .timeline-year{

        grid-column:2;

        text-align:left;

        margin-bottom:15px;

        font-size:22px;

    }

    .timeline-dot{

        grid-row:1 / span 2;

    }

}

/* ==========================================================
   VISION & MISSION
========================================================== */

.vision-mission{

    padding:120px 0;

    background:#f7f8f9;

}

.vision-card{

    display:flex;

    align-items:center;

    gap:40px;

    background:#ffffff;

    border-radius:28px;

    padding:50px;

    margin-bottom:70px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    border-left:8px solid #d4af37;

}

.vision-icon{

    width:120px;

    height:120px;

    min-width:120px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0c4b31;

}

.vision-icon i{

    font-size:52px;

    color:#d4af37;

}

.vision-content h3{

    font-size:34px;

    color:#0c4b31;

    margin-bottom:20px;

}

.vision-content p{

    color:#666;

    line-height:2;

    font-size:17px;

}

.mission-grid{

    display:grid;

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

    gap:35px;

}

.mission-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    transition:.35s;

    box-shadow:0 18px 50px rgba(0,0,0,.08);

    position:relative;

    overflow:hidden;

}

.mission-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:#d4af37;

}

.mission-card:hover{

    transform:translateY(-10px);

}

.mission-card i{

    font-size:46px;

    color:#d4af37;

    margin-bottom:25px;

}

.mission-card h4{

    color:#0c4b31;

    margin-bottom:20px;

    font-size:24px;

}

.mission-card p{

    line-height:1.9;

    color:#666;

}

/* ==========================================================
   CORE VALUE
========================================================== */

.core-value{

    padding:120px 0;

    background:#ffffff;

}

.core-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.core-card{

    background:#ffffff;

    border-radius:24px;

    padding:45px;

    text-align:center;

    transition:.35s;

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

    box-shadow:0 15px 45px rgba(0,0,0,.06);

}

.core-card:hover{

    background:#0c4b31;

    transform:translateY(-12px);

}

.core-card i{

    font-size:56px;

    color:#d4af37;

    margin-bottom:28px;

}

.core-card h4{

    color:#0c4b31;

    margin-bottom:18px;

    transition:.35s;

}

.core-card p{

    color:#666;

    line-height:1.9;

    transition:.35s;

}

.core-card:hover h4,

.core-card:hover p{

    color:#ffffff;

}

/* ==========================================================
   COMMITMENT
========================================================== */

.commitment{

    padding:120px 0;

    background:

    linear-gradient(rgba(8,45,29,.95),
    rgba(8,45,29,.95)),
    url('../img/about/commitment.jpg');

    background-size:cover;

    background-position:center;

}

.commitment-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.commitment-box span{

    display:inline-block;

    color:#d4af37;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:18px;

}

.commitment-box h2{

    color:#ffffff;

    font-size:54px;

    margin-bottom:30px;

}

.commitment-box p{

    color:rgba(255,255,255,.90);

    line-height:2.1;

    font-size:18px;

}

@media(max-width:992px){

    .vision-card{

        flex-direction:column;

        text-align:center;

    }

    .mission-grid{

        grid-template-columns:1fr;

    }

    .core-grid{

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

    }

}

@media(max-width:768px){

    .core-grid{

        grid-template-columns:1fr;

    }

    .vision-content h3{

        font-size:28px;

    }

    .commitment-box h2{

        font-size:36px;

    }

}

/* ==========================================================
   OUR JOURNEY
========================================================== */

.our-journey{

    padding:120px 0;

    background:#ffffff;

}

.journey-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.journey-card{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 18px 55px rgba(0,0,0,.08);

    transition:.35s;

}

.journey-card:hover{

    transform:translateY(-12px);

}

.journey-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    display:block;

}

.journey-content{

    padding:35px;

}

.journey-content h3{

    color:#0c4b31;

    margin-bottom:18px;

    font-size:28px;

}

.journey-content p{

    color:#666;

    line-height:1.9;

}

/* ==========================================================
   CLOSING
========================================================== */

.about-closing{

    padding:140px 0;

    background:

    linear-gradient(rgba(12,75,49,.92),
    rgba(12,75,49,.92)),
    url('../img/about/about-closing.jpg');

    background-size:cover;

    background-position:center;

    position:relative;

    overflow:hidden;

}

.about-closing::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    top:-180px;

    right:-180px;

}

.closing-box{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.closing-box span{

    color:#d4af37;

    letter-spacing:3px;

    font-weight:700;

}

.closing-box h2{

    color:#ffffff;

    font-size:58px;

    line-height:1.2;

    margin:28px 0;

}

.closing-box p{

    color:rgba(255,255,255,.92);

    line-height:2.1;

    margin-bottom:45px;

    font-size:18px;

}

.closing-button{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ==========================================================
   SCROLL EFFECT
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:.8s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:.8s;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:.8s;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* ==========================================================
   PREMIUM EFFECT
========================================================== */

.history-image img,

.journey-card,

.core-card,

.vision-card,

.mission-card,

.timeline-content{

    transition:.35s;

}

.history-image img:hover{

    transform:scale(1.03);

}

.timeline-content:hover{

    border-color:#d4af37;

}

.mission-card:hover i,

.core-card:hover i{

    transform:scale(1.12);

}

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

@media(max-width:992px){

    .journey-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .about-closing{

        padding:90px 0;

    }

    .closing-box h2{

        font-size:38px;

    }

    .journey-card img{

        height:220px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-button{

        justify-content:center;

    }

}

@media(max-width:576px){

    .section-title h2{

        font-size:32px;

    }

    .timeline-content{

        padding:25px;

    }

    .mission-card{

        padding:30px;

    }

    .core-card{

        padding:30px;

    }

    .journey-content{

        padding:28px;

    }

    .closing-box h2{

        font-size:30px;

    }

}