@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/*
 * base.css: Global foundational styles, variables, and resets.
 * This file will eventually contain only styles universally applied across the site.
*/

:root {
  --theme-color: #0F6BAC;
  --secondary-color: #37AFE3;
  --title-color: #010F30;
  --body-color: #364863;
  --border-color: #85B7FE;
  --smoke-color: #ECF5FB;
  --white-color: #ffffff;
  --black-color: #000000;
  --yellow-color: #fec624; /* Used for Fin Fishes text */
  --green-color: #009345; /* General green color */
  --pink-color: #FFC0CB; /* Pink color for Cephalopods */

  --title-font: "Exo", sans-serif;
  --body-font: "Inter", sans-serif;
  --icon-font: "Font Awesome 5 Pro";

  /* Default spacing variables, adjust as needed */
  --section-space: 120px;
  --section-space-mobile: 80px;
  --container-gutters: 30px;
}

/* Basic HTML/Body defaults */
html,
body {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--body-color);
  line-height: 26px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-color: #F8F9FA; /* Light background for the entire site */
}

/* Global H1-H6 and P styles */
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
  font-family: var(--title-font);
  color: var(--title-color);
  text-transform: none;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 15px 0;
}

p {
  margin: 0 0 18px 0;
  color: var(--body-color);
  line-height: 26px;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 400;
}

a {
  color: var(--body-color);
  text-decoration: none;
  outline: 0;
  transition: all ease 0.4s;
}
a:hover {
  color: var(--theme-color);
}

img {
  border: none;
  max-width: 100%;
  height: auto;
}

ul {
  list-style-type: disc;
  padding-left: 0;
}

/* Global section spacing classes (adjust values in :root as needed) */
.space,
.space-top {
  padding-top: var(--section-space);
}

.space,
.space-bottom {
  padding-bottom: var(--section-space);
}

@media (max-width: 1199px) {
  .space {
    padding-top: var(--section-space-mobile);
    padding-bottom: var(--section-space-mobile);
  }
}
@media (max-width: 991px) {
  .space,
  .space-top {
    padding-top: var(--section-space-mobile);
  }
  .space,
  .space-bottom {
    padding-bottom: var(--section-space-mobile);
  }
}

/* Existing Custom CSS from style.css that should be global/base */
/* This section contains a small part of your old style.css that seems foundational.
   More global styles will be moved here as style.css is cleaned up. */
.vs-header .vs-logo img {
    width: 320px;
    max-width: none;
    height: auto;
}
.sticky-active .vs-logo img {
    width: 320px;
}
@media (min-width: 1200px) {
  .main-menu > ul > li {
    margin: 0 14px;
  }
}
@media (min-width: 1200px) {
  .main-menu > ul > li > a {
    font-size: 18px;
  }
}
@media (min-width: 1600px) {
  .header-layout4 .vs-btn {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.modal-header {
  background-color: var(--theme-color) !important;
  border-bottom: none !important;
}
.modal-header .modal-title {
  color: var(--white-color) !important;
}
.executive-panel {
  background-color: #FFFFE0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.executive-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.executive-panel-header {
  background-color: var(--title-color);
  padding: 12px 20px;
}
.executive-panel-header h6 {
  color: var(--white-color);
  font-weight: bold;
  margin: 0;
  text-align: center;
}
.executive-panel-body {
  padding: 20px;
}
.executive-panel-body p {
  text-align: justify;
  font-size: 16px;
  font-weight: 500;
}
.executive-panel .signature {
  font-family: 'Great Vibes', cursive;
  font-size: 24px;
  color: var(--title-color);
  font-weight: normal;
}


/* --- Styles for Product Category Grid (copied from index.php) --- */

.category-grid-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    justify-content: center; /* Centers items if there aren't enough to fill a row */
    gap: 30px; /* Space between the product panels */
    margin-top: 50px; /* Adjust spacing from the section title */
}

.category-grid-item {
    flex: 1 1 300px; /* Allows items to grow/shrink, with a base width of 300px */
    max-width: calc(33.33% - 20px); /* Adjust to fit 3 items per row, accounting for gap */
    background-color: #fff; /* White background for the card */
    border-radius: 8px; /* Slightly rounded corners */
    overflow: hidden; /* Ensures image corners are also rounded */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for card effect */
    text-align: center;
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit text color */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    display: flex; /* Flexbox for internal alignment */
    flex-direction: column; /* Stack image and text vertically */
    justify-content: space-between; /* Push image to top, text to bottom */
}

.category-grid-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

.category-grid-item img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below image */
    border-bottom: 1px solid #eee; /* Separator between image and text */
}

.category-text-overlay {
    padding: 15px 10px;
}

.category-text-overlay h3 {
    margin: 0;
    font-size: 18px;
    color: #333; /* Darker color for text, adjust if needed */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Basic Responsiveness for smaller screens */
@media (max-width: 992px) {
    .category-grid-item {
        max-width: calc(50% - 20px); /* 2 items per row on medium screens */
    }
}

@media (max-width: 576px) {
    .category-grid-item {
        max-width: 100%; /* 1 item per row on small screens */
    }
}

/* Adjust spacing for the About Us main content section */
.bg-white.space {
    padding-top: 10px; /* Reduce this value to move the content up. */
                     /* The original might be 80px or 100px. */
                     /* You can try smaller values like 30px, 20px, or even 0px. */
}