/* =========================================================================
   BASE STYLES: GLOBAL SETUP & FONT
   ========================================================================= */

/* Global Font: Poppins is applied to the body for all text */
body {
    font-family: 'Poppins', sans-serif;
    /* Prevents horizontal scrolling issues, essential for responsive design */
    overflow-x: hidden;
}


    /* Navbar */
    /* Default Navbar state: transparent and ready for scroll transition */
    .navbar {
      background: transparent;
      transition: background 0.3s;
    }
    /* Scrolled state: slightly darker background for better visibility on content */
    .navbar.scrolled {
      background: rgba(24, 24, 24, 0.208);
    }
    /* Logo Sizing (Desktop/Default) */
    .navbar-brand img {
      max-height: 60px;
    }


    /* Hero Carousel Styles(Default Desktop */
    .hero-carousel .carousel-item img {
      height: 100vh;
      object-fit: cover;
    }


/* Mobile responsive Adjustments */
@media (max-width: 768px) {
  /*Adjust Carousel image height for mobile viewing*/
  .hero-carousel .carousel-item img {
    height: auto;          /* natural height */
    max-height: 80vh;      /* optional: not too tall */
    object-fit: contain;   /* keep full image visible */
  }
}
/* Mobile fix for logo */
@media (max-width: 768px) {
  .navbar-brand img {
    max-height: 40px;   /* smaller logo */
  }
}
/* ===== Dropdown Menu Styling- Product Drop down ===== */
.navbar .dropdown-menu {
  border-radius: 12px;            /* Smooth rounded corners */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Soft shadow */
  padding: 10px 0;               /* More vertical breathing space */
  border: none;                  /* Remove default border */
  background: #ffffff;           /* Clean white background */
  transition: all 0.3s ease;     /* Smooth dropdown animation */
}

/* Dropdown Items */
.navbar .dropdown-menu .dropdown-item {
  padding: 10px 20px;            /* Bigger clickable area */
  font-size: 15px;               /* Slightly bigger text */
  font-weight: 500;
  color: #333;
  transition: all 0.2s ease-in-out;
  border-radius: 6px;            /* Rounded hover highlight */
}
/* Justify text alignment for better readability(story section) */
.text-justify {
  text-align: justify;
}
/*Section Title (Used for Our Products main Heading*/
.section-title {
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #111;
}
/*Brand Banner Styles*/
/*Uses the background image from your file structure*/
.brand-banner {
  background: url("images/brand-banner.png") center center/cover no-repeat;
  border-radius: 15px;
  height: 300px; /* desktop default */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* centers text on mobile */
  padding: 20px;
}
/* Brand Banner Mobile responsiveness */
@media (max-width: 768px) {
  .brand-banner {
    height: 200px;              /* shorter on mobile */
    border-radius: 10px;
    background-position: center top; /* show top focus area */
  }
  .brand-banner h2 {
    font-size: 1.5rem;          /* smaller text */
  }
  .brand-banner p {
    font-size: 0.9rem;
  }
}

/* ================================
   CONTACT US SECTION STYLES
   ================================ */
   /*Input/Textarea Field Styling*/
#contact input, 
#contact textarea {
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
}
/*Button syling Uses a vibran gradient*/
#contact button {
  background: linear-gradient(135deg, #1ACC8D, #1C4CA3);
  border: none;
  border-radius: 25px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
}

#contact button:hover {
  opacity: 0.9;
}

/* Make side images match form height/Side images in the contact section */
#contact .side-image {
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}







/* =========================
   PRODUCT SECTION (SLIDER) / The New Card Design
   ========================= */

/* Product Section Wrapper, Provides vertical spacing between products rows */
.product-section {
  padding: 40px 20px;
}


/* New Product Card Container Styling */
.product-card {
    background-color: #ffffff; /* White background for the card */
    padding: 30px; /* Internal padding */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Soft shadow for depth */
    /* Transition for smooth lift-up effect */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: 100%; /* Ensures columns inside the card match height */
    border: 1px solid #dee2e6; /* Subtle border */
}

/* Hover Effect for Engagement: Lifts the card and strengthens the shadow */
.product-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); 
}

/* Image Styling within the card */
.product-card .img-fluid {
    border-radius: 8px;
    max-height: 300px; /* Limits the image height for uniform look */
    object-fit: contain; /* Ensures the entire image is visible without cropping */
    width: 100%;
}

/* Product Name Heading */
.product-card h2 {
    font-size: 32px; 
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
    color: #343a40; 
}

/* Product Description Paragraph */
.product-card p {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 25px;
    color: #6c757d; 
}

/* Button Styling (Uses 'btn-dark' class to match website's general dark theme) */
.product-card .btn-dark {
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px; /* Uses a pill shape */
    background-color: #343a40; /* Dark color */
    border-color: #343a40;
}
.product-card .btn-dark:hover {
    background-color: #1a1e21;
    border-color: #1a1e21;
}


/* Responsive adjustments for the text column (Desktop/Tablet) */
@media (min-width: 768px) {
    .text-column {
        padding-left: 40px;
        /* Flexbox centers the text vertically next to the image */
        display: flex; 
        flex-direction: column;
        justify-content: center;
    }
}

/* Responsive adjustments for the text column (Mobile) */
@media (max-width: 767px) {
    .text-column {
        /* Adds space between the image and text on small screens */
        margin-top: 20px; 
    }
}