/*
Theme Name: Waggy
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Waggy is specially designed product packaged for eCommerce pet store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --accent-color: #DEAD6F;
  --dark-color: #222222;
  --light-dark-color: #727272;
  --light-color: #fff;
  --grey-color: #dbdbdb;
  --light-grey-color: #fafafa;
  --primary-color: #6995B1;
  --light-primary-color: #eef1f3;
}

/* Fonts */
:root {
  --body-font: 'Chilanka', cursive;
  --heading-font: 'Chilanka', cursive;
  --secondary-font: 'Montserrat', sans-serif;
}


body {
  --bs-link-color: #333;
  --bs-link-hover-color: #333;

  --bs-link-color-rgb: 40, 40, 40;
  --bs-link-hover-color-rgb: 0, 0, 0;

  /* --bs-link-color: #DEAD6F;
  --bs-link-hover-color: #DEAD6F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: 'Chilanka', cursive;
  --bs-body-font-family:  "Inter", Sans-serif;

  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #41403E;

  --bs-primary: #DEAD6F;
  --bs-primary-rgb: 222, 173, 111;

  --bs-primary-bg-subtle: #FFF9EB;
  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;

  --bs-success-rgb: 238, 245, 228;
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}

.btn-primary {
  padding: 1.2rem 3rem;
  --bs-btn-color: #fff;
  --bs-btn-bg: #DEAD6F;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e9b775;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #DEAD6F;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}

.btn-outline-primary {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  --bs-btn-color: #DEAD6F;
  --bs-btn-border-color: #DEAD6F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #DEAD6F;
  --bs-btn-hover-border-color: #DEAD6F;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #DEAD6F;
  --bs-btn-active-border-color: #DEAD6F;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #DEAD6F;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #DEAD6F;
  --bs-gradient: none;
}

.btn-outline-dark {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  text-transform: uppercase;
  --bs-btn-color: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #41403E;
  --bs-btn-hover-border-color: #41403E;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #41403E;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #41403E;
  --bs-gradient: none;
}

.btn-dark {
  padding: 1.2rem 3rem;
  font-size: 1.1875rem;
  text-transform: uppercase;
  --bs-btn-color: #fff;
  --bs-btn-bg: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #363533;
  --bs-btn-hover-border-color: #363533;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #41403E;
  --bs-btn-disabled-border-color: #41403E;
}

@media screen and (max-width:991px) {

  .btn-primary,
  .btn-outline-primary,
  .btn-outline-dark,
  .btn-dark {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}

body {
  letter-spacing: 0.01625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:  "Inter", Sans-serif;

  color: var(--bs-body-color);
  font-weight: 400;
  text-transform: capitalize;
}

a {
  text-decoration: none;
}

.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.secondary-font {
  font-family: var(--secondary-font);
  font-weight: 300;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {

  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }

  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}


/* search bar style  */
.search-bar {
  border: 1px solid #EAEAEA;
}

.search-bar ::placeholder {
  font-family: var(--secondary-font);
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}


/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
  color: var(--accent-color);
}

/* category style */
iconify-icon.category-icon {
  color: #DEAD6F99;
  font-size: 100px;
  transition: all 0.3s ease-in;

}

a.categories-item:hover iconify-icon.category-icon {
  color: #DEAD6F;
}


/* banner style */
.swiper-pagination-bullet {
  border: 1px solid var(--bs-body-color);
  background-color: transparent;
  opacity: 1;
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bs-body-color);
  background: var(--bs-body-color);
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
}

/* social icon button */
/* social button */

  /* Floating Social Buttons */
  .social-buttons {
    position: fixed;
    left: 20px;
    top: 90%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.Btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
}

.sign {
    width: 100%;
    transition-duration: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sign i {
    font-size: 20px;
    color: white;
}

.text {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: white;
    font-size: 1.0em;
    font-weight: 600;
    transition-duration: .3s;
}

.Btn:hover {
    width: 125px;
    border-radius: 40px;
    transition-duration: .3s;
}

.Btn:hover .sign {
    width: 30%;
    transition-duration: .3s;
    padding-left: 20px;
}

.Btn:hover .text {
    opacity: 1;
    width: 70%;
    transition-duration: .3s;
    padding-right: 10px;
}

.Btn:active {
    transform: translate(2px ,2px);
}

.facebook { background-color: #1877F2; }
.linkedin { background-color: #1877F2; }
/* .instagram { background: linear-gradient(45deg, #833AB4, #E1306C, #FD1D1D); } */
.call { background-color: #34b7f1; }
.whatsapp { background-color: #50C878; }

@media (max-width: 768px) {
    .social-buttons {
        left: 10px;
        gap: 10px;
    }
    .Btn {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .social-buttons {
        left: 5px;
    }
    .Btn {
        width: 40px;
        height: 40px;
    }
}

/* footer start */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #222;
  color: #fff;
  padding: 40px 20px;
}
.footer-column {
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
}
.footer-logo {
  width: 100%;
  display: block;
  margin-bottom: 15px;
  border-radius: 20px;
  background-color: white;
  

}
.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}
.social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #444;
  color: #fff;
  font-size: 20px;
  transition: 0.3s;
  text-decoration: none;
}
.social-icon:hover {
  background-color: #f4a742;
}
.footer h3 {
  margin-bottom: 10px;
  border-bottom: 2px solid #f4a742;
  display: inline-block;
  padding-bottom: 5px;
}
.footer p, .footer ul li a {
  color: #ddd;
  transition: 0.3s;
}
.footer p:hover, .footer ul li a:hover {
  color: #f4a742;
}
.footer ul {
  list-style: none;
  padding: 0;
}
.footer ul li {
  margin-bottom: 8px;
}
.footer ul li a {
  text-decoration: none;
}
.footer-bottom {
  text-align: center;
  padding: 15px;
  background-color: #111;
  color: #ddd;
}
.footer-bottom a {
  color: orangered;
  text-decoration: none;
}
.footer-bottom a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .footer {
      flex-direction: column;
      align-items: center;
      text-align: center;
  }
  .social-icons {
      justify-content: center;
  }
}


 /* Global Styles */
  
  /* Vision & Mission Section */
  .vision-mission {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 5%;
    background: #E1D4D4;
    color: white;
    position: relative;
}

.vision-mission .container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.box {
    flex: 1;
    min-width: 300px;
   background: linear-gradient(45deg, rgb(255, 107, 107), rgb(255, 165, 2)) ;
    padding: 30px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 5px 20px rgba(255, 118, 147, 0.3);
}

.box:hover {
    transform: translateY(-10px);
    box-shadow: 0px 5px 25px rgba(255, 118, 147, 0.6);
}

.box h2 {
    font-size: 28px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
}

.box p {
    font-size: 16px;
    line-height: 1.6;
    color: white;
}

@media (max-width: 768px) {
    .vision-mission {
        padding: 50px 10%;
    }
    .box {
        padding: 20px;
    }
    .box h2 {
        font-size: 24px;
    }
    .box p {
        font-size: 14px;
    }
}


/* Product Page */
.container1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center all items */
  gap: 137px; /* space between items */
  padding: 85px;
  background-color: rgb(231 212 221);

}

.product1 {
  width: 300px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.product1:hover {
  transform: scale(1.05);
}

.product1 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  mix-blend-mode:darken;
  object-fit: contain;
}

.product1 h3 {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}

.product1 p {
  color: #777;
  font-size: 14px;
  margin-top: 5px;
}
.product1:hover{
  background-color: #f1e4ea;
}

button{
  border-radius: 5px;
  width: 10%;
  height: 20%;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #7f3e4e;
  
}
#seeMoreBtn{
  font-size: 22px;
  font-family: 'Times New Roman', Times, serif;
  color: white;
}
@media (max-width: 768px) {
  #seeMoreBtn {
    flex-direction: column;
    width: 100px; 
  }
}
#seeMoreBtn:hover {
  background-color: #0e0f0f; /* Darker blue on hover */
  transform: scale(1.05); /* Slight zoom */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.more-products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;  
  margin-left: 125px;
  margin-top: 65px;
  margin-bottom: 73px;
}
.product2 {
  width: 300px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.product1 {
  width: 200px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.product2:hover {
  transform: scale(1.05);
}

.product2 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  mix-blend-mode:darken;
  height: 70%;
  object-fit: contain;
}

.product2 h3 {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}

.product2 p {
  color: #777;
  font-size: 14px;
  margin-top: 5px;
}
.product2:hover{
  background-color: #f1e4ea;
}


/* next session */

.product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  max-width: 1218px;
  margin: 0 auto;
  background-color: #e7e1e0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  margin-top: 63px;
  margin-bottom: 63px;
  cursor: zoom-in;
}

.product-image {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  mix-blend-mode: darken;
  transition: transform 0.3s ease-in-out;
}
.overlay {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  animation: flipIn 0.6s ease forwards;
  opacity: 0;
  transform: rotateY(-90deg);
}
@keyframes flipIn {
  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}


.overlay img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid white;
  border-radius: 10px;
  
}
.product-image img:hover {
  transform: scale(1.2); /* zoom in by 10% */
}
.product-image{
  animation: slideDown 1s ease forwards;
  opacity: 0;
  transform: translateY(-100px);
  mix-blend-mode:darken;
}
@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-details {
  flex: 2 1 500px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-details h1 {
  font-size: 26px;
  color: #0e0707;
  margin-bottom: 0;
  margin-right: 79%;
  width: 50%;
  margin-left: -2px;
  text-align: justify;
}

.product-details .category1 {
  font-family: Arial, sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
  /* margin-left: -50%; */
  margin-bottom: 20px;
  margin-top: -15px;
  text-align: justify;
  font-weight: bold;
}

/* .product-details .category1 span {
  font-weight: bold;
  color: #e21d1d;
  background-color:#e7e1e0;
  display:inline;
  text-align: justify;
  line-height: 1.3;
} */
.category-text {
  font-size: 16px;
  color: red;
  font-weight: bold;
  white-space: nowrap; /* to keep text in one line */
}

.product-details table {
  width: 80%;
  border-collapse: collapse;
  margin-top: -20px;
  background-color: rgb(222, 228, 227);
  border: 1.6px solid black;
}

.product-details table td {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  font-size: 15px;
  color:black;
  border: 2px solid rgb(150, 148, 148);
}

.product-details .description {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  text-align:justify;
  width: 80%;
}
@media(max-width: 768px){
  .more-products{
    margin-left: 92px;
  }
}

/* Product Page End */



/* <!-- Carousel Start --> */
  /* General Styles */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
  }

  /* Hero Section */
  .slider-container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }

  .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      opacity: 0;
      transition: opacity 1s ease-in-out;
  }

  .slide.active {
      opacity: 1;
  }

  /* Shadow Overlay */
  .slide::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Dark shadow overlay */
      z-index: 1;
  }

  /* Text Box */
  .text-box {
      position: relative;
      z-index: 2;
      background: rgba(0, 0, 0, 0.6);
      padding: 30px;
      border-radius: 10px;
      animation: fadeInUp 1.5s ease-in-out;
  }

  .text-box h2 {
      font-size: 32px;
      font-weight: 600;
      text-transform: uppercase;
      color: white;
      font-family: Alconica;
  }

  .text-box h1 {
      font-size: 50px;
      font-weight: bold;
      color: #FFD700; /* Golden Yellow */
      margin: 10px 0;
      font-family: "Poppins", sans-serif;;
  }

  .text-box p {
      font-size: 18px;
      color: white;
      margin-bottom: 20px;
  }

  .btn {
      display: inline-block;
      padding: 12px 24px;
      background: red;
      color: white;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      transition: background 0.3s;
     
  }

  .btn:hover {
      background: darkred;
      color: white;
  }

  /* Navigation Arrows */
  .prev, .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.5);
      color: black;
      padding: 10px 15px;
      font-size: 22px;
      cursor: pointer;
      border-radius: 50%;
      transition: background 0.3s;
      z-index: 10;
      width: 60px;
  }

  .prev:hover, .next:hover {
      background: white;
  }

  .prev { left: 20px; }
  .next { right: 20px; }

  /* Dots Navigation */
  .dots-container {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      z-index: 10;
  }

  .dot {
      width: 12px;
      height: 12px;
      margin: 5px;
      background: gray;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s;
  }

  .dot.active {
      background: white;
  }

  /* Animation */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .text-box {
          padding: 20px;
      }
      .text-box h1 {
          font-size: 36px;
      }
      .text-box p {
          font-size: 16px;
      }
      .btn {
          padding: 10px 20px;
      }
  }


/* about section */

  /* Ozar Pet Vet Section */
  .ozar-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 50px auto;
      padding: 20px;
      background: white;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      overflow: hidden;
  }

  /* Left Side Image */
  .ozar-image {
      flex: 1;
      overflow: hidden;
      border-radius: 15px 0 0 15px;
  }

  .ozar-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease-in-out;
  }

  .ozar-image img:hover {
      transform: scale(1.05);
  }

  /* Right Side Content */
  .ozar-content {
      flex: 1;
      padding: 30px;
      text-align: left;
  }

  .ozar-content h2 {
      font-size: 32px;
      color: #ff4500;
      margin-bottom: 10px;
  }

  .ozar-content p {
      font-size: 18px;
      color: #555;
      line-height: 1.6;
      margin-bottom: 20px;
  }

  .ozar-btn {
      display: inline-block;
      padding: 12px 25px;
      font-size: 18px;
      color: white;
      background: #ff4500;
      border: none;
      border-radius: 5px;
      text-decoration: none;
      transition: 0.3s;
  }

  .ozar-btn:hover {
      background: #e63e00;
      transform: scale(1.05);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .ozar-section {
          flex-direction: column;
          text-align: center;
      }

      .ozar-image {
          border-radius: 15px 15px 0 0;
          width: 100%;
      }

      .ozar-content {
          padding: 20px;
      }

      .ozar-content h2 {
          font-size: 28px;
      }

      .ozar-content p {
          font-size: 16px;
      }
  }

  /* General Styles */

/* Featured Section */
.featured-section {
    padding: 40px 20px;
    background-color: #E1D4D4;
    text-align: center;
}

.featured-section h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Logo Carousel */
.logo-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
}

.logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 200%;
    animation: slide 10s linear infinite;
}

.logo-slide {
    width: 25%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-slide img {
    max-width: 150px;
    height: auto;
    padding: 10px;
    transition: transform 0.3s ease-in-out;
}

.logo-slide img:hover {
    transform: scale(1.1);
}

/* Dots Navigation */
.dots-container {
    margin-top: 20px;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.dot.active {
    background-color: black;
}

/* Animation */
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .logos {
        width: 300%;
        animation: slide 15s linear infinite;
    }

    .logo-slide img {
        max-width: 100px;
    }
}


/* product start */

  
  body {
      background: #f8f8f8;
      text-align: center;
  }
  
  .container {
      max-width: 1200px;
      margin: auto;
      padding: 20px;
  }
  
  .section-title {
      font-size: 32px;
      font-weight: bold;
      color: #222;
      margin-bottom: 20px;
  }
  
  .categories {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
  }
  
  .category {
      width: 250px;
      background: white;
      border-radius: 10px;
      padding: 15px;
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
  }
  
  .category:hover {
      transform: translateY(-10px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  
  .category img {
      width: 100%;
      border-radius: 10px;
      transition: transform 0.3s;
      margin-top: 45px;
      height: 300px;
  }
  
  .category:hover img {
      transform: scale(1.1);
  }
  
  .category-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: red;
      color: white;
      font-size: 18px;
      font-weight: bold;
      padding: 10px 0;
  }
  
  .category:nth-child(2) .category-title { background: rgb(38, 150, 18); }
  .category:nth-child(3) .category-title { background: rgb(38, 150, 18); }
  .category:nth-child(4) .category-title { background: red; }
  
  @media (max-width: 768px) {
      .categories {
          flex-direction: column;
          align-items: center;
      }
      .category {
          width: 90%;
      }
  }

/* featured product start */

  
  .featured-section1 {
      position: relative;
      width: 100%;
      height: 300px;
      background: url('images/productimg16.jpg') no-repeat center center/cover;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
  }
  .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Dark overlay */
  }
  .featured-text {
      position: relative;
      color: white;
      font-size: 32px;
      font-weight: bold;
  }
  @media (max-width: 768px) {
      .featured-text {
          font-size: 24px;
      }
      .featured-section1 {
          height: 200px;
      }
  }


  /* featured product slider */
  

/* top section start */

.top-section {
width: 100%;
overflow: hidden;
/* background-color: #898a8c; */
padding: 20px 0;
margin-bottom: 200px;
background: none;
}

.marquee-container {
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
width: 100%;
height: 150px;
}

.marquee-content {
display: flex;
animation: marquee 20s infinite;
}
.marquee-content:hover {
animation-play-state: paused;
}
.multi-img {
flex-shrink: 0;
width: 200px;
margin: 0 10px;
border-radius: 50%;
}

.multi-img img {
width: 100%;
height: 200px;
object-fit: unset;
border-radius: 25px;
}

@keyframes marquee {
0% {
  transform: translateX(0%);
}
100% {
  transform: translateX(-50%);
}
}

@media (max-width: 768px) {
.multi-img {
  width: 80px;
  height: 80px;
}
}

@media (max-width: 480px) {
.marquee-container {
  margin-bottom: -40px;
}
.multi-img {
  width: 100px;
  height: 100px;
}
.multi-img img {
  object-fit: unset;
  height: 100%;
}
}

/* top section end */

/* commitment section */

  /* General Styles */
  body {
      font-family: Arial, sans-serif;
      background: #f8f8f8;
      margin: 0;
      padding: 0;
  }

  /* Ozar Pet Vet Section */
  .ozar-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 50px auto;
      padding: 20px;
      background: white;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      overflow: hidden;
  }

  /* Left Side Content */
  .ozar-content {
      flex: 1;
      padding: 30px;
      text-align: left;
  }

  .ozar-content h2 {
      font-size: 32px;
      color: #ff4500;
      margin-bottom: 10px;
  }

  .ozar-content p {
      font-size: 18px;
      color: #555;
      line-height: 1.6;
      margin-bottom: 20px;
  }

  /* Important Points with Icons */
  .important-points {
      list-style: none;
      padding: 0;
  }

  .important-points li {
      display: flex;
      align-items: center;
      font-size: 18px;
      margin-bottom: 10px;
      color: #444;
  }

  .important-points li i {
      color: #ff4500;
      font-size: 22px;
      margin-right: 10px;
  }

  /* Button */
  .ozar-btn {
      display: inline-block;
      padding: 12px 25px;
      font-size: 18px;
      color: white;
      background: #ff4500;
      border: none;
      border-radius: 5px;
      text-decoration: none;
      transition: 0.3s;
  }

  .ozar-btn:hover {
      background: #e63e00;
      transform: scale(1.05);
  }

  /* Right Side Image */
  .ozar-image {
      flex: 1;
      overflow: hidden;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .ozar-image img {
      width: 100%;
      max-width: 500px;
      height: auto;
      object-fit: cover;
      transition: transform 0.3s ease-in-out;
  }

  .ozar-image img:hover {
      transform: scale(1.05);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .ozar-section {
          flex-direction: column-reverse;
          text-align: center;
          padding: 15px;
      }

      .ozar-image {
          border-radius: 15px 15px 0 0;
          width: 100%;
      }

      .ozar-content {
          padding: 20px;
      }

      .ozar-content h2 {
          font-size: 28px;
      }

      .ozar-content p {
          font-size: 16px;
      }

      .important-points li {
          justify-content: center;
      }
  }

  
  /* Background Section */
  #register {
      background: url('images/background-img.png') no-repeat center center/cover;
      padding: 80px 0;
  }

  /* Form Styling */
  .form-container {
      background: rgba(255, 255, 255, 0.9);
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .form-container h2 {
      font-size: 28px;
      margin-bottom: 20px;
      text-align: center;
  }

  .btn-submit {
      background: red;
      color: white;
      font-size: 18px;
      transition: 0.3s;
  }

  .btn-submit:hover {
      background: red;
  }





  .who-we-are {
    position: relative;
    background: url('images/serviceimg1.jpg') no-repeat center center/cover;
    color: white;
    height: 200px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    overflow: hidden;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow effect on the section */
}

/* Adding a dark overlay for better text visibility */
.who-we-are::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
}

/* Ensure content appears above the overlay */
.who-we-are .content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .who-we-are {
        height: auto; /* Allow height to adjust on small screens */
        padding: 40px 5%;
    }
}


.who-we-are .content {
  max-width: 900px;
}

.who-we-are h2 {
  font-size: 24px; /* Adjusted for smaller height */
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.who-we-are p {
  font-size: 18px; /* Adjusted for smaller height */
  line-height: 1.4;
  margin-bottom: 10px;
  font-weight: 600;
  color: #fff;
}

.who-we-are .btn {
  background:red;
  color: white;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
}

.who-we-are .btn:hover {
  background: #bb2929;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  
  .who-we-are h2 {
      font-size: 20px;
  }

  .who-we-are p {
      font-size: 12px;
      color: #fff;
  }

  .who-we-are .btn {
      font-size: 12px;
      padding: 5px 10px;
  }
}


/* brand section */
  
  .brands-section {
      padding: 40px 20px;
      background: #e1d4d4;
  }
  .brands-section h2 {
      color: #ff5722;
      font-size: 28px;
      margin-bottom: 10px;
  }
  .brands-section p {
      color: #555;
      font-size: 16px;
      margin-bottom: 30px;
  }
  .brands-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
      justify-items: center;
      max-width: 1200px;
      margin: auto;
  }
  .brand-box {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      width: 100%;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .brand-box:hover {
      transform: scale(1.1);
      box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
  }
  .brand-box img {
      width: 100%;
      height: 170px;
      transition: transform 0.3s ease-in-out;
  }
  .brand-box:hover img {
      transform: scale(1.1);
  }
  @media (max-width: 600px) {
      .brands-container {
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      }
  }

  








/* scroll button */


    
    
    /* Scroll to Top Button */
    .scroll-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #736d6d;
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
    }

    .scroll-top:hover {
        background: #736d6d;
        transform: scale(1.1);
    }

    /* Show button when scrolling */
    .show-scroll {
        opacity: 1;
        visibility: visible;
    }

/* pet clothing */
.card {
  --bs-card-inner-border-radius: none;
  --bs-card-bg: transparent;
  background-color: transparent;
  border: none;
}

a.btn-cart {
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}

a.btn-wishlist {

  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}


/* pet foodies style  */
button.filter-button {
  letter-spacing: 0.02125rem;
  border: none;
  border-bottom: 2px solid #D9D9D8;
  background: transparent;
  text-transform: uppercase;
  font-size: 1.0625rem;
  transition: all 0.3s ease-in;
}

button.filter-button.active,
button.filter-button:hover {
  border-bottom: 2px solid #DEAD6F;
}

/* testimonial style  */
.testimonial-content {
  color: #908F8D;
}

iconify-icon.quote-icon {
  color: #F7EEE4;
  font-size: 14rem;
}


/* register form  */
.form-control {
  color: #908F8D;
  line-height: normal;
  letter-spacing: 0.02125rem;
  text-transform: capitalize;
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
  background: #FFF;
  display: flex;
  padding: 1.25rem 0rem 1.25rem 1.25rem;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
}

.form-control:focus {
  border-color: #41403E;
}



/* topbar start */
/* General Top Bar Styling */
.top-header {
  height: 60px; /* Fixed Height */
  background-color: #E1D4D4;
  font-family: 'Times New Roman', Times, serif;
  display: flex;
  align-items: center;
  padding: 0 15px; /* Adjusted padding */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.contact-details {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.contact-details .phone-number,
.contact-details .email-address {
  margin-right: 50px;
}

/* Search Box Styling */
.search-container {
  display: flex;
  align-items: center;
  background: white;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid #ccc;
  margin-right: 100px;
}

.search-container input {
  border: none;
  outline: none;
  padding: 5px;
  font-size: 16px;
  width: 120px;
  transition: width 0.3s ease-in-out;
}

.search-container input:focus {
  width: 180px;
}

.search-container button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .top-header {
      height: auto; /* Allows content to adjust */
      padding: 10px;
  }

  .header-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
  }

  .contact-details {
      font-size: 14px;
      flex-direction: column;
      align-items: center;
      margin-bottom: 5px;
  }

  .search-container input {
      width: 100px;
  }

  .search-container input:focus {
      width: 140px;
  }
}
.phone-number{
margin-left: 40px;
}

/* navbar start */

/* Icons */
.icons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.icons a {
  text-decoration: none;
  color: antiquewhite;
  font-size: 20px;
  transition: color 0.3s ease;
}

.icons a:hover {
  color: brown;
}

/* New Button Styling */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #6c757d; /* Greyish background */
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.3s ease-in-out;
}

.icon-btn:hover {
  background: #5a6268; /* Darker shade on hover */
}

/* Mobile Menu */
.hamburger {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
  

  .icons {
      gap: 10px;
  }

  .icon-btn {
      width: 35px;
      height: 35px;
      font-size: 16px;
  }
}


/* Navbar Styling */
.custom-navbar {
  background-color: aliceblue;
  padding: 0px 5px;
  height: 80px;
  display: flex;
  align-items: center;
}

.navbar-brand img {
  height: 160px;
  width: 230px;
  border-radius: 50px;
margin-top: -55px;
  
}


.navbar-nav {
  gap: 20px;
}

.navbar-nav .nav-link {
  font-size: 18px;
  font-weight: 500;
  padding: 10px 15px;
}

/* Mega Menu Styling */
.dropdown-menu {
  background: #fff;
  border-radius: 5px;
  border: none;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
  font-size: 15px;
  padding: 10px 15px;
}

.dropdown-item:hover {
  background: #E1D4D4;
}

/* Hover Effect for Mega Menu */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}

/* Mega Menu (Only for "Our Products") */
#productsDropdown + .dropdown-menu {
  width: 600px;
  padding: 20px;
}

/* Simple Dropdown for "Services" */
#servicesDropdown + .dropdown-menu {
  width: auto;
  padding: 10px;
}

/* Call & Email Icons */
.icons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.icon-btn {
  font-size: 18px;
  color: #333;
  text-decoration: none;
  padding: 8px;
}

.icon-btn:hover {
  color: #007bff;
}

/* Responsive Navbar */
@media (max-width: 992px) {
  .navbar-nav {
      width: 100%;
      text-align: center;
  }

  .navbar-nav .nav-item {
      width: 100%;
  }

  .dropdown-menu {
      width: 100%;
  }

  .icons {
      justify-content: center;
  }
}

/* Mobile Menu Toggle */
@media (max-width: 768px) {
  .navbar-toggler {
      border: none;
      outline: none;
      padding: 10px;
  }

  .navbar-toggler:focus {
      box-shadow: none;
  }
}

/* navbar end */




/* footer start */
/* Footer Styles */
.footer {
  background: #0a1f14;
  color: white;
  padding: 40px 10%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

/* Footer Logo */
.footer-logo {
  width: 150px;
  margin-bottom: 20px;
}

.footer-column {
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
  transition: 0.3s ease-in-out;
}

.footer-column:hover {
  transform: translateY(-5px);
  color: white;
}

.footer-column h3 {
  font-size: 20px;
  margin-bottom: 15px;
  border-bottom: 2px solid #fff;
  display: inline-block;
  padding-bottom: 5px;
  transition: 0.3s;
}

.footer-column h3:hover {
  color: #ff4500;
}

.footer-column p, 
.footer-column ul {
  font-size: 16px;
  color: #ddd;
  line-height: 1.5;
  transition: 0.3s;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin: 10px 0;
}

.footer-column ul li a {
  color: #ddd;
  text-decoration: none;
  transition: 0.3s;
}

.footer-column ul li a:hover {
  color: #ff4500;
  padding-left: 5px;
}


/* Copyright Section */
.footer-bottom {
  text-align: center;
  padding: 15px;
  background: #E1D4D4;
  color: rgb(15, 14, 14);
  font-size: 14px;
}



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

  .footer-social {
      justify-content: center;
  }
}


/* heading style */

  .heading-container {
            text-align: center;
            position: relative;
        }

        .heading {
            font-size: 30px;
            font-family: 'Poppins', sans-serif;
            font-weight: bold;
            text-transform: uppercase;
            background: linear-gradient(45deg, #ff6b6b, #ffa502);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            display: inline-block;
            transition: transform 0.2s ease-in-out;
        }

        .heading:hover {
            transform: scale(0.1);
        }

        .underline {
            width: 20%;
            height: 2px;
            background: linear-gradient(90deg, #ff6b6b, #ffa502);
            margin: 10px auto;
            border-radius: 5px;
            transition: width 0.3s ease-in-out;
        }

        .heading-container:hover .underline {
            width: 50%;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .heading {
                font-size: 32px;
            }
            .underline {
                width: 60%;
            }
        }


/* blog style */
.blog-paragraph {
  color: #908F8D;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--secondary-font);
}

.blog-read {
  color: #908F8D;
  font-size: 1rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

a.blog-read {
  border-bottom: 3px solid #D9D9D8;
  transition: all 0.3s ease-in;
}

a.blog-read:hover {
  border-bottom: 3px solid #8a8a8a;
}


/* services style  */
.service-icon {
  font-size: 30px;
  border-radius: 3.125rem;
  border: 1px solid #D9D9D8;
  padding: 1.25rem;
}


/* insta style  */
.instagram-item:hover:before,
.instagram-item:hover .icon-overlay {
  opacity: 1;
  cursor: pointer;
}

.icon-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  align-items: center;
  font-size: 3rem;
  cursor: pointer;
  opacity: 0;
  -moz-transition: 0.8s ease;
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}


/* footer style */
iconify-icon.social-icon {
  color: #CACACA;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  border: 1px solid #D9D9D8;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
  transition: all 0.5s ease;
}

li.social:hover iconify-icon.social-icon {
  color: #FFF;
  border: 1px solid #DEAD6F;
  background: #DEAD6F;
}

iconify-icon.send-icon {
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  color: #FFF;
  border: 1px solid #DEAD6F;
  background: #DEAD6F;
}


@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

  .dropdown-menu a {
    padding-left: 0;
  }

  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}


/*--------------------------------------------------------------
faqs section style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
  color: var(--body-text-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion {
  --bs-accordion-color: var(--light-text-color);
  --bs-accordion-bg: none;
  --bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');

}

.accordion-button::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  box-shadow: none;
}

/*--------------------------------------------------------------
Account section style start
--------------------------------------------------------------*/
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Blog section style start
--------------------------------------------------------------*/
/* ------ Pagination ------*/
.pagination .page-numbers {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--bs-body-color);
  padding: 0 10px;
  line-height: 1.4;
  transition: 0.9s all;
  border-radius: 8px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--accent-color);
}

iconify-icon.pagination-arrow {
  color: var(--bs-body-color);
  transition: 0.9s all;
}

iconify-icon.pagination-arrow:hover {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Single Product section style start
--------------------------------------------------------------*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--light-color);
  background-color: var(--accent-color);
}