/* ABOUT US PAGE — page-specific styles only. Shared tokens live in style.css */

/* HERO BANNER */
.ab-hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  padding:140px 8vw 90px;
  background:
    linear-gradient(120deg, rgba(11,31,58,0.88), rgba(37,99,235,0.72)),
    url('https://images.unsplash.com/photo-1509391366360-2e959784a276?q=80&w=1600&auto=format&fit=crop')
    center/cover no-repeat;
  overflow:hidden;
}
.ab-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,31,58,0.15), rgba(11,31,58,0.55));
}
.ab-hero-content{position:relative; z-index:2; max-width:780px;}
.ab-hero-content h1{
  font-family:var(--font-display);
  font-size:clamp(32px,4.5vw,54px);
  color:var(--white);
  line-height:1.15;
  margin:14px 0 18px;
}
.ab-hero-content p{
  color:rgba(255,255,255,0.85);
  font-size:17px;
  max-width:620px;
}

/* ==========================
ABOUT OVERVIEW
===========================*/


.ab-overview {

    background: var(--white);

    padding: 100px 8vw;

    overflow: hidden;

}



.ab-container {

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns: 55% 45%;

    gap: 50px;

    align-items: center;

}



.ab-content {

    position: relative;

    z-index: 2;

}



.ab-overview h2 {

    font-family: var(--font-display);

    font-size: clamp(32px, 3.5vw, 44px);

    line-height: 1.15;

    color: var(--primary);

    margin-bottom: 25px;

}



.ab-overview p {

    color: #4A5449;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 18px;

}



/* IMAGE */


.ab-image {

    position: relative;

    display: flex;

    justify-content: center;

}



.ab-image::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    background:

        radial-gradient(circle,
            rgba(251, 191, 36, .25),
            transparent 70%);


    filter: blur(40px);

    z-index: 0;

}



.ab-image img {

    width: 100%;

    max-width: 520px;

    border-radius: 30px;

    position: relative;

    z-index: 1;


    filter:

        drop-shadow(0 30px 50px rgba(0, 0, 0, .18));


    mask-image:

        linear-gradient(to bottom,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);


}


/* RESPONSIVE */


@media(max-width:1000px) {


    .ab-container {

        grid-template-columns: 1fr;

    }


    .ab-image {

        order: -1;

    }


}

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

.section-title{
    text-align:center;
    max-width:850px;
    margin:90px auto 0;
    padding:0 8vw;
}

.section-title h2{
    font-size:42px;
    color:var(--primary);
    margin:15px 0;
}

.section-title h2 span{
    color:var(--accent);
}

.section-title p{
    color:var(--gray);
    font-size:17px;
    line-height:1.8;
}

.ab-vm{
    background:var(--cream);
    padding:90px 8vw;

    display:grid;
    grid-template-columns:1fr;
    gap:35px;
}

@media(min-width:800px){
    .ab-vm{
        grid-template-columns:repeat(2,1fr);
    }
}

.vm-card{

    background:var(--white);

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

    border-radius:18px;

    padding:45px 38px;

    position:relative;

    overflow:hidden;

    transition:.35s;
}

/* Top Gradient Line */

.vm-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,var(--secondary),var(--accent));
}

.vm-card:hover{

    transform:translateY(-8px);

    border-color:var(--accent);

    box-shadow:0 18px 40px rgba(11,31,58,.12);
}

.vm-icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563EB,
        #FBBF24
    );

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

    margin-bottom:25px;

}


.vm-icon i{

    font-size:30px;

    color:#fff;

}

.vm-card h3{

    font-size:28px;

    color:var(--primary);

    margin-bottom:18px;
}

.vm-card p{

    font-size:15.5px;

    color:var(--gray);

    line-height:1.9;

    text-align:justify;
}

/* =========================
      BUSINESS VERTICALS
========================= */

.ab-verticals{

    background:var(--white);

    padding:100px 8vw;

}


/* Heading */

.ab-verticals .eyebrow{

    color:var(--secondary);

    margin-bottom:15px;

}


.ab-verticals h2{

    font-family:var(--font-display);

    font-size:clamp(32px,4vw,42px);

    color:var(--primary);

    margin-bottom:15px;

}


.ab-lead{

    color:var(--gray);

    max-width:600px;

    font-size:17px;

    line-height:1.7;

    margin-bottom:55px;

}


/* Cards Grid */

.vert-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

}


@media(min-width:700px){

    .vert-grid{

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

    }

}


@media(min-width:1100px){

    .vert-grid{

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

    }

}



/* Individual Card */

.vert-card{

    background:var(--white);

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

    border-radius:20px;

    padding:20px 22px 30px;

    position:relative;

    overflow:hidden;

    transition:.35s;

}

/* =========================
VERTICAL CARD IMAGE
========================= */


.vert-thumb{

    width:100%;

    height:170px;

    overflow:hidden;

    border-radius:16px;

    margin-bottom:25px;

    position:relative;

}


.vert-thumb::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        transparent,
        rgba(11,31,58,.25)
    );

}



.vert-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s ease;

}



.vert-card:hover .vert-thumb img{

    transform:scale(1.08);

}



/* Top Energy Line */

.vert-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--accent)
    );

}



.vert-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(11,31,58,.12);

    border-color:var(--accent);

}



/* Icon */

.vert-icon{

    width:70px;
    height:70px;

    border-radius:18px;

    background:rgba(251,191,36,0.15);

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

    margin-bottom:20px;

}


.vert-icon i{

    font-size:30px;

    color:var(--secondary);

}



/* Title */

.vert-card h3{

    font-size:22px;

    color:var(--primary);

    margin-bottom:15px;

}



/* Description */

.vert-card p{

    color:var(--gray);

    font-size:14.5px;

    line-height:1.8;

    margin-bottom:20px;

}



/* List */

.vert-list{

    margin-bottom:25px;

}


.vert-list li{

    display:flex;
    align-items:center;
    gap:10px;

}


.vert-list li::before{

    content:"\f058";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    color:var(--accent);

    font-size:14px;

}



/* Learn More */

.ab-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:700;

    color:var(--secondary);

    text-decoration:none;

    margin-top:8px;

}


.ab-link i{

    font-size:11px;

    transition:.25s;

}


.vert-card:hover .ab-link i{

    transform:translateX(5px);

}

/* ==========================
      PRODUCT PORTFOLIO
========================== */

.ab-portfolio{

    background:#F8FAFC;

    padding:100px 8vw;

}


.ab-portfolio .eyebrow{

    color:var(--secondary);

    margin-bottom:15px;

}


.ab-portfolio h2{

    font-family:var(--font-display);

    font-size:clamp(32px,4vw,42px);

    color:var(--primary);

    margin-bottom:55px;

}



/* GRID */

.portfolio-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

}


@media(min-width:700px){

    .portfolio-grid{

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

    }

}


@media(min-width:1100px){

    .portfolio-grid{

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

    }

}




/* CARD */

.portfolio-card{

    background:var(--white);

    border-radius:22px;

    padding:35px 28px;

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

    position:relative;

    overflow:hidden;

    transition:.35s;

}



/* Top Highlight Line */

.portfolio-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--accent)
    );

}



.portfolio-card:hover{

    transform:translateY(-10px);

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

    border-color:var(--accent);

}



/* ICON + TITLE */

.portfolio-card h3{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:20px;

    color:var(--primary);

    margin-bottom:25px;

}



/* ICON BOX */

.portfolio-card h3 i{

    width:45px;

    height:45px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;


    background:rgba(37,99,235,.1);

    color:var(--secondary);

    font-size:20px;

}



/* PRODUCT LIST */

.portfolio-card ul{

    margin-top:10px;

}



.portfolio-card ul li{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:var(--gray);

    padding:10px 0;

    border-bottom:1px dashed var(--border);

}



.portfolio-card ul li:last-child{

    border-bottom:none;

}



/* Check Icon */

.portfolio-card ul li::before{

    content:"\f058";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    color:var(--accent);

    font-size:13px;

}



/* Hover Effect on Products */

.portfolio-card:hover h3 i{

    background:var(--accent);

    color:var(--primary);

    transform:rotate(5deg);

}


.portfolio-card h3 i{

    transition:.3s;

}

/* FRANCHISE (reuses .invest-table/.plan from style.css) */
.ab-franchise{ background:var(--white); padding:90px 8vw; }
.ab-franchise h2{ font-family:var(--font-display); font-size:clamp(28px,3.5vw,38px); color:var(--primary); margin-bottom:48px; }

/* ===========================
   PREMIUM FRANCHISE SECTION
=========================== */


.ab-franchise{
    background:#F8FAFC;
    padding:100px 8vw;
}


.ab-franchise h2{
    font-family:var(--font-display);
    font-size:clamp(30px,4vw,42px);
    color:var(--primary);
    margin-bottom:15px;
    max-width:800px;
}

/* ===========================
FRANCHISE INTRO
=========================== */


.franchise-lead{

    max-width:750px;

    color:#5B6675;

    font-size:17px;

    line-height:1.8;

    margin-bottom:45px;

}



/* ===========================
PREMIUM FRANCHISE BANNER
=========================== */


.franchise-banner{

    width:70%;

    height: 600px;

    margin:30px auto 60px;

    border-radius:24px;

    overflow:hidden;

    position:relative;

    box-shadow:
    0 20px 45px rgba(11,31,58,.15);

    aspect-ratio:16 / 9;

}



.franchise-banner::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(11,31,58,.15),
    transparent 60%
    );

}



.franchise-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s ease;

}



.franchise-banner:hover img{

    transform:scale(1.04);

}


.franchise-grid{

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

}


@media(max-width:1000px){

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

}


/* TABLET */

@media(max-width:1000px){

    .franchise-banner{

        width:85%;
        aspect-ratio:auto;

    }


}



/* MOBILE */

@media(max-width:600px){

    .franchise-banner{

        width:100%;

        height:auto;

        margin:20px auto 45px;

        border-radius:18px;

        background:#0B1F3A;

    }


    .franchise-banner img{

        width:100%;

        height:auto;

        object-fit:contain;

        display:block;

    }


    .franchise-banner::after{

        display:none;

    }

}


/* CARD */


.franchise-card{

    background:white;

    border-radius:22px;

    padding:40px 30px;

    border:1px solid #e5e7eb;

    position:relative;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:

    0 10px 30px rgba(11,31,58,.05);

}

.franchise-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(
        90deg,
        #2563EB,
        #FBBF24
    );

}



.franchise-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 50px rgba(11,31,58,.15);

}



/* ICON */


.franchise-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}


.franchise-icon i{

    font-size:34px;

}

/* SILVER */

.bronze-card .franchise-icon{
    background: #FDE8D8;
}

.bronze-card .franchise-icon i{
    color: #B45309;
}


/* SILVER */


.silver-card .franchise-icon{

    background:#e5e7eb;

}


.silver-card .franchise-icon i{

    color:#64748b;

}



/* GOLD */


.gold-card{

    border:2px solid #FBBF24;

}



.gold-card .franchise-icon{

    background:#FEF3C7;

}


.gold-card .franchise-icon i{

    color:#F59E0B;

}



/* PLATINUM */


.platinum-card .franchise-icon{

    background:#E0F2FE;

}


.platinum-card .franchise-icon i{

    color:#0EA5E9;

}

/* DIAMOND */

.diamond-card .franchise-icon{
    background: #DBEAFE;
}

.diamond-card .franchise-icon i{

color:#2563EB;

}

/* DIAMOND */

.black-diamond-card .franchise-icon{
    background: #0B1F3A;
}

.black-diamond-card .franchise-icon i{

color:#FBBF24;

}



/* TITLE */


.franchise-card h3{

    font-size:22px;

    color:var(--primary);

    margin-bottom:15px;

}



/* PRICE */


.franchise-price{

    font-family:var(--font-display);

    font-size:30px;

    color:#F59E0B;

    margin-bottom:30px;

}



/* LIST */


.franchise-card ul{

    margin-bottom:35px;

}


.franchise-card li{

    padding:12px 0;

    border-bottom:1px dashed #ddd;

    font-size:14px;

    color:#475569;

}


.franchise-card li:last-child{

    border-bottom:none;

}



/* BUTTON */


.franchise-btn{

    display:block;

    text-align:center;

    padding:14px;

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

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}



.franchise-btn:hover{

    background:var(--primary);

    color:white;

}



/* GOLD BUTTON */


.gold-btn{

    background:#FBBF24;

    border-color:#FBBF24;

    color:#0B1F3A;

}


.gold-btn:hover{

    background:#F59E0B;

    color:white;

}



/* POPULAR TAG */


.popular-tag{

    position:absolute;

    top:0;

    right:0;

    background:#FBBF24;

    padding:8px 20px;

    font-size:12px;

    font-weight:700;

    color:#0B1F3A;

}


/* ===============================
   WHY CHOOSE SG SANATAN
================================*/


.ab-why{

    background:#F8FAFC;

    padding:100px 8vw;

}


.ab-why h2{

    font-family:var(--font-display);

    font-size:clamp(32px,4vw,44px);

    color:var(--primary);

    max-width:800px;

    margin-bottom:50px;

}




/* GRID */


.why-highlights{

    display:grid;

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

    gap:25px;

}



@media(max-width:1000px){

.why-highlights{

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

}

}



@media(max-width:600px){

.why-highlights{

grid-template-columns:1fr;

}

}



/* CARD */


.ab-why .trust-card{

    position:relative;

    background-size:cover;

    background-position:center;

    min-height:320px;

    border-radius:20px;

    padding:35px 28px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    color:white;

    transition:.4s ease;

    isolation:isolate;

}

.ab-why .trust-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(11,31,58,.45),
        rgba(11,31,58,.92)
    );

    z-index:1;

}



.ab-why .trust-card > *{

    position:relative;

    z-index:2;

}

.ab-why .trust-card h3{

    color:#ffffff;

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

    text-shadow:
    0 3px 10px rgba(0,0,0,.65);

}


.ab-why .trust-card p{

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

    font-size:14.5px;

    line-height:1.75;

    text-shadow:
    0 2px 8px rgba(0,0,0,.7);

}


.ab-why .highlight-box::before{


    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;


    background:#FBBF24;


    transform:scaleY(0);

    transition:.3s;

}



.ab-why .highlight-box:hover::before{

    transform:scaleY(1);

}



.ab-why .highlight-box:hover{


    transform:translateY(-10px);


    box-shadow:

    0 20px 40px rgba(11,31,58,.12);


}

.green-energy{

background-image:url("../images/benifits/green-energy.jpg");

}


.training{

background-image:url("../images/benifits/training.jpg");

}


.marketing{

background-image:url("../images/benifits/marketing.jpg");

}


.website-leads{

background-image:url("../images/benifits/website-leads.jpg");

}


.installation-support{

background-image:url("../images/benifits/installation-support.jpg");

}


.warranty{

background-image:url("../images/benifits/warranty2.jpg");

}


/* ICON */


.ab-why .trust-icon{

    width:62px;

    height:62px;

    border-radius:16px;

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

    backdrop-filter:blur(10px);

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

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

}


.ab-why .trust-icon i{

    color:#FBBF24;

    font-size:26px;

}

/* TEXT */


.ab-why .highlight-box span{


    font-size:17px;


    font-weight:600;


    color:var(--primary);


}


/* COMMITMENT */
.ab-commitment{
  background:var(--cream);
  padding:80px 8vw;
  text-align:center;
}
.ab-commitment p{
  max-width:760px;
  margin:0 auto;
  font-family:var(--font-display);
  font-size:clamp(19px,2.2vw,24px);
  color:var(--primary);
  line-height:1.6;
}

/* ACTIVE NAV STATE */
nav a.active{ color:var(--brass); }

/* ===========================
   HOW IT WORKS SECTION
=========================== */

.process{

    background:#0B1F3A;

    padding:100px 8vw;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    overflow:hidden;

}



/* LEFT CONTENT */

.process-content{

    flex:1;

    max-width:720px;

}



.process .eyebrow{

    color:#FBBF24;

    margin-bottom:20px;

}



.process h2{

    font-family:var(--font-display);

    font-size:clamp(36px,4vw,54px);

    line-height:1.25;

    color:white;

    margin-bottom:25px;

    max-width:720px;

}



.process-desc{

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

    font-size:18px;

    line-height:1.8;

    max-width:680px;

}



/* IMAGE */

.process-image{

    flex:1;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    position:relative;

    margin-left:-20px;

}



.process-image img{

    width:100%;

    max-width:650px;

    border-radius:28px;

    display:block;

    box-shadow:

    0 30px 80px rgba(0,0,0,.5);

    transition:.5s ease;

}



.process-image:hover img{

    transform:scale(1.04);

}



/* IMAGE GLOW */

.process-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#2563EB;

    filter:blur(140px);

    opacity:.22;

    z-index:0;

}



.process-image img{

    position:relative;

    z-index:2;

}



/* REMOVE OLD LIMITS */

#process .eyebrow,
#process h2,
#process .process-desc{

    max-width:720px;

}



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


@media(max-width:1000px){


.process{

    flex-direction:column;

    gap:50px;

    text-align:center;

}


.process-content{

    max-width:100%;

}


.process h2,
.process-desc{

    max-width:100%;

}


.process-image{

    margin-left:0;

    justify-content:center;

}


.process-image img{

    max-width:520px;

}


}


@media(max-width:600px){


.process{

    padding:70px 6vw;

}


.process h2{

    font-size:34px;

}


.process-desc{

    font-size:16px;

}


.process-image img{

    max-width:100%;

}


}

/* ==========================================================
   MOBILE PADDING REFINEMENTS
========================================================== */
@media(max-width:600px){
  .ab-hero-content h1{ font-size:clamp(26px,7vw,36px); }
  .vm-card{ padding:32px 24px; }
  .vert-card{ padding:26px 20px; }
  .portfolio-card{ padding:26px 20px; }
  .franchise-card{ padding:34px 24px; }
  .ab-overview{ padding:56px 6vw; }
}

@media (max-width:900px){
    #process .process-image{
        position:relative;
        right:auto;
        top:auto;
        transform:none;
        justify-content:center;
        width:100%;
        margin-top:24px;
    }
    #process .process-image img{
        width:100%;
        max-width:420px;
    }
    #process .eyebrow,
    #process h2,
    #process .process-desc{
        max-width:100%;
    }
}