/* * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
} */

.hidenav {
  display: none;
}

:root {
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 35);
  --duration: 60s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
  --bg-blue: #00335e;
  --bg-white: #ffffff;
  --bg-red: #ee2110;
  --text-color-red: #ee2110;
  --text-color-white: #ffffff;
  --text-color: #111111;
  --inter: "Inter";
  --bg-color-greywhite: #f4f4f4;
}

/* .inter-<uniquifier> {
        font-family: "Inter", serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
      } */
@font-face {
  font-family: "TestNational2";
  src: url("../font/TestNational2-Medium.otf") format("opentype");
  font-style: medium;
}

.hidenav-ad {
  display: none !important;
}

.main-header {
  .show-c-logo {
    width: 118px;
    height: 118px;
  }

  .container {
    height: 178px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .infocpmy {
      h1 {
        height: 28px;
        font-family: var(--inter) !important;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 28px;
        color: #ffffff;

        .size167 {
          font-size: x-large !important;
        }
      }

      .text-secondary {
        height: 22px !important;
        font-family: var(--inter) !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 22px !important;
        color: #ffffff !important;
      }

      .trusted-label {
        font-size: 12px;
        color: #6c757d;

        img {
          height: 30px;
          width: 77px;
        }
      }
    }
  }

  .btnset {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end;
    gap: 10px;

    .enquiry {
      width: 168px;
      background-color: var(--bg-red);
    }

    .contact {
      width: 168px;
    }
  }

  .rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px;
    gap: 5px;
    font-family: var(--inter);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;

    span {
      color: #efa001;
      height: 26px;
      font-size: 18px !important;
      display: inline-block;
    }
  }
}

.nav-links {
  border-top: 1px solid #dee2e6 !important;
  background-color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
}

.nav-links .nav-link {
  color: #333 !important;
  padding: 1rem !important;
  font-weight: 500 !important;
  position: relative;
  /* Ensure relative positioning for pseudo-elements */
}

.nav-links .nav-link.active {
  color: var(--bg-blue) !important;
  border-bottom: 2px solid transparent;
  /* Prevent jumpiness */
  font-weight: 600 !important;
}

.nav-links .nav-link.active::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 79%;
  height: 1px;
  background-color: var(--bg-blue);
}

.nav-links .nav-link:hover {
  color: var(--bg-red) !important;
}

.main-header {
  background-color: var(--bg-blue) !important;
}

/* next secation */
.sellerbanner {
  background-color: #f2f3f7;
}

.sale-banner {
  background-color: #581d2c;
  color: white;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sale-text {
  font-family: serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.sale-percentage {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.quote-form {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.carousel-item img {
  height: 470px;
  max-width: 834px;
  /* object-fit: cover; */
  border-radius: 10px !important;
  /* Makes them circular */
}

.carousel-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  /* Makes them circular */
  background-color: #0d6dfd00 !important;
  /* Default color */
  border: 1px solid #ccc !important;
  /* Removes default border */
}

.carousel-indicators button.active {
  background-color: #f8f9fa !important;
  /* Highlight color for active indicator */
  border: 1px solid #f8f9fa !important;
  /* Removes default border */
  /* Slightly enlarges the active indicator */
}

.cmpy-detls {
  background-color: #f2f3f7 !important;
  /* height: 396px; */

  .container {
    h2 {
      height: 48px;

      font-family: "TestNational2";
      font-style: normal;
      font-weight: 500;
      font-size: 40px;
      line-height: 48px;
      display: flex;
      align-items: center;

      color: #111111;

      /* Inside auto layout */
      flex: none;
      order: 0;
      align-self: stretch;
      flex-grow: 0;
    }

    .card {
      width: 834px;
      border: none;

      p {
        font-size: 14px;
        line-height: 20px;
        font-family: var(--inter);
      }

      .container strong {
        font-weight: 600;
      }

      .container {
        strong {
          font-family: var(--inter);
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 20px;
          color: #111111;
        }

        p {
          font-family: "Inter";
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #303030;
        }
      }
    }
  }
}

.quote-form {
  h3 {
    font-family: "TestNational2";
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 38px;
    display: flex;
    align-items: center;
    color: #111111;
    flex: none;
    order: 0;
    flex-grow: 0;
  }

  p {
    height: 22px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #303030;
    flex: none;
    order: 1;
    flex-grow: 0;
  }

  button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    width: 362px;
    height: 44px;
    background: #ee2110;
    border-radius: 100px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
  }

  form {
    label {
      height: 14px;
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 14px;
      color: #303030;
      flex: none;
      order: 0;
      flex-grow: 0;
    }
  }
}

/* next */
.corporate-video {
  background-color: #f2f3f7 !important;

  h2 {
    font-family: "TestNational2";
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    display: flex;
    align-items: center;

    color: #111111;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }

  .video-container {
    position: relative;
    width: 100%;
    max-width: 834px;
    max-height: 470px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .video-placeholder {
    width: 100%;
    height: auto;
    display: block;
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    padding: 10px;
    background-color: #023b69e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0px 0px 10px rgb(255 255 255 / 55%);
  }

  .play-button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* next */

.product-section {
  background-color: var(--bg-color-greywhite);

  h2 {
    height: 48px;

    font-family: "TestNational2";
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    display: flex;
    align-items: center;

    color: #111111;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }

  .gap-sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
  }

  .product-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    min-height: 454px;
  }

  .product-img {
    width: 100%;
    height: 256px;
    object-fit: contain;
    padding: 10px;
    border-radius: 7%;
  }


  .custom-btn {
    min-height: 36px;
    min-width: auto;
    width: 100%;
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 300;
    text-decoration: none;
    display: inline-flex;
    font-family: var(--inter);
    align-items: center;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .btn-view {
    background-color: transparent;
    border: 1px solid var(--bg-blue);
    color: var(--bg-blue);
    border-radius: 30px;
  }

  .btn-view:hover {
    background-color: #f8f9fa;
    border-color: #ced4da;
  }

  .btn-get-quote {
    background-color: var(--bg-red);
    border-radius: 30px;
    border: none;
    color: white;
  }

  .btn-get-quote:hover {
    background-color: var(--bg-red);
  }

  .product-title {
    font-family: var(--inter) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #111111 !important;
    flex: none !important;
    order: 0 !important;
    flex-grow: 0 !important;
    margin-top: 10px;
    height: 60px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .product-price {
    height: 22px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #111111;
    flex: none;
    order: 0;
    flex-grow: 0;

    small {
      font-weight: 400 !important;
    }
  }

  .category-title {
    font-family: "TestNational2";
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 38px;
    display: flex;
    align-items: center;
    color: #111111;
    flex: none;
    order: 0;
    flex-grow: 0;
  }

  .load-more {
    color: var(--bg-blue);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 10px;

    width: 116px;
    height: 24px;

    flex: none;
    order: 2;
    flex-grow: 0;
  }

  .load-more:hover {
    color: #333;
  }
}

/* next */

.ratings-section {
  background-color: var(--bg-color-greywhite);
  /* padding: 2rem 0; */
  padding: 20px;

  .reviewbtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    gap: 6px;

    width: 186px;
    height: 36px;

    background: #ee2110;
    border: 1px solid #ffffff;
    border-radius: 100px;

    flex: none;
    order: 2;
    flex-grow: 0;
  }
}

.rating-score {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stars {
  color: #ffc107;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.total-reviews {
  color: #666;
  font-size: 0.9rem;
}

.rating-bars {
  margin: 1rem 0;
}

.rating-bar {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.rating-label {
  text-align: right;
  margin-right: 1rem;
  color: #666;
}

.progress {
  flex-grow: 1;
  height: 8px;
  margin-right: 1rem;
  background-color: #e9ecef;
}

.progress-bar {
  background-color: #ffc107;
}

.rating-count {
  min-width: 40px;
  color: #666;
  font-size: 0.9rem;
}

.review-card {
  background: white;
  border-radius: 8px;
  width: 100%;

  p {
    height: 72px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #303030;
  }
}

.review-header {
  display: flex;
  flex-direction: column;
  /* Arrange content vertically */
  align-items: flex-start;
  /* Align all items to the left */
}

.review-meta {
  font-weight: bold;
  margin-bottom: 5px;
  /* Add space below name/role */
}

.review-name,
.review-role,
.review-stars {
  display: block;
  /* Ensure all elements stack on separate lines */
  text-align: left;
  /* Left-align content */
}

.review-name {
  height: 26px;
  font-family: var(--inter);
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #111111;
}

.review-stars {
  display: inline-block;
  font-size: 16px;
  color: #ddd;
  /* Default unfilled star color */
  position: relative;
  letter-spacing: 5px;
  /* Match spacing with unfilled stars */

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  height: 16px;
}

.review-stars::before {
  content: "★★★★★";
  color: #efa001;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 5px;
  /* Match spacing with unfilled stars */
  width: 0px;
  display: flex;
  overflow: hidden;
}

.review-stars[data-rating]::before {
  width: calc(var(--rating) * 20%);
  /* Fill based on rating percentage */
}

.review-actions {
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  button {
    padding: 1% 0px;
  }
}

/* .modal-dialog {
  top: 0% !important;
} */

/* .rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 5px;
} */

.rating>input {
  display: none;
  /* Hide radio inputs */
}

.rating>label {
  position: relative;
  width: 1em;
  font-size: 38px;
  color: #ddd;
  /* Default color for unfilled stars */
  cursor: pointer;
  transition: color 0.2s ease;
}

.rating>label::before {
  content: "\2606";
  /* Unicode for outline star (empty) */
  color: #ddd;
  /* Unfilled color */
}

.rating>input:checked~label::before {
  content: "\2605";
  /* Unicode for filled star */
  color: #efa001;
  /* Filled star color */
}

/* For the checked state of the current and preceding stars */
.rating>input:checked+label::before {
  content: "\2605";
  /* Filled star when selected */
  color: #efa001;
  /* Gold color for filled stars */
}

.rating>input:checked~label::before {
  content: "\2605";
  /* Make sure all preceding stars are filled */
  color: #efa001;
  /* Gold for filled stars */
}

/* Hover effect - highlights stars on hover */
.rating>label:hover,
.rating>input:hover~label {
  color: #efa001;
  /* Highlight all stars as gold on hover */
}

.modal-content {
  border-radius: 15px;

  .modal-header {
    display: flow !important;

    h5 {
      font-family: "TestNational2";
      font-style: normal;
      font-weight: 500;
      font-size: 30px;
      line-height: 38px;
      display: flex;
      align-items: center;
      color: #111111;
    }

    p {
      font-family: var(--inter);
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: #303030;
    }

    button {
      background-color: #ebebeb;
      border: none;
      height: 25px;
      width: 25px;
      border-radius: 20px;
      position: absolute;
      right: 0px;
      top: 0px;
      margin: 16px;

      i {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: larger;
      }
    }
  }

  .submitbtn {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 6px !important;
    width: 186px !important;
    height: 36px !important;
    color: white;
    background: #ee2110 !important;
    border: 1px solid #ffffff !important;
    border-radius: 100px !important;
  }

  .model-body {
    .mb-2 {
      .font-bold {
        font-family: var(--inter);
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        color: #303030;
      }
    }

  }
}