/* --- Basic Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Montserrat", sans-serif; line-height: 1.5; }

/* --- Header --- */
header { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000;}
.container { width: 100%; margin: auto; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center;}
.logo { font-size: 1.4rem; font-weight: 700; color: #d21f1f; letter-spacing: 0.5px;}

/* --- Navigation --- */
nav ul { list-style: none; display: flex; gap: 35px;}
nav a { text-decoration: none; color: #333; font-weight: 600; transition: color 0.3s; display: block; padding-top: 10px;}
nav a:hover { color: #d21f1f;}

/* --- Mobile Menu --- */
.menu-toggle { display: none; flex-direction: column; cursor: pointer;}
.menu-toggle span { height: 3px; width: 25px; background: #333; margin: 4px 0; transition: all 0.3s ease;}
.slider { background-image: url("../images/port.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; height: 580px;  color: #fff;}
.slider-container{max-width: 1440px; width: 90%; margin: 0 auto;}
.subline{font-size: 24px; font-style: normal; font-weight: 600; line-height: 33px; /* 137.5% */ letter-spacing: -0.72px; color: #333;}
.onion{display: inline-block; vertical-align: top; margin-top: 54px; width: 30%;}
.headline-block{width: 65%; display: inline-block; vertical-align: top; margin-top: 60px; margin-right: 1%; }
.headline-block h1{color: #002988; font-size: 44px; font-weight: 800; letter-spacing: -1px;line-height: 120%;}
.inquiry-block{width: 33%; display: inline-block; vertical-align: top; padding-top: 65px;}
.inquiry-block-top{border-radius: 10px 10px 0 0; border: 1px solid #D9D9D9; background: #E4EEF2; color: #111; padding:20px 40px; height: 60px; font-size: 18px; font-weight: 800; letter-spacing: -0.48px;}
.inquiry-block-form {border-radius: 0px 0px 10px 10px; border: 1px solid #D9D9D9; background: #ffffff; color: #111; padding:30px 40px; min-height: 390px; font-size: 14px; border-top: 0px;}
a.call-button { border: 1px solid #ddd; padding: 5px 17px 0px 5px; display: block; border-radius: 25px;}
a.call-button span { vertical-align: top; padding-top: 5px; display: inline-block;}

/* form css start */
/* Floating label form */
.form-group { position: relative; margin-bottom: 13px; font-family:"Montserrat", sans-serif;}
.form-group input { width:100%; padding:14px 12px; font-size:1rem; border:1px solid #ccc; border-radius:8px; outline:none; background:#fff;}
.form-group label { position:absolute; left:12px; top:14px; pointer-events:none; color:#888; font-size:1rem; transition:all .18s ease; background:transparent;}
form.contact-form { margin-top: 20px;}
.phoneerror, .emailerror, .nameerror{background-image: url(../images/error.svg);background-repeat: no-repeat; padding-left: 18px; background-size: 14px; display: block; }

/* hide native placeholder text */
.form-group input::placeholder { color: transparent; }

/* float label on focus OR when input has content */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  top:-8px; left:8px; font-size:.78rem; color:#002988;
  padding:0 6px; background:#fff;
}
.form-group input:focus { border-color:#002988; box-shadow:0 0 0 3px rgba(210,31,31,0.06); }
button{ background:#002988;color:#fff;padding:12px;border:none;border-radius:8px; cursor:pointer; font-size: 18px; font-family:"Montserrat", sans-serif; width: 100%; margin-top: 10px;}
/* form css end */

section{ max-width: 1440px; width: 90%; margin: 0 auto; padding: 60px 0px;}
.why-item { width: 25%; display: table-cell; vertical-align: top; padding-left: 30px; border-left: 1px solid #ddd; padding-right: 10px; }
.why-col { margin-top: 40px; }
h2{color: #002988; font-size: 32px; font-weight: 800; letter-spacing: -0.96px; }
h3{font-size: 18px; margin-top: 13px;}
.why-des { font-size: 14px; margin-top: 13px;}
.why-item:first-child {border: 0px; padding-left: 0px;}
section#our-onions{background-color: #E4EEF2; padding: 60px 5%; width:100%}
.our-onion-descrp{width: 66%; display: inline-block; font-weight: 600; font-size: 16px;}
.our-onion-cta{width: 33%;display: inline-block;}
.our-onion-cta span{display: inline-block; width: 35%;}
.our-onion-cta span:first-child { display: inline-block; width: 60%; padding-left: 30px; border-left: 1px solid #A9A9A9; font-weight: 700; }
.our-onion-cta button{padding: 5px 10px; width: 145px;}
.onion-col{padding: 30px 0px; display: flex;}
.our-onion-feature{ width: 33%; display: inline-table; vertical-align: top; margin-bottom: 25px;}
.our-onion-feature span{display: block; }
.product-card {vertical-align: top; margin-right: 20px;}
.product-card { flex: 1; /* make all cards equal width */ display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid #D9D9D9; box-sizing: border-box; border-radius: 10px;}
.product-card:last-child{margin-right: 0px;}
.card-text { padding: 30px; margin-top: -5px; font-size: 14px; flex-grow: 1; }
.card-img label{position: absolute; font-size: 24px; font-weight:bold; color: #fff; margin-top: 49px; padding-left: 30px;}
.card-img img { width: 100%; height: auto; display: block;}
.card-text span{font-size: 16px; font-weight: 500;}
.our-onion-base{font-weight: 600; font-size: 16px; margin-bottom: 30px;}
.our-onion-cta-mob {display: none;}
#export-logistics{background-image: url(../images/export-global.webp); background-position: right top; background-repeat: no-repeat;}
.exp-icon span{display: block; margin: 10px 0px 25px; font-weight: 600; height: 60px;}
.exp-col {width: 20%; display: inline-block; vertical-align: top;}
.export-col { margin-top: 70px;}
#export-logistics button {width: auto; padding: 15px}
.ship-order { background: #EEF4F7; border: 1px solid #DED9D9; border-radius: 10px; padding: 32px 15px 32px 37px; margin-top: 70px;}
.ship-title { font-size: 21px; font-weight: 800; margin-bottom: 10px;}
.ship-order-desc { width: 30%; display: inline-block; vertical-align: top; margin-right: 20px;}
.ship-order-form { display: inline-block; width: 68%; vertical-align: bottom; }
.ship-order-form .form-group { width: 26%; display: inline-block; margin-right:15px; margin-bottom: 7px;}
.ship-order-form span { font-size: 14px;}
.client-col { display: inline-table; vertical-align: top; width: 18.5%; height: 130px; border: 1px solid #A9A9A9; border-radius: 10px; margin: 10px; margin: 1% .5%; }
.client-wrapper { margin-right: -0.5%; margin-left: -0.5%;}
.client-cell { margin: auto; display: table-cell; vertical-align: middle;}
.client-cell img { margin: auto; text-align: center; display: block; vertical-align: middle; max-width: 100%; max-height: 100%;}
.client-desc { font-weight: 600; margin-top: 15px; margin-bottom: 25px;}
section#clients { padding-top: 10px;}
footer { background: #E4EEF2;}
.footer-navigation { display: inline-block; float: right;}
.footer-nav { padding: 60px;}
.footer-logo { display: inline-block;}
.footer-navigation span { padding: 0px 10px;}
.footer-add { padding: 10px 60px; border-top: 1px solid #D9D9D9; font-size: 14px;}
span.foot-add { float: right;}
span.foot-copy { float: left;}
.footer-add { padding: 10px 60px; border-top: 1px solid #D9D9D9; font-size: 14px; display: block; height: 50px;}
.footer-navigation a { text-decoration: none; color: #333;}
.popup { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center;}
.our-onion-feature { width: 31%; display: inline-table; vertical-align: top; margin-bottom: 35px; margin-right: 1%; margin-left: 1%; font-size: 14px;}
span.feature-head { font-size: 18px; font-weight: 700; margin-bottom: 10px;}
.feature-head img { margin-right: 15px; vertical-align: middle;}
.exp-icon-img { height: 51px; overflow: hidden; width: 51px;}
.why-icon { width: 52px; height: 52px; overflow: hidden;}
.mob-call{display: none;}

/* Popup box */
.popup-content { position: relative; background: #fff; padding: 40px 30px; border-radius: 10px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); animation: popupFadeIn 0.3s ease; max-width: 320px;}

/* Close icon */
.close-btn { position: absolute; top: 12px; right: 18px; font-size: 22px; cursor: pointer; color: #777;}

/* Popup heading and message */
.popup-content h3 { margin: 10px 0; color: #002988;}
.popup-content p { font-size: 15px; margin-bottom: 20px;}

/* ✅ Close button */
.popup-close-btn { background: #002988;color: #fff; border: none; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.3s ease;}
.popup-close-btn:hover { background: #002988;}
.popup-content p { color: #111;}
@keyframes popupFadeIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; }}
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}

@media (max-width: 1024px) {
  nav ul { position: absolute; top: 65px; right: 0; background: #fff; flex-direction: column; width: 100%; border-top: 1px solid #eee; display: none;}
  .slider { background-image: url("../images/port-mob.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; height: auto; color: #fff;}
  .inquiry-block {width: 100%; padding-top: 10px;}
  .headline-block h1{font-size: 35px; line-height: 40px; padding-bottom: 10px; }
  .headline-block {width: 100%; padding: 20px 0px; margin-top: 20px;}
  .inquiry-block-form { border-radius: 0px;}
  .subline{font-size: 20px; line-height: 24px;}
  .onion-images{display: none;}
  nav ul.active { display: flex; padding: 20px 30px; gap: 10px; background: #eee; border-bottom: 1px solid #ddd;}
  #nav-links li { border-bottom: 1px solid #ddd;}
  a.call-button { margin-top: 19px;}
  .mob-call a.call-button { margin-right: 25px; margin-top: 0px; height: 42px;} 
  .container{justify-content: normal;}
  .menu-toggle { display: flex;}
  .logo { width: calc(100vw - 125px);}
  .logo img { max-width: 200px;}
  .logoimg { width: 170px;}
  .why-des { font-size: 14px; margin-bottom: 13px; display: inline-block; width: calc(100% - 85px); margin-left: 25px; vertical-align: top; margin-top: 0px;}
  .why-icon { display: inline-block; vertical-align: top; }
  h3 { margin-top: 0px; margin-bottom: 7px;}
  .why-item { width: 100%; display: block; vertical-align: top; padding-left: 0px; border-left: 0px; margin-bottom: 35px;}
  h2{font-size: 24px;}
  section { width: 100%; margin: 0 auto; padding: 60px 40px; }
  .our-onion-descrp {width: 100%;}
  .our-onion-cta{display: none;}
  .our-onion-cta-mob {display: block; padding-top: 30px; border-top: 1px solid #ccc;}
  .our-onion-feature { width: 100%;}
  .mob-call{display: inline-block;}
  a.call-button {  padding: 5px;}

  .onion-col { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 15px; padding-bottom: 10px; margin-left: -48px; margin-right: -48px; padding-left: 48px !important; padding-right: 48px !important;}
  .product-card { flex: 0 0 80%; scroll-snap-align: start; margin-right: 0; max-width: 380px;}
  .our-onion-descrp,.our-onion-cta { width: 100%; text-align: left; padding: 10px 0;}
  .our-onion-cta span:first-child { border-left: none; padding-left: 0;}
  .card-img label { font-size: 24px; font-weight: bold; color: #fff; margin-bottom: -85px; padding-left: 30px; display: block; z-index: 100; position: relative;}
  .card-img img { width: 100%; z-index: 10; position: relative;}
  .onion-col { padding: 30px 0px;}
  .our-onion-cta-mob button { width: auto; display: block;}
  .our-onion-base { margin-top: 30px;}

  .exp-icon-img { display: inline-block; width: 50px; margin-right: 15px;}
  .exp-icon span { display: inline-block; margin: 10px 0px 25px 0px; font-weight: 600; height: auto; vertical-align: top; width: 79%;}
  .exp-col { width: 100%; display: block;}
  .export-col { margin-top: 31vh;}
  #export-logistics { background-image: url(../images/export-global.webp); background-size: 127%; background-repeat: no-repeat; background-position: -95px 42px; background-repeat: no-repeat;}
  .ship-order-desc { width: 100%; display: block;}
  .ship-order-form .form-group { width: auto; display: block;}
  .ship-order-form { display: block; width: 100%;}

  .client-wrapper { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 10px; padding: 10px 0;  margin-right: -30px; margin-left: -30px; padding-left: 30px; padding-right: 30px;}
  .client-col { flex: 0 0 70%; scroll-snap-align: start; margin: 0; max-width: 225px;}
  span.foot-add { float: none; height: 30px; display: block;}
  span.foot-copy { float: none; height: 30px;}
  .footer-add { padding: 10px 30px; height: auto;}
  .footer-navigation { display: none;}
  .footer-nav { padding: 30px; height: 150px;}
  .inquiry-block-top{padding:20px 25px; font-size: 17px; font-weight: 800; letter-spacing: -0.48px;}
  .inquiry-block-form {padding:30px 25px; min-height: 390px; font-size: 14px; border-top: 0px;}
  .ship-order-form .mobile-input { width: 49% !important;}
  /*.country-code { width: 49.5%;}*/
  .ship-order { padding: 32px 20px 32px 20px;}
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .ship-order-form { width: 100%;}
    .ship-order-desc { width: 100%;}
    .inquiry-block-top { padding: 20px 20px;  font-size: 16px;}
    .inquiry-block-form { padding:30px;}
    .headline-block h1 {line-height: 52px; margin-bottom: 15px;}
    .card-img label { margin-top: 35px;}
    .product-card { margin-right: 20px; flex: 1; background-color: #fff; border-radius: 10px; border: 1px solid #D9D9D9; max-width: 400px;}
    .card-text {border: 0px;}
}

.inquiry-block-form { margin: auto;}
.form-group { position: relative; margin-bottom: 20px;}
.form-group input,.country-code select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; outline: none; font-size: 16px; background: white; color: #333;  font-family: 'Montserrat'; font-weight: 600;}
.form-group label { position: absolute; top: 14px; left: 12px; font-size: 16px; color: #888; transition: all 0.2s ease; pointer-events: none; background-color: white;}
.form-group input:focus + label, .form-group input:not(:placeholder-shown) + label { top: -10px; left: 10px; font-size: 12px; background: white; padding: 1px 8px; color: #333; border-radius: 9px; border: 1px solid #eee;}

/* Country code + mobile side-by-side */
.mobile-group { display: flex; gap: 10px;}
.country-code select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; background: #fff; cursor: pointer; font-family: 'Montserrat'; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.mobile-input { flex-grow: 1; position: relative;}
button { width: 100%; padding: 12px; border: none; border-radius: 6px; background-color: #002988; color: #fff; font-size: 16px; cursor: pointer;}
button:hover { background-color: #002988;}

/* Responsive layout: stack fields on small screens */
@media (max-width: 480px) and (min-width: 320px) {
/*  .mobile-group { flex-direction: column;}
/*  .country-code select { width: 100%; }
/*.ship-order-form .country-code { width: 48.5% !important; }
.inquiry-block-form .country-code { width: 100% !important; }*/
}

.ship-order-form .form-group { width: 25%; display: inline-block; margin-right: 15px; margin-bottom: 10px; position: relative; vertical-align: top;}

/* Input + floating label styling */
.ship-order-form input,.ship-order-form select { width: 100%; padding: 15px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; outline: none; background: white;}
.ship-order-form label { position: absolute; top: 16px; left: 12px; color: #777; font-size: 14px; pointer-events: none; transition: 0.2s ease all; background: white; padding: 0 4px;}
.ship-order-form input:focus + label, .ship-order-form input:not(:placeholder-shown) + label { top: -12px; left: 10px; font-size: 12px; color: #333;}

/* Country + Mobile field alignment */
.ship-order-form .mobile-group { gap: 10px; width: 30%;}
.country-code { display: inline-block; vertical-align: top; width: 49%;}
.ship-order-form button{margin-top: 0px;}
.ship-order-form .country-code select { border: 1px solid #ccc; border-radius: 6px; font-size: 14px; padding: 16px 12px; background: #fff; color: #333; cursor: pointer; appearance: none;}
.ship-order-form .mobile-input { flex-grow: 1; position: relative; width: 49%;}
.mobile-input { display: inline-block; width: 49%;}

/* Submit button */
.ship-order-form button { padding: 10px 24px; border: none; border-radius: 6px; background-color: #002988; color: #fff; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease;}
.ship-order-form button:hover { background-color: #002988;}
.ship-order-form span { font-size: 14px; display: block; margin-top: 10px;}

/* Responsive for small screens */
@media (max-width: 1024px) {
  .ship-order-form {  width: 100%; }
  .ship-order-form .form-group, .ship-order-form .mobile-group { width: 100%; display: block;}
  .ship-order-form .mobile-group { flex-direction: column; gap: 0;}
  .ship-order-form .country-code select {  width: 100%; }
  .ship-order-form button {  width: 100%; margin-top: 10px;}
}