/*=========================================================
    MOON SHINE GROUP WEBSITE
    STYLE.CSS VERSION 2.0
=========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    background:#ffffff;

    color:#2d2d2d;

    overflow-x:hidden;

    line-height:1.1;

}

/*=========================================================
    ROOT VARIABLES
=========================================================*/

:root{

    /*==================================================
    BRAND COLOURS
    ==================================================*/

    --primary:#071b30;

    --secondary:#0b2440;

    --gold:#cfa24a;

    --gold-hover:#b8892f;

    --white:#ffffff;

    --text:#444444;

    --light:#f8f8f8;

    --border:#e5e5e5;

    /*==================================================
    LAYOUT
    ==================================================*/

    --container:1400px;

    /*==================================================
    ANIMATION
    ==================================================*/

    --transition:.35s;

    /*==================================================
    GLOBAL SPACING SYSTEM
    ==================================================*/

    --section-space:72px;

    --card-padding-y:32px;

    --card-padding-x:26px;

    --heading-gap:14px;

    --paragraph-gap:20px;

    --button-padding-y:11px;

    --button-padding-x:24px;

    /*==================================================
    BORDER RADIUS
    ==================================================*/

    --radius-card:10px;

    --radius-button:6px;

    --radius-image:10px;

}

/*=========================================================
    COMMON ELEMENTS
=========================================================*/

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

.container{

    width:100%;

    max-width:var(--container);

    margin:0 auto;

    padding:0 1px;
    
/* outline:2px solid red; */

}

section{

    position:relative;

}
/*=========================================================
    TOP HEADER
=========================================================*/

#top-bar{

/*    background:#08131d; */

    padding:10px 0 4px;

}

.topbar-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:36px;

    background:#08131d;

    padding:12px 20px 8px;

}

/*----------------------------------*/

.logo{

    flex:0 0 235px;

}

.logo img{

    width:200px;

    height:auto;

    display:block;

}

/*----------------------------------*/

.top-info{

    flex:1;

    color:#ffffff;

}

/*----------------------------------*/

.info-title{

    color:var(--gold);

    font-size:15px;

    font-weight:700;

    margin-bottom:8px;

}

.info-text{

    font-size:14px;

    line-height:24px;

    color:#ffffff;

}

/*----------------------------------*/

.divider{

    width:1px;

    height:56px;

    background:rgba(207,162,74,.45);

}

/*----------------------------------*/

.header-button{

    flex:0 0 auto;

}

.header-button a{

    display:inline-block;

    background:var(--gold);

    color:#fff;

    padding:16px 36px;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.3px;

}

.header-button a:hover{

    background:var(--gold-hover);

}
/*=========================================================
    NAVIGATION
=========================================================*/

#navbar{

    background:transparent;

    padding:1px 0 5px;

}

#navbar .container{

    background:#0b1b2b;

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

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

}

.nav-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    column-gap:22px;

    row-gap:18px;

    padding:2px 0 8px;

}

.nav-menu li{

    position:relative;
    white-space:nowrap;

}

.nav-menu a{

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    letter-spacing:.35px;

    text-transform:uppercase;

     transition:color .25s ease;

}

.nav-menu a:hover{

    color:var(--gold);

}

.nav-menu li a.active{

    color:var(--gold) !important;

    font-weight:700;

    border-bottom:2px solid var(--gold);

    padding-bottom:4px;

}
/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 28-July-2026
=========================================================*/

/*=========================================================
HOME PAGE - HERO BANNER
=========================================================*/

#hero{

    background:#ffffff;

    min-height:400px;

    position:relative;
    padding:8px 0;

}

.hero-wrapper{

    background:url("../images/hero/a1-hero-banner.jpg") center center/cover no-repeat;

    min-height:400px;

    position:relative;

    overflow:hidden;

}

.hero-overlay{

    background:rgba(8,19,29,.50);

    min-height:400px;

    width:100%;

}

.hero-container{

    display:flex;

    align-items:flex-start;

    min-height:400px;

    padding-top:15px 0 15px;

}

.hero-content{

    width:40%;

    color:#fff;

    padding-left:10px;

}

.hero-content h1{

    margin:0;

    font-size:35px;

    line-height:40px;

    font-weight:800;

}

.hero-content span{

    color:#d6a347;

}

.hero-subtitle{

    margin-top:30px;

    font-size:24px;

    line-height:28px;

}

.hero-description{

    margin-top:18px;

    font-size:18px;

    line-height:28px;

    max-width:560px;

}
/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 28-July-2026
=========================================================*/


/*=========================================================
FEATURE STRIP
=========================================================*/

#feature-strip{

    background:#07131d;

    color:#fff;

    margin-top:12px;

    margin-bottom:12px;

    padding:8px 8px;

}

.feature-strip-grid{

    display:grid;

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

    gap:20px;

    align-items:stretch;

}

.feature-strip-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    background:#102b46;

    border:1px solid rgba(214,163,71,.25);

    border-radius:10px;

    padding:20px 18px;

    min-height:20px;

    transition:all .35s ease;

     justify-content:flex-start;

}
.feature-strip-box:hover{

    transform:translateY(-8px);

    border-color:#d6a347;

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

}
.feature-strip-box img{

    width:70px;

    height:50px;

    object-fit:contain;

    display:block;

    margin:0 auto 12px;

    transition:transform .35s ease;

}

.feature-strip-box:hover img{

    transform:scale(1.08);

}

.feature-strip-box h3{

    color:#d6a347;

    font-size:21px;

    line-height:28px;

    font-weight:700;

    margin-bottom:8px;

    min-height:48px;

}

.feature-strip-box p{

    color:#fff;

    font-size:15px;

    line-height:24px;

    margin:0;

}
.feature-strip-box strong{

    color:#d6a347;

    font-weight:600;

}

/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 28-July-2026
=========================================================*/


/*=========================================================
COMMITMENT
=========================================================*/

#commitment{

    background:transparent;

    padding:8px 0;

}

#commitment .container{

    background:#07131d;

    text-align:center;

    padding:8px 8px;

}

#commitment h2{

    color:#d6a347;

    font-size:36px;

}

#commitment span{

    font-style:italic;

}


/*=========================================================
INDEX - CALL TO ACTION BUTTONS
=========================================================*/

#hero-buttons{

    background:transparent;

    padding-bottom:8px;

}

#hero-buttons .container{

    background:#06382b;

    padding:8px 10px;

}

/*---------------------------------------------------------
BUTTON ROW
---------------------------------------------------------*/

.index-button-row{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:80px;

    width:100%;

    padding:10px 0;

}

/*---------------------------------------------------------
COMMON BUTTON STYLES
---------------------------------------------------------*/

.index-gold-btn,
.index-outline-btn{

    display:inline-block;

    text-decoration:none;

    padding:18px 42px;

    border-radius:5px;

    font-weight:700;

    transition:all .35s ease;

    cursor:pointer;

}

/*---------------------------------------------------------
GOLD BUTTON
---------------------------------------------------------*/

.index-gold-btn{

    background:#d6a347;

    color:#ffffff;

}

/*---------------------------------------------------------
OUTLINE BUTTON
---------------------------------------------------------*/

.index-outline-btn{

    background:transparent;

    color:#ffffff;

    border:2px solid #d6a347;

}

/*---------------------------------------------------------
HOVER EFFECTS
---------------------------------------------------------*/

.index-gold-btn:hover{

    background:#c7922e;

    transform:translateY(-3px);

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

}

.index-outline-btn:hover{

    background:#d6a347;

    color:#07131d;

    transform:translateY(-3px);

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

}

/*---------------------------------------------------------
CLICK EFFECT
---------------------------------------------------------*/

.index-gold-btn:active,
.index-outline-btn:active{

    transform:translateY(0);

}

/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 28-July-2026
=========================================================*/


/*==================================================
INDEX - WHO WE ARE
==================================================*/

.who-left{

    position:relative;

    z-index:1;

}

.who-left::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        url("../images/backgrounds/a3-index-globe2.png")
        center center / 100% no-repeat;

    opacity:.25;

    pointer-events:none;

    z-index:-1;

}

/*--------------------------------------------------
LAYOUT
--------------------------------------------------*/

.who-container{

    display:grid;

    grid-template-columns:50% 47.2%;

    gap:40px;

    align-items:center;

}

/*--------------------------------------------------
LEFT COLUMN
--------------------------------------------------*/

.who-left h2{

    font-size:38px;

    color:#0b3b2f;

    font-weight:800;

    line-height:46px;

    margin-bottom:8px;

}

.who-left h3{

    font-size:22px;

    line-height:30px;

    color:#111;

    font-weight:600;

    margin-bottom:12px;

}

.who-left ul{

    list-style:none;

}

.who-left li{

    position:relative;

    padding-left:34px;

    margin-bottom:16px;

    line-height:20px;

    color:#444;

    font-size:16px;

}

.who-left li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#d89b2b;

    font-size:20px;

    font-weight:bold;

}

/*--------------------------------------------------
BUTTON
--------------------------------------------------*/

.btn-dark{

    display:inline-block;

    margin-top:6px;

    background:#061d36;

    color:#ffffff;

    text-decoration:none;

    padding:14px 26px;

    border-radius:6px;

    font-size:15px;

    font-weight:700;

    transition:all .35s ease;

}

.btn-dark:hover{

    background:#d89b2b;

    transform:translateY(-3px);

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

}

/*--------------------------------------------------
RIGHT COLUMN
--------------------------------------------------*/

.who-right{

    width:100%;

    overflow:hidden;

}

.who-right img{

    width:100%;

    height:380px;

    object-fit:cover;

    display:block;

    border-radius:10px 10px 0 0;

}

/*--------------------------------------------------
STATISTICS
--------------------------------------------------*/

.stats-box{

    display:grid;

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

    background:#071c33;

    color:#ffffff;

    margin-top:0;

    padding:18px 10px;

    border-radius:0 0 10px 10px;

    text-align:center;

}

.stat{

    padding:0 8px;

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

}

.stat:last-child{

    border-right:none;

}

.stat h2{

    color:#d89b2b;

    font-size:46px;

    font-weight:700;

    margin-bottom:8px;

}

.stat p{

    color:#dddddd;

    font-size:16px;

    line-height:22px;

    font-weight:500;

}

/*==================================================
WHY CUSTOMERS
==================================================*/

#why-customers{

    background:#ffffff;

    padding:8px 0;

}

#why-customers h2{

    text-align:center;

    font-size:38px;

    font-weight:800;

    line-height:50px;

    color:#f5f5f5;

    background:#123B63;

    padding:10px 20px;

    margin:0 auto 18px;

}

.section-subtitle{

    text-align:center;

    font-size:20px;

    color:#666;

    line-height:34px;

    max-width:900px;

    margin:0 auto 60px;

}

.why-grid{

    display:grid;

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

    gap:22px;

}

.why-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:10px;

    padding:22px 16px;

    text-align:center;

    transition:.35s;

    min-height:300px;

}

.why-card:hover{

    transform:translateY(-6px);

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

}

.why-card img{

    width:70px;

    height:70px;

    object-fit:contain;

    display:block;

    margin:0 auto 22px;

}

.why-card h3{

    font-size:20px;

    line-height:28px;

    color:#111;

    margin-bottom:16px;

    font-weight:700;

}

.why-card p{

    color:#666;

    line-height:26px;

    font-size:15px;

}

/*==================================================
SERVICES OVERVIEW
==================================================*/

#services-overview{

    padding:8px 0;

    background:#ffffff;

}

.overview-grid{

    display:grid;

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

    gap:26px;

    align-items:stretch;

}

.overview-box{

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:10px;

    padding:30px 24px;

    transition:.30s;

    display:flex;

    flex-direction:column;

}

.overview-box:hover{

    box-shadow:0 12px 28px rgba(0,0,0,.08);

    transform:translateY(-5px);

}

.overview-box h3{

    font-size:21px;

    font-weight:700;

    color:#0d2b52;

    line-height:1.18;

    margin-bottom:18px;

    text-transform:uppercase;

    min-height:52px;

}

.overview-box .small-title{

    font-size:17px;

    font-weight:600;

    color:#0d2b52;

    line-height:26px;

    margin-bottom:22px;

    min-height:54px;

}

.overview-list{

    list-style:none;

    margin:0;

    padding:0;

}

.overview-list li{

    position:relative;

    padding-left:24px;

    margin-bottom:10px;

    color:#555;

    line-height:24px;

    font-size:15px;

}

.overview-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#d89b2b;

    font-weight:700;

}

.country-map{

    width:100%;

    margin:18px auto;

    display:block;

}

.erp-image{

    width:100%;

    margin:18px auto;

    display:block;

}
.products-image{

    width:100%;

    max-width:230px;

    display:block;

    margin:18px auto 22px;

}

.small-btn{

    margin-top:auto;

    align-self:flex-start;

    display:inline-block;

    padding:14px 24px;

    background:#061d36;

    color:#fff;

    border-radius:6px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.30s;

}

.small-btn:hover{

    background:#d89b2b;

    transform:translateY(-2px);

}

/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 28-July-2026
=========================================================*/


/*==================================================
BUSINESS FEATURES
==================================================*/

#business-features{

    background:transparent;

    padding:8px 0;

}

#business-features .container{

    background:#071b31;

    padding:20px;

    border-radius:12px;

}

.feature-grid{

    display:grid;

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

    gap:22px;

    align-items:stretch;

}

.feature-box{

    background:#0b243d;

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

    border-radius:10px;

    padding:28px 20px;

    text-align:center;

    transition:.30s;

    display:flex;

    flex-direction:column;

}

.feature-box:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 30px rgba(0,0,0,.32);

}

.feature-box img{

    width:66px;

    height:66px;

    object-fit:contain;

    margin:0 auto 20px;

}

.feature-box h3{

    color:#d89b2b;

    font-size:18px;

    font-weight:700;

    line-height:26px;

    margin-bottom:18px;

    min-height:56px;

}

.feature-box p{

    color:#d6d6d6;

    font-size:15px;

    line-height:26px;

    min-height:120px;

    margin-bottom:24px;

}

.feature-box a{

    display:inline-block;

    margin-top:auto;

    align-self:center;

    padding:12px 22px;

    border:1px solid #d89b2b;

    color:#ffffff;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    border-radius:6px;

    cursor:pointer;

    transition:all .30s ease;

}

.feature-box a:hover{

    background:#d89b2b;

    color:#071b31;

    transform:translateY(-2px);

}

/*==================================================
QUICK ACCESS (FAQ, SUBMIT ENQUIRY & DOWNLOADS)
==================================================*/

#quick-access{

    background:transparent;

    padding:8px 0;

}

#quick-access .container{

    background:#071b31;

    padding:25px;

}

.quick-grid{

    display:grid;

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

    gap:26px;

    align-items:stretch;

}

.quick-box{

    background:#102b46;

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

    border-radius:10px;

    padding:26px 24px;

    text-align:center;

    display:flex;

    flex-direction:column;

    transition:.30s;

}

.quick-box:hover{

    transform:translateY(-8px);

    border-color:#d89b2b;

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

.quick-box img{

    width:72px;

    height:72px;

    object-fit:contain;

    margin:0 auto 12px;

}

.quick-box h3{

    color:#d89b2b;

    font-size:28px;

    font-weight:700;

    margin-bottom:12px;

}

.quick-box p{

    color:#d6d6d6;

    font-size:22px;

    line-height:30px;

    min-height:72px;

    margin-bottom:28px;

}

.quick-box a{

    display:inline-block;

    margin-top:auto;

    align-self:center;

    padding:13px 26px;

    border:1px solid #d89b2b;

    border-radius:6px;

    text-decoration:none;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    transition:all .30s ease;

}

.quick-box a:hover{

    background:#d89b2b;

    color:#071b31;

    transform:translateY(-2px);

}

/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 28-July-2026
=========================================================*/

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

#footer{

    background:transparent;

    color:#ffffff;

    margin-top:0;

    font-family:'Segoe UI',sans-serif;

    padding:8px 0 4px;

}

#footer .container{

    background:#08131d;

    width:100%;

    margin:0 auto;

    padding:16px 32px;

    border-radius:18px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2.5fr 1fr 1.25fr 1.25fr 1fr 1fr 1fr;

    gap:36px;

    align-items:start;

}

.footer-about img{

    width:240px;

    margin-bottom:16px;

    display:block;

}

.footer-about p{

    color:#d8d8d8;

    font-size:13px;

    line-height:12px;

    max-width:300px;

}

.footer-column h4{

    color:#d89b2b;

    font-size:18px;

    font-weight:700;

    letter-spacing:.4px;

    margin-bottom:16px;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:9px;

}

.footer-column a{

    color:#ffffff;

    text-decoration:none;

    font-size:16px;

    line-height:24px;

    transition:all .30s ease;

}

.footer-column a:hover{

    color:#d89b2b;

}

.footer-social{

    display:flex;

    gap:14px;

    margin-top:14px;

}

.footer-social a{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#ffffff;

    transition:all .30s ease;

}

.footer-social a:hover{

    background:#d89b2b;

    color:#08131d;

}

#footer-bottom{

    background:transparent;

    padding:4px 0 8px;

}

#footer-bottom .container{

    background:#06111b;

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

    border-radius:10px;

    text-align:center;

    padding:16px 20px;

}

.footer-slogan{

    color:#d89b2b;

    font-size:20px;

    font-style:italic;

    font-weight:600;

    letter-spacing:.3px;

    margin-bottom:5px;

}

#footer-bottom p:last-child{

    color:#cfcfcf;

    font-size:15px;

    letter-spacing:.2px;

}

/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 29-July-2026
=========================================================*/

/*==============================================================================
11.2 ABOUT US PAGE
==============================================================================*/

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

#about-hero{

    background:#ffffff;

    overflow:hidden;

    padding:0;

}

.about-hero-grid{

    display:grid;

    grid-template-columns:40% 60%;

    min-height:400px;

    background:transparent;

}

/*=========================================================
HERO - LEFT PANEL
=========================================================*/

.about-left{

    display:flex;

    align-items:center;

    background:#05281f;

    display:flex;

    align-items:center;

}

.about-left-content{

    max-width:420px;

    padding:0 10px; 

}

.about-left-content h1{

    font-size:45px;

    line-height:1;

    font-weight:800;

    color:#ffffff;

    margin:0 0 30px;

}

.about-left-content h2{

    font-size:22px;

    line-height:1.45;

    font-weight:700;

    color:#d7a63d;

    margin:0 0 48px;

}

.gold-line{

    width:135px;

    height:3px;

    background:#d7a63d;

    margin-bottom:30px;

}

.about-left-content p{

    font-size:17px;

    line-height:1.9;

    color:#f3f3f3;

    margin:20;

}

/*=========================================================
HERO - RIGHT PANEL
=========================================================*/

.about-right{

    display:flex;

    align-items:stretch;

    overflow:hidden;

}

.about-right img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


/*==========================================================*
* OUR JOURNEY — APPROVED CORPORATE TIMELINE
*==========================================================*/

#our-journey {

    background: #f6f8fb;

    padding: 18px 0 30px;

}


/*==========================================================
JOURNEY HEADING
==========================================================*/

#our-journey .journey-heading {

    text-align: center;

    margin-bottom: 48px;

}


#our-journey .journey-heading h2 {

    margin: 0;

    color: #0b6d55;

    font-size: 42px;

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1.15;

}


/*==========================================================
GOLD DECORATIVE LINE + CENTRE DOT
==========================================================*/

.journey-heading-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 14px auto 15px;

}


.journey-heading-line span {

    display: block;

    width: 155px;

    height: 2px;

    background: #d7a63d;

}


.journey-heading-line i {

    display: block;

    width: 10px;

    height: 10px;

    background: #d7a63d;

    border-radius: 50%;

}


/*==========================================================
SUBTITLE
==========================================================*/

.journey-subtitle {

    max-width: 780px;

    margin: 0 auto;

    color: #333333;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.65;

    text-align: center;

}


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

.journey-row {

    display: grid;

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

    column-gap: 36px;

    row-gap: 55px;

    position: relative;

}


/*==========================================================
ALL JOURNEY CARDS
==========================================================*/

.journey-card {

    position: relative;

    min-width: 0;

    min-height: 335px;

    padding: 28px 18px 22px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.08);

    display: flex;

    flex-direction: column;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/*==========================================================
ROW 1 — 01 TO 05
==========================================================*/

.journey-card:nth-child(1) {

    grid-column: 1;

    grid-row: 1;

}


.journey-card:nth-child(2) {

    grid-column: 2;

    grid-row: 1;

}


.journey-card:nth-child(3) {

    grid-column: 3;

    grid-row: 1;

}


.journey-card:nth-child(4) {

    grid-column: 4;

    grid-row: 1;

}


.journey-card:nth-child(5) {

    grid-column: 5;

    grid-row: 1;

}


/*==========================================================
ROW 2 — 10 TO 06 VISUALLY
==========================================================*/

.journey-card:nth-child(6) {

    grid-column: 5;

    grid-row: 2;

}


.journey-card:nth-child(7) {

    grid-column: 4;

    grid-row: 2;

}


.journey-card:nth-child(8) {

    grid-column: 3;

    grid-row: 2;

}


.journey-card:nth-child(9) {

    grid-column: 2;

    grid-row: 2;

}


.journey-card:nth-child(10) {

    grid-column: 1;

    grid-row: 2;

}


/*==========================================================
CARD NUMBER BADGES
==========================================================*/

.journey-card::before {

    position: absolute;

    top: -28px;

    left: 50%;

    transform: translateX(-50%);

    width: 52px;

    height: 31px;

    border-radius: 8px 8px 0 0;

    background: #004d43;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.5px;

    z-index: 10;

}


/*==========================================================
BADGE NUMBERS
==========================================================*/

.journey-card:nth-child(1)::before {

    content: "01";

}


.journey-card:nth-child(2)::before {

    content: "02";

}


.journey-card:nth-child(3)::before {

    content: "03";

}


.journey-card:nth-child(4)::before {

    content: "04";

}


.journey-card:nth-child(5)::before {

    content: "05";

}


.journey-card:nth-child(6)::before {

    content: "06";

}


.journey-card:nth-child(7)::before {

    content: "07";

}


.journey-card:nth-child(8)::before {

    content: "08";

}


.journey-card:nth-child(9)::before {

    content: "09";

}


.journey-card:nth-child(10)::before {

    content: "10";

}


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

.journey-card .journey-image {

    flex: 0 0 74px;

    width: 74px;

    height: 74px;

    margin: 0 14px 0 0;

    border-radius: 50%;

    overflow: hidden;

    background: #ffffff;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

}


.journey-card .journey-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 0;

    display: block;

}


/*==========================================================
IMAGE + YEAR + TITLE AREA

We use the existing journey-content structure and position
the image alongside the title area.
==========================================================*/

.journey-card {

    display: grid;

    grid-template-columns: 74px 1fr;

    grid-template-rows: auto 1fr;

    column-gap: 8px;

}


.journey-card .journey-image {

    grid-column: 1;

    grid-row: 1;

}


.journey-card .journey-content {

    grid-column: 1 / -1;

    grid-row: 1 / -1;

    display: block;

    padding-left: 82px;

}


.journey-card .journey-content h3 {

    margin: 0 0 20px;

    padding-left: 14px;

    border-left: 2px solid #d7a63d;

    color: #004d43;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.35;

    min-height: 60px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/*==========================================================
YEAR
==========================================================*/

.journey-card .journey-year {

    display: block;

    margin: 0 0 5px;

    color: #d7a63d;

    font-size: 21px;

    font-weight: 700;

    line-height: 1.15;

}


/*==========================================================
DESCRIPTION
==========================================================*/

.journey-card .journey-content p {

    margin: 0 0 0 -88px;

    width: calc(100% + 88px);

    font-size: 16px;

    color: #555;

    line-height: 1.65;

}


/*==========================================================
TOP ROW ARROWS
==========================================================*/

.journey-card:nth-child(1)::after,
.journey-card:nth-child(2)::after,
.journey-card:nth-child(3)::after,
.journey-card:nth-child(4)::after {

    content: "→";

    position: absolute;

    top: 50%;

    right: -35px;

    transform: translateY(-50%);

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #d7a63d;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 700;

    z-index: 20;

}


/*==========================================================
TURNING CONNECTOR — 05 TO 06
==========================================================*/

.journey-card:nth-child(5)::after {

    content: "↘";

    position: absolute;

    right: -17px;

    bottom: -55px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #d7a63d;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 700;

    z-index: 20;

}


/*==========================================================
BOTTOM ROW ARROWS — RIGHT TO LEFT
==========================================================*/

.journey-card:nth-child(6)::after,
.journey-card:nth-child(7)::after,
.journey-card:nth-child(8)::after,
.journey-card:nth-child(9)::after {


    content: "←";

    position: absolute;

    top: 50%;

    left: -35px;

    transform: translateY(-50%);

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #d7a63d;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 700;

    z-index: 20;

}


/*==========================================================
HOVER
==========================================================*/

.journey-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);

}


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

@media (max-width: 1200px) {

    .journey-row {

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

        column-gap: 35px;

        row-gap: 55px;

    }


    .journey-card:nth-child(1),
    .journey-card:nth-child(2),
    .journey-card:nth-child(3),
    .journey-card:nth-child(4),
    .journey-card:nth-child(5),
    .journey-card:nth-child(6),
    .journey-card:nth-child(7),
    .journey-card:nth-child(8),
    .journey-card:nth-child(9),
    .journey-card:nth-child(10) {

        grid-column: auto;

        grid-row: auto;

    }


    .journey-card::after {

        display: none !important;

    }

}


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

@media (max-width: 700px) {

    #our-journey {

        padding: 25px 0 50px;

    }


    #our-journey .journey-heading {

        margin-bottom: 40px;

    }


    #our-journey .journey-heading h2 {

        font-size: 34px;

    }


    .journey-heading-line {

        gap: 8px;

    }


    .journey-heading-line span {

        width: 90px;

    }


    .journey-subtitle {

        padding: 0 15px;

        font-size: 15px;

        line-height: 1.6;

    }


    .journey-row {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .journey-card:nth-child(1),
    .journey-card:nth-child(2),
    .journey-card:nth-child(3),
    .journey-card:nth-child(4),
    .journey-card:nth-child(5),
    .journey-card:nth-child(6),
    .journey-card:nth-child(7),
    .journey-card:nth-child(8),
    .journey-card:nth-child(9),
    .journey-card:nth-child(10) {

        grid-column: auto;

        grid-row: auto;

    }


    .journey-card {

        min-height: auto;

        display: block;

        padding: 28px 20px 24px;

    }


    .journey-card .journey-image {

        width: 76px;

        height: 76px;

        margin: 0 0 15px;

    }







    .journey-card .journey-content h3 {

        padding-left: 12px;

        min-height: auto;

    }


    .journey-card::after {

        display: none !important;

    }

}

/*======================================================
WHO WE ARE TODAY
======================================================*/

#who-we-are{

    padding:0px 0;

    background:#fff;

}

#who-we-are .who-wrapper{

    display:grid;

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

    gap:35px;

    align-items:start;

}

/*======================================================
LEFT COLUMN
======================================================*/

/*======================================================
LEFT COLUMN
======================================================*/

#who-we-are .who-left{

    position:relative;

    overflow:hidden;

    padding-left:10px;

    padding-right:10px;

}

/* Watermark */

#who-we-are .who-left::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("../images/backgrounds/a3-index-globe2.png")
               center center / 150% no-repeat;

    opacity:0.20;

    pointer-events:none;

    z-index:0;

}

/* Keep all text above watermark */

#who-we-are .who-left > *{

    position:relative;

    z-index:1;

}

#who-we-are .who-left h2{

    display:flex;

    align-items:center;

    gap:18px;

    font-size:30px;

    font-weight:700;

    color:#0d3d2d;

    margin-bottom:20px;

    letter-spacing:.5px;

}

#who-we-are .who-left h2 span{

    flex:1;

    height:2px;

    background:#d4a63f;

}

#who-we-are .who-left p{

    font-size:16px;

    line-height:1.75;

    color:#4b4b4b;

    margin-bottom:16px;

    text-align:justify;

}

/* RIGHT */

#who-we-are .who-right{

    text-align:center;

    min-width:0;

}

.about-page #who-we-are .who-right>img{

    width:100%;

    max-width:700px;

    height:10%;

    margin-bottom:17px;

}

/*=========================================
WHO WE ARE - FEATURE BOXES
=========================================*/

#who-we-are .who-features{

    display:grid;

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

    gap:26px;

    margin-top:20px;

}

#who-we-are .feature-box{

    text-align:center;

    padding:1px 5px;

}

/* Icon */

#who-we-are .feature-box img{

    width:72px;
    height:65px;
    object-fit:contain;
    margin:0 auto 18px;
    display:block;

}

/* Heading */

#who-we-are .feature-box h4{

    font-size:20px;
    font-weight:700;
    color:#cfa24a;
    line-height:1.35;
    margin-bottom:14px;
    text-transform:uppercase;
    letter-spacing:.4px;

}

/* Description */

#who-we-are .feature-box p{

    font-size:15px;
    line-height:1.75;
    color:#ffffff;
    margin:0;

}

/*==========================
Responsive
==========================*/

@media(max-width:992px){

    #who-we-are .who-wrapper{

        grid-template-columns:1fr;

    }

    #who-we-are .who-features{

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

        gap:35px;

    }

}

@media(max-width:600px){

    #who-we-are .who-left h2{

        font-size:30px;

    }

    #who-we-are .who-features{

        grid-template-columns:1fr;

    }

}


/*==========================================================
FOUNDER & LEADERSHIP
==========================================================*/

#founder-leadership{

    background:#ffffff;

    padding:8px 0;

}

.founder-wrapper{

    display:grid;

    grid-template-columns:320px 1fr 220px;

    border:2px solid #d4a03c;

    border-radius:14px;

    overflow:hidden;

    background:#ffffff;

}

/*=====================
LEFT
=====================*/

.founder-left{

    border-right:1px solid #ececec;

    background:#fff;

}

.founder-left > img{

    width:100%;

    height:320px;

    object-fit:cover;

    object-position:center;

    display:block;

}

.founder-signature{

    text-align:center;

    padding:36px;

}

.founder-signature img{

    width:120px;

    margin:0 auto 10px;

}

.founder-signature h4{

    font-size:18px;

    font-weight:700;

    color:#222;

    margin-bottom:4px;

}

.founder-signature p{

    font-size:14px;

    color:#666;

}

/*=====================
CENTER
=====================*/

.founder-center{

    padding:16px 20px;

}

.founder-center h2{

    font-size:22px;

    color:#173c2b;

    font-weight:800;

    margin-bottom:10px;

}

.founder-center h3{

    font-size:18px;

    color:#d49b35;

    margin-bottom:6px;

}

.founder-center h5{

    font-size:18px;

    color:#222;

    margin-bottom:22px;

    font-weight:700;

}

.founder-center p{

    font-size:16px;

    line-height:1.9;

    color:#555;

    text-align:justify;

    margin-bottom:8px;

}

/*=====================
QUOTE PANEL
=====================*/

.founder-quote{

    background:#063728;

    color:#ffffff;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

/* Top Quote */

.quote-top{

    font-size:26px;

    color:#d4a03c;

    line-height:1.7;

    margin-bottom:-12px;

}

/* Bottom Quote */

.quote-bottom{

    text-align:right;

    font-size:26px;

    color:#d4a03c;

    line-height:.7;

    margin-top:-12px;

}

.founder-quote p{

    font-size:18px;

    line-height:1.6;

    font-weight:500;

}

/*==========================================================
MISSION | VISION | PROMISE
==========================================================*/

#mission-vision{

    background:#ffffff;

    padding:5px 0 5px;

}

.mvp-grid{

    display:grid;

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

    border:1px solid #d8b16a;

    border-radius:10px;

    overflow:hidden;

    background:#ffffff;

}

/*======================================================
CARD
======================================================*/

.mvp-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:26px 24px;

    min-height:165px;

    border-right:1px solid #e6d7b2;

    background:#ffffff;

}

.mvp-card:last-child{

    border-right:none;

}

/*======================================================
ICON
======================================================*/

.mvp-icon{

    flex:0 0 72px;

}

.mvp-icon img{

    width:92px;

    height:92px;

    object-fit:contain;

    display:block;

}

/*======================================================
CONTENT
======================================================*/

.mvp-content{

    flex:1;

}

.mvp-content h3{

    margin:0 0 10px;

    font-size:18px;

    font-weight:700;

    color:#163c2c;

    text-transform:uppercase;

    line-height:1.25;

}

.mvp-content p{

    margin:0;

    font-size:15px;

    color:#444;

    line-height:1.65;

    text-align:left;

}

/*======================================================
HOVER
======================================================*/

.mvp-card{

    transition:.30s ease;

}

.mvp-card:hover{

    background:#fcfbf7;

}

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

@media(max-width:992px){

    .mvp-grid{

        grid-template-columns:1fr;

    }

    .mvp-card{

        border-right:none;

        border-bottom:1px solid #e6d7b2;

    }

    .mvp-card:last-child{

        border-bottom:none;

    }

}

@media(max-width:640px){

    .mvp-card{

        flex-direction:column;

        text-align:center;

        gap:18px;

        padding:28px 22px;

    }

    .mvp-content p{

        text-align:center;

    }

}

/*==========================================================
OUR CORE VALUES
==========================================================*/

#core-values{

    width:100%;

    padding:8px 0 10px;

    background:#fff;

}

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

.core-heading{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:22px;

}

.core-heading span{

    width:70px;

    height:2px;

    background:#d5a446;

}

.core-heading h2{

    margin:0;

    font-size:30px;

    font-weight:700;

    color:#123a2b;

    text-transform:uppercase;

}

/*==========================
Grid
==========================*/

.core-grid{

    width:100%;

    display:grid;

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

    border:1px solid #d8b26d;

    border-radius:8px;

    overflow:hidden;

}

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

.core-card{

    background:#ffffff;

    text-align:center;

    padding:24px 18px;

    border-right:1px solid #eadbb8;

    min-height:240px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.core-card:last-child{

    border-right:none;

}

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

.core-card img{

    width:64px;

    height:64px;

    object-fit:contain;

    margin-bottom:18px;

}

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

.core-card h3{

    margin:0 0 14px;

    font-size:17px;

    font-weight:700;

    color:#123a2b;

    line-height:1.25;

    min-height:42px;

}

/*==========================
Text
==========================*/

.core-card p{

    margin:0;

    font-size:15px;

    color:#444;

    line-height:1.65;

}

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

.core-card{

    transition:.30s ease;

}

.core-card:hover{

    background:#fcfbf7;

}

/*==========================
Responsive
==========================*/

@media(max-width:1200px){

    .core-grid{

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

    }

    .core-card{

        border-bottom:1px solid #eadbb8;

    }

}

@media(max-width:768px){

    .core-grid{

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

    }

}

@media(max-width:576px){

    .core-grid{

        grid-template-columns:1fr;

    }

    .core-card{

        border-right:none;

    }

}



/*==========================================================*
* LEGAL REGISTRATION & CORPORATE CREDENTIALS
*==========================================================*/

.legal-credentials-section {

    padding: 10px 0;

    background: #FFFDF8;

}


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

.legal-credentials-heading {

    max-width: 1400px;

    margin: 0 auto 18px;

    padding: 16px 24px;

    background: #004D43;

    color: #FFFFFF;

    text-align: center;

    font-size: 25px;

    font-weight: 700;

    letter-spacing: 0.6px;

    border-radius: 6px;

}


/*==========================================================*
* INTRODUCTION
*==========================================================*/

.legal-credentials-intro {

    max-width: 850px;

    margin: 0 auto 15px;

    text-align: center;

    color: #555555;

    font-size: 16px;

    line-height: 1.7;

}


/*==========================================================*
* THREE COMPANY CARDS
*==========================================================*/

.legal-credentials-grid {

    display: grid;

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

    gap: 25px;

    align-items: stretch;

}


/*==========================================================*
* COMPANY CARD
*==========================================================*/

.legal-company-card {

    background: #FFFFFF;

    border: 1px solid #E8D8A8;

    border-radius: 10px;

    padding: 22px;

    text-align: center;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

    display: flex;

    flex-direction: column;

}


/*==========================================================*
* LOCATION LABEL
*==========================================================*/

.legal-company-location {

    display: inline-block;

    align-self: center;

    padding: 6px 14px;

    margin-bottom: 15px;

    background: #F5E8BD;

    color: #004D43;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    border-radius: 20px;

}


/*==========================================================*
* COMPANY NAME
*==========================================================*/

.legal-company-card h3 {

    margin: 0 0 10px;

    color: #004D43;

    font-size: 19px;

    line-height: 1.4;

}


/*==========================================================*
* COMPANY SUBTITLE
*==========================================================*/

.legal-company-subtitle {

    margin-bottom: 18px;

    color: #777777;

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


/*==========================================================*
* DOCUMENT
*==========================================================*/

.legal-document {

    margin-bottom: 13px;

}


/*==========================================================*
* DOCUMENT PREVIEW
*==========================================================*/

.legal-document-preview {

    width: 100%;

    height: 200px;

    background: #F7F5EF;

    border: 1px solid #E6E0D0;

    border-radius: 6px;

    padding: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


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

.legal-document-preview img {

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;

}


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

.legal-document-title {

    margin-top: 6px;

    color: #333333;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.3;

}


/*==========================================================*
* DOCUMENT COUNT
*==========================================================*/

.legal-document-count {

    margin-top: auto;

    padding-top: 7px;

    color: #777777;

    font-size: 11px;

    font-style: italic;

}


/*==========================================================*
* VIEW DOCUMENTS
*==========================================================*/

.legal-view-documents {

    display: inline-block;

    margin-top: 12px;

    color: #8A6A20;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    letter-spacing: 0.4px;

    transition: color 0.2s ease;

}


.legal-view-documents:hover {

    color: #004D43;

}


/*==========================================================*
* RESPONSIVE — TABLET
*==========================================================*/

@media (max-width: 1000px) {

    .legal-credentials-grid {

        grid-template-columns: 1fr;

        max-width: 650px;

        margin: 0 auto;

    }

}

/*==========================================================*
* RESPONSIVE — MOBILE
*==========================================================*/

@media (max-width: 600px) {

    .legal-credentials-section {

        padding: 35px 0;

    }

    .legal-credentials-heading {

        font-size: 20px;

        padding: 14px 16px;

    }

    .legal-credentials-intro {

        font-size: 14px;

        margin-bottom: 25px;

    }

    .legal-company-card {

        padding: 20px;

    }

    .legal-document-preview {

        height: 125px;

    }

}


/*==========================================================
OUR COMMITMENT
==========================================================*/


#our-commitment{

    background:transparent;

    padding:6px 0 8px;

    color:#ffffff;

}

#our-commitment .container{

    background:#053625;

    padding:10px 28px 16px;

    border-radius:0;

    box-sizing:border-box;

}

/*======================================================
HEADING
======================================================*/

.about-commitment-header{

    text-align:center;

    margin-bottom:24px;

}

.about-commitment-header h2{

    margin:0 0 8px;

    font-size:38px;

    font-weight:700;

    color:#d7a63d;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.about-commitment-header p{

    margin:0;

    font-size:18px;

    color:#ffffff;

    line-height:1.5;

}

/*======================================================
TOP ICON ROW
======================================================*/

.about-commitment-icons{

    display:grid;

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

    gap:18px;

    align-items:start;

}

/*======================================================
INDIVIDUAL ITEM
======================================================*/

.about-commitment-item{

    text-align:center;

    padding:0 10px;

}

.about-commitment-item img{

    width:54px;

    height:54px;

    object-fit:contain;

    display:block;

    margin:0 auto 12px;

}

.about-commitment-item h4{

    margin:0;

    font-size:13px;

    line-height:1.5;

    font-weight:600;

    color:#ffffff;

}

/*======================================================
DIVIDER
======================================================*/

.about-commitment-divider{

    width:100%;

    height:1.5px;

    background:#b8892d;

    margin:28px 0 34px;

}

/*======================================================
BOTTOM LAYOUT
======================================================*/

.about-commitment-bottom{

    display:grid;

    grid-template-columns:56% 44%;

    gap:34px;

    align-items:start;

}

/*======================================================
LEFT
======================================================*/

.about-commitment-left p{

    font-size:15px;

    line-height:1.9;

    color:#ffffff;

    margin:0 0 24px;

}

/*======================================================
RIGHT
======================================================*/

.about-commitment-right{

    display:grid;

    grid-template-columns:72px 1fr;

    gap:18px;

    align-items:start;

}

.about-commitment-right-icon{

    position:relative;

    padding-right:8px;

}

.about-commitment-right-icon::after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:1px;

    height:100%;

    background:#b8892d;

}

.about-commitment-right-icon img{

    width:72px;

    display:block;

}

.about-commitment-right-text p{

    font-size:15px;

    line-height:1.9;

    color:#ffffff;

    margin:0 0 22px;

}

/*======================================================
HOVER
======================================================*/

.about-commitment-item{

    transition:.25s ease;

}

.about-commitment-item:hover{

    transform:translateY(-4px);

}


/*==========================================================
OUR COMMITMENT
RESPONSIVE & FINAL TUNING
==========================================================*/

/*==============================
Large Desktop (1600px+)
==============================*/

@media(min-width:1600px){

    .about-commitment-icons{

        gap:26px;

    }

    .about-commitment-item img{

        width:60px;
        height:60px;

    }

    .about-commitment-item h4{

        font-size:16px;

    }

}


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

@media(max-width:1400px){

    .about-commitment-icons{

        gap:16px;

    }

    .about-commitment-item{

        padding:0 6px;

    }

    .about-commitment-item img{

        width:50px;
        height:50px;

    }

    .about-commitment-item h4{

        font-size:14px;

    }

}


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

@media(max-width:1100px){

    .about-commitment-icons{

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

        row-gap:35px;

    }

    .about-commitment-bottom{

        grid-template-columns:1fr;

        gap:35px;

    }

    .about-commitment-right{

        grid-template-columns:80px 1fr;

    }

}


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

@media(max-width:768px){

    #our-commitment{

        padding:35px 0;

    }

    .about-commitment-header h2{

        font-size:30px;

    }

    .about-commitment-header p{

        font-size:15px;

    }

    .about-commitment-icons{

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

        gap:28px;

    }

    .about-commitment-item{

        padding:10px;

    }

    .about-commitment-item img{

        width:54px;

        height:54px;

    }

    .about-commitment-item h4{

        font-size:15px;

    }

    .about-commitment-right{

        grid-template-columns:70px 1fr;

    }

    .about-commitment-right-icon img{

        width:58px;

    }

}


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

@media(max-width:576px){

    #our-commitment{

        padding:30px 0;

    }

    .about-commitment-header{

        margin-bottom:22px;

    }

    .about-commitment-header h2{

        font-size:26px;

    }

    .about-commitment-header p{

        font-size:14px;

        line-height:1.7;

    }

    .about-commitment-icons{

        grid-template-columns:1fr;

        gap:26px;

    }

    .about-commitment-item{

        max-width:260px;

        margin:auto;

    }

    .about-commitment-divider{

        margin:26px 0;

    }

    .about-commitment-bottom{

        gap:28px;

    }

    .about-commitment-right{

        grid-template-columns:1fr;

        text-align:center;

    }

    .about-commitment-right-icon{

        padding-right:0;

        margin:auto;

    }

    .about-commitment-right-icon::after{

        display:none;

    }

    .about-commitment-right-icon img{

        margin:auto;

    }

    .about-commitment-left p,

    .about-commitment-right p{

        font-size:15px;

        line-height:1.8;

        text-align:left;

    }

}


/*==========================================================
SMALL VISUAL ENHANCEMENTS
==========================================================*/

.about-commitment-item img{

    transition:.35s ease;

}

.about-commitment-item:hover img{

    transform:scale(1.08);

}

.about-commitment-header h2{

    text-shadow:0 1px 2px rgba(0,0,0,.25);

}

.about-commitment-right-text p:last-child{

    margin-bottom:0;

}

.about-commitment-left p:last-child{

    margin-bottom:0;

}

/*==========================================================
CLOSING MESSAGE
==========================================================*/

#closing-message{

    background:#ffffff;

    background-image:url("../images/background/pattern-light.png");

    background-repeat:no-repeat;

    background-position:right bottom;

    background-size:contain;

    padding:5px 0;

}

.closing-wrapper{

    display:grid;

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

    align-items:center;

    gap:24px;

}

.closing-logo-left img,

.closing-logo-right img{

    width:125px;

    display:block;

}

.closing-content{

    text-align:center;

}

.closing-content h2{

    margin:0 0 15px;

    font-size:40px;

    font-weight:700;

    color:#123a2b;

    line-height:1.35;

    text-transform:uppercase;

}

.closing-content h2 span{

    color:#d4a03c;

}

.closing-content p{

    margin:0;

    font-size:22px;

    letter-spacing:2px;

    color:#555;

    font-weight:600;

}

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

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

.footer-top{

    display:grid;

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

    gap:12px;

    padding:2px 0 4px;

    align-items:flex-start;

}

/*=========================================================
    MOBILE FOOTER - STEP 2
=========================================================*/

@media (max-width: 768px){

    .footer-top{
        grid-template-columns:1fr;
        gap:20px;
    }

}

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

.footer-column{

    position:relative;

    padding-right:12px;

}

/* Vertical Divider */

.footer-column:not(:last-child)::after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:1px;

    height:110px;

    background:#8d7431;

    opacity:.75;

}

.footer-column h3{

    margin:0 0 14px;

    color:#d4a03c;

    font-size:17px;

    font-weight:700;

    letter-spacing:.5px;

}

.footer-column ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-column li{

    margin-bottom:3px;

}

.footer-column li:last-child{

    margin-bottom:0;

}

.footer-column a{

    color:#ffffff;

    text-decoration:none;

    font-size:12px;

    line-height:1.8;

    transition:.30s;

}

.footer-column a:hover{

    color:#d4a03c;

}

/*==========================================================
LOGO
==========================================================*/

.footer-logo{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

}

.footer-logo img{

    width:195px;

    max-width:100%;

    display:block;

    margin-bottom:10px;

}

.footer-logo-text{

    width:195px;

    color:#ffffff;

    font-size:12px;

    line-height:20px;

    text-align:left;

}

/*==========================================================
BOTTOM BAR
==========================================================*/

.footer-bottom{

    background:transparent;

    padding:4px 0;

}

.footer-bottom .container{

    background:#042d21;

    width:100%;

    margin:0 auto;

    padding:4px 22px;

    border-radius:16px;

}

.footer-bottom-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:4px;

    padding:0px 0;

    flex-wrap:wrap;

}

/*==========================================================
COPYRIGHT
==========================================================*/

.copyright{

    color:#ffffff;

    font-size:13px;

}

/*==========================================================
CONTACT DETAILS
==========================================================*/

.footer-contact{

    display:flex;

    align-items:center;

    gap:6px;

    flex-wrap:wrap;
    white-space:nowrap;

}

.footer-contact span{

    display:flex;

    align-items:center;

    gap:6px;

    color:#ffffff;

    font-size:13px;

    white-space:nowrap;

}

.footer-contact i{

    color:#d4a03c;

    font-size:13px;

    width:18px;

    text-align:center;

}

.footer-contact a{

    color:#ffffff;

    text-decoration:none;

}

.footer-contact a:hover{

    color:#d4a03c;

}

/*==========================================================
SOCIAL
==========================================================*/

.footer-social{

    display:flex;

    align-items:center;

    gap:6px;

    flex-shrink:0;
    
}

.footer-social span{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    margin-right:8px;

}

.footer-social a{

    width:28px;

    height:28px;

    border:1px solid transparent;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#d4a03c;

    transition:.30s;

}

.footer-social a:hover{

    background:#d4a03c;

    color:#063628;

    border-color:#d4a03c;

}

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

.footer-tagline{

    margin-top:2px;

    text-align:center;

    color:#D4A03C;

    font-size:12px;

    font-style:italic;

    font-weight:600;

}

/* LinkedIn */

.footer-social .linkedin{

    background:#0A66C2;

}

/* Facebook */

.footer-social .facebook{

    background:#1877F2;

}

/* Instagram */

.footer-social .instagram{

    background:linear-gradient(
        45deg,
        #f58529,
        #dd2a7b,
        #8134af,
        #515bd4
    );

}

/* YouTube */

.footer-social .youtube{

    background:#FF0000;

}

/*=========================================================
STATUS : TESTED & APPROVED
BY     : SANKAR
DATE   : 29-July-2026
=========================================================*/

/*==================================================
WHY MOON SHINE GROUP PAGE
==================================================*/

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

#why-hero{

    background:#ffffff;

    padding:8 0 10px;

    overflow:hidden;

}

.why-hero-wrapper{

    display:grid;

    grid-template-columns:40% 0.1% 59.9%;

    align-items:stretch;

    min-height:400px;

}

.why-hero-left{

    background:
        linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),
        url("../images/backgrounds/a3-index-globe3.png");

/*    opacity:.25; */

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    position:relative;

    z-index:5;

    padding:40px 0;

}

.why-hero-left::before{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,.18) 45%,
        transparent 80%
    );

    top:-90px;

    left:-120px;

    z-index:-1;

}

.why-left-content{

    padding:0 40px 0 10px;

}

.why-left-content h1{

    margin:0;

/*    color:#8C6A0A;*/
    color:#ffffff;

    font-size:48px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero-gold-line{

    width:78px;

    height:4px;

    background:#B8860B;

    margin:34px 0;

}

.why-left-content p{

    margin:0;

    color:#ffffff;

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

    line-height:1.6;

    max-width:460px;

}

.hero-divider{

    position:relative;

    overflow:hidden;

    z-index:10;

}

.hero-divider svg{

    width:100%;

    height:100%;

    display:block;

}

.why-hero-right{
    display:flex;
    align-items:stretch;
    overflow:hidden;
}

.why-hero-right img{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

}

/*==================================================
WHY EVEN EXPERIENCED PROCUREMENT ORGANIZATIONS
==================================================*/

/*==================================================
WHY BENEFITS
==================================================*/

.why-benefits{

    padding:10px 0 25px;

    background:transparent;

}

.why-benefits-box{

    background:#FFECB3;

    border-radius:18px;

    padding:15px 10px 10px;

}

.section-title{

    text-align:center;

    margin-bottom:20px;

}

.section-title h2{

    font-size:28px;

    font-weight:700;

    color:#003b3b;

    line-height:1.2;

    max-width:920px;

    margin:0 auto 8px;

}

.gold-divider{

    display:inline-block;

    width:90px;

    height:4px;

    background:#c58a1c;

    border-radius:50px;

}

.customer-benefits-grid{

    display:grid;

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

    gap:18px;

    align-items:start;

}

.customer-benefit-item{

    padding:0 12px;

    max-width:245px;

    margin:0 auto;

}

.customer-benefit-icon{

    width:82px;

    height:82px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#003b3b;

    display:flex;

    justify-content:center;

    align-items:center;

}

.customer-benefit-icon img{

    width:36px;

    height:36px;

    object-fit:contain;

}

.customer-benefit-item:hover .customer-benefit-icon{

    background:#c58a1c;

    transform:translateY(-8px);

}

.customer-benefit-item h3{

    font-size:20px;

    color:#003b3b;

    text-align:center;

    font-weight:700;

    line-height:1.3;

    margin:0 0 16px;

}

.customer-benefit-item p{

    font-size:15px;

    line-height:2;

    color:#555;

    text-align:left;

    margin:0;

}

/*==================================================
THREE PHILOSOPHY CARDS
==================================================*/

/*==================================================
CUSTOMER PHILOSOPHY
==================================================*/

.customer-philosophy{

    padding:10px 0;

    background:transparent;

}

.customer-philosophy .container{

    max-width:1400px;   /* adjust if required */

    width:100%;

    margin:0 auto;

}

.philosophy-grid{

    display:grid;

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

    gap:18px;

    width:100%;

    justify-content:stretch;

    align-items:stretch;

}

.philosophy-card{

    width:100%;

    min-height:760px;

    background:#eaf7ff;

    border:1px solid #e3e3e3;

    border-radius:4px;

    position:relative;

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.card-title{

    position:relative;

    display:inline-block;

    background:#003b3b;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

    text-transform:uppercase;

    line-height:1.3;

    padding:14px 28px 14px 22px;

    margin:18px 0 28px 18px;

}

.card-title::after{

    content:"";

    position:absolute;

    top:0;

    right:-24px;

    width:0;

    height:0;

    border-top:28px solid transparent;

    border-bottom:28px solid transparent;

    border-left:24px solid #c58a1c;

}

.card-content{

    padding:0 20px 10px;

}

.card-content p{

    font-size:18px;

    line-height:2.1;

    color:#333333;

    text-align:left;

    margin-bottom:24px;

}

.philosophy-list{

    list-style:none;

    margin:18px 0 0;

    padding:0;

}

.philosophy-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:22px;

    font-size:18px;

    line-height:2.1;

}

.philosophy-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    top:1px;

    color:#0b6a42;

    font-weight:700;

}

.card-corner-icon{

    position:absolute;

    right:18px;

    bottom:18px;

    width:100px;

    height:100px;

    display:flex;

    align-items:flex-end;

    justify-content:flex-end;

}

.card-corner-icon img{

    width:100%;

    height:auto;

    display:block;

}


/*==================================================
THREE VALUE STATEMENTS
==================================================*/

/*==================================================
PROCUREMENT COMMITMENT STATEMENTS
==================================================*/

.procurement-statements{

    padding:1px 0 5px;

    background:transparent;

}

/* Uses the SAME page boundary as the sections above */

.procurement-statements .container{

    width:100%;

    background:#935a5a;

    border-radius:18px;

    padding:10px 10px 10px;

}

.statement-box{

    background:#ffffff;

    border:1px solid #eadfcf;

    border-radius:3px;

    overflow:hidden;

}

.statement-row{

    display:flex;

    align-items:center;

    gap:38px;

    padding:18px 4px;

}

.statement-row:not(:last-child){

    border-bottom:1px solid #ececec;

}

.statement-icon{

    flex:0 0 68px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#003b3b;

    display:flex;

    justify-content:center;

    align-items:center;

}

.statement-icon img{

    width:36px;

    height:36px;

    display:block;

}

.statement-text{

    flex:10;

    font-size:18px;

    line-height:1.40;

    color:#222;

    font-weight:400;

}

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

@media(max-width:992px){

.statement-row{

    gap:20px;

    padding:10px 20px;

}

.statement-text{

    font-size:18px;

}

}

@media(max-width:768px){

.statement-row{

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

}

.statement-icon{

    margin-bottom:6px;

}

.statement-text{

    font-size:17px;

    line-height:1.65;

}

}

/*==================================================
GREEN VALUE STRIP
==================================================*/

/*==================================================
VALUE PROPOSITION STRIP
==================================================*/

.value-strip{

    background:transparent;

    padding:16px 0;

}

.value-strip .container{

    background:#003b3b;

    border-radius:16px;

    overflow:hidden;

}

.value-grid{

    display:grid;

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

    padding:0 20px;

    min-height:100px;
}

.value-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 12px;

    border-right:1px solid rgba(197,138,28,.45);

}

.value-item:last-child{

    border-right:none;

}

.value-icon{

    flex:0 0 58px;

}

.value-icon img{

    width:58px;

    height:58px;

    display:block;

}

.value-content h3{

    margin:0 0 6px;

    font-size:12px;

    color:#ffffff;

    font-weight:700;

    letter-spacing:.4px;

}

.value-content p{

    margin:0;

    font-size:11px;

    line-height:1.55;

    color:#ffffff;

}

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

@media(max-width:1200px){

.value-grid{

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

}

.value-item{

    padding:22px;

    border-right:none;

    border-bottom:1px solid rgba(197,138,28,.45);

}

.value-item:last-child{

    border-bottom:none;

}

}

@media(max-width:768px){

.value-grid{

    grid-template-columns:1fr;

}

.value-item{

    padding:20px;

}

}

/*==================================================
OFFICE INFORMATION STRIP
==================================================*/

/*==================================================
GLOBAL PRESENCE STRIP
==================================================*/

.global-presence{

    background:transparent;

    padding:8px 0;

}

.global-presence .container{

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

    /*temporary, to be deleted later*/

    /*outline:2px solid blue;*/

}

.presence-grid{

    display:grid;

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

    padding:0 10px;

}

.presence-item{

    display:flex;

    align-items:center;

    gap:22px;

    padding:0 4px;

    border-right:1px solid #d9d9d9;

}

.presence-item:last-child{

    border-right:none;

}

.presence-icon{

    flex:0 0 66px;

}

.presence-icon img{

    width:78px;

    height:78px;

    display:block;

}

.presence-content h3{

    margin:0 0 8px;

    color:#003b3b;

    font-size:16px;

    font-weight:700;

}

.presence-content p{

    margin:0;

    color:#333;

    font-size:12px;

    line-height:1.15;

}

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

@media(max-width:1100px){

.presence-grid{

    grid-template-columns:1fr;

}

.presence-item{

    border-right:none;

    border-bottom:1px solid #e5e5e5;

    padding:14px 0;

}

.presence-item:last-child{

    border-bottom:none;

}

}

/*==================================================
OUR SERVICES PAGE
==================================================*/

/*==========================================================
OUR SERVICES HERO
==========================================================*/

#services-hero{

    width:100%;

    height:460px;

    overflow:hidden;

    background:#ffffff;
}

#services-hero .container{

    height:100%;

    background:#042d21;

}

/*==========================================================
LAYOUT
==========================================================*/

.services-hero-wrapper{

    display:flex;

    width:100%;

    height:100%;

    position:relative;

    overflow:hidden;

}

/*==========================================================
LEFT PANEL
==========================================================*/

.services-hero-left{

    flex:0 0 34%;

    background:#042d21;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    position:relative;

}

.services-left-content{

    width:100%;

    max-width:520px;

    padding-top:50px;

    padding-right:40px;

    padding-bottom:40px;

    padding-left:10px;

}

.services-subtitle{

    color:#d79b23;

    font-size:30px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

    letter-spacing:.5px;

}

.services-left-content h1{

    color:#ffffff;

    font-size:20px;

    font-weight:800;

    line-height:1.10;

    margin-bottom:28px;

}

.services-left-content p{

    color:#f5f5f5;

    font-size:18px;

    line-height:1.75;

    margin-bottom:38px;

}

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

.services-hero-btn a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 28px;

    background:#d79b23;

    color:#ffffff;

    text-decoration:none;

    text-transform:uppercase;

    font-size:15px;

    font-weight:700;

    transition:.30s;

}

.services-hero-btn a:hover{

    background:#b98317;

}

/*==========================================================
GOLD CURVE
==========================================================*/

.services-divider{

    flex:0 0 100px;

    width:100px;

    height:100%;

    position:relative;

    z-index:10;

    overflow:hidden;

}

.services-divider svg{

    width:100%;

    height:100%;

    display:block;

}

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

.services-hero-right{

    flex:1;

    position:relative;

    overflow:hidden;

}

.services-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

.services-hero-right::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.06),

        rgba(0,0,0,.12)

    );

    z-index:2;

}


/*==========================================================
MS-OS-01
SERVICE PORTFOLIO FRAMEWORK (below OUR SERVICES block)
==========================================================*/

/*----------------------------------------------------------
MS-OS-01.01
Section
----------------------------------------------------------*/

#services-portfolio{

    padding:10px 0 5px;

    background:transparent;

}

#services-portfolio .container{

    background:#ad5353;

    border-radius:18px;

    padding:10px 20px 15px;

}

/*----------------------------------------------------------
MS-OS-01.02
Grid
----------------------------------------------------------*/

.services-grid{

    display:grid;

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

    gap:18px;

}


/*----------------------------------------------------------
MS-OS-01.03
Service Card
----------------------------------------------------------*/

.service-card{

    position:relative;

    background:#ffffff;

    border:1px solid #ead8bf;

    border-radius:14px;

    padding:26px 18px 18px;

    min-height:760px;

    transition:.30s;

    overflow:hidden;

}

.service-card:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 35px rgba(0,0,0,.10);

}


/*----------------------------------------------------------
MS-OS-01.04
Number Badge
----------------------------------------------------------*/

.service-number{

    position:absolute;

    top:-4px;

    left:16px;

    background:#07382d;

    color:#ffffff;

    width:36px;

    height:32px;

    border-radius:7px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

}


/*----------------------------------------------------------
MS-OS-01.05
Header
----------------------------------------------------------*/

.service-header{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-top:18px;

    margin-bottom:10px;

}


/*----------------------------------------------------------
MS-OS-01.06
Icon
----------------------------------------------------------*/

.service-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#08382d;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.service-icon img{

    width:28px;

}


/*----------------------------------------------------------
MS-OS-01.07
Title
----------------------------------------------------------*/

.service-title{

    flex:1;

}

.service-title h3{

    font-size:18px;

    font-weight:800;

    line-height:1.18;

    color:#123128;

    text-transform:uppercase;

    margin-bottom:8px;

}


/*----------------------------------------------------------
MS-OS-01.08
Category Badge
----------------------------------------------------------*/

.service-tag{

    display:inline-block;

    background:#e8a63d;

    color:#ffffff;

    padding:3px 5px;

    border-radius:3px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

}


/*----------------------------------------------------------
MS-OS-01.09
Intro Text
----------------------------------------------------------*/

.service-intro{

    font-size:16px;

    line-height:1.50;

    color:#333333;

    margin-bottom:10px;

}


/*----------------------------------------------------------
MS-OS-01.10
Bullet List
----------------------------------------------------------*/

.service-list{

    list-style:none;

    padding:0;

    margin:15px 0;

}

.service-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:5px;

    line-height:1.1;

}

.service-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:3px;

    width:16px;

    height:16px;

    background:url("../images/services/a1-services-check-gold.png") no-repeat center center;

    background-size:16px 16px;

}

/*----------------------------------------------------------
MS-OS-01.11
Green Sub Heading
----------------------------------------------------------*/

.service-subtitle{

    margin-top:10px;

    margin-bottom:10px;

    background:#0b4637;

    color:#ffffff;

    padding:4px 6px;

    border-radius:4px;

    font-size:16px;

    font-weight:700;

    text-transform:uppercase;

}

/*----------------------------------------------------------
MS-OS-01.12
Portfolio Link
----------------------------------------------------------*/

.service-link{

    margin-top:auto;

    padding-top:6px;

}

.service-link a{

    text-decoration:none;

    color:#d48613;

    font-size:13px;

    font-weight:700;

}

.service-link a:hover{

    color:#0b4637;

}

/*----------------------------------------------------------
MS-OS-01.13
Flex Layout
----------------------------------------------------------*/

.service-body{

    display:flex;

    flex-direction:column;

    height:100%;

}

/*==========================================================
MS-OS-02A-01
SERVICE CARD 01
==========================================================*/

/*----------------------------------------------------------
Card Typography
----------------------------------------------------------*/

.service-title h3{

    min-height:56px;

}

/*----------------------------------------------------------
Footer Link
----------------------------------------------------------*/

.service-link{

    margin-top:auto;

}

.service-link a{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#d58c1c;

    font-weight:700;

    transition:.30s;

}

.service-link a:hover{

    color:#0b4637;

}

/*==========================================================
MS-OS-04
PROCUREMENT LIFECYCLE (SUPPORTING CUSTOMERS THROUGHOUT...)
==========================================================*/

#procurement-lifecycle{

    padding:1px 0 5px;

    background:#fff;

}

.lifecycle-title{

    text-align:center;

    font-size:25px;

    font-weight:800;

    color:#08392d;

    margin-bottom:10px;

    text-transform:uppercase;

}

.lifecycle-process{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:12px;

    flex-wrap:nowrap;

}

.lifecycle-step{

    width:100px;

    text-align:center;

}

.step-icon{

    width:72px;

    height:72px;

    margin:auto;

    border:2px solid #d7a347;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    transition:.30s;

}

.step-icon img{

    width:34px;

}

.lifecycle-step span{

    display:block;

    margin-top:10px;

    font-size:13px;

    font-weight:600;

    line-height:1.35;

    color:#222;

}

.step-arrow{

    font-size:34px;

    color:#d7a347;

    font-weight:300;

    margin-top:18px;

}

.lifecycle-step:hover .step-icon{

    background:#08392d;

    transform:translateY(-4px);

}

.lifecycle-step:hover span{

    color:#08392d;

}

/*==========================================================
MS-OS-05
WE COMMIT TO BE WITH YOU IN EVERY STEP
==========================================================*/

#commitment-strip{

    padding:5px 0 5px;

    background:#ffffff;

}

.services-commitment-wrapper{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#032f24;

    border:1px solid #b88928;

    border-radius:18px;

    min-height:122px;

    overflow:visible;

}

/*----------------------------------------------------------
Logo
----------------------------------------------------------*/

.services-commitment-logo{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:108px;

    height:108px;

    background:#ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:20;

}

.services-commitment-logo img{

    width:92px;

    display:block;

}

/*----------------------------------------------------------
Message
----------------------------------------------------------*/

.services-commitment-message{

    padding-left:150px;

    padding-right:35px;

    flex:1;

}

.services-commitment-message h3{

    margin:0;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

}

.services-commitment-message h2{

    margin:4px 0 8px;

    color:#d99b21;

    font-size:26px;

    font-weight:800;

    letter-spacing:.5px;

}

.services-commitment-message p{

    margin:0;

    color:#ffffff;

    font-size:13px;

    letter-spacing:.6px;

    opacity:.95;

}

/*----------------------------------------------------------
Right Side
----------------------------------------------------------*/

.services-commitment-items{

    display:flex;

    align-items:center;

    height:100%;

}

.services-commitment-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 28px;

    border-left:1px solid rgba(201,158,52,.45);

    min-height:90px;

}

.services-commitment-item:first-child{

    border-left:1px solid rgba(201,158,52,.45);

}

.services-commitment-item img{

    width:42px;

    flex-shrink:0;

}

.services-commitment-item span{

    color:#ffffff;

    font-size:16px;

    line-height:1.35;

    font-weight:600;

}

.services-commitment-item:hover{

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

}

.services-commitment-item:hover img{

    transform:scale(1.08);

    transition:.25s;

}

/*==========================================================
MS-OS-06
GLOBAL PRESENCE STRIP
==========================================================*/

#global-presence{

    background:#ffffff;

    padding:2px 0 2px;

}

.presence-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.presence-box{

    flex:1;

    display:flex;

    align-items:center;

    gap:18px;

}

.presence-icon{

    width:56px;

    flex-shrink:0;

}

.presence-icon img{

    width:100%;

    display:block;

}

.presence-content h4{

    margin:0 0 6px;

    color:#08392d;

    font-size:15px;

    font-weight:700;

    letter-spacing:.4px;

}

.presence-content p{

    margin:0;

    color:#2f2f2f;

    font-size:14px;

    line-height:1.5;

}

.presence-divider{

    width:1px;

    height:72px;

    background:#caa24d;

    margin:0 30px;

}

/*==========================================================
5. INDUSTRIES & CUSTOMER SEGMENTS
MS-ICS-01
INDUSTRIES HERO
==========================================================*/

#industries-hero{

    background:transparent;

    overflow:hidden;

}

#industries-hero .container{

    height:500px;

    background:#063528;

}

.industries-hero-wrapper{

    display:flex;

    height:100%;

    align-items:stretch;

}

.industries-hero-left{

    flex:0 0 34%;

    background:#063528;

    display:flex;

    align-items:center;

}

.industries-left-content{

    padding:5px 5px 5px 10px;

}

.industries-left-content h1{

    color:#ffffff;

    font-size:38px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:18px;

    text-transform:uppercase;

}

.industries-divider{

    width:22px;

    height:4px;

    background:#d49a22;

    margin-bottom:22px;

}

.industries-left-content h2{

    color:#d49a21;

    font-size:20px;

    font-weight:700;

    line-height:1.35;

    margin-bottom:28px;

}

.industries-left-content p{

    color:#ffffff;

    font-size:16px;

    line-height:1.5;

    margin-bottom:22px;

}

.industries-hero-curve{

    width:90px;

    flex-shrink:0;

}

.industries-hero-curve svg{

    width:100%;

    height:100%;

    display:block;

    fill:#d49a21;

}

.industries-hero-right{

    flex:1;

}

.industries-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==========================================================
MS-ICS-02
CUSTOMER SEGMENTS WE SUPPORT
==========================================================*/

#customer-segments{

    padding:12px 0;

    background:#ffffff;

}

.customer-grid{

    display:grid;

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

    gap:22px;

    margin-top:20px;

}

.customer-card{

    background:#ffffff;

    border:8px solid #e9d8b2;

    border-radius:12px;

    padding:14px;

    display:flex;

    gap:18px;

    transition:.35s;

    min-height:200px;

}

.customer-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 28px rgba(0,0,0,.08);

}

.customer-icon{

    width:64px;

    height:64px;

    flex-shrink:0;

}

.customer-icon img{

    width:100%;

}

.customer-content h3{

    font-size:24px;

    color:#063528;

    font-weight:700;

    margin-bottom:12px;

    text-transform:uppercase;

}

.customer-content p{

    font-size:20px;

    line-height:1.5;

    color:#333;

}

/*==========================================================
GLOBAL SECTION HEADING (COMMON FOR ALL 8 CARDS)
==========================================================*/

.section-heading{

    text-align:center;

    max-width:680px;

    margin:0 auto;

}

.section-heading h2{

    font-size:32px;

    color:#063528;

    font-weight:800;

    margin-bottom:14px;

    text-transform:uppercase;

}

/*==========================================================
MS-ICS-05
WHY INDUSTRIES TRUST - Heading Only
==========================================================*/

#industry-trust .section-heading h2{
    white-space:normal;
}

.section-heading p{

    font-size:18px;

    color:#444;

    line-height:1.35;

    margin-bottom:5px;

}

/*==========================================================
MS-ICS-03
GLOBAL SUPPLY CHAIN BANNER (Supporting customers across...)
==========================================================*/

#industry-banner{

    background:#ffffff;

    overflow:hidden;

    padding:10px 0;

}

/*----------------------------------------------------------
Container
----------------------------------------------------------*/

#industry-banner .container{

    background:#063528;

    border-radius:18px;

    overflow:hidden;

    min-height:260px;

}

/*----------------------------------------------------------
Layout
----------------------------------------------------------*/

.industry-banner-wrapper{

    display:flex;

    align-items:stretch;

    min-height:260px;

}

/*----------------------------------------------------------
Left Panel
----------------------------------------------------------*/

.industry-banner-left{

    flex:0 0 30%;

    background:#063528;

    display:flex;

    align-items:center;

}

.industry-banner-content{

    padding:20px 30px 20px 40px;

}

.industry-banner-content h2{

    color:#d49a21;

    font-size:28px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:24px;

    text-transform:uppercase;

}

.industry-banner-content p{

    color:#ffffff;

    font-size:18px;

    line-height:1.85;

    margin:0;

}

/*----------------------------------------------------------
Right Panel
----------------------------------------------------------*/

.industry-banner-right{

    flex:1;

}

.industry-banner-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==========================================================
MS-ICS-02
CUSTOMER SEGMENTS - SECTION HEADING WIDTH FORCED SETTING
==========================================================*/

#customer-segments .section-heading{

    max-width:1400px;

    width:100%;

    margin-left:auto;

    margin-right:auto;

}

/*==========================================================
MS-ICS-04A
INDUSTRY SECTORS (12 industry sectors)
==========================================================*/

#industry-sectors{

    padding:10px 0;

    background:#ffffff;

}

.industries-grid{

    display:grid;

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

    gap:26px;

    margin-top:45px;

}

.industries-card{

    background:#ffffff;

    border:1px solid #ead9b7;

    border-radius:12px;

    overflow:hidden;

    display:flex;

    transition:.35s;

}

.industries-card:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 26px rgba(0,0,0,.08);

}

.industries-image{

    flex:0 0 42%;

}

.industries-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.industries-details{

    flex:1;

    padding:22px;

}

.industries-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:16px;

}

.industries-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

}

.industries-icon img{

    width:100%;

}

.industries-header h3{

    color:#063528;

    font-size:22px;

    font-weight:700;

    line-height:1.25;

    text-transform:uppercase;

}

.industries-details p{

    color:#333;

    font-size:16px;

    line-height:1.8;

}

/*==========================================================
MS-ICS-05
WHY INDUSTRIES TRUST
==========================================================*/

#industry-trust{

    padding:1px 0;

    background:#ffffff;

}

.trust-grid{

    display:grid;

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

    gap:24px;

    margin-top:15px;

}

.trust-card{

    text-align:center;

    padding:10px 8px;

    border:1px solid #f2e6ca;

    border-radius:10px;

    background:#ffffff;

    transition:.35s;

}

.trust-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 26px rgba(0,0,0,.08);

}

.trust-icon{

    width:72px;

    height:72px;

    margin:0 auto 18px;

}

.trust-icon img{

    width:100%;

}

.trust-card h3{

    color:#063528;

    font-size:18px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:14px;

    text-transform:uppercase;

}

.trust-card p{

    color:#444;

    font-size:15px;

    line-height:1.75;

}

/*==========================================================
MS-ICS-06
OUR GLOBAL PRESENCE
==========================================================*/

#global-presence{

    padding:5px 0;

    background:#ffffff;

}

.presence-wrapper{

    display:grid;

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

    gap:0;

    margin-top:5px;

    border:1px solid #f2e6ca;

    border-radius:10px;

    overflow:hidden;

}

.presence-map{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:#ffffff;

}

.presence-map img{

    width:100%;

    max-width:280px;

}

.presence-column{

    padding:10px 12px;

    border-left:1px solid #f2e6ca;

    text-align:center;

}

.presence-icon{

    width:54px;

    height:54px;

    margin:0 auto 18px;

}

.presence-icon img{

    width:100%;

}

.presence-column h3{

    color:#063528;

    font-size:17px;

    font-weight:700;

    line-height:1.35;

    margin-bottom:18px;

    text-transform:uppercase;

}

.presence-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.presence-column li{

    color:#333;

    font-size:15px;

    line-height:1.15;

}

/*==========================================================
MS-ICS-07
PARTNER BANNER
==========================================================*/

#partner-banner{

    background:#ffffff;

    overflow:hidden;

    padding:10px 0;

}

#partner-banner .container{

    background:url("../images/backgrounds/partner-handshake.jpg")
    center center/cover no-repeat;

    border-radius:18px;

    overflow:hidden;

    min-height:150px;

    position:relative;

}

/*----------------------------------------------------------
Overlay
----------------------------------------------------------*/

.partner-overlay{

    background:rgba(5,44,34,.82);

    height:100%;

}

/*----------------------------------------------------------
Layout
----------------------------------------------------------*/

.partner-content{

    display:flex;

    align-items:stretch;

    min-height:200px;

    padding:10px 0;

}

/*----------------------------------------------------------
Left Panel
----------------------------------------------------------*/

.partner-text{

    flex:0 0 60%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:10px 20px 10px 30px;

}

.partner-text h2{

    color:#d9a128;

    font-size:30px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:12px;

}

.partner-text p{

    color:#ffffff;

    font-size:18px;

    line-height:1.6;

    margin:0;

}

/*----------------------------------------------------------
Right Panel
----------------------------------------------------------*/

.partner-image{

    flex:1;

    display:flex;

    align-items:flex-end;

    justify-content:flex-end;

    overflow:hidden;

}

.partner-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==========================================================
MS-ICS-07A
CTA BUTTONS
==========================================================*/

#partner-cta{

    background:#ffffff;

    padding:15px 0 15px;

}

.partner-buttons{

    display:grid;

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

    gap:24px;

}

.partner-buttons a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    text-decoration:none;

    padding:2px;

    border-radius:8px;

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

    transition:all .35s ease;

}

.partner-buttons a:hover{

    transform:translateY(-6px) scale(1.03);

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

}

.partner-buttons img{

    width:36px;

    transition:transform .35s ease;

}

.partner-buttons a:hover img{

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

}

.partner-buttons span{

    transition:letter-spacing .30s ease;

}

.partner-buttons a:hover span{

    letter-spacing:.4px;

}

.cta-green{

    background:#0b4637;

    color:#ffffff;

}

.cta-green:hover{

    background:#063528;

}

.cta-gold{

    background:#d59a22;

    color:#ffffff;

}

.cta-gold:hover{

    background:#bf8718;

}

/*==========================================================
PRODUCTS WEB PAGE
PRODUCTS HERO
==========================================================*/

#products-banner{

    background:#ffffff;

    overflow:hidden;

    padding:5px 0;

}

/*----------------------------------------------------------
Container
----------------------------------------------------------*/

#products-banner .container{

    background:#063326;

    border-radius:18px;

    overflow:hidden;

    min-height:420px;

}

/*----------------------------------------------------------
Hero
----------------------------------------------------------*/

.products-hero{

    background:#063326;

    height:100%;

}

.products-hero-content{

    display:flex;

    align-items:stretch;

    height:420px;

    position:relative;

    padding:0;

}

/*----------------------------------------------------------
LEFT PANEL
----------------------------------------------------------*/

.products-hero-left{

    width:45%;

    padding:20px 20px 20px 12px;

    color:#ffffff;

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.products-hero-left h1{

    font-size:38px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:10px;

    line-height:1;

}

.products-hero-left h2{

    font-size:22px;

    font-weight:700;

    color:#d89a1d;

    line-height:1.3;

    margin-bottom:24px;

}

.products-hero-left p{

    font-size:15px;

    line-height:1.9;

    color:#ffffff;

    margin-bottom:30px;

}

/*----------------------------------------------------------
BUTTONS
----------------------------------------------------------*/

.hero-buttons{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.btn-gold{

    background:#d89a1d;

    color:#ffffff;

    padding:10px 18px;

    border-radius:4px;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    transition:.3s;

}

.btn-gold:hover{

    background:#be8210;

}

.btn-outline{

    border:2px solid #d89a1d;

    color:#ffffff;

    padding:10px 18px;

    border-radius:4px;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    transition:.3s;

}

.btn-outline:hover{

    background:#d89a1d;

}

/*----------------------------------------------------------
RIGHT PANEL
----------------------------------------------------------*/

.products-hero-right{

    width:55%;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:stretch;

    justify-content:flex-end;

}

.products-hero-right img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:right center;

}

/*----------------------------------------------------------
CURVED GOLD DIVIDER
----------------------------------------------------------*/

.products-hero-right::before{

    content:"";

    position:absolute;

    left:-105px;

    top:-30px;

    width:220px;

    height:480px;

    background:#063326;

    border-right:5px solid #D89A1D;

    border-radius:0 240px 240px 0;

    z-index:10;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:992px){

.products-hero-content{

    flex-direction:column;

}

.products-hero-left{

    width:100%;

    padding:45px 30px;

}

.products-hero-right{

    width:100%;

}

.products-hero-right::before{

    display:none;

}

.products-hero-right img{

    height:320px;

}

}

/*----------------------------------------------------------
CURVED GOLD DIVIDER
----------------------------------------------------------*/

.products-hero-right::before{

    content:"";

    position:absolute;

    left:-120px;

    top:-50px;

    width:260px;

    height:620px;

    background:#063326;

    border-right:7px solid #d89a1d;

    border-radius:0 320px 320px 0;

    z-index:5;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:992px){

.products-hero-content{

    flex-direction:column;

}

.products-hero-left{

    width:100%;

    padding:5px 5px;

}

.products-hero-right{

    width:100%;

}

.products-hero-right::before{

    display:none;

}

.products-hero-right img{

    height:400px;

}

}

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

.product-portfolio{

    background:#ffffff;

}

.section-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:55px;

    margin-bottom:10px;

}

.title-line{

    width:170px;

    height:12px;

    background:#d89a1d;

}

.section-title h2{

    font-size:34px;

    font-weight:700;

    color:#0d3b2d;

    margin:0;

}

.section-subtitle{

    text-align:center;

    margin-bottom:5px;

    color:#444;

    font-size:17px;

}

/*----------------------------------------------------------
GRID
----------------------------------------------------------*/

.portfolio-grid{

    display:grid;

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

    gap:28px;

    align-items:stretch;

}

/*----------------------------------------------------------
CARD
----------------------------------------------------------*/

.portfolio-card{

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:8px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    min-height:450px;

    transition:.35s;

}

.portfolio-card:hover{

    transform:translateY(-4px);

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

}

.portfolio-image{

    width:100%;

    height:280px;

    display:block;

    object-fit:cover;

}

/*----------------------------------------------------------
BODY
----------------------------------------------------------*/

.portfolio-body{

    padding:15px;

    position:relative;

    flex:1;

    display:flex;

    flex-direction:column;

}

.portfolio-icon{

    position:absolute;

    left:1px;

    top:-20px;

    width:72px;

    height:72px;

    border-radius:50%;

    background:#0b4d3b;

    border:5px solid #fff;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.portfolio-icon.gold{

    background:#d89a1d;

}

.portfolio-icon img{

    width:38px;

    height:38px;

    object-fit:contain;

}

.portfolio-body h3{

    margin-top:30px;

    margin-bottom:4px;

    font-size:26px;

    color:#15392d;

}

.portfolio-body p{

    color:#555;

    line-height:1.1;

    margin-bottom:8px;

}

.portfolio-body ul{

    columns:2;

    column-gap:25px;

    padding-left:1px;

    margin:10px 0 25px;

}

.portfolio-body li{

    margin-bottom:5px;

    color:#333;

    font-size:15px;

}


/*----------------------------------------------------------
BUTTON
----------------------------------------------------------*/

.portfolio-btn{

    display:block;

    margin-top:auto;

    text-align:center;

    background:#0b4d3b;

    color:#fff;

    padding:8px;

    text-decoration:none;

    border-radius:4px;

    font-weight:700;

    font-size:13px;

    transition:.3s;

}

.portfolio-btn:hover{

    background:#d89a1d;

}

/*==========================================================
SPECIALIZED & CUSTOM SOURCING CARD
==========================================================*/

.enquiry-card{

    background:#063326;

    border:5px solid #0d4c39;

    color:#ffffff;

}

.enquiry-card-content{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    height:100%;

    padding:8px 8px;

}

.enquiry-icon-circle{

    width:98px;

    height:98px;

    border:2px solid #d89a1d;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:5px;

}

.enquiry-icon-circle img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.enquiry-card h3{

    color:#d89a1d;

    font-size:32px;

    line-height:1.5;

    margin-bottom:10px;

    font-weight:700;

}

.enquiry-card p{

    color:#ffffff;

    font-size:18px;

    line-height:1.75;

    margin-bottom:18px;

}

.enquiry-text{

    color:#d9e6df;

    flex:1;

}

.enquiry-button{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    background:#d89a1d;

    color:#ffffff;

    text-decoration:none;

    padding:5px;

    border-radius:5px;

    font-size:15px;

    font-weight:700;

    transition:.3s;

}

.enquiry-button:hover{

    background:#be8210;

}

.enquiry-button span{

    font-size:20px;

}

/*==========================================================
WHY CUSTOMERS SOURCE
==========================================================*/

.why-source{

    background:#ffffff;

}

.source-grid{

    display:grid;

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

    gap:18px;

    margin-top:5px;

}

.source-card{

    border:1px solid #e5e5e5;

    border-radius:8px;

    padding:10px 4px;

    text-align:center;

    transition:.35s;

    background:#fff;

}

.source-card:hover{

    transform:translateY(-6px);

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

}

.source-card img{

    width:68px;

    display:block;

    margin:0 auto 8px;

}

.source-card h4{

    font-size:18px;

    color:#0b4d3b;

    line-height:1.4;

    margin-bottom:5px;

    font-weight:700;

}

.source-card p{

    font-size:16px;

    color:#555;

    line-height:1.4;

}

/*==========================================================
MULTI-COUNTRY SOURCING NETWORK
==========================================================*/

.sourcing-network{

    padding:20px 0 30px;

}

.network-box{

    background:#fff;

    border:5px solid #e6e6e6;

    border-radius:10px;

    padding:5px;

}

.network-grid{

    display:grid;

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

    gap:15px;

    align-items:center;

}

.network-map h3{

    color:#0b4d3b;

    font-size:24px;

    margin-bottom:20px;

    font-weight:700;

}

.network-map img{

    width:100%;

    display:block;

}

.country-group{

    margin-bottom:20px;

}

.country-group h4{

    color:#0b4d3b;

    font-size:20px;

    margin-bottom:10px;

}

.country-group ul{

    list-style:none;

    padding:10;

}

.country-group li{

    margin-bottom:10px;

    color:#444;

    position:relative;

    padding-left:50px;

}

.country-group li::before{

    content:"•";

    color:#d89a1d;

    position:absolute;

    left:0;

}

.network-description p{

    font-size:16px;

    color:#555;

    line-height:1.5;

}

.network-description img{

    display:block;

    width:100%;

    height:auto;

    margin-bottom:12px;

}

.network-description{

    display:flex;

    flex-direction:column;

    width:100%;

}

.network-stats{

    margin-top:5px;

    display:grid;

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

    gap:10px;

}

.stat-box{

    border:1px solid #e6e6e6;

    border-radius:8px;

    text-align:center;

    padding:4px;

    background:#fafafa;

}

.stat-box img{

    display:block;

    width:78px;          /* Increase to 50px or 60px if required */

    height:78px;

    margin:0 auto 15px;

    object-fit:contain;

}

.stat-box h4{

    color:#0b4d3b;

    font-size:28px;

    margin-bottom:14px;

}

.stat-box span{

    font-size:16px;

    color:#666;

}

/*==========================================================
SUPPORTING CUSTOMERS ACROSS MULTIPLE INDUSTRIES
==========================================================*/

.industry-supported{

    padding:10px 0;

    background:#ffffff;

}

.industry-grid{

    display:grid;

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

    gap:20px;

    margin-top:20px;

    text-align:left;

}

.industry-item{

    transition:.3s;

}

.industry-item:hover{

    transform:translateY(-6px);

}

.industry-item img{

    width:70px;

    height:70px;

    margin-bottom:15px;

}

.industry-item span{

    display:block;

    font-size:14px;

    line-height:1.5;

    color:#15392d;

    font-weight:600;

}

/*==========================================================
PRODUCTS COMMITMENT
==========================================================*/

.products-commitment{

    background:#ffffff;

    overflow:hidden;

    padding:10px 0;

}

/*----------------------------------------------------------
Container
----------------------------------------------------------*/

.products-commitment .container{

    background:#063326;

    border-top:4px solid #b9891b;

    border-radius:18px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:180px;

    padding:5;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.products-commitment-left{

    width:44%;

    display:flex;

    align-items:center;

    padding:20px 20px 20px 40px;

}

.products-commitment-left img{

    width:100px;

    margin-right:28px;

    flex-shrink:0;

}

.products-commitment-text h3{

    color:#d89a1d;

    font-size:20px;

    font-weight:700;

    margin-bottom:6px;

}

.products-commitment-text p{

    color:#ffffff;

    font-size:12px;

    line-height:2.2;

    margin:0;

}

/*----------------------------------------------------------
CENTER
----------------------------------------------------------*/

.products-commitment-center{

    width:24%;

    color:#ffffff;

}

.products-commitment-center h4{

    color:#d89a1d;

    font-size:15px;

    line-height:1.4;

    margin-bottom:16px;

    font-weight:700;

}

.products-commit-script{

    display:block;

    color:#ffffff;

    font-size:28px;

    font-family:"Brush Script MT", cursive;

    margin-bottom:2px;

}

.products-commitment-center h2{

    color:#d89a1d;

    font-size:18px;

    font-weight:700;

    margin:2px 0;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.products-commitment-right{

    width:32%;

    align-self:stretch;

    display:flex;

    justify-content:flex-end;

    overflow:hidden;

}

.products-commitment-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==========================================================
PRODUCT SPECIFICATIONS WEB PAGE
PRODUCT SPECIFICATIONS HERO
==========================================================*/

.specifications-hero{

    background:transparent;

    overflow:hidden;

    padding:4px 0;

}

.container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 1px;

}

.specifications-hero-content{

    display:flex;

    align-items:stretch;

    min-height:420px;

    background:#063326;

}

/*----------------------------------------------------------
LEFT PANEL
----------------------------------------------------------*/

.specifications-hero-left{

    width:40%;

    padding:20px;

    background:#063326;

    color:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.specifications-hero-left h1{

    font-size:28px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:5px;

    line-height:1;

}

.specifications-hero-left h2{

    font-size:22px;

    font-weight:700;

    color:#d89a1d;

    line-height:1.3;

    margin-bottom:5px;

}

.specifications-hero-left p{

    font-size:14px;

    line-height:1.75;

    color:#ffffff;

    margin-bottom:25px;

}

/*----------------------------------------------------------
VERTICAL GOLD DIVIDER
----------------------------------------------------------*/

.specifications-divider{

    width:3px;

    background:#d89a1d;

    flex-shrink:0;

}

/*----------------------------------------------------------
RIGHT PANEL
----------------------------------------------------------*/

.specifications-hero-right{

    width:60%;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:420px;

    background:#063326;

}

.specifications-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*----------------------------------------------------------
BUTTONS
----------------------------------------------------------*/

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

    width:100%;

    margin:0 auto;

}

.btn-gold{

    background:#d89a1d;

    color:#fff;

    padding:14px 28px;

    border-radius:4px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s;

}

.btn-gold:hover{

    background:#be8210;

}

.btn-outline{

    border:2px solid #d89a1d;

    color:#fff;

    padding:12px 28px;

    border-radius:4px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s;

}

.btn-outline:hover{

    background:#d89a1d;

}

/*==========================================================
WHY MATERIAL SELECTION MATTERS
==========================================================*/

#why-material-selection{

    padding:3px 0 3px;

    background:#ffffff;

}

/*----------------------------------------------------------
SECTION TITLE
----------------------------------------------------------*/

.specifications-section-title{

    text-align:center;

    margin-bottom:0px;

}

.specifications-section-title h2{

    font-size:36px;

    font-weight:700;

    color:#083629;

    margin:0;

    text-transform:uppercase;

}

.specifications-section-title span{

    display:block;

    width:30px;

    height:4px;

    background:#d89a1d;

    border-radius:5px;

    margin:8px auto 0;

}

/*----------------------------------------------------------
GRID
----------------------------------------------------------*/

.material-selection-grid{

    display:grid;

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

    background:#ffffff;

    border:1px solid #e8e8e8;

    border-radius:10px;

    overflow:hidden;

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

}

/*----------------------------------------------------------
CARD
----------------------------------------------------------*/

.material-card{

    padding:2px 2px;

    text-align:center;

    border-right:1px solid #ececec;

}

.material-card:last-child{

    border-right:none;

}

.material-card img{

    width:100px;

    height:100px;

    object-fit:contain;

    display:block;

    margin:0 auto 1px;

}

.material-card h3{

    margin:0 0 12px;

    font-size:20px;

    font-weight:700;

    color:#083629;

    line-height:1.35;

}

.material-card p{

    margin:0;

    font-size:18px;

    color:#555555;

    line-height:1.4;

}

/*==========================================================
PRODUCT SPECIFICATIONS
TECHNICAL PRODUCT REFERENCE LIBRARY
==========================================================*/

#technical-library{

    padding:10px 0 10px;

    background:#ffffff;

}

/*----------------------------------------------------------
SECTION TITLE
----------------------------------------------------------*/

.specifications-section-title{

    text-align:center;

    margin-bottom:10px;

}

.specifications-section-title h2{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#063326;

    text-transform:uppercase;

}

.specifications-section-title span{

    display:block;

    width:70px;

    height:4px;

    margin:14px auto 0;

    background:#d89a1d;

    border-radius:5px;

}

/*----------------------------------------------------------
MAIN WRAPPER
----------------------------------------------------------*/

.technical-library-wrapper{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:12px;

    align-items:stretch;

}

/*----------------------------------------------------------
LEFT MENU
----------------------------------------------------------*/

.library-menu{

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:8px;

    overflow:hidden;

    height:100%;

}

.library-menu-title{

    background:#063326;

    color:#ffffff;

    text-align:center;

    padding:16px;

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.3px;

}

/*----------------------------------------------------------
CATEGORY BUTTONS
----------------------------------------------------------*/

.library-category{

    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 10px 14px 14px;

    border:none;

    border-bottom:1px solid #ececec;

    background:#ffffff;

    cursor:pointer;

    transition:.30s;

    text-align:left;

}

.library-category:last-child{

    border-bottom:none;

}

.library-category img{

    width:28px;

    height:28px;

    flex-shrink:0;

}

.library-category span{

    flex:1;

    color:#063326;

    font-size:16px;

    font-weight:600;

    line-height:1.45;

}

.library-category i{

    color:#d89a1d;

    font-size:12px;

    transition:.30s;

}

.library-category:hover{

    background:#f7faf8;

}

.library-category:hover i{

    transform:translateX(3px);

}

.library-category.active{

    background:#dff2ff;

    border-left:4px solid #d89a1d;

}

.library-category.active span{

    font-weight:700;

}

.library-category.active i{

    color:#d89a1d;

}

/*----------------------------------------------------------
RIGHT CONTENT
----------------------------------------------------------*/

.library-content{

    display:grid;

    grid-template-columns:repeat(3,minmax(180px,1fr)) 240px;

    gap:14px;

    align-items:stretch;

}

/*----------------------------------------------------------
CONTENT PANELS
----------------------------------------------------------*/

.library-column,

.library-image-panel{

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:8px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-height:550px;

}

/*----------------------------------------------------------
COLUMN HEADERS
----------------------------------------------------------*/

.library-column-title{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:50px;

    padding:10px 8px;

    background:#063326;

    color:#ffffff;

    text-align:center;

    font-size:14px;

    font-weight:700;

    line-height:1.3;

    text-transform:uppercase;

    border-bottom:3px solid #d89a1d;

    letter-spacing:.15px;

}

/*----------------------------------------------------------
LISTS
----------------------------------------------------------*/

.library-column ul{

    list-style:none;

    margin:0;

    padding:18px 16px;

}

.library-column li{

    position:relative;

    padding-left:18px;

    margin-bottom:12px;

    color:#063326;

    font-size:16px;

    font-weight:500;

    line-height:1.45;

}


.library-column li:last-child{

    margin-bottom:0;

}

.library-column li::before{

    content:"•";

    position:absolute;

    left:0;

    top:0;

    color:#d89a1d;

    font-weight:700;

}

/*----------------------------------------------------------
IMAGE PANEL
----------------------------------------------------------*/

.library-image-panel{

    justify-content:space-between;

}

.library-image-panel img{

    width:100%;

    flex:1;

    object-fit:cover;

    display:block;

    background:#f8f8f8;

}

/*----------------------------------------------------------
BUTTON
----------------------------------------------------------*/

.library-btn{

    display:block;

    padding:15px;

    background:#063326;

    color:#ffffff;

    text-align:center;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.30s;

}

.library-btn:hover{

    background:#0b4d39;

}

/*----------------------------------------------------------
LIBRARY INSTRUCTION BAR
----------------------------------------------------------*/

.library-instruction{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0 0 18px 0;

    padding:4px 2px;

    background:#fdf0c8;

    border-left:5px solid #d89a1d;

    border-radius:4px;

}

.library-instruction i{

    color:#063326;

    font-size:22px;

    flex-shrink:0;

}

.library-instruction span{

    color:#063326;

    font-size:17px;

    line-height:1.6;

}

.library-instruction strong{

    color:#063326;

}

/*==========================================================
TECHNICAL LIBRARY COLOUR THEMES
==========================================================*/

/*----------------------------------------------------------
STEEL & GALVANIZED STEEL
----------------------------------------------------------*/

.library-content.theme-steel .library-column{

    background:#dff2ff;

}

/*----------------------------------------------------------
STAINLESS STEEL
----------------------------------------------------------*/

.library-content.theme-stainless .library-column{

    background:#f2f2f2;

}

/*----------------------------------------------------------
ALUMINIUM PRODUCTS
----------------------------------------------------------*/

.library-content.theme-aluminium .library-column{

    background:#fdf0c8;

}

/*----------------------------------------------------------
OILFIELD, OCTG & PIPELINE
----------------------------------------------------------*/

.library-content.theme-oilfield .library-column{

    background:#ffe7d6;

}

/*----------------------------------------------------------
WIRE & WIRE MESH
----------------------------------------------------------*/

.library-content.theme-wire .library-column{

    background:#e7f4ff;

}

/*----------------------------------------------------------
CONSTRUCTION HARDWARE
----------------------------------------------------------*/

.library-content.theme-hardware .library-column{

    background:#f8efd9;

}

/*----------------------------------------------------------
HVAC & REFRIGERATION
----------------------------------------------------------*/

.library-content.theme-hvac .library-column{

    background:#e6f8ee;

}

/*----------------------------------------------------------
PLUMBING & PIPING
----------------------------------------------------------*/

.library-content.theme-plumbing .library-column{

    background:#e7f8ff;

}

/*----------------------------------------------------------
INDUSTRIAL CONSUMABLES
----------------------------------------------------------*/

.library-content.theme-consumables .library-column{

    background:#fff4d8;

}

/*----------------------------------------------------------
WOOD & ENGINEERED WOOD
----------------------------------------------------------*/

.library-content.theme-wood .library-column{

    background:#f5ebdc;

}

/*----------------------------------------------------------
INTERIOR & ARCHITECTURAL
----------------------------------------------------------*/

.library-content.theme-interior .library-column{

    background:#f3ecff;

}


/*==========================================================
INTERNATIONAL STANDARDS
==========================================================*/

.standards-section{

    padding:5px 0;

    background:#ffffff;

}

.standards-grid{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

.standard-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff;

    border:4px solid #B8892D;

    border-radius:10px;

    padding:5px 5px;

    min-height:130px;

    transition:.3s;

}

.standard-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 28px rgba(0,0,0,.08);

}

.standard-card img{

    width:60px;

    height:60px;

    object-fit:contain;

    margin-bottom:15px;

}

.standard-card h4{

    font-size:20px;

    color:#063326;

    margin-bottom:10px;

}

.standard-card p{

    font-size:13px;

    color:#666;

    line-height:1.5;

}

.standard-card-highlight{

    background:#063326;

    color:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.standard-card-highlight h3{

    font-size:28px;

    color:#d89a1d;

    margin-bottom:15px;

    font-weight:700;

}

.standard-card-highlight h4{

    color:#ffffff;

    margin-bottom:12px;

    font-size:18px;

    font-weight:600;

}

.standard-card-highlight p{

    color:#ffffff;

    font-size:15px;

    line-height:1.6;

    text-align:center;

    max-width:160px;

}

/*==========================================================
MATERIAL SELECTION CONSIDERATION
==========================================================*/

.material-expertise{

    padding:10px 0;

    background:#ffffff;

}

.expertise-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}

.expertise-card{

    display:flex;

    flex-direction:column;

    height:100%;

    border-radius:8px;

}

.expertise-card:nth-child(1){

    background:#e3f2fb;

}

.expertise-card:nth-child(2){

    background:#fdf0c8;

}

.expertise-card:nth-child(3){

    background:#e3f2fb;

}

.expertise-card:hover{

    transform:translateY(-8px);

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

}

.expertise-card h3{

    background:#063326;

    color:#ffffff;

    padding:12px 15px;

    text-align:center;

    font-size:24px;

    font-weight:600;

    border-bottom:3px solid #d89a1d;

    border-radius:8px 8px 0 0;

    margin:0;

}

.expertise-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.expertise-body{

    flex:1;

    display:flex;

    flex-direction:column;

}

.expertise-content img{

    width:100%;

    height:220px;

    object-fit:cover;

    margin-top:20px;

    border-radius:8px;

}

.expertise-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.expertise-list ul,
.expertise-text ul{

    padding-left:20px;

}

.expertise-list ul li,
.expertise-text ul li{

    margin-bottom:8px;

    line-height:1.6;

}

/*==========================================================
COUNTRY COLUMNS
==========================================================*/

.country-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:20px;

}

/*----------------------------------------------------------
ASIA - SHIFT RIGHT
----------------------------------------------------------*/

.country-columns > div:first-child{

    padding-left:50px;

}

/*----------------------------------------------------------
EUROPE - MOVE TOWARDS CENTER
----------------------------------------------------------*/

.country-columns > div:last-child{

    transform:translateX(-50px);

}

/*==========================================================
TICK MARKS — CARD 2 & CARD 3
==========================================================*/

.expertise-card:nth-child(2) ul,
.expertise-card:nth-child(3) ul{

    list-style:none;

    padding-left:0;

}

.expertise-card:nth-child(2) ul li,
.expertise-card:nth-child(3) ul li{

    position:relative;

    padding-left:24px;

    margin-bottom:8px;

    line-height:1.6;

}

.expertise-card:nth-child(2) ul li::before,
.expertise-card:nth-child(3) ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#d89a1d;

    font-size:16px;

    font-weight:700;

}

/*==========================================================
MOON SHINE ADVANTAGES (5 columns)
==========================================================*/

.advantages-belt{

    padding:5px 0;

    background:#f8faf9;

    border-top:1px solid #e7ece9;

    border-bottom:1px solid #e7ece9;

    margin-top:5px;

}

.advantages-grid{

    display:grid;

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

    gap:12px;

}

.advantage-card{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:12px;

    padding:10px 10px 14px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    transition:.35s;

}

.advantage-card:hover{

    transform:translateY(-6px);

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

    border-color:#d89a1d;

}

.advantage-card img{

    width:100px;

    height:100px;

    object-fit:contain;

    display:block;

    margin:0 auto 18px;

    transition:.35s;

}

.advantage-card:hover img{

    transform:scale(1.08);

}

.advantage-card h4{

    font-size:22px;

    line-height:1.45;

    font-weight:700;

    color:#063326;

    transition:.35s;

}

.advantage-card:hover h4{

    color:#d89a1d;

}

/*==========================================================
IMPORTANT NOTE & OUR COMMITMENT
==========================================================*/

.specifications-commitment-section{

    padding:10px 10px;

    background:#ffffff;

}

/*----------------------------------------------------------
MAIN GRID
----------------------------------------------------------*/

.specifications-commitment-grid{

    display:grid;

    grid-template-columns:35% 64%;

    gap:12px;

    align-items:stretch;

}

/*==========================================================
IMPORTANT NOTE
==========================================================*/

.specifications-important-note{

    background:#e6f7ff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:12px;

    height:360px;

    box-sizing:border-box;

}

/*----------------------------------------------------------
NOTE HEADER
----------------------------------------------------------*/

.specifications-note-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:15px;

}

.specifications-note-header img{

    width:52px;

}

.specifications-note-header h3{

    color:#d89a1d;

    font-size:32px;

    margin:0;

}

/*----------------------------------------------------------
NOTE CONTENT
----------------------------------------------------------*/

.specifications-important-note p{

    margin-bottom:18px;

    line-height:1.7;

    color:#555;

}

/*==========================================================
OUR COMMITMENT
==========================================================*/

.specifications-our-commitment{

    background:#063326;

    border-radius:12px;

    overflow:hidden;

    height:360px;

}

/*----------------------------------------------------------
COMMITMENT CONTENT
----------------------------------------------------------*/

.specifications-commitment-content{

    display:grid;

    grid-template-columns:60% 40%;

    align-items:stretch;

}

/*----------------------------------------------------------
COMMITMENT TEXT
----------------------------------------------------------*/

.specifications-commitment-text{

    padding:12px;

}

.specifications-commitment-text h3{

    color:#ffffff;

    font-size:32px;

    margin:0 0 20px;

}

.specifications-commitment-text p{

    color:#ffffff;

    line-height:1.7;

}

.specifications-commitment-text h4{

    margin-top:30px;

    color:#d89a1d;

    line-height:1.6;

    font-size:22px;

}

/*----------------------------------------------------------
COMMITMENT IMAGE
----------------------------------------------------------*/

.specifications-commitment-image{

    min-width:0;

}

.specifications-commitment-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==========================================================
SPECIFICATIONS CTA (Need assistance selecting...)
==========================================================*/

.specifications-cta-section{

    padding:5px 0;

    background:#ffffff;

}

.specifications-cta-wrapper{

    display:grid;

    grid-template-columns:25% 45% 30%;

    align-items:center;

    background:#063326;

    border-radius:14px;

    overflow:hidden;

}

.specifications-cta-image{

    height:100%;

}

.specifications-cta-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.specifications-cta-content{

    padding:10px;

}

.specifications-cta-content h2{

    color:#ffffff;

    font-size:22px;

    margin-bottom:18px;

    line-height:1.25;

}

.specifications-cta-content p{

    color:#ffffff;

    line-height:1.9;

    font-size:17px;

}

.specifications-cta-buttons{

    display:flex;

    flex-direction:column;

    gap:28px;

    padding:35px;

}

.specifications-cta-buttons .btn{

    width:100%;

    text-align:center;

}

/*==========================================================
SPECIFICATIONS CONTINUE JOURNEY
==========================================================*/

.specifications-journey-section{

    padding:5px 0;

    background:#ffffff;

}

.specifications-journey-grid{

    display:grid;

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

    gap:24px;

    margin-top:15px;

}

.specifications-journey-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:20px 10px;

    text-align:center;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 4px 12px rgba(0,0,0,.04);

}

.specifications-journey-card:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 30px rgba(0,0,0,.10);

    border-color:#d89a1d;

}

.specifications-journey-card img{

    width:78px;

    height:78px;

    object-fit:contain;

    margin:0 auto 18px;

    display:block;

}

.specifications-journey-card h3{

    font-size:24px;

    color:#063326;

    margin-bottom:10px;

}

.specifications-journey-card p{

    color:#666;

    font-size:16px;

    line-height:1.7;

    margin-bottom:22px;

    min-height:70px;

}

.specifications-journey-card span{

    color:#d89a1d;

    font-weight:700;

    transition:.3s;

}

.specifications-journey-card:hover span{

    letter-spacing:.6px;

}

/*==========================================================
WEIGHT CALCULATION HERO
==========================================================*/

.weight-hero{

    background:transparent;

    overflow:hidden;

    padding:4px 0;

}

.weight-hero .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 1px;

}

.weight-hero-grid{

    display:grid;

    grid-template-columns:42% 58%;

    align-items:stretch;

}

.weight-hero-text{

    background:#042d21;

    padding:10px 1px 10px 11px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.weight-hero-subtitle{

    display:inline-block;

    color:#d89a1d;

    font-size:24px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:8px;

    text-transform:uppercase;

}

.weight-hero-text h1{

    color:#ffffff;

    font-size:28px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:12px;

}

.weight-hero-text h1 span{

    color:#d89a1d;

}

.weight-hero-text h3{

    color:#ffffff;

    font-size:15px;

    line-height:1.45;

    font-weight:600;

    margin-bottom:14px;

}

.weight-hero-text p{

    color:#f3f3f3;

    font-size:14px;

    line-height:1.5;

    margin-bottom:8px;

}

.weight-hero-note{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-top:25px;

    padding-top:10px;

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

}

.weight-hero-note img{

    width:36px;

    flex-shrink:0;

    margin-top:2px;

}

.weight-hero-note span{

    color:#ffffff;

    font-size:13px;

    line-height:1.4;

}

.weight-hero-image{

    height:100%;

}

.weight-hero-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

/*==========================================================
WHY USE THESE ENGINEERING TOOLS
==========================================================*/

.weight-tools{

    padding:8px 0 30px;

    background:#ffffff;

}

.weight-tools-wrapper{

    background:#063326;

    border-radius:12px;

    overflow:hidden;

}

.weight-tools-wrapper h2{

    font-size:22px;

    font-weight:700;

    padding:10px 20px 8px;

    letter-spacing:.5px;

}

.weight-tools-grid{

    display:grid;

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

}

.weight-tool-item{

    padding:12px 10px 10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    border-right:1px solid rgba(216,154,29,.40);

    transition:.35s;

}

.weight-tool-item:last-child{

    border-right:none;

}

.weight-tool-item:hover{

    background:#0b4434;

}

.weight-tool-item img{

    display:block;

    width:62px;

    height:62px;

    object-fit:contain;

    margin:0 auto 8px;

}

.weight-tool-item h4{

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    line-height:1.25;

    margin:0;

    text-align:center;

}

/*==========================================================
ENGINEERING REFERENCE CENTER (Product weight calculators)
==========================================================*/

.weight-reference{

    padding:10px 0 10px;

    background:#f8faf9;

}

.weight-reference-grid{

    display:grid;

    grid-template-columns:25% 75%;

    gap:1px;

}

.weight-sidebar{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.weight-panel{

    background:#ffffff;

    border:1px solid #e3e3e3;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 4px 10px rgba(0,0,0,.04);

}

.weight-panel h3{

    margin:0;

    padding:18px 20px;

    background:#f4f4f4;

    color:#063326;

    font-size:20px;

    font-weight:700;

}

.weight-main{

    display:flex;

    flex-direction:column;

}

.weight-main-title{

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:#063326;

    margin-bottom:24px;

}

.weight-calculator-grid{

    display:grid;

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

    gap:20px;

}

/*==========================================================
LEFT SIDEBAR
==========================================================*/

.weight-panel{

    background:#ffffff;

    border:1px solid #dddddd;

    border-radius:10px;

    overflow:hidden;

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

}

.weight-panel h3{

    margin:0;

    padding:16px 18px;

    background:#f5f5f5;

    color:#063326;

    font-size:19px;

    font-weight:700;

}

.weight-panel-intro{

    padding:18px;

    margin:0;

    color:#555;

    line-height:1.8;

    font-size:15px;

}

.weight-density-table,

.weight-rebar-table{

    width:100%;

    border-collapse:collapse;

    font-size:14px;

}

.weight-density-table th,

.weight-density-table td,

.weight-rebar-table th,

.weight-rebar-table td{

    border:1px solid #e4e4e4;

    padding:10px;

    text-align:center;

}

.weight-density-table th,

.weight-rebar-table th{

    background:#063326;

    color:#ffffff;

    font-weight:600;

}

.weight-reference-list{

    padding:0 22px 20px;

    margin:0;

}

.weight-reference-list li{

    margin-bottom:12px;

    color:#555;

    line-height:1.6;

}

.weight-sidebar-image{

    width:100%;

    display:block;

    margin-top:20px;

}

/*==========================================================
PRODUCT WEIGHT CARDS
==========================================================*/

.weight-card{

    background:#ffffff;

    border:1px solid #dddddd;

    border-radius:10px;

    padding:20px;

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

    display:flex;

    flex-direction:column;

    min-height:500px;

}

.weight-card h3{

    margin:0 0 18px;

    color:#063326;

    font-size:20px;

    font-weight:700;

    text-align:center;

}

.weight-card h4{

    margin:14px 0 6px;

    color:#333;

    font-size:16px;

    font-weight:600;

}

.weight-card p{

    margin:0 0 8px;

    color:#555;

    line-height:1.7;

    font-size:14px;

}

.weight-card ul{

    margin:8px 0 0 18px;

    padding:0;

}

.weight-card li{

    margin-bottom:8px;

    color:#555;

    line-height:1.5;

    font-size:14px;

}

.weight-card img{

    width:100%;

    margin-top:auto;

    border-radius:8px;

    display:block;

}

/*==========================================================
INTERNATIONAL STANDARDS
==========================================================*/

.weight-standards{

    padding:10px 0;

    background:#ffffff;

}

.weight-standards h2{

    text-align:center;

    color:#063326;

    font-size:28px;

    font-weight:700;

    margin-bottom:35px;

}

.weight-standards-grid{

    display:grid;

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

    gap:15px;

    align-items:center;

}

.weight-standard-logo{

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:8px;

    padding:12px;

    text-align:center;

    transition:.3s;

}

.weight-standard-logo:hover{

    transform:translateY(-4px);

    border-color:#d89a1d;

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

}

.weight-standard-logo img{

    width:100%;

    max-height:45px;

    object-fit:contain;

}

.weight-standards-note{

    margin-top:25px;

    text-align:center;

    color:#666;

    font-size:15px;

    line-height:1.3;

}

/*==========================================================
TECHNICAL CONSULTATION & DISCLAIMER
==========================================================*/

.weight-consultation-section{

    padding:8px 0;

    background:#f8faf9;

}

/*----------------------------------------------------------
MAIN 2-COLUMN LAYOUT
----------------------------------------------------------*/

.weight-consultation-grid{

    display:grid;

    grid-template-columns:65% 35%;

    gap:1px;

    align-items:stretch;

}

/*==========================================================
TECHNICAL CONSULTATION
==========================================================*/

.weight-consultation{

    background:#063326;

    border-radius:12px;

    overflow:hidden;

    height:auto;

}

/*----------------------------------------------------------
CONSULTATION CONTENT
----------------------------------------------------------*/

.weight-consultation-content{

    display:grid;

    grid-template-columns:60% 40%;

    align-items:stretch;

    height:auto;

}

/*----------------------------------------------------------
TEXT
----------------------------------------------------------*/

.weight-consultation-text{

    padding:24px;

}

.weight-consultation-text h2{

    color:#d89a1d;

    font-size:30px;

    line-height:1.15;

    margin:0 0 15px;

}

.weight-consultation-text p{

    color:#ffffff;

    line-height:1.4;

    margin-bottom:12px;

}

.weight-consultation-text ul{

    margin:15px 0 0;

    padding-left:10px;

}

.weight-consultation-text li{

    color:#ffffff;

    margin-bottom:7px;

    line-height:1.4;

}

/*----------------------------------------------------------
CONSULTATION IMAGE
----------------------------------------------------------*/

.weight-consultation-image{

    min-width:0;

    height:100%;

    display:flex;

    align-items:stretch;

}

.weight-consultation-image img{

    width:100%;

    height:100%;

    min-height:0;

    object-fit:cover;

    display:block;

}

/*==========================================================
IMPORTANT DISCLAIMER
==========================================================*/

.weight-disclaimer{

    background:#A04C00;

    border:2px solid #d89a1d;

    border-radius:12px;

    padding:22px 25px;

    text-align:center;

    height:auto;

    align-self:stretch;

    box-sizing:border-box;

}

/*----------------------------------------------------------
DISCLAIMER ICON
----------------------------------------------------------*/

.weight-disclaimer img{

    width:60px;

    margin:0 auto 12px;

    display:block;

}

/*----------------------------------------------------------
DISCLAIMER TITLE
----------------------------------------------------------*/

.weight-disclaimer h3{

    color:#d89a1d;

    font-size:28px;

    margin:0 0 15px;

    text-align:center;

}

/*----------------------------------------------------------
DISCLAIMER TEXT
----------------------------------------------------------*/

.weight-disclaimer p{

    color:#ffffff;

    line-height:1.9;

    margin-bottom:12px;

    text-align:left;

}

/*==========================================================
OUR COMMITMENT
==========================================================*/

.weight-commitment{

    background:transparent;

    padding:10px 0;

}

.weight-commitment .container{

    max-width:1400px;

    margin:0 auto;

    padding:0;

}

.weight-commitment-grid{

    background:#063326;

    display:grid;

    grid-template-columns:50% 30% 20%;

    align-items:center;

    border-radius:12px;

    overflow:hidden;

}

/*==========================================================
LEFT PANEL
==========================================================*/

.weight-commitment-left{

    display:flex;

    align-items:center;

    gap:22px;

    padding-right:30px;

}

.weight-commitment-icon{

    width:78px;

    height:78px;

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

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.weight-commitment-icon img{

    width:42px;

}

.weight-commitment-text h3{

    color:#ffffff;

    font-size:20px;

    margin-bottom:12px;

    font-weight:700;

}

.weight-commitment-text p{

    color:#ffffff;

    font-size:15px;

    line-height:1.6;

    margin-bottom:10px;

}

/*==========================================================
CENTRE PANEL
==========================================================*/

.weight-commitment-middle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

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

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

    padding:0 20px;

}

.weight-commitment-middle-icon{

    flex-shrink:0;

}

.weight-commitment-middle-icon img{

    width:110px;
    height:auto;
    display:block;

}

.weight-commitment-middle h3{

    margin:0;

    color:#d89a1d;

    font-size:18px;

    line-height:1.5;

    font-weight:700;

    text-transform:uppercase;

}

.weight-commitment-middle span{

    color:#f2b233;

}

/*==========================================================
RIGHT PANEL
==========================================================*/

.weight-commitment-right{

    text-align:center;

    padding-left:20px;

}

.weight-commitment-right h3{

    color:#ffffff;

    font-size:18px;

    margin-bottom:10px;

}

.weight-commitment-right p{

    color:#ffffff;

    font-size:18px;

    line-height:1.3;

    margin-bottom:10px;

    font-style:italic;

}

.weight-commitment-right strong{

    display:block;

    color:#ffffff;

    font-size:34px;

    line-height:1.3;

    font-weight:700;

}

/*==========================================================
QUICK NAVIGATION (the bottom last 5 columns)
==========================================================*/

.weight-quick-links{

    background:#ffffff;

    padding:6px 0 6px;

}

.weight-quick-grid{

    display:grid;

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

    gap:18px;

}

.weight-quick-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:8px;

    padding:22px 18px;

    text-decoration:none;

    transition:.30s;

}

.weight-quick-card:hover{

    transform:translateY(-5px);

    border-color:#d89a1d;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.weight-quick-card img{

    width:100px;

    height:100px;

    object-fit:contain;

    margin-bottom:16px;

}

.weight-quick-card h3{

    color:#063326;

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;

    min-height:42px;

}

.weight-quick-card p{

    color:#555;

    font-size:18px;

    line-height:1.3;

    min-height:45px;

    margin-bottom:14px;

}

.weight-quick-card span{

    color:#d89a1d;

    font-weight:700;

    font-size:28px;

}

/*==========================================================
TRADEALLY ERP WEB PAGE
TRADEALLY HERO HERO
==========================================================*/

.tradeally-hero{

    background:transparent;

    overflow:hidden;

    padding:4px 0;

}

.tradeally-hero .container{

    max-width:1400px;

    margin:0 auto;

    padding:0;

}

.tradeally-hero-content{

    background:#063326;

    display:flex;

    align-items:stretch;

    min-height:100px;

    padding:0;

    border-radius:12px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT PANEL
----------------------------------------------------------*/

.tradeally-hero-left{

    width:40%;

    padding:15px;

    background:#063326;

    color:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.tradeally-hero-left h1{

    font-size:28px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:5px;

    line-height:1;

}

.tradeally-hero-left h2{

    font-size:22px;

    font-weight:700;

    color:#d89a1d;

    line-height:1.3;

    margin-bottom:5px;

}

.tradeally-hero-left p{

    font-size:14px;

    line-height:1.75;

    color:#ffffff;

    margin-bottom:25px;

}

/*----------------------------------------------------------
VERTICAL GOLD DIVIDER
----------------------------------------------------------*/

.tradeally-divider{

    width:3px;

    background:#d89a1d;

    flex-shrink:0;

}

/*----------------------------------------------------------
RIGHT PANEL
----------------------------------------------------------*/

.tradeally-hero-right{

    width:60%;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:50px;

    background:#063326;

}

.tradeally-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.tradeally-hero-content{

    display:flex;

    align-items:stretch;

    min-height:100px;

    padding:0;

}


/*----------------------------------------------------------
BUTTONS
----------------------------------------------------------*/

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.btn-gold{

    background:#d89a1d;

    color:#fff;

    padding:14px 28px;

    border-radius:4px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s;

}

.btn-gold:hover{

    background:#be8210;

}

.btn-outline{

    border:2px solid #d89a1d;

    color:#fff;

    padding:12px 28px;

    border-radius:4px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s;

}

.btn-outline:hover{

    background:#d89a1d;

}

/*==========================================================
WHY WE BUILT TRADEALLY
==========================================================*/

.tradeally-overview{

    padding:5px 0;

    background:#ffffff;

}

.tradeally-overview-grid{

    display:grid;

    grid-template-columns:34% 66%;

    gap:20px;

    align-items:start;

}

/* LEFT */

.tradeally-heading{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:12px;

}

.tradeally-heading-icon{

    width:64px;
    height:64px;
    border-radius:50%;
    background:#063326;
    display:flex;
    align-items:center;
    justify-content:center;

}

.tradeally-heading-icon img{

    width:36px;

}

.tradeally-heading h2{

    color:#063326;

    font-size:32px;

    font-weight:700;

    line-height:1.15;

    margin:0;

}

/* LEFT COLUMN */

.tradeally-why{

    width:100%;

    max-width:100%;

    overflow:hidden;

    padding-right:18px;

}

.tradeally-why p{

    line-height:1.9;
    color:#555;
    margin-bottom:12px;

}

.tradeally-why-image{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    border-radius:10px;

    margin:1px 0;

}

.tradeally-values{

    display:grid;

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

    background:#063326;

    border-radius:0 0 8px 8px;

    overflow:hidden;

}

.tradeally-value{

    text-align:center;
    padding:10px 6px;
    border-right:1px solid rgba(255,255,255,.12);

}

.tradeally-value:last-child{

    border-right:none;

}

.tradeally-value img{

    width:68px;
    margin-bottom:12px;

}

.tradeally-value h4{

    color:#fff;
    font-size:14px;
    margin-bottom:8px;

}

.tradeally-value p{

    color:#ddd;
    font-size:13px;
    margin:0;

}

.tradeally-overview-grid{

    outline:4px solid #b8860b;

}
.tradeally-core{

    width:100%;

    min-width:0;

    padding-right:20px;

    box-sizing:border-box;

}

/*==========================================================
CORE FUNCTIONAL AREAS
==========================================================*/

.tradeally-core h2{

    text-align:center;
    color:#063326;
    font-size:34px;
    font-weight:700;
    margin-bottom:10px;

}

.tradeally-core-intro{

    text-align:center;
    color:#666;
    font-size:15px;
    line-height:1.7;
    margin-bottom:30px;

}

.tradeally-core-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;

}

.tradeally-core-card{

    background:#ffffff;
    border:1px solid #e5e5e5;
    border-radius:8px;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-height:520px;

    box-shadow:0 3px 8px rgba(0,0,0,.04);

    transition:.30s;

}

.tradeally-core-card:hover{

    transform:translateY(-4px);

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

}

/*==========================================================
CARD HEADINGS
==========================================================*/

.tradeally-core-card h3{

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

    color:#ffffff;
    font-size:16px;
    font-weight:700;
    line-height:1.25;

    padding:15px 16px;
    margin:0;

}

.tradeally-core-card h3 img{

    width:28px;
    height:28px;
    object-fit:contain;
    flex-shrink:0;

}

.tradeally-core-card h3 span{

    display:block;

}

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

.procurement h3{

    background:#0d5c7d;

}

.commercial h3{

    background:#0b5d46;

}

.execution h3{

    background:#c57b17;

}

.customer h3{

    background:#4d3b72;

}

/*==========================================================
LIST
==========================================================*/

.tradeally-core-card ul{

    list-style:none;
    padding:18px 18px 20px;
    margin:0;
    flex:1;

}

.tradeally-core-card li{

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

    margin-bottom:16px;

    color:#444;
    font-size:14px;
    line-height:1.5;

}

.tradeally-core-card li:last-child{

    margin-bottom:0;

}

/*==========================================================
LIST ICONS
==========================================================*/

.tradeally-core-card li img{

    width:18px;
    height:18px;

    margin-top:2px;

    object-fit:contain;

    flex-shrink:0;

}

.tradeally-core-card li span{

    display:block;
    flex:1;

}

/*==========================================================
END-TO-END PROCUREMENT WORKFLOW
==========================================================*/

.tradeally-workflow{

    padding:20px 5px 10px 5px;

    background:#f8fafc;

}

.tradeally-workflow h2{

    text-align:center;

    color:#063326;

    font-size:34px;

    font-weight:700;

    margin-bottom:10px;

}

.tradeally-workflow-grid{

    display:grid;

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

    gap:0;

    position:relative;

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:10px;

    overflow:hidden;

}

.tradeally-step{

    position:relative;

    text-align:center;

    padding:28px 12px;

    border-right:1px solid #ececec;

}

.tradeally-step:last-child{

    border-right:none;

}

.tradeally-step-icon{

    width:68px;

    height:68px;

    margin:auto;

    border-radius:50%;

    background:#063326;

    display:flex;

    align-items:center;

    justify-content:center;

}

.tradeally-step-icon img{

    width:34px;

    height:34px;

    object-fit:contain;

}

.tradeally-step-number{

    display:inline-block;

    margin-top:14px;

    margin-bottom:12px;

    font-size:14px;

    font-weight:700;

    color:#d89a1d;

}

.tradeally-step h4{

    color:#063326;

    font-size:14px;

    font-weight:700;

    line-height:1.5;

    margin:0;

}

.tradeally-step-arrow{

    position:absolute;

    top:58px;

    right:-9px;

    font-size:22px;

    color:#d89a1d;

    z-index:5;

}

.tradeally-step:last-child .tradeally-step-arrow{

    display:none;

}

.tradeally-workflow-pill{

    width:fit-content;

    margin:40px auto 0;

    padding:16px 40px;

    background:#063326;

    color:#ffffff;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    letter-spacing:.3px;

}

/*==========================================================
WHY TRADEALLY™ IS DIFFERENT
==========================================================*/

.tradeally-different{

    padding:5px 0;

    background:#f8f8f8;

}

.tradeally-different h2{

    text-align:center;

    font-size:34px;

    font-weight:700;

    color:#063326;

    margin-bottom:15px;

}

.tradeally-different-strip{

    display:grid;

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

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:8px;

    overflow:hidden;

}

.tradeally-different-item{

    padding:18px 8px;

    text-align:center;

    border-right:1px solid #ececec;

}

.tradeally-different-item:last-child{

    border-right:none;

}

.tradeally-different-item img{

    display:block;

    width:70px;
    height:70px;

    margin:0 auto 16px;

    object-fit:contain;

}

.tradeally-different-item h3{

    font-size:16px;

    font-weight:700;

    line-height:1.35;

    color:#222;

    margin-bottom:14px;

    text-transform:uppercase;

}

.tradeally-different-item p{

    font-size:16px;

    line-height:1.6;

    color:#555;

    margin:0;

}

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

@media(max-width:1200px){

    .tradeally-different-strip{

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

    }

    .tradeally-different-item{

        border-bottom:1px solid #ececec;

    }

}

@media(max-width:768px){

    .tradeally-different-strip{

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

    }

}

@media(max-width:480px){

    .tradeally-different-strip{

        grid-template-columns:1fr;

    }

    .tradeally-different-item{

        border-right:none;

    }

}

/*==========================================================
KEY CAPABILITIES (workflow & execution control - 4 columns)
==========================================================*/

.tradeally-capabilities{

    padding:4px 0;

    background:#ffffff;

}

.tradeally-capabilities-grid{

    display:grid;

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

    gap:18px;

}

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

.tradeally-capability-card{

    background-repeat:no-repeat;

    background-position:right center;

    background-size:90% 100%;

}

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

.tradeally-capability-content{

    padding:18px 42% 18px 18px;

}

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

.tradeally-capability-card h3{

    font-size:18px;

    font-weight:700;

    color:#222;

    line-height:1.35;

    margin-bottom:15px;

}

.tradeally-capability-card p{

    font-size:13px;

    color:#444;

    line-height:1.7;

    margin-bottom:14px;

}

/*==========================================================
BACKGROUND IMAGES
==========================================================*/

.workflow-control{

    background-image:
    linear-gradient(to right,#f7f8fa 58%,rgba(247,248,250,.35)),
    url("../images/tradeally/a3-tradeally-workflow-control.jpg");

}

.visibility-accountability{

    background-image:
    linear-gradient(to right,#f7f8fa 58%,rgba(247,248,250,.35)),
    url("../images/tradeally/a4-tradeally-visibility-traceability.jpg");

}

.analytics{

    background-image:
    linear-gradient(to right,#f7f8fa 58%,rgba(247,248,250,.35)),
    url("../images/tradeally/a5-tradeally-data-intelligence.jpg");

}

.dashboards{

    background-image:
    linear-gradient(to right,#f7f8fa 58%,rgba(247,248,250,.35)),
    url("../images/tradeally/a6-tradeally-customer-dashboards.jpg");

}

/*==========================================================
TECHNOLOGY PHILOSOPHY & FUTURE VISION
==========================================================*/

.tradeally-philosophy{

    padding:6px 0;

    background:#ffffff;

}

.tradeally-philosophy-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

/*==========================================================
COMMON PANEL
==========================================================*/

.technology-philosophy,
.future-vision{

    min-height:300px;

    background:#ffffff;

    border:1px solid #dcdcdc;

    border-radius:8px;

    overflow:hidden;

}

/*==========================================================
LEFT PANEL
==========================================================*/

.technology-philosophy{

    display:grid;

    grid-template-columns:calc(35% + 40px) calc(65% - 40px);

}

.technology-philosophy,
.future-vision{

    min-height:340px;

}

.technology-photo{

    height:100%;

}

.technology-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.technology-content{

    padding:20px;

}

.technology-content h2{

    font-size:30px;

    font-weight:700;

    color:#063326;

    margin-bottom:18px;

}

.technology-content p{

    font-size:14px;

    line-height:1.8;

    color:#444;

    margin-bottom:16px;

}

.technology-signature{

    margin-top:20px;

}

.technology-signature img{

    width:75px;

    height:auto;

}

.technology-founder{

    margin-top:8px;

    font-size:14px;

    color:#333;

    font-weight:600;

}

/*==========================================================
FUTURE VISION
==========================================================*/

.future-vision{

    display:grid;

    grid-template-columns:58% 42%;

    min-height:320px;

    background:#ffffff;

    border:1px solid #dcdcdc;

    border-radius:8px;

    overflow:hidden;

}

.future-content{

    padding:22px;

}

.future-content h2{

    font-size:30px;

    font-weight:700;

    color:#063326;

    margin-bottom:18px;

}

.future-content p{

    font-size:14px;

    line-height:1.8;

    color:#444;

    margin-bottom:18px;

}

.future-image{

    height:100%;

    overflow:hidden;

}

.future-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.future-note{

    margin-top:20px;

    padding:14px 18px;

    background:#fff5df;

    border:1px solid #d7b66c;

    border-radius:6px;

    color:#444;

    font-size:13px;

    line-height:1.6;

}

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

@media(max-width:1100px){

    .tradeally-philosophy-grid{

        grid-template-columns:1fr;

    }

    .future-content{

        padding-right:42%;

    }

}

@media(max-width:768px){

    .technology-philosophy{

        grid-template-columns:1fr;

    }

    .technology-photo{

        height:280px;

    }

    .future-vision{

        background-size:38% auto;

    }

    .future-content{

        padding:20px;

    }

}

@media(max-width:576px){

    .technology-content h2,
    .future-content h2{

        font-size:24px;

    }

    .technology-content,
    .future-content{

        padding:18px;

    }

}

/*==========================================================
Bringing Visibility, Traceability...
TRADEALLY CALL TO ACTION
==========================================================*/

.tradeally-cta{

    background:transparent;

    padding:6px 0;

}

.tradeally-cta .container{

    max-width:1400px;

    margin:0 auto;

    padding:0;

}

.tradeally-cta-wrapper{

    background:#052e22;

    display:grid;

    grid-template-columns:22% 56% 22%;

    align-items:center;

    min-height:110px;

    border-radius:12px;

    overflow:hidden;

}

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

.tradeally-cta-left{

    height:220px;

    display:flex;

    align-items:flex-end;

}

.tradeally-cta-left img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==========================================================
CENTRE CONTENT
==========================================================*/

.tradeally-cta-content{

    text-align:center;

    padding:10px 20px;

}

.tradeally-cta-content h2{

    font-size:25px;

    line-height:1.15;

    font-weight:700;

    color:#ffffff;

    margin-bottom:10px;

}

.tradeally-cta-content h2 span{

    color:#d7a32d;

}

.tradeally-cta-content h3{

    font-size:32px;

    color:#ffffff;

    font-weight:500;

    margin-bottom:30px;

}

/*==========================================================
BUTTONS
==========================================================*/

.tradeally-cta-buttons{

    display:flex;

    justify-content:center;

    gap:38px;

    flex-wrap:wrap;

}

.tradeally-btn{

    min-width:220px;

    padding:14px 26px;

    border:2px solid #c89a2b;

    border-radius:6px;

    text-decoration:none;

    color:#ffffff;

    font-weight:600;

    font-size:15px;

    transition:.3s;

}

.tradeally-btn:hover{

    background:#c89a2b;

    color:#052e22;

}

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

.tradeally-cta-right{

    height:220px;

    display:flex;

    align-items:flex-end;

}

.tradeally-cta-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

@media(max-width:992px){

    .tradeally-cta-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .tradeally-cta-left,
    .tradeally-cta-right{

        height:110px;

    }

    .tradeally-cta-content h2{

    font-size:24px;

    line-height:1.35;

    margin-bottom:6px;

    }

    .tradeally-cta-content h3{

    font-size:15px;

    margin-bottom:14px;

    }

}

@media(max-width:576px){

    .tradeally-cta-content h2{

        font-size:28px;

    }

    .tradeally-cta-content h3{

        font-size:18px;

    }

.tradeally-btn{

    min-width:165px;

    padding:9px 16px;

    font-size:13px;

}

}

/*==========================================================
OUR PROCESS PAGE
OUR PROCESS HERO
==========================================================*/

.process-hero{

    background:transparent;

    overflow:hidden;

    padding:4px 0;

}

.process-hero .container{

    max-width:1400px;

    margin:0 auto;

    padding:0;

}

.process-hero-content{ 
    background:#063326; 
    display:flex; 
    align-items:stretch; 
    height:450px; 
    border-radius:12px; 
    overflow:hidden; }

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.process-hero-left{

    width:40%;

    padding:15px 10px;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:linear-gradient(90deg,#063326 0%,rgba(6,51,38,.95) 100%);

}

.page-label{

    font-size:24px;

    font-weight:800;

    color:#fff;

    line-height:1;

}

.process-hero-left h1{

    font-size:30px;

    line-height:1;

    color:#c89b3c;

    margin-bottom:10px;

}

.process-hero-left h2{

    font-size:22px;

    line-height:1.45;

    font-weight:500;

    margin-bottom:22px;

}

.process-hero-left p{

    font-size:15px;

    line-height:1.9;

    color:#d8d8d8;

    margin-bottom:45px;

}

/*----------------------------------------------------------
FEATURES
----------------------------------------------------------*/

.hero-features{

    display:grid;

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

    gap:18px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:15px;

}

.feature-icon{

    width:40px;

    height:40px;

    border:3px solid #c89b3c;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#c89b3c;

    font-size:18px;

    flex-shrink:0;

}

.feature-icon img{

    width:18px;

    height:18px;

    object-fit:contain;

    display:block;

}

.hero-feature span{

    font-size:15px;

    font-weight:600;

    line-height:1.4;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.process-hero-right{

    width:60%;

    position:relative;

}

.process-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:1200px){

.process-hero-content{

    flex-direction:column;

}

.process-hero-left,
.process-hero-right{

    width:100%;

}

.process-hero-right{

    height:600px;

}

.hero-features{

    grid-template-columns:1fr;

}

.page-label{

    font-size:54px;

}

.process-hero-left h1{

    font-size:58px;

}

.process-hero-left h2{

    font-size:28px;

}

}

/*==========================================================
PROCESS MAIN SECTION
==========================================================*/

.process-main{

    padding:8px 0;

    background:#f7f7f3;

}

.process-layout{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

/*----------------------------------------------------------
LEFT COLUMN
----------------------------------------------------------*/

.process-left{

    width:60%;

}

.process-right{

    width:40%;

}

/*----------------------------------------------------------
GREEN TITLE
----------------------------------------------------------*/

.section-title-green{

    background:#063326;

    color:#fff;

    text-align:center;

    padding:8px;

    border-radius:10px;

    font-size:26px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:15px;

}

/*----------------------------------------------------------
TIMELINE
----------------------------------------------------------*/

.process-timeline{

    position:relative;

}

.process-timeline::before{

    content:"";

    position:absolute;

    left:26px;

    top:10px;

    bottom:10px;

    width:2px;

    background:#d5a33b;

}

/*----------------------------------------------------------
STEP
----------------------------------------------------------*/

.process-step{

    display:flex;

    gap:20px;

    margin-bottom:18px;

    position:relative;

}

.step-number{

    width:50px;

    height:50px;

    background:#063326;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

.step-icon{

    width:58px;

    height:58px;

    border:2px solid #d5a33b;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#063326;

    font-size:24px;

    background:#fff;

    flex-shrink:0;

}

.step-icon img{

    width:50px;

    height:50px;

    object-fit:contain;

    display:block;

}

.step-content{

    flex:1;

}

.step-content h3{

    font-size:18px;

    color:#063326;

    margin-bottom:8px;

}

.step-content p{

    font-size:16px;

    line-height:1.5;

    color:#555;

}

/*----------------------------------------------------------
POST SUPPORT
----------------------------------------------------------*/

.post-support-box{

    display:flex;

    gap:20px;

    align-items:center;

    margin-top:5px;

    padding:14px;

    background:#fff;

    border:2px solid #ead7a1;

    border-radius:14px;

}

.support-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#f4f4f4;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#063326;

    font-size:28px;

}

.support-icon img{

    width:68px;

    height:68px;

    object-fit:contain;

    display:block;

}

/*==========================================================
RIGHT COLUMN
==========================================================*/

.process-right{

    width:40%;

}

.process-right h2{

    text-align:center;

    font-size:28px;

    color:#063326;

    margin-bottom:10px;

}

.title-divider{

    width:90px;

    height:3px;

    background:#c89b3c;

    margin:0 auto 35px;

}

/*==========================================================
PROCESS PRINCIPLES
==========================================================*/

.principles-grid{

    display:grid;

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

    gap:22px;

    margin-bottom:50px;

}

.principle-card{

    background:#fff;

    border:1px solid #e6e6e6;

    border-radius:14px;

    padding:10px;

    display:flex;

    gap:28px;

    align-items:flex-start;

    transition:.3s;

}

.principle-card:hover{

    transform:translateY(-5px);

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

}

.principle-icon{

    width:70px;

    height:70px;

    background:#063326;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

}

.principle-icon img{

    width:65px;

    height:65px;

    object-fit:contain;

    display:block;

}

.principle-card h3{

    color:#063326;

    font-size:18px;

    margin-bottom:8px;

}

.principle-card p{

    font-size:15px;

    color:#555;

    line-height:1.8;

}

/*==========================================================
ENABLING PROCESS
==========================================================*/

.enabling-process{

    margin-bottom:60px;

}

.enable-card{

    background:#fff;

    border-radius:14px;

    border:1px solid #e5e5e5;

    display:flex;

    align-items:center;

    margin-bottom:18px;

    overflow:hidden;

}

.enable-icon{

    width:110px;

    height:110px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:40px;

}

.enable-icon img{

    width:90px;

    height:90px;

    object-fit:contain;

    display:block;

}

.enable-icon.green{

    background:#063326;

}

.enable-icon.gold{

    background:#c89b3c;

}

.enable-content{

    padding:20px 25px;

}

.enable-content h3{

    color:#063326;

    margin-bottom:10px;

}

.enable-content p{

    color:#555;

    line-height:1.6;

}

/*==========================================================
CUSTOMER BENEFITS
==========================================================*/

.customer-benefits{

    background:#063326;

    color:#fff;

    padding:40px;

    border-radius:16px;

}

.customer-benefits h2{

    color:#fff;

    margin-bottom:35px;

}

.benefits-grid{

    display:grid;

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

    gap:30px;

}

.benefit-item{

    text-align:center;

}

.benefit-item img{

    width:100px;

    height:100px;

    border:2px solid #c89b3c;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 15px;

    object-fit:contain;

    padding:20px;

    box-sizing:border-box;

}

.benefit-item span{

    display:block;

    font-size:17px;

    line-height:1.5;

    font-weight:600;

}

/*==========================================================
PROCESS JOURNEY
==========================================================*/

.process-journey{

    padding:10px 0;

    background:#fff;

}

.process-journey h2{

    text-align:center;

    color:#063326;

    font-size:34px;

    margin-bottom:20px;

}

.journey-flow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.journey-item{

    text-align:center;

}

.journey-icon{

    width:80px;

    height:80px;

    border:2px solid #c89b3c;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    color:#063326;

    font-size:30px;

    margin-bottom:15px;

}

.journey-icon img{

    width:60px;

    height:60px;

    object-fit:contain;

    display:block;

}

.journey-item span{

    font-weight:700;

    color:#063326;

}

.journey-arrow{

    color:#c89b3c;

    font-size:28px;

}

/*==========================================================
BOTTOM CTA
==========================================================*/

.process-cta{

    background:transparent;

    padding:10px 0 10px;

}

.process-cta .container{

    max-width:1400px;

    margin:0 auto;

    padding:0;

}

.process-cta-content{

    background:#063326;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    padding:10px;

    border-radius:12px;

    overflow:hidden;

}

/*----------------------------------------------------------
CTA GRAPHIC
----------------------------------------------------------*/

.cta-graphic{

    flex:0 0 240px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cta-graphic img{

    width:210px;

    height:auto;

    display:block;

}

.cta-text{

    flex:1;

}

.cta-text h2{

    color:#c89b3c;

    margin-bottom:25px;

    font-size:33px;

}

.cta-text p{

    line-height:1.9;

    font-size:17px;

    color:#ddd;

}

.cta-buttons{

    display:flex;

    gap:30px;

    margin-top:35px;

    flex-wrap:wrap;

}

.btn-gold{

    background:#c89b3c;

    color:#fff;

    padding:16px 60px;

    border-radius:6px;

    text-decoration:none;

    font-weight:700;

}

.btn-outline{

    border:2px solid #fff;

    color:#fff;

    padding:16px 34px;

    border-radius:6px;

    text-decoration:none;

    font-weight:700;

}

.cta-quote{

    text-align:center;

    flex:0 0 280px;

}

.cta-quote span{

    color:#c89b3c;

    font-size:50px;

    line-height:2;

}

.cta-quote h3{

    font-size:28px;

    line-height:1.6;

    font-style:italic;

    color:#fff;

}


/*==========================================================
TECHNOLOGY, MANUAL & SOP
HERO SECTION
==========================================================*/

.technology-hero{

    padding:0;

    background:#ffffff;

}

.technology-hero-wrapper{

    position:relative;

    overflow:hidden;

    height:460px;

    background:#042d21 url("../images/technology/a0-technology-bg.jpg") center center/cover no-repeat;

}

.technology-hero-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(4,45,33,.70);

}

.technology-hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:38% 62%;

    align-items:center;

    height:460px;

    gap:30px;

    padding:0 15px;

}

/*----------------------------------------------------------
LEFT PANEL
----------------------------------------------------------*/

.technology-hero-left{

    color:#ffffff;

}

.technology-hero-left h1{

    margin:0 0 10px;

    font-size:36px;

    line-height:1.9;

    font-weight:800;

    color:#ffffff;

}

.technology-hero-left h1 span{

    color:#c58a1c;

}

.technology-hero-left h2{

    margin:0 0 22px;

    font-size:24px;

    line-height:1.5;

    font-weight:700;

    color:#d79b25;

}

.technology-hero-left p{

    margin:0 0 14px;

    font-size:18px;

    line-height:1.95;

    color:#ffffff;

}

/*----------------------------------------------------------
BUTTONS
----------------------------------------------------------*/

.technology-hero-buttons{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:38px;

    padding:0 14px;

    border:2px solid #c58a1c;

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

    transition:.30s;

}

.hero-btn:hover{

    background:#c58a1c;

    color:#ffffff;

}

/*----------------------------------------------------------
RIGHT PANEL
----------------------------------------------------------*/

.technology-hero-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.technology-hero-right img{

    width:100%;

    max-width:100%;

    display:block;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:1200px){

    .technology-hero-left h1{

        font-size:32px;

    }

    .technology-hero-left h2{

        font-size:26px;

    }

    .technology-hero-left p{

        font-size:17px;

    }

}

@media(max-width:991px){

    .technology-hero-grid{

        grid-template-columns:1fr;

        text-align:center;

        padding:60px 30px;

    }

    .technology-hero-left{

        order:1;

    }

    .technology-hero-right{

        order:2;

        justify-content:center;

    }

    .technology-hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .technology-hero-wrapper{

        min-height:auto;

    }

    .technology-hero-left h1{

        font-size:38px;

    }

    .technology-hero-left h2{

        font-size:22px;

    }

    .technology-hero-left p{

        font-size:16px;

        line-height:1.7;

    }

    .technology-hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-btn{

        width:100%;

        max-width:300px;

    }

}

/*==========================================================
THREE PILLARS OF OPERATIONAL EXCELLENCE
==========================================================*/

.technology-pillars{

    padding:10px 0;

    background:#ffffff;

}

.technology-pillars-heading{

    text-align:center;

    margin-bottom:18px;

}

.technology-pillars-heading h2{

    font-size:34px;

    color:#063326;

    font-weight:800;

    letter-spacing:.5px;

    margin:0;

}

.technology-pillars-grid{

    display:grid;

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

    gap:24px;

}

.technology-pillar-card{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:12px;

    padding:28px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

    height:100%;

}

.pillar-header{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:24px;

}

.pillar-header img{

    width:74px;

    flex-shrink:0;

}

.pillar-header h3{

    margin:0 0 10px;

    color:#063326;

    font-size:22px;

    font-weight:700;

}

.gold-title{

    color:#c58a1c !important;

}

.pillar-header p{

    margin:0;

    font-size:16px;

    color:#555;

    line-height:1.7;

}

.pillar-list{

    list-style:none;

    padding:0;

    margin:0;

}

.pillar-list li{

    position:relative;

    padding-left:26px;

    margin-bottom:12px;

    color:#063326;

    font-size:16px;

    line-height:1.6;

}

.pillar-list li::before{

    content:"●";

    position:absolute;

    left:0;

    top:0;

    color:#063326;

    font-size:14px;

}

.gold-list li::before{

    color:#c58a1c;

}

@media(max-width:991px){

    .technology-pillars-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================================
HOW EVERYTHING WORKS TOGETHER
==========================================================*/

.technology-workflow{

    padding:2px 0 5px;

    background:#ffffff;

}

.technology-workflow-title{

    text-align:center;

    font-size:24px;

    font-weight:800;

    margin-bottom:16px;

    color:#063326;

}

.technology-workflow-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:9px 9px;

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:10px;

}

.workflow-item{

    text-align:center;

    flex:1;

}

.workflow-item img{

    display:block;

    width:74px;

    margin:0 auto 10px;

}

.workflow-item h4{

    margin:0;

    font-size:15px;

    color:#063326;

    line-height:1.45;

    font-weight:700;

}

.workflow-arrow{

    flex-shrink:0;

    padding:0 8px;

}

.workflow-arrow img{

    width:34px;

}

@media(max-width:991px){

    .technology-workflow-box{

        flex-direction:column;

        gap:20px;

    }

    .workflow-arrow{

        transform:rotate(90deg);

    }

}

/*==========================================================
TECHNOLOGY OVERVIEW
==========================================================*/

.technology-overview{

    padding:10px 0;

    background:#ffffff;

}

.technology-overview-grid{

    display:grid;

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

    gap:24px;

}

.technology-overview-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:22px;

    box-shadow:0 5px 16px rgba(0,0,0,.05);

}

.technology-overview-card h3{

    margin:0 0 12px;

    text-align:center;

    color:#063326;

    font-size:22px;

    font-weight:800;

}

.technology-overview-card p{

    margin-bottom:10px;

    text-align:center;

    font-size:16px;

    color:#555;

    line-height:1.7;

}

.manual-intro{

    margin-bottom:40px !important;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.technology-dashboard{

    width:100%;

    display:block;

    border-radius:8px;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.manual-framework{

    display:grid;

    grid-template-columns:42% 58%;

    align-items:center;

    gap:20px;

}

.manual-book{

    text-align:center;

}

.manual-book img{

    width:auto;

    height:360px;

}

.manual-list ul{

    list-style:none;

    margin:0;

    padding:0;

}

.manual-list li{

    position:relative;

    padding-left:30px;

    margin-bottom:14px;

    color:#063326;

    font-size:18px;

    line-height:1.9;

}

.manual-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#063326;

    font-weight:700;

}


/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .technology-overview-grid{

        grid-template-columns:1fr;

    }

    .manual-framework{

        grid-template-columns:1fr;

        text-align:center;

    }

}




/*==========================================================
COMPREHENSIVE SOP FRAMEWORK
==========================================================*/

.sop-framework{

    padding:10px 0;

    background:#ffffff;

}

.sop-framework-grid{

    display:grid;

    grid-template-columns:35% 65%;

    gap:30px;

    align-items:center;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:25px;

    box-shadow:0 5px 16px rgba(0,0,0,.05);

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.sop-framework-left{

    text-align:center;

}

.sop-framework-left img{

    width:100%;

    max-width:560px;

    display:block;

    margin:auto;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.sop-framework-right h3{

    margin:0 0 18px;

    font-size:24px;

    color:#063326;

    font-weight:800;

}

.sop-framework-right p{

    margin-bottom:18px;

    font-size:16px;

    color:#555;

    line-height:1.8;

}

/*----------------------------------------------------------
BOTTOM BENEFITS
----------------------------------------------------------*/

.sop-benefits{

    display:grid;

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

    margin-top:28px;

    border-top:1px solid #e7e7e7;

}

.sop-benefit{

    text-align:center;

    padding:18px 10px;

    border-right:1px solid #e7e7e7;

}

.sop-benefit:last-child{

    border-right:none;

}

.sop-benefit img{

    width:48px;

    margin-bottom:10px;

    margin:0 auto 10px;


}

.sop-benefit span{

    display:block;

    font-size:13px;

    line-height:1.5;

    color:#063326;

    font-weight:600;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .sop-framework-grid{

        grid-template-columns:1fr;

    }

    .sop-benefits{

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

    }

}

@media(max-width:768px){

    .sop-benefits{

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

    }

}




/*==========================================================
EXECUTION DISCIPLINE
==========================================================*/

.execution-lifecycle{

    padding:18px 0;

    background:#ffffff;

}

.execution-title{

    text-align:center;

    font-size:24px;

    font-weight:800;

    color:#063326;

    margin-bottom:18px;

}

.execution-box{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    padding:22px 15px;

    border:1px solid #e6e6e6;

    border-radius:12px;

    background:#ffffff;

}

.execution-item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.execution-item img{

    width:62px;

    margin-bottom:10px;

}

.execution-item h4{

    margin:0 0 10px;

    font-size:14px;

    color:#063326;

    line-height:1.4;

    font-weight:700;

}

.execution-item ul{

    list-style:none;

    margin:0;

    padding:0;

}

.execution-item li{

    position:relative;

    padding-left:18px;

    margin-bottom:6px;

    font-size:12px;

    color:#063326;

    text-align:left;

}

.execution-item li::before{

    content:"●";

    position:absolute;

    left:0;

    color:#063326;

    font-size:10px;

}

.execution-arrow{

    flex-shrink:0;

    padding:18px 4px 0;

}

.execution-arrow img{

    width:22px;

}




@media(max-width:1200px){

    .execution-box{

        overflow-x:auto;

        gap:18px;

    }

}

@media(max-width:991px){

    .execution-title{

        font-size:22px;

    }

}

/*==========================================================
WHY OUR SYSTEM WORKS
==========================================================*/

.technology-system-heading{

    padding:2px 0;

    background:#ffffff;

}

.technology-system-title{

    background:#063326;

    border-radius:10px;

    padding:10px 16px;

}

.technology-system-title h2{

    margin:0;

    text-align:center;

    color:#ffffff;

    font-size:28px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*==========================================================
BOTTOM FOUR CARDS (Continuous Improvement...)
==========================================================*/

.technology-bottom{

    padding:10px 0 10px;

    background:#ffffff;

}

.technology-bottom-grid{

    display:grid;

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

    gap:18px;

}

.technology-bottom-card{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:12px;

    padding:20px;

    box-shadow:0 5px 16px rgba(0,0,0,.05);

    display:flex;

    flex-direction:column;

    height:100%;

}

.technology-bottom-card h3{

    margin:0 0 12px;

    font-size:18px;

    font-weight:800;

    color:#063326;

    line-height:1.3;

}

.technology-bottom-card p{

    margin:0 0 18px;

    font-size:14px;

    line-height:1.7;

    color:#555;

}

.technology-bottom-card img{

    width:100%;

    margin-top:auto;

}

.bottom-map{

    width:85% !important;

    margin:20px auto 0;

}

.bottom-check-list{

    list-style:none;

    margin:0;

    padding:0;

}

.bottom-check-list li{

    position:relative;

    padding-left:24px;

    margin-bottom:10px;

    font-size:14px;

    color:#063326;

}

.bottom-check-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#063326;

    font-weight:700;

}

.technology-bottom-btn{

    margin-top:18px;

    display:block;

    background:#063326;

    color:#ffffff;

    text-align:center;

    padding:12px 10px;

    border-radius:8px;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    line-height:1.5;

}

.technology-bottom-btn:hover{

    background:#c58a1c;

}

@media(max-width:991px){

    .technology-bottom-grid{

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

    }

}

@media(max-width:768px){

    .technology-bottom-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================================
FINAL CALL TO ACTION (Delivery consistency...)
==========================================================*/

.technology-cta{

    padding:5px 0 0;

    background:#ffffff;

}

.technology-cta-box{

    display:grid;

    grid-template-columns:50% 50%;

    align-items:stretch;

    height:170px;

    background:#063326 url("../images/technology/a0-technology-bg.jpg") center center/cover no-repeat;

    border-radius:12px;

    overflow:hidden;

}

.technology-cta-content{

    padding:6px 15px;

}

.technology-cta-content h2{

    margin:0 0 10px;

    color:#ffffff;

    font-size:28px;

    line-height:1.45;

    font-weight:700;

}

.technology-cta-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.cta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:30px;

    padding:0 12px;

    border:2px solid #c58a1c;

    color:#ffffff;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.30s;

}

.cta-btn:hover{

    background:#c58a1c;

}

/*----------------------------------------------------------
RIGHT IMAGE
----------------------------------------------------------*/

.technology-cta-image{

    display:flex;

    align-items:stretch;

    justify-content:flex-end;

    height:100%;

    overflow:hidden;

}

.technology-cta-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

@media(max-width:991px){

    .technology-cta-box{

        grid-template-columns:1fr;

        height:auto;

        text-align:center;

    }

    .technology-cta-content{

        padding:20px 15px;

    }

    .technology-cta-buttons{

        justify-content:center;

    }

    .technology-cta-image{

        text-align:center;

    }

    .technology-cta-image img{

        margin:auto;

    }

}

/*==========================================================
SAFE SOURCING & RISK MANAGEMENT
HERO SECTION
==========================================================*/

.risk-hero{

    padding:0;

    background:#ffffff;

}

.risk-hero-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    background:#042d21 url("../images/risk/a0-risk-bg.jpg") center center/cover no-repeat;

}

.risk-hero-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(4,45,33,.70);

}

.risk-hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:50% 50%;

    align-items:center;

    height:450px;

    padding:0;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.risk-hero-left{

    color:#ffffff;

    padding-left:25px;

    box-sizing:border-box;

}

.risk-hero-left h1{

    margin:0 0 15px;

    font-size:36px;

    font-weight:800;

    line-height:1.5;

    color:#ffffff;

}

.risk-hero-left h1 span{

    color:#c58a1c;

}

.risk-hero-left h2{

    margin:0 0 10px;

    font-size:24px;

    font-weight:700;

    line-height:1.4;

    color:#ffffff;

}

.risk-hero-left p{

    margin:0 0 28px;

    font-size:18px;

    line-height:1.8;

    color:#ffffff;

}

/*----------------------------------------------------------
BOTTOM ICONS
----------------------------------------------------------*/

.risk-feature-icons{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}

.risk-feature{

    display:flex;

    align-items:center;

    gap:10px;

}

.risk-feature img{

    width:58px;

}

.risk-feature span{

    color:#ffffff;

    font-size:15px;

    line-height:1.35;

    font-weight:600;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.risk-hero-right{

    width:calc(100% + 25px);

    height:100%;

    margin-right:-25px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-sizing:border-box;

}

.risk-hero-right img{

    display:block;

    width:100%;

    height:100%;

    max-width:none;

    max-height:none;

    margin:0;

    padding:0;

    object-fit:cover;

    object-position:center;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .risk-hero-grid{

        grid-template-columns:1fr;

        height:auto;

        padding:40px 20px;

        text-align:center;

    }

    .risk-feature-icons{

        justify-content:center;

    }

}


/*==========================================================
COMMON RISKS LIBRARY
==========================================================*/

.risk-library{

    padding:10px 0;

    background:#ffffff;

}

.risk-library-title{

    text-align:center;

    font-size:36px;

    font-weight:800;

    color:#063326;

    margin-bottom:18px;

}

.risk-library-grid{

    display:grid;

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

    gap:16px;

}

/*=========== cards =============*/

.risk-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:10px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

/*============ header ==========*/

.risk-card-header{

    background:#063326;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

    min-height:72px;

}

.risk-card-header img{

    width:34px;

    flex-shrink:0;

}

.risk-card-header h3{

    margin:0;

    color:#ffffff;

    font-size:14px;

    line-height:1.3;

    font-weight:700;

}

/*============= body ============*/

.risk-card-body{

    padding:14px 16px;

    flex:1;

}

.risk-card-body ul{

    list-style:disc;

    list-style-position:outside;

    margin:0;

    padding-left:20px;

}

.risk-card-body li{

    margin-bottom:8px;

    color:#444;

    font-size:14px;

    line-height:1.5;

}

/*=============== responsive ==============*/

@media(max-width:1200px){

    .risk-library-grid{

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

    }

}

@media(max-width:768px){

    .risk-library-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================================
EXTERNAL & FORCE MAJEURE RISKS
==========================================================*/

.external-risk{

    padding:10px 0 20px;

    background:#ffffff;

}

.external-risk-box{

    display:flex;

    align-items:stretch;

    border:1px solid #e5e5e5;

    border-radius:10px;

    overflow:hidden;

    background:#ffffff;

}

/*----------------------------------------------------------
LEFT PANEL
----------------------------------------------------------*/

.external-risk-title{

    flex:0 0 20%;

    display:flex;

    align-items:center;

    gap:12px;

    background:#063326;

    padding:12px 18px;

}

.external-risk-title img{

    width:38px;

    flex-shrink:0;

}

.external-risk-title h3{

    margin:0;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    line-height:1.35;

}

/*----------------------------------------------------------
RIGHT PANEL
----------------------------------------------------------*/

.external-risk-items{

    flex:1;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    padding:0 25px;

}

.external-risk-items span{

    width:33.33%;

    position:relative;

    padding-left:18px;

    font-size:15px;

    line-height:1.6;

}

.external-risk-items span::before{

    content:"•";

    position:absolute;

    left:0;

    top:0;

    color:#c58a1c;

    font-size:18px;

    line-height:1;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .external-risk-box{
        flex-direction:column;
    }

    .external-risk-title{
        flex:0 0 auto;
        width:100%;
    }

    .external-risk-items{
        display:flex;
        flex-direction:column;
        width:100%;
        padding:20px;
        gap:14px;
        align-items:flex-start;
    }

    .external-risk-items span{
        width:100%;
    }

}

/*==========================================================
EARLY WARNING / COMMON MISTAKES / RISK MITIGATION
==========================================================*/

.risk-guidance{

    padding:5px 0;

    background:#ffffff;

}

.risk-guidance-grid{

    display:grid;

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

    gap:20px;

}

.guidance-card{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:12px;

    padding:22px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.guidance-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    padding-bottom:14px;

    border-bottom:4px solid #d9d9d9;

}

.guidance-header img{

    width:64px;

    flex-shrink:0;

}

.guidance-header h3{

    margin:0;

    font-size:20px;

    font-weight:800;

    line-height:1.3;

}

.guidance-header h4{

    margin:2px 0 0;

    font-size:20px;

    font-weight:800;

    line-height:1.35;

}

/*----------------------------------------------------------
CARD BACKGROUND COLOURS
----------------------------------------------------------*/

.warning-card{

    background:#FFF8EC;

    border:1px solid #F3D28B;

}

.mistakes-card{

    background:#FFF3F3;

    border:1px solid #F0B8B8;

}

.mitigation-card{

    background:#F3FBF5;

    border:1px solid #B8DFC3;

}

/*----------------------------------------------------------
Header Colours
----------------------------------------------------------*/

.warning-card h3,
.warning-card h4{

    color:#d89000;

}

.mistakes-card h3,
.mistakes-card h4{

    color:#d83a32;

}

.mitigation-card h3,
.mitigation-card h4{

    color:#0b6d3f;

}

/*----------------------------------------------------------
Lists
----------------------------------------------------------*/

.guidance-card ul{

    list-style:none;

    margin:0;

    padding:0;

}

.guidance-card li{

    position:relative;

    padding-left:30px;

    margin-bottom:10px;

    color:#444;

    font-size:16px;

    line-height:1.6;

}

.warning-card li::before{

    content:"●";

    position:absolute;

    left:0;

    color:#d89000;

    font-size:14px;

}

.mistakes-card li::before{

    content:"✖";

    position:absolute;

    left:0;

    color:#d83a32;

    font-size:14px;

}

.mitigation-card li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#13894d;

    font-size:12px;

}

.mitigation-card p{

    margin-bottom:16px;

    color:#555;

    font-size:15px;

    line-height:1.7;

}

.mitigation-note{

    margin-top:20px;

    padding:14px;

    border:1px solid #b9d7c2;

    background:#eef8f0;

    border-radius:8px;

    color:#35553f;

    font-size:14px;

    line-height:1.6;

}


/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media(max-width:991px){

    .risk-guidance-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================================
HOW MOON SHINE GROUP PROTECTS YOUR PROCUREMENT JOURNEY
==========================================================*/

.procurement-journey{

    padding:15px 0;

    background:#ffffff;

}

.risk-journey-title{

    margin:0 0 20px;

    padding:14px 20px;

    background:#063326;

    color:#ffffff;

    text-align:center;

    font-size:28px;

    font-weight:800;

    text-transform:uppercase;

    border-radius:10px;

    letter-spacing:.5px;

}

.journey-flow{

    display:grid;

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

    align-items:center;

    border:1px solid #e4e4e4;

    border-radius:10px;

    padding:18px;

    background:#ffffff;

}

.journey-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

}

.journey-step img{

    width:76px;

    display:block;

    margin:0 auto 12px;

}

.journey-step h4{

    margin:0;

    text-align:center;

    font-size:15px;

    font-weight:700;

    color:#063326;

    line-height:1.45;

}

.journey-arrow{

    text-align:center;

    padding:0 8px;

}

.journey-arrow img{

    width:58px;

}

/*==========================================================
NEW ADDITION
==========================================================*/
/*==========================================================
FINAL CALL TO ACTION
==========================================================*/

.risk-cta{

    padding:8px 0 5;

    background:#ffffff;

}

.risk-cta-box{

    display:grid;

    grid-template-columns:80% 20%;

    align-items:center;

    height:200px;

    background:#FFF8E8;

    border:1px solid #E6C878;

    border-radius:12px;

    overflow:hidden;

}

.risk-cta-content{

    padding:10px 18px;

}

.risk-cta-content h2{

    margin:0 0 10px;

    color:#063326;

    font-size:24px;

    font-weight:700;

    line-height:1.4;

}

.risk-cta-content p{

    margin:0 0 18px;

    color:#333333;

    font-size:18px;

    line-height:1.7;

}

.risk-cta-buttons{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

}

.risk-cta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:54px;

    padding:0 18px;

    border:2px solid #C58A1C;

    background:#063326;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.30s;

}

.risk-cta-btn:hover{

    background:#C58A1C;

    border-color:#C58A1C;

}

/*----------------------------------------------------------
RIGHT IMAGE
----------------------------------------------------------*/

.risk-cta-image{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF8E8;

    padding:10px;

}

.risk-cta-image img{

    max-width:100%;

    max-height:180px;

    width:auto;

    height:auto;

    object-fit:contain;

    display:block;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .risk-cta-box{

        grid-template-columns:1fr;

        height:auto;

    }

    .risk-cta-content{

        padding:25px 20px;

        text-align:center;

    }

    .risk-cta-buttons{

        justify-content:center;

    }

    .risk-cta-image{

        height:220px;

    }

}




/*==========================================================
PROCESS DISCIPLINE CREATES CUSTOMER CONFIDENCE
==========================================================*/

.risk-commitment{

    padding:6px 0 0;

    background:#ffffff;

}

.risk-commitment-box{

    display:grid;

    grid-template-columns:60% 40%;

    align-items:center;

    background:#063326;

    border-radius:12px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.risk-commitment-left{

    display:flex;

    align-items:center;

    gap:18px;

    padding:14px 25px;

}

.risk-commitment-left img{

    width:100px;

    flex-shrink:0;

}

.risk-commitment-left h3{

    margin:0 0 10px;

    color:#d79b25;

    font-size:22px;

    font-weight:800;

    line-height:1.3;

}

.risk-commitment-left p{

    margin:0;

    color:#ffffff;

    font-size:15px;

    line-height:1.55;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.risk-commitment-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-left:2px solid rgba(213,168,72,.45);

    padding:14px 15px;

    text-align:center;

}

.commit-script{

    color:#d79b25;

    font-size:26px;

    font-style:italic;

    font-weight:500;

    margin-bottom:4px;

}

.commit-text{

    color:#ffffff;

    font-size:30px;

    font-weight:300;

    line-height:1.35;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .risk-commitment-box{

        grid-template-columns:1fr;

    }

    .risk-commitment-right{

        border-left:none;

        border-top:2px solid rgba(213,168,72,.45);

    }

}

/*==========================================================
KNOWLEDGE CENTER
HERO SECTION
==========================================================*/

.knowledge-hero{

    padding:0;

    background:#ffffff;

}

.knowledge-hero-box{

    display:grid;

    grid-template-columns:55% 45%;

    min-height:450px;

    background:#063326 url("../images/knowledge/a0-knowledge-bg.jpg") center center/cover no-repeat;

    border-radius:12px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.knowledge-hero-left{

    padding:5px 10px;

    color:#ffffff;

}

.knowledge-hero-left h1{

    margin:0 0 12px;

    font-size:38px;

    line-height:1.05;

    font-weight:800;

}

.knowledge-hero-left h1 span{

    color:#d79b25;

}

.knowledge-hero-left h2{

    margin:0 0 18px;

    color:#ffffff;

    font-size:20px;

    line-height:1.45;

    font-weight:600;

}

.knowledge-hero-left p{

    margin:0 0 15px;

    color:#f2f2f2;

    font-size:15px;

    line-height:1.75;

}

/*----------------------------------------------------------
FEATURES
----------------------------------------------------------*/

.knowledge-features{

    margin-top:22px;

    display:grid;

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

    gap:10px;

}

.knowledge-feature{

    display:flex;

    align-items:center;

    gap:10px;

}

.knowledge-feature img{

    width:48px;

}

.knowledge-feature span{

    display:block;

    color:#ffffff;

    font-size:13px;

    line-height:1.35;

    font-weight:700;

}

.knowledge-feature small{

    display:block;

    color:#d9d9d9;

    font-size:12px;

    font-weight:400;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.knowledge-hero-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.knowledge-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==========================================================
EXPLORE OUR KNOWLEDGE CATEGORIES
==========================================================*/

.knowledge-categories{

    padding:10px 0;

    background:#ffffff;

}

.knowledge-categories-title{

    text-align:center;

    font-size:30px;

    font-weight:800;

    color:#063326;

    margin-bottom:25px;

}

.knowledge-categories-grid{

    display:grid;

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

    gap:12px;

}

/*----------------------------------------------------------
CARD
----------------------------------------------------------*/

.knowledge-card{

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 4px 14px rgba(0,0,0,.05);

}

.knowledge-card-header{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:18px;

}

.knowledge-card-header img{

    width:48px;

}

.knowledge-card-header h3{

    margin:0;

    color:#063326;

    font-size:19px;

    font-weight:800;

    line-height:1.4;

}

.knowledge-card ul{

    margin:0;

    padding:0 22px 18px 40px;

}

.knowledge-card li{

    margin-bottom:8px;

    color:#444;

    font-size:14px;

    line-height:1.55;

}

.knowledge-card-image{

    width:100%;

    height:145px;

    object-fit:cover;

    display:block;

}

.knowledge-card-link{

    display:block;

    text-align:center;

    padding:16px;

    text-decoration:none;

    color:#063326;

    font-weight:700;

    transition:.30s;

}

.knowledge-card-link:hover{

    color:#C58A1C;

}

/*==========================================================
ADDITIONAL TOPICS WE STRONGLY RECOMMEND
==========================================================*/

.knowledge-recommend{

    padding:10px 0;

    background:#ffffff;

}

.knowledge-recommend-title{

    margin:0 0 30px;

    text-align:center;

    font-size:30px;

    font-weight:800;

    color:#063326;

}

.knowledge-recommend-grid{

    display:grid;

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

    gap:24px;

}

/*----------------------------------------------------------
CARD
----------------------------------------------------------*/

.recommend-card{

    display:grid;

    grid-template-columns:58% 42%;

    border:1px solid #e6e6e6;

    border-radius:12px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:0 4px 14px rgba(0,0,0,.05);

}

.recommend-content{

    padding:10px;

}

.recommend-header{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

}

.recommend-header img{

    width:48px;

}

.recommend-header h3{

    margin:0;

    font-size:20px;

    font-weight:800;

    color:#063326;

    line-height:1.3;

}

.academy-title{

    color:#C58A1C !important;

}

.recommend-header h4{

    margin:3px 0 0;

    color:#C58A1C;

    font-size:14px;

    font-weight:700;

}

.recommend-content ul{

    margin:0;

    padding-left:20px;

}

.recommend-content li{

    margin-bottom:8px;

    font-size:14px;

    color:#444;

    line-height:1.55;

}

.recommend-image{

    display:flex;

    align-items:flex-end;

    justify-content:center;

}

.recommend-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==========================================================
KNOWLEDGE BENEFITS STRIP
==========================================================*/

.knowledge-benefits{

    padding:10px 0;

    background:#ffffff;

}

.knowledge-benefits-box{

    display:grid;

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

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:10px;

    overflow:hidden;

}

.knowledge-benefit{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 18px;

    border-right:1px solid #ececec;

}

.knowledge-benefit:last-child{

    border-right:none;

}

.knowledge-benefit img{

    width:54px;

    flex-shrink:0;

}

.knowledge-benefit h3{

    margin:0 0 5px;

    color:#063326;

    font-size:16px;

    font-weight:700;

    line-height:1.3;

}

.knowledge-benefit p{

    margin:0;

    color:#444;

    font-size:13px;

    line-height:1.45;

}

/*==========================================================
KNOWLEDGE SHARED IS VALUE CREATED
==========================================================*/

.knowledge-cta{

    padding:5px 0 0;

    background:#ffffff;

}

.knowledge-cta-box{

    display:grid;

    grid-template-columns:52% 48%;

    align-items:center;

    background:#063326;

    border-radius:10px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.knowledge-cta-left{

    display:flex;

    align-items:center;

    gap:20px;

    padding:10px 15px;

}

.knowledge-cta-left img{

    width:72px;

    flex-shrink:0;

}

.knowledge-cta-left h3{

    margin:0 0 8px;

    color:#D79B25;

    font-size:22px;

    font-weight:800;

    line-height:1.35;

}

.knowledge-cta-left p{

    margin:0;

    color:#ffffff;

    font-size:14px;

    line-height:1.7;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.knowledge-cta-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:10px 15px;

    border-left:2px solid rgba(213,168,72,.45);

}

.knowledge-cta-right h4{

    margin:0;

    color:#D79B25;

    font-size:26px;

    font-style:italic;

    font-weight:500;

}

.knowledge-cta-right h2{

    margin:6px 0 18px;

    color:#ffffff;

    font-size:26px;

    font-weight:400;

    line-height:1.1;

}

.knowledge-cta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    border:2px solid #D79B25;

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.30s;

}

.knowledge-cta-btn:hover{

    background:#D79B25;

}

/*==========================================================
SUPPLIER PARTNERSHIP
HERO
==========================================================*/

.supplier-hero{

    padding:0;

    background:#ffffff;

}

.supplier-hero-box{

    display:grid;

    grid-template-columns:50% 50%;

    min-height:400px;

    background:#063326
               url("../images/supplier/a0-supplier-bg.jpg")
               center center/cover no-repeat;

    border-radius:12px;

    overflow:hidden;

}


/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.supplier-hero-left{

    padding:24px 20px;

    color:#ffffff;

    min-width:0;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.supplier-hero-left h1{

    margin:0 0 12px;

    font-size:38px;

    line-height:1.05;

    font-weight:800;

}

.supplier-hero-left h1 span{

    color:#d79b25;

}

.supplier-hero-left h2{

    margin:0 0 18px;

    color:#ffffff;

    font-size:22px;

    font-weight:600;

    line-height:1.35;

}

.supplier-hero-left p{

    margin:0 0 20px;

    color:#f2f2f2;

    font-size:16px;

    line-height:1.65;

}


/*----------------------------------------------------------
FEATURES
----------------------------------------------------------*/

.supplier-features{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;

}

.supplier-feature{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

}

.supplier-feature img{

    width:48px;

    height:48px;

    object-fit:contain;

    flex-shrink:0;

}

.supplier-feature span{

    display:block;

    font-size:13px;

    font-weight:700;

    color:#ffffff;

    line-height:1.35;

}

.supplier-feature small{

    display:block;

    color:#dddddd;

    font-size:12px;

    font-weight:400;

}


/*----------------------------------------------------------
BUTTONS
----------------------------------------------------------*/

.supplier-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.supplier-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:44px;

    padding:0 20px;

    border:2px solid #d79b25;

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.30s;

    box-sizing:border-box;

}

.supplier-btn-gold{

    background:#d79b25;

    color:#ffffff;

}

.supplier-btn:hover{

    background:#d79b25;

}


/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.supplier-hero-right{

    width:100%;

    height:100%;

    min-width:0;

    min-height:0;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-sizing:border-box;

}

.supplier-hero-right img{

    display:block;

    width:100%;

    height:100%;

    max-width:none;

    max-height:none;

    object-fit:cover;

    object-position:center;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .supplier-hero-box{

        grid-template-columns:1fr;

    }

    .supplier-hero-left{

        padding:25px;

    }

    .supplier-buttons{

        justify-content:center;

    }

}

/*==========================================================
SUPPLIER STATISTICS
==========================================================*/

.supplier-stats{

    padding:5px 0 0;

    background:#ffffff;

}

.supplier-stats-grid{

    display:grid;

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

    background:#1E5F8A;

    border-radius:0 0 12px 12px;

    overflow:hidden;

}

.supplier-stat{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    padding:10px 6px;

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

}

.supplier-stat:last-child{

    border-right:none;

}

.supplier-stat img{

    width:50px;

    margin-bottom:10px;

}

.supplier-stat h2{

    margin:0;

    color:#ffffff;

    font-size:36px;

    font-weight:800;

}

.supplier-stat h4{

    margin:6px 0 4px;

    color:#d79b25;

    font-size:15px;

    font-weight:700;

    line-height:1.35;

}

.supplier-stat p{

    margin:0;

    color:#f2f2f2;

    font-size:13px;

    line-height:1.45;

}

/*==========================================================
WHY PARTNER WITH MOON SHINE GROUP
==========================================================*/

.supplier-partnership-overview{

    padding:20px 0;

    background:#ffffff;

}

.supplier-overview-grid{

    display:grid;

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

    gap:24px;

}

.supplier-overview-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

    overflow:hidden;

}

.supplier-overview-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:20px;

    border-bottom:3px solid #d79b25;

}

.supplier-overview-header img{

    width:52px;

}

.supplier-overview-header h3{

    margin:0;

    color:#063326;

    font-size:22px;

    font-weight:800;

    line-height:1.35;

}

.supplier-overview-card ul{

    list-style:none;

    margin:0;

    padding:20px 20px 24px 20px;

}

.supplier-overview-card li{

    position:relative;

    padding-left:60px;

    margin-bottom:12px;

    color:#444;

    font-size:15px;

    line-height:1.6;

}

.supplier-overview-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:1px;

    color:#C58A1C;

    font-size:16px;

    font-weight:700;

}

/*==========================================================
INDUSTRIES WE SERVE
==========================================================*/

.supplier-industries{

    padding:10px 0;

    background:#ffffff;

}

.supplier-industries-title{

    text-align:center;

    font-size:30px;

    font-weight:800;

    color:#063326;

    margin-bottom:15px;

}

.supplier-industries-grid{

    display:grid;

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

    gap:22px;

}

.industry-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 5px 14px rgba(0,0,0,.05);

    transition:.30s;

}

.industry-card:hover{

    transform:translateY(-5px);

}

.industry-card img{

    width:100%;

    height:130px;

    object-fit:cover;

    display:block;

}

.industry-card h3{

    margin:0;

    padding:10px 10px;

    text-align:center;

    color:#063326;

    font-size:18px;

    font-weight:700;

}

/*==========================================================
PREFERRED PRODUCT CATEGORIES
==========================================================*/

.preferred-products{

    padding:10px 0;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.preferred-products .section-title{

    text-align:center;

    margin-bottom:15px;

}

.preferred-products .section-title h2{

    margin:0;

    font-size:30px;

    font-weight:800;

    color:#063326;

    text-transform:uppercase;

}

/*----------------------------------------------------------*/

.preferred-products-grid{

    display:grid;

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

    gap:18px;

}

/*----------------------------------------------------------*/

.preferred-product{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

}

/*----------------------------------------------------------*/

.preferred-product img{

    width:70px;

    height:70px;

    object-fit:contain;

    display:block;

    margin:0 auto 12px;

}

/*----------------------------------------------------------*/

.preferred-product span{

    display:block;

    width:100%;

    text-align:center;

    color:#063326;

    font-size:14px;

    font-weight:700;

    line-height:1.45;

}

/*==========================================================
SUPPLIER JOURNEY
==========================================================*/

/*----------------------------------------------------------
SECTION TITLE
----------------------------------------------------------*/

.supplier-journey-title{

    margin-bottom:28px;

}

.supplier-journey-title h2{

    margin:0;

    padding:10px 10px;

    background:#063326;

    color:#ffffff;

    text-align:center;

    font-size:28px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.5px;

    border-radius:8px;

}

.supplier-journey{

    padding:10px 0;

    background:#ffffff;

}

.supplier-journey-grid{

    display:grid;

    grid-template-columns:38% 27% 32%;

    gap:22px;

}

.supplier-journey-card,
.supplier-tier-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:12px;

}

.supplier-journey-card h3,
.supplier-tier-card h3{

    margin:0 0 16px;

    color:#063326;

    font-size:20px;

    font-weight:800;

    line-height:1.4;

}

.supplier-tier-card p,
.supplier-journey-card p{

    color:#555;

    line-height:1.7;

    margin-bottom:20px;

}

/*----------------------------------------------------------
Journey Icons
----------------------------------------------------------*/

.journey-icons{

    display:grid;

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

    gap:14px;

    margin-bottom:18px;

}

.journey-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

}

.journey-item img{

    width:52px;

    margin-bottom:8px;

}

.journey-item span{

    display:block;

    font-size:12px;

    line-height:1.6;

    color:#063326;

    font-weight:600;

}

/*----------------------------------------------------------*/

.journey-note{

    background:#f8f8f8;

    border-left:4px solid #C58A1C;

    padding:14px;

    font-size:13px;

    line-height:1.6;

    color:#555;

}

/*----------------------------------------------------------*/

.supplier-tier-card img{

    width:100%;

    margin-top:15px;

}

/*----------------------------------------------------------*/

.supplier-journey-card ul{

    list-style:none;

    padding:0;

    margin:20px 0;

}

.supplier-journey-card li{

    position:relative;

    padding-left:24px;

    margin-bottom:12px;

    line-height:1.6;

}

.supplier-journey-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#C58A1C;

    font-weight:700;

}

.supplier-journey-card blockquote{

    margin:20px 0 0;

    padding:16px;

    background:#FFF8E8;

    border-left:5px solid #C58A1C;

    color:#063326;

    font-weight:700;

    font-style:italic;

}

/*==========================================================
SUPPLIER ASSESSMENT
==========================================================*/

.supplier-assessment{

    padding:10px 0;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.supplier-assessment-grid{

    display:grid;

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

    gap:22px;

}

/*----------------------------------------------------------*/

.assessment-card{

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:12px;

    padding:20px;

    box-shadow:0 4px 12px rgba(0,0,0,.04);

}

/*----------------------------------------------------------*/

.assessment-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.assessment-header img{

    width:52px;

    flex-shrink:0;

}

.assessment-header h3{

    margin:0;

    font-size:21px;

    font-weight:800;

    color:#063326;

    line-height:1.35;

}

/*----------------------------------------------------------*/

.assessment-card p{

    margin:0 0 18px;

    font-size:15px;

    line-height:1.8;

    color:#555555;

    text-align:justify;

}

/*----------------------------------------------------------
IMAGE BOX
----------------------------------------------------------*/

.assessment-image-box{

    height:160px;      /* same height for all cards */

    display:flex;

    align-items:flex-end;

    justify-content:center;

    overflow:hidden;

}

/*----------------------------------------------------------*/

.assessment-image{

    width:100%;

    max-height:160px;

    object-fit:contain;

    border-radius:8px;

    display:block;

}

/*==========================================================
SUPPLIER VALUES
==========================================================*/

.supplier-values{

    padding:5px 0;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.supplier-values-grid{

    display:grid;

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

    gap:22px;

}

/*----------------------------------------------------------*/

.supplier-value-card{

    background:#ffffff;

    border:1px solid #e4e4e4;

    border-radius:12px;

    padding:22px;

    display:flex;

    flex-direction:column;

}

/*----------------------------------------------------------*/

.supplier-value-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.supplier-value-header img{

    width:52px;

    flex-shrink:0;

}

.supplier-value-header h3{

    margin:0;

    font-size:22px;

    color:#063326;

    font-weight:800;

    line-height:1.35;

}

/*----------------------------------------------------------*/

.supplier-value-card p{

    color:#555;

    line-height:1.6;

    margin-bottom:12px;

    text-align:justify;

}

/*----------------------------------------------------------*/

.supplier-value-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.supplier-value-card li{

    position:relative;

    padding-left:24px;

    margin-bottom:12px;

    line-height:1.7;

}

.supplier-value-card li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#0b6d3f;

    font-weight:700;

}

/*----------------------------------------------------------
TECHNOLOGY ICONS
----------------------------------------------------------*/

.supplier-tech-icons{

    display:grid;

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

    gap:8px;

    margin:14px 0;

}

.supplier-tech-icons div{

    text-align:center;

}

.supplier-tech-icons img{

    width:36px;

    margin-bottom:5px;

}

.supplier-tech-icons span{

    display:block;

    font-size:11px;

    line-height:1.25;

    color:#063326;

    font-weight:600;

}

/*----------------------------------------------------------*/

.supplier-tech-image{

    width:82%;

    display:block;

    margin-top:auto;

    margin-left:auto;

    margin-right:auto;

}

/*==========================================================
SUPPLIER CTA (Ready to explore a partnership with...
==========================================================*/

.supplier-cta{

    padding:8px 0 5px;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.supplier-cta-box{

    display:grid;

    grid-template-columns:65% 35%;

    align-items:center;

    background:#063326;

    border-radius:12px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.supplier-cta-left{

    display:flex;

    align-items:center;

    gap:20px;

    padding:12px 18px;

}

.supplier-cta-icon{

    flex-shrink:0;

}

.supplier-cta-icon img{

    width:70px;

    display:block;

}

/*----------------------------------------------------------*/

.supplier-cta-content h2{

    margin:0 0 8px;

    color:#ffffff;

    font-size:23px;

    font-weight:800;

    line-height:1.25;

    text-transform:uppercase;

}

.supplier-cta-content p{

    margin:0;

    color:#f2f2f2;

    font-size:17px;

    line-height:1.7;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.supplier-cta-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    padding:12px;

}

/*----------------------------------------------------------*/

.supplier-cta-btn{

    width:90%;

    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border:2px solid #d79b25;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    transition:.30s;

}

.supplier-cta-gold{

    background:#d79b25;

}

.supplier-cta-btn:hover{

    background:#d79b25;

    color:#ffffff;

}

/*==========================================================
OUR COMMITMENT
==========================================================*/

.supplier-commitment{

    padding:10px 0 10px;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.supplier-commitment-grid{

    display:grid;

    grid-template-columns:38% 24% 38%;

    align-items:center;

    gap:15px;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.supplier-commitment-left h2{

    margin:0 0 10px;

    color:#063326;

    font-size:30px;

    font-weight:800;

}

.supplier-commitment-left p{

    margin:0;

    color:#555;

    font-size:17px;

    line-height:1.9;

    text-align:justify;

}

/*----------------------------------------------------------
CENTRE
----------------------------------------------------------*/

.supplier-commitment-center{

    text-align:center;

}

.supplier-commitment-center img{

    width:120px;

    display:block;

    margin:auto;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.supplier-commitment-right{

    text-align:left;

}

.supplier-commitment-right h3{

    margin:0 0 14px;

    color:#d79b25;

    font-size:28px;

    font-weight:700;

}

.supplier-commitment-right p{

    margin:0 0 18px;

    color:#063326;

    font-size:20px;

    font-weight:600;

    line-height:1.7;

}

.supplier-commitment-right h4{

    margin:0;

    color:#063326;

    font-size:20px;

    font-weight:700;

    line-height:1.7;

}

.supplier-commitment-right span{

    color:#d79b25;

    font-style:italic;

}

/*==========================================================
CONFIDENTIALITY & ETHICS
HERO
==========================================================*/

.ethics-hero{

    padding:0;

    background:#ffffff;

}

.ethics-hero-box{

    display:grid;

    grid-template-columns:45% 55%;

    height:450px;

    background:#063326
               url("../images/ethics/a0-bg.jpg")
               center center/cover no-repeat;

    border-radius:12px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.ethics-hero-left{

    padding:18px 18px;

    color:#ffffff;

}

.ethics-hero-left h1{

    margin:0 0 12px;

    font-size:38px;

    font-weight:800;

    line-height:1.05;

}

.ethics-hero-left h1 span{

    color:#D79B25;

}

.ethics-hero-left h2{

    margin:0 0 18px;

    color:#ffffff;

    font-size:22px;

    font-weight:600;

    line-height:1.45;

}

.ethics-hero-left p{

    margin:0 0 18px;

    color:#F2F2F2;

    font-size:16px;

    line-height:1.75;

}

/*----------------------------------------------------------
FEATURES
----------------------------------------------------------*/

.ethics-features{

    display:grid;

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

    gap:12px;

    margin-top:10px;

}

.ethics-feature{

    display:flex;

    align-items:center;

    gap:10px;

}

.ethics-feature img{

    width:46px;

    display:block;

}

.ethics-feature span{

    display:block;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    line-height:1.35;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.ethics-hero-right{

    width:100%;

    height:100%;

    padding:0;

    margin:0;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-sizing:border-box;

}

.ethics-hero-right img{

    display:block;

    width:100%;

    height:100%;

    max-width:none;

    max-height:none;

    margin:0;

    padding:0;

    object-fit:cover;

    object-position:center;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:991px){

    .ethics-hero-box{

        grid-template-columns:1fr;

        height:auto;

    }

    .ethics-hero-left{

        padding:25px;

    }

    .ethics-features{

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

        row-gap:15px;

    }

}

/*==========================================================
ETHICS CARDS
==========================================================*/

.ethics-cards{

    padding:10px 0;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.ethics-grid{

    display:grid;

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

    gap:18px;

}

/*----------------------------------------------------------*/

.ethics-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:10px;

}

/*----------------------------------------------------------*/

.ethics-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.ethics-header img{

    width:52px;

}

.ethics-header h3{

    margin:0;

    color:#063326;

    font-size:22px;

    font-weight:800;

    line-height:1.35;

}

/*----------------------------------------------------------*/

.ethics-card p{

    margin:0 0 16px;

    color:#555;

    font-size:15px;

    line-height:1.75;

    text-align:justify;

}

/*----------------------------------------------------------*/

.ethics-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.ethics-card li{

    position:relative;

    padding-left:22px;

    margin-bottom:10px;

    line-height:1.65;

}

.ethics-card li::before{

    content:"◉";

    position:absolute;

    left:0;

    color:#d79b25;

    font-size:11px;

}

/*----------------------------------------------------------*/

.ethics-highlight{

    display:flex;

    gap:15px;

    align-items:flex-start;

    margin-top:18px;

}

.ethics-highlight img{

    width:46px;

}

.ethics-highlight span{

    font-size:14px;

    line-height:1.7;

    color:#063326;

}

/*==========================================================
ETHICS VALUES
==========================================================*/

.ethics-values{

    padding:6px 0 12px;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.ethics-values-grid{

    display:grid;

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

    gap:18px;

}

/*----------------------------------------------------------*/

.ethics-value-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:20px;

}

/*----------------------------------------------------------*/

.ethics-value-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.ethics-value-header img{

    width:52px;

    flex-shrink:0;

}

.ethics-value-header h3{

    margin:0;

    color:#063326;

    font-size:22px;

    font-weight:800;

    line-height:1.35;

}

/*----------------------------------------------------------*/

.ethics-value-card p{

    margin:0 0 16px;

    color:#555;

    font-size:15px;

    line-height:1.75;

    text-align:justify;

}

.ethics-value-card p:last-child{

    margin-bottom:0;

}

/*==========================================================
OUR GUIDING PRINCIPLES
==========================================================*/

.guiding-principles{

    padding:8px 0;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.guiding-box{

    background:#063326;

    border-radius:10px;

    padding:10px 14px 12px;

}

/*----------------------------------------------------------
TITLE
----------------------------------------------------------*/

.guiding-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:12px;

}

.guiding-title span{

    flex:1;

    height:2px;

    background:#C58A1C;

}

.guiding-title h2{

    margin:0;

    color:#C58A1C;

    font-size:30px;

    font-weight:800;

    text-transform:uppercase;

    white-space:nowrap;

    text-shadow:0 0 10px rgba(197,138,28,.25);

}

/*----------------------------------------------------------
GRID
----------------------------------------------------------*/

.guiding-grid{

    display:grid;

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

}

/*----------------------------------------------------------*/

.guiding-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-right:1px solid rgba(197,138,28,.45);

    padding:0 10px;

}

.guiding-item:last-child{

    border-right:none;

}

.guiding-item img{

    width:60px;

    display:block;

    margin:0 auto 10px;

}

.guiding-item h4{

    margin:2px 0 0;

    color:#ffffff;

    font-size:17px;

    font-weight:700;

    line-height:1.3;

}

/*==========================================================
ETHICS QUOTATION
==========================================================*/

.ethics-quote{

    padding:5px 0;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.ethics-quote-box{

    display:grid;

    grid-template-columns:70% 30%;

    align-items:center;

    background:#FFF8E8;

    border:1px solid #E5C989;

    border-radius:10px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.ethics-quote-left{

    display:flex;

    align-items:center;

    gap:18px;

    padding:12px 16px;

}

.ethics-quote-icon img{

    width:60px;

    display:block;

}

.ethics-quote-content h2{

    margin:0 0 8px;

    color:#222;

    font-size:22px;

    font-weight:800;

    line-height:1.35;

}

.ethics-quote-content h3{

    margin:0;

    color:#222;

    font-size:20px;

    font-weight:700;

    line-height:1.4;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.ethics-quote-right{

    text-align:center;

    padding:12px;

    border-left:1px solid #D8B56B;

}

.ethics-quote-right h4{

    margin:0 0 10px;

    color:#063326;

    font-size:22px;

    font-weight:700;

}

.ethics-quote-right p{

    margin:0;

    color:#D79B25;

    font-size:22px;

    font-weight:700;

    font-style:italic;

    line-height:1.5;

}

/*==========================================================
OUR BUSINESS PHILOSOPHY
==========================================================*/

.ethics-features-strip{

    padding:4px 0 8px;

    background:#ffffff;

}

/*----------------------------------------------------------*/

.ethics-strip-box{

    display:grid;

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

    background:#87CEFA;

    border:1px solid #E6D2A2;

    border-radius:12px;

    overflow:hidden;

}

/*----------------------------------------------------------*/

.ethics-strip-item{

    padding:12px 8px;

    text-align:center;

    border-right:1px solid #E6D2A2;

}

.ethics-strip-item:last-child{

    border-right:none;

}

/*----------------------------------------------------------*/

.ethics-strip-item img{

    width:58px;

    display:block;

    margin:0 auto 14px;

}

/*----------------------------------------------------------*/

.ethics-strip-item h3{

    margin:0 0 12px;

    color:#063326;

    font-size:20px;

    font-weight:800;

    line-height:1.35;

}

/*----------------------------------------------------------*/

.ethics-strip-item p{

    margin:0;

    color:#555;

    font-size:15px;

    line-height:1.7;

}


/*==========================================================
CONTACT US PAGE
CONTACT HERO
==========================================================*/

.contact-hero{

    background:transparent;

    overflow:hidden;

}

.contact-hero .container{

    max-width:1400px;

    color:#063326;

    padding:10;

}

.contact-hero-content{

    display:flex;

    height:480px;      /* Adjust to your preferred hero height */

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.contact-hero-left{

    width:40%;

    background:linear-gradient(90deg,#063326 0%,rgba(6,51,38,.96) 100%);

    color:#fff;

    padding:55px 10px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.page-label-small{

    color:#c89b3c;

    font-size:32px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:8px;

}

.contact-hero-left h1{

    font-size:28px;

    line-height:1.15;

    margin-bottom:22px;

    font-weight:800;

}

.hero-divider{

    width:90px;

    height:4px;

    background:#c89b3c;

    margin-bottom:28px;

}

.contact-hero-left p{

    font-size:17px;

    line-height:1.9;

    color:#e6e6e6;

    margin-bottom:35px;

}

/*----------------------------------------------------------
QUOTE
----------------------------------------------------------*/

.hero-quote{

    display:flex;

    gap:15px;

    align-items:flex-start;

    border:1px solid #c89b3c;

    border-radius:8px;

    padding:12px;

}

.hero-quote img{

    width:24px;

    height:24px;

    object-fit:contain;

    display:block;

    margin-top:5px;

    flex-shrink:0;

}

.hero-quote span{

    font-size:18px;

    line-height:1.7;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.contact-hero-right{

    width:60%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

}

.contact-hero-right{

    width:60%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

}

.contact-hero-right img{

    width:100%;
    height:100%;
    object-fit:fill;
    display:block;

}


/*==========================================================
OUR OFFICES & PRESENCE
==========================================================*/

.contact-office-presence{

    padding:15px 0;

    background:#f7f7f3;

}

.contact-section-title{

    display:block;

    width:100%;

    text-align:center;

    color:#063326;

    font-size:38px;

    font-weight:700;

    margin-bottom:0;

}

.contact-section-divider{

    width:90px;

    height:14px;

    background:#c89b3c;

    margin:10px auto 10px;

}

/*----------------------------------------------------------
OFFICE GRID
----------------------------------------------------------*/

.contact-office-grid{

    display:grid;

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

    gap:28px;

    margin-bottom:15px;

}

.contact-office-card{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    border:1px solid #e6e6e6;

    transition:.3s;

}

.contact-office-card:hover{

    transform:translateY(-6px);

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

}

.contact-featured-office{

    border:2px solid #c89b3c;

}

.contact-office-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}

.contact-office-content{

    position:relative;

    padding:38px 24px 24px;

}

.contact-office-content h3{

    color:#063326;

    font-size:22px;

    margin:18px 0 15px;

}

.contact-office-content p{

    color:#555;

    line-height:1.8;

    font-size:16px;

}

.contact-office-icon{

    position:absolute;

    top:-35px;

    left:24px;

    width:74px;

    height:74px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:26px;

    border:4px solid #ffffff;

    z-index:5;

}

.contact-office-icon img{

    width:46px;

    height:46px;

    object-fit:contain;

    display:block;

}

.contact-office-icon.green{

    background:#0b5039;

}

.contact-office-icon.gold{

    background:#c89b3c;

}

.contact-office-icon.maroon{

    background:#1E5AA8;

}

/*----------------------------------------------------------
PROCESS CENTRE
----------------------------------------------------------*/

.contact-process-centre-box{

    background:#c89b3c;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:22px;

    padding:10px 14px;

}

.contact-centre-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#063326;

    font-size:34px;

    flex-shrink:0;

}

.contact-centre-icon img{

    width:36px;

    height:36px;

    object-fit:contain;

    display:block;

}

.contact-process-centre-box p{

    font-size:17px;

    color:#444;

    line-height:1.8;

}

/*==========================================================
CONTACT INFORMATION CARDS
==========================================================*/

.contact-info-cards{

    padding:10px 0 10px;

    background:#f8f8f5;

}

.contact-info-grid{

    display:grid;

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

    gap:22px;

}

/*----------------------------------------------------------
CARD
----------------------------------------------------------*/

.contact-info-card{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:10px;

    padding:22px;

    min-height:0;

    height:auto;

    display:flex;

    flex-direction:column;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

/*----------------------------------------------------------
HEADING
----------------------------------------------------------*/

.card-heading{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:18px;

}

.card-heading img{

    width:42px;

    height:42px;

    flex-shrink:0;

}

.card-heading h3{

    font-size:18px;

    font-weight:700;

    line-height:1.35;

    color:#063326;

    text-transform:uppercase;

}

/*----------------------------------------------------------
TEXT
----------------------------------------------------------*/

.contact-info-card p{

    font-size:15px;

    line-height:1.65;

    color:#555;

    margin-bottom:12px;

}

/*----------------------------------------------------------
FLAG LIST
----------------------------------------------------------*/

.flag-list{

    list-style:none;

    padding:0;

    margin:0;

}

.flag-list li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:11px;

    font-size:22px;

    color:#222;

}

.flag-list img{

    width:42px;

    height:42px;

    object-fit:cover;

    border:1px solid #ddd;

}

/*----------------------------------------------------------
GREEN LIST
----------------------------------------------------------*/

.green-list{

    list-style:none;

    padding:0;

    margin:0;

}

.green-list li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

}

.green-dot{

    width:26px;

    height:26px;

    background:#0b5039;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:12px;

    flex-shrink:0;

}

/*==========================================================
CONTACT EMAILS — FINAL ALIGNMENT (for shifting emails)
==========================================================*/

/*----------------------------------------------------------
CONTACT EMAILS CARD
----------------------------------------------------------*/

.contact-box-green{

    position:relative;

}


/*----------------------------------------------------------
MAIN CARD HEADING
----------------------------------------------------------*/

.contact-box-green > h3{

    padding-left:20px;

}


/*----------------------------------------------------------
EACH CONTACT ITEM
----------------------------------------------------------*/

.contact-box-green .contact-item{

    position:relative;

    padding:8px 0 8px 0;

    margin-bottom:0;

}


/*----------------------------------------------------------
VERTICAL DIVIDER
Runs between icon column and text column
----------------------------------------------------------*/

.contact-box-green .contact-item::before{

    content:"";

    position:absolute;

    left:88px;

    top:0;

    bottom:0;

    width:1px;

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

}


/*----------------------------------------------------------
CONTACT ITEM TITLE
ICON + SUB-TITLE
----------------------------------------------------------*/

.contact-box-green .contact-item-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0;

    padding-left:65px;

}


/*----------------------------------------------------------
EMAIL ICON
----------------------------------------------------------*/

.contact-box-green .contact-item-title img{

    width:24px;

    height:24px;

    object-fit:contain;

    flex-shrink:0;

}


/*----------------------------------------------------------
SUB-TITLE
----------------------------------------------------------*/

.contact-box-green .contact-item-title strong{

    font-size:18px;

    font-weight:700;

    line-height:1.35;

    color:#ffffff;

}


/*----------------------------------------------------------
EMAIL ADDRESSES
----------------------------------------------------------*/

.contact-box-green .contact-item > a{

    display:block;

    margin-left:63px;

    margin-top:14px;

    color:#d89a1d;

    text-decoration:none;

    font-size:20px;

    line-height:1.3;

}


/*----------------------------------------------------------
SPACE BETWEEN MULTIPLE EMAILS
----------------------------------------------------------*/

.contact-box-green .contact-item > a + a{

    margin-top:14px;

}


/*----------------------------------------------------------
HORIZONTAL SEPARATOR
----------------------------------------------------------*/

.contact-box-green .contact-item:not(:last-child){

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

}





/*----------------------------------------------------------
SUPPLY COUNTRIES (Sales Presence, Customer Markets, etc.)
----------------------------------------------------------*/

.country-columns{

    display:flex;

    justify-content:space-between;

    gap:15px;

}

/*----------------------------------------------------------
TICK LIST
----------------------------------------------------------*/

.tick-list{

    list-style:none;

    padding:0;

    margin:0;

}

.tick-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:12px;

    line-height:1.6;

    font-size:15px;

}

.tick-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:1px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#0b5039;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:bold;

}

/*----------------------------------------------------------
BOTTOM IMAGE
----------------------------------------------------------*/

/*----------------------------------------------------------
BOTTOM IMAGE
----------------------------------------------------------*/

.card-bottom-image{

    margin-top:auto;

    padding-top:18px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

}

.card-bottom-image img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

    border-radius:8px;

}

/*==========================================================
CONTACT DETAILS
==========================================================*/

.contact-details-section{

    padding:10px 0 5px;

    background:#f7f7f3;

}

.contact-details-grid{

    display:grid;

    grid-template-columns:1.15fr 1fr 1.12fr;

    gap:22px;

}

.contact-box{

    background:#ffffff;

    border-radius:10px;

    padding:26px 22px 18px;

    box-shadow:0 8px 22px rgba(0,0,0,.06);

    display:flex;

    flex-direction:column;

}

.contact-box-green{

    background:#063326;

    color:#ffffff;

}

.contact-box h3{

    padding-left:50px;

    display:flex;

    align-items:center;

    gap:14px;

    font-size:22px;

    font-weight:700;

    margin-bottom:34px;

    color:#063326;

}

.contact-box h3 img{

    width:30px;

    height:auto;

}

.contact-item-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-left:45px;

    margin-bottom:8px;

}

.contact-item-title img{

    width:20px;

    height:20px;

}

.contact-box-green h3{

    color:#ffffff;

}

.contact-item{

    margin-bottom:12px;

    padding-bottom:12px;

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

}

.contact-item:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border-bottom:none;

}

.contact-item strong{

    display:block;

    margin-bottom:4px;

    font-size:18px;

    font-weight:700;

    letter-spacing:.3px;

    color:#ffffff;

}

.contact-item a{

    display:block;

    color:#d4b15a;

    text-decoration:none;

    margin:18px 0;

    padding-left:38px;

    font-size:17px;

    line-height:1.45;

    transition:.25s;

}

.contact-item a:hover{

    color:#ffffff;

}

/*==========================================================
CONTACT DIRECTORY
==========================================================*/

.contact-directory{

    margin-top:12px;

    padding-left:50px;

}

.directory-section{

    padding-bottom:22px;

    margin-bottom:22px;

    border-bottom:1px solid #ececec;

}

.directory-section:last-child{

    border-bottom:none;

    margin-bottom:0;

    padding-bottom:0;

}

.directory-section:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.directory-section h4{

    font-size:16px;

    font-weight:700;

    color:#c89b3c;

    margin-bottom:10px;

    letter-spacing:.5px;

}

.directory-row{

    display:grid;

    grid-template-columns:55px 1fr;

    gap:20px;

    align-items:center;

    margin-bottom:8px;

}

.directory-row span:first-child{

    width:55px;

    color:#666;

    font-weight:600;

}

.directory-row a{

    color:#c89b3c;

    text-decoration:none;

}

.directory-row a:hover{

    color:#063326;

}

.directory-row span:last-child{

    color:#444;

}

.social-links{

    list-style:none;

    padding:0;

    margin:0;

}

.social-links li{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:22px;

    font-size:18px;

}

.social-links img{

    width:26px;

    height:26px;

}

/*==========================================================
FOLLOW US PANEL
==========================================================*/

.follow-box{

    background:#fbf5e2;

    display:flex;

    flex-direction:column;
    
    padding:0;

    overflow:hidden;

}

.follow-box h3{

    display:flex;

    align-items:center;

    gap:14px;

    margin:0 0 28px;

    padding:0;

    white-space:nowrap;

}

.follow-box h3 img{

    width:28px;

    height:28px;

    object-fit:contain;

    flex-shrink:0;

}

.follow-left{


    padding:28px 34px 0;

}

.follow-right{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    margin-top:20px;

    background:url("../images/contact/follow-bg.jpg") center center no-repeat;

    background-size:cover;

}

.follow-right img{

    width:100%;

    height:200px;

    object-fit:cover;

    display:block;

    border-radius:10px;

}

/*==========================================================
COMMITMENT BANNER
==========================================================*/

.contact-commitment{

    padding:5px 0 10px;

    background:#f7f7f3;

}

.commitment-grid{

    display:grid;

    grid-template-columns:350px 1fr 300px;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

/*----------------------------------------------------------
LEFT IMAGE
----------------------------------------------------------*/

.commitment-image{

    overflow:hidden;

}

.commitment-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*----------------------------------------------------------
CENTRE
----------------------------------------------------------*/

.commitment-content{

    padding:20px 25px;

}

.commitment-content h2{

    color:#063326;

    font-size:28px;

    margin-bottom:10px;

    font-weight:700;

}

.commitment-content p{

    color:#555;

    font-size:1 6px;

    line-height:1.5;

    margin-bottom:10px;

}

/*----------------------------------------------------------
RIGHT
----------------------------------------------------------*/

.commitment-quote{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:15px;

    border-left:1px solid #ececec;

}

.commitment-quote h3{

    color:#063326;

    font-size:28px;

    margin-bottom:10px;

    font-weight:700;

}

.quote-text{

    font-size:32px;

    line-height:1.3;

    color:#d58a1f;

    font-family:"Brush Script MT", cursive;

}

.social-links a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#222;

    text-decoration:none;

    transition:all .25s ease;

}

.social-links a:hover{

    color:#d4a438;

    transform:translateX(5px);

}

.social-links a img{

    width:26px;

    height:26px;

}

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

.downloads-hero{

    background:#ffffff;

    padding:10 0 40px;

}

.downloads-hero .container{

    max-width:1400px;

    margin:10 auto;

    padding:10;

}

.downloads-hero-content{

    display:flex;

    height:500px;

    overflow:hidden;

}

/*----------------------------------------------------------
LEFT
----------------------------------------------------------*/

.downloads-hero-left{

    width:40%;

    background:#063326;

    color:#fff;

    padding:50px 15px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.downloads-tag{

    color:#d4a438;

    font-size:28px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:10px;

}

.downloads-hero-left h1{

    font-size:22px;

    line-height:1.12;

    margin-bottom:12px;

    font-weight:800;

}

.hero-divider{

    width:90px;

    height:4px;

    background:#c89b3c;

    margin-bottom:28px;

}

.downloads-hero-left h3{

    font-size:18px;

    line-height:1.4;

    color:#e6e6e6;

    margin-bottom:30px;

}

.downloads-hero-left p{

    line-height:1.6;

    margin-bottom:10px;

    color:#ececec;

}

.downloads-features{

    display:flex;

    gap:10px;

    margin-top:25px;

    flex-wrap:wrap;

}

.downloads-feature{

    display:flex;

    align-items:center;

    gap:12px;

}

.downloads-feature img{

    width:46px;

}

.downloads-feature span{

    font-size:18px;

    font-weight:700;

}

.downloads-hero-right{

    width:60%;

    position:relative;

}

.downloads-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==========================================================
DOCUMENT FILTER BAR
==========================================================*/

.downloads-filter{

    padding:28px 0 22px;

    background:#f7f7f3;

}

.downloads-filter-box{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:10px;

    padding:20px 22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

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

}

.downloads-filter-title h2{

    font-size:26px;

    color:#063326;

    margin-bottom:5px;

    font-weight:700;

}

.downloads-filter-title p{

    color:#666;

    font-size:15px;

}

.downloads-filter-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    justify-content:flex-end;

}

.downloads-filter-buttons button{

    border:1px solid #d9d9d9;

    background:#fff;

    padding:10px 16px;

    border-radius:6px;

    font-size:14px;

    font-weight:600;

    color:#444;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.25s;

}

.downloads-filter-buttons button:hover{

    border-color:#c89b3c;

    color:#063326;

}

.downloads-filter-buttons button.active{

    background:#063326;

    color:#fff;

    border-color:#063326;

}

.downloads-filter-buttons button i{

    font-size:14px;

}

/*==========================================================
NEW ADDITION
==========================================================*/

/*==========================================================
LATEST PUBLICATIONS
==========================================================*/

.latest-publications{

    padding:2px 0 2px;

    background:#f7f7f3;

}

.latest-publications-header{

    text-align:center;

    margin-bottom:18px;

}

.latest-publications-header h2{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    color:#063326;

    font-size:34px;

    font-weight:700;

    margin-bottom:10px;

}

.latest-publications-header h2 img{

    width:72px;

}

.latest-publications-header p{

    max-width:1400px;

    margin:auto;

    color:#666;

    font-size:18px;

    line-height:1.4;

}

.publication-card{

    display:grid;

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

    gap:35px;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:28px;

    box-shadow:0 8px 18px rgba(0,0,0,.06);

    position:relative;

}

.publication-cover{

    position:relative;

}

.publication-cover img{

    width:100%;

    border-radius:8px;

    box-shadow:0 8px 16px rgba(0,0,0,.12);

}

.publication-ribbon{

    position:absolute;

    top:12px;

    right:-8px;

    background:#B8860B;

    color:#fff;

    padding:6px 10px;

    font-size:12px;

    font-weight:700;

    border-radius:10px;

}

.publication-content h3{

    color:#063326;

    font-size:28px;

    margin-bottom:6px;

}

.publication-content h4{

    color:#B8860B;

    font-size:22px;

    margin-bottom:10px;

}

.publication-content ul{

    padding-left:20px;

    margin-bottom:10px;

}

.publication-content li{

    margin-bottom:8px;

    color:#555;

    font-size:16px;

}

.publication-content p{

    color:#666;

    line-height:1.8;

    font-size:16px;

}

.publication-actions{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:18px;

}

.publication-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    height:52px;

    background:#063326;

    color:#ffffff;

    text-decoration:none;

    border-radius:8px;

    font-weight:700;

    transition:.3s;

}

.publication-btn:hover{

    background:#B8860B;

}

.publication-btn.secondary{

    background:#ffffff;

    color:#063326;

    border:2px solid #063326;

}

.publication-btn.secondary:hover{

    background:#063326;

    color:#ffffff;

}

@media(max-width:992px){

.publication-card{

grid-template-columns:1fr;

text-align:center;

}

.publication-cover{

max-width:250px;

margin:auto;

}

.publication-content ul{

text-align:left;

display:inline-block;

}

}



/*==========================================================
DOWNLOAD LIBRARY (it's Existing section)
==========================================================*/

.downloads-library{

    padding:2px 0 15px;

    background:#f7f7f3;

}

.download-grid{

    display:grid;

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

    gap:24px;

}

.download-card{

    background:#ffffff;

    border:1px solid #e8e8e8;

    border-radius:10px;

    padding:24px;

    box-shadow:0 8px 18px rgba(0,0,0,.05);

}

.download-card-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:14px;

}

.download-card-header img{

    width:36px;

}

.download-card-header h3{

    font-size:22px;

    color:#063326;

    margin:0;

    font-weight:700;

}

.download-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    padding:10px 0;

    border-bottom:1px solid #ececec;

}

.download-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.download-left{

    display:flex;

    gap:12px;

    flex:1;

}

.download-left img{

    width:42px;

    height:42px;

    flex-shrink:0;

}

.download-left h4{

    font-size:17px;

    color:#063326;

    margin-bottom:4px;

}

.download-left h4 a{

    color:#063326;

    text-decoration:none;

    transition:.25s;

}

.download-left h4 a:hover{

    color:#c58a1c;

}

.download-left p{

    font-size:13px;

    color:#666;

    line-height:1.45;

    margin-bottom:3px;

}

.download-left span{

    font-size:12px;

    color:#999;

    text-transform:uppercase;

    font-weight:600;

}

.download-btn{

    width:42px;

    height:42px;

    border:1px solid #d8d8d8;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#063326;

    text-decoration:none;

    transition:.25s;

    flex-shrink:0;

}

.download-btn:hover{

    background:#063326;

    color:#ffffff;

    border-color:#063326;

}

.download-btn img{

    width:40px;

    height:40px;

    object-fit:contain;

    display:block;

}

@media(max-width:1200px){

    .download-grid{

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

    }

}

@media(max-width:768px){

    .download-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================================
MARKET PUBLICATIONS
==========================================================*/

.market-publications{

    padding:0 0 5px;

    background:#f7f7f3;

}

.market-card{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:10px;

    padding:10px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.market-card h2{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:24px;

    color:#063326;

    margin-bottom:5px;

}

.market-card h2 img{

    width:36px;

}

.market-grid{

    display:grid;

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

    gap:20px 14px;

    justify-items:center;      /* Center every grid item */
    align-items:start;

    margin-bottom:25px;

}

.market-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    width:100%;

}

.market-item img{

    width:56px;

    height:56px;

    display:block;

    margin:0 auto 14px;

    object-fit:contain;

}

.market-item span{

    display:block;

    font-size:18px;

    font-weight:600;

    line-height:1.45;

    color:#063326;

    text-align:center;

    max-width:150px;

    margin:0 auto;

}

.market-note{

    text-align:center;

    color:#666;

    font-size:18px;

    line-height:1.6;

    max-width:950px;

    margin:0 auto;

}

@media(max-width:1200px){

    .market-grid{

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

    }

}

@media(max-width:768px){

    .market-grid{

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

    }

}

/*==========================================================
IMPORTANT NOTE
==========================================================*/

.downloads-note{

    padding:0 0 10px;

    background:#f7f7f3;

}

.downloads-note-grid{

    display:grid;

    grid-template-columns:1fr 2fr;

    gap:24px;

    width:100%;

    box-sizing:border-box;

}

.downloads-note-grid > *{

    min-width:0;

    box-sizing:border-box;

}

.important-note{

    background:#E6D27A;

    border:1px solid #e6e6e6;

    border-radius:10px;

    padding:18px;

}

.note-header{

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:22px;

}

.note-header img{

    width:50px;

}

.note-header h3{

    color:#d69217;

    font-size:30px;

    font-weight:700;

}

.important-note p{

    font-size:16px;

    line-height:1.9;

    color:#555;

    margin-bottom:10px;

}

/*----------------------------------------------------------
OUR COMMITMENT
----------------------------------------------------------*/

.download-commitment-box{

    background:url("../images/downloads/commitment-bg.jpg") center/cover;

    border-radius:10px;

    overflow:hidden;

    position:relative;

    width:100%;

    box-sizing:border-box;

}

.download-commitment-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(6,51,38,.88);

}

.download-commitment-content{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:25px;

    padding:25px;

    color:#ffffff;

}

.download-commitment-left img{

    width:125px;

}

.download-commitment-text h3{

    font-size:28px;

    margin-bottom:18px;

}

.download-commitment-text p{

    line-height:1.7;

    margin-bottom:15px;

}

.download-commitment-text h4{

    color:#d4b15a;

    font-size:22px;

    font-weight:700;

    margin-top:15px;

}

/*==========================================================
DOWNLOADS FEATURE BOXES
==========================================================*/

.downloads-features-section{

    background:#f7f7f3;

    padding:0 0 10px;

}

.downloads-feature-grid{

    display:grid;

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

    gap:18px;

}

.downloads-feature-box{

    background:#ffffff;

    border:1px solid #e7e7e7;

    border-radius:10px;

    padding:22px 16px;

    text-align:center;

    box-shadow:0 5px 16px rgba(0,0,0,.05);

    transition:.3s;

}

.downloads-feature-box:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(0,0,0,.08);

}

.downloads-feature-box img{

    width:80px;

    height:80px;

    object-fit:contain;

    margin:0 auto 15px;

    display:block;

}

.downloads-feature-box h4{

    font-size:18px;

    color:#063326;

    font-weight:700;

    margin:0 0 4px;

}

.downloads-feature-box span{

    display:block;

    font-size:15px;

    color:#555;

    line-height:1.5;

}

@media(max-width:1200px){

    .downloads-feature-grid{

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

    }

}

@media(max-width:768px){

    .downloads-feature-grid{

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

    }

}

/*==========================================================
FAQ PAGE - STARTS FROM HERE
FAQ HERO
==========================================================*/

.faq-hero{

    background:#ffffff;

    overflow:hidden;

    padding:10 0 40px;

}

.faq-hero .container{

    max-width:1400px;

    margin:10 auto;

    padding:10;

}

/*----------------------------------------------------------
HERO CONTENT
----------------------------------------------------------*/

.faq-hero-content{

    display:flex;

    height:450px;

    overflow:hidden;

    background:#063326;

    align-items:stretch;

    justify-content:space-between;

    gap:0px;

}


/*----------------------------------------------------------
LEFT PANEL
----------------------------------------------------------*/

.faq-hero-left{

    flex:0 0 50%;

    padding-left:10px;

    padding-right:20px;

    box-sizing:border-box;

}

.faq-badge{

    display:inline-block;

    background:#C9A227;

    color:#fff;

    padding:8px 20px;

    border-radius:40px;

    font-size:24px;
    
    margin-top:10px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:20px;

}

.faq-hero-left h1{

    color:#ffffff;

    font-size:40px;

    line-height:1.35;

    margin-bottom:15px;

}

.faq-hero-left h1 span{

    color:#C9A227;

}

.faq-hero-left h2{

    color:#C9A227;

    font-size:28px;

    font-weight:600;

    margin-bottom:10px;

}

.faq-hero-left p{

    color:#ffffff;

    line-height:1.6;

    font-size:16px;

    max-width:720px;

    margin-bottom:15px;

}

/*----------------------------------------------------------
SEARCH
----------------------------------------------------------*/

.faq-search-box{

    display:flex;

    align-items:center;

    background:#ffffff;

    border-radius:55px;

    overflow:hidden;

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

    margin-bottom:15px;

}

.faq-search-box input{

    flex:1;

    border:none;

    outline:none;

    padding:10px 20px;

    font-size:16px;

}

.faq-search-box button{

    width:80px;

    border:none;

    background:#C9A227;

    color:#fff;

    cursor:pointer;

    font-size:20px;

}

/*----------------------------------------------------------
POPULAR SEARCHES
----------------------------------------------------------*/

.popular-searches{

    display:flex;

    flex-wrap:wrap;

    gap:5px;

    align-items:center;

}

.popular-searches span{

    color:#fff;

    font-weight:600;

}

.popular-searches a{

    color:#C9A227;

    text-decoration:none;

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

    padding:4px 8px;

    border-radius:30px;

    transition:.3s;

}

.popular-searches a:hover{

    background:#C9A227;

    color:#fff;

}

/*----------------------------------------------------------
RIGHT PANEL
----------------------------------------------------------*/

.faq-hero-right{

    flex:0 0 50%;

    display:flex;

    overflow:hidden;

}

.faq-hero-right img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

/*==========================================================
STATISTICS
==========================================================*/

.faq-statistics{

    margin:10px 0 15px;

}

.faq-statistics-grid{

    display:grid;

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

    background:#063326;

    border-radius:18px;

    overflow:hidden;

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

}

.faq-stat-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:10px 12px;

    min-height:110px;

    border-right:1px solid rgba(201,162,39,.35);

    position:relative;

    transition:all .35s ease;

}

.faq-stat-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:#C9A227;

    transform:scaleX(0);

    transition:.35s;

}

.faq-stat-item:hover::before{

    transform:scaleX(1);

}

.faq-stat-item:hover{

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

}

.faq-stat-item:last-child{

    border-right:none;

}

.faq-stat-icon{

    flex:0 0 54px;

}

.faq-stat-icon img{

    width:74px;

    height:74px;

    display:block;

    object-fit:contain;

}

.faq-stat-content{

    flex:1;

    text-align:left;

}

.stat-top{

    display:block;

    color:#FFFFFF;

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:2px;

}

.faq-stat-content h3{

    color:#F0B43A;

    font-size:42px;

    font-weight:700;

    line-height:1;

    margin:0 0 6px;

}

.faq-stat-content h4{

    color:#FFFFFF;

    font-size:15px;

    font-weight:700;

    line-height:1.25;

    margin:0;

    text-transform:uppercase;

}

.faq-stat-content p{

    color:#E5E5E5;

    font-size:13px;

    line-height:1.4;

    margin-top:5px;

}

/*==========================================================
FAQ CATEGORY CARDS (Customer FAQs, Trust & Relationship, Supplier FAQs
==========================================================*/

.faq-category-section{

    padding:5px 0 5px;

    background:#ffffff;

}

.faq-category-grid{

    display:grid;

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

    gap:20px;

}

/*----------------------------------------------------------
CARD
----------------------------------------------------------*/

.faq-card{

    border-radius:12px;

    padding:15px;

    color:#fff;

    min-height:345px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

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

}

/*----------------------------------------------------------
BACKGROUND
----------------------------------------------------------*/

.faq-card.customer-card{

    background:linear-gradient(135deg,#003b33,#01483b);

}

.faq-card.trust-card{

    background:linear-gradient(135deg,#b96f06,#a05d00);

}

.faq-card.supplier-card{

    background:linear-gradient(135deg,#003b33,#01483b);

}

/*----------------------------------------------------------
HEADER
----------------------------------------------------------*/

.faq-card-header{

    display:flex;

    align-items:flex-start;

    gap:20px;

}

/*----------------------------------------------------------
ICON
----------------------------------------------------------*/

.faq-card-icon{

    width:76px;

    height:76px;

    border-radius:100%;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.faq-card-icon img{

    width:76px;

}

/*----------------------------------------------------------
TITLE
----------------------------------------------------------*/

.faq-card h3{

    color:#fff;

    font-size:26px;

    font-weight:700;

    margin-bottom:6px;

}

.question-count{

    display:block;

    color:#FDB441;

    font-size:26px;

    font-weight:700;

    margin-bottom:4px;

}

.faq-card p{

    color:#ffffff;

    font-size:16px;

}

/*----------------------------------------------------------
LIST
----------------------------------------------------------*/

.faq-list{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

.single-column{

    grid-template-columns:1fr;

}

.faq-list ul{

    list-style:none;

}

.faq-list li{

    position:relative;

    padding-left:22px;

    margin-bottom:14px;

    font-size:18px;

    color:#ffffff;

}

.faq-list li::before{

    content:"◎";

    position:absolute;

    left:0;

    top:-1px;

    color:#FDB441;

    font-size:13px;

}

/*----------------------------------------------------------
BUTTON
----------------------------------------------------------*/

.faq-btn{

    margin-top:22px;

    align-self:center;

    width:250px;

    height:54px;

    border:2px solid #c57f0f;

    border-radius:6px;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    transition:.35s;

}

.faq-btn:hover{

    background:#c57f0f;

    border-color:#c57f0f;

}

.faq-btn span{

    font-size:24px;

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:1200px){

.faq-category-grid{

grid-template-columns:1fr;

}

.faq-card{

min-height:auto;

}

}

/*==========================================================
Browse Frequently Asked Questions                                          │
Select a category or search above.                                         
==========================================================*/

/*==========================================================
FAQ ENGINE
==========================================================*/

.faq-workbench{

    padding:10px 0 10px;

    background:#FFFFFF;

}

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

.faq-engine-header{

    text-align:center;

    margin-bottom:40px;

}

.faq-engine-header h2{

    color:#063326;

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

}

.faq-engine-header p{

    color:#555555;

    font-size:18px;

    line-height:1.1;

    max-width:1100px;

    margin:0 auto;

}

.faq-workbench .container{

    background:#FFF8E8;

    padding:5px;

    border-radius:24px;

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

}

.faq-nav-group.active{

    border-left:5px solid #C9A227;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

/*==========================================================
WORKSPACE
==========================================================*/

.faq-workspace{

    display:grid;

    grid-template-columns:330px 1fr;

    gap:30px;

}

/*==========================================================
SIDEBAR
==========================================================*/

.faq-sidebar{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

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

}

/*----------------------------------------------------------
SIDEBAR HEADER
----------------------------------------------------------*/

.faq-sidebar-header{

    background:#063326;

    padding:16px 22px;

    border-bottom:3px solid #C9A227;

}

.faq-sidebar-header h3{

    color:#FFFFFF;

    font-size:20px;

    margin-bottom:6px;

}

.faq-sidebar-header p{

    color:#E8E8E8;

    font-size:13px;

    line-height:1.5;

}

/*==========================================================
FAQ SIDEBAR NAVIGATION
==========================================================*/

.faq-nav-group{

    border-bottom:1px solid #E8E8E8;

}

/*----------------------------------------------------------
ACCORDION HEADER
----------------------------------------------------------*/

.faq-nav-title{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 18px;

    background:#F7F7F7;

    border:none;

    border-bottom:1px solid #ECECEC;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    color:#063326;

    transition:.30s;

}

.faq-nav-title:hover{

    background:#FFF8E8;

}

.faq-nav-title i{

    color:#C9A227;

    margin-right:10px;

    width:20px;

    text-align:center;

}

.faq-count{

    background:#063326;

    color:#FFFFFF;

    border-radius:30px;

    padding:4px 10px;

    font-size:12px;

}

/*----------------------------------------------------------
ACCORDION RIGHT SIDE
----------------------------------------------------------*/

.faq-nav-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.faq-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:18px;

    font-size:20px;

    color:#C9A227;

    margin-left:10px;

    transition:all .30s ease;

}

.faq-chevron{

    width:16px;

    height:16px;

    transition:transform .35s ease;

    display:block;

}

.faq-nav-group.active .faq-chevron{

    transform:rotate(90deg);

}

/*----------------------------------------------------------
CATEGORY LIST
----------------------------------------------------------*/

.faq-nav-list{

    list-style:none;

    margin:0;

    padding:0;

    overflow:hidden;

    max-height:0;

    transition:max-height .35s ease;

}

.faq-nav-list li{

    padding:13px 22px;

    border-bottom:1px solid #F4F4F4;

    font-size:14px;

    color:#444;

    cursor:pointer;

    transition:.25s;

    position:relative;

}

.faq-nav-list li:hover{

    background:#FFF8E8;

    color:#063326;

    padding-left:34px;

}

.faq-nav-list li:hover::before{

    content:"›";

    position:absolute;

    left:16px;

    color:#C9A227;

    font-weight:bold;

}

.faq-nav-list li.active{

    background:#C9A227;

    color:#FFFFFF;

    font-weight:600;

}

/*==========================================================
QUESTION PANEL
==========================================================*/

.faq-main{

    background:#ffffff;

    border-radius:18px;

    min-height:650px;

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

}

/*==========================================================
ANSWER PANEL
==========================================================*/

.faq-answer-panel{

    margin:25px 35px 0;

    background:#FFFFFF;

    border-left:5px solid #C9A227;

    border-radius:18px;

    padding:30px;

    min-height:520px;

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

}

.faq-answer-panel p{

    color:#555555;

    font-size:16px;

    line-height:1.9;

    margin-bottom:18px;

}

.faq-answer-panel h3{

    color:#063326;

    font-size:28px;

    margin-bottom:20px;

}

.faq-answer-panel ul{

    margin:18px 0 18px 22px;

}

.faq-answer-panel li{

    margin-bottom:10px;

    line-height:1.8;

}

/*==========================================================
RELATED QUESTIONS
==========================================================*/

.faq-related-questions{

    margin-top:25px;

}

/*==========================================================
RELATED KNOWLEDGE CENTER
==========================================================*/

.faq-related-knowledge{

    margin-top:25px;

}

/*==========================================================
CONTACT CTA
==========================================================*/

.faq-contact{

    margin-top:25px;

}

/*----------------------------------------------------------
RIGHT PANEL HEADER (main header)
----------------------------------------------------------*/

.faq-main-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    border-bottom:1px solid #ECECEC;

}

/*----------------------------------------------------------
HEADING
----------------------------------------------------------*/

.faq-main-header h2{

    color:#063326;

    font-size:20px;

    line-height:1.25;

    margin-bottom:4px;

}

.faq-main-header p{

    color:#C9A227;

    font-size:15px;

    font-weight:600;

}

/*----------------------------------------------------------
FAQ SEARCH WRAPPER
----------------------------------------------------------*/

.faq-search-wrapper{

    position:relative;

    display:flex;

    align-items:center;
    
}

.faq-search-icon{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    opacity:.65;

    pointer-events:none;

}

/*----------------------------------------------------------
SEARCH
----------------------------------------------------------*/

.faq-main-search input{

    width:360px;

    padding:12px 18px 12px 48px;

    border:1px solid #D8D8D8;

    border-radius:30px;

    outline:none;

    font-size:14px;

    transition:all .30s ease;

}

.faq-main-search input:focus{

    border-color:#C9A227;

    box-shadow:0 0 0 4px rgba(201,162,39,.12);

}

.faq-main-search{

    display:flex;

    align-items:center;

}

/*----------------------------------------------------------
QUESTION AREA
----------------------------------------------------------*/

.faq-question-list{

    height:520px;

    padding:35px;

    overflow-y:auto;

    overflow-x:hidden;

}

/*----------------------------------------------------------
EMPTY SCREEN
----------------------------------------------------------*/

.faq-empty{

    text-align:center;

}

.faq-empty img{

    width:220px;

    margin-bottom:25px;

}

.faq-empty h3{

    color:#063326;

    margin-bottom:10px;

}

.faq-empty p{

    color:#666;

    max-width:500px;

    margin:auto;

    line-height:1.7;

}

/*----------------------------------------------------------
FOOTER
----------------------------------------------------------*/

.faq-main-footer{

    border-top:1px solid #ECECEC;

    padding:16px 28px;

    background:#FAFAFA;

    color:#666;

    font-size:14px;

}

/*----------------------------------------------------------
QUESTION PLACEHOLDER
----------------------------------------------------------*/

.faq-placeholder{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    padding:65px 50px 40px;

}

.faq-placeholder img{

    width:240px;

    margin-bottom:30px;

}

.faq-placeholder h3{

    font-size:38px;

    color:#063326;

    margin-bottom:18px;

    font-weight:700;

}

.faq-placeholder p{

    max-width:680px;

    color:#666666;

    font-size:16px;

    line-height:1.9;

    margin-bottom:28px;

}

.faq-placeholder-note{

    display:inline-block;

    background:#FFF8E8;

    border:1px solid #E8D7A5;

    color:#063326;

    padding:14px 22px;

    border-radius:40px;

    font-size:15px;

    font-weight:600;

}

/*----------------------------------------------------------
QUESTION CONTAINER
----------------------------------------------------------*/

.faq-question-container{

    display:block;

}

/*----------------------------------------------------------
QUESTION CARD
----------------------------------------------------------*/

.faq-question-card{

    background:#FFFFFF;

    border:1px solid #ECECEC;

    border-left:5px solid #C9A227;

    border-radius:12px;

    padding:18px 22px;

    margin-bottom:16px;

    cursor:pointer;

    transition:.30s;

}

.faq-question-card:hover{

    transform:translateX(6px);

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

}

.faq-question-card.active{

    background:#FFF8E8;

    border-left:5px solid #063326;

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

    transform:translateX(6px);

    transition:all .25s ease;

}

.faq-question-title{

    font-size:18px;

    color:#063326;

    font-weight:600;

    margin-bottom:10px;

}

.faq-question-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;

    color:#777777;

}

/*==========================================================
ANSWER PANEL HIGHLIGHT
==========================================================*/

.faq-answer-panel.flash{

    animation:faqAnswerPulse 3s ease;

}

@keyframes faqAnswerPulse{

    0%{

        border-left:5px solid #C9A227;

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

    }

    20%{

        border-left:5px solid #FFD700;

        box-shadow:0 0 32px rgba(201,162,39,1);

    }

    40%{

        border-left:5px solid #C9A227;

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

    }

    60%{

        border-left:5px solid #FFD700;

        box-shadow:0 0 32px rgba(201,162,39,1);

    }

    80%{

        border-left:5px solid #C9A227;

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

    }

    100%{

        border-left:5px solid #C9A227;

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

    }

}

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

.faq-answer-header{

    margin-bottom:28px;

}

.faq-answer-label{

    color:#C9A227;

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:10px;

}

.faq-answer-question{

    color:#063326;

    font-size:30px;

    font-weight:700;

    line-height:1.4;

    margin-bottom:18px;

}

.faq-answer-divider{

    width:100%;

    height:2px;

    background:linear-gradient(to right,#C9A227,#EFE7B0,#FFFFFF);

    border-radius:10px;

    margin-bottom:30px;

}

/*==========================================================
ANSWER NAVIGATION
==========================================================*/

.faq-answer-navigation{

    margin-top:40px;

    text-align:right;

}

.faq-back-to-questions{

    background:#063326;

    color:#ffffff;

    border:none;

    padding:12px 26px;

    border-radius:30px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.faq-back-to-questions:hover{

    background:#C9A227;

    color:#063326;

}

/*==========================================================
SEARCH RESULTS PANEL
==========================================================*/

.faq-search-results{

    display:none;

    position:absolute;

    top:60px;

    left:0;

    width:100%;

    max-height:420px;

    overflow-y:auto;

    background:#ffffff;

    border:1px solid #E4E4E4;

    border-radius:14px;

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

    z-index:9999;

}

.faq-search-item{

    padding:18px 22px;

    font-size:15px;

    color:#063326;

    cursor:pointer;

}

.faq-search-item:hover{

    background:#FFF8E8;

}

/*==========================================================
RELATED QUESTIONS
==========================================================*/

.faq-related-questions{

    margin:30px 35px 0;

    background:#FFFFFF;

    border-radius:18px;

    padding:30px;

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

}

.faq-related-title{

    font-size:24px;

    font-weight:700;

    color:#063326;

    margin-bottom:20px;

}

.faq-related-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.faq-related-item{

    padding:16px 20px;

    border-left:4px solid #C9A227;

    background:#FFFDF7;

    border-radius:12px;

    cursor:pointer;

    transition:all .25s ease;

    font-weight:600;

    color:#063326;

}

.faq-related-item:hover{

    background:#FFF8E8;

    transform:translateX(6px);

    box-shadow:0 8px 18px rgba(0,0,0,.10);

}

/*==========================================================
FINAL CTA (Couldn't find your answer...)
==========================================================*/

.faq-final-cta{

    padding:8px 0;

    background:#ffffff;

}

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

.faq-final-cta-box{

    background:#003827;

    border-radius:12px;

    padding:22px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

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

.faq-final-left{

    display:flex;

    align-items:center;

    gap:22px;

}

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

.faq-final-icon{

    width:90px;

    height:90px;

    border:2px solid #d48a12;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.faq-final-icon img{

    width:50px;

}

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

.faq-final-text h2{

    color:#ffffff;

    font-size:28px;

    font-weight:700;

    margin-bottom:10px;

    letter-spacing:.4px;

}

.faq-final-text p{

    color:#ffffff;

    font-size:18px;

    line-height:1.7;

    max-width:700px;

}

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

.faq-final-buttons{

    display:flex;

    gap:28px;

    flex-shrink:0;

}

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

.faq-submit-btn,

.faq-contact-btn{

    width:285px;

    height:58px;

    border-radius:6px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.30s;

}

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

.faq-submit-btn{

    background:#bf7407;

    color:#ffffff;

}

.faq-submit-btn:hover{

    background:#d28309;

}

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

.faq-contact-btn{

    border:2px solid #c88411;

    color:#ffffff;

}

.faq-contact-btn:hover{

    background:#c88411;

}

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

.faq-submit-btn span,

.faq-contact-btn span{

    font-size:22px;

}

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

@media (max-width:1100px){

.faq-final-cta-box{

flex-direction:column;

align-items:flex-start;

}

.faq-final-buttons{

width:100%;

flex-direction:column;

}

.faq-submit-btn,

.faq-contact-btn{

width:100%;

}

}

/*==========================================================
SUBMIT ENQUIRY HERO
==========================================================*/

.submit-hero-section{

    padding:5px 0 5px;

    background:#ffffff;

}

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

.submit-hero{

    height:450px;

    border-radius:12px;

    overflow:hidden;

    display:grid;

    grid-template-columns:50% 50%;

    background:linear-gradient(90deg,#003a2f 0%,#004133 100%);

}

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

.submit-hero-content{

    padding:15px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

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

.submit-hero-content h1{

    font-size:38px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:10px;

    line-height:1;

}

.submit-hero-content h1 span{

    color:#D88B10;

}

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

.submit-hero-content h2{

    font-size:26px;

    color:#ffffff;

    font-weight:600;

    line-height:1.25;

    margin-bottom:22px;

}

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

.submit-hero-content p{

    color:#ffffff;

    font-size:17px;

    line-height:1.8;

    margin-bottom:16px;

}

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

.submit-hero-buttons{

    display:flex;

    gap:18px;

    margin-top:18px;

}

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

.btn-submit-enquiry,

.btn-explore-services{

    height:55px;

    padding:0 32px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:6px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.30s;

}

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

.btn-submit-enquiry{

    background:#C97906;

    color:#ffffff;

}

.btn-submit-enquiry:hover{

    background:#DA8A08;

}

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

.btn-explore-services{

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

    color:#ffffff;

}

.btn-explore-services:hover{

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

}

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

.submit-hero-image{

    position:relative;

    overflow:hidden;

}

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

.submit-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

@media(max-width:992px){

.submit-hero{

grid-template-columns:1fr;

height:auto;

}

.submit-hero-image{

height:320px;

}

.submit-hero-content{

padding:35px;

}

.submit-hero-buttons{

flex-direction:column;

}

.btn-submit-enquiry,

.btn-explore-services{

width:100%;

}

}


/*==========================================================
OUR ENQUIRY PROCESS
==========================================================*/

.enquiry-process-section{

    padding:10px 0 10px;

    background:#ffffff;

}

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

.section-title-green{

    width:1400px;

    margin:0 auto 35px;

    background:#003B33;

    color:#ffffff;

    text-align:center;

    padding:14px 20px;

    border-radius:8px;

    font-size:28px;

    font-weight:700;

    letter-spacing:.5px;

}

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

.process-grid{

    display:grid;

    grid-template-columns:

        1fr 35px
        1fr 35px
        1fr 35px
        1fr 35px
        1fr 35px
        1fr;

    align-items:center;

    gap:0;

}

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

.process-card{

    position:relative;

    background:#ffffff;

    border:1px solid #e8e8e8;

    border-radius:10px;

    padding:30px 15px 20px;

    text-align:center;

    transition:.30s;

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

}

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

.process-card:hover{

    transform:translateY(-5px);

}

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

.step-no{

    position:absolute;

    top:-13px;

    left:50%;

    transform:translateX(-50%);

    width:28px;

    height:28px;

    border-radius:50%;

    background:#003B33;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

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

.process-icon{

    width:74px;

    height:74px;

    border:2px solid #d6d6d6;

    border-radius:50%;

    margin:0 auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.process-icon img{

    width:52px;

}

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

.process-card h3{

    font-size:16px;

    line-height:1.5;

    color:#B87809;

    font-weight:700;

    text-transform:uppercase;

}

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

.process-arrow{

    text-align:center;

    font-size:32px;

    color:#003B33;

    font-weight:700;

}

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

@media(max-width:992px){

.process-grid{

grid-template-columns:1fr;

gap:25px;

}

.process-arrow{

display:none;

}

.section-title-green{

width:100%;

font-size:24px;

}

}




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

.procurement-section{

    padding:35px 0 60px;

    background:#fff;

}

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

.procurement-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:35px;

    align-items:start;

}

.procurement-left{

    min-width:0;

    width:100%;

}

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

.procurement-workbench{

    border:1px solid #e5e5e5;

    border-radius:10px;

    overflow:hidden;

    background:#fff;

}

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

.workbench-header{

    background:#003B33;

    padding:20px 25px;

}

.workbench-header h2{

    color:#fff;

    font-size:28px;

    margin-bottom:6px;

}

.workbench-header p{

    color:#fff;

    opacity:.90;

    font-size:15px;

}

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

.progress-area{

    padding:20px 25px;

    background:#FFF8E8;

}

.progress-text{

    font-weight:700;

    color:#003B33;

    margin-bottom:12px;

}

.progress-bar{

    width:100%;

    height:8px;

    background:#ddd;

    border-radius:20px;

}

.progress-fill{

    width:16.66%;

    height:100%;

    background:#B87809;

    border-radius:20px;

}

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

.workbench-card{

    box-sizing:border-box;

    width:100%;

}

.enquiry-section-heading{

    background:#003B33;

    color:#fff;

    padding:12px 20px;

    border-radius:6px;

    font-size:20px;

    font-weight:700;

    margin-bottom:25px;

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    font-weight:600;

    color:#003B33;

}

.form-group input,

.form-group select{

    height:46px;

    border:1px solid #d5d5d5;

    border-radius:6px;

    padding:0 14px;

    font-size:15px;

}

.mobile-box{

    display:flex;

    gap:10px;

}

.country-code{

    width:95px;

}

.validation-message{

    color:#cc0000;

    margin-top:6px;

    font-size:12px;

}

.step-buttons{

    margin-top:35px;

    text-align:right;

}

.next-btn{

    background:#B87809;

    color:#fff;

    border:none;

    padding:14px 36px;

    border-radius:6px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

}




/*==========================================================
STEP 2 : PROCUREMENT SUMMARY
==========================================================*/

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

.section-note{

    margin:25px 0 35px;

    padding:16px 20px;

    background:#FFF8E8;

    border-left:5px solid #B87809;

    color:#555555;

    font-size:15px;

    line-height:1.8;

    border-radius:6px;

}

/*==========================================================
FORM SUBHEADINGS
==========================================================*/

.form-subheading{

    margin:40px 0 20px;

    padding-bottom:10px;

    border-bottom:2px solid #E8E8E8;

    color:#003B33;

    font-size:20px;

    font-weight:700;

    letter-spacing:.3px;

}

/*==========================================================
STANDARD 2-COLUMN GRID
==========================================================*/

.form-grid{

    display:grid;

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

    gap:22px 25px;

}

/*==========================================================
FULL WIDTH
==========================================================*/

.form-group.full-width{

    grid-column:1 / -1;

}

/*==========================================================
FORM GROUP
==========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    color:#003B33;

    font-size:15px;

    font-weight:600;

}

/*==========================================================
INPUTS
==========================================================*/

.form-group input,

.form-group select{

    width:100%;

    height:48px;

    padding:0 14px;

    border:1px solid #D7D7D7;

    border-radius:6px;

    background:#FFFFFF;

    font-size:15px;

    transition:.30s;

    box-sizing:border-box;

}

.form-group input:focus,

.form-group select:focus{

    border-color:#B87809;

    outline:none;

    box-shadow:0 0 0 3px rgba(184,120,9,.12);

}


/*==========================================================
TEXTAREA
==========================================================*/

.form-group textarea{

    width:100%;

    min-height:280px;

    padding:15px;

    border:1px solid #D7D7D7;

    border-radius:6px;

    font-size:15px;

    font-family:inherit;

    line-height:1.7;

    resize:vertical;

    box-sizing:border-box;

}

.form-group textarea:focus{

    border-color:#B87809;

    outline:none;

    box-shadow:0 0 0 3px rgba(184,120,9,.12);

}



/*==========================================================
BUTTON AREA
==========================================================*/

.step-buttons{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:40px;

}

/*==========================================================
PREVIOUS BUTTON
==========================================================*/

.prev-btn{

    background:#FFFFFF;

    color:#003B33;

    border:2px solid #003B33;

    padding:14px 34px;

    border-radius:6px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.prev-btn:hover{

    background:#003B33;

    color:#FFFFFF;

}

/*==========================================================
NEXT BUTTON
==========================================================*/

.next-btn{

    background:#B87809;

    color:#FFFFFF;

    border:none;

    padding:14px 36px;

    border-radius:6px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.next-btn:hover{

    background:#D18A10;

}

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

@media (max-width:992px){

    .form-grid{

        grid-template-columns:1fr;

    }

    .form-group.full-width{

        grid-column:auto;

    }

    .step-buttons{

        flex-direction:column;

        gap:15px;

    }

    .prev-btn,

    .next-btn{

        width:100%;

    }

}

/*==========================================================
RIGHT COLUMN
==========================================================*/

.procurement-right{

    width:320px;

    display:flex;

    flex-direction:column;

    gap:22px;

    align-self:start;

    position:sticky;

    top:120px;

}

.enquiry-info-card{

    background:#FFFFFF;

    border:1px solid #E5E5E5;

    border-radius:10px;

    padding:24px;

}

.enquiry-info-card.primary{

    background:#003B33;

    color:#FFFFFF;

}

.enquiry-info-card h3{

    margin:0 0 20px;

    color:#003B33;

    font-size:24px;

    font-weight:700;

}

.enquiry-info-card.primary h3{

    color:#FFFFFF;

}

.info-item{

    display:flex;

    gap:14px;

    margin-bottom:18px;

}

.info-icon{

    width:42px;

    height:42px;

    border:1px solid #B87809;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#B87809;

    flex-shrink:0;

}

.info-item h4{

    margin:0 0 4px;

    font-size:16px;

    color:#D8A03A;

}

.info-item p{

    margin:0;

    font-size:14px;

    line-height:1.6;

}

.enquiry-info-card p{

    line-height:1.8;

    color:#555;

}




/*==========================================================
  RIGHT COLUMN — COMPACT HEIGHT OPTIMIZATION
  IMPORTANT:
  This block affects ONLY the RIGHT COLUMN.
  PROCUREMENT ENQUIRY WORKBENCH is NOT affected.
==========================================================*/

.procurement-right{
    gap:11px;
}


/*----------------------------------------------------------
  ALL RIGHT-COLUMN CARDS
----------------------------------------------------------*/

.procurement-right .enquiry-info-card{
    padding:14px 16px;
}


/*----------------------------------------------------------
  RIGHT-COLUMN CARD HEADINGS
----------------------------------------------------------*/

.procurement-right .enquiry-info-card h3{
    margin:0 0 9px;
    font-size:20px;
    line-height:1.2;
}


/*----------------------------------------------------------
  WHY SUBMIT — INFORMATION ITEMS
----------------------------------------------------------*/

.procurement-right .info-item{
    gap:9px;
    margin-bottom:8px;
}


/*----------------------------------------------------------
  RIGHT-COLUMN ICONS
----------------------------------------------------------*/

.procurement-right .info-icon{
    width:34px;
    height:34px;
    flex-shrink:0;
}


/*----------------------------------------------------------
  INFORMATION ITEM HEADINGS
----------------------------------------------------------*/

.procurement-right .info-item h4{
    margin:0 0 1px;
    font-size:14px;
    line-height:1.25;
}


/*----------------------------------------------------------
  INFORMATION ITEM TEXT
----------------------------------------------------------*/

.procurement-right .info-item p{
    font-size:12.5px;
    line-height:1.35;
}


/*----------------------------------------------------------
  WHY SUBMIT — PURE WHITE BODY TEXT
----------------------------------------------------------*/

.procurement-right .enquiry-info-card.primary .info-item p{
    color:#FFFFFF;
}


/*----------------------------------------------------------
  CONFIDENTIALITY & IMPORTANT NOTE TEXT
----------------------------------------------------------*/

.procurement-right .enquiry-info-card > p{
    margin:0 0 6px;
    font-size:13px;
    line-height:1.45;
}


/*----------------------------------------------------------
  REMOVE FINAL PARAGRAPH BOTTOM SPACE
----------------------------------------------------------*/

.procurement-right .enquiry-info-card > p:last-child{
    margin-bottom:0;
}


/*----------------------------------------------------------
  RESPONSIVE SAFETY
----------------------------------------------------------*/

@media(max-width:992px){

    .procurement-right{
        width:100%;
        gap:11px;
        position:static;
    }

    .procurement-right .enquiry-info-card{
        padding:16px;
    }

}

/*----------------------------------------------------------
  CONFIDENTIALITY — LIGHT BLUE
----------------------------------------------------------*/

.procurement-right .enquiry-info-card:nth-of-type(2){

    background:#EEF7FC;

    border:1px solid #C9E3F2;

}


/*----------------------------------------------------------
  IMPORTANT NOTE — LIGHT RED
----------------------------------------------------------*/

.procurement-right .enquiry-info-card:nth-of-type(3){

    background:#FFF2F2;

    border:1px solid #F0CACA;

}

/*==========================================================
  RIGHT COLUMN — COMPACT HEIGHT OPTIMIZATION ENDS HERE
==========================================================*/


/*==========================================================
  WHAT HAPPENS NEXT?
  APPROVED PROCESS DESIGN
  OUTSIDE PROCUREMENT WORKBENCH
==========================================================*/

.what-happens-next{

    background:#F6F8FB;

    padding:10px 0 10px;

}


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

.next-section-heading{

    text-align:center;

    margin-bottom:28px;

}

.next-section-heading h2{

    margin:0;

    color:#0B6D55;

    font-size:34px;

    font-weight:700;

    letter-spacing:.7px;

}


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

.next-heading-line{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:9px;

}

.next-heading-line span{

    display:block;

    width:95px;

    height:2px;

    background:#D7A63D;

}

.next-heading-line b{

    display:block;

    color:#D7A63D;

    font-size:12px;

    line-height:1;

}


/*==========================================================
  PROCESS ROW
==========================================================*/

.next-steps-process{

    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        28px
        minmax(0,1fr)
        28px
        minmax(0,1fr)
        28px
        minmax(0,1fr)
        28px
        minmax(0,1fr)
        28px
        minmax(0,1fr);

    align-items:center;

}


/*==========================================================
  STEP WRAPPER
==========================================================*/

.next-step-wrapper{

    min-width:0;

}


/*==========================================================
  PROCESS CARD
==========================================================*/

.next-step-card{

    position:relative;

    width:100%;

    min-height:190px;

    box-sizing:border-box;

    background:#FFFFFF;

    border:1px solid #E5E0D4;

    border-radius:10px;

    padding:25px 12px 16px;

    text-align:center;

    box-shadow:0 6px 18px rgba(0,0,0,.07);

    transition:transform .3s ease,
               box-shadow .3s ease;

}


/*==========================================================
  STEP NUMBER
==========================================================*/

.next-step-number{

    position:absolute;

    top:-13px;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#004D43;

    color:#FFFFFF;

    border:2px solid #D7A63D;

    border-radius:6px;

    font-size:12px;

    font-weight:700;

    line-height:1;

    z-index:5;

}


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

.next-step-image{

    width:70px;

    height:70px;

    margin:0 auto 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#FFF8E8;

    border:2px solid #D7A63D;

    overflow:hidden;

}


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

.next-step-image img{

    width:58px;

    height:58px;

    display:block;

    object-fit:contain;

}


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

.next-step-card h3{

    margin:0 0 9px;

    color:#004D43;

    font-size:14px;

    font-weight:700;

    line-height:1.3;

    text-transform:uppercase;

}


/*==========================================================
  DESCRIPTION
==========================================================*/

.next-step-card p{

    margin:0;

    color:#555555;

    font-size:12px;

    line-height:1.5;

}


/*==========================================================
  PROCESS ARROWS
==========================================================*/

.next-step-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    color:#D7A63D;

    font-size:28px;

    font-weight:700;

    line-height:1;

    user-select:none;

}


/*==========================================================
  CARD HOVER
==========================================================*/

.next-step-card:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 28px rgba(0,0,0,.11);

}


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

@media(max-width:1100px){

    .next-steps-process{

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

        gap:30px 22px;

    }

    .next-step-arrow{

        display:none;

    }

}


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

@media(max-width:650px){

    .what-happens-next{

        padding:35px 0 40px;

    }

    .next-section-heading{

        margin-bottom:24px;

    }

    .next-section-heading h2{

        font-size:28px;

    }

    .next-heading-line span{

        width:65px;

    }

    .next-steps-process{

        grid-template-columns:1fr 1fr;

        gap:28px 14px;

    }

    .next-step-card{

        min-height:190px;

    }

}


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

@media(max-width:430px){

    .next-steps-process{

        grid-template-columns:1fr;

        gap:25px;

    }

}







/*==========================================================
READY TO START CTA
===========================================================*/

.ready-start-section{
    width:100%;
    margin-top:10px;
    margin-bottom:18px;
}

.ready-start-container{
    width:100%;
    max-width:1400px;
    min-height:120px;
    margin:0 auto;

    display:grid;
    grid-template-columns:240px 1fr 130px;
    align-items:center;

    background:#003B33;
    border-radius:8px;
    overflow:hidden;

    position:relative;
}


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

.ready-start-image{
    width:100%;
    height:120px;
    overflow:hidden;
}

.ready-start-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}


/*==========================================================
CENTER CONTENT
===========================================================*/

.ready-start-content{
    padding:18px 28px;
}

.ready-start-content h2{
    margin:0 0 4px;

    color:#FFFFFF;

    font-size:24px;
    line-height:1.15;
    font-weight:700;
}

.ready-start-content p{
    margin:0 0 14px;

    color:#FFFFFF;

    font-size:14px;
    line-height:1.4;
}


/*==========================================================
BUTTONS
===========================================================*/

.ready-start-buttons{
    display:flex;
    align-items:center;
    gap:14px;
}

.ready-start-submit,
.ready-start-contact{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:38px;

    padding:9px 18px;

    border-radius:5px;

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

    text-decoration:none;

    transition:all .25s ease;
}

.ready-start-submit{
    background:#B87809;
    color:#FFFFFF;
    border:1px solid #B87809;
}

.ready-start-submit:hover{
    background:#D18A10;
    border-color:#D18A10;
    color:#FFFFFF;
}

.ready-start-contact{
    background:transparent;
    color:#FFFFFF;
    border:1px solid #B87809;
}

.ready-start-contact:hover{
    background:#B87809;
    color:#FFFFFF;
}

.ready-start-submit span,
.ready-start-contact span{
    font-size:16px;
    line-height:1;
}


/*==========================================================
RIGHT BRAND EMBLEM
===========================================================*/

.ready-start-emblem{
    height:100%;

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

    padding:10px;
}

.ready-start-emblem img{
    width:92px;
    height:92px;

    display:block;

    object-fit:contain;
}


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

@media (max-width:992px){

    .ready-start-container{
        grid-template-columns:200px 1fr 110px;
    }

    .ready-start-content{
        padding:16px 20px;
    }

    .ready-start-content h2{
        font-size:21px;
    }

    .ready-start-content p{
        font-size:13px;
    }

    .ready-start-emblem img{
        width:78px;
        height:78px;
    }

}


@media (max-width:768px){

    .ready-start-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .ready-start-image{
        height:150px;
    }

    .ready-start-content{
        padding:20px;
    }

    .ready-start-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .ready-start-emblem{
        padding:15px;
    }

}


@media (max-width:480px){

    .ready-start-buttons{
        flex-direction:column;
        width:100%;
    }

    .ready-start-submit,
    .ready-start-contact{
        width:100%;
    }

}


/*==========================================================
  FINAL NAVIGATION CARDS
  SUBMIT ENQUIRY PAGE
  APPROVED DESIGN
  OUTSIDE PROCUREMENT ENQUIRY WORKBENCH
===========================================================*/

.submit-final-links {
    width: 100%;
    background: #ffffff;
    padding: 10px 0 10px;
}


/*==========================================================
  FOUR-CARD CONTAINER
===========================================================*/

.submit-final-links-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

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

    gap: 12px;

    padding: 0 0;
}


/*==========================================================
  INDIVIDUAL CARD
===========================================================*/

.submit-final-card {
    display: flex;
    align-items: center;

    min-height: 92px;

    padding: 10px 12px;

    background: #FFF8E8;

    border: 1px solid #e4e8e6;
    border-radius: 5px;

    text-decoration: none;

    box-sizing: border-box;

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


/*==========================================================
  CARD HOVER
===========================================================*/

.submit-final-card:hover {
    transform: translateY(-2px);

    border-color: #c58a16;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


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

.submit-final-card-image {
    width: 54px;
    min-width: 54px;

    height: 54px;

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

    margin-right: 10px;
}


.submit-final-card-image img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    display: block;
}


/*==========================================================
  CARD CONTENT
===========================================================*/

.submit-final-card-content {
    flex: 1;

    min-width: 0;
}


.submit-final-card-content h3 {
    margin: 0 0 4px;

    color: #0b5d55;

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

    line-height: 1.2;

    text-transform: uppercase;
}


.submit-final-card-content p {
    margin: 0 0 4px;

    color: #555555;

    font-size: 11px;
    line-height: 1.35;
}


/*==========================================================
  EXPLORE LINK
===========================================================*/

.submit-final-card-link {
    display: inline-block;

    color: #c58a16;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;
}


.submit-final-card:hover .submit-final-card-link {
    color: #a96f00;
}


/*==========================================================
  RESPONSIVE — TABLET
===========================================================*/

@media (max-width: 900px) {

    .submit-final-links-container {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
    }

}


/*==========================================================
  RESPONSIVE — MOBILE
===========================================================*/

@media (max-width: 600px) {

    .submit-final-links {
        padding: 10px 0 15px;
    }


    .submit-final-links-container {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .submit-final-card {
        min-height: 82px;
    }

}





/*==========================================================
    CAREER PAGE
    HERO BANNER
==========================================================*/

.career-hero {

    width: 100%;
    background: #f7f7f5;
    padding: 0;
    box-sizing: border-box;
}


.career-hero-container {

    width: 100%;
    max-width: 1400px;
    height: 550px;
    max-height: 550px;

    margin: 0 auto;

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

    overflow: hidden;

    border-radius: 0;
}


/*==========================================================
    LEFT COLUMN
==========================================================*/

.career-hero-content {

    background: #003d2f;

    color: #ffffff;

    padding: 10px 10px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.career-eyebrow {

    display: inline-block;

    color: var(--gold);

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

    letter-spacing: 1.5px;

    margin-bottom: 12px;
}


.career-title {

    margin: 0 0 14px;

    font-size: 42px;
    line-height: 1.12;

    font-weight: 800;

    color: #ffffff;
}


.career-title span {

    color: var(--gold);
}


.career-subtitle {

    margin: 0 0 18px;

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

    font-weight: 700;

    font-style: italic;

    color: #ffffff;
}


.career-divider {

    width: 60px;
    height: 3px;

    background: var(--gold);

    margin: 0 0 22px;
}


.career-hero-content > p {

    margin: 0 0 18px;

    font-size: 16px;
    line-height: 1.65;

    color: #ffffff;
}


/*==========================================================
    CAREER HIGHLIGHTS
==========================================================*/

.career-highlights {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px 24px;

    margin-top: 8px;
}


.career-highlight {

    display: flex;

    align-items: center;

    gap: 12px;

    padding-top: 10px;

    border-top: 1px solid rgba(212, 160, 23, 0.55);
}


.career-highlight-icon {

    width: 34px;
    min-width: 34px;
    height: 34px;

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

    color: var(--gold);

    font-size: 25px;

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

    border-radius: 50%;

    box-sizing: border-box;
}


.career-highlight h3 {

    margin: 0 0 3px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.2;

    font-weight: 700;
}


.career-highlight p {

    margin: 0;

    color: #ffffff;

    font-size: 13px;
    line-height: 1.35;
}


/*==========================================================
    RIGHT COLUMN — CAREER IMAGE
==========================================================*/

.career-hero-image {

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 520px;

    overflow: hidden;

    background: #0b2635;
}


.career-hero-image img {

    width: 200%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: right center;

    display: block;
}

/*==========================================================
CAREERS PAGE
===========================================================*/

.careers-page {
    width: 100%;
    padding: 5px 0 0 0;
    background: #ffffff;
}

.careers-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.careers-page-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/*==========================================================
STEP 4 TO STEP 6
==========================================================*/

.checkbox-group{

    margin-bottom:18px;

    font-size:15px;

    line-height:1.8;

}

.checkbox-group input{

    margin-right:10px;

}

.review-box{

    background:#FFF8E8;

    border-left:5px solid #B87809;

    padding:22px;

    border-radius:8px;

    margin-bottom:30px;

}

.review-box h3{

    color:#003B33;

    margin-bottom:15px;

}

.review-box ul{

    margin:0;

    padding-left:22px;

}

.review-box li{

    margin-bottom:10px;

}

.captcha-box{

    height:90px;

    border:2px dashed #CCCCCC;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#777777;

    margin-bottom:35px;

}

.submit-btn{

    background:#003B33;

    color:#FFFFFF;

    border:none;

    padding:15px 45px;

    border-radius:6px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.submit-btn:hover{

    background:#005247;

}

/*==================================================
WORKBENCH WIZARD
==================================================*/

.workbench-card{

    display:none;

    box-sizing:border-box;

    width:100%;

}

.workbench-card.active-step{

    display:block;

}

/*==========================================================
UPLOAD MANAGER
==========================================================*/

.upload-drop-zone{

    border:2px dashed #C7A23A;

    border-radius:10px;

    background:#FFFDF7;

    padding:35px 25px;

    text-align:center;

    transition:.25s;

    margin-bottom:20px;

}

.upload-drop-zone:hover{

    background:#FFF7E5;

    border-color:#9A6A00;

}

.upload-icon{

    font-size:48px;

    margin-bottom:12px;

}

.upload-title{

    font-size:20px;

    font-weight:700;

    color:#004D43;

    margin-bottom:10px;

}

.upload-or{

    margin:18px 0;

    color:#777;

    font-weight:600;

}

.browse-files-btn{

    background:#004D43;

    color:#fff;

    border:none;

    padding:12px 30px;

    border-radius:6px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

}

.browse-files-btn:hover{

    background:#006A5D;

}

.upload-drop-zone.drag-over{

    background:#F4FBF8;

    border-color:#004D43;

    transform:scale(1.01);

    box-shadow:0 0 15px rgba(0,77,67,.18);

}

/*==========================================================
UPLOADED FILES
==========================================================*/

.uploaded-file{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 14px;

    margin-top:8px;

    border:1px solid #E3E3E3;

    border-radius:6px;

    background:#FFFFFF;

}

.file-icon{

    font-size:18px;

}

.file-name{

    flex:1;

    color:#004D43;

    font-weight:600;

    word-break:break-all;

}

/*==========================================================
FILE CATEGORY
==========================================================*/

.file-category{

    display:block;

    color:#8A6D1F;

    font-size:12px;

    font-weight:600;

    margin-top:2px;

}



.file-size{

    color:#777;

    font-size:13px;

    min-width:70px;

    text-align:right;

}

.remove-file{

    background:#C62828;

    color:#fff;

    border:none;

    border-radius:4px;

    cursor:pointer;

    padding:4px 8px;

    font-size:13px;

}

.remove-file:hover{

    background:#A61B1B;

}

/*==========================================================
UPLOAD MESSAGES
==========================================================*/

#uploadMessages{

    margin-top:12px;

}

.upload-message{

    padding:10px 14px;

    margin-top:8px;

    border-radius:6px;

    font-size:14px;

}

.upload-error{

    background:#FDECEC;

    color:#B71C1C;

    border:1px solid #F5C2C7;

}

.upload-success{

    background:#EDF8ED;

    color:#1B5E20;

    border:1px solid #C8E6C9;

}

/*==========================================================
DECLARATION & CONSENT
==========================================================*/

.checkbox-group{

    margin-bottom:18px;

}

.checkbox-group label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    line-height:1.6;

    cursor:pointer;

}

.checkbox-group input[type="checkbox"]{

    margin-top:4px;

    transform:scale(1.15);

    accent-color:#004D43;

}

.policy-link{

    color:#004D43;

    font-weight:600;

    text-decoration:none;

}

.policy-link:hover{

    color:#C7A23A;

    text-decoration:underline;

}

/*==========================================================
FINAL REVIEW
==========================================================*/

.review-box{

    background:#FFFDF8;

    border:1px solid #E8D8A8;

    border-radius:10px;

    padding:25px;

    margin-bottom:25px;

}

.review-box h3{

    color:#004D43;

    margin-bottom:18px;

    font-size:20px;

}

.review-item{

    padding:12px 0;

    border-bottom:1px solid #EEEEEE;

    font-size:15px;

    color:#333333;

}


.review-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-icon {
    flex: 0 0 22px;
}

.check-label {
    flex: 0 0 260px;
}

.check-status {
    font-weight: 600;
}



.review-item:last-child{

    border-bottom:none;

}

/*==========================================================
REVIEW SUMMARY
==========================================================*/

.review-summary{

    margin:20px 0;

    padding:18px;

    background:#FFFDF8;

    border:1px solid #E8D9B5;

    border-radius:8px;

}

.review-title{

    font-size:16px;

    font-weight:700;

    color:#004D43;

    margin-bottom:15px;

    padding-bottom:8px;

    border-bottom:1px solid #E8D9B5;

}

.review-grid{

    display:grid;

    grid-template-columns:220px 1fr;

    row-gap:10px;

    column-gap:20px;

}

.review-label{

    font-weight:600;

    color:#555;

}

.review-value{

    color:#004D43;

    word-break:break-word;

}

/*=========================================================
    FINAL RESPONSIVE FOUNDATION
    SURGERY #1
    MOBILE + SMALL TABLET ONLY
    DESKTOP DESIGN PROTECTED
=========================================================*/

@media (max-width: 768px){

    .container{
        width:100%;
        max-width:100%;
        padding-left:16px;
        padding-right:16px;
    }

    img{
        max-width:100%;
    }

}

@media (max-width: 480px){

    .container{
        padding-left:14px;
        padding-right:14px;
    }

}

/*=========================================================
    FINAL RESPONSIVE HEADER
    SURGERY #2A
    MOBILE + SMALL TABLET
    DESKTOP DESIGN PROTECTED
=========================================================*/

@media (max-width: 768px){

    #top-bar{
        padding:8px 0 4px;
    }

    .topbar-container{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:14px;
        padding:14px 16px 16px;
        text-align:center;
    }

    .logo{
        flex:0 0 auto;
        width:100%;
    }

    .logo img{
        width:200px;
        max-width:80%;
        margin:0 auto;
    }

    .top-info{
        width:100%;
        flex:0 0 auto;
    }

    .info-title{
        margin-bottom:6px;
        font-size:15px;
    }

    .info-text{
        font-size:14px;
        line-height:22px;
    }

    .divider{
        display:none;
    }

    .header-button{
        width:100%;
        flex:0 0 auto;
    }

    .header-button a{
        display:inline-block;
        padding:12px 24px;
        font-size:14px;
    }

}

/*=========================================================
    FINAL RESPONSIVE ABOUT US HERO
    SURGERY #3
    MOBILE + SMALL TABLET
    DESKTOP DESIGN PROTECTED
=========================================================*/

@media (max-width: 768px){

    /*-----------------------------------------------------
        ABOUT HERO - STACK TEXT ABOVE IMAGE
    -----------------------------------------------------*/

    .about-hero-grid{
        grid-template-columns:1fr;
        min-height:auto;
    }

    /*-----------------------------------------------------
        LEFT TEXT PANEL
    -----------------------------------------------------*/

    .about-left{
        width:100%;
        min-height:auto;
    }

    .about-left-content{
        width:100%;
        max-width:100%;
        padding:42px 18px 44px;
    }

    .about-left-content h1{
        font-size:38px;
        line-height:1.05;
        margin:0 0 24px;
    }

    .about-left-content h2{
        font-size:20px;
        line-height:1.4;
        margin:0 0 32px;
    }

    .about-left-content p{
        font-size:16px;
        line-height:1.75;
        margin:20px 0;
    }

    .gold-line{
        width:120px;
        margin-bottom:26px;
    }

    /*-----------------------------------------------------
        RIGHT IMAGE PANEL
    -----------------------------------------------------*/

    .about-right{
        width:100%;
        min-height:320px;
        height:320px;
    }

    .about-right img{
        width:100%;
        height:320px;
        object-fit:cover;
        display:block;
    }

}


/*=========================================================
    ABOUT US HERO - SMALL PHONES
=========================================================*/

@media (max-width: 480px){

    .about-left-content{
        padding:34px 16px 38px;
    }

    .about-left-content h1{
        font-size:34px;
        line-height:1.05;
        margin-bottom:22px;
    }

    .about-left-content h2{
        font-size:19px;
        line-height:1.4;
        margin-bottom:28px;
    }

    .about-left-content p{
        font-size:15.5px;
        line-height:1.75;
    }

    .about-right{
        min-height:280px;
        height:280px;
    }

    .about-right img{
        height:280px;
    }

}

/*=========================================================
    FINAL RESPONSIVE NAVIGATION
    SURGERY #4
    MOBILE + SMALL TABLET
    DESKTOP DESIGN PROTECTED
=========================================================*/

/* Hidden on desktop */
.mobile-menu-toggle{
    display:none;
}


@media (max-width:768px){

    #navbar{
        padding:0;
    }

    #navbar .container{
        padding-left:0;
        padding-right:0;
    }

    /*-----------------------------------------------------
        MOBILE MENU BUTTON
    -----------------------------------------------------*/

    .mobile-menu-toggle{
        width:100%;
        min-height:54px;

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

        padding:0 18px;

        background:#0b2239;
        color:#ffffff;

        border:0;
        cursor:pointer;

        font-family:inherit;
        font-size:15px;
        font-weight:700;
        letter-spacing:.6px;
    }

    .mobile-menu-icon{
        color:#d9a441;
        font-size:24px;
        line-height:1;
    }


    /*-----------------------------------------------------
        MENU CLOSED BY DEFAULT
    -----------------------------------------------------*/

    .nav-menu{
        display:none;
        width:100%;
        padding:8px 0 12px;
        margin:0;

        flex-direction:column;
        align-items:stretch;

        gap:0;
    }


    /*-----------------------------------------------------
        MENU OPEN
    -----------------------------------------------------*/

    .nav-menu.mobile-open{
        display:flex;
    }


    /*-----------------------------------------------------
        MOBILE MENU ITEMS
    -----------------------------------------------------*/

    .nav-menu li{
        width:100%;
        margin:0;
        padding:0;

        text-align:left;
        white-space:normal;
    }

    .nav-menu li a{
        display:block;
        width:100%;

        padding:12px 18px;

        font-size:13px;
        line-height:1.35;

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

}

/*=========================================================
    UNIVERSAL MOBILE FOOTER
    SURGERY #4C
    INNER PAGES
    HOME / INDEX DESKTOP DESIGN PROTECTED
=========================================================*/

@media (max-width: 768px){

    /*-----------------------------------------
        FOOTER MAIN CONTAINER
    -----------------------------------------*/

    #footer .container{
        width:100%;
        max-width:100%;
        padding:18px 16px;
        box-sizing:border-box;
    }

    /*-----------------------------------------
        FOOTER COLUMNS
        STACK VERTICALLY ON MOBILE
    -----------------------------------------*/

    .footer-grid{
        grid-template-columns:1fr;
        gap:24px;
        width:100%;
    }

    /*-----------------------------------------
        FOOTER ABOUT
    -----------------------------------------*/

    .footer-about{
        width:100%;
        text-align:center;
    }

    .footer-about img{
        max-width:200px;
        width:100%;
        height:auto;
        margin:0 auto 14px;
    }

    .footer-about p{
        max-width:100%;
        margin:0 auto;
        text-align:center;
        line-height:1.6;
    }

    /*-----------------------------------------
        FOOTER COLUMNS
    -----------------------------------------*/

    .footer-column{
        width:100%;
        min-width:0;
        padding:0;
        text-align:center;
    }

    .footer-column h3,
    .footer-column h4{
        text-align:center;
    }

    .footer-column ul{
        width:100%;
    }

    .footer-column li{
        margin-bottom:7px;
    }

    .footer-column a{
        white-space:normal;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    /*-----------------------------------------
        FOOTER SOCIAL
    -----------------------------------------*/

    .footer-social{
        justify-content:center;
        flex-wrap:wrap;
    }

    /*-----------------------------------------
        FOOTER BOTTOM
    -----------------------------------------*/

    #footer-bottom .container{
        width:100%;
        max-width:100%;
        padding:16px 14px;
        box-sizing:border-box;
    }

    .footer-bottom-content{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:12px;
    }

    .footer-contact{
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        white-space:normal;
    }

    .footer-contact span{
        white-space:normal;
        justify-content:center;
        text-align:center;
    }

}

@media (max-width: 480px){

    #footer .container{
        padding:16px 14px;
    }

    .footer-grid{
        gap:20px;
    }

    .footer-column h3,
    .footer-column h4{
        font-size:16px;
    }

    .footer-column a{
        font-size:14px;
        line-height:22px;
    }

    .footer-bottom-content{
        gap:10px;
    }

    .footer-contact{
        flex-direction:column;
        gap:7px;
    }

}



/* ==========================================================
   WHY MOON SHINE GROUP
   MOBILE RESPONSIVE — FINAL FIX
   ========================================================== */

@media (max-width: 768px) {

    /* ======================================================
       1. WHY MOON SHINE GROUP — HERO
       Desktop:
       LEFT | GOLD DIVIDER | RIGHT IMAGE

       Mobile:
       LEFT
       RIGHT IMAGE
       ====================================================== */

    #why-hero {
        width: 100%;
        overflow: hidden;
    }

    #why-hero > .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .why-hero-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        min-height: 0 !important;
        gap: 0 !important;
    }

    .why-hero-left {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding: 55px 24px !important;
        min-height: 430px;
    }

    .why-left-content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 !important;
    }

    .why-left-content h1 {
        font-size: 42px !important;
        line-height: 1.12 !important;
    }

    .why-left-content p {
        max-width: 100% !important;
        font-size: 20px !important;
        line-height: 1.55 !important;
    }

    .hero-divider {
        display: none !important;
    }

    .why-hero-right {
        width: 100% !important;
        min-width: 0 !important;
        height: 420px !important;
        min-height: 420px !important;
        overflow: hidden;
    }

    .why-hero-right img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block;
    }


    /* ======================================================
       2. WHY EVEN EXPERIENCED PROCUREMENT ORGANIZATIONS
       ====================================================== */

    .why-benefits {
        width: 100%;
        box-sizing: border-box;
    }

    .why-benefits > .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .section-title {
        width: 100%;
        box-sizing: border-box;
    }

    .section-title h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
    }

    .customer-benefits-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        gap: 30px;
    }

    .customer-benefit-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
    }


    /* ======================================================
       3. CUSTOMER PHILOSOPHY — THREE CARDS
       
       Desktop:
       CARD 1 | CARD 2 | CARD 3

       Mobile:
       CARD 1
       CARD 2
       CARD 3
       ====================================================== */

    .customer-philosophy {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .customer-philosophy > .container {
        width: 100%;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 0 12px;
    }

    .philosophy-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 22px !important;
        box-sizing: border-box;
    }

    .philosophy-card {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: auto !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .card-title {
        display: block !important;
        width: fit-content;
        max-width: calc(100% - 20px);
        box-sizing: border-box;
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 16px 0 22px 12px !important;
        padding: 13px 22px 13px 16px !important;
    }

    .card-content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 18px 40px !important;
    }

    .card-content p {
        width: 100%;
        box-sizing: border-box;
        font-size: 17px !important;
        line-height: 1.75 !important;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .philosophy-list {
        width: 100%;
        box-sizing: border-box;
    }

    .philosophy-list li {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .card-corner-icon {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin: 20px auto 0;
    }
}


/* ==========================================================
   SMALL PHONES — 375px / 360px
   ========================================================== */

@media (max-width: 480px) {

    .why-hero-left {
        padding: 48px 20px !important;
        min-height: 420px;
    }

    .why-left-content h1 {
        font-size: 40px !important;
    }

    .why-left-content p {
        font-size: 19px !important;
        line-height: 1.55 !important;
    }

    .why-hero-right {
        height: 360px !important;
        min-height: 360px !important;
    }

    .section-title h2 {
        font-size: 27px !important;
    }

    .customer-philosophy > .container {
        padding: 0 10px;
    }

    .philosophy-grid {
        gap: 18px !important;
    }

    .card-title {
        font-size: 17px !important;
    }

    .card-content p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
}