/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap&subset=latin,greek');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Geologica:wght@100..900&family=Mansalva&display=swap');
/* ============================
   ROOT VARIABLES
============================ */
:root {
  /* Fonts */
  --font-base: 'Fira Sans', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-accent: 'Kaushan Script', cursive;

  /* Colors */
  --color-primary: #547435;
  --color-secondary: #deb122;
  --color-secondary-dark: #a87d52;
  --color-accent: #9ad163;
  --color-text: #111;
  --color-light: #fff;
  --color-dark: #000;

  /* Sizes */
  --radius: 5px;
  --transition: 0.3s ease;
  --container-padding: 3rem;

  /* Shadows */
  --shadow-soft: 2px 2px 6px rgba(0,0,0,0.6);

  /* Font Sizes (scales with breakpoints) */
  --fs-h1: 4rem;
  --fs-h2: 3rem;
  --fs-p: 1.7rem;
}

/* Reset & Global */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 11px; /* base 10px for easier rem calculation */
  box-sizing: border-box;
  background: var(--color-primary);
  overflow-x: hidden;
}

.fancy-title {
  font-family: var(--font-base);
  font-weight: 400;
  font-style: normal;
}

.home-wrapper {
  position: relative; /* parent for absolute positioning */
}

.services-fancy {
  position: absolute; /* overlap video & svg */
  left: 50%;
  bottom: 0; /* adjust overlap amount */
  transform: translate(-50%, 50%); /* move it halfway down into SVG */
  color: var(--color-light);
  font-size: 5rem;
  font-weight: 700;
  z-index: 15;
  margin: 0;
  padding: 0;
  text-shadow: var(--shadow-soft);
  white-space: nowrap; /* prevent line breaks */
}

/* SVG container */
.svg-seperator {
  position: relative;
  width: 100%;
  height: 30vw; /* control height here */
  overflow: hidden;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

/* --- SVG Animation --- */
.svg-seperator svg {
  display: block;
  width: 100%;        /* always span full width */
  height: 100%;       /* fill container height */
  object-fit: cover;  /* crop without squishing */
  transform: translateY(-10vw); /* hidden: up */
  opacity: 1;
  transition: all 1s ease-out;
}

.svg-seperator.active svg {
  transform: translateY(-10vw); /* slide into place */
  opacity: 1;
}

.overflow-beans {
  position: absolute;
  height: 15vw;
  left: 100%;   /* hidden: off screen right */
  top: 20%;
  z-index: 10;
  opacity: 0;
  transition: all 1s ease-out;
}

.svg-seperator.active .overflow-beans {
  left: 70%;    /* final resting position */
  top: 2vw;     /* keep same */
  opacity: 1;
}

/* Responsive */
@media (min-width: 1440px) {
  .svg-seperator.active svg {
    transform: translateY(-12vw); /* slide into place */
  }

  .overflow-beans {
    height: 12vw;
  }

  .svg-seperator.active .overflow-beans {
    top: 1vw;
  }
}

@media (max-width: 767px) {
  .services-fancy {
    font-size: 3rem;
    transform: translate(-50%, 40%);
  }
  .svg-seperator svg {
    margin-top: 0;
  }
  .svg-seperator.active svg {
    transform: translateY(-2vw);
    opacity: 1;
  }

  .overflow-beans {
    height: 20vw;
  }
  .svg-seperator.active .overflow-beans {
    top: 5vw;
  }
}

@media (max-width: 480px) {
  .services-fancy {
    font-size: 2.5rem;
    transform: translate(-50%, 40%);
  }
  .svg-seperator svg {
    margin-top: 0;
  }
}

body.no-scroll {
  overflow: hidden; /* Prevent background scroll when mobile menu is open */
}

h1, h2, .btn {
  font-family: var(--font-heading);
  font-weight: 700;
}

p {
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

p, nav a {
  font-family: var(--font-base);
  font-weight: 400;
}

/* ============================
   NAVBAR
============================ */
.nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: var(--transition);
  z-index: 1000;
  background: var(--color-light);
  display: flex;
  flex-direction: column;
  height: 93px;
}

.nav.affix {
  background: var(--color-primary);
  padding: 0;
}

/* Change nav link color to white when affix */
.nav.affix .main_list ul li a {
  color: var(--color-light);
}

.nav.affix .main_list ul li a:hover {
  color: var(--color-secondary); /* keep hover gold color */
}

/* Container */
.nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--container-padding);
}

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

/* Logo */
.logo img {
  height: 90px;
  width: auto;
}

/* Nav Links */
.main_list ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main_list ul li {
  padding-right: 2rem;
}

.main_list ul li a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 1.6rem;
  transition: color 0.3s;
  font-weight: 500;
}

.main_list ul li a:hover {
  color: var(--color-secondary);
}

/* Mobile Menu Trigger */
.navTrigger {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: relative;
}

.navTrigger i {
  background-color: var(--color-text);
  display: block;
  height: 4px;
  margin: 5px 0;
  transition: 0.4s;
}

.navTrigger.active i:nth-child(1) {
  transform: translateY(9px) rotate(135deg);
}

.navTrigger.active i:nth-child(2) {
  opacity: 0;
}

.navTrigger.active i:nth-child(3) {
  transform: translateY(-9px) rotate(-135deg);
}

/* ============================
   HERO SECTION
============================ */
.home {
  position: relative;
  width: 100%;
  min-height: 70vh; /* adjust as needed */
  overflow: hidden;
  margin-top: 93px; /* if your navbar is fixed */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-text {
  position: relative;
  z-index: 1;
  color: var(--color-light);
  max-width: 600px;
  padding: 20px;
}

.hero-text h1 {
  font-size: var(--fs-h1);
  margin-bottom: 20px;
}

.hero-text p {
  font-size: 1.8rem;
  margin-bottom: 30px;
}

.btn {
  background: var(--color-secondary);
  color: var(--color-light);
  padding: 10px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: var(--fs-p);
  font-weight: bold;
  transition: var(--transition);
}

.btn:hover {
  background: var(--color-secondary-dark);
}

/* Video control */
.video-control {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border: 3px solid var(--color-light);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2); /* semi-transparent ring */
  z-index: 2;
  transition: background-color 0.3s;
}

.video-control:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

#playPauseIcon {
  color: var(--color-light);
  font-size: 2rem;
  pointer-events: none; /* allow clicks to pass to container */
}

/* ============================
   LANGUAGE SWITCH FLAGS
============================ */
.lang-switch {
  position: absolute; /* absolute relative to the parent */
  top: 100px; /* under navbar */
  left: 45px;
  display: flex;
  gap: 12px;
  z-index: 2000;
  z-index: 50;
}

.lang-switch a {
  font-size: 2rem;
  text-decoration: none;
  color: var(--color-light);
  transition: opacity 0.3s;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 

}

.lang-switch a:hover {
  opacity: 0.7;
}

/* ============================
   MOBILE RESPONSIVE
============================ */
@media screen and (max-width: 768px) {
  .nav .container {
    padding: 0 2rem;
  }

  .lang-switch {
    left: 36px;
  }

  .main_list {
    position: absolute;
    top: 93px;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: var(--color-text);
    transition: all 0.3s ease;
        overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main_list.show {
    height: 100vh !important;
  }

  .main_list ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 550px;
    margin-top: -103px;
    padding: 2em 0;
  }

  .main_list ul li {
    padding: 14px 0;
  }

  .main_list ul li a {
    color: var(--color-light);
    font-size: 1.8rem;
  }

  .navTrigger {
    display: block;
  }
}

/* ============================
   CONTENT 
============================ */
.myH2 {
  text-align: center;
  font-size: var(--fs-h2);
  margin: 40px 0;
}

.myP {
  text-align: justify;
  padding: 20px;
  font-size: var(--fs-p);
}

/* ============================
   SERVICES
============================ */
.services-section{
  /* margin-top: -32%; */
  z-index: 1;
  overflow: hidden;
  position: relative;
}

/* Services Slider */
.services-swiper {
  width: 100%;
  min-height: 65vh;
  position: relative;
  overflow: hidden;
}

/* Each slide */
.services-swiper .swiper-slide {
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-start; /* default top alignment for large screens */
  z-index: 25;
  cursor: pointer;
  min-height: 70vh;
}

/* Dark overlay for entire slide */
.services-swiper .swiper-slide .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65); /* darken image */
}

/* Text content */
.services-swiper .swiper-slide .slide-content {
  position: relative;
  z-index: 2;
  color: var(--color-light);
  padding: 0;
  max-width: 800px;
  text-align: left;
  top:35%;
  left: 10%;
}

/* Headings & text */
.services-swiper .slide-content h2 {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: var(--color-accent);
}

.services-swiper .slide-content p {
  font-size: 1.5rem;
}

/* Swiper navigation */
.services-swiper .swiper-button-next,
.services-swiper .swiper-button-prev {
  color: var(--color-light);
}

.services-swiper .swiper-pagination-bullet {
  background: var(--color-light);
}

/* Swiper navigation scale */
.services-swiper .swiper-button-next,
.services-swiper .swiper-button-prev {
  color: var(--color-light);
  transform: scale(0.6);
}
.services-swiper .swiper-button-prev{
  margin-left: 2%;
}
.services-swiper .swiper-button-next{
  margin-right: 2%;
}

@media (max-width: 1440px) {
  .services-swiper .swiper-slide {
    justify-content: center;
    align-items: center;

 
  }

  .slide-btn{
    align-self: center;
  }

  .services-swiper .slide-content {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    transform: translate(0, 0);
    max-width: 90%;
    padding:0 2rem;
    margin: 0 4.5em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  h2, p {
    text-align: center;
  }

  .services-swiper .slide-content h2 {
    font-size: 3rem;
    line-height: 1.2;
  }

  .services-swiper .slide-content p {
    font-size: 2rem;
    line-height: 1.4;
  }

  .services-swiper {
    height: calc(80vh - 50px);
  }
}

.slide-text-wrapper {
  display: flex;
  flex-direction: column;
}

.slide-btn {
  display: inline-block;
  margin-top: 2rem;               /* match about-btn spacing */
  padding: 0.8rem 2rem;
  font-weight: 500;
  font-size: 1.8rem;
  color: var(--color-light);
  text-decoration: none;
  position: relative;
  border-radius: var(--radius);   /* added from about-btn */
  background: transparent;        /* keep transparent */
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
  align-self: flex-start;         /* keep original alignment */
}

/* Top-left triangle outline */
.slide-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Bottom-right triangle outline */
.slide-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Hover animation */
.slide-btn:hover {
  color: var(--color-light);
  transform: translateY(-3px);
}

.slide-btn:hover::before {
  transform: scale(1.2) translate(-2px, 2px);
}

.slide-btn:hover::after {
  transform: scale(1.2) translate(2px, -2px);
}


@media (max-width: 1440px) {

  .slide-btn{
    align-self: center;
  }
}


/* Responsive adjustments for button */
@media (max-width: 768px) {
  .slide-btn {
    font-size: 2rem;
    padding: 0.6rem 1.5rem;
    align-self: center;
  }

.services-swiper .swiper-button-prev{
  margin-left: unset;
}
.services-swiper .swiper-button-next{
  margin-right: unset;
}
}

/* Responsive: extra large screens */
@media (min-width: 1440px) {
  .services-swiper {
    height: calc(95vh - 50px);
  }



  .services-swiper .slide-content h2 {
    font-size: 5rem;
  }

  .services-swiper .slide-content p {
    font-size: 2rem;
  }

  .slide-btn {
    font-size: 2rem;
  }
}

.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, 
.swiper-pagination-fraction {
  bottom: 60px !important;
}

/* ABOUT SECTION */

.svg-seperator-2 {
  transform: scaleY(35%);
  position: absolute;
  width: 100%;
  margin-top: -10%;
  z-index: 22;
}

.svg-seperator-3 {
  transform: scaleY(25%);
  position: absolute;
  width: 100%;
  margin-top: -26%;
  z-index: 21;
}

.wave2 {
  margin-top: -10px;
}

.about {
  min-height: 95vh;
  background-color: #e6e5e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../assets/images/islandbg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 100;
  padding-top: 5vw;
}

.about .container {
  display: inline-block;
  width: auto;
  text-align: center;
  position: relative;
}

.about .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  border-radius: 50%;
}

.about .image {
  width: 200px;
  height: 200px;
  margin: 25px;
  position: relative;
  z-index: 2;
  object-fit: cover;
  border-radius: 50%;
  background: transparent;
}

.about .circle-container {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  border: 1px solid var(--color-light);
  border-radius: 50%;
}

.about .circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: -25px 0 0 -75px;
  z-index: 12;
}

.about-content {
  max-width: 700px;
  margin: 2rem auto;
  text-align: center;
  color: var(--color-light);
  padding: 1rem;
}

.about-content h2 {
  font-size: var(--fs-h1);
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-family: var(--font-base);
}

.about-content p {
  font-size: 2rem;
  line-height: 1.6;
  color: var(--color-light);
}

.about-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.8rem 2rem;
  color: var(--color-light);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.8rem;
  position: relative;
  border-radius: var(--radius);
  transition: color 0.3s, transform 0.2s;
}

/* Top-left corner */
.about-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  transform: scale(1);
  transition: all 0.3s ease;
}

/* Bottom-right corner */
.about-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  transform: scale(1);
  transition: all 0.3s ease;
}

/* Hover animation */
.about-btn:hover {
  color: var(--color-light);
  transform: translateY(-3px);
}

.about-btn:hover::before {
  transform: scale(1.2) translate(-2px, 2px);
}

.about-btn:hover::after {
  transform: scale(1.2) translate(2px, -2px);
}

/* Marquee */
.marquee {
  margin-top: -220px;
  margin-bottom: 220px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee span {
  padding: 0 .5rem;
  font-size: 2.2rem;
  color: var(--color-light);
  font-family: var(--font-base);
}


/* Beans Absolute */
.beans-abs {
    margin-top: 3%;
  height: 9vw;
  position: absolute;
  left: -20%;
  z-index: 30;
  opacity: 0;
  transition: all 1s ease-out;
}

.beans-abs.active {
  left: 5%;
  opacity: 1;
}

/* Responsive */
@media (max-width: 964px) {
  .beans-abs {
    height: 16vw;
    margin-top: 3%;
  }

  .about-btn {
    font-size: 1.6rem;
    padding: 0.6rem 1.5rem;
  }

  .marquee span {
    font-size: 2rem;
    padding: 0 8rem;
  }

  .svg-seperator-3 {
    transform: scaleY(75%);
    margin-top: -18%;
  }
}

@media (min-width: 1440px) {
  .svg-seperator-3 {
    transform: scaleY(35%);
    margin-top: -23%;
  }
}

/* Large mobiles / small tablets */
@media (max-width: 1280px) {
  .services-fancy {
    font-size: 3rem;
    transform: translate(-50%, 40%);
  }
  .lang-switch a {
    font-size: 1.8rem;
  }

  .services-swiper .slide-content h2 {
    font-size: 3rem;
  }

  .services-swiper .slide-content p {
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .slide-btn {
    font-size: 1.8rem;
    padding: 0.6rem 1.5rem;
    align-self: center;
  }

  .about {
    padding: 10em 0;
  }

  .about .container {
    transform: scale(0.7);
  }

  .about-content h2 {
    font-size: 3rem;
  }

  .about-content p {
    font-size: 1.6rem;
    line-height: 1.6;
    padding: 0 2rem;
  }

  .about-btn {
    font-size: 1.8rem;
  }

  .marquee {
    margin-top: 50px;
    margin-bottom: 20px;
  }

  .marquee span {
    font-size: 1.6rem;
    padding: 0 2rem;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  .services-fancy {
    font-size: 2rem;
    transform: translate(-50%, 40%);
  }
  .lang-switch a {
    font-size: 1.8rem;
  }

  .services-swiper .slide-content h2 {
    font-size: 2rem;
  }

  .services-swiper .slide-content p {
    font-size: 1.4rem;
    line-height: 1.4;

    padding: 0 1em;
  }

  .slide-btn {
    font-size: 1.4rem;
    padding: 0.6rem 1.5rem;
    align-self: center;
  }

  .about {
    padding: 8em 0;
  }

  .about .container {
    transform: scale(0.7);
  }

  .about-content h2 {
    font-size: 2rem;
  }

  .about-content p {
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 0 2rem;
  }

  .about-btn {
    font-size: 1.4rem;
  }

  .marquee span {
    font-size: 1.4rem;
    padding: 0 2rem;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 1400px) and (orientation: landscape) {
  .services-fancy {
    font-size: 3rem;
    transform: translate(-50%, 40%);
  }
  .lang-switch a {
    font-size: 2rem;
  }

  .services-swiper .slide-content h2 {
    font-size: 3rem;
  }

  .services-swiper .slide-content p {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .slide-btn {
    font-size: 1.8rem;
    padding: 0.6rem 1.5rem;
    align-self: center;
  }

  .about {
    padding: 10em 0;
  }

  .about .container {
    transform: scale(0.7);
  }

  .about-content h2 {
    font-size: 3rem;
  }

  .about-content p {
    font-size: 1.8rem;
    line-height: 1.4;
    padding: 0 2rem;
  }

  .marquee span {
    font-size: 1.8rem;
    padding: 0 2rem;
  }
}

.services-swiper {
  height: 90vh;
  min-height:750px;
}



/* Training Section */
.training {
  min-height:75vh;
  position: relative;
  background-color: #ebebeb;
  display: flex;
  padding: 12em 0em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.training h2 {
  position: absolute;
  top: 0;
  left: auto;
  margin: 0;
  font-size: 8rem;
  padding: 1em;
  margin-top: -1.6em;
  font-family: var(--font-base);

  /* Gradient text */
  background: linear-gradient(to bottom, #ffffff 50%, #000000 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Optional for other browsers */
  background-clip: text;
  font-weight: 700;
  white-space: nowrap;
}


/* Top wave */
.training-wave {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 200px; /* adjust height of curve */
  display: block;
  z-index: 1;
}


.training-content {
  padding: 2rem 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5em;
}



.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.8rem;
  padding: 3em;
  /* align-items: center; */
  justify-content: center;
}

.card-small {
  grid-column: span 1;
  grid-row: span 1;
  min-height: 360px;
  max-height: 600px; /* optional, keeps consistent grid */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center content */
}

.card-big {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 380px;
  max-height: 800px; /* optional */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 1rem;
  transition: all 0.5s ease;
  isolation: isolate; /* ensures stacking inside card only */

  transform: scale(0.8); /* start smaller */
  opacity: 0; /* start invisible */
  background: transparent;
  padding: 1.2em;
  z-index: 10;
}

.card h3 {
  position: relative; /* already above overlay */
  z-index: 5 !important; /* higher than overlay */
  text-align: center; /* center the text */
  margin: 0 1rem;     /* spacing inside card */
  font-size: clamp(.8rem, 4vw, 2rem); /* responsive font size */
  line-height: 1.2;   /* adjust line height for readability */
  word-wrap: break-word; /* wrap long words */
  overflow-wrap: break-word; /* fallback for older browsers */
  hyphens: auto;      /* optional: hyphenate words if needed */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
    transition: all 0.3s ease;
  color: var(--color-light);
    pointer-events: none;  /* optional: makes hover smoother */
  min-height: 3em; /* reserve space for taller translations */


}

/* When active, zoom in */
.card.active {
  transform: scale(0.95); /* slightly bigger */
  opacity: 1;
}

/* Dark overlay */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* initial dark overlay */
  transition: all 0.5s ease;
  z-index: 1;
  border-radius: 1rem;

}

.card:hover {
  transform: translateY(-10px) scale(0.95);

  cursor: pointer;
  z-index: 20;
  box-shadow: #000;
}

/* .card:hover h3 {
  transform: scale(1.1); 
  color: var(--color-light);
} */

/* Remove overlay on hover */
.card:hover::before {
  background-color: rgba(0,0,0,0.2); 
}

/* Make text above overlay */
.card > * {
  position: relative;
  z-index: 2;
}

.card-blue { 
  background: url('../assets/images/pexels-cottonbro-4787601.jpg') no-repeat center center; 
  background-size: cover;
}

.card-purple { 
  background: url('../assets/images/pexels-mart-production-7162369.jpg') no-repeat center center; 
  background-size: cover;
}

.card-green { 
  background: url('../assets/images/pexels-masudriguez-19143158.jpg') no-repeat center center; 
  background-size: cover;
}

.card-orange { 
  background: url('../assets/images/pexels-shkrabaanthony-7175988.jpg') no-repeat center center; 
  background-size: cover;
}

.card-pink { 
  background: url('../assets/images/pexels-shkrabaanthony-7176003.jpg') no-repeat center center; 
  background-size: cover;
}

.card-teal { 
  background: url('../assets/images/pexels-bayawe-coffee-nomad-456337-1187761.jpg') no-repeat center center; 
  background-size: cover;
}

/* Small tablets / landscape phones */
@media (max-width: 1440px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }

  .training h2 {
    font-size:6rem;
  }
}


/* Small tablets / landscape phones */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }

  .training h2 {
    font-size: 4.8rem;
  }

  .training{
      padding: 6em 0em;

  }

  .services-swiper {
    height: 70vh;
    min-height:700px;
  }
}
/* Mobile: one card per row */
@media (max-width: 480px) {

.training{
  min-height: unset ;
}
  /* First big card spans full width */
  .card-big:first-child {
    grid-column: 1 / -1; /* span both columns */
    height: 180px;        /* taller height for big card */
  }

  .card-big{
      min-height: 220px;        /* shorter height for small cards */
    max-height: 220px;
  }

  /* Small cards */
  .card-small {
    grid-column: auto;    /* let them flow in the grid */
    min-height: 150px;        /* shorter height for small cards */
    max-height: 150px;
    width: auto;
  }


    .training h2 {
    font-size: 4rem;;
  }
}

.training-img {
  position: absolute;
  right: 2%;
  height: 25vw;
  width: auto;
  z-index: 2;
  margin-top: -22%;

  /* Initial state: off-screen to the right */
  transform: translateX(100px);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Active state: moves into position */
.training-img.active {
  transform: translateX(0);
  opacity: 1;
}

.slide-btn.green{
  color: var(--color-dark);
  align-self: center;
}


.quote{
  font-family: "Mansalva", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  text-align: center;
  opacity: 90%;
   opacity: 0;
  position: relative;
  color: var(--color-dark);
  transition: all .8s ease-out;
    /* transform: translateX(-100vw);  */
      white-space: normal;     /* allow wrapping */
  word-wrap: break-word;   /* break long words if needed */
  overflow-wrap: anywhere; /* modern equivalent */
  padding:0 5em;
  padding-bottom: 4em;
}

.quote.active {
  opacity: 90%;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 964px) {
  .training-img {
    height: 30vw;
    width: auto;
    right: -2%;
  }

  
.quote{
  font-size: 1.8rem;
  
  }
}


/* Responsive */
@media (max-width: 480px) {

  .quote{
  font-size: 1.2rem;
  max-width: 250px;
  }
  .training-img {
    height: 35vw;
    width: auto;
    right: -10%;   
    margin-top: -40%; 
  }

  .card::before {

  background-color: rgba(0,0,0,0.3); /* initial dark overlay */

}

.training-content{
  display: block;
}

}



.phone-btn {
  position: fixed;
  bottom: 25px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #547435; /* coffee green */
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.phone-btn img {
  height: 20px;
  width: 20px;
}

.phone-btn:hover {
  background-color: #ffffff;
  transform: scale(1.1);
}

.parteners{
    background-color: #111;

}

.parteners-section{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 1em; */
}



.wrap {
  /* padding: 4.8rem; */
  position:relative;
  width: 100%;
}
.wrap h3 {
  font-size:2.4rem;
  font-weight: 600;
  text-align:center;
}
.clients {
    align-items: center;
    -webkit-box-align: center;
    display: grid;
    gap: 4.8rem 4.8rem;
    grid-template-columns: auto auto;
    /* justify-items: center; */
    margin: 4.8rem auto;
    max-width: 1024px;
 }
.clients li {
  list-style: none;
  margin: 0;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.clients img {
  height: 3.2rem;

}

.wrap:hover{
  cursor: pointer;
}

/* .clients:hover li {
filter: blur(0px);
-webkit-filter: blur(0px);
}
.clients:hover li:not(:hover)  {
filter: blur(2px);
-webkit-filter: blur(2px);
} */
.clients li:hover {
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem); 
}

@media (min-width: 1024px) {
.clients {
    grid-template-columns: auto auto auto auto; }
    
.clients img {
  height: 4rem; }}

/* --- Images (gray logo) --- */
.clients img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.clients img:hover {
  background: none;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }


#featured-products {
  padding: 4rem 0;
  text-align: center;
  display: flex; /* remove flex-column */
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.products-section{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6em 0;
  background-color: #e6e5e5;
}

#featured-products h3 {
  font-size: var(--fs-h1);
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-family: var(--font-base);
  margin-bottom: 6rem;
      font-weight: 700;
}

@media (max-width: 1280px) {
#featured-products h3 {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
#featured-products h3 {
        font-size: 2rem;
    }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.4rem;
  justify-items: center;
  width: 90%;
  max-width: 1200px; /* optional: center grid on large screens */
  margin: 2em 0;
}
.product-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 400px;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  cursor: pointer;
}

.product-background-image-section {
  height: 180px;
  background-size: cover;
  background-position: center;
}

.product-primary-details-section {
  padding: 1rem;
  text-align: center;
    position: relative;

}

.product-primary-details-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px; /* adjust height for shadow size */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.041), rgba(0,0,0,0)); /* soft shadow fading down */
  pointer-events: none; /* doesn't block clicks */
}

.name-primary {
  color: #3a2d1f;
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
  text-align: center;
   border-bottom: 1px solid rgba(0, 0, 0, 0.226);
  padding-bottom: 10px;
}

.description-info {
  color: #555;
  font-size: 1.6rem;
  line-height: 1.2;
}

/* See all button */
.see-all-wrapper {
  margin-top: 3rem;
}

.see-all {
  display: inline-block;
  color:var(--color-light);
  text-decoration: none;
}

.see-all:hover {
  transform: scale(1.05);
}

/* Example images */
.product-image-coffee   { background-image: url('../assets/images/coffee.jpg'); }
.product-image-drinks   { background-image: url('../assets/images/pexels-goumbik-942733.jpg'); }
.product-image-water    { background-image: url('../assets/images/pexels-masudriguez-19143158.jpg'); }
.product-image-supplies { background-image: url('../assets/images/pexels-pixabay-162616.jpg'); }
.product-image-food    { background-image: url('../assets/images/pexels-olly-925786.jpg'); }
.product-image-alcohol { background-image: url('../assets/images/pngwing.com (6).png'); }


/* Small screens: 2 cards per row */
@media (min-width: 640px) and (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* exactly 2 columns */
    gap: 1rem; /* adjust spacing */
  }

  .product-card {
    max-width: 100%; /* allow card to fill its column */
    width: 100%;     /* ensure it stretches fully */
  }
}


@media (max-width: 480px)
{
    .clients img {
    height: 2.6rem;

  }
}

/*NEW TRAINING*/