/* ==========================================================
   ABTECH PRODUCT DETAIL
========================================================== */

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

.product-hero{
    padding:120px 0 80px;
    background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.product-hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.product-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    background:rgba(20,40,92,.08);
    color:var(--primary);

    border-radius:999px;

    font-size:.9rem;
    font-weight:600;

    margin-bottom:20px;
}

.hero-content h1{
    font-size:34px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-0.5px;
    color:#0f172a;
    margin-bottom:20px;
}

.hero-content p{
    font-size:17px;
    line-height:1.8;
    color:#64748b;
    max-width:620px;
    margin-bottom:32px;
}
/* ================= BUTTON ================= */
/* =========================
   PRODUCT BUTTONS
========================= */

.product-buttons{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:35px;
}

.product-btn-primary,
.product-btn-outline{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:52px;
    padding:0 28px;

    border-radius:999px;

    text-decoration:none;
    font-size:15px;
    font-weight:600;

    transition:.25s ease;
}

/* Primary */

.product-btn-primary{

    background:#14285C;
    color:#fff;
    border:2px solid #14285C;

}

.product-btn-primary:hover{

    background:#0F1F49;
    border-color:#0F1F49;
    color:#fff;

}

/* Outline */

.product-btn-outline{

    background:#fff;
    color:#14285C;

    border:2px solid #14285C;

}

.product-btn-outline:hover{

    background:#14285C;
    color:#fff;

}

/* ================= IMAGE ================= */

.hero-image img{
    width:100%;
    display:block;
    border-radius:22px;
    box-shadow:0 20px 50px rgba(15,23,42,.12);
}

/* ==========================================================
   INDUSTRIES
========================================================== */

.industry-section{
    padding:90px 0;
}

.section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

.section-title span{
    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(20,40,92,.08);
    color:var(--primary);

    font-size:.9rem;
    font-weight:600;

    margin-bottom:18px;
}

.section-title h2{
    font-size:38px;
    margin-bottom:18px;
    color:#0f172a;
}

.section-title p{
    color:#64748b;
    line-height:1.8;
}

.industry-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.industry-card{

    background:#fff;

    border:1px solid #e8edf5;

    border-radius:22px;

    padding:40px 25px;

    text-align:center;

    transition:.25s;

    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.industry-card:hover{

    transform:translateY(-6px);

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

.industry-card h3{
    margin:0;
    font-size:22px;
    color:#0f172a;
}

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

@media (max-width:991px){

    .product-hero{
        padding:100px 0 70px;
    }

    .product-hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content p{
        margin:0 auto 35px;
    }

    .product-buttons{
        justify-content:center;
    }

    .hero-image{
        order:-1;
    }

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

}

@media (max-width:768px){

    .product-hero{
        padding:90px 0 50px;
    }

    .hero-content h1{
        font-size:32px;
    }

    .hero-content p{
        font-size:16px;
    }

    .product-buttons{
        flex-direction:column;
    }

    .product-btn-primary,
    .product-btn-outline{
        width:100%;
    }

    .industry-grid{
        grid-template-columns:1fr;
    }

    .section-title h2{
        font-size:30px;
    }

}

/* ======================
Highlight
====================== */

.hero-highlight{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:40px;

}

.highlight-item{

    color:#334155;

    font-size:15px;

    font-weight:500;

}

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

.hero-image img{

    width:100%;

    display:block;

    border-radius:22px;

    box-shadow:

    0 30px 70px rgba(15,23,42,.10);

}

.hero-highlight{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:38px;
}

.highlight-item{
    display:flex;
    align-items:center;
    gap:12px;

    font-size:15px;
    color:#475569;
    line-height:1.7;
}

.highlight-dot{

    width:8px;
    height:8px;

    background:#14285C;

    border-radius:50%;

    flex-shrink:0;

}


/* ==========================================================
CORE MODULES
========================================================== */

.modules-section{

    padding:100px 0;

    background:#f8fafc;

}

.modules-grid{

    display:grid;

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

    gap:28px;

    margin-top:60px;

}

.module-card{

    background:#fff;

    border:1px solid #E8EDF5;

    border-radius:20px;

    padding:30px;

    transition:.25s;

}

.module-card:hover{

    transform:translateY(-6px);

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

}

.module-icon{

    font-size:34px;

    margin-bottom:20px;

}

.module-card h3{

    font-size:22px;

    font-weight:600;

    margin-bottom:12px;

    color:#0f172a;

}

.module-card p{

    font-size:15px;

    line-height:1.8;

    color:#64748b;

    margin:0;

}

@media(max-width:991px){

.modules-grid{

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

}

}

@media(max-width:768px){

.modules-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
MTO
========================================================== */

.mto-section{

    padding:100px 0;

    background:#fff;

}

.mto-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.mto-card{

    background:#fff;

    border:1px solid #E8EDF5;

    border-radius:22px;

    padding:40px;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.mto-card:hover{

    transform:translateY(-6px);

    transition:.25s;

}

.mto-icon{

    font-size:48px;

    margin-bottom:20px;

}

.mto-card h3{

    font-size:28px;

    margin-bottom:15px;

}

.mto-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:25px;

}

.mto-card ul{

    padding-left:20px;

    margin:0;

}

.mto-card li{

    margin-bottom:12px;

    color:#475569;

}

@media(max-width:991px){

.mto-grid{

grid-template-columns:1fr;

}

}
/* ==========================================
WORKFLOW
========================================== */

.workflow-section{
    padding:100px 0;
    background:#fff;
}

.workflow{

    display:grid;

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

    align-items:center;

    gap:0;

    margin-top:60px;

}

.workflow-item{

    background:#fff;

    border:1px solid #E8EDF5;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    transition:.25s;
}

.workflow-item:hover{

    transform:translateY(-6px);

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

}

.workflow-icon{

    font-size:42px;

    margin-bottom:18px;

}

.workflow-item h4{

    font-size:18px;

    margin:0;

    color:#0f172a;

}

.workflow-arrow{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    color:#14285C;

    font-weight:700;

}
/* Tablet */

@media(max-width:991px){

    .workflow{

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

    }

}

/* Mobile */

@media(max-width:768px){

    .workflow{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
MOBILE APP STYLE
========================================================== */

@media (max-width:768px){

/* HERO */

.product-hero{

    padding:85px 0 45px;

}

.product-hero-grid{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.hero-content{

    order:1;

    background:#fff;

    padding:26px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(15,23,42,.06);

}

.hero-image{

    order:2;

}

.hero-image img{

    width:100%;

    border-radius:18px;

}

/* TITLE */

.hero-content h1{

    font-size:32px;

    line-height:1.25;

}

.hero-description{

    font-size:15px;

}

/* BUTTON */

.product-buttons{

    flex-direction:column;

    gap:12px;

}

.product-btn-primary,
.product-btn-outline{

    width:100%;

}

/* MODULE */

.modules-grid{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.module-card{

    display:flex;

    align-items:flex-start;

    text-align:left;

    padding:20px;

}

.module-icon{

    margin:0 18px 0 0;

    font-size:30px;

    flex-shrink:0;

}

.module-card h3{

    font-size:18px;

    margin-bottom:5px;

}

.module-card p{

    font-size:14px;

}

/* INDUSTRY */

.industry-grid{

    grid-template-columns:1fr;

}

.industry-card{

    text-align:left;

    padding:20px;

}

.industry-icon{

    font-size:28px;

    margin-bottom:12px;

}

/* WORKFLOW */

.workflow{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.workflow-arrow{

    transform:rotate(90deg);

    justify-content:center;

}

/* SECTION */

.modules-section,
.workflow-section,
.industry-section,
.mto-section{

    padding:60px 0;

}

.section-title{

    margin-bottom:35px;

}

.section-title h2{

    font-size:28px;

}

}


/* NAVBAR FIX */

#header{

    z-index:99999;

}

.navbar{

    position:relative;

    z-index:99999;

}

.hamburger{

    position:relative;

    z-index:999999;

}

.project-cta{

    margin:60px 0;

    padding:40px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:20px;

    text-align:center;

}

.project-cta h3{

    font-size:28px;

    color:#081B42;

    margin-bottom:12px;

}

.project-cta p{

    max-width:680px;

    margin:0 auto 24px;

    color:#64748B;

    line-height:1.8;

}