HCG INDUSTRIES / TECHNICAL SKILLS SECTION
   Pertecnica Academy — Advanced Marine Systems & Maritime Logistics
   Clean Corporate / Engineering Visual System
   Plug-and-Play: no external icon files required

   IMPORTANT:
   The 12 icon definitions below are mapped IN ORDER to the
   12 Technical Skill Categories currently displayed by the
   frontend. Do not change the card order without updating
   the corresponding nth-child() icon.
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.hcg-industries-section{
    position:relative;
    overflow:hidden;
    padding:88px 0 82px;

    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(10,46,99,.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 24%,
            rgba(212,175,55,.055),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #eef4f8 100%
        );
}


/* subtle technical background */
.hcg-industries-section::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(10,46,99,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(10,46,99,.022) 1px,
            transparent 1px
        );

    background-size:64px 64px;

    mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0,0,0,.75) 18%,
            rgba(0,0,0,.35) 75%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0,0,0,.75) 18%,
            rgba(0,0,0,.35) 75%,
            transparent 100%
        );

    pointer-events:none;
}


/* abstract engineering field */
.hcg-industries-section::after{
    content:"";
    position:absolute;

    width:420px;
    height:420px;

    right:-210px;
    top:-170px;

    border:1px solid rgba(10,46,99,.055);
    border-radius:50%;

    box-shadow:
        0 0 0 45px rgba(10,46,99,.018),
        0 0 0 90px rgba(212,175,55,.018);

    pointer-events:none;
}


.hcg-industries-section .hcg-container{
    position:relative;
    z-index:2;

    max-width:1320px;
}


/* ==========================================================
   HEADER
========================================================== */

.hcg-industries-header{
    max-width:900px;
    margin:0 auto 46px;
    text-align:center;
}

.hcg-industries-header::before{
    content:"OUR REACH. YOUR ADVANTAGE.";

    display:block;
    margin-bottom:14px;

    color:#C49A24;

    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.hcg-industries-header::after{
    content:"";

    display:block;

    width:42px;
    height:2px;

    margin:18px auto 0;

    background:#D4AF37;
}

.hcg-industries-header h2{
    margin:0 0 14px;

    color:#0A2E63;

    font-size:clamp(34px,4vw,50px);
    font-weight:800;

    line-height:1.08;
    letter-spacing:-.035em;
}

.hcg-industries-header p{
    max-width:860px;

    margin:0 auto;

    color:#50627A;

    font-size:17px;
    line-height:1.7;
}


/* ==========================================================
   GRID
========================================================== */

.hcg-industries-grid{
    display:grid;

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

    gap:18px;
}


/* ==========================================================
   TECHNICAL SKILL CARD
========================================================== */

.hcg-industries-card{
    position:relative;

    min-height:190px;

    padding:26px 20px 24px;

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

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(255,255,255,.90)
        );

    border:1px solid rgba(10,46,99,.07);

    border-radius:20px;

    text-decoration:none !important;

    box-shadow:
        0 12px 30px rgba(10,46,99,.055);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.hcg-industries-card:hover{
    transform:translateY(-5px);

    border-color:rgba(212,175,55,.48);

    box-shadow:
        0 20px 42px rgba(10,46,99,.10);
}


/* ==========================================================
   ICON
   12 icons are embedded directly in CSS.

   ORDER:
   01 Welding & Metal Fabrication
   02 Marine Mechanical Maintenance
   03 Electrical Installation & Maintenance
   04 Industrial Automation & PLC/SCADA
   05 Marine Piping & HVAC Systems
   06 Marine Electrical & Power Systems
   07 Instrumentation & Control Systems
   08 CNC Machining & Advanced Manufacturing
   09 CAD / 3D Design & Engineering Drafting
   10 NDT, Inspection & Quality Control
   11 Marine Electronics, Embedded Systems & IoT
   12 Marine Robotics, ROV & Autonomous Systems
========================================================== */

.hcg-industries-card::before{
    content:"";

    display:block;

    width:64px;
    height:64px;

    margin-bottom:17px;

    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;

    flex:0 0 64px;

    transition:
        transform .25s ease;
}

.hcg-industries-card:hover::before{
    transform:translateY(-3px) scale(1.04);
}


/* ==========================================================
   01 — CONSTRUCTION & INFRASTRUCTURE
   Icon: building + construction crane
========================================================== */

.hcg-industries-card:nth-child(1)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 76h64'/%3E%3Cpath d='M24 76V34h30v42'/%3E%3Cpath d='M54 76V45h18v31'/%3E%3Cpath d='M24 34l15-12 15 12'/%3E%3Cpath d='M30 42h6M42 42h6M30 52h6M42 52h6M30 62h6M42 62h6'/%3E%3Cpath d='M62 55h6M62 64h6'/%3E%3Cpath d='M18 22h42M28 22v-8M52 22v-8M28 14h24'/%3E%3Cpath d='M39 22v12'/%3E%3C/g%3E%3Cpath d='M39 34v8l-3 4 3 4 3-4-3-4' stroke='%23D4AF37' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   02 — MANUFACTURING & INDUSTRIAL ENGINEERING
   Icon: factory + production
========================================================== */

.hcg-industries-card:nth-child(2)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 76h72'/%3E%3Cpath d='M18 76V42l18 10V34l18 10V27l24 13v36'/%3E%3Cpath d='M27 61h8M27 70h8M45 58h8M45 68h8M64 53h10M64 63h10'/%3E%3Cpath d='M18 42V27h12v8'/%3E%3C/g%3E%3Cpath d='M76 27v10M71 32h10' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   03 — AUTOMOTIVE & AUTO COMPONENTS
   Icon: automobile
========================================================== */

.hcg-industries-card:nth-child(3)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 64h68'/%3E%3Cpath d='M20 64V48l8-15h38l10 15v16'/%3E%3Cpath d='M28 33l7 15h30l-7-15'/%3E%3Cpath d='M20 48h56'/%3E%3Ccircle cx='29' cy='64' r='7'/%3E%3Ccircle cx='67' cy='64' r='7'/%3E%3Cpath d='M14 54h6M76 54h6'/%3E%3Cpath d='M38 42h20'/%3E%3C/g%3E%3Cpath d='M51 25l-7 10h6l-5 9' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   04 — POWER & ENERGY
   Icon: power transmission tower + electricity
========================================================== */

.hcg-industries-card:nth-child(4)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 12v62M28 76h40M39 76l9-64 9 64'/%3E%3Cpath d='M35 27h26M31 40h34M27 54h42'/%3E%3Cpath d='M35 27l-11-8M61 27l11-8M31 40l-15-8M65 40l15-8M27 54l-12-7M69 54l12-7'/%3E%3Cpath d='M18 19h-8M78 19h8'/%3E%3C/g%3E%3Cpath d='M52 22l-9 17h8l-6 14' stroke='%23D4AF37' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   05 — OIL, GAS & PETROCHEMICALS
   Icon: refinery / process plant
========================================================== */

.hcg-industries-card:nth-child(5)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 76h72'/%3E%3Cpath d='M20 76V45h14v31M34 76V31h12v45M46 76V42h14v34M60 76V24h14v52'/%3E%3Cpath d='M23 45v-9h8v9M63 24v-9h8v9'/%3E%3Cpath d='M20 57h14M46 57h14M60 48h14'/%3E%3Cpath d='M34 31l12 11M46 42l14-18'/%3E%3C/g%3E%3Cpath d='M69 36l-7 12h6l-5 10' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   06 — ELECTRONICS & SEMICONDUCTOR
   Icon: semiconductor chip
========================================================== */

.hcg-industries-card:nth-child(6)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='24' y='24' width='48' height='48' rx='4'/%3E%3Crect x='36' y='36' width='24' height='24' rx='2'/%3E%3Cpath d='M36 43H27M36 53H27M60 43h9M60 53h9M43 36v-9M53 36v-9M43 60v9M53 60v9'/%3E%3Cpath d='M27 32v-5M69 32v-5M27 64v5M69 64v5'/%3E%3C/g%3E%3Cpath d='M44 44h8v8h-8z' stroke='%23D4AF37' stroke-width='3'/%3E%3C/svg%3E");
}


/* ==========================================================
   07 — PHARMA INDUSTRY
   Icon: pharmaceutical capsule + flask
========================================================== */

.hcg-industries-card:nth-child(7)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M31 18h20M37 18v15l-14 27c-4 8 2 16 11 16h14c9 0 15-8 11-16L45 33V18'/%3E%3Cpath d='M29 57h27M27 66h31'/%3E%3Crect x='57' y='30' width='20' height='34' rx='10' transform='rotate(35 57 30)'/%3E%3Cpath d='M57 45l13 9'/%3E%3C/g%3E%3Cpath d='M72 20v10M67 25h10' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   08 — RENEWABLE ENERGY
   Icon: solar panel + wind turbine
========================================================== */

.hcg-industries-card:nth-child(8)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 76h72'/%3E%3Cpath d='M18 70l8-28h30l8 28H18z'/%3E%3Cpath d='M26 52h30M23 62h36M36 42l-5 28M48 42l5 28'/%3E%3Cpath d='M72 70V35M72 35l-13-8M72 35l12-10M72 35l4 15'/%3E%3Ccircle cx='72' cy='35' r='3'/%3E%3C/g%3E%3Cpath d='M72 15v8M67 20h10M69 17l6 6M75 17l-6 6' stroke='%23D4AF37' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   09 — CHEMICALS & PROCESS INDUSTRIES
   Icon: process vessel / chemical plant
========================================================== */

.hcg-industries-card:nth-child(9)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 76h72'/%3E%3Cpath d='M24 76V34h22v42M46 76V47h16v29M62 76V27h12v49'/%3E%3Cpath d='M24 34h22M62 27h12M29 25h12v9H29z'/%3E%3Cpath d='M35 25V16h5v9M68 27V15h5v12'/%3E%3Cpath d='M24 50h22M62 52h12M46 61h16'/%3E%3Cpath d='M46 47l16-20'/%3E%3C/g%3E%3Cpath d='M34 42c4-6 8 2 11-4' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   10 — RAILWAYS, METRO & TRANSPORTATION
   Icon: railway train
========================================================== */

.hcg-industries-card:nth-child(10)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 76h72M20 84h56'/%3E%3Crect x='24' y='20' width='48' height='48' rx='10'/%3E%3Cpath d='M24 42h48M32 30h11M53 30h11'/%3E%3Cpath d='M34 68l-7 8M62 68l7 8'/%3E%3Ccircle cx='36' cy='55' r='4'/%3E%3Ccircle cx='60' cy='55' r='4'/%3E%3Cpath d='M32 76h32'/%3E%3C/g%3E%3Cpath d='M47 20v-7h7v7' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   11 — DEFENCE & ADVANCED MANUFACTURING
   Icon: precision mechanical / defence technology
========================================================== */

.hcg-industries-card:nth-child(11)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 12l28 10v20c0 18-12 29-28 38-16-9-28-20-28-38V22l28-10z'/%3E%3Cpath d='M48 28v25M36 40h24M40 58h16'/%3E%3Ccircle cx='48' cy='40' r='8'/%3E%3Cpath d='M48 32v-7M40 40h-7M56 40h7M48 48v7'/%3E%3C/g%3E%3Cpath d='M67 18l-7 12h6l-5 10' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   12 — AGRO BASED INDUSTRIES
   Icon: agriculture / crop processing
========================================================== */

.hcg-industries-card:nth-child(12)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 76h72'/%3E%3Cpath d='M24 76V53M24 53c0-12 9-20 20-20M24 58c7-9 16-12 25-10'/%3E%3Cpath d='M45 33c3-9 11-14 20-13 1 10-5 18-15 20'/%3E%3Cpath d='M55 76V48h20v28'/%3E%3Cpath d='M55 48l10-8 10 8M61 57h8M61 66h8'/%3E%3C/g%3E%3Cpath d='M39 24c4-5 9-7 15-7' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================
   TITLE
========================================================== */

.hcg-industries-card span{
    display:block;

    max-width:240px;

    color:#0A2E63;

    font-size:16px;
    font-weight:700;

    line-height:1.42;

    transition:
        color .22s ease;
}

.hcg-industries-card:hover span{
    color:#173F6D;
}


/* ==========================================================
   GOLD UNDERLINE
========================================================== */

.hcg-industries-card::after{
    content:"";

    width:32px;
    height:2px;

    margin-top:15px;

    background:#D4AF37;

    border-radius:10px;

    transition:
        width .25s ease;
}

.hcg-industries-card:hover::after{
    width:48px;
}


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

.hcg-industries-footer{
    margin-top:38px;

    text-align:center;
}

.hcg-industries-button{
    position:relative;

    display:inline-flex;

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

    min-height:54px;

    padding:0 32px;

    border:1px solid #0A2E63;
    border-radius:11px;

    background:#0A2E63;

    color:#fff !important;

    font-size:15px;
    font-weight:700;

    text-decoration:none !important;

    box-shadow:
        0 12px 28px rgba(10,46,99,.18);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.hcg-industries-button::after{
    content:"→";

    margin-left:12px;

    color:#F0C94F;

    font-size:20px;
    line-height:1;

    transition:
        transform .22s ease;
}

.hcg-industries-button:hover{
    transform:translateY(-3px);

    background:#123A67;

    box-shadow:
        0 17px 34px rgba(10,46,99,.24);
}

.hcg-industries-button:hover::after{
    transform:translateX(4px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1100px){

    .hcg-industries-section{
        padding:72px 0;
    }

    .hcg-industries-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}


/* ==========================================================
   TABLET / MOBILE
========================================================== */

@media (max-width:768px){

    .hcg-industries-section{
        padding:62px 0;
    }

    .hcg-industries-section .hcg-container{
        padding-left:18px;
        padding-right:18px;
    }

    .hcg-industries-header{
        margin-bottom:34px;
    }

    .hcg-industries-header h2{
        font-size:36px;
    }

    .hcg-industries-header p{
        font-size:16px;
    }

    .hcg-industries-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .hcg-industries-card{
        min-height:175px;
        padding:22px 14px;
    }

    .hcg-industries-card::before{
        width:58px;
        height:58px;
        flex-basis:58px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:540px){

    .hcg-industries-section{
        padding:54px 0;
    }

    .hcg-industries-section::after{
        right:-280px;
        top:-100px;
    }

    .hcg-industries-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .hcg-industries-card{
        min-height:154px;
    }

    .hcg-industries-header h2{
        font-size:32px;
    }

    .hcg-industries-header p{
        font-size:15px;
    }

    .hcg-industries-button{
        width:100%;
        max-width:320px;
    }
}