/*!
 * ==========================================================
 * NemuTrip About Section
 * About.css FINAL V10
 * BAB 1 — Variables + Global Foundation
 * ==========================================================
 */


/* ==========================================================
   CSS Variables
   ========================================================== */

:root{

    /* Brand */

    --about-primary:#0d6efd;
    --about-primary-dark:#0a58ca;
    --about-secondary:#20c997;

    /* Text */

    --about-heading:#1e293b;
    --about-text:#64748b;
    --about-muted:#94a3b8;

    /* Background */

    --about-background:#f8fbff;
    --about-white:#ffffff;

    /* Border */

    --about-border:#e2e8f0;

    /* Radius */

    --about-radius-sm:14px;
    --about-radius:24px;
    --about-radius-lg:32px;

    /* Shadow */

    --about-shadow-sm:
        0 8px 20px rgba(15,23,42,.06);

    --about-shadow:
        0 18px 45px rgba(15,23,42,.10);

    --about-shadow-lg:
        0 30px 70px rgba(15,23,42,.16);

    /* Transition */

    --about-transition:.35s ease;

}


/* ==========================================================
   Section
   ========================================================== */

.about-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:var(--about-background);

}


/* ==========================================================
   Container
   ========================================================== */

.about-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   Universal Reset
   ========================================================== */

.about-section *,
.about-section *::before,
.about-section *::after{

    box-sizing:border-box;

}


/* ==========================================================
   Image
   ========================================================== */

.about-section img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

}


/* ==========================================================
   Link
   ========================================================== */

.about-section a{

    text-decoration:none;

    transition:all var(--about-transition);

}


/* ==========================================================
   List
   ========================================================== */

.about-section ul,
.about-section ol{

    margin:0;

    padding:0;

    list-style:none;

}


/* ==========================================================
   Typography
   ========================================================== */

.about-section h1,
.about-section h2,
.about-section h3,
.about-section h4,
.about-section h5,
.about-section h6,
.about-section p{

    margin:0;

}

.about-section h1,
.about-section h2,
.about-section h3,
.about-section h4,
.about-section h5,
.about-section h6{

    color:var(--about-heading);

    font-weight:700;

    line-height:1.25;

}

.about-section p{

    color:var(--about-text);

    line-height:1.8;

}


/* ==========================================================
   Bootstrap Row Fine Tune
   ========================================================== */

.about-section .row{

    --bs-gutter-x:3rem;

    --bs-gutter-y:3rem;

}


/* ==========================================================
   Smooth Rendering
   ========================================================== */

.about-section{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   BAB 2
   Section Heading + Enterprise Layout Foundation
   ========================================================== */


/* ==========================================================
   Section Heading
   ========================================================== */

.about-heading{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

}


/* ==========================================================
   Badge
   ========================================================== */

.section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    margin-bottom:22px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid rgba(13,110,253,.12);

    color:var(--about-primary);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

    box-shadow:var(--about-shadow-sm);

}


/* ==========================================================
   Section Title
   ========================================================== */

.section-title{

    margin-bottom:24px;

    color:var(--about-heading);

    font-size:clamp(2.4rem,4vw,3.6rem);

    font-weight:800;

    line-height:1.15;

    letter-spacing:-.03em;

}

.section-title span{

    display:block;

    margin-top:6px;

    color:var(--about-primary);

}


/* ==========================================================
   Section Description
   ========================================================== */

.section-description{

    max-width:680px;

    margin:0 auto;

    color:var(--about-text);

    font-size:1.05rem;

    line-height:1.9;

}


/* ==========================================================
   Enterprise Layout
   ========================================================== */

.about-section .row{

    align-items:center;

}


/* ==========================================================
   Left Column
   ========================================================== */

.about-section .col-xl-6:first-child{

    display:flex;

    justify-content:flex-start;

}


/* ==========================================================
   Right Column
   ========================================================== */

.about-section .col-xl-6:last-child{

    display:flex;

    justify-content:flex-end;

}


/* ==========================================================
   Content Wrapper
   ========================================================== */

.about-content{

    width:100%;

    max-width:560px;

}

/* ==========================================================
   BAB 3
   Enterprise Hero Image Foundation
   ========================================================== */


/* ==========================================================
   Hero Wrapper
   ========================================================== */

.about-media{

    position:relative;

    width:100%;

    max-width:560px;

    margin:0 auto;

    padding-bottom:90px;

}


/* ==========================================================
   Hero Image Container
   ========================================================== */

.about-image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:#ffffff;

    box-shadow:var(--about-shadow-lg);

}


/* ==========================================================
   Hero Image
   ========================================================== */

.about-image img{

    display:block;

    width:100%;

    height:680px;

    object-fit:cover;

}


/* ==========================================================
   Hero Gradient Overlay
   ========================================================== */

.about-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,.10) 100%
    );

    z-index:1;

    pointer-events:none;

}


/* ==========================================================
   Hero Border
   ========================================================== */

.about-image::after{

    content:"";

    position:absolute;

    inset:0;

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

    border-radius:inherit;

    pointer-events:none;

}


/* ==========================================================
   Decorative Shape Base
   ========================================================== */

.about-shape{

    position:absolute;

    pointer-events:none;

    z-index:0;

}


/* ==========================================================
   Shape 1
   ========================================================== */

.about-shape-1{

    top:-26px;

    right:-26px;

    width:120px;

    height:120px;

    border-radius:28px;

    border:2px solid rgba(13,110,253,.10);

    transform:rotate(18deg);

}


/* ==========================================================
   Shape 2
   ========================================================== */

.about-shape-2{

    left:-42px;

    top:48%;

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(13,110,253,.08);

}


/* ==========================================================
   Shape 3
   ========================================================== */

.about-shape-3{

    right:20px;

    bottom:18px;

    width:110px;

    height:110px;

    border-radius:50%;

    border:2px dashed rgba(32,201,151,.20);

}


/* ==========================================================
   Hero Hover
   ========================================================== */

.about-image{

    transition:
        transform var(--about-transition),
        box-shadow var(--about-transition);

}

.about-media:hover .about-image{

    transform:translateY(-6px);

    box-shadow:
        0 40px 90px rgba(15,23,42,.18);

}

/* ==========================================================
   BAB 4
   Floating Card
   Experience Card
   Statistics Overlay
   ========================================================== */


/* ==========================================================
   Floating Card
   ========================================================== */

.about-floating-card{

    position:absolute;

    top:42px;

    right:-36px;

    width:255px;

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:20px;

    background:var(--about-white);

    border-radius:22px;

    box-shadow:var(--about-shadow-lg);

    z-index:30;

}


/* ==========================================================
   Floating Icon
   ========================================================== */

.floating-icon{

    width:56px;

    height:56px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--about-primary),
        var(--about-secondary)
    );

    color:#fff;

    font-size:22px;

}


.floating-content{

    flex:1;

}


.floating-label{

    display:block;

    margin-bottom:6px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.12em;

    color:var(--about-primary);

    text-transform:uppercase;

}


.floating-title{

    margin-bottom:8px;

    font-size:1rem;

    font-weight:700;

    color:var(--about-heading);

}


.floating-description{

    font-size:.86rem;

    line-height:1.6;

    color:var(--about-text);

}


/* ==========================================================
   Experience Card
   ========================================================== */

.about-experience-card{

    position:absolute;

    left:-46px;

    bottom:118px;

    width:118px;

    height:118px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    box-shadow:var(--about-shadow-lg);

    z-index:35;

}


.experience-number{

    display:block;

    font-size:2rem;

    font-weight:800;

    line-height:1;

    color:var(--about-primary);

}


.experience-text{

    margin-top:8px;

    max-width:70px;

    text-align:center;

    font-size:.72rem;

    line-height:1.4;

    font-weight:600;

    color:var(--about-text);

}


/* ==========================================================
   Statistics Overlay
   ========================================================== */

.about-stats-overlay{

    position:absolute;

    left:50%;

    bottom:-54px;

    transform:translateX(-50%);

    width:92%;

    display:grid;

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

    gap:16px;

    z-index:30;

}


/* ==========================================================
   Statistics Card
   ========================================================== */

.about-stat-card{

    background:#ffffff;

    border-radius:18px;

    padding:22px 16px;

    text-align:center;

    box-shadow:var(--about-shadow);

    transition:all var(--about-transition);

}


.stat-number{

    margin-bottom:6px;

    font-size:1.6rem;

    font-weight:800;

    color:var(--about-heading);

}


.stat-label{

    font-size:.82rem;

    line-height:1.5;

    color:var(--about-text);

}


/* ==========================================================
   Hover
   ========================================================== */

.about-floating-card,
.about-experience-card,
.about-stat-card{

    transition:all var(--about-transition);

}


.about-floating-card:hover{

    transform:translateY(-6px);

}


.about-experience-card:hover{

    transform:scale(1.05);

}


.about-stat-card:hover{

    transform:translateY(-6px);

}

/* ==========================================================
   BAB 5
   Enterprise Content
   ========================================================== */


/* ==========================================================
   Content Wrapper
   ========================================================== */

.about-content{

    width:100%;

    max-width:580px;

    margin-left:auto;

}


/* ==========================================================
   Label
   ========================================================== */

.about-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:var(--about-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

}

.about-label::before{

    content:"";

    width:48px;

    height:2px;

    border-radius:999px;

    background:var(--about-primary);

}


/* ==========================================================
   About Title
   ========================================================== */

.about-title{

    margin-bottom:24px;

    color:var(--about-heading);

    font-size:clamp(2rem,3vw,2.9rem);

    font-weight:800;

    line-height:1.18;

    letter-spacing:-.02em;

}

.about-title span{

    display:block;

    margin-top:6px;

    color:var(--about-primary);

}


/* ==========================================================
   Description
   ========================================================== */

.about-description{

    margin-bottom:18px;

    color:var(--about-text);

    font-size:1rem;

    line-height:1.9;

}

.about-description:last-of-type{

    margin-bottom:0;

}


/* ==========================================================
   Features
   ========================================================== */

.about-features{

    margin-top:42px;

}

.about-features .row{

    --bs-gutter-x:22px;

    --bs-gutter-y:22px;

}


/* ==========================================================
   Feature Card
   ========================================================== */

.about-feature-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    height:100%;

    padding:24px;

    border:1px solid var(--about-border);

    border-radius:22px;

    background:var(--about-white);

    box-shadow:var(--about-shadow-sm);

    transition:all var(--about-transition);

}


/* ==========================================================
   Feature Icon
   ========================================================== */

.about-feature-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--about-primary),
        var(--about-secondary)
    );

    color:#ffffff;

    font-size:1.4rem;

}


/* ==========================================================
   Feature Content
   ========================================================== */

.about-feature-content{

    flex:1;

}

.about-feature-title{

    margin-bottom:8px;

    color:var(--about-heading);

    font-size:1.05rem;

    font-weight:700;

}

.about-feature-description{

    color:var(--about-text);

    font-size:.92rem;

    line-height:1.7;

}


/* ==========================================================
   Hover
   ========================================================== */

.about-feature-card:hover{

    transform:translateY(-8px);

    border-color:rgba(13,110,253,.18);

    box-shadow:var(--about-shadow);

}

.about-feature-card:hover .about-feature-icon{

    transform:rotate(-8deg) scale(1.06);

}

.about-feature-icon{

    transition:transform var(--about-transition);

}

/* ==========================================================
   BAB 6
   Premium CTA + Trust Information
   ========================================================== */


/* ==========================================================
   CTA Group
   ========================================================== */

.about-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:48px;

}


/* ==========================================================
   Primary Button
   ========================================================== */

.btn-about-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:220px;

    height:58px;

    padding:0 34px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--about-primary),
        var(--about-secondary)
    );

    color:#ffffff;

    font-size:.95rem;

    font-weight:700;

    box-shadow:0 16px 35px rgba(13,110,253,.25);

    transition:all var(--about-transition);

}

.btn-about-primary:hover{

    color:#ffffff;

    transform:translateY(-4px);

    box-shadow:0 22px 45px rgba(13,110,253,.30);

}

.btn-about-primary i{

    font-size:1rem;

}


/* ==========================================================
   Secondary Button
   ========================================================== */

.btn-about-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:220px;

    height:58px;

    padding:0 34px;

    border:2px solid var(--about-border);

    border-radius:999px;

    background:#ffffff;

    color:var(--about-heading);

    font-size:.95rem;

    font-weight:700;

    box-shadow:var(--about-shadow-sm);

    transition:all var(--about-transition);

}

.btn-about-secondary:hover{

    background:var(--about-primary);

    border-color:var(--about-primary);

    color:#ffffff;

    transform:translateY(-4px);

}

.btn-about-secondary i{

    font-size:1rem;

}


/* ==========================================================
   Trust Section
   ========================================================== */

.about-trust{

    display:grid;

    gap:18px;

    margin-top:48px;

    padding-top:32px;

    border-top:1px solid var(--about-border);

}


/* ==========================================================
   Trust Item
   ========================================================== */

.trust-item{

    display:flex;

    align-items:center;

    gap:16px;

    transition:all var(--about-transition);

}

.trust-item i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(13,110,253,.08);

    color:var(--about-primary);

    font-size:1.1rem;

    transition:all var(--about-transition);

}

.trust-item span{

    color:var(--about-heading);

    font-size:.95rem;

    font-weight:600;

    line-height:1.6;

}


/* ==========================================================
   Hover
   ========================================================== */

.trust-item:hover{

    transform:translateX(6px);

}

.trust-item:hover i{

    background:var(--about-primary);

    color:#ffffff;

}

/* ==========================================================
   BAB 7
   Premium Background Decoration
   ========================================================== */


/* ==========================================================
   Section Background
   ========================================================== */

.about-section{

    position:relative;

    isolation:isolate;

}


/* ==========================================================
   Background Gradient
   ========================================================== */

.about-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 15% 15%,
            rgba(13,110,253,.05),
            transparent 30%),

        radial-gradient(circle at 85% 20%,
            rgba(32,201,151,.05),
            transparent 28%),

        radial-gradient(circle at 80% 85%,
            rgba(13,110,253,.04),
            transparent 30%);

    pointer-events:none;

    z-index:0;

}


/* ==========================================================
   Media Decoration Layer
   ========================================================== */

.about-media{

    z-index:2;

}


/* ==========================================================
   Decorative Shape Base
   ========================================================== */

.about-shape{

    position:absolute;

    pointer-events:none;

    z-index:1;

}


/* ==========================================================
   Shape 1
   ========================================================== */

.about-shape-1{

    width:150px;

    height:150px;

    top:-45px;

    right:-45px;

    border-radius:32px;

    border:2px solid rgba(13,110,253,.10);

    transform:rotate(18deg);

}


/* ==========================================================
   Shape 2
   ========================================================== */

.about-shape-2{

    width:90px;

    height:90px;

    left:-50px;

    top:48%;

    border-radius:50%;

    background:rgba(13,110,253,.08);

}


/* ==========================================================
   Shape 3
   ========================================================== */

.about-shape-3{

    width:120px;

    height:120px;

    right:25px;

    bottom:15px;

    border-radius:50%;

    border:2px dashed rgba(32,201,151,.22);

}


/* ==========================================================
   Soft Glow Behind Hero
   ========================================================== */

.about-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,0),
        rgba(13,110,253,.05)
    );

    pointer-events:none;

    z-index:1;

}


/* ==========================================================
   Hero Border Highlight
   ========================================================== */

.about-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

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

    pointer-events:none;

}


/* ==========================================================
   Floating Decorative Blur
   ========================================================== */

.about-floating-card::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(13,110,253,.10),
        rgba(32,201,151,.08)
    );

    filter:blur(24px);

    opacity:.45;

    z-index:-1;

}

/* ==========================================================
   BAB 8
   Enterprise Responsive
   ========================================================== */


/* ==========================================================
   Large Desktop
   ========================================================== */

@media (min-width:1400px){

    .about-media{

        max-width:620px;

    }

}


/* ==========================================================
   Laptop
   ========================================================== */

@media (max-width:1199px){

    .about-heading{

        margin-bottom:70px;

    }

    .about-content{

        max-width:100%;

    }

    .about-image img{

        height:600px;

    }

    .about-floating-card{

        right:-20px;

    }

}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width:991px){

    .about-section{

        padding:90px 0;

    }

    .about-heading{

        margin-bottom:60px;

    }

    .about-media{

        max-width:620px;

        margin:0 auto 120px;

    }

    .about-content{

        margin:0 auto;

        text-align:center;

    }

    .about-label{

        justify-content:center;

    }

    .about-actions{

        justify-content:center;

    }

    .about-trust{

        justify-items:center;

    }

    .about-image img{

        height:520px;

    }

    .about-floating-card{

        top:20px;

        right:20px;

    }

    .about-experience-card{

        left:20px;

        bottom:110px;

    }

    .about-stats-overlay{

        width:94%;

    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width:767px){

    .about-section{

        padding:70px 0;

    }

    .about-heading{

        margin-bottom:50px;

    }

    .section-title{

        font-size:2rem;

    }

    .about-media{

        padding-bottom:20px;

        margin-bottom:50px;

    }

    .about-image{

        border-radius:24px;

    }

    .about-image img{

        height:auto;

        aspect-ratio:4/5;

    }

    /* Floating menjadi normal */

    .about-floating-card{

        position:relative;

        top:auto;

        right:auto;

        left:auto;

        width:100%;

        margin:20px auto 0;

    }

    /* Experience */

    .about-experience-card{

        position:relative;

        left:auto;

        bottom:auto;

        margin:20px auto;

    }

    /* Statistics */

    .about-stats-overlay{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;

        width:100%;

        margin-top:20px;

        grid-template-columns:1fr;

    }

    .about-actions{

        flex-direction:column;

    }

    .btn-about-primary,

    .btn-about-secondary{

        width:100%;

        min-width:0;

    }

}


/* ==========================================================
   Small Mobile
   ========================================================== */

@media (max-width:480px){

    .about-section{

        padding:60px 0;

    }

    .section-title{

        font-size:1.8rem;

    }

    .section-description{

        font-size:.95rem;

    }

    .about-feature-card{

        padding:18px;

    }

    .about-feature-icon{

        width:52px;

        height:52px;

    }

    .about-floating-card{

        padding:18px;

    }

}

/* ==========================================================
   BAB 9
   Motion & Final Polish
   ========================================================== */


/* ==========================================================
   Global Transition
   ========================================================== */

.about-section a,
.about-section button,
.about-image,
.about-floating-card,
.about-experience-card,
.about-stat-card,
.about-feature-card,
.trust-item{

    transition:all .35s ease;

}


/* ==========================================================
   Hero Image
   ========================================================== */

.about-media:hover .about-image{

    transform:translateY(-8px);

    box-shadow:
        0 45px 90px rgba(15,23,42,.18);

}


/* ==========================================================
   Floating Card
   ========================================================== */

.about-floating-card:hover{

    transform:translateY(-8px);

}


/* ==========================================================
   Experience Card
   ========================================================== */

.about-experience-card:hover{

    transform:scale(1.06);

}


/* ==========================================================
   Statistics Card
   ========================================================== */

.about-stat-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 45px rgba(15,23,42,.15);

}


/* ==========================================================
   Feature Card
   ========================================================== */

.about-feature-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 24px 55px rgba(15,23,42,.14);

}


/* ==========================================================
   Feature Icon
   ========================================================== */

.about-feature-card:hover .about-feature-icon{

    transform:rotate(-8deg) scale(1.08);

}


/* ==========================================================
   Buttons
   ========================================================== */

.btn-about-primary:hover i{

    transform:translateX(5px);

}

.btn-about-secondary:hover i{

    transform:rotate(15deg);

}

.btn-about-primary i,
.btn-about-secondary i{

    transition:.3s ease;

}


/* ==========================================================
   Trust Item
   ========================================================== */

.trust-item:hover{

    transform:translateX(8px);

}

.trust-item:hover i{

    transform:scale(1.1);

}


/* ==========================================================
   Decorative Shapes
   ========================================================== */

.about-shape{

    animation:aboutFloat 8s ease-in-out infinite;

}

.about-shape-2{

    animation-delay:2s;

}

.about-shape-3{

    animation-delay:4s;

}

@keyframes aboutFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}


/* ==========================================================
   Fade Up Animation
   ========================================================== */

.about-heading,
.about-media,
.about-content{

    animation:aboutFadeUp .8s ease both;

}

@keyframes aboutFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   Accessibility
   ========================================================== */

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

    .about-section *{

        animation:none !important;

        transition:none !important;

    }

}