/*-----------------------------------------------------------------------------------
    Template Name: Delco Logitics & Cargo template
    Template URI: https://Slidesigma.com/themes/html/Delco
    Author: Slidesigma
    Author URI: https://www.Slidesigma.com
    Version: 1.0

    Note: This is Main Style Scss File. 
-----------------------------------------------------------------------------------
    CSS INDEX
    ===================
    01. Common
    02. Header
    03. Banner
    04. About
    05. Services
    06. Call to action
    07. Features Boxes
    08. Video
    09. Team
    10. Skill
    11. Portfolio
    12. Testimonial
    13. Blog
    14. Contact
    15. Framework
    16. Counter
    17. Breadcrumb
    18. Sidebar
    19. Faq
    20. Footer
-----------------------------------------------------------------------------------*/
/*===========================
	COMMON CSS 
===========================*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  background: #fff;
  color: #222;
  line-height: 1.6;
  padding: 20px;
}

.product-page {
  max-width: 1100px;
  margin: auto;
}

.product-header {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 40px;
}

.product-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.product-info {
  flex: 1;
  min-width: 300px;
}

.product-info h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color:#5e5a5a;
}

.product-actions button {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.product-actions .add-cart {
  background: #04d2ff;
  color: #fff;
}

.product-actions .wishlist,
.product-actions .quote {
  border: 1px solid #04d0ff;
  color: #01a5ff;
  background: transparent;
}

.add-cart {
  background: #c21d1d;
  color: #fff;
}

.wishlist, .quote {
  border: 1px solid #c21d1d;
  color: #c21d1d;
  background: transparent;
}


.features h2 {
  margin-top: 15px;
  color: #01a4ff;
  font-size: 1.5em;
}

.features ul {
  margin: 5px 0 15px 20px;
}

.features ul li {
  list-style: disc;
}

.reviews {
  margin-top: 40px;
  background: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
}
.specifications {
  padding: 2rem 1rem;
  background: #fafafa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-top: 2rem;
}

.specifications h2 {
  font-size: 1.75rem;
  text-align: center;
  color: #002b45;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.spec-table-wrapper {
  overflow-x: auto;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  min-width: 300px;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.spec-table th {
  background-color: #004d7a;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.spec-table td {
  color: #333;
  font-size: 0.95rem;
  vertical-align: top;
}

.spec-table tr:hover td {
  background-color: #f2f8ff;
}

@media (max-width: 768px) {
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
    text-align: left;
  }

  .spec-table tr {
    margin-bottom: 1rem;
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
  }

  .spec-table th {
    background: #004d7a;
    color: #fff;
    padding: 10px;
  }

  .spec-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .spec-table td:last-child {
    border-bottom: none;
  }
}
.why-choose {
  background: linear-gradient(180deg, #f9fbfd 0%, #ffffff 100%);
  padding: 4rem 1.5rem;
  border-radius: 18px;
  margin-top: 3rem;
}

.why-choose-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.why-choose h2 {
  font-size: 2rem;
  color: #003b5b;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
}

.why-choose .intro {
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 2.5rem;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
  margin-top: 2rem;
}

.why-card {
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: left;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #0078b7, #00a8e8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.why-card:hover::before {
  transform: scaleX(1);
}

.why-card h3 {
  color: #004d7a;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
  letter-spacing: 0.2px;
}

.why-card p {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.6;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: #d6e4f0;
}

@media (max-width: 768px) {
  .why-choose {
    padding: 3rem 1rem;
  }

  .why-choose h2 {
    font-size: 1.7rem;
  }

  .why-card {
    text-align: center;
    padding: 1.8rem 1.2rem;
  }

  .why-card h3 {
    font-size: 1rem;
  }
}



/* Responsive */
@media (max-width: 768px) {
  .product-header {
    flex-direction: column;
    align-items: center;
  }

  .product-info {
    text-align: center;
  }

  .buttons button {
    width: 100%;
  }

  .tab-buttons {
    flex-direction: column;
  }
}
.product-page {
  margin-top: 180px; /* adjust value as needed */
}

.sku {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 15px;
}

* FAQ SECTION – EXTERNAL CSS */

.faq-item {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dce3f1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

.faq-question {
  background: #f2f6ff;
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  color: #0d2d63;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover {
  background: #e8f0ff;
}

.faq-answer {
  display: none;
  padding: 15px;
  background: #ffffff;
  font-size: 15px;
  color: #222;
  border-top: 1px solid #e5e5e5;
}

.faq-item.active .faq-answer {
  display: block;
}

/* MOBILE RESPONSIVE */
@media(max-width: 600px) {
  .faq-question {
    font-size: 16px;
    padding: 12px;
  }
  .faq-answer {
    font-size: 14px;
    padding: 12px;
  }
}

.howworks-section {
  max-width: 950px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: "Segoe UI", Roboto, sans-serif;
}

.howworks-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #0d2d63;
  text-align: center;
  margin-bottom: 25px;
}

/* Highlight Box */
.howworks-box {
  background: #f4f7ff;
  border-left: 5px solid #0d2d63;
  padding: 25px 28px;
  border-radius: 12px;
  box-shadow: 0 3px 18px rgba(0,0,0,0.06);
  animation: fadeIn 0.6s ease;
}

.howworks-box p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #333;
  text-align: justify;
}

/* Subtle animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- MOBILE RESPONSIVE ---------- */
@media (max-width: 600px) {
  .howworks-section h2 {
    font-size: 26px;
  }

  .howworks-box {
    padding: 20px;
  }

  .howworks-box p {
    font-size: 15.5px;
    line-height: 1.7;
  }
}