/*



---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */




/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #002756 !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #000000 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #000000 !important;}
/* .bg-success { background-color: #393937 !important;}*/
.btn-success {
  background-color: #002756 !important;
  border-color: #002756 !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #002756;
  color: #fff;
}
/* Nav */
#templatemo_nav_top {
  min-height: 40px; padding: 15px 30px;
  border-radius: 50px; /* Smoothly curved edges */
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Modern shadow effect */
  transition: transform 0.3s ease-in-out;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_nav_top * { font-size: .9em;}  
#templatemo_main_nav a { color: #000000; }
#templatemo_main_nav a:hover { color: #002756;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}
/* Default navbar style */
.navbar {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Hide the navbar when it reaches the footer */
.navbar.hidden {
  opacity: 0;
  display: none;
}
/* Move navbar up */
.navbar.scrolled-up {
  transform: translateY(-60%);
}


/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important; }
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #002756 !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#002756;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #002756;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #002756 !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #002756;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #002756;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/* this is take me to the top button */

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  background-color: #002756;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 15px;
  cursor: pointer;
  display: none; /* Make sure to show this by adding logic in JS */
  transition: opacity 0.3s ease-in-out;
}

#backToTop:hover {
  background-color: #002756;
}

#backToTop i {
  font-size: 20px;
  animation: arrowUpDown 2s infinite ease-in-out;
}

@keyframes arrowUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}






/* language drop down list */

.dropdown-menu {
  min-width: 150px;
}

.dropdown-item i {
  font-size: 18px;
}

@media (max-width: 768px) {
  .dropdown-menu {
      min-width: 120px;
    
  }

  .dropdown-item i {
      font-size: 16px;
  }
}


/* flag list */

.flag-icon {
  width: 20px;
  height: auto;
}

.dropdown-menu {
  min-width: 150px;
  border-radius: 20px;
}

@media (max-width: 768px) {
  .dropdown-menu {
      min-width: 120px;
  }

  .flag-icon {
      width: 15px;
  }
}









.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* General styles for the product card container */
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three cards per row */
  gap: 20px; /* Gap between cards */
  
}

/* Style for the anchor tag wrapping the card */
.product-card-link {
  text-decoration: none; /* Remove underline from links */
  color: inherit; /* Ensure text color is consistent */
}

/* Ensure product cards themselves are styled correctly */
.product-card {
  background-color: #fff; /* Card background color */
  padding: 15px; /* Padding inside the card */
  border: 1px solid #ddd; /* Optional border */
  border-radius: 8px; /* Optional rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow */
  text-align: center; /* Center content inside the card */
  transition: transform 0.3s ease; /* Smooth zoom effect on hover */
  position: relative; /* Ensure absolute positioning of child elements */
}
/* Zoom effect for the image on hover */
.product-card img {
  max-width: 100%; /* Ensure image fits within the card */
  height: auto; /* Maintain aspect ratio */
  max-height: 150px; /* Limit image height */
  object-fit: cover; /* Ensure image covers the available space */
  border-radius: 4px; /* Optional rounded corners for the image */
  transition: transform 0.3s ease; /* Smooth zoom effect on image */
}

/* Apply zoom effect when hovering over the card */
.product-card:hover img {
  transform: scale(1.1); /* Zoom in by 10% */
}

.product-card-link:hover .product-card {
  transform: scale(1.05); /* Slight zoom effect on hover */
}


@media (max-width: 768px) {
  .product-card-link {
      flex: 1 1 calc(50% - 20px); /* Two cards per row on tablets */
  }

  .product-cards {
      grid-template-columns: repeat(2, 1fr); /* Two cards per row on tablets */
  }
}

@media (max-width: 480px) {
  .product-card-link {
      flex: 1 1 100%; /* One card per row on mobile */
  }

  .product-cards {
      grid-template-columns: 1fr; /* One card per row on mobile */
  }
}

/* Container for horizontal pagination and content */
.pagination-container {
  position: relative;
  overflow: hidden; /* Hide overflow to maintain a clean layout */
}

/* Wrapper for content sections to enable horizontal scrolling */
.content-wrapper {
  display: flex; /* Arrange content sections horizontally */
  transition: transform 0.3s ease; /* Smooth horizontal scrolling */
}

/* Each content section */
.content-section {
  flex: 0 0 100%; /* Full width for each section */
  box-sizing: border-box;
  padding: 20px;
  background: #f4f4f4;
  border: 1px solid #ddd;
  text-align: center;
}

/* Pagination styling */
.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
}

.pagination button:hover {
  background-color: #ddd;
}


.product-card .icons {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.product-card .icons i {
  margin: 0 15px;
  font-size: 24px;
  color: #333;
  transition: color 0.3s, transform 0.3s;
  cursor: pointer;
}

.product-card .icons i:hover {
  color: #ff6b6b;
  transform: scale(1.3);
}

.product-card .icons i:nth-child(2):hover {
  color: #51cf66;
}





.image-container img {
  
  transition: transform 0.5s ease; /* Smooth zoom effect */
}

.image-container img:hover {
  transform: scale(1.1); /* Zoom the image by 20% */
}




/* this is the part of featured products */

.img-hover-zoom {
    transition: transform 0.3s ease-in-out;
}
.img-hover-zoom:hover {
    transform: scale(1.1);
}
.btn-cart-hover {
    transition: background-color 0.3s ease-in-out, transform 0.2s;
}
.btn-cart-hover:hover {
    background-color: #ffc107;
    color: #000;
    transform: translateY(-2px);
}
.badge {
    font-size: 0.75rem;
    padding: 0.5em 1em;
    border-radius: 1em;
    color: #fff;
    text-align: center;
    font-weight: bold;
    z-index: 10; /* Ensure badge is on top */
    top: 10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
    position: absolute;
    transform: rotate(-10deg); /* Tilt the badge for a modern look */
    background: #fff; /* Background for sticker effect */
    border: 2px solid #000; /* Border for sticker effect */
    background-clip: padding-box;
}
.badge-new {
    background: #ff6f61;
    border-color: #e54b4b;
}
.badge-best {
    background: #ffcc00;
    border-color: #e0a800;
}
.badge-hot {
    background: #ff3d00;
    border-color: #e53935;
}
.animated {
    animation-duration: 1.5s;
    animation-fill-mode: both;
}
.fadeInDown {
    animation-name: fadeInDown;
}
.fadeInUp {
    animation-name: fadeInUp;
}
.zoomIn {
    animation-name: zoomIn;
}
.bounceIn {
    animation-name: bounceIn;
}
/* Keyframes for Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
      transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
      transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
      transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
      opacity: 1;
      transform: scaleX(1);
  }
}


/* this is the part of about us */

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Ensures the video stays behind content */
}

.content {
  position: relative;
  z-index: 1; /* Ensures the content is above the video */
}


/* ribbon part */


.ribbon {
  position: absolute;
  right: -0.313rem;
  top: -0.313rem;
  z-index: 1;
  overflow: hidden;
  width: 4.688rem;
  height: 4.688rem;
  text-align: right;
}

.ribbon span {
  font-size: 0.625rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25rem;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 6.25rem;
  display: block;
  position: absolute;
  top: 1.188rem;
  right: -1.313rem;
}

.ribbon-hot span {
  color: var(--white);
  background: var(--hot-one);
  background: linear-gradient(var(--hot-one) 0%, var(--hot-two) 100%);
  box-shadow: 0 0.188rem 0.625rem -0.313rem var(--box-shadow);
}

.ribbon-new span {
  color: var(--white);
  background: var(--new-one);
  background: linear-gradient(var(--new-one) 0%, var(--new-two) 100%);
  box-shadow: 0 0.188rem 0.625rem -0.313rem var(--box-shadow);
}

.ribbon-pop span {
  color: var(--white);
  background: var(--pop-one);
  background: linear-gradient(var(--pop-one) 0%, var(--pop-two) 100%);
  box-shadow: 0 0.188rem 0.625rem -0.313rem var(--box-shadow);
}

.ribbon-spo span {
  color: var(--white);
  background: var(--spo-one);
  background: linear-gradient(var(--spo-one) 0%, var(--spo-two) 100%);
  box-shadow: 0 0.188rem 0.625rem -0.313rem var(--box-shadow);
}

.ribbon span::before {
  content: "";
  position: absolute;
  left: 0rem;
  top: 100%;
  z-index: -1;
}

.ribbon span::after {
  content: "";
  position: absolute;
  right: 0rem;
  top: 100%;
  z-index: -1;
}

.ribbon-hot span::before {
  border-left: 0.188rem solid var(--hot-two);
  border-right: 0.188rem solid transparent;
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--hot-two);
}

.ribbon-hot span::after {
  border-left: 0.188rem solid transparent;
  border-right: 0.188rem solid var(--hot-two);
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--hot-two);
}

.ribbon-new span::before {
  border-left: 0.188rem solid var(--new-two);
  border-right: 0.188rem solid transparent;
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--new-two);
}

.ribbon-new span::after {
  border-left: 0.188rem solid transparent;
  border-right: 0.188rem solid var(--new-two);
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--new-two);
}

.ribbon-pop span::before {
  border-left: 0.188rem solid var(--pop-two);
  border-right: 0.188rem solid transparent;
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--pop-two);
}

.ribbon-pop span::after {
  border-left: 0.188rem solid transparent;
  border-right: 0.188rem solid var(--pop-two);
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--pop-two);
}

.ribbon-spo span::before {
  border-left: 0.188rem solid var(--spo-two);
  border-right: 0.188rem solid transparent;
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--spo-two);
}

.ribbon-spo span::after {
  border-left: 0.188rem solid transparent;
  border-right: 0.188rem solid var(--spo-two);
  border-bottom: 0.188rem solid transparent;
  border-top: 0.188rem solid var(--spo-two);
}

.desc {
  margin: 0 auto;
  padding-top: 3rem;
  text-align: center;
  font-size: 1.3rem;
  max-width: 75ch;
}
:root {
  --hot-one: hsl(0, 96%, 49%);
  --hot-two: hsl(0, 89%, 30%);
  --new-one: hsl(75, 88%, 42%);
  --new-two: hsl(78, 89%, 35%);
  --pop-one: hsl(207, 69%, 50%);
  --pop-two: hsl(212, 67%, 36%);
  --spo-one: hsl(38, 96%, 49%);
  --spo-two: hsl(34, 89%, 30%);
  --box-shadow: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);
}

html {
  scroll-behavior: smooth;
  
}