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


/*=========================================================
    RESET
=========================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:100;
    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;

}

section{

    position:relative;

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

#top-bar{

    background:#08131d;

    padding:12px 0 8px;

}

.topbar-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:36px;

}

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

.logo{

    flex:0 0 235px;

}

.logo img{

    width:215px;

    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:#0b1b2b;

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

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

    padding:0;

}

.nav-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    column-gap:22px;

    row-gap:6px;

    padding:12px 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;

}

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

#hero{

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

    min-height:600px;

    position:relative;

}

.hero-overlay{

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

    min-height:600px;

}

.hero-container{

    display:flex;

    align-items:flex-start;

    min-height:600px;

    padding-top:40px;

}

.hero-content{

    width:50%;

    color:#fff;

}

.hero-content h1{

    margin:0;

    font-size:38px;

    line-height:66px;

    font-weight:800;

}

.hero-content span{

    color:#d6a347;

}

.hero-subtitle{

    margin-top:30px;

    font-size:24px;

    line-height:38px;

}

.hero-description{

    margin-top:26px;

    font-size:20px;

    line-height:36px;

     max-width:560px;

}



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

#feature-strip{

    background:#07131d;

    color:#fff;

    padding:28px 10;

}

.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:40px;

    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:70px;

    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:16px;

    min-height:60px;

}

.feature-strip-box p{

    color:#fff;

    font-size:15px;

    line-height:26px;

    margin:0;

}
.feature-strip-box strong{

    color:#d6a347;

    font-weight:600;

}

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

#commitment{

    background:#07131d;

    padding:20px 0;

    text-align:center;

}

#commitment h2{

    color:#d6a347;

    font-size:36px;

}

#commitment span{

    font-style:italic;

}



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

#hero-buttons{

    background:#07131d;

    padding-bottom:45px;

}

.button-row{

    display:flex;

    justify-content:center;

    gap:30px;

}

.gold-btn{

    background:#d6a347;

    color:#fff;

    padding:18px 42px;

    border-radius:5px;

    font-weight:700;

}

.outline-btn{

    border:2px solid #d6a347;

    color:#fff;

    padding:18px 42px;

    border-radius:5px;

    font-weight:700;

}
/*==================================================
WHO WE ARE
==================================================*/

#who-we-are{

    background:#ffffff;

    padding:40px 0 35px;

}

.who-container{

    display:grid;

    grid-template-columns:1fr 1.05fr;

    gap:30px;

    align-items:center;

}

.who-left h2{

    font-size:38px;

    margin-bottom:22px;

    color:#111;

    font-weight:800;

    line-height:48px;

}

.who-left h3{

    font-size:20px;

    line-height:30px;

    margin-bottom:18px;

    color:#111;

    font-weight:600;

}

.who-left ul{

    list-style:none;

}

.who-left li{

    position:relative;

    padding-left:34px;

    margin-bottom:18px;

    line-height:30px;

    color:#444;

    font-size:16px;

}

.who-left li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#d89b2b;

    font-size:20px;

    font-weight:bold;

}

.btn-dark{

    display:inline-block;

    margin-top:2px;

    background:#061d36;

    color:white;

    text-decoration:none;

    padding:16px 36px;

    border-radius:6px;

    font-size:15px;

    font-weight:700;

    transition:.3s;

}

.btn-dark:hover{

    background:#d89b2b;

}
/* Right Side */

.who-right img{

    width:100%;

    height:auto;

    display:block;

    overflow:hidden;

    border-radius:10px 10px 0 0;

}

.stats-box{

    display:grid;

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

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    background:#071c33;

    color:#ffffff;

    margin-top:-5px;

    padding:32px 10px;

    text-align:center;

    border-radius:0 0 8px 8px;

    overflow:hidden;

}

.who-right{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    overflow:hidden;

}
.stat{

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

    min-width:0;

    padding:0 4px;

    box-sizing:border-box;

}

.stat:last-child{

    border-right:none;

}

.stat h2{

    color:#d89b2b;

    font-size:48px;

    margin-bottom:12px;

    font-weight:700;

}

.stat p{

    font-size:17px;

    line-height:26px;

    font-weight:500;

    color:#ddd;

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

#why-customers{

    background:#ffffff;

    padding:10px 0;

}

#why-customers h2{

    text-align:center;

    font-size:38px;

    font-weight:800;

    line-height:50px;

    color:#111;

    margin-bottom: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;

    margin-bottom: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);

}

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

#business-features{

    background:#071b31;

    padding:70px 0;

}

.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
==================================================*/

#quick-access{

    background:#071b31;

    padding:0 0 75px;

}

.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:38px 28px;

    text-align:center;

    display:flex;

    flex-direction:column;

    transition:.30s;

}

.quick-box:hover{

    transform:translateY(-5px);

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

}

.quick-box img{

    width:72px;

    height:72px;

    object-fit:contain;

    margin:0 auto 22px;

}

.quick-box h3{

    color:#d89b2b;

    font-size:24px;

    font-weight:700;

    margin-bottom:20px;

}

.quick-box p{

    color:#d6d6d6;

    font-size:16px;

    line-height:30px;

    min-height:105px;

    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);

}

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

#footer{

    background:#08131d;

    padding:75px 0 55px;

}

.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:24px;

    display:block;

}

.footer-about p{

    color:#d8d8d8;

    font-size:16px;

    line-height:32px;

    max-width:320px;

}

.footer-column h4{

    color:#d89b2b;

    font-size:18px;

    font-weight:700;

    letter-spacing:.4px;

    margin-bottom:24px;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:14px;

}

.footer-column a{

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    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:44px;

    height:44px;

    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:#06111b;

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

    text-align:center;

    padding:26px 0;

}

.footer-slogan{

    color:#d89b2b;

    font-size:20px;

    font-style:italic;

    font-weight:600;

    letter-spacing:.3px;

    margin-bottom:10px;

}

#footer-bottom p:last-child{

    color:#cfcfcf;

    font-size:15px;

    letter-spacing:.2px;

}




/*==============================================================================
11. PAGE MODULES
==============================================================================*/


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

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

#about-hero{

    background:#ffffff;

    overflow:hidden;

    padding:0;

}

.about-hero-grid{

    display:grid;

    grid-template-columns:26% 74%;

    min-height:560px;

    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 30px; 

}

.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:24px;

    line-height:1.45;

    font-weight:700;

    color:#d7a63d;

    margin:0 0 28px;

}

.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:0;

}

/*=========================================================
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
==========================================================*/

#our-journey{
    background:#ffffff;
    padding:18px 0 35px;
}

.journey-heading{
    text-align:center;
    margin-bottom:15px;
}

.journey-heading h2{
    font-size:40px;
    font-weight:700;
    color:#08192d;
    letter-spacing:1px;
    margin:0;
}

.journey-row{
    display:grid;
    gap:40px;
    margin-bottom:70px;
}

.journey-row.top{
    grid-template-columns:repeat(5,1fr);
}

.journey-row.bottom{
    grid-template-columns:repeat(4,1fr);
    width:82%;
    margin:0 auto;
}


.journey-card{

    display:flex;

    align-items:center;

    gap:24px;

    background:#ffffff;

    padding:10px 12px;

    border-radius:16px;

    margin-bottom:14px;

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

    transition:.35s;

}

/* Timeline Line */



.journey-card:first-child::before{

    display:none;

}

/* Icon */

.journey-icon{

    width:84px;

    height:84px;

    margin:0 auto 24px;

    border-radius:50%;

    background:#08192d;

    border:4px solid #d7a63d;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:5;

}

.journey-icon img{

    width:42px;

    height:24px;

    object-fit:contain;

}

/* Year */

.journey-year{

    font-size:30px;

    font-weight:700;

    color:#08192d;

    margin-bottom:10px;

}

/* Heading */

.journey-title{

    font-size:20px;

    font-weight:700;

    color:#0b6d55;

    min-height:54px;

    margin-bottom:18px;

    line-height:1.3;

}

/* Description */

.journey-text{

    font-size:15px;

    color:#555;

    line-height:1.8;

}

/* Hover */

.journey-card{

    transition:.35s;

}

.journey-card:hover{

    transform:translateY(-8px);

}

.journey-card:hover .journey-icon{

    background:#0b6d55;

    transition:.35s;

}

/* Responsive */

@media(max-width:1200px){

    .journey-row.top{

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

    }

    .journey-row.bottom{

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

        width:100%;

    }

}

@media(max-width:900px){

    .journey-row.top,
    .journey-row.bottom{

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

        width:100%;

    }

}

@media(max-width:600px){

    #our-journey{

        padding:10px 0;

    }

    .journey-heading h2{

        font-size:34px;

    }

    .journey-row.top,
    .journey-row.bottom{

        grid-template-columns:1fr;

        gap:60px;

    }

    .journey-card::before{

        display:none;

    }

}

/*==========================================================
OUR JOURNEY
==========================================================*/

#our-journey{

    background:#f6f8fb;

    padding:2px 0;

}

/* Heading */

.journey-heading{

    text-align:center;

    margin-bottom:70px;

}

.journey-heading h2{

    font-size:40px;

    font-weight:700;

    color:#08192d;

    margin:0;

    letter-spacing:.5px;

}

/* Card */

.journey-card{

    display:flex;

    align-items:flex-start;

    gap:30px;

    background:#ffffff;

    padding:10px;

    border-radius:16px;

    margin-bottom:20px;

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

    transition:.35s;

}

.journey-card:hover{

    transform:translateY(-5px);

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

}

/* Image */

.journey-image{

    flex:0 0 165px;

    width:165px;

    height:110px;

    border-radius:10px;

    overflow:hidden;

    background:#edf1f5;

    border:1px solid #d9d9d9;

}

.journey-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:2px;

    display:block;

}

.journey-card:hover img{

    transform:scale(1.05);

}

/* Content */

.journey-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    text-align:left;

}

.journey-content h3{

    margin:0 0 8px;

    font-size:30px;

    line-height:1.1;

    font-weight:700;

    color:#08192d;

}

/* Gold Year */

.journey-year{

    color:#d7a63d;

    margin-right:8px;

}

.journey-content p{

    margin:0;

    font-size:18px;

    color:#555;

    line-height:1.65;

}

/* Responsive */

@media(max-width:992px){

    .journey-card{

        flex-direction:column;

    }

    .journey-image{

        width:100%;

        max-width:420px;

        flex:none;

        height:240px;

    }

}

@media(max-width:768px){

    .journey-heading h2{

        font-size:36px;

    }

    .journey-content h3{

        font-size:26px;

    }

}

@media(max-width:576px){

    #our-journey{

        padding:70px 0;

    }

    .journey-card{

        padding:22px;

    }

    .journey-content h3{

        font-size:22px;

    }

    .journey-content p{

        font-size:16px;

        line-height:1.8;

    }

}

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

#who-we-are{

    padding:5px 0;

    background:#fff;

}

.who-wrapper{

    display:grid;

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

    gap:35px;

    align-items:start;

}

.who-left h2{

    display:flex;

    align-items:center;

    gap:18px;

    font-size:30px;

    font-weight:700;

    color:#0d3d2d;

    margin-bottom:35px;

    letter-spacing:.5px;

}

.who-left h2 span{

    flex:1;

    height:2px;

    background:#d4a63f;

}

.who-left p{

    font-size:16px;

    line-height:1.95;

    color:#4b4b4b;

    margin-bottom:16px;

    text-align:justify;

}

/* RIGHT */

.who-right{

    text-align:center;

    min-width:0;

}

.who-right>img{

    width:100%;

    max-width:700px;

    margin-bottom:45px;

}

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

.who-features{

    display:grid;

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

    gap:26px;

    margin-top:22px;

}

.feature-box{

    text-align:center;

    padding:1px 5px;

}

/* Icon */

.feature-box img{

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

}

/* Heading */

.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 */

.feature-box p{

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

}

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

@media(max-width:992px){

    .who-wrapper{

        grid-template-columns:1fr;

    }

    .who-features{

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

        gap:35px;

    }

}

@media(max-width:600px){

    .who-left h2{

        font-size:30px;

    }

    .who-features{

        grid-template-columns:1fr;

    }

}


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

#founder-leadership{

    background:#ffffff;

    padding:5px 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:auto;

    display:block;

}

.founder-signature{

    text-align:center;

    padding:36px;

}

.founder-signature img{

    width:120px;

    margin:0 auto 8px;

}

.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:16px;

    color:#222;

    margin-bottom:22px;

    font-weight:700;

}

.founder-center p{

    font-size:14px;

    line-height:1.9;

    color:#555;

    text-align:justify;

    margin-bottom:18px;

}

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

.founder-quote{

    background:#063728;

    color:#ffffff;

    padding:16px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

/* Top Quote */

.quote-top{

    font-size:26px;

    color:#d4a03c;

    line-height:.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:72px;

    height:72px;

    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;

    }

}

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

#our-commitment{

    background:#053625;

    padding:8px 0 12px;

    color:#ffffff;

}

/*======================================================
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:23px;

    color:#ffffff;

    line-height:1.05;

}

/*======================================================
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 8px;

}

.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.18;

    font-weight:600;

    color:#ffffff;

}

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

.about-commitment-divider{

    width:100%;

    height:1px;

    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.65;

    color:#ffffff;

    margin:0 0 22px;

}

/*======================================================
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.65;

    color:#ffffff;

    margin:0 0 20px;

}

/*======================================================
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
==========================================================*/

#footer{

    background:#063628;

    color:#ffffff;

    margin-top:0;

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

}

/*==========================================================
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;

}

/*==========================================================
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 6px;

    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:0.61;

    transition:.30s;

}

.footer-column a:hover{

    color:#d4a03c;

}

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

.footer-logo{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.footer-logo img{

    width:195px;

    max-width:100%;

    display:block;

}

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

.footer-bottom{

    border-top:1px solid #8d7431;

    background:#042d21;

}

.footer-bottom-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    padding:4px 0;

    flex-wrap:wrap;

}

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

.copyright{

    color:#ffffff;

    font-size:12px;

}

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

.footer-contact{

    display:flex;

    align-items:center;

    gap:20px;

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

}

.footer-contact span{

    display:flex;

    align-items:center;

    gap:6px;

    color:#ffffff;

    font-size:12px;

    white-space:nowrap;

}

.footer-contact i{

    color:#d4a03c;

    font-size:15px;

    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:10px;
    flex-shrink:0;
    
}

.footer-social span{

    color:#ffffff;

    font-size:12px;

    margin-right:2px;

}

.footer-social a{

    width:22px;

    height:22px;

    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:6px;

    text-align:center;

    color:#D4A03C;

    font-size:12px;

    font-style:italic;

    font-weight:600;

}

/*==========================================================
CONTACT ICONS
==========================================================*/

.footer-contact i{

    color:#D4A03C;

    width:18px;

    text-align:center;

}

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

.footer-social{

    display:flex;

    align-items:center;

    gap:12px;

}

.footer-social span{

    color:#ffffff;

    font-size:12px;

    margin-right:6px;

}

/* Round Icons */

.footer-social a{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    text-decoration:none;

    transition:.30s;

    font-size:12px;

}

/* 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;

}

.footer-social a:hover{

    transform:translateY(-3px) scale(1.08);

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

}


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


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

#why-hero{

    background:#ffffff;

    padding:10;

    overflow:hidden;

}

.why-hero-wrapper{

    display:grid;

    grid-template-columns:32% 4% 64%;

    align-items:stretch;

    min-height:400px;

}

.why-hero-left{

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    position:relative;

    z-index:5;

    padding:40px 0;
}

.why-left-content{

    padding:0 40px 0 10px;

}

.why-left-content h1{

    margin:0;

    color:#083d33;

    font-size:48px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero-gold-line{

    width:78px;

    height:4px;

    background:#C9962C;

    margin:34px 0;

}

.why-left-content p{

    margin:0;

    color:#333333;

    font-size:18px;

    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:35px 0 25px;

    background:#ffffff;

}

.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:20px 0;

    background:#ffffff;

}

.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:#ffffff;

    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 110px;

}

.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:85px;

    height:85px;

    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:10px 0 28px;

    background:#ffffff;

}

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

.procurement-statements .container{

    width:100%;

}

.statement-box{

    background:#ffffff;

    border:1px solid #eadfcf;

    border-radius:3px;

    overflow:hidden;

}

.statement-row{

    display:flex;

    align-items:center;

    gap:28px;

    padding:18px 34px;

}

.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:1;

    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:#003b3b;

    padding:16px 0;

}

.value-grid{

    display:grid;

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

}

.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:#ffffff;

    padding:14px 0;

    border-bottom:1px solid #ececec;

}

.presence-grid{

    display:grid;

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

}

.presence-item{

    display:flex;

    align-items:center;

    gap:22px;

    padding:0 16px;

    border-right:1px solid #d9d9d9;

}

.presence-item:last-child{

    border-right:none;

}

.presence-icon{

    flex:0 0 66px;

}

.presence-icon img{

    width:66px;

    height:66px;

    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:640px;

    overflow:hidden;

    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:50px;

    padding-left:0;

}

.services-subtitle{

    color:#d79b23;

    font-size:40px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

    letter-spacing:.5px;

}

.services-left-content h1{

    color:#ffffff;

    font-size:25px;

    font-weight:800;

    line-height:1.10;

    margin-bottom:28px;

}

.services-left-content p{

    color:#f5f5f5;

    font-size:20px;

    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:#ffffff;

}


/*----------------------------------------------------------
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:#063528;

    overflow:hidden;

}

.industries-hero-wrapper{

    display:flex;

    min-height:640px;

    align-items:stretch;

}

.industries-hero-left{

    flex:0 0 34%;

    background:#063528;

    display:flex;

    align-items:center;

}

.industries-left-content{

    padding:15px 10px 10px 0px;

}

.industries-left-content h1{

    color:#ffffff;

    font-size:58px;

    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:28px;

    font-weight:700;

    line-height:1.35;

    margin-bottom:28px;

}

.industries-left-content p{

    color:#ffffff;

    font-size:19px;

    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:1px 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:20px;

    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:980px;

    margin:0 auto;

}

.section-heading h2{

    font-size:40px;

    color:#063528;

    font-weight:800;

    margin-bottom:14px;

    text-transform:uppercase;

}

.section-heading p{

    font-size:20px;

    color:#444;

    line-height:1.15;

    margin-bottom:10px;

}

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

#industry-banner{

    background:#063528;

    overflow:hidden;

}

.industry-banner-wrapper{

    display:flex;

    align-items:stretch;

    min-height:260px;

}

.industry-banner-left{

    flex:0 0 30%;

    background:#063528;

    display:flex;

    align-items:center;

}

.industry-banner-content{

    padding:10px;

}

.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;

}

.industry-banner-right{

    flex:1;

}

.industry-banner-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

#industry-sectors{

    padding:70px 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:24px 18px;

    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:15px;

    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:30px 22px;

    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.85;

}

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

#partner-banner{

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

    position:relative;

    margin-top:5px;

}

.partner-overlay{

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

}

.partner-content{

    padding:20px 0;

    display:flex;

    align-items:stretch;

    min-height:230px;

}

.partner-text{

    flex:0 0 60%;

    padding:10px 0;

}

.partner-text h2{

    color:#d9a128;

    font-size:30px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:12px;

}

.partner-text p{

    color:#ffffff;

    font-size:22px;

    line-height:1.6;

}

.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:.35s;

}

.partner-buttons img{

    width:36px;

}

.cta-green{

    background:#0b4637;

    color:#ffffff;

}

.cta-green:hover{

    background:#063528;

}

.cta-gold{

    background:#d59a22;

    color:#ffffff;

}

.cta-gold:hover{

    background:#bf8718;

}

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

.products-hero{

    background:#063326;

    overflow:hidden;

}

.products-hero-content{

    display:flex;

    align-items:center;

    min-height:250px;

    position:relative;

    padding:0;

}

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

.products-hero-left{

    width:42%;

    padding:15px 0px;

    color:#fff;

    position:relative;

    z-index:2;

}

.products-hero-left h1{

    font-size:45px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:10px;

    line-height:1;

}

.products-hero-left h2{

    font-size:24px;

    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:35px;

}

/*----------------------------------------------------------
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;

}

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

.products-hero-right{

    width:58%;

    position:relative;

    overflow:hidden;

}

.products-hero-right img{

    width:100%;

    height:370px;

    object-fit:cover;

    display:block;

}

/*----------------------------------------------------------
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:45px 25px;

}

.products-hero-right{

    width:100%;

}

.products-hero-right::before{

    display:none;

}

.products-hero-right img{

    height:320px;

}

}

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

.product-portfolio{

    background:#ffffff;

}

.section-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-bottom:10px;

}

.title-line{

    width:170px;

    height:2px;

    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%;

    transition:.35s;

}

.portfolio-card:hover{

    transform:translateY(-8px);

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

}

.portfolio-image{

    width:100%;

    height:170px;

    display:block;

    object-fit:cover;

}

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

.portfolio-body{

    padding:4px;

    position:relative;

    flex:1;

    display:flex;

    flex-direction:column;

}

.portfolio-icon{

    position:absolute;

    left:1px;

    top:-26px;

    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:1px solid #0d4c39;

    color:#ffffff;

}

.enquiry-card-content{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    height:100%;

    padding:2px 2px;

}

.enquiry-icon-circle{

    width:78px;

    height:78px;

    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:26px;

    line-height:1.25;

    margin-bottom:10px;

    font-weight:700;

}

.enquiry-card p{

    color:#ffffff;

    font-size:16px;

    line-height:1.1;

    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:45px;

}

.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:55px;

    margin-bottom:8px;

}

.source-card h4{

    font-size:16px;

    color:#0b4d3b;

    line-height:1.1;

    margin-bottom:5px;

    font-weight:700;

}

.source-card p{

    font-size:14px;

    color:#555;

    line-height:1.3;

}

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

.sourcing-network{

    padding:20px 0 30px;

}

.network-box{

    background:#fff;

    border:5px solid #e6e6e6;

    border-radius:10px;

    padding:20px;

}

.network-grid{

    display:grid;

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

    gap:10px;

    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:18px;

    margin-bottom:20px;

}

.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:15px;

    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:20px;

}

.stat-box{

    border:1px solid #e6e6e6;

    border-radius:8px;

    text-align:center;

    padding:4px;

    background:#fafafa;

}

.stat-box img{

    display:block;

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

    height:60px;

    margin:0 auto 15px;

    object-fit:contain;

}

.stat-box h4{

    color:#0b4d3b;

    font-size:28px;

    margin-bottom:8px;

}

.stat-box span{

    font-size:13px;

    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:60px;

    height:50px;

    margin-bottom:15px;

}

.industry-item span{

    display:block;

    font-size:13px;

    line-height:1.5;

    color:#15392d;

    font-weight:600;

}

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

.commitment-banner{

    background:#063326;

    border-top:2px solid #b9891b;

    overflow:hidden;

    position:relative;

}

.commitment-banner .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:30px;

    padding:0;

}

/* LEFT */

.commitment-left{

    width:46%;

    display:flex;

    align-items:center;

    padding-left:0px;

}

.commitment-left img{

    width:80px;

    margin-right:28px;

    flex-shrink:0;

}

.commitment-text h3{

    color:#d89a1d;

    font-size:20px;

    font-weight:700;

    margin-bottom:6px;

}

.commitment-text p{

    color:#ffffff;

    font-size:12px;

    line-height:2.2;

    margin:0;

}

/* CENTER */

.commitment-center{

    width:34%;

    color:#ffffff;

}

.commitment-center h4{

    color:#d89a1d;

    font-size:15px;

    line-height:1.4;

    margin-bottom:16px;

    font-weight:700;

}

.commit-script{

    display:block;

    color:#ffffff;

    font-size:28px;

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

    margin-bottom:2px;

}

.commitment-center h2{

    color:#d89a1d;

    font-size:18px;

    font-weight:700;

    margin:2;

}

/* RIGHT */

.commitment-right{

    width:20%;

    align-self:stretch;

    display:flex;

    justify-content:flex-end;

}

.commitment-right img{

    height:100%;

    width:auto;

    object-fit:cover;

    display:block;

}

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

.specifications-hero{

    background:#063326;

    overflow:hidden;

}

.specifications-hero-content{

    display:flex;

    align-items:stretch;

    min-height:100px;

    padding:0;

}

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

.specifications-hero-left{

    width:40%;

    padding:0px;

    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:50px;

    background:#063326;

}

.specifications-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.specifications-hero-content{

    display:flex;

    align-items:stretch;

    min-height:100px;

    padding:0;

}


/*----------------------------------------------------------
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:5px 0 5px;

    background:#ffffff;

}

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

.specifications-section-title{

    text-align:center;

    margin-bottom:10px;

}

.specifications-section-title h2{

    font-size:30px;

    font-weight:700;

    color:#083629;

    margin:0;

    text-transform:uppercase;

}

.specifications-section-title span{

    display:block;

    width:30px;

    height:4px;

    background:#d89a1d;

    border-radius:10px;

    margin:12px 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 20px rgba(0,0,0,.06);

}

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

.material-card{

    padding:10px 18px;

    text-align:left;

    border-right:1px solid #ececec;

}

.material-card:last-child{

    border-right:none;

}

.material-card img{

    width:36px;

    height:36px;

    margin-bottom:8px;

}

.material-card h3{

    margin:0 0 12px;

    font-size:18px;

    font-weight:700;

    color:#083629;

    line-height:1.35;

}

.material-card p{

    margin:0;

    font-size:15px;

    color:#555555;

    line-height:1.4;

}

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

#technical-library{

    padding:50px 0 70px;

    background:#ffffff;

}

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

.specifications-section-title{

    text-align:center;

    margin-bottom:40px;

}

.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:30px;

}

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

.technical-library-wrapper{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:22px;

    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:22px;

    height:22px;

    flex-shrink:0;

}

.library-category span{

    flex:1;

    color:#063326;

    font-size:15px;

    font-weight:600;

    line-height:1.35;

}

.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:#f7faf8;

    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:13px;

    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:14px;

    font-weight:500;

    line-height:1.55;

}


.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:13px;

    font-weight:700;

    transition:.30s;

}

.library-btn:hover{

    background:#0b4d39;

}

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

.standards-section{

    padding:80px 0;

    background:#ffffff;

}

.standards-grid{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.standard-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:10px;

    padding:25px 15px;

    min-height:180px;

    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;

}

.expertise-card{

    display:flex;

    flex-direction:column;

}

.expertise-card:hover{

    transform:translateY(-8px);

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

}

.expertise-card h3{

    background:#f7f8f8;

    color:#063326;

    padding:8px;

    text-align:center;

    font-size:22px;

    border-bottom:3px solid #d89a1d;

}

.expertise-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.expertise-content img{

    width:100%;

    margin-top:25px;

    border-radius:8px;

}

.expertise-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

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

    padding-left:20px;

    line-height:1.5;

}

.country-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:20px;

}

/*==========================================================
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:30px 15px 24px;

    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:64px;

    height:64px;

    object-fit:contain;

    display:block;

    margin:0 auto 18px;

    transition:.35s;

}

.advantage-card:hover img{

    transform:scale(1.08);

}

.advantage-card h4{

    font-size:17px;

    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 0;

    background:#ffffff;

}

.specifications-commitment-grid{

    display:grid;

    grid-template-columns:35% 65%;

    gap:1px;

}

.specifications-important-note{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:35px;

}

.specifications-note-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.specifications-note-header img{

    width:52px;

}

.specifications-note-header h3{

    color:#d89a1d;

    font-size:28px;

}

.specifications-important-note p{

    margin-bottom:18px;

    line-height:1.9;

    color:#555;

}

.specifications-our-commitment{

    background:#063326;

    border-radius:12px;

    overflow:hidden;

}

.specifications-commitment-content{

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

}

.specifications-commitment-text{

    padding:35px;

}

.specifications-commitment-text h3{

    color:#ffffff;

    font-size:30px;

    margin-bottom:20px;

}

.specifications-commitment-text p{

    color:#ffffff;

    line-height:1.9;

}

.specifications-commitment-text h4{

    margin-top:30px;

    color:#d89a1d;

    line-height:1.6;

    font-size:24px;

}

.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:70px 0;

    background:#ffffff;

}

.specifications-cta-wrapper{

    display:grid;

    grid-template-columns:15% 55% 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:35px;

}

.specifications-cta-content h2{

    color:#ffffff;

    font-size:34px;

    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:18px;

    padding:35px;

}

.specifications-cta-buttons .btn{

    width:100%;

    text-align:center;

}

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

.specifications-journey-section{

    padding:80px 0;

    background:#ffffff;

}

.specifications-journey-grid{

    display:grid;

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

    gap:24px;

    margin-top:45px;

}

.specifications-journey-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    padding:30px 20px;

    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:58px;

    height:58px;

    object-fit:contain;

    margin:0 auto 18px;

    display:block;

}

.specifications-journey-card h3{

    font-size:20px;

    color:#063326;

    margin-bottom:15px;

}

.specifications-journey-card p{

    color:#666;

    font-size:15px;

    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:#042d21;

    padding:0;

    overflow:hidden;

}

.weight-hero-grid{

    display:grid;

    grid-template-columns:42% 58%;

    align-items:stretch;

}

.weight-hero-text{

    background:#042d21;

    padding:10px 1px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.weight-hero-subtitle{

    display:inline-block;

    color:#d89a1d;

    font-size:18px;

    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:26px;

    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:25px 0 45px;

    background:#ffffff;

}

.weight-tools-wrapper{

    background:#063326;

    border-radius:12px;

    overflow:hidden;

}

.weight-tools-wrapper h2{

    font-size:24px;

    font-weight:700;

    padding:18px 20px;

    letter-spacing:.5px;

}

.weight-tools-grid{

    display:grid;

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

}

.weight-tool-item{

    padding:28px 14px;

    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:48px;

    height:48px;

    object-fit:contain;

    margin:0 auto 18px;

}

.weight-tool-item h4{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    line-height:1.45;

    margin:0;

    text-align:center;

}

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

.weight-reference{

    padding:40px 0 70px;

    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:40px 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.8;

}

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

.weight-consultation-section{

    padding:70px 0;

    background:#f8faf9;

}

.weight-consultation-grid{

    display:grid;

    grid-template-columns:65% 35%;

    gap:1px;

}

.weight-consultation{

    background:#063326;

    border-radius:12px;

    overflow:hidden;

}

.weight-consultation-content{

    display:grid;

    grid-template-columns:60% 40%;

    align-items:center;

}

.weight-consultation-text{

    padding:40px;

}

.weight-consultation-text h2{

    color:#d89a1d;

    font-size:30px;

    margin-bottom:22px;

}

.weight-consultation-text p{

    color:#ffffff;

    line-height:1.9;

    margin-bottom:18px;

}

.weight-consultation-text ul{

    margin:25px 0 0;

    padding-left:20px;

}

.weight-consultation-text li{

    color:#ffffff;

    margin-bottom:12px;

    line-height:1.7;

}

.weight-consultation-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

.weight-disclaimer{

    background:#fff7ef;

    border:2px solid #d89a1d;

    border-radius:12px;

    padding:35px;

    text-align:center;

}

.weight-disclaimer img{

    width:60px;

    margin-bottom:20px;

}

.weight-disclaimer h3{

    color:#d89a1d;

    font-size:28px;

    margin-bottom:20px;

}

.weight-disclaimer p{

    color:#555;

    line-height:1.8;

    margin-bottom:18px;

}

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

.weight-commitment{

    background:#063326;

    padding:18px 0;

}

.weight-commitment-grid{

    display:grid;

    grid-template-columns:45% 35% 20%;

    align-items:center;

}

/*==========================================================
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:24px;

    margin-bottom:12px;

    font-weight:700;

}

.weight-commitment-text p{

    color:#ffffff;

    font-size:15px;

    line-height:1.8;

    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 30px;

}

.weight-commitment-middle-icon img{

    width:58px;

}

.weight-commitment-middle h3{

    margin:0;

    color:#d89a1d;

    font-size:24px;

    line-height:1.4;

    font-weight:700;

    text-transform:uppercase;

}

.weight-commitment-middle span{

    color:#f2b233;

}

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

.weight-commitment-right{

    text-align:center;

    padding-left:25px;

}

.weight-commitment-right h3{

    color:#ffffff;

    font-size:28px;

    margin-bottom:15px;

}

.weight-commitment-right p{

    color:#ffffff;

    font-size:26px;

    line-height:1.5;

    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:22px 0 30px;

}

.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:52px;

    height:52px;

    object-fit:contain;

    margin-bottom:16px;

}

.weight-quick-card h3{

    color:#063326;

    font-size:17px;

    font-weight:700;

    margin-bottom:10px;

    min-height:42px;

}

.weight-quick-card p{

    color:#555;

    font-size:14px;

    line-height:1.7;

    min-height:65px;

    margin-bottom:14px;

}

.weight-quick-card span{

    color:#d89a1d;

    font-weight:700;

    font-size:14px;

}

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

.tradeally-hero{

    background:#063326;

    overflow:hidden;

}

.tradeally-hero-content{

    display:flex;

    align-items:stretch;

    min-height:100px;

    padding:0;

}

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

.tradeally-hero-left{

    width:40%;

    padding:0px;

    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:70px 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:22px;

}

.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:18px;

}

.tradeally-why-image{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    border-radius:10px;

    margin:25px 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:20px 12px;
    border-right:1px solid rgba(255,255,255,.12);

}

.tradeally-value:last-child{

    border-right:none;

}

.tradeally-value img{

    width:38px;
    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{

}
.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:70px 0;

    background:#f8fafc;

}

.tradeally-workflow h2{

    text-align:center;

    color:#063326;

    font-size:34px;

    font-weight:700;

    margin-bottom:45px;

}

.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:70px 0;

    background:#f8f8f8;

}

.tradeally-different h2{

    text-align:center;

    font-size:34px;

    font-weight:700;

    color:#063326;

    margin-bottom:35px;

}

.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:28px 18px;

    text-align:center;

    border-right:1px solid #ececec;

}

.tradeally-different-item:last-child{

    border-right:none;

}

.tradeally-different-item img{

    display:block;

    width:32px;
    height:32px;

    margin:0 auto 16px;

    object-fit:contain;

}

.tradeally-different-item h3{

    font-size:13px;

    font-weight:700;

    line-height:1.35;

    color:#222;

    margin-bottom:14px;

    text-transform:uppercase;

}

.tradeally-different-item p{

    font-size:13px;

    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:70px 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:70px 0;

    background:#ffffff;

}

.tradeally-philosophy-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

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

.technology-philosophy,
.future-vision{

    min-height:320px;

    background:#ffffff;

    border:1px solid #dcdcdc;

    border-radius:8px;

    overflow:hidden;

}

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

.technology-philosophy{

    display:grid;

    grid-template-columns:35% 65%;

}

.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:170px;

    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:#052e22;

    padding:0;

}

.tradeally-cta-wrapper{

    display:grid;

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

    align-items:center;

    min-height:110px;

}

/*==========================================================
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:24px;

    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:28px;

    color:#ffffff;

    font-weight:500;

    margin-bottom:35px;

}

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

.tradeally-cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    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:#063326;

    overflow:hidden;

}

.process-hero .container{

    max-width:1400px;

    padding:40;

}

.process-hero-content{

    display:flex;
    align-items:stretch;
    height:400px;      /* Fixed height */
    min-height:auto;

}

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

.process-hero-left{

    width:40%;

    padding:15px 1px;

    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:30px;

    font-weight:800;

    color:#fff;

    line-height:1;

}

.process-hero-left h1{

    font-size:25px;

    line-height:1;

    color:#c89b3c;

    margin-bottom:15px;

}

.process-hero-left h2{

    font-size:16px;

    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;

}

.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:70px 0;

    background:#f7f7f3;

}

.process-layout{

    display:flex;

    gap:40px;

    align-items:flex-start;

}

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

.process-left{

    width:52%;

}

.process-right{

    width:48%;

}

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

.section-title-green{

    background:#063326;

    color:#fff;

    text-align:center;

    padding:18px;

    border-radius:10px;

    font-size:30px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:35px;

}

/*----------------------------------------------------------
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:28px;

    position:relative;

}

.step-number{

    width:34px;

    height:34px;

    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-content{

    flex:1;

}

.step-content h3{

    font-size:22px;

    color:#063326;

    margin-bottom:8px;

}

.step-content p{

    font-size:16px;

    line-height:1.7;

    color:#555;

}

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

.post-support-box{

    display:flex;

    gap:20px;

    align-items:center;

    margin-top:40px;

    padding:24px;

    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;

}

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

.process-right{

    width:48%;

}

.process-right h2{

    text-align:center;

    font-size:34px;

    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:60px;

}

.principle-card{

    background:#fff;

    border:1px solid #e6e6e6;

    border-radius:14px;

    padding:25px;

    display:flex;

    gap:18px;

    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-card h3{

    color:#063326;

    font-size:18px;

    margin-bottom:8px;

}

.principle-card p{

    font-size:15px;

    color:#555;

    line-height:1.6;

}

/*==========================================================
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.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 i{

    width:72px;

    height:72px;

    border:2px solid #c89b3c;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 15px;

    font-size:28px;

    color:#c89b3c;

}

.benefit-item span{

    display:block;

    font-size:17px;

    line-height:1.5;

    font-weight:600;

}

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

.process-journey{

    padding:70px 0;

    background:#fff;

}

.process-journey h2{

    text-align:center;

    color:#063326;

    font-size:36px;

    margin-bottom:50px;

}

.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-item span{

    font-weight:700;

    color:#063326;

}

.journey-arrow{

    color:#c89b3c;

    font-size:28px;

}

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

.process-cta{

    background:#063326;

    color:#fff;

    padding:60px 0;

}

.process-cta-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

/*----------------------------------------------------------
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:38px;

}

.cta-text p{

    line-height:1.9;

    font-size:17px;

    color:#ddd;

}

.cta-buttons{

    display:flex;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}

.btn-gold{

    background:#c89b3c;

    color:#fff;

    padding:16px 34px;

    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:90px;

    line-height:0;

}

.cta-quote h3{

    font-size:36px;

    line-height:1.4;

    font-style:italic;

    color:#fff;

}


/*==========================================================
SUBMIT US PAGE  - UNDER DEVELOPMENT
==========================================================*/

.submit-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.submit-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.submit-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.submit-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.submit-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.submit-under-development-card strong{

    color:#d89a1d;

}

.submit-under-development-card .btn{

    margin-top:20px;

}

/*==========================================================
CAREERS PAGE  - UNDER DEVELOPMENT
==========================================================*/

.careers-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.careers-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.careers-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.careers-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.careers-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.careers-under-development-card strong{

    color:#d89a1d;

}

.careers-under-development-card .btn{

    margin-top:20px;

}

/*==========================================================
TECHNOLOGY, MANUAL & SOP PAGE  - UNDER DEVELOPMENT
==========================================================*/

.technology-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.technology-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.technology-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.technology-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.technology-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.technology-under-development-card strong{

    color:#d89a1d;

}

.technology-under-development-card .btn{

    margin-top:20px;

}


/*==========================================================
SAFE SOURCING & RISK MANAGEMENT PAGE  - UNDER DEVELOPMENT
==========================================================*/

.sourcing-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.sourcing-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.sourcing-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.sourcing-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.sourcing-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.sourcing-under-development-card strong{

    color:#d89a1d;

}

.sourcing-under-development-card .btn{

    margin-top:20px;

}

/*==========================================================
KNOWLEDGE CENTER PAGE  - UNDER DEVELOPMENT
==========================================================*/

.knowledge-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.knowledge-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.knowledge-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.knowledge-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.knowledge-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.knowledge-under-development-card strong{

    color:#d89a1d;

}

.knowledge-under-development-card .btn{

    margin-top:20px;

}


/*==========================================================
SUPPLIERS PAGE  - UNDER DEVELOPMENT
==========================================================*/

.suppliers-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.suppliers-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.suppliers-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.suppliers-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.suppliers-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.suppliers-under-development-card strong{

    color:#d89a1d;

}

.suppliers-under-development-card .btn{

    margin-top:20px;

}


/*==========================================================
CONFIDENTIALITY & ETHICS PAGE  - UNDER DEVELOPMENT
==========================================================*/

.confidentiality-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.confidentiality-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.confidentiality-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.confidentiality-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.confidentiality-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.confidentiality-under-development-card strong{

    color:#d89a1d;

}

.confidentiality-under-development-card .btn{

    margin-top:20px;

}

/*==========================================================
FAQ PAGE  - UNDER DEVELOPMENT
==========================================================*/

.faq-under-development{

    padding:100px 0;

    background:#f8faf9;

}

.faq-under-development-card{

    max-width:850px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    padding:70px 60px;

    text-align:center;

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

}

.faq-under-development-card img{

    width:110px;

    margin:0 auto 30px;

    display:block;

}

.faq-under-development-card h2{

    font-size:38px;

    color:#063326;

    margin-bottom:25px;

}

.faq-under-development-card p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.faq-under-development-card strong{

    color:#d89a1d;

}

.faq-under-development-card .btn{

    margin-top:20px;

}

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

.contact-hero{

    background:#063326;

    overflow:hidden;

}

.contact-hero .container{

    max-width:1400px;

    padding:0;

}

.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 1px;

    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 i{

    color:#c89b3c;

    font-size:24px;

    margin-top:5px;

}

.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-presence{

    padding:70px 0;

    background:#f7f7f3;

}

.contact-presence-title{

    text-align:center;

    color:#063326;

    font-size:38px;

    font-weight:700;

}

.contact-presence-divider{

    width:90px;

    height:4px;

    background:#c89b3c;

    margin:18px auto 50px;

}

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

.contact-office-grid{

    display:grid;

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

    gap:28px;

    margin-bottom:35px;

}

.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:58px 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:64px;

    height:64px;

    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.green{

    background:#0b5039;

}

.contact-office-icon.gold{

    background:#c89b3c;

}

.contact-office-icon.maroon{

    background:#7b2326;

}

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

.contact-process-centre-box{

    background:#eef3ef;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:25px;

    padding:28px;

}

.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-process-centre-box p{

    font-size:17px;

    color:#444;

    line-height:1.8;

}

/*==========================================================
CONTACT INFORMATION CARDS
==========================================================*/

.contact-info-cards{

    padding:40px 0 50px;

    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:470px;

    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.8;

    color:#555;

    margin-bottom:18px;

}

/*----------------------------------------------------------
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:15px;

    color:#222;

}

.flag-list img{

    width:22px;

    height:15px;

    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;

}

/*----------------------------------------------------------
SUPPLY COUNTRIES
----------------------------------------------------------*/

.country-columns{

    display:flex;

    justify-content:space-between;

    gap:25px;

}

/*----------------------------------------------------------
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
----------------------------------------------------------*/

.card-bottom-image{

    margin-top:auto;

    padding-top:20px;

    text-align:center;

}

.card-bottom-image img{

    width:100%;

    height:auto;

    display:block;

}

/*----------------------------------------------------------
SPECIAL SIZES
----------------------------------------------------------*/

.contact-info-card:nth-child(1) .card-bottom-image img{

    width:92%;

    margin:auto;

}

.contact-info-card:nth-child(2) .card-bottom-image img{

    width:95%;

    margin:auto;

}

.contact-info-card:nth-child(3) .card-bottom-image img{

    width:100%;

}

.contact-info-card:nth-child(4) .card-bottom-image img{

    width:90%;

    margin-left:auto;

}

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

.contact-details-section{

    padding:45px 0 60px;

    background:#f7f7f3;

}

.contact-details-grid{

    display:grid;

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

    gap:22px;

}

.contact-box{

    background:#ffffff;

    border-radius:10px;

    padding:28px;

    padding:0 !important;

    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{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    margin-bottom:25px;

    color:#063326;

}

.contact-box h3 img{

    width:30px;

    height:auto;

}

.contact-item-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

}

.contact-item-title img{

    width:24px;

}

.contact-box-green h3{

    color:#ffffff;

}

.contact-item{

    margin-bottom:28px;

}

.contact-item strong{

    display:block;

    margin-bottom:10px;

    font-size:17px;

}

.contact-item a{

    display:block;

    color:#d4b15a;

    text-decoration:none;

    margin-bottom:8px;

}

.business-time{

    font-size:34px;

    font-weight:700;

    color:#063326;

    margin:15px 0;

}

.contact-bottom-photo{

    width:100%;

    margin-top:auto;

    border-radius:8px;

}

.social-links{

    list-style:none;

    padding:0;

    margin:0;

}

.social-links li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

    font-size:18px;

}

.social-links img{

    width:26px;

    height:26px;

}

/*==========================================================
FOLLOW US PANEL
==========================================================*/

.follow-box{

    display:flex;

    flex-direction:row;

    padding:0;

    overflow:hidden;

}

.follow-left{

    width:42%;

    padding:28px;

}

.follow-right{

    width:58%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    background:url("../images/contact/follow-bg.jpg") center center no-repeat;

    background-size:cover;

}

.follow-right img{

    width:88%;

    height:auto;

    display:block;

}


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

.contact-commitment{

    padding:28px 0 40px;

    background:#f7f7f3;

}

.commitment-grid{

    display:grid;

    grid-template-columns:260px 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:30px 35px;

}

.commitment-content h2{

    color:#063326;

    font-size:34px;

    margin-bottom:18px;

    font-weight:700;

}

.commitment-content p{

    color:#555;

    font-size:16px;

    line-height:1.9;

    margin-bottom:15px;

}

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

.commitment-quote{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:25px;

    border-left:1px solid #ececec;

}

.commitment-quote h3{

    color:#063326;

    font-size:34px;

    margin-bottom:18px;

    font-weight:700;

}

.quote-text{

    font-size:42px;

    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:0 0 40px;

}

.downloads-hero .container{

    max-width:1400px;

    margin:0 auto;

    padding:0;

}

.downloads-hero-content{

    display:flex;

    height:580px;

    overflow:hidden;

}

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

.downloads-hero-left{

    width:38%;

    background:#063326;

    color:#fff;

    padding:50px 1px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.downloads-tag{

    color:#d4a438;

    font-size:24px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:28px;

}

.downloads-hero-left h1{

    font-size:22px;

    line-height:1.12;

    margin-bottom:22px;

    font-weight:800;

}

.hero-divider{

    width:90px;

    height:4px;

    background:#c89b3c;

    margin-bottom:28px;

}

.downloads-hero-left h3{

    font-size:17px;

    line-height:1.9;

    color:#e6e6e6;

    margin-bottom:35px;

}

.downloads-hero-left p{

    line-height:1.9;

    margin-bottom:18px;

    color:#ececec;

}

.downloads-features{

    display:flex;

    gap:30px;

    margin-top:25px;

    flex-wrap:wrap;

}

.downloads-feature{

    display:flex;

    align-items:center;

    gap:12px;

}

.downloads-feature img{

    width:36px;

}

.downloads-feature span{

    font-size:15px;

    font-weight:600;

}

.downloads-hero-right{

    width:62%;

    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;

}

/*==========================================================
DOWNLOAD LIBRARY
==========================================================*/

.downloads-library{

    padding:35px 0 45px;

    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:24px;

}

.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:16px 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:34px;

    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 i{

    font-size:16px;

}

@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 35px;

    background:#f7f7f3;

}

.market-card{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:10px;

    padding:28px;

    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:30px;

}

.market-card h2 img{

    width:36px;

}

.market-grid{

    display:grid;

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

    gap:30px 24px;

    justify-items:center;      /* Center every grid item */
    align-items:start;

    margin-bottom:35px;

}

.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:15px;

    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:15px;

    line-height:1.8;

    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 40px;

    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:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:10px;

    padding:28px;

}

.note-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;

}

.note-header img{

    width:54px;

}

.note-header h3{

    color:#d69217;

    font-size:24px;

    font-weight:700;

}

.important-note p{

    font-size:15px;

    line-height:1.9;

    color:#555;

    margin-bottom:18px;

}

/*----------------------------------------------------------
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:30px;

    padding:35px;

    color:#ffffff;

}

.download-commitment-left img{

    width:85px;

}

.download-commitment-text h3{

    font-size:28px;

    margin-bottom:18px;

}

.download-commitment-text p{

    line-height:1.9;

    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 45px;

}

.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:52px;

    height:52px;

    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);

    }

}