/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');


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

:root{

    /* Colors */

    --primary:#0A3D91;
    --primary-dark:#072A66;
    --primary-light:#E6F0FF;

    --accent-red:#E31E24;
    --accent-green:#16A34A;
    --accent-teal:#00B5B8;
    --accent-purple:#7C3AED;

    --text:#1F2937;
    --text-light:#485563;

    --border:#E5E7EB;

    --background:#F8FAFC;

    --white:#ffffff;

    /* Typography */

    --font-family:'Inter',sans-serif;

    --h1:64px;
    --h2:40px;
    --h3:30px;
    --h4:22px;
    --h5:18px;
    --h6:16px;

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

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

    background:var(--background);

    color:var(--text);

}
/* ==========================
   TYPOGRAPHY
========================== */
h1{

    font-size:var(--h1);
    font-weight:800;
    line-height:1.2;

}

h2{

    font-size:var(--h2);
    font-weight:700;

}

h3{

    font-size:var(--h3);
    font-weight:600;

}

p{

    font-size:16px;
    line-height:28px;
    color:var(--text-light);

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

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:#fff;
    z-index:1000;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.nav-container{
    width:92%;
    max-width:1500px;
    height:100%;
    margin:auto;

    display:grid;
    grid-template-columns:260px 1fr 300px;
    align-items:center;
}

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

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    height:65px;
    width:auto;
    transition:.3s;
}

.logo:hover img{
    transform:scale(1.03);
}

/* ======================
   NAVIGATION LINKS
====================== */

.navbar nav{
    justify-self:center;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:42px;
    list-style:none;
}

.nav-links li{
    position:relative;
}

.nav-links a{
    display:inline-flex;
    align-items:center;
    gap:6px;

    position:relative;   /* <-- Add this */

    text-decoration:none;
    color:#123A80;

    font-size:17px;
    font-weight:600;

    transition:.3s;
}

.nav-links a:hover,
.nav-links a.active{
    color:#E31E24;
}
.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:#E31E24;

    transition:.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after{
    width:100%;
}

.nav-links i{
    font-size:11px;
}

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

.header-right{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:18px;
}

/* ======================
   SEARCH
====================== */

.search-box{

    width:220px;
    height:46px;

    display:flex;
    align-items:center;

    padding:0 18px;

    border:1px solid #D8DCE5;
    border-radius:40px;

    background:#fff;

    transition:.3s;
}

.search-box:hover,
.search-box:focus-within{

    border-color:#0A3D91;

    box-shadow:0 0 0 4px rgba(10,61,145,.08);

}

.search-box i{

    color:#999;
    margin-right:10px;
}

.search-box input{

    width:100%;
    border:none;
    outline:none;
    background:transparent;

    font-size:15px;
}

/* ======================
   SHOP BUTTON
====================== */
.shop-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:145px;
    height:52px;

    padding:0 22px;

    background:linear-gradient(135deg,#E31E24,#C9151B);
    color:#fff;

    text-decoration:none;
    border-radius:14px;

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

    white-space:nowrap;

    transition:.35s ease;
    box-shadow:0 10px 25px rgba(227,30,36,.20);
}

.shop-btn i{
    font-size:16px;
    line-height:1;
}

.shop-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 30px rgba(227,30,36,.30);
}

/* ======================
   DROPDOWN
====================== */

.dropdown{
    position:relative;
}

.mega-menu{

    position:absolute;

    top:70px;
    left:50%;

    transform:translateX(-50%) translateY(15px);

    width:340px;

    background:#fff;

    border-radius:18px;

    padding:25px;

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

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:999;
}

.dropdown:hover .mega-menu{

    opacity:1;
    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.mega-column{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.mega-column h4{

    color:#123A80;

    font-size:17px;

    margin-bottom:8px;
}

.mega-column a{

    display:flex;
    align-items:center;

    gap:12px;

    padding:10px 14px;

    border-radius:10px;

    color:#444;

    font-size:16px;

    font-weight:500;

    text-decoration:none;

    transition:.3s;
}

.mega-column a:hover{

    background:#F5F8FD;

    color:#E31E24;

    transform:translateX(5px);

}

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

.hero{

    margin-top:100px;

    width:100%;
    height:900px;

    display:flex;
    align-items:center;

}

.hero-overlay{

    width:100%;
    height:100%;

    background:linear-gradient(
    90deg,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.18) 42%,
    rgba(255,255,255,0) 100%
);

    display:flex;
    align-items:center;
}

.hero-content{

    width:90%;
    max-width:1400px;

    margin:0 auto;

}

.hero-content h1{

    width:650px;

    font-size:64px;

    color:#123A80;

    line-height:1.15;

    margin-bottom:28px;

}

.hero-content p{

    width:620px;

    font-size:22px;

    line-height:1.7;

    color:#4B5563;

}
/* ======================================================
   COMPANY STATS
====================================================== */

.stats-section{
    position:relative;
    margin-top:-120px;
    margin-bottom:10px;
    z-index:20;
}
.solutions{
    width:92%;
    max-width:1450px;
    margin:50px auto 120px;
}

.stats-container{

    width:92%;
    max-width:1200px;

    margin:auto;

    background:#ffffff;

    border-radius:28px;

    padding:30px 45px;

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

    gap:30px;

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

}

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

.stat-card{

    display:flex;
    align-items:center;

    gap:18px;

    position:relative;

    transition:.35s ease;

}
.stat-card:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-15px;
    top:50%;

    transform:translateY(-50%);

    width:1px;
    height:60px;

    background:#ECECEC;

}

.stat-card:hover{

    transform:translateY(-5px);

}

.stat-card:hover .stat-icon{

    background:#E31E24;

}

.stat-card:hover .stat-icon i{

    color:#fff;

}

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

.stat-icon{

    width:72px;
    height:72px;

    border-radius:18px;

    background:#FFF5F5;

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

}

.stat-icon i{

    font-size:28px;

    color:#E31E24;

}

/* ======================
   TEXT
====================== */

.stat-text h3{

    font-size:40px;

    color:#123A80;

    font-weight:800;

    margin-bottom:6px;

    line-height:1;

}

.stat-text p{

    font-size:16px;

    color:#666;

    line-height:1.5;

}

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

.stat-card{

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-5px);

}

.stat-card:hover .stat-icon{

    background:#E31E24;

    transition:.35s;

}

.stat-card:hover .stat-icon i{

    color:#fff;

}
/* =========================================
   GLOBAL SECTION CONTAINER
========================================= */

.section-container{

    width:92%;

    max-width:1500px;

    margin:0 auto;

}
.container{
    width:92%;
    max-width:1900px;
    margin:0 auto;
}
/* =========================================
   HEALTHCARE SOLUTIONS
========================================= */

.solutions{
    width:92%;
    max-width:1500px;

    margin:100px auto 5px;

    box-sizing:border-box;
}

.solutions-header{

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

    margin-bottom:30px;

}

.solutions-header h2{

    font-size:40px;
    color:#123A80;
    font-weight:800;

}

.solutions-header a{

    color:#123A80;
    text-decoration:none;
    font-weight:600;

    transition:.3s;

}

.solutions-header a:hover{

    color:#E31E24;

}

.solutions-grid{
    width:100%;

    display:grid;

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

    gap:18px;

    box-sizing:border-box;
}

.solution-card{

    position:relative;

    height:240px;

    border-radius:18px;

    overflow:hidden;

    text-decoration:none;

    transition:.35s;

}

.solution-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s;

}

.solution-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(49, 89, 160, 0.65),
        rgba(14, 60, 140, 0)
    );
}

.solution-title{

    position:absolute;

    left:18px;
    bottom:18px;

    color:#fff;

    font-size:26px;

    font-weight:700;

    line-height:1.2;

    z-index:5;

}

.solution-card:hover{

    transform:translateY(-8px);

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

}

.solution-card:hover img{

    transform:scale(1.08);

}
/* OUR BRANDS */

.brands-section{

    width:92%;
    max-width:1500px;
    margin-top:100px;
    margin:120px auto;

}

.brands-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.brands-header h2{

    font-size:52px;

    color:#123A80;

    font-weight:800;

}

.brands-row{

    display:grid;

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

    gap:25px;

    width:100%;

}

.brand-card{

    background:#fff;

    border-radius:22px;

    padding:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    transition:.35s;

    min-width:0;

    box-sizing:border-box;

}

.brand-card:hover{

    transform:translateY(-8px);

}

.brand-info{

    width:48%;

    min-width:0;

}

.brand-logo{

    height:45px;

    margin-bottom:20px;

}

.brand-info p{

    margin-bottom:22px;

    color:#666;

}

.brand-info a{

    color:#123A80;

    text-decoration:none;

    font-weight:700;

}
.brand-image{
    width:45%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    min-width:0;
}

.brand-image img{
    width:150px;
    max-width:100%;
    height:auto;
    object-fit:contain;
}

.brand-next{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#E31E24;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.brand-next:hover{

    transform:scale(1.08);

}
/* =========================================
   AWARDS & RECOGNITION
========================================= */

.awards-section{
    width:100%;
    max-width:none;
    margin:120px 0;
}

.awards-section .section-container{
    width:92%;
    max-width:1500px;
    margin:0 auto;
}

.awards-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:45px;
}

.awards-header h2{
    font-size:52px;
    color:#123A80;
    font-weight:800;
}

.awards-header a{
    color:#123A80;
    text-decoration:none;
    font-weight:700;
}

.awards-header a:hover{
    color:#E31E24;
}

.awards-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:35px;
    width:100%;
}

.award-card{
    min-width:0;
    box-sizing:border-box;

    background:#fff;
    border-radius:22px;
    padding:35px 25px;

    text-align:center;

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

    transition:.35s;
}

.award-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.award-card img{
    width:200px;
    height:160px;
    object-fit:contain;
    margin-bottom:5px;
}

.award-card h3{
    color:#123A80;
    font-size:28px;
    margin-bottom:12px;
}

.award-card p{
    font-size:16px;
    color:#666;
    line-height:1.6;
}
/* =========================================
   CSR
========================================= */

.csr-section{

    margin-top:100px;
    margin-bottom:120px;

}

.csr-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.csr-header h2{

    font-size:48px;

    color:#123A80;

    font-weight:800;

}

.csr-header a{

    color:#123A80;

    text-decoration:none;

    font-weight:700;

}

.csr-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    align-items:center;
    min-height:500px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.csr-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.csr-image{
    width:35%;
    height:300px;
    margin-left:30px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.csr-image img{
    width:100%;
    height:auto;
    max-height:300px;
    object-fit:contain;
    display:block;
}

.csr-content{
    width:65%;
    padding:45px 55px;
    box-sizing:border-box;
}
.csr-content h3{

    font-size:50px;

    color:#123A80;
    font-weight:600;

    margin-bottom:25px;

}

.csr-content p{

    font-size:18px;

    line-height:1.8;

    color:#666;

    margin-bottom:35px;

}

.csr-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    background:#E31E24;

    padding:16px 28px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    width:max-content;

    transition:.3s;

}

.csr-btn:hover{

    background:#C8171D;

    transform:translateY(-3px);

}
/* =========================================
   LATEST NEWS
========================================= */

.news-section{
    width:92%;
    max-width:1500px;
    margin:120px auto;
}


/* HEADER */

.news-section .section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.news-section .section-header h2{
    font-size:52px;
    color:#123A80;
    font-weight:800;
    margin:0;
}

.news-section .section-header .view-all{
    color:#123A80;
    text-decoration:none;
    font-weight:700;
}

.news-section .section-header .view-all:hover{
    color:#E31E24;
}


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

.latest-news-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}


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

.latest-news-card{
    width:100%;
    height:150px;

    box-sizing:border-box;

    display:flex;
    align-items:center;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    text-decoration:none;

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

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


/* HOVER */

.latest-news-card:hover{
    transform:translateY(-5px);

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


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

.latest-news-card > img{
    width:150px;
    height:110px;

    margin-left:28px;

    flex:0 0 150px;

    object-fit:cover;

    border-radius:10px;

    display:block;
}


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

.latest-news-content{
    padding:25px 30px;

    min-width:0;
}

.latest-news-content h3{
    margin:0 0 10px;

    color:#123A80;

    font-size:21px;

    font-weight:600;

    line-height:1.4;
}

.latest-news-content span{
    display:block;

    color:#777;

    font-size:14px;
}


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

@media (max-width:700px){

    .news-section .section-header h2{
        font-size:36px;
    }

    .latest-news-card{
        height:125px;
    }

    .latest-news-card > img{
        width:110px;
        height:85px;

        flex-basis:110px;

        margin-left:18px;
    }

    .latest-news-content{
        padding:18px 20px;
    }

    .latest-news-content h3{
        font-size:17px;
    }

}

/* =========================================
   SHOP OUR PRODUCTS
========================================= */

.stores-section{

    width:92%;
    max-width:1400px;

    margin:60px auto 80px;

    text-align:center;

}

.stores-section h2{

    font-size:58px;

    color:#123A80;

    margin-bottom:15px;

    font-weight:800;

}

.stores-section p{

    color:#666;

    font-size:22px;

    margin-bottom:35px;

}

/* Store Buttons */

.store-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.store-card{

    width:320px;

    height:100px;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#fff;

    transition:.3s;

}

.store-card:hover{

    transform:translateY(-6px);

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

}

.store-card img{

    height:36px;

    margin-bottom:10px;

}

.store-card span{

    font-size:22px;

    font-weight:700;

}

/* Colors */

.shopee{

    background:#EE4D2D;

}

.lazada{

    background:linear-gradient(90deg,#4B1DB8,#7B00FF);

}

.tiktok{

    background:#000;

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

.footer{

    background:#0A3D91;

    color:#fff;

    margin-top:100px;

}

.footer .container{

    max-width:1400px;
    margin:0 auto;

    padding:40px 20px;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}

.footer-logo{

    width:220px;

    margin-bottom:25px;

}

.footer-about p{

    color:#d5dbe8;

    line-height:1.8;

}

.footer-links h4,
.footer-contact h4{

    margin-bottom:20px;

    font-size:20px;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    color:#d5dbe8;

    text-decoration:none;

    margin-bottom:12px;

    transition:.3s;

}

.footer-links a:hover{

    color:#fff;

    padding-left:6px;

}

.footer-contact p{

    color:#d5dbe8;

    margin-bottom:15px;

}

.footer-contact i{

    width:25px;

}

.footer-social{

    margin-top:25px;

    display:flex;

    gap:12px;

}

.footer-social{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}

.footer-social a{

    width:48px;
    height:48px;

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

    border-radius:50%;

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

    color:#fff;

    text-decoration:none;   /* Add this */
    border:none;            /* Add this */

}

.footer-social a i{

    display:flex;

    justify-content:center;

    align-items:center;

}

.footer-social a:hover{

    background:#E31E24;
    transform:translateY(-4px);

}

.footer-bottom{

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

    text-align:center;

    padding:22px;

    color:#cfd7e5;

}
/* =========================================
   HOMEPAGE SECTION WIDTH ALIGNMENT
========================================= */

/*
   All major homepage sections use
   the same outer content width.
*/

.solutions-section,
.healthcare-solutions-section,
.brands-section,
.awards-section,
.csr-section,
.news-section{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
}


/* =========================================
   SHARED CONTAINER
========================================= */

.solutions-section .section-container,
.healthcare-solutions-section .section-container,
.brands-section .section-container,
.awards-section .section-container,
.csr-section .section-container,
.news-section .section-container{
    width:92%;
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
}


/* =========================================
   HEALTHCARE SOLUTIONS
========================================= */

.solutions-section .solutions-grid,
.healthcare-solutions-section .solutions-grid{
    width:100%;
    max-width:none;
}


/* =========================================
   OUR BRANDS
========================================= */

.brands-section .brands-row{
    width:100%;
    max-width:none;
}


/* =========================================
   AWARDS
========================================= */

.awards-section .awards-grid{
    width:100%;
    max-width:none;
}


/* =========================================
   CSR
========================================= */

.csr-section .csr-card{
    width:100%;
    box-sizing:border-box;
}


/* =========================================
   LATEST NEWS
========================================= */

.news-section .latest-news-list{
    width:100%;
    max-width:none;
}

.news-section .latest-news-card{
    width:100%;
    box-sizing:border-box;
}