/* =========================================================
   OCTARCTIC WORLDWIDE EXPORTS — token system
   Color:   deep ocean #071b2c, mid navy #0e3350, slate #4d6d87,
            saffron #d98e3f (spice accent), cream #f2ede2,
            teal-glow #2f8f8a
   Type:    Fraunces (display serif) / Inter (body) / Space Mono (labels)
   Layout:  full-bleed ocean hero with an animated container ship
            sailing continuously across it — the signature element
   ========================================================= */

:root{
  --ocean-deep:   #b2beca;
  --ocean-mid:    #0e3350;
  --ocean-light:  #164267;
  --slate:        #4d6d87;
  --slate-soft:   #607f97;
  --saffron: linear-gradient(135deg, #0c2947, #0e3850); 
  --saffron-dim:  #a8692a;
  --teal:         #2f8f8a;
  --cream:        #f2ede2;
  --cream-dim:    rgba(242,237,226,0.72);
  --cream-faint:  rgba(242,237,226,0.45);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "Space Mono", monospace;

  --ease: cubic-bezier(.22,.9,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ocean-deep);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal, .reveal-up{
  opacity:1;
  transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in, .reveal-up.in{ opacity:1; transform:translateY(0); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg, rgb(2, 34, 54), rgba(10, 42, 71, 0.6));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(242,237,226,0.08);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.25); }
.nav-inner{
  max-width:1280px; margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{ color:var(--saffron); display:flex; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.06em; }
.brand-text small{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em; color:var(--cream-dim); text-transform:uppercase; }

.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-size:.84rem; letter-spacing:.03em; color:var(--cream-dim);
  position:relative; padding:6px 0; transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--saffron); transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--cream); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.chat-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    background:var(--saffron);
    color:#fcfdfd;              /* Text color */
    border:2px solid transparent;
background:linear-gradient(#0d3446,#0d3446) padding-box,linear-gradient(135deg,#4d4a3d,#c9b37d,#4d4a3d) border-box;

    border-radius:889px;
    padding:8px 16px;

    font-size:.82rem;
    font-weight:600;
    letter-spacing:.02em;
    cursor:pointer;

    transition:
        transform .28s ease-out,
        background-color .28s ease-out,
        border-color .28s ease-out,
        color .28s ease-out,
        box-shadow .28s ease-out;
}

.chat-btn:hover{
    background:#0d3446e5;
    color:#cccccc;
    border-color:#8c8d8f;       /* Border appears */
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.hamburger span{ width:22px; height:2px; background:var(--cream); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .hamburger{ display:flex; }
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; gap:0; background:var(--ocean-mid);
    max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
    border-bottom:1px solid rgba(242,237,226,.1);
  }
  .nav-links.open{ max-height:300px; }
  .nav-links a{ padding:16px 32px; border-bottom:1px solid rgba(242,237,226,.06); }
  .chat-btn{ display:none; }
}

/* ---------- HERO HOMEPAGE ONLY ---------- */
.hero{
  position:relative;
  min-height:1450px;
  overflow:hidden;
  background:#061420;
}

.hero-bg{
  position:absolute;
  inset:90px 16px 0;
  z-index:0;
  overflow:hidden;
  background:#061420;
}

.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      to bottom,
      rgba(6,20,32,.08) 0%,
      rgba(6,20,32,.05) 55%,
      #061420 100%
    ),
    url("images/ship.png");

  background-position:center top;
  background-size:100% auto;
  background-repeat:no-repeat;
  opacity:1;
}
@media(min-width:1400px){
  .hero-bg::before{
    background-size:100% auto;
    background-position:center top;
  }
}
#wakeCanvas,
.ship{
  display:none;
}

.hero-content{
  position:relative;
  z-index:2;
  width:360px;
  padding-top:190px;
  margin-left:105px;
}

.hero-content .eyebrow{
  display:none;
}

.hero h1{
  font-size:41px;
  line-height:1.08;
  color:#f2ede2;
  margin-bottom:32px;
}

.hero-copy{
  font-size:13px;
  line-height:1.35;
  color:#fff;
  margin-bottom:18px;
}
.btn-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    background:linear-gradient(135deg,#0c274785,#3b6d8c8e);
    color:#fff;
    border:1.5px solid #423a26;
    border-radius:50px;
    font:700 12px "Nunito Sans", sans-serif;
    text-decoration:none;
    transition:.3s ease;
}

.btn-outline .arrow{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e5d39a;
    border-radius:50%;
    font-size:9px;
    transition:.3s ease;
}

.btn-outline:hover{
    background:linear-gradient(135deg,#123b61,#546e80a2);
    border-color:#6e6136;
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.btn-outline:hover .arrow{
    transform:translateX(1px);
    border-color:#fff;
}
.story-content{
  position:relative;
  z-index:2;
  width:390px;
  margin-left:105px;
  margin-top:150px;
}

.story-content h2{
  font-size:42px;
  line-height:1.05;
  margin-bottom:30px;
  color:#f2ede2;
}

.story-copy{
  font-size:13px;
  line-height:1.35;
  color:#fff;
  margin-bottom:18px;
}

/* ---------- PRODUCTS HOMEPAGE ONLY ---------- */
.section-label{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 40px;
}

.section-label span{
    display:flex;
    justify-content:center;
    align-items:center;
    width:300px;
    height:60px;
    margin:0 auto;
    background:#2e4863e0;
    color:#fff;
    border-radius:14px;
    font-family:'Fraunces',serif;
    font-size:34px;
    font-weight:500;
    text-align:center;
}

.product-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:44px;
}

.product-card{
  grid-column:span 2;
  height:430px;
  border-radius:12px;
  background:#0c2947f3;
  overflow:hidden;
  aspect-ratio:auto;
  border:3px solid #0c2947f3;
}

.product-grid .product-card:nth-child(4){
  grid-column:2 / span 2;
}

.product-grid .product-card:nth-child(5){
  grid-column:4 / span 2;
}

.product-art{
  height:320px;
  position:relative;
}

.product-photo{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-name{
  position:center;
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#165479d7;
  font-family:'Fraunces',serif;
  font-size:28px;
  font-weight:400;
  text-transform:uppercase;
  color:#fff;
}

/* ---------- STRENGTHS HOMEPAGE ONLY ---------- */
.strengths{
  padding:65px 80px 140px;
  background:linear-gradient(90deg,#02060b 0%,#17324f 100%);
}

.strength-grid{
  max-width:1100px;
  margin:85px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:105px;
}

.strength-card{
  width:190px;
  height:175px;
  padding:28px 18px;
  background:#294f72;
  border-radius:14px;
  border:none;
  text-align:center;
}

.strength-icon{
  width:55px;
  height:55px;
  margin:0 auto 18px;
  color:#fff;
  border:none;
}

.strength-icon svg{
  width:55px;
  height:55px;
}

.strength-card h3{
  font-family:'Fraunces',serif;
  font-size:12px;
  color:#d98e3f;
  font-weight:700;
  margin-bottom:8px;
}

.strength-card p{
  font-size:11px;
  color:#fff;
}

/* ---------- RESPONSIVE HOMEPAGE ---------- */
@media(max-width:900px){
  .hero{
    min-height:auto;
    padding:140px 25px 80px;
  }

  .hero-bg{
    position:absolute;
    inset:0;
    height:auto;
  }

  .hero-content,
  .story-content{
    width:100%;
    margin-left:0;
    padding-top:0;
  }

  .story-content{
    margin-top:80px;
  }

  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .product-card,
  .product-grid .product-card:nth-child(4),
  .product-grid .product-card:nth-child(5){
    grid-column:auto;
  }

  .strength-grid{
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    justify-items:center;
  }
}

@media(max-width:600px){
  .product-grid,
  .strength-grid{
    grid-template-columns:1fr;
  }

  .product-card{
    height:390px;
  }

  .section-label span{
    min-width:220px;
    font-size:26px;
  }
}


/* ---------- FOOTER ---------- */
.footer{ background:var(--slate); color:var(--ocean-deep); }
.footer-top{
  max-width:1180px; margin:0 auto; padding:70px 8vw 50px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
}
.footer-brand{ display:flex; gap:14px; align-items:flex-start; }
.footer-brand .brand-mark{ color:var(--ocean-deep); flex-shrink:0; }
.footer-brand p{ font-size:.88rem; color:rgba(7,27,44,.75); max-width:280px; }
.footer-col h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; color:rgba(7,27,44,.6); }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.88rem; display:flex; align-items:center; gap:8px; color:var(--ocean-deep); opacity:.85; transition:opacity .2s ease; }
.footer-col a:hover{ opacity:1; text-decoration:underline; }

.global-reach{
  position:relative; background:var(--ocean-deep); color:var(--cream);
  padding:70px 8vw; overflow:hidden; min-height:260px;
  display:flex; align-items:center;
}
#mapCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.reach-copy{ position:relative; z-index:2; max-width:560px; }
.reach-copy h3{ font-size:clamp(1.8rem,3.6vw,2.6rem); text-transform:uppercase; letter-spacing:.02em; margin-bottom:14px; }
.reach-copy p{ color:var(--cream-dim); font-size:1rem; }

.footer-bottom{
  text-align:center; padding:20px; font-size:.78rem;
  background:#3f5a70; color:rgba(242,237,226,.7);
}

@media (max-width:760px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ---------- misc ---------- */
::selection{ background:var(--saffron); color:var(--ocean-deep); }
.brand-logo-img{
  width:36px; height:auto; display:block;
}
.footer-brand .brand-logo-img{
  width:44px;
}

.ship-photo{
  width:150px; height:auto;
  display:block; border-radius:6px;
}
.product-photo{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/*==========================
GRAINS PAGE
===========================*/

.grain-page{
    width:100%;
    padding:80px 0;
    background:linear-gradient(90deg,#03070c,#17324f);
}

.grain-title{
    display:flex;
    justify-content:center;
    margin-bottom:60px;
}

.grain-title h2{
    background:#3f5670d8;
    color:#fff;
    padding:15px 70px;
    border-radius:16px;
    font-size:34px;
    font-family:'Fraunces',serif;
    letter-spacing:2px;
}

.grain-container{
    width:85%;
    max-width:1050px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:35px;
}

/* Every card spans 2 columns */
.grain-card{
    grid-column:span 2;
    width:100%;
    max-width:280px;
    margin:auto;
    background:#2f4358e7;
    border-radius:16px;
    overflow:hidden;
    transition:.35s ease;
}

/* Second row centered */
.grain-card:nth-child(4){
    grid-column:2 / span 2;
}

.grain-card:nth-child(5){
    grid-column:4 / span 2;
}

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

.grain-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.grain-content{
    padding:18px;
}

.grain-content h3{
    color:#fff;
    font-size:26px;
    text-align:center;
    margin-bottom:15px;
    letter-spacing:1px;
}

.grain-content hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.35);
    margin-bottom:18px;
}

.grain-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.grain-bottom span{
    background:#7d9cc4;
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:6px 12px;
    border-radius:6px;
}

.grain-bottom a{
    color:#fff;
    font-size:20px;
    transition:.3s;
}

.grain-card:hover a{
    transform:translateX(5px);
}
/*==========================
VEGETABLES PAGE
===========================*/

.vegetable-page{
    width:100%;
    padding:80px 0;
    background:linear-gradient(90deg,#03070c,#17324f);
}

.vegetable-container{
    width:85%;
    max-width:1050px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:35px;
}

.vegetable-card{
    grid-column:span 2;
    width:100%;
    max-width:280px;
    margin:auto;
    background:#6f88a3;
    border-radius:16px;
    overflow:hidden;
    transition:.35s ease;
}

/* Third row: 2 cards centered */
.vegetable-card:nth-child(7){
    grid-column:2 / span 2;
}

.vegetable-card:nth-child(8){
    grid-column:4 / span 2;
}

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

.vegetable-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.vegetable-content{
    padding:18px;
}

.vegetable-content h3{
    color:#fff;
    font-size:26px;
    text-align:center;
    margin-bottom:15px;
    letter-spacing:1px;
}

.vegetable-content hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.35);
    margin-bottom:18px;
}

.vegetable-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.vegetable-bottom span{
    background:#7d9cc4;
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:6px 12px;
    border-radius:6px;
}

.vegetable-bottom a{
    color:#fff;
    font-size:20px;
    transition:.3s;
}

.vegetable-card:hover a{
    transform:translateX(5px);
}

/* Tablet */
@media(max-width:992px){
    .vegetable-container{
        grid-template-columns:repeat(2,1fr);
        max-width:700px;
        justify-items:center;
    }

    .vegetable-card,
    .vegetable-card:nth-child(7),
    .vegetable-card:nth-child(8){
        grid-column:auto;
    }
}

/* Mobile */
@media(max-width:600px){
    .vegetable-container{
        grid-template-columns:1fr;
    }

    .vegetable-card,
    .vegetable-card:nth-child(7),
    .vegetable-card:nth-child(8){
        grid-column:auto;
        max-width:320px;
    }

    .vegetable-card img{
        height:230px;
    }

    .vegetable-content h3{
        font-size:24px;
    }
}

/*==========================
PULSES PAGE
===========================*/

.pulse-container{
    width:85%;
    max-width:1050px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:35px;
}

/* Cards */
.pulse-container .grain-card{
    grid-column:span 2;
    width:100%;
    max-width:280px;
    margin:auto;
    display:flex;
    flex-direction:column;
}

/* Center last card */
.pulse-container .grain-card:nth-child(4){
    grid-column:3 / span 2;
}

/* Equal content height */
.pulse-container .grain-content{
    padding:18px;
    min-height:130px;
    display:flex;
    flex-direction:column;
}

/* Equal title height */
.pulse-container .grain-content h3{
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
    font-size:24px;
    margin-bottom:15px;
}

/* Keep bottom aligned */
.pulse-container .grain-bottom{
    margin-top:auto;
}

/* Tablet */
@media(max-width:992px){

    .pulse-container{
        grid-template-columns:repeat(2,1fr);
        justify-items:center;
    }

    .pulse-container .grain-card,
    .pulse-container .grain-card:nth-child(4){
        grid-column:auto;
    }
}

/* Mobile */
@media(max-width:600px){

    .pulse-container{
        grid-template-columns:1fr;
    }

    .pulse-container .grain-card,
    .pulse-container .grain-card:nth-child(4){
        grid-column:auto;
    }
}
/*==========================
PRODUCTS PAGE
===========================*/

.products{
    width:100%;
    padding:150px 0 120px;
    background:linear-gradient(90deg,#02060b 0%, #17324f 100%);
}
/* FIX: show products on products page */
.products .reveal-up{
  opacity:1;
  transform:none;
}
/*==================================================
SPICES PAGE
==================================================*/

.spice-page{
    width:100%;
    padding:80px 0 120px;
    background:linear-gradient(90deg,#02060b 0%,#17324f 100%);
}

.spice-page-inner{
    width:90%;
    max-width:1320px;
    margin:auto;
}

.spice-title-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:60px;
}

.spice-title-pill{
    background:#506a85;
    color:#fff;
    padding:15px 95px;
    border-radius:16px;
    font-family:'Fraunces',serif;
    font-size:34px;
    font-weight:500;
    letter-spacing:2px;
}

.spice-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:38px;
}

.spice-card{
    background:#67819d;
    border-radius:16px;
    overflow:hidden;
    transition:.35s;
}

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

.spice-card img{
    width:100%;
    height:320px;
    object-fit:cover;
}

.spice-content{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    background:#67819d;

    padding:22px 28px;

    min-height:150px;
}
.spice-content h3{
    display:block;

    color:#fff;

    font-family:'Inter',sans-serif;
    font-size:28px;
    font-weight:600;

    line-height:1.2;

    margin:0 0 18px;

    text-align:center;

    text-transform:uppercase;
}

.spice-content hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.35);
    margin-bottom:22px;
}

.spice-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.spice-bottom span{
    background:#7d9cc4;
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:7px 14px;
    border-radius:7px;
}

.spice-bottom a{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    color:#5d7894;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:11px;
}
@media(max-width:992px){

    .spice-container{
        grid-template-columns:repeat(2,1fr);
    }

    .spice-card:last-child{
        grid-column:1/-1;
        width:50%;
        justify-self:center;
    }

}

@media(max-width:650px){

    .spice-container{
        grid-template-columns:1fr;
    }

    .spice-card:last-child{
        width:100%;
    }
}
/* FIX SPICE NAMES */

.spice-card .spice-content{
    display:block;
    min-height:145px;
    padding:22px 28px 26px;
    background:#67819d;
}
.spice-card h3{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    font-size:28px !important;
    font-family:'Inter',sans-serif !important;
    text-align:center !important;
    margin:0 0 16px !important;
    text-transform:uppercase !important;
}
/* HEADER LOGO */

.brand-mark{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.brand-logo-img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:50%;
    display:block;
}
.brand-logo-img{
    width:36px;
    height:auto;
}

/* ==================================================
   FRUITS PAGE
================================================== */

.fruit-page{
    width:100%;
    min-height:920px;
    padding:150px 0 100px;

    background:linear-gradient(
        90deg,
        #02070c 0%,
        #0b1e30 48%,
        #193b5d 100%
    );
}

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

.fruit-title{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:70px;
}

.fruit-title h2{
    width:310px;
    padding:13px 20px;

    background:#536f89;
    color:#ffffff;

    border-radius:15px;

    font-family:'Fraunces',serif;
    font-size:35px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:1px;

    text-align:center;
    text-transform:uppercase;
}

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

.fruit-container{
    width:94%;
    max-width:1210px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:48px 42px;
}

/* ---------- CARDS ---------- */

.fruit-card{
    grid-column:span 2;

    width:100%;
    max-width:350px;
    min-height:455px;
    margin:0 auto;

    display:flex;
    flex-direction:column;

    background:#67839e;

    border:4px solid #536d84;
    border-radius:16px;

    overflow:hidden;

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

/* Center second-row cards */

.fruit-card:nth-child(4){
    grid-column:2 / span 2;
}

.fruit-card:nth-child(5){
    grid-column:4 / span 2;
}

.fruit-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.3);
}

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

.fruit-card img{
    width:100%;
    height:300px;

    display:block;

    object-fit:cover;
    object-position:center;

    border-radius:11px 11px 0 0;
}

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

.fruit-content{
    flex:1;

    min-height:155px;
    padding:19px 26px 23px;

    display:flex;
    flex-direction:column;

    background:#67839e;
}

.fruit-content h3{
    margin:0 0 14px;

    color:#ffffff;

    font-family:'Fraunces',serif;
    font-size:28px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:.5px;

    text-align:center;
    text-transform:uppercase;
}

.fruit-content hr{
    width:100%;
    margin:0 0 21px;

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

/* ---------- QUALITY ROW ---------- */

.fruit-bottom{
    margin-top:auto;

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

.fruit-bottom span{
    padding:6px 10px;

    background:#7da3cf;
    color:#ffffff;

    border-radius:7px;

    font-family:'Fraunces',serif;
    font-size:12px;
    font-weight:600;
    line-height:1;

    text-transform:uppercase;
}

.fruit-bottom a{
    width:19px;
    height:19px;

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

    background:#ffffff;
    color:#63809e;

    border-radius:50%;

    font-size:10px;
    line-height:1;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease;
}

.fruit-bottom a:hover{
    transform:rotate(90deg) scale(1.1);
    background:#e8eef5;
}
/* ==================================================
   FRUITS RESPONSIVE
================================================== */

@media(max-width:1000px){

    .fruit-container{
        width:88%;
        max-width:760px;

        grid-template-columns:repeat(2,1fr);
        gap:38px;
    }

    .fruit-card,
    .fruit-card:nth-child(4),
    .fruit-card:nth-child(5){
        grid-column:auto;
    }

    .fruit-card:nth-child(5){
        grid-column:1 / -1;
        width:calc(50% - 19px);
        justify-self:center;
    }
}

@media(max-width:650px){

    .fruit-page{
        padding:120px 0 75px;
    }

    .fruit-title{
        margin-bottom:45px;
    }

    .fruit-title h2{
        width:230px;
        font-size:28px;
    }

    .fruit-container{
        width:88%;
        grid-template-columns:1fr;
        gap:30px;
    }

    .fruit-card,
    .fruit-card:nth-child(4),
    .fruit-card:nth-child(5){
        grid-column:auto;
        width:100%;
        max-width:350px;
    }

    .fruit-card img{
        height:275px;
    }

    .fruit-content h3{
        font-size:24px;
    }

    .fruit-navigation{
        margin-top:55px;
    }
}
/* ==========================================
   CERTIFICATIONS PAGE
========================================== */

.certification-page{
    width:100%;
    padding:60px 0 100px;

    background:
        linear-gradient(
            110deg,
            #020609 0%,
            #06101b 42%,
            #173653 100%
        );

    color:#ffffff;
}

.certification-container{
    width:86%;
    max-width:1120px;
    margin:0 auto;
}

/* ---------- PAGE TITLE ---------- */

.certification-title{
    width:max-content;
    margin:0 auto 48px;
    padding:11px 28px;

    font-family:"Fraunces", serif;
    font-size:31px;
    font-weight:400;
    line-height:1;

    color:#ffffff;
    background:#587691;

    border-radius:15px;
    text-align:center;
}

/* ---------- INTRO TEXT ---------- */

.certification-intro{
    max-width:850px;
    margin:0 auto 62px;

    font-family:"Inter", sans-serif;
    font-size:15px;
    font-weight:500;
    line-height:1.55;

    color:#ffffff;
    text-align:center;
}

/* ---------- CERTIFICATE LIST ---------- */

.certificate-list{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:42px;
}

/* ---------- CERTIFICATE BOX ---------- */

.certificate-box{
    width:100%;
    min-height:540px;

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

    background:#d9d9d9;
    border:2px solid #ff8b2b;

    overflow:hidden;
}

/* ---------- CERTIFICATE IMAGE ---------- */

.certificate-box img{
    display:block;
    width:100%;
    height:auto;
    max-height:650px;

    object-fit:contain;
    background:#ffffff;
}

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

@media(max-width:992px){

    .certification-container{
        width:90%;
    }

    .certificate-box{
        min-height:430px;
    }
}

@media(max-width:768px){

    .certification-page{
        padding:45px 0 70px;
    }

    .certification-title{
        margin-bottom:35px;
        padding:10px 22px;
        font-size:25px;
    }

    .certification-intro{
        margin-bottom:45px;
        font-size:14px;
    }

    .certificate-list{
        gap:28px;
    }

    .certificate-box{
        min-height:300px;
    }
}

@media(max-width:480px){

    .certification-container{
        width:92%;
    }

    .certification-title{
        font-size:21px;
        border-radius:10px;
    }

    .certification-intro{
        font-size:13px;
    }

    .certificate-box{
        min-height:220px;
    }
}
/* ==================================================
   ABOUT PAGE — MATCH SCREENSHOT
================================================== */

.about-page{
    width:100%;
    min-height:620px;
    padding:70px 0;
    color:#fff;

    background:linear-gradient(
        110deg,
        #020608 0%,
        #081522 42%,
        #173b5d 100%
    );
}

.about-page .container{
    width:82%;
    max-width:1250px;
    margin:auto;

    display:grid;
    grid-template-columns:1.08fr .92fr;
    column-gap:70px;
    align-items:center;
}

/* ABOUT TEXT */

.about-page h1{
    grid-column:1;
    margin:0 0 28px;

    font-family:"Fraunces",serif;
    font-size:40px;
    font-weight:500;
    line-height:1.1;
    color:#fff;
}

.about-page h3{
    grid-column:1;
    margin:0 0 25px;

    font-family:"Inter",sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1.25;
    color:#fff;
}

.about-page p{
    grid-column:1;
    margin:0;
    max-width:610px;

    font-family:"Inter",sans-serif;
    font-size:13px;
    line-height:1.28;
    font-weight:400;
    color:#f3f3f3;

    text-align:left;
}

/* ABOUT COLLAGE IMAGE */

.about-page img{
    grid-column:2;
    grid-row:1 / span 3;

    width:100%;
    max-width:485px;
    height:auto;
    margin-left:auto;

    object-fit:contain;
}
/* ==================================================
   FOUNDER SECTION
================================================== */

.founder{
    width:100%;
    padding:52px 0 38px;
    background:#dedede;
    color:#19354f;
}

.founder .container{
    width:86%;
    max-width:1250px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:120px;
    align-items:center;
}

/* FOUNDER IMAGE SIDE */

.founder-image{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.founder-image img{
    display:block;

    width:385px;
    height:430px;

    object-fit:cover;
    object-position:center 30%;

    border:3px solid #718aa1;
    border-radius:7px;
    background:#1d4264;
    
}

/* NAME BELOW IMAGE */

.founder-name{
    margin:20px 0 4px;

    font-family:"Fraunces",serif;
    font-size:39px;
    font-weight:500;
    line-height:1;
    color:#19354f;
    text-align:center;
}

.founder-role{
    margin:0;

    font-family:"Inter",sans-serif;
    font-size:15px;
    font-weight:700;
    color:#173c60;
    text-align:center;
}

/* FOUNDER CONTENT SIDE */

.founder-content{
    text-align:right;
}

.founder-content h2{
    margin:0 0 34px;

    font-family:"Fraunces",serif;
    font-size:40px;
    font-weight:500;
    line-height:1.1;
    color:#19354f;
}

.founder-content h3{
    margin:0 0 23px;

    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.3;
    color:#19354f;
}

.founder-content p{
    max-width:340px;
    margin-left:auto;

    font-family:"Inter",sans-serif;
    font-size:13px;
    line-height:1.35;
    color:#405b72;
}


/* ==================================================
   CORE VALUES
================================================== */

.values{
    width:100%;
    min-height:520px;
    padding:75px 6% 100px;

    background:linear-gradient(
        110deg,
        #020608 0%,
        #071522 40%,
        #173c5e 100%
    );
}

/* CORE VALUES HEADING BOX */

.values > h2{
    width:305px;
    margin:0 auto 68px;
    padding:10px 20px;

    border-radius:14px;

    background:linear-gradient(
        90deg,
        #1d4265,
        #65829d
    );

    font-family:"Fraunces",serif;
    font-size:31px;
    font-weight:400;
    line-height:1.2;
    text-align:center;
    color:#fff;
}

/* CARDS */

.values .strength-grid{
    width:100%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:85px;
}

.values .strength-card{
    min-height:180px;
    padding:28px 15px 22px;

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

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #214766 0%,
        #708a9f 100%
    );

    text-align:center;
}

/* ICON */

.values .strength-icon{
    width:54px;
    height:54px;
    margin-bottom:20px;

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

    font-size:43px;
    color:#fff;
}

/* CARD TEXT */

.values .strength-card h3{
    margin:0 0 17px;

    font-family:"Inter",sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    color:#ff8a1c;
}

.values .strength-card p{
    margin:0;

    font-family:"Inter",sans-serif;
    font-size:11px;
    font-weight:500;
    line-height:1.4;
    color:#fff;
}


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

@media(max-width:992px){

    .about-page .container{
        width:88%;
        grid-template-columns:1fr;
        row-gap:45px;
        text-align:center;
    }

    .about-page h1,
    .about-page h3,
    .about-page p,
    .about-page img{
        grid-column:1;
        grid-row:auto;
    }

    .about-page p{
        margin:auto;
    }

    .about-page img{
        max-width:430px;
        margin:auto;
    }

    .founder .container{
        width:88%;
        grid-template-columns:1fr;
        row-gap:45px;
    }

    .founder-content{
        text-align:center;
    }

    .founder-content p{
        margin:auto;
    }

    .values .strength-grid{
        grid-template-columns:repeat(2,1fr);
        gap:35px;
    }
}

@media(max-width:600px){

    .about-page{
        padding:50px 0;
    }

    .about-page h1{
        font-size:34px;
    }

    .about-page p{
        font-size:12px;
        line-height:1.4;
    }

    .founder-image img{
        width:100%;
        max-width:340px;
        height:390px;
    }

    .founder-name{
        font-size:32px;
    }

    .founder-content h2{
        font-size:34px;
    }

    .values{
        padding:60px 7% 75px;
    }

    .values > h2{
        width:245px;
        margin-bottom:45px;
        font-size:26px;
    }

    .values .strength-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .values .strength-card{
        width:100%;
        max-width:300px;
        margin:auto;
    }
}
/* ==================================================
   COMMON FOOTER
================================================== */

.site-footer{
    width:100%;
    margin:0;
    padding:0;
    background:#8f9dac;
}

/* ================= TOP FOOTER ================= */
.site-footer-top{
    display:grid;
    grid-template-columns:170px 150px 170px 140px;
    justify-content:center;
    column-gap:25px;
}
/* ================= LOGO ================= */

/* FOOTER LOGO */

.site-footer-logo-wrap{
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

.site-footer-logo{
    width:150px;
    height:150px;

    border-radius:50%;
    object-fit:cover;
    object-position:center;

    display:block;

    background:#000;
    border:3px solid #000;
}
/* ================= COLUMNS ================= */

.site-footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding-top:12px;
}

.site-footer-column h4{
    margin:0 0 24px;

    font-family:"Inter",sans-serif;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    color:#09131d;
    letter-spacing:.4px;
}

.site-footer-column a{
    margin-bottom:18px;

    display:flex;
    align-items:center;
    gap:8px;

    text-decoration:none;

    font-family:"Inter",sans-serif;
    font-size:11px;
    font-weight:600;

    color:#ffffff;
    text-transform:uppercase;

    transition:.3s;
}

.site-footer-column a:hover{
    color:#16344d;
}

/* ================= PHONE ================= */

.site-footer-contact{
    white-space:nowrap;
}

.site-footer-contact i{
    font-size:12px;
}

/* ================= EMAIL ================= */

.site-footer-email h4{
    visibility:hidden;
}

.site-footer-email a{
    margin-top:36px;
    text-transform:none;
}

/* ==================================================
   GLOBAL REACH
================================================== */

.site-global-reach{
    position:relative;
    width:100%;
    height:255px;
    overflow:hidden;
}

.site-global-reach-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}

.site-global-reach::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(2,18,31,.90) 0%,
        rgba(2,18,31,.65) 35%,
        rgba(2,18,31,.18) 70%,
        rgba(2,18,31,.05) 100%
    );

    z-index:1;
}

.site-global-reach-content{
    position:relative;
    z-index:2;

    width:90%;
    margin:0 auto;
    padding-top:45px;
}

.site-global-reach-content h2{
    margin:0 0 20px;

    font-family:"Inter",sans-serif;
    font-size:30px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;

    color:#ffffff;
}

.site-global-reach-content p{
    margin:0;

    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:1.75;

    color:#ffffff;
}

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

@media(max-width:992px){

    .site-footer-top{
        grid-template-columns:1fr 1fr;
        row-gap:40px;
    }

    .site-footer-logo-wrap{
        grid-column:1/-1;
    }

    .site-footer-email h4{
        display:none;
    }

    .site-footer-email a{
        margin-top:0;
    }

}

@media(max-width:650px){

    .site-footer-top{
        grid-template-columns:1fr;
        padding:45px 8%;
    }

    .site-footer-logo-wrap{
        justify-content:center;
    }

    .site-footer-column{
        align-items:center;
        text-align:center;
    }

    .site-global-reach{
        height:220px;
    }

    .site-global-reach-content h2{
        font-size:24px;
    }

    .site-global-reach-content p{
        font-size:14px;
        line-height:1.6;
    }

}
.hero img{
    width:100%;
    height:100vh;
    object-fit:cover;
    display:block;
}
.products{
  padding-top:80px;
}