@media (min-width:1500px){.container{max-width:1440px!important;}}
@media (min-width:1900px){.container{max-width:1600px!important;}}

:root {
--pcolor:#121C27;
--dpcolor:#159b6c;
--scolor:#159b6c;
--text:#121C27;
--mtext:#6b7178;
--mltext:#dfe2e5;
--border:#e1e3e5;
--borderhover:#d4d9dd;
--white:#ffffff;
--gold:#caa051;
--dgold:#CBA97B;
--silver:#EBECEC;
--fs-subhead:13px;
--fs-body:16px;
--navy:#1b2a38;

}
*{box-sizing:border-box}
body,html{margin:0;padding:0}
body{font-family:Quicksand,sans-serif;color:var(--text);background:var(--white);font-size:var(--fs-body);margin:0;}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
.boxpadding {padding-bottom: 24px;}
.fluid0 {padding: 0;margin: 0; }

.sectionpad {padding: 50px 0;}
.sectionpadtop {padding: 50px 0 0  0;}
.sectionpadbot {padding: 0 0 50px 0;}
.sectionbg{background:var(--silver)}
.boxpadding {padding-bottom: 24px;}
.tiheading{font-size:48px;font-weight:700;line-height:1;margin:0;color:var(--pcolor);padding-bottom:30px}
.tsubhead{display:block;font-size:var(--fs-subhead);letter-spacing:3px;font-weight:600;color:var(--mtext);text-transform:uppercase;margin-bottom:14px; text-transform:uppercase}
.tsubheading02{font-size:22px;font-weight:700;color:var(--pcolor);line-height:1.3;margin:0; padding-bottom:15px;}
:root{
	--line:#dcdcdc;

	/* Type scale */
	--fs-h1:52px;
	--fs-h2:36px;
	--fs-h3:26px;
	--fs-h4:20px;
	--fs-small:14px;

	/* Radius / spacing */
	--radius-sm:4px;
	--radius-md:8px;
	--section-py:90px;
}

/* ---------- Base type ---------- */

/* ---------- Buttons ---------- */
.btn-brand{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:var(--gold);color:var(--pcolor);font-size:var(--fs-small);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:var(--radius-sm);border:1px solid var(--gold);transition:all .25s ease}
.btn-brand:hover{background:transparent;color:var(--gold);}
.btn-outline-brand{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:transparent;color:#fff;font-size:var(--fs-small);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.5);transition:all .25s ease}
.btn-outline-brand:hover{background:#fff;color:var(--pcolor)}

/* ---------- Common card ---------- */
.common-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:32px 28px;height:100%;transition:box-shadow .25s ease, transform .25s ease}
.common-card:hover{box-shadow:0 14px 30px rgba(18,28,39,.1);transform:translateY(-4px)}
.common-card .card-icon{width:46px;height:46px;margin-bottom:18px}

/* ============================================
   HEADER / TOPBAR / NAV
   ============================================ */
.topbar{background:var(--pcolor);padding:10px 0;font-size:13px;color:var(--white)}
.topbar a{color:var(--white)}
.topbar-item{display:inline-flex;align-items:center;gap:8px;letter-spacing:.5px}
.topbar-item i{color:var(--gold);font-size:14px}
.topbar-social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);margin-left:8px;font-size:13px;transition:background .2s ease}
.topbar-social a:hover{background:var(--gold);color:var(--pcolor)}

.site-header{position:absolute;left:0;width:100%;z-index:50;transition:all .3s ease; padding:15px 0; background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.navbar-brand-logo{display:flex;align-items:center;gap:14px}
.navbar-brand-logo img{height:102px;width:auto}
.main-nav{display:flex;align-items:center;gap:50px;list-style:none;margin:0;padding:0}
.main-nav a{font-size:16px;font-weight:600;letter-spacing:2px;color:var(--white);text-transform:uppercase;padding:8px 0;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .25s ease}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.nav-toggler{border:1px solid rgba(255,255,255,.4);padding:6px 10px}
.nav-toggler .bi{color:#fff;font-size:22px}

/* ---------- Mobile off-canvas menu ---------- */
.mobile-nav-backdrop{position:fixed;inset:0;background:rgba(10,14,18,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1040}
.mobile-nav-backdrop.is-open{opacity:1;visibility:visible}
.mobile-nav-panel{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:85vw;background:var(--white);z-index:1050;transform:translateX(-100%);transition:transform .35s ease;box-shadow:8px 0 30px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow-y:auto}
.mobile-nav-panel.is-open{transform:translateX(0)}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--pcolor);}
.mobile-nav-logo{height:44px;width:auto}
.mobile-nav-close{width:38px;height:38px;flex-shrink:0;border:0;border-radius:8px;background:var(--pcolor);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.mobile-nav-close:hover{background:var(--gold);color:var(--pcolor)}
.mobile-nav-list{list-style:none;margin:0;padding:0}
.mobile-nav-list li{border-bottom:1px solid var(--line)}
.mobile-nav-list a{display:block;padding:18px 22px;font-size:16px;font-weight:700;color:var(--pcolor);transition:background .2s ease,padding-left .2s ease;border-left:3px solid transparent}
.mobile-nav-list a:hover,.mobile-nav-list a.active{background:var(--silver);border-left-color:var(--gold);padding-left:26px}
body.mobile-nav-open{overflow:hidden}

/* ============================================
   HERO
   ============================================ */
.hero{position:relative;min-height:760px;display:flex;align-items:center;background-size:cover;background-position:center;overflow:hidden}
.hero-inner{position:relative;z-index:2;padding-top:120px}
.hero-title{font-size:60px;color:#fff;margin:0 0 8px;font-weight:400}
.hero-subtitle{font-size:16px;letter-spacing:2px;text-transform:uppercase;color:#e6e6e6}
.hero-scroll{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:50%;color:#fff;margin-top:60px;animation:bounceDown 2s infinite}
@keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.hero-stats{position:absolute;right:0;bottom:0;z-index:3;display:flex}
.hero-stat{width:140px;padding:22px 18px;text-align:center;background:rgba(18,28,39,.7);border-left:1px solid rgba(255,255,255,.15)}
.hero-stat.is-active{background:var(--gold);color:var(--pcolor)}
.hero-stat-num{display:block;font-size:15px;font-weight:700;margin-bottom:8px;color:var(--gold)}
.hero-stat.is-active .hero-stat-num{color:var(--pcolor)}
.hero-stat-label{font-size:13px;color:#f2efe9;line-height:1.4}
.hero-stat.is-active .hero-stat-label{color:var(--pcolor)}
.herobg{background-image:url('../img/hhero01.jpg');}

/* ============================================
   ABOUT
   ============================================ */
.aboutusbg{background-image:url('../img/aboutusimg.png');background-position:right top,top;background-repeat:no-repeat,no-repeat;background-size:auto,100% 100%}
@media(min-width:768px){
.about-copy{column-gap:40px}
}
.about-copy p{margin-bottom:18px;break-inside:avoid}

/* ============================================
   UN APPROVED PACKAGING SOLUTIONS
   ============================================ */
.benefit-list{list-style:none;margin:0;padding:0}
.benefit-list li{position:relative;padding-left:26px;margin-bottom:15px;color:var(--text)}
.benefit-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--gold);border-radius:2px}
.spec-table-wrap{background:linear-gradient(135deg,#caa051 0,#e1c27a 50%,#caa051 100%);border:1px solid var(--dgold);border-radius:var(--radius-md);padding:14px;overflow-x:auto}
.spec-table{width:100%;border-collapse:collapse;min-width:520px}
.spec-table th{background:0 0;color:var(--pcolor);font-size:17px;font-weight:700;text-align:center;padding:16px 10px;border:1px solid rgba(0,0,0,.18)}
.spec-table th span{display:block;font-size:14px;font-weight:600;color:var(--pcolor);opacity:.8}
.spec-table td{text-align:center;padding:14px 10px;border:1px solid rgba(0,0,0,.18);font-size:16px;font-weight:700;color:var(--pcolor)}
.spec-table td:first-child{text-align:left;padding-left:20px}


/* ---------- Product tiles (photo + circular badge + light-blue body) ---------- */
.product-tile{text-align:center;height:100%;display:flex;flex-direction:column}
.product-tile-media{position:relative;border-radius:12px 12px 0 0;flex-shrink:0;}
.product-tile-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px 12px 0 0;}
.product-tile-badge{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;background:var(--pcolor);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;border:4px solid #fff;box-shadow:0 8px 20px rgba(18,28,39,.25);transition:background .25s ease}
.product-tile-badge.gold{background:var(--gold)}
.product-tile-badge i{visibility:hidden}
.product-tile-badge::after{content:"\2197";visibility:visible;position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);font-size:20px;line-height:1;color:#fff}
.product-tile-media:hover .product-tile-badge{background:var(--gold);color:var(--pcolor)}
.product-tile-media:hover .product-tile-badge::after{color:var(--pcolor)}
.product-tile-body{background:var(--dgold);border-radius:0 0 16px 16px;padding:40px 20px 20px 20px;flex:1 1 auto;display:flex;flex-direction:column}
.product-tile-body h4{font-size:19px;font-weight:700;color:var(--pcolor);margin-bottom:10px;text-transform:none}
.product-tile-body p{font-size:14px;color:var(--muted-text);line-height:1.7;margin:0}
.product-tile.is-common .product-tile-body{background:var(--navy);}
.product-tile.is-common .product-tile-body h4{color:#fff}
.product-tile.is-common .product-tile-body p{color:#b9c0c7}


.sectionimg{border-radius:12px;}
/* ============================================
   TYPES OF PACKAGING CARDS
   ============================================ */
.package-type-card{display:flex;align-items:flex-start;gap:20px;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md, 12px);padding:28px 24px;box-shadow:0 4px 14px rgba(18,28,39,.05);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.package-type-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(18,28,39,.12);border-color:var(--gold)}
.package-type-num{flex-shrink:0;width:64px;height:64px;border-radius:14px;background:var(--pcolor);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;line-height:1;transition:background .25s ease}
.package-type-card:hover .package-type-num{background:var(--gold)}
.package-type-card h4{font-size:18px;font-weight:700;color:var(--pcolor);margin-bottom:8px}
.package-type-card p{font-size:16px;color:var(--body-text);margin:0;line-height:1.7}
.package-type-card.is-common{background:var(--pcolor);border-color:var(--pcolor)}
.package-type-card.is-common:hover{border-color:var(--gold)}
.package-type-card.is-common .package-type-num{background:var(--gold);color:var(--pcolor)}
.package-type-card.is-common:hover .package-type-num{background:#fff}
.package-type-card.is-common h4{color:#fff}
.package-type-card.is-common p{color:#c7ccd1;margin-bottom:12px}
.package-type-card.is-common a{color:var(--gold);font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.package-type-card.is-common a:hover{color:#fff}
/* ============================================
   CERTIFICATIONS
   ============================================ */
.cert-frame{position:relative;padding:0 34px}
.cert-frame::before,.cert-frame::after{content:"";position:absolute;top:0;bottom:0;width:16px;background:repeating-linear-gradient(45deg,var(--pcolor) 0 6px,#fff 6px 12px)}
.cert-frame::before{left:0}
.cert-frame::after{right:0}
.cert-frame img{width:100%;border:1px solid var(--line)}
.cert-copy{padding-left:20px}
@media(min-width:992px){.cert-copy{padding-left:50px}}



.map-frame{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);}
.map-frame iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:grayscale(.15)}
.location-list{list-style:none;margin:0;position:relative;z-index:1;padding-left: 20px;}
.location-list li{display:flex;align-items:flex-start;gap:2px;margin-bottom:26px;}
.location-list li:last-child{margin-bottom:0}
.location-list li.contact-line{align-items:center}
.location-icon{transform:translateX(-50%);width:46px;height:46px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;border:4px solid #fff;box-shadow:0 8px 20px rgba(18,28,39,.25);transition:background .25s ease;margin-top:10px}
.location-list li.contact-line .location-icon{margin-top:0}
.location-icon{color:var(--pcolor)}
.location-text{font-size:15px;color:var(--text);line-height:1.6;padding-top:8px}
.location-list li.contact-line .location-text{padding-top:0}
.location-text a{color:var(--text)}
.location-text a:hover{color:var(--pcolor)}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{background-image:url('../img/footerbg.jpg');color:var(--gold);padding:60px 0 0}
.site-footer h5{color:var(--gold);font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.site-footer a{color:var(--white)}
.site-footer a:hover{color:var(--gold)}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:10px;font-size:14px}
.footer-contact li{margin-bottom:14px;font-size:14px;display:flex;gap:10px}
.footer-contact i{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:20px 0;font-size:13px;text-align:center;color:#8b929a}



/*** whatsapp chat icon ***/
.whtsapp-icon { 
 position: fixed; 
 right: 90px;
 bottom: 45px; 
 z-index: 120; 
 
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 transition: 250ms color;
 -webkit-transition: 250ms color;
 -moz-transition: 250ms color;
 -ms-transition: 250ms color;
 -o-transition: 250ms color;
 animation-name: wave;
 animation-duration: 1s;
 animation-timing-function: linear;
 animation-iteration-count: infinite; 
}
@keyframes wave {
 0% {box-shadow: 0 0 0px 0px rgba(85, 150, 108, 0.5);}
 100% {box-shadow: 0 0 0px 15px rgba(85, 150, 108, 0);}
}

/*** go top ***/
.gotop {border-radius: 15%;color: #FFFFFF;background-color: #C5161D;
 border-color: #C5161D;box-shadow: rgb(0 0 0 / 9%) 0px 2px 1px, rgb(0 0 0 / 9%) 0px 4px 2px, rgb(0 0 0 / 9%) 0px 8px 4px, rgb(0 0 0 / 9%) 0px 16px 8px, rgb(0 0 0 / 9%) 0px 32px 16px;
}
.gotop {position: fixed; display: none; right: 20px; bottom: 45px; z-index: 99;padding: 0px 16px; border-radius: 15%; color: var(--white); background-color: var(--pcolor) ; border-color: var(--pcolor); box-shadow: rgb(0 0 0 / 9%) 0px 2px 1px, rgb(0 0 0 / 9%) 0px 4px 2px, rgb(0 0 0 / 9%) 0px 8px 4px, rgb(0 0 0 / 9%) 0px 16px 8px, rgb(0 0 0 / 9%) 0px 32px 16px;}
.gotop:hover {background-color: var(--gold)!important;border-color: var(--gold)!important;color: var(--white)!important; }
.topicon { line-height: 2.5!important; vertical-align: -9px !important;}

.tcopyright{
 font-size: 12px;
 color:var(--white);
 font-weight: 400;
 line-height: 17px;
}
.tcopyrightcompany{
 font-size: 12px;
 color: var(--white);
 font-weight: 600;
 line-height: 17px;
}
.tdesignby{
 font-size: 12px;
 color: var(--white);
 font-weight: 400;
 line-height: 17px;
}
/* ============================================
   RESPONSIVE
   ============================================ */
@media only screen and (min-device-width:1500px) and (max-device-width: 1800px){  
.aboutusbg{background-image:url('../img/aboutusimg01.png');background-position:right top,top;background-repeat:no-repeat,no-repeat;background-size: auto, 100% 100%;}
}
@media only screen and (min-device-width:1400px) and (max-device-width: 1499px){  
.aboutusbg{background-image:url('../img/aboutusimg02.png');background-position:right top,top;background-repeat:no-repeat,no-repeat;background-size: auto, 100% 100%;}
}
@media(max-width:1399px){
.aboutusbg{background-image:none}
}
@media(max-width:991px){
	:root{--section-py:60px;--fs-h1:40px;--fs-h2:28px}
	.site-header{position:relative;top:0;background:var(--pcolor);padding:14px 0}
	.hero{min-height:640px}
	.hero-inner{padding-top:360px}
	.hero-stats{position:relative;flex-wrap:wrap;justify-content:center;margin-top:30px}
	.callout-grid{grid-template-columns:repeat(2,1fr)}
	.cert-copy{padding-left:0;margin-top:30px}
.whtsapp-icon {right: 20px; bottom: 115px;}
.tiheading {font-size: 35px;font-weight: 600;line-height: 1.2;}
.tsubheading02 {font-size: 18px;font-weight: 600;}
.spec-table {min-width: 320px;}
	.hero-scroll {    margin-top: 40px;}

.herobg{background-image:url('../img/mobhhero01.jpg');}
.spec-table-wrap {    padding: 10px;}
.spec-table th {    font-size: 15px;
    font-weight: 500;
    text-align: left;
    padding: 9px;
}
.spec-table td {
    text-align: left!important;
    padding: 9px;
    font-size: 15px;
    font-weight: 500;
}
.spec-table td:first-child {
    text-align: left;padding-left:9px
}
.navbar-brand-logo img {
    height: 75px;
    width: auto;
}
}
@media(max-width:575px){
	.hero-title{font-size:35px; font-weight:600;line-height:1.2;}
	.hero-stat{width:50%}
	.callout-grid{grid-template-columns:1fr}
	.code-string{font-size:24px}
	.hero-subtitle {    font-size: 14px;    letter-spacing: 0;}
}