.nutrisafe-hero {
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:20px;
padding:20px 10px;
background-color:#fff;
text-align:center;
max-width:1400px;
margin:0 auto;
position:relative
}

.hero-image-left-top,.hero-image-left-bottom {
width:250px;
height:250px;
border-radius:20px;
overflow:hidden;
box-shadow:0 8px 16px #0000001a;
margin:10px;
flex-shrink:0
}

.hero-image-left-top img,.hero-image-left-bottom img,.hero-image-right img {
width:100%;
height:100%;
object-fit:cover
}

@media (min-width: 768px) {
.nutrisafe-hero {
justify-content:space-between;
text-align:left;
padding:40px
}

.hero-image-left-top {
align-self:flex-start;
margin-right:-100px;
margin-bottom:20px;
margin-left:0;
position:relative;
z-index:2;
left:20px;
top:-20px
}

.hero-image-left-bottom {
align-self:flex-end;
margin-left:-20px;
margin-top:20px;
margin-right:0;
position:relative;
z-index:2;
left:-340px;
bottom:-50px
}

.hero-content {
position:absolute;
top:50px;
left:25%
}
}

@media (min-width: 1200px) {
.hero-image-left-top {
display:none
}

.hero-image-left-bottom {
display:none
}

.hero-image-right {
display:none
}
}

@media (max-width: 767px) {
.hero-image-left-top {
display:none
}

.hero-content {
order:2
}

.hero-image-left-bottom {
display:none
}

.hero-image-right {
display:none
}
}

.hero-content {
flex-grow:1;
max-width:1000px;
padding:20px;
text-align:center
}

.hero-content h1 {
font-size:3.4rem;
font-weight:700;
background:linear-gradient(45deg,#2ecc40,#006400);
-webkit-background-clip:text;
background-clip: text;
-webkit-text-fill-color:transparent;
line-height:1;
margin-bottom:20px
}

.hero-content p {
font-size:1.1rem;
color:#555;
line-height:1.6;
margin-bottom:30px;
max-width:500px;
margin-left:auto;
margin-right:auto
}

.explore-btn {
display:inline-flex;
align-items:center;
background:linear-gradient(45deg,#2ecc40,#006400);
color:#fff;
text-decoration:none;
padding:15px 30px;
border-radius:50px;
font-size:1.1rem;
font-weight:700;
transition:background-color .3s ease,transform .2s ease;
box-shadow:0 4px 10px #0003
}

.explore-btn:hover {
background-color:#388E3C;
transform:translateY(-2px)
}

.explore-btn .arrow {
margin-left:10px;
font-size:1.3rem;
transition:margin-left .3s ease
}

.explore-btn:hover .arrow {
margin-left:15px
}

.hero-image-right {
width:280px;
height:350px;
border-radius:30px;
overflow:hidden;
box-shadow:0 8px 16px #00000026;
margin:10px;
flex-shrink:0
}

@media (min-width: 768px) {
.hero-image-right {
align-self:center;
margin-left:-50px;
position:relative;
z-index:2;
right:0
}
}

@media (max-width: 1024px) {
.hero-content h1 {
font-size:2.8rem
}
}

@media (max-width: 767px) {
.nutrisafe-hero {
flex-direction:column;
padding:10px 15px
}

.hero-image-left-top,.hero-image-left-bottom,.hero-image-right {
width:120px;
height:120px;
border-radius:15px;
margin:5px auto;
position:static
}

.hero-image-right {
height:250px;
width:150px
}

.hero-content {
padding:15px;
order:2
}

.hero-content h1 {
font-size:2.2rem
}

.hero-content p {
font-size:1rem;
text-align:center
}

.hero-image-left-top {
order:1
}

.hero-image-left-bottom {
order:3
}

.hero-image-right {
order:4
}
}

@media (max-width: 480px) {
.hero-content h1 {
font-size:1.8rem
}

.hero-content p {
font-size:.9rem
}

.explore-btn {
padding:12px 25px;
font-size:1rem
}

.mission-section {
margin:20px!important
}
}

.scrolling-banner-container {
width:100%;
overflow:hidden;
background:linear-gradient(115deg,#2ecc40,#006400);
padding:0;
margin:70px 0;
box-sizing:border-box
}

.banner-track {
display:flex;
width:fit-content;
animation:scroll 25s linear infinite
}

.scrolling-banner-container:hover .banner-track {
animation-play-state:paused
}

@keyframes scroll {
from {
transform:translateX(-50%)
}

to {
transform:translateX(0)
}
}

.banner-item {
display:flex;
align-items:center;
white-space:nowrap;
padding:5px 35px;
color:#fff;
font-family:'Arial Black',Gadget,sans-serif;
font-size:1.3rem;
font-weight:500;
text-transform:uppercase
}

.banner-item .dot {
display:inline-block;
width:.8em;
height:.8em;
background-color:#fff;
border-radius:50%;
margin-right:15px
}

@media (max-width: 768px) {
.banner-item {
font-size:1.2rem;
padding:15px 25px
}

.banner-track {
animation-duration:20s
}
}

.ns-section-wrapper {
font-family:Arial,sans-serif;
--ns-primary-green:#19801e;
--ns-dark-green:#1B5E20
}

.ns-container {
max-width:1100px;
margin:0 auto;
padding:0 20px
}

.ns-focus-industries {
background:linear-gradient(75deg,#1dcd32,#006400);
color:#fff;
padding:60px 0;
}

.ns-focus-industries h2 {
font-size:2.8rem;
font-weight:700;
margin-top:0;
margin-bottom:30px
}

.ns-industry-list {
list-style:none;
padding:0;
margin:0;
margin-bottom:40px
}

.ns-industry-list li {
display:flex;
align-items:flex-start;
font-size:1.1rem;
line-height:1.6;
margin-bottom:15px
}

.ns-checkmark {
width:24px;
height:24px;
flex-shrink:0;
margin-right:15px;
margin-top:2px
}

.ns-industry-images {
display:flex;
justify-content:space-around;
flex-wrap:wrap;
gap:20px;
margin-top:50px
}


.ns-image-circle {
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #fff;
    box-shadow:0 4px 15px #0003;
    transition:transform .3s ease
}
.ns-image-circle .left{
object-position: left center;
}

.ns-image-circle:hover {
transform:scale(1.08)
}

.ns-image-circle img {
width:100%;
height:100%;
object-fit:cover
}

.ns-commitment {
background-color:#f8f9fa;
padding:60px 0;
text-align:center
}

.ns-quote {
font-size:2rem;
font-weight:700;
background:linear-gradient(155deg,#2ecc40,#006400);
-webkit-background-clip:text;
background-clip: text;
-webkit-text-fill-color:transparent;
max-width:800px;
margin:0 auto 40px;
line-height:1.4
}

.ns-image-showcase {
position:relative;
max-width:900px;
margin:0 auto
}

.ns-main-image {
width:100%;
height:auto;
border-radius:20px;
box-shadow:0 10px 30px #00000026
}

.ns-logo-overlay {
position:absolute;
width:200px;
top:20px;
left:20px;
filter:drop-shadow(0 4px 8px #0006);
z-index:10
}

.ns-explore-btn {
display:inline-flex;
align-items:center;
background:linear-gradient(155deg,#2ecc40,#006400);
color:#fff;
text-decoration:none;
padding:15px 30px;
border-radius:50px;
font-size:1.1rem;
font-weight:700;
margin-top:40px;
transition:all .3s ease;
box-shadow:0 4px 10px #0003
}

.ns-explore-btn:hover {
background-color:var(--ns-dark-green);
transform:translateY(-3px);
box-shadow:0 6px 15px #00000040
}

.ns-explore-btn .ns-arrow {
margin-left:10px;
font-size:1.3rem;
transition:margin-left .3s ease
}

.ns-explore-btn:hover .ns-arrow {
margin-left:15px
}

@media (max-width: 768px) {
.ns-focus-industries h2 {
font-size:2.2rem;
text-align:center
}

.ns-image-circle {
width:120px;
height:120px
}

.ns-quote {
font-size:1.5rem
}

.ns-logo-overlay {
width:150px;
top:10px;
left:10px
}
}

@media (max-width: 480px) {
.ns-focus-industries h2 {
font-size:1.8rem
}

.ns-industry-list li {
font-size:1rem
}

.ns-image-circle {
width:100px;
height:100px
}

.ns-quote {
font-size:1.2rem
}

.ns-logo-overlay {
width:120px
}

.ns-explore-btn {
padding:12px 25px;
font-size:1rem
}
}

.mission-section {
text-align:center;
margin:50px 20px
}

.mission-section h2 {
font-size:2.2rem;
font-weight:700;
color:#006400
}

.mission-section h2 span {
color:#2ecc40
}

.mission-text {
font-size:1.3rem;
max-width:900px;
margin:15px auto;
color:#064d1f;
line-height:1.6
}

.mission-box {
height:85vh;
width:90%;
border-radius:20px
}

@media (max-width: 768px) {
.mission-text {
font-size:1.1rem;
padding:0 10px
}

.mission-box {
height:200px
}
}

@media (max-width: 480px) {
.mission-section h2 {
font-size:1.6rem
}

.mission-text {
font-size:1rem
}

.mission-box {
height:auto;
width:100%
}
}

.why-section {
text-align:center;
margin:60px 20px
}

.why-section h2 {
font-size:2rem;
font-weight:700;
margin-bottom:15px
}

.why-section h2 span {
color:#2ecc40
}

.why-text {
font-size:1.2rem;
max-width:800px;
margin:25px auto;
text-align:center;
color:#064d1f
}

.why-cards {
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:40px
}

.why-card {
background:linear-gradient(180deg,#2ecc40,#006400);
color:#fff;
border-radius:15px;
padding:10px 20px;
width:270px;
height:320px;
box-shadow:0 4px 10px #00000026;
text-align:center;
transition:transform .3s ease;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}

.why-card i {
font-size:large
}

.why-card img {
width:95%;
height:72%;
margin:0 auto 12px;
border-radius:10px;
object-fit:cover
}

.why-card h3 {
font-size:1rem;
font-weight:500;
margin-top:auto
}

.why-card:hover {
transform:translateY(-8px)
}

.why-btn {
background:linear-gradient(90deg,#2ecc40,#006400);
color:#fff;
border:none;
padding:12px 28px;
border-radius:30px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:.3s
}

.why-btn:hover {
opacity:.9
}

.why-btn a {
text-decoration:none;
color:inherit
}

.why-btn a:hover {
text-decoration:none;
color:inherit
}

.why-btn a:visited {
text-decoration:none;
color:inherit
}

@media (max-width: 768px) {
.why-card {
width:35%;
height:200px
}
}

@media (max-width: 480px) {
.why-card {
width:45%;
height:210px
}

.why-card h2 {
font-size:.9rem
}

.why-text {
font-size:1rem;
padding:0 10px
}
}