/* ===============================
   BUSUNG F&B
================================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Pretendard',sans-serif;
    color:#222;
    background:#fff;
    line-height:1.7;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}


/*====================================

HEADER

====================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    background:#0B2C5F;

    z-index:9999;

    transition:.35s;

}

.header.scrolled{

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.header-wrap{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:210px;

    display:block;

}

.nav{

    margin-left:auto;

}

.nav ul{

    display:flex;

    align-items:center;

    gap:50px;

    list-style:none;

}

.nav a{

    position:relative;

    color:#fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.3s;

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#18A77C;

    transition:.3s;

}

.nav a:hover{

    color:#6BE3BE;

}

.nav a:hover::after{

    width:100%;

}

.btn-estimate{

    margin-left:50px;

    padding:14px 32px;

    border-radius:40px;

    background:#18A77C;

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.btn-estimate:hover{

    background:#14916C;

    transform:translateY(-2px);

}

/*====================================

HERO V3

====================================*/

.hero{

    position:relative;

    height:100vh;

    min-height:900px;

    overflow:hidden;

}

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(7,27,54,.65),

        rgba(7,27,54,.55)

    );

}

.hero-content{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    max-width:980px;

    color:#fff;

}

.hero-label{

    color:#6BE3BE;

    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:28px;

}

.hero h1{

    font-size:70px;

    line-height:1.5.15;

    margin-bottom:35px;

    font-weight:800;

}

.hero p{

    font-size:15px;

    line-height:1.9;

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

    max-width:650px;

    margin-bottom:55px;

}

.hero-btns{

    display:flex;

    gap:20px;

}

.btn-outline-white{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border:2px solid rgba(255,255,255,.8);

    border-radius:60px;

    color:#fff;

    transition:.35s;

}

.btn-outline-white:hover{

    background:#fff;

    color:#0B2C5F;

}

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:3;

}

.hero-scroll span{

    color:#fff;

    letter-spacing:4px;

    font-size:12px;

    opacity:.85;

}

.hero-scroll::before{

    content:"";

    position:absolute;

    left:50%;

    top:-40px;

    transform:translateX(-50%);

    width:2px;

    height:28px;

    background:#fff;

    animation:scrollLine 1.8s infinite;

}

/* .hero-content{

    opacity:0;

    transform:translateY(60px);

    transition:1.2s;

} */

/* .hero-content.hero-show{

    opacity:1;

    transform:none;

} */

@keyframes scrollLine{

0%{

height:8px;

opacity:.3;

}

50%{

height:28px;

opacity:1;

}

100%{

height:8px;

opacity:.3;

}


}

/*========================

Hero Floating Card

=========================*/

.hero-floating{

    position:absolute;

    right:8%;

    bottom:80px;

    z-index:5;

    width:320px;

    padding:34px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

    color:#fff;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.floating-title{

    display:block;

    font-size:26px;

    font-weight:700;

    margin-bottom:24px;

}

.hero-floating ul{

    list-style:none;

}

.hero-floating li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.hero-floating li:last-child{

    border-bottom:none;

}

.hero-floating strong{

    color:#6BE3BE;

    font-size:18px;

}

.hero-floating{

    opacity:0;

    transform:translateY(40px);

    animation:floatCard .9s ease .7s forwards;

}

@keyframes floatCard{

    to{

        opacity:1;

        transform:none;

    }

}

.hero-floating{

    transition:.35s;

}

.hero-floating:hover{

    transform:translateY(-8px);

}

/*====================================

WHY BUSUNG V3

====================================*/

.why{

    padding:160px 0;

    background:#F7F9FC;

}

.why-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    transition:.35s;

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

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.why-icon{

    width:84px;

    height:84px;

    margin:auto;

    margin-bottom:35px;

    border-radius:50%;

    background:#18A77C;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

}

.why-icon svg{

    width:40px;

    height:40px;

}

.why-card h3{

    font-size:26px;

    color:#0B2C5F;

    margin-bottom:22px;

}

.why-card p{

    color:#666;

    line-height:2;

    font-size:17px;

}

.why-number{

    display:block;

    margin-bottom:18px;

    color:#18A77C;

    font-size:14px;

    font-weight:800;

    letter-spacing:3px;

}

/* ===============================
SERVICE
================================ */

.service{

    background:#f7f8fb;

    padding:120px 0;

}

.service h2{

    text-align:center;

    font-size:46px;

    margin-bottom:70px;

}

.cards{

    display:grid;

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

    gap:35px;

}

.card{

    background:#fff;

    padding:50px;

    border-radius:20px;

    text-align:center;

    transition:.3s;

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

}

.card:hover{

    transform:translateY(-10px);

}

.card h3{

    font-size:32px;

    color:#0b2c5f;

    margin-bottom:20px;

}

.card p{

    font-size:18px;

    color:#666;

}

/*====================================

PRODUCT V3

====================================*/

.product{

    padding:160px 0;

    background:#fff;

}

.product-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.product-card{

    overflow:hidden;
    
    border:1px solid transparent;

    border-radius:24px;

    background:#fff;

    transition:.4s;

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

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    border-color:#18A77C;

}

.product-card img{

    width:100%;

    height:270px;

    object-fit:cover;

    transition:.8s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-card::after{

    content:"";

    display:block;

    width:0;

    height:3px;

    background:#18A77C;

    transition:.4s;

}

.product-card:hover::after{

    width:100%;

}

.product-info{

    padding:30px;

}

.product-info h3{

    font-size:28px;

    color:#0B2C5F;

    margin-bottom:10px;

}

.product-info span{

    color:#777;

    font-size:16px;

}

.product-tag{

    display:inline-block;

    margin-top:16px;

    padding:8px 14px;

    border-radius:30px;

    background:#EAF7F2;

    color:#18A77C;

    font-size:13px;

    font-weight:700;

}

/*====================================

PROCESS V3

====================================*/

.process{

    padding:160px 0;

    background:#F7F9FC;

}

.process-wrap{

    margin-top:80px;

    display:grid;

    grid-template-columns:1fr 80px 1fr 80px 1fr 80px 1fr;

    align-items:center;

}

.process-card{

    background:#fff;

    border-radius:24px;

    padding:45px 30px;

    text-align:center;

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

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.step{

    display:inline-block;

    color:#18A77C;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:22px;

}

.process-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:28px;

    border-radius:50%;

    background:#EAF7F2;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#18A77C;

}

.process-icon svg{

    width:42px;

    height:42px;

}

.process-card h3{

    color:#0B2C5F;

    font-size:28px;

    margin-bottom:18px;

}

.process-card p{

    color:#666;

    line-height:1.9;

    font-size:17px;

}

.process-line{

    height:2px;

    background:#18A77C;

    position:relative;

}

.process-line::after{

    content:"";

    position:absolute;

    right:-2px;

    top:50%;

    transform:translateY(-50%);

    width:10px;

    height:10px;

    border-radius:50%;

    background:#18A77C;

}

.step-number{

    font-size:54px;

    font-weight:800;

    color:#E2E8F0;

    line-height:1;

    margin-bottom:25px;

}

/*====================================

CLIENT

====================================*/

.client{

    padding:160px 0;

    background:#fff;

}

.client-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.client-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:30px 20px;

    transition:.35s;

}

.client-card img{

    max-width:180px;

    max-height:80px;

    object-fit:contain;

    margin-bottom:22px;

    transition:.35s;

}

.client-card h4{

    font-size:18px;

    font-weight:700;

    color:#163B72;

    text-align:center;

    transition:.35s;

}

.client-card:hover{

    transform:translateY(-8px);

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

}

.client-card:hover img{

    transform:scale(1.05);

}

.client-card:hover h4{

    color:#18A77C;

}

/*====================================
FACTORY V3
====================================*/

.factory{

    padding:160px 0;

    background:#F7F9FC;

}

.factory-wrap{

    margin-top:70px;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:32px;

    align-items:stretch;

}

/* LEFT VIDEO */

.factory-main{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    min-height:720px;

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

}

.factory-main video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:1.2s;

}

.factory-main:hover video{

    transform:scale(1.05);

}

.factory-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:60px;

    color:#fff;

    background:linear-gradient(
        transparent 35%,
        rgba(7,27,54,.82) 100%
    );

}

.factory-overlay span{

    color:#6BE3BE;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:18px;

}

.factory-overlay h3{

    font-size:52px;

    margin-bottom:20px;

}

.factory-overlay p{

    font-size:20px;

    line-height:1.8;

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

}

/* RIGHT */

.factory-grid{

    display:grid;

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

    gap:22px;

}

.factory-card{

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.factory-card:hover{

    transform:translateY(-8px);

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

}

.factory-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    transition:.8s;

}

.factory-card:hover img{

    transform:scale(1.08);

}

.factory-card-info{

    padding:20px;

    text-align:center;

}

.factory-card-info h4{

    color:#0B2C5F;

    font-size:22px;

    margin-bottom:10px;

}

.factory-card-info p{

    color:#666;

    font-size:15px;

    line-height:1.7;

}

/*====================================

CONTACT V3

====================================*/

.contact{

    padding:160px 0;

    background:linear-gradient(180deg,#0B2C5F,#082347);

    color:#fff;

}

.contact-header{

    text-align:center;

    margin-bottom:70px;

}

.contact .section-title{

    color:#fff;

}

.contact .section-desc{

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

}

.contact-wrap{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:stretch;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:25px;

    padding:32px;

    border-radius:22px;

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

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

    backdrop-filter:blur(10px);

}

.contact-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#18A77C;

    display:flex;

    justify-content:center;

    align-items:center;

}

.contact-icon svg{

    width:32px;

    height:32px;

}

.contact-item h4{

    font-size:24px;

    margin-bottom:8px;

}

.contact-item p{

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

    line-height:1.8;

}

.contact-cta{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:60px;

    border-radius:28px;

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

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

    backdrop-filter:blur(15px);

}

.contact-cta h3{

    font-size:42px;

    line-height:1.4;

    margin-bottom:25px;

}

.contact-cta p{

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

    line-height:2;

    margin-bottom:45px;

    font-size:18px;

}

.contact-buttons{

    display:flex;

    gap:18px;

}

.contact .btn-primary{

    min-width:220px;

}

.contact .btn-outline-white{

    min-width:240px;

}

/* ===============================
FOOTER
================================ */

footer{

    background:#0b2c5f;

    color:#fff;

    padding:90px 0;

    text-align:center;

}

footer h2{

    font-size:42px;

    margin-bottom:30px;

}

footer p{

    opacity:.8;

    margin-top:10px;

}


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

@media(max-width:1200px){

.container{

width:92%;

}

.cards{

grid-template-columns:1fr 1fr;

}

.hero h1{

font-size:64px;

}

.hero h2{

font-size:32px;

}

}

@media(max-width:768px){

.header .container{

height:70px;

}

nav{

display:none;

}

.hero h1{

font-size:46px;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:18px;

}

.cards{

grid-template-columns:1fr;

}

.about .desc{

width:100%;

font-size:18px;

}

}


/*==============================

FOOTER

==============================*/

/* .footer{

    background:#082448;

    color:#fff;

    padding-top:90px;

}

.footer-grid{

    display:grid;

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

    gap:60px;

}

.footer h2{

    font-size:42px;

    margin-bottom:20px;

}

.footer h3{

    margin-bottom:20px;

    color:#18A77C;

}

.footer p,

.footer li{

    color:#d8d8d8;

    line-height:2;

    font-size:16px;

}

.footer ul{

    list-style:none;

}

.copyright{

    margin-top:70px;

    padding:25px;

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

    text-align:center;

    color:#aaa;

    font-size:15px;

}
 */
.footer{

    background:#071B36;

    color:#fff;

    padding:90px 0 0;

}

.footer-wrap{

    display:grid;

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

    gap:60px;

}

.footer h2{

    font-size:42px;

    margin-bottom:18px;

}

.footer h4{

    color:#18A77C;

    margin-bottom:20px;

}

.footer ul{

    list-style:none;

}

.footer li,

.footer p{

    color:#cfcfcf;

    line-height:2;

}

.copyright{

    margin-top:70px;

    padding:25px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

    color:#888;

}



/* ===== Mobile overhaul ===== */
@media (max-width:991px){
.container{width:92%;max-width:100%;}
.header{height:72px}
.header-wrap{height:72px}
.logo img{height:90px}
.nav{display:none}
.btn-estimate{margin-left:0;padding:12px 22px;font-size:14px}
.hero{min-height:100svh;height:auto;padding:110px 0 70px}
.hero-content{max-width:100%;text-align:left}
.hero h1{font-size:42px;line-height:1.25}
.hero p{font-size:16px;max-width:100%;margin-bottom:30px}
.hero-btns{flex-direction:column;align-items:stretch}
.hero-btns a{width:100%;text-align:center}
.hero-floating{display:none}
.hero-scroll{display:none}
.why,.product,.process,.client,.factory,.contact{padding:80px 0}
.why-grid,.product-grid,.client-grid,.factory-wrap,.contact-wrap,.footer-wrap,.cards{display:grid;grid-template-columns:1fr!important;gap:20px}
.factory-grid{grid-template-columns:1fr 1fr;gap:16px}
.process-wrap{display:flex;flex-direction:column;gap:20px}
.process-line{width:2px;height:36px;margin:0 auto}
.contact-buttons{flex-direction:column}
.contact-buttons>*{width:100%}
.contact-cta{padding:32px}
.footer-wrap{gap:30px}
.footer h2{font-size:34px}
}
@media (max-width:768px){
body{overflow-x:hidden}
.container{width:94%}
.hero-label{font-size:12px;letter-spacing:2px}
.hero h1{font-size:34px}
.section-title,h2{font-size:30px!important}
.why-card,.process-card,.product-card,.contact-item{padding:24px}
.product-grid{grid-template-columns:repeat(2,1fr)!important}
.product-card img{height:150px}
.client-grid{grid-template-columns:repeat(2,1fr)!important}
.factory-grid{grid-template-columns:1fr!important}
.factory-main{min-height:360px}
.factory-overlay{padding:24px}
.factory-overlay h3{font-size:30px}
.contact-item{flex-direction:column;text-align:center}
.footer{padding-top:60px}
}
@media (max-width:480px){
.logo img{height:72px}
.btn-estimate{padding:10px 18px;font-size:13px}
.hero{padding-top:90px}
.hero h1{font-size:30px}
.hero p{font-size:15px}
.product-grid,.client-grid{grid-template-columns:1fr!important}
}