:root {

    --clr-primary-400:	hsl(1, 96%, 38%);
    --clr-heading-300:rgb(199, 0, 0);
    --clr-bg-500: hsl(0, 8%, 97%);

 
    --ff-base:'Rubik', sans-serif;

 
    --fw-light: 400; 
    --fw-regular: 500;
    --fw-bold: 700;

    /*
        - Mobile: 375px
        - Desktop: 1440px
    */

}

/* Reuse */
.flex-mid {
  display: flex;
  justify-content: center;
  align-items: center;
}


*, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    scroll-behavior: smooth;

  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  #root, #__next {
    isolation: isolate;
  }

 .line-clr {
  padding: 0.5rem;
  background-color: #A60000;
 }

 .flex {
  display: flex;
 }

 .justify-between {
  justify-content: space-between;
 }

 .align-center {
  align-items: center;
 }

 .gap-1 {
  gap: 1rem;
 }

 .gap-2 {
  gap: 2rem;
 }

.animl:hover {
  color:#fdaaa8;
  transition: all 0.3s;
}

.animl:link, .animl:visited {
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  font-size: 1.2rem;
}

 /* Sticky Noob */

 .sticky .header{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  height: 3rem;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.03);
  padding: 0.5rem 1rem 0.5rem 3rem;
}

.sticky .carousel {
  margin-top: 3.5rem;
}

  body {
    font-family: var(--ff-base);
    /* font-size: 0.9375rem; */
    font-size: 0.875rem;
   }

   .container-top {
    display: flex;
    gap: 1rem;
   }


  /* HEADER */

   .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    padding: 1rem 5rem 1.5rem 5rem;
   }

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

  .icon-inf {
    height: 17px;
    width: 17px;
  }
/* 
  .location-inf {
    display: flex;
    align-items: center;
  } */

  .contact-inf {
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }

  .email-inf {
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }

  .header-logo-search {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    margin-bottom: 1.5rem;
    padding:0 5rem 0 5rem;
  }

  .company-logo {
    width: 334px;
    height: 76px;
  }


    .search {
        --padding: 10px;

        display: flex;
        align-items: center;
        padding: var(--padding);
        border-radius: 28px;
        box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2);
        
    
}

.search-input {
    font-size: 16px;
    font-family: var(--ff-base);
    color: #333;
    outline: none;
    border: none;
    background-color: transparent;
    width: 100%;
}

.search-input::placeholder,
.search-icon {
    color: rgba(0, 0, 0, 0.25);
}

form {
    width: 100%;
    margin: 0;
    padding: 0;
}

.btn-mobile-nav{
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav{
  height: 2rem;
  width: 2rem;
  color: #fff;
}

/* 
 */

 .icon-mobile-nav[name="close-outline"] {
    display: none;
 }

/* MAIN - NABEIGATION */

.header {
  display: flex;
  justify-content: center;
    background-color: var(--clr-primary-400);
    padding: 1rem 3rem 1rem 3rem;
  }
  
  .header p a {
  text-decoration: none;
  cursor: pointer;
  color: #000000;
  }
  
  .footer p a {
  text-decoration: none;
  cursor: pointer;
  color: #000000;
  }
  
  
  ul li {
  display: inline-block;
  position: relative;
  
  }
  
  ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 1.2rem;
  
  }
  
  .dropdown-content li a {
  margin-bottom: 1.2rem;
  }
  
  .dropdown-content li {
  list-style: circle;
  }
  
  ul li ul.dropdown-content {
  
  width: 150px; 
  background-color: var(--clr-primary-400);
  position: absolute;
  z-index: 999;
  display: none;
  top: 100%; 
  left: 0; 
  padding: 1rem; 
  border-radius: 5px; 
  }
  
  ul li ul.dropdown-content li {
  display: block;
  text-align: center;
  margin-bottom: 8px; 
  }
  
  ul li ul.dropdown-content li:hover {
  background-color: #fb3c39;
  }
  
  
  
  
  
  ul li .animl:hover {
  color: #fd9e9c;
  
  }
  
  ul li:hover ul.dropdown-content {
  display: block;
  }
  
  .nav-list {
    display: flex;
    align-items: center;
    gap: 4rem;
  }
  
  
  
  .animl:link, .animl:visited {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
  }
  
  .btn-top {
    display: flex;
    gap: 1rem;
  }
  
  .btn {
    width: 92px;
    height: 40px;
    font-size: 1rem;
    border-radius: 0.4rem;
    cursor: pointer;
  }
  
  .btn:hover {
  color: var(--clr-primary-400);
  }

form {
    width: 100%;
}

.pagination:link, .pagination:visited {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    background-color: var(--clr-primary-400);
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.pagination:hover {
    background-color: #fff;
    color: var(--clr-primary-400);
    border: 1px solid var(--clr-primary-400);
}

.branded-img {
    width: 100%; 
      height: auto;
      object-fit: cover; 
      margin-bottom: 2rem;
  }
  
  .pagination-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    padding: 0 2rem 0 2rem;
    margin-bottom:0 1rem  2rem 0;
  }
  
  .form-2 {
    width: 50%;
  }

  .pagination-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    gap: 2rem;
    padding: 2rem;
  }

  .pagination {
    height: 42px;
    width: 42px;
  }
  

  a:link {
    font-size: 2rem;
    display: flex;
    gap: 1rem;
    background-color: BE0704;
    border-radius: 50%;
  }

/* Product Section */

.products {
    padding: 1rem 6rem 1rem 6rem;
  
  }

.products-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

  .products-top1 {
    padding: 1rem 6rem 1rem 6rem;
}
  
  .product-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  
  .product-type {
    font-size: 3rem;
    color: var(--clr-heading-300);
    font-weight: var(--fw-regular);
  }
  
  .search-product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
  
  .product-cards {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .product-card {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
    height: auto;
    width: 100%;
    padding: 0.5rem 2rem;
    border-radius: 15px;
    border: 2px solid #C76060;
  }
  
  .product-u {
    font-weight: var(--fw-regular);
  }
  
  .product-name {
    font-size: 1.5rem;
    font-weight: var(--fw-regular);
    color: var(--clr-heading-300);
  }
  
  .product-img {
    height: 120px;
    width: 150px;
    margin-left: 2.5rem;
  }
  
  .product-img2 {
    height: 140px;
    width: 170px;
    margin-left: 2.5rem;
  }
  
  
  .title-heart {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .btn-card {
    border-radius: 30px;
    background-color: var(--clr-primary-400);
    color: #fff;
    cursor: pointer;
    padding: 6px;
    
  }
  
  .btn-card:hover {
    background-color: #fff;
    color:var(--clr-primary-400) ;
    border: 1px solid var(--clr-heading-300);
    transition: all 0.3s;
  }
  
  
  .btn-m {
    margin-left: 0.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
  }

  
  
  /* Footer */

  .section-follow {
    display: flex;
    justify-content: space-between;
    background-color: var(--clr-primary-400);
    padding: 1.5rem;
  }
  
  .follow-us {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  
  .footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
  }
  
  .footer-img {
    height: 51px;
    width: 247px;
  }
  
  .btn-view {
    background-color: var(--clr-primary-400);
    color: #fff;
  }
  
  .btn-view:hover {
    color:#fff
  }
  
  /* Link
   */


   .b1 {
    background-color: #fff !important; 
    color: #A60000 !important;
    border: 1px solid var(--clr-primary-400) !important;

   }


   /* Magnifying Glass */
   .product-img {
    transition: transform 0.3s ease; /* Smooth transition for zoom effect */
  }
  
  .product-img:hover {
    transform: scale(1.2); /* Zoom in effect on hover */
  }

  /* mq */

@media (max-width: 90.563rem) {
  .btn-card {
    padding: 4px;
  }
  }
  
  @media (max-width: 80.313rem) {
  .btn-card {
    padding: 3px;
  }
  }

  @media (max-width: 83.063rem) {
    .products-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  
  .top-txt {
    font-size: 0.7rem;
  }

  
  @media (max-width: 79.125rem) {
    .animl:link, .animl:visited {
      text-decoration: none;
      cursor: pointer;
      color: #fff;
      font-size: 0.8rem;
      }

  }

  
  @media (max-width: 75.625rem) {
  
  .fo-card {
    display: none;
  }
  
  .top-txt {
    font-size: 0.6rem;
  }
  
  .icontuto {
    height: 60px;
    width: 60px;
  }
  }

  @media (max-width: 71.875rem) {
    .pagination-top {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  @media (max-width: 71.375rem) {
    .header {
      justify-content: flex-end;
      padding: 0rem 3rem 0rem 3rem;
      position: relative;
    
    }
    
    .btn-mobile-nav {
      display: block;
      z-index: 9999;
    }
    
    @media (max-width: 71.375rem) {
      
      .header {
        justify-content: flex-end;
        padding: 0rem 1rem 0rem 1rem;
        position: relative;
      }
    
      .btn-mobile-nav {
        display: block;
        z-index: 9999;
      }
    
      .main-nav {
        background-color: #BE0704;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
    
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
    
        /* hide */
        opacity: 0;
        pointer-events: none;
        visibility: hidden;  
      }
    
      .nav-open .main-nav {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
      }
    
      .nav-open .icon-mobile-nav[name="close-outline"] {
        display: block;
      }
    
      .nav-open .icon-mobile-nav[name="menu-outline"] {
        display: none;
      }
    
      .nav-list {
        flex-direction: column;
      }

  @media (max-with: 64.313rem) {
    .btn-card {
      padding: 1px;
    }
  }


  
  
  @media (max-width: 65.563rem) {
  
  .icontuto {
    height: 50px;
    width: 50px;
  }
  
  .tutorial-description {
    font-size: 0.7rem;
  }
  
  .fo-card {
    display: none;
  }
  
  .top-txt {
    font-size: 0.6rem;
  }
  }

  @media (max-width: 64.5rem) {
    .products-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 47.063rem) {
    .products-container {
      display: grid;
      grid-template-columns: 1fr;
    }
  }
  
  
  @media (max-width: 62.25rem) {
  
  .fo-card2 {
    display: none;
  }
  }
  
  @media (max-width: 60.938rem) {
  
  
  .animl:link, .animl:visited {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 0.8rem;
    }
  
    .icontuto {
      height: 30px;
      width: 30px;
    }
  
  }
  
  @media (max-width: 56rem) {
  
  .animl:link, .animl:visited {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 0.8rem;
    }
  
    .icon-tutorial {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
  
    .icon-tutorials {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
  
    .icontuto {
        height: 50px;
        width: 50px;
    }
  
   
  }
  
 
  
  
    @media (max-width: 45.125rem) {
      .focu-1 {
        display: none;
  
      }
  
    }
  
    @media (max-width: 40.938rem) {
      .styler {
        font-size: 2rem;
      }
  
   
    }
  
    
    @media (max-width: 35rem) {
      .product-card {
        padding: 0.5rem 1rem;
      }
  
      .follow-uss {
        display: none;
      }
    }

    @media (max-width: 31.25rem) {
      .pagination-1 {
        gap: 1rem;
      }

      .btn-n {
        display: none;
      }

      .product-type {
        font-size: 1.55rem;
      }
    }
  
    @media (max-width: 25rem) {
      .product-card {
        padding: 0.5rem 1rem;
      }
  
  
    }

    } 
  }