/** VARIABLES
--------------------------------------------------------------*/
:root {
  --accent-color: #717171;
  --white-color: #fff;
  --black-color: #000;
  --gray-color: #f3f3f3;
  --gray-color-300: #d8d8d8;
  --gray-color-500: #aeaeae;
  --gray-color-700: #797979;
  --gray-color-800: #3a3a3a;
  --light-gray-color: #d7dddf;
  --primary-color: #72aec8;
  --bs-primary-rgb: 114, 174, 200;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --light-blue-color: #edf1f3;
  --navbar-color-color: #131814;
  --swiper-theme-color: #4a4a4a;
  --swiper-pagination-color: #c33f31;
  --primary-blue: #0068c7;
  --dark-blue: #212d61;
  --persian-red: #c33f31;
  --process-cyan: #5fbeea;
  --alice-blue: #edf8fd;
}

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

/* Fonts */
:root {
  --body-font: "Quicksand", sans-serif;
  --heading-font: "Roboto Mono", monospace;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  box-sizing: border-box;
}
body {
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='32' height='32' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 96%, 1)'/><path d='M40 16h-6m-4 0h-6m8 8v-6m0-4V8M8 16H2m-4 0h-6m8 8v-6m0-4V8'  stroke-linejoin='round' stroke-linecap='round' stroke-width='1' stroke='hsla(229, 49%, 25%, 0.05)' fill='none'/><path d='M16-8v6m0 4v6m8-8h-6m-4 0H8m8 24v6m0 4v6m8-8h-6m-4 0H8'  stroke-linejoin='round' stroke-linecap='round' stroke-width='1' stroke='hsla(6, 60%, 48%, 0.05)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  /* background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(30)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(199, 80%, 96%, 0.5)'/><path d='M15 22h10m-10-4h10M35 2h10M35 38h10m-50 0H5M-5 2H5'  stroke-linejoin='round' stroke-linecap='round' stroke-width='0.5' stroke='hsla(229, 49%, 25%, 0.3)' fill='none'/><path d='M18-5V5m4-10V5m16 10v10M18 35v10m4-10v10M2 15v10'  stroke-linejoin='round' stroke-linecap='round' stroke-width='0.5' stroke='hsla(6, 60%, 48%, 0.1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>"); */
}

::-webkit-scrollbar {
  width: 8px;
  background: var(--dark-blue);
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--persian-red);
}

p {
  font-size: 1.2em;
  color: var(--gray-color-700);
}
ul.inner-list li {
  font-size: 1.2em;
}
a {
  color: var(--dark-blue);
  text-decoration: none;
  transition: 0.3s color ease-out;
}
a.light {
  color: var(--light-color);
}
a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

/*------------ Background Color -----------*/
.bg-gray {
  background: var(--gray-color);
}
.bg-dark {
  background: var(--dark-color);
}
.bg-light {
  background: var(--light-color);
}
.bg-light-blue {
  background: var(--alice-blue);
}

/* - Section Padding
  --------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}
.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}
.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}
.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}

/* no padding */
.no-padding-top {
  padding-top: 0 !important;
}
.no-padding-right {
  padding-right: 0 !important;
}
.no-padding-bottom {
  padding-bottom: 0 !important;
}
.no-padding-left {
  padding-left: 0 !important;
}
.no-padding-tb {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.no-padding-lr {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.no-gutter {
  padding: 0 !important;
}

/* no padding and margin */
.no-padding {
  padding: 0 !important;
}
.no-margin {
  margin: 0 !important;
}

/* - Section margin
  --------------------------------------------------------------*/
.margin-small {
  margin-top: 3em;
  margin-bottom: 3em;
}
.margin-medium {
  margin-top: 5em;
  margin-bottom: 5em;
}
.margin-large {
  margin-top: 7em;
  margin-bottom: 7em;
}
.margin-xlarge {
  margin-top: 9em;
  margin-bottom: 9em;
}

@media only screen and (max-width: 768px) {
  .margin-small,
  .margin-medium,
  .margin-large {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

/* - Section Title
  --------------------------------------------------------------*/
h3.card-title,
h3.cart-title {
  font-size: 1.5em;
}

h3.card-title a {
  color: var(--dark-blue);
  text-decoration: none;
  font-weight: 600;
}

@media only screen and (max-width: 485px) {
  h3.card-title {
    font-size: 0.9em;
  }
  h3.cart-title {
    font-size: 1em;
  }
  .icon-box-content p {
    font-size: 0.9em;
  }

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

  .display-header h2 {
    font-size: 1.2em;
  }

  .display-header .btn-right a {
    padding: 0;
    font-size: 0.9em;
  }
  .product-card .card-detail span {
    font-size: 0.9em !important;
  }
}

/* - Section width
  --------------------------------------------------------------*/
.u-full-width {
  width: 100%;
  border: none;
}

/*--------------------------------------------------------------
  /** 2.10 Buttons
  --------------------------------------------------------------*/
/* - Button Sizes
  ------------------------------------------------------------- */
.btn.btn-small {
  padding: 0.8em 1.8em;
  font-size: 0.65em;
}
.btn.btn-medium {
  padding: 0.8em 2em;
  font-size: 1.1em;
  letter-spacing: 2px;
}
.btn.btn-large {
  padding: 2.4em 5.1em;
  font-size: 1.8em;
}
@media only screen and (max-width: 991px) {
  .btn.btn-medium {
    padding: 0.5rem 1.2rem;
  }
}

@media only screen and (max-width: 585px) {
  .btn.btn-medium {
    padding: 0.5rem 1rem;

    font-size: 0.9em;
  }
}

@media only screen and (max-width: 485px) {
  .btn.btn-medium {
    font-size: 0.5em;
  }
}

/*  text 
  ------------------------------------------------------------- */
.text-dark-blue {
  color: var(--dark-blue) !important;
}

.currency-text {
  font-size: 0.9rem !important;
  font-weight: 600;
  color: #000;
}

#mobile-products:hover .text-dark,
#laptop-products:hover .text-dark,
#smart-watches:hover .text-dark {
  border-bottom: 5px solid var(--persian-red);
}

/* - Button Shapes
  ------------------------------------------------------------- */
.btn.btn-rounded,
.btn.btn-rounded::after {
  border-radius: 6px;
}
.btn.btn-pill,
.btn.btn-pill::after {
  border-radius: 2em;
}
/* button outline */
.btn.btn-outline-dark,
.btn.btn-outline-light,
.btn.btn-outline-accent {
  background: transparent;
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-outline-dark:hover::after,
.btn.btn-outline-light:hover::after {
  background-color: transparent;
}
.btn.btn-outline-dark {
  border-color: rgba(0, 0, 0, 1);
  color: var(--dark-color);
}
.btn.btn-outline-dark:hover {
  background: var(--dark-color);
  color: var(--light-color);
}
.btn.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--light-color);
}
.btn.btn-outline-light:hover {
  background: var(--primary-color);
  color: var(--light-color);
  border-color: var(--primary-color);
}
.btn.btn-outline-accent {
  background: transparent;
  border-color: var(--accent-color);
  color: var(--dark-color);
}
.btn.btn-outline-accent:hover {
  border-color: var(--dark-color);
  color: var(--dark-color) !important;
}
.btn.btn-full {
  display: block;
  margin: 0.85em 0;
  width: 100%;
  letter-spacing: 0.12em;
}

/* no border radius */
.btn-rounded-none,
.btn-rounded-none::after {
  border-radius: 0;
}

/* - Buttons Color Scheme
  ------------------------------------------------------------- */
.btn.btn-normal {
  text-decoration: underline;
  border: none;
}
.btn.btn-normal:hover {
  text-decoration: none;
  color: var(--dark-blue);
}
.btn.btn-accent {
  color: var(--light-color);
  background-color: var(--accent-color);
  border: none;
}
.btn.btn-accent:hover {
  color: var(--light-color) !important;
  background-color: var(--primary-color);
}
.btn.btn-black {
  background-color: var(--dark-blue);
  color: var(--light-color);
  border: none;
}
.btn.btn-black:hover {
  background-color: var(--persian-red);
  color: var(--light-color);
}
.btn.btn-light {
  background-color: var(--light-color);
  color: var(--dark-color);
  border: none;
}
.btn.btn-light:hover {
  background-color: var(--primary-color);
  color: var(--light-color);
}
.btn.btn-primary {
  background: var(--primary-color);
  color: var(--light-color);
  border: none;
}
.btn.btn-primary:hover {
  background-color: var(--dark-color);
  color: var(--light-color);
}

/* - Buttons Aligns
  ------------------------------------------------------------- */
.btn-left {
  text-align: left;
  display: block;
}
.btn-center {
  text-align: center;
  display: block;
}
.btn-right {
  text-align: right;
  display: block;
}

/*----------------------------------------------*/
/* 2 SITE STRUCTURE */
/*----------------------------------------------*/

/* - Search Bar
  ------------------------------------------------------------- */
.search-box {
  background: var(--gray-color);
  position: relative;
}
.close-button {
  position: absolute;
  top: 20px;
  right: 120px;
  cursor: pointer;
  z-index: 9;
}
.search-box input.search-input {
  font-size: 1.3em;
  width: 70%;
  height: 30px;
  padding: 25px;
  border-radius: 80px;
  border-color: rgb(0 0 0 / 25%);
  background: transparent;
}
.search-box svg {
  width: 22px;
  height: 22px;
  color: var(--dark-blue);
}
.search-box svg.search {
  margin-left: -50px;
}

/** Search Form
  --------------------------------------------------------------*/
.search-form input[type="search"].search-field {
  border: none;
  background: #f1f1f1;
  width: 100%;
  border-radius: 50px;
  padding: 10px 40px;
}
.search-form input[type="search"].search-field::focus {
  border-color: #af9aaa;
}
.search-form button {
  position: absolute;
  top: 6px;
  right: 9px;
  background: transparent;
  border: none;
}

/** Search Popup
  --------------------------------------------------------------*/
.search-popup {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.search-popup.is-visible {
  opacity: 1;
  visibility: visible;
  cursor: -webkit-image-set(
      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E")
        1x,
      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E")
        2x
    ),
    pointer;
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E"),
    pointer;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.search-popup-container {
  background-color: transparent;
  position: relative;
  top: 50%;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  text-align: center;
  box-shadow: none;
  cursor: default;
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.is-visible .search-popup-container {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.search-popup-form {
  position: relative;
  margin: 0 0 3em 0;
}
.search-popup-form .form-control {
  padding: 0 0 0.375em 0;
  font-size: 2em;
}
.search-popup-form #search-popup-submit {
  display: none;
}
.search-popup .search-popup-close {
  display: block;
  position: absolute;
  top: 2em;
  right: 2em;
  margin: -0.5em;
  padding: 0.5em;
  line-height: 0;
}
.search-popup .search-popup-close:hover {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.search-popup .search-popup-close i {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  fill: rgba(0, 0, 0, 0.5);
}
.search-popup .search-popup-close:hover i {
  fill: rgba(0, 0, 0, 1);
}
.search-popup .cat-list-title {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 0.6em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.search-popup .cat-list {
  margin: 0;
  list-style-type: none;
}
.search-popup .cat-list-item {
  display: inline-block;
  margin-bottom: 0;
  letter-spacing: 0.015em;
  font-size: 2em;
}
.search-popup .cat-list-item a {
  position: relative;
}
.search-popup .cat-list-item a::after {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 1px;
  border-bottom: 1px solid #ff9697;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  transition: height 0.3s, opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.search-popup .cat-list-item a:hover::after {
  height: 1px;
  opacity: 1;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
.search-popup .cat-list-item::after {
  content: "/";
  padding: 0 5px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  vertical-align: text-top;
}
.search-popup .cat-list-item:last-child::after {
  display: none;
}

@media only screen and (max-width: 991px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.425em;
  }
}
@media only screen and (max-width: 767px) {
  .search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}
@media only screen and (max-width: 575px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.125em;
  }
  .search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}

.search-popup input[type="search"] {
  font-size: 24px;
  height: 60px;
  padding: 26px;
}
.search-popup .search-form button {
  top: 12px;
  right: 15px;
}
.search-popup .search-form button svg {
  height: 28px;
  width: 28px;
}

/* 1. Header
  /*----------------------------------------------*/
#header {
  background: var(--dark-blue) !important;
  height: 13vh;
  z-index: 11;
}
.site-header {
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: background 0.3s ease-out;
}

.navbar-toggler svg.navbar-icon {
  width: 50px;
  height: 50px;
}
.navbar-nav li a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  margin-left: 1rem;
}
.navbar-nav .current_page_item a,
.navbar-nav li a:focus,
.navbar-nav li a:hover {
  color: var(--process-cyan);
  font-weight: 600;
}

.dropdown-menu {
  left: -2rem !important;
}

.navbar-brand {
  margin-left: 4rem;
  width: 18vw;
  height: 12vh;
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -5px;
    right: -5px;
    bottom: -1px;
    border: 2px dashed var(--alice-blue);
    transition: all 1s;
    animation: clippath 5s infinite linear;
    border-radius: 5rem;
  }

  &::after {
    animation: clippath 5s infinite -2.5s linear;
  }
}

@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 50% 0);
  }

  25% {
    clip-path: inset(0 50% 0 0);
  }
  50% {
    clip-path: inset(50% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 50%);
  }
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5rem;
}

@media only screen and (max-width: 1024px) {
  #navbar .user-items {
    display: none;
  }
}
@media only screen and (max-width: 991px) {
  #header {
    height: 11vh;
  }
  .navbar-brand {
    width: 40vw;
    height: 10vh;
  }
}
@media only screen and (max-width: 575px) {
  #header {
    height: 11vh;
  }
  .navbar-brand {
    width: 40vw;
    height: 10vh;
    margin-left: 2rem;
  }
}

/*------------ Offcanvas -------------- */

#header-nav .offcanvas-header,
#header-nav .offcanvas-body {
  z-index: 1;
}

#header-nav .navbar-toggler:focus {
  box-shadow: none;
}
#header-nav .offcanvas.show {
  z-index: 9999;
  background: var(--dark-blue);
}
#header-nav .offcanvas-end {
  width: 500px;
}
.offcanvas.show li a {
  font-size: 2em;
}
.offcanvas.show .offcanvas-body .navbar-nav {
  z-index: 1;
  align-items: unset !important;
  padding-left: 20px;
}

/*------------ Top User Icons -----------*/
.site-header .user-items svg {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

@media only screen and (max-width: 991px) {
  #navbar .user-items {
    display: none;
  }
}
@media only screen and (max-width: 775px) {
  .offcanvas.show li {
    padding-top: 5%;
  }
  .offcanvas.show li a {
    font-size: 1em;
  }
}

/* 2. Billboard
  /*----------------------------------------------*/
/*------------Swiper Arrow -----------*/

#billboard {
  height: 95vh;
}
#billboard .image-holder {
  margin-top: 4rem;
}

#billboard .image-holder .banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#billboard .swiper-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.swiper-icon.swiper-arrow svg {
  fill: var(--alice-blue);
}
.swiper-icon.swiper-arrow:hover svg,
.swiper-icon.swiper-arrow:focus svg {
  fill: var(--dark-blue);
}
#billboard .swiper-arrow.swiper-arrow-prev {
  left: 5rem;
}
#billboard .swiper-arrow.swiper-arrow-next {
  right: 5rem;
}

.chevron-left,
.chevron-right {
  width: 6rem;
  height: 6rem;
}

@media only screen and (max-width: 991px) {
  #billboard {
    height: 50vh;
  }
}
@media only screen and (max-width: 767px) {
  #billboard {
    height: 60vh;
  }
  #billboard .swiper-arrow.swiper-arrow-prev {
    left: 2rem;
  }
  #billboard .swiper-arrow.swiper-arrow-next {
    right: 2rem;
  }

  .chevron-left,
  .chevron-right {
    width: 4rem;
    height: 4rem;
  }
}
@media only screen and (max-width: 485px) {
  #billboard {
    height: 40vh;
  }
  .chevron-left,
  .chevron-right {
    width: 3rem;
    height: 3rem;
  }
}

.contact-info p {
  text-align: justify;
}
.contact-info i,
.contact-details {
  text-align: justify;
  font-weight: 600;
  color: var(--accent-color);
  font-style: italic;
}

/* 3. Icon Box - Company Services
  /*----------------------------------------------*/
.icon-box .icon-box-icon svg {
  width: 26px;
  height: 26px;
  /* fill: var(--dark-blue); */
  fill: var(--persian-red);
}

@media only screen and (max-width: 991px) {
  #company-services .icon-box {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 767px) {
  .padding-large {
    padding: 3rem 1rem;
  }
}

.shop-items-container {
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.product-card {
  border: 2px solid #ccd7e275;
  border-radius: 0.5rem;
  padding: 0.5rem;
  overflow: hidden;
}

.product-card:hover {
  border-color: #ccd7e2;
}

.shop-items-container .product-card {
  width: 30%;
}

/* 4. Product
  /*----------------------------------------------*/

.shop-items-container .product-card .cart-concern,
.product-store .product-card .cart-concern {
  bottom: -100px;
  left: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease-out;
  opacity: 0;
}
.shop-items-container .product-card:hover .cart-concern,
.product-store .product-card:hover .cart-concern {
  bottom: 50px;
  opacity: 1;
}
.product-card .cart-concern svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  margin-left: 9px;
}
.product-card .card-detail span {
  font-size: 1rem;
  font-weight: 700;
}
.product-card .card-detail h5 {
  font-size: 1.2rem;
}

.product-card .image-holder {
  width: 100%;
  height: 300px;
  background: #fff;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
}

.product-card .image-holder img {
  margin: auto;
  width: 90%;
  height: 90%;
  object-fit: contain;
}

@media only screen and (max-width: 991px) {
  .product-card .image-holder {
    width: 100%;
    height: 200px;
  }
  .shop-items-container .product-card {
    width: 30%;
  }

  .shop-items-container .product-card .cart-concern,
  .product-store .product-card .cart-concern {
    width: 95%;
  }
}
@media only screen and (max-width: 769px) {
  .shop-items-container .product-card .cart-concern,
  .product-store .product-card .cart-concern {
    width: 90%;
    left: auto;
  }

  .shop-items-container {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .shop-items-container .product-card {
    width: 30%;
  }
  .product-store .product-card .card-detail {
    padding: 10px;
  }

  .product-card .image-holder {
    width: 100%;
    height: 150px;
  }
}
@media only screen and (max-width: 575px) {
  .shop-items-container .product-card {
    width: 48%;
  }
}

/*------------Swiper Pagination -----------*/
.product-store
  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 35px;
}
.swiper-pagination span.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
}

@media only screen and (max-width: 575px) {
  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 25px !important;
  }
}

#yearly-sale {
  height: 90vh;
}
@media only screen and (max-width: 785px) {
  #yearly-sale {
    height: 80vh;
  }
}

/* 5. Testimonial
  /*----------------------------------------------*/
#testimonials {
  height: 70vh;
}

#testimonials .container {
  padding: 2rem 0;
}

#testimonials .testimonials-bg {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  position: absolute;
  background-color: #edf8fd;
  background-image: radial-gradient(#212d61 0.9px, #edf8fd 0.9px);
  background-size: 18px 18px;
}
.review-item blockquote {
  font-size: 2.5em;
  font-weight: 300;
  line-height: 1.2;
}
.rating svg.star {
  width: 16px;
  height: 16px;
  fill: var(--persian-red);
}
#testimonials .swiper-arrow svg {
  width: 45px;
  height: 45px;
  fill: var(--persian-red);
}
.review-content .swiper-arrow {
  top: 0;
  bottom: 0;
  z-index: 2;
}
.review-content .swiper-arrow.swiper-arrow-next {
  right: 0;
}
.review-content .quotation svg.quote {
  color: var(--process-cyan);
}

@media only screen and (max-width: 767px) {
  #testimonials blockquote {
    font-size: 2em;
  }

  .review-item blockquote {
    width: 80%;
    margin: auto;
    font-size: 1.5em !important ;
  }
}

/* 6. Subscribe
  /*----------------------------------------------*/
.subscribe-content p {
  color: var(--gray-color-500);
}

@media only screen and (max-width: 1199px) {
  .subscription-form input.form-control,
  .subscription-form button {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* 7. Instagram
  /*----------------------------------------------*/
#instagram figure.instagram-item {
  width: 20%;
}
figure.instagram-item img.insta-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.instagram-item .icon-overlay {
  top: 30px;
  left: 0;
  width: 100%;
  height: auto;
  color: var(--light-color);
  opacity: 0;
  transition: 0.9s ease-out;
}
.instagram-item:hover .icon-overlay {
  top: 0;
  opacity: 1;
}
.instagram-item .icon-overlay svg.instagram {
  height: 50px;
}

@media only screen and (max-width: 767px) {
  #instagram figure.instagram-item {
    width: 30%;
  }
}

@media only screen and (max-width: 501px) {
  #instagram figure.instagram-item {
    width: 100%;
  }
}

/* 8. Footer
  /*----------------------------------------------*/
/*------------ Social Icon -----------*/

#footer {
  color: var(--alice-blue);
  background: var(--dark-blue);
  z-index: 11;
}

#footer .container {
  position: relative;
}
.footer-menu .widget-title {
  color: var(--alice-blue);
}
.social-links svg {
  width: 20px;
  height: 20px;
  color: var(--light-gray-color);
}
.social-links svg:hover {
  color: var(--persian-red);
}
.social-links li {
  padding-right: 30px;
}

.footer-logo {
  width: 18vw;
  height: 10vh;
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -5px;
    right: -5px;
    bottom: -1px;
    border: 2px dashed var(--alice-blue);
    transition: all 1s;
    animation: clippath 5s infinite linear;
    border-radius: 5rem;
  }

  &::after {
    animation: clippath 5s infinite -2.5s linear;
  }
}

@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 50% 0);
  }

  25% {
    clip-path: inset(0 50% 0 0);
  }
  50% {
    clip-path: inset(50% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 50%);
  }
}

.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5rem;
  padding: 0.2rem 0.1rem;
}

.footer-menu p {
  text-indent: 3rem;
  text-align: justify;
}

.footer-menu .menu-list .menu-item a {
  font-weight: 600;
  font-size: 0.9rem;
}
.footer-menu .menu-list .menu-item a:hover {
  color: var(--process-cyan) !important;
}

@media only screen and (max-width: 991px) {
  .footer-logo {
    width: 38vw;
    height: 9vh;
    margin: auto;
  }
}
@media only screen and (max-width: 767px) {
  .footer-logo {
    width: 35vw;
    height: 9vh;
    margin: auto;
  }
}

@media only screen and (max-width: 485px) {
  .footer-logo {
    width: 60vw;
    height: 9vh;
  }
}
/* 9. About Us Page
  /*----------------------------------------------*/
/*------------ Video Icon -----------*/
.video-item a {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.video-item svg.video-player {
  width: 80px;
  height: 80px;
  padding: 19px;
  border-radius: 50%;
}

/* - Shop Page
  --------------------------------------------------------------*/
/* ----------- Search Bar -----------*/
.shopify-grid select#input-sort {
  font-size: 1.2em;
  color: var(--dark-grey-color);
  border: none;
  padding: 0;
  text-align: center;
}

/* ----------- SideBar -----------*/
.sidebar input.search-field {
  width: 290px;
  height: 50px;
  box-shadow: 5px 5px 15px 5px #eee;
  border: 1px solid #eee;
  padding-left: 20px;
  outline-offset: 0;
}
.sidebar .search-icon {
  padding: 14px;
}
.sidebar svg.search {
  width: 20px;
  height: 20px;
}
.sidebar h5.widget-title {
  font-size: 1.4em;
  margin-bottom: 15px;
}
.sidebar .sidebar-list li {
  font-size: 1.2em;
}
.sidebar .sidebar-list li a {
  color: var(--dark-30);
}
.sidebar .sidebar-list li a:hover {
  color: var(--primary-color);
}

@media only screen and (max-width: 991px) {
  .widget-search-bar form {
    flex-wrap: wrap;
  }
}

/* ----------- Pagination -----------*/
.paging-navigation .pagination .page-numbers {
  font-size: 1.4em;
  color: var(--gray-color-500);
}
.paging-navigation .pagination .page-numbers:hover {
  color: var(--primary-color);
}
.paging-navigation .pagination svg {
  width: 35px;
}

/* 10. Single Product Page
  /*----------------------------------------------*/
/*------------ Product Info -----------*/
.product-info .rating svg.star-fill {
  fill: var(--dark-blue);
}
.product-info .select-list li.select-item {
  font-size: 1.2em;
}
.product-quantity .input-group {
  width: 140px;
  gap: 2px;
}
.product-quantity #quantity {
  height: auto;
  width: 20px;
  border: none;
  margin: 0;
  padding: 0;
}
.product-quantity #quantity,
.product-quantity .btn-number {
  width: 40px;
  height: 40px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}
.single-product .cart-wrap h4.item-title {
  font-size: 1.5em;
}
.single-product .product-quantity .stock-number {
  font-size: 1.2em;
}
.meta-product h4.item-title {
  font-size: 1.2em;
}

/*------------ Product Info Tabs -----------*/
.product-info-tabs .tabs-listing button {
  font-size: 2em;
  color: var(--dark-color);
}
.product-info-tabs .nav-tabs .nav-link {
  border: none;
}
.product-info-tabs .nav-tabs .nav-item.show .nav-link,
.product-info-tabs .nav-tabs .nav-link.active {
  color: var(--primary-color);
}

@media only screen and (max-width: 991px) {
  .product-info-tabs .tabs-listing button {
    font-size: 1.2em;
    padding-right: 20px !important;
  }
}

/* 10. Cart Page
  -----------------------------------------------------*/
.shopify-cart .card-price .money {
  font-size: 1.5em;
}
.shopify-cart .total-price .money {
  font-size: 2.9em;
}
.total-price .cart-totals {
  font-size: 1.5em;
}
.shopify-cart .table th {
  width: 30%;
}

/* 11. Checkout Page
  --------------------------------------------------------------*/
.list-group-item span {
  font-size: 1.2em;
}

/* 12. Blog Page
  --------------------------------------------------------------*/
/*------------ Sidebar -----------*/
.sidebar-post-item h4.card-title {
  font-size: 1.2em;
}

/* 13. Sibgle Post Page
  --------------------------------------------------------------*/
#single-post-navigation .post-navigation span.page-nav-title {
  font-size: 1.5em;
}
.post-navigation svg {
  width: 30px;
  height: 45px;
}
.post-navigation:hover svg,
.post-navigation:focus svg {
  fill: var(--primary-color);
}

.hero-section .heading-h1 {
  color: var(--alice-blue);
  font-weight: 600;
}
.breadcrumbs,
.breadcrumbs a {
  color: var(--alice-blue);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--persian-red);
}

.hero-section {
  background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22visual%22%20viewBox%3D%220%200%20900%20600%22%20width%3D%22900%22%20height%3D%22600%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cg%20stroke-width%3D%221%22%20stroke-linejoin%3D%22bevel%22%3E%3Cpath%20d%3D%22M475%20311L563.5%20396L553.5%20305Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M475%20311L433%20395L563.5%20396Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M433%20395L419%20462L563.5%20396Z%22%20fill%3D%22%23212d61%22%20stroke%3D%22%23212d61%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M419%20462L587.5%20490L563.5%20396Z%22%20fill%3D%22%23212d61%22%20stroke%3D%22%23212d61%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M681%20282L593.5%20213L553.5%20305Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M681%20282L553.5%20305L563.5%20396Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M553.5%20305L444%20178L475%20311Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M697%20403L681%20282L563.5%20396Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M444%20178L358.5%20270L475%20311Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M475%20311L358.5%20270L433%20395Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M433%20395L317.5%20370L419%20462Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M682%20460L697%20403L563.5%20396Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M593.5%20213L444%20178L553.5%20305Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M587.5%20490L682%20460L563.5%20396Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M358.5%20270L317.5%20370L433%20395Z%22%20fill%3D%22%231262bc%22%20stroke%3D%22%231262bc%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M317.5%20370L356.5%20484L419%20462Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M419%20462L476%20600L587.5%20490Z%22%20fill%3D%22%23212d61%22%20stroke%3D%22%23212d61%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M780.5%20205L681%20208L681%20282Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M681%20282L681%20208L593.5%20213Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M526.5%20116L489%20121L444%20178Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M526.5%20116L444%20178L593.5%20213Z%22%20fill%3D%22%231262bc%22%20stroke%3D%22%231262bc%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M444%20178L303.5%20223L358.5%20270Z%22%20fill%3D%22%23212d61%22%20stroke%3D%22%23212d61%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M670%20108L526.5%20116L593.5%20213Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M350.5%20600L476%20600L419%20462Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M587.5%20490L654%20600L682%20460Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M476%20600L564.5%20600L587.5%20490Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M327.5%2081L303.5%20223L444%20178Z%22%20fill%3D%22%231a5bb1%22%20stroke%3D%22%231a5bb1%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M358.5%20270L247%20285L317.5%20370Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M801.5%20520L775.5%20361L697%20403Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M697%20403L775.5%20361L681%20282Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M801.5%20520L697%20403L682%20460Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M303.5%20223L247%20285L358.5%20270Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M317.5%20370L234%20491L356.5%20484Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M564.5%20600L654%20600L587.5%20490Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M247%20285L236%20364L317.5%20370Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M681%20208L670%20108L593.5%20213Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M780.5%20205L670%20108L681%20208Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M775.5%20361L797.5%20277L681%20282Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M356.5%20484L350.5%20600L419%20462Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M234%20491L350.5%20600L356.5%20484Z%22%20fill%3D%22%231262bc%22%20stroke%3D%22%231262bc%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M797.5%20277L780.5%20205L681%20282Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M236%20364L234%20491L317.5%20370Z%22%20fill%3D%22%231262bc%22%20stroke%3D%22%231262bc%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M303.5%20223L224%20209L247%20285Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M133.5%20338L144.5%20400L236%20364Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M236%20364L144.5%20400L234%20491Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M246%20118L224%20209L303.5%20223Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M778.5%20600L801.5%20520L682%20460Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M775.5%20361L900%20261L797.5%20277Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M450%200L327.5%2081L489%20121Z%22%20fill%3D%22%23212d61%22%20stroke%3D%22%23212d61%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M489%20121L327.5%2081L444%20178Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M450%200L489%20121L526.5%20116Z%22%20fill%3D%22%23212d61%22%20stroke%3D%22%23212d61%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M654%20600L778.5%20600L682%20460Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M675%200L568.5%200L670%20108Z%22%20fill%3D%22%231262bc%22%20stroke%3D%22%231262bc%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M670%20108L568.5%200L526.5%20116Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M327.5%2081L246%20118L303.5%20223Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M568.5%200L450%200L526.5%20116Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M327.5%2081L264%200L246%20118Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M83.5%20600L235%20600L234%20491Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M234%20491L235%20600L350.5%20600Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M780.5%20205L753.5%2064L670%20108Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20104L753.5%2064L780.5%20205Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M133.5%20338L236%20364L247%20285Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M133.5%20338L247%20285L224%20209Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M83.5%20174L133.5%20338L224%20209Z%22%20fill%3D%22%231262bc%22%20stroke%3D%22%231262bc%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20487L900%20422L801.5%20520Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M801.5%20520L900%20422L775.5%20361Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M797.5%20277L900%20235L780.5%20205Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M753.5%2064L675%200L670%20108Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20422L900%20261L775.5%20361Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20261L900%20235L797.5%20277Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20600L900%20487L801.5%20520Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M450%200L311.5%200L327.5%2081Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%20414L99.5%20461L144.5%20400Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M144.5%20400L99.5%20461L234%20491Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M311.5%200L264%200L327.5%2081Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M246%20118L141.5%20128L224%20209Z%22%20fill%3D%22%231a5bb1%22%20stroke%3D%22%231a5bb1%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M264%200L141.5%20128L246%20118Z%22%20fill%3D%22%231a5bb1%22%20stroke%3D%22%231a5bb1%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M133.5%20338L0%20414L144.5%20400Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M778.5%20600L900%20600L801.5%20520Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20235L900%20104L780.5%20205Z%22%20fill%3D%22%230068c7%22%20stroke%3D%22%230068c7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M753.5%2064L811.5%200L675%200Z%22%20fill%3D%22%23212d61%22%20stroke%3D%22%23212d61%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20104L811.5%200L753.5%2064Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%20194L83.5%20174L0%2068Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M141.5%20128L83.5%20174L224%20209Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%20535L83.5%20600L99.5%20461Z%22%20fill%3D%22%231a5bb1%22%20stroke%3D%22%231a5bb1%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M99.5%20461L83.5%20600L234%20491Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%20260L0%20414L133.5%20338Z%22%20fill%3D%22%23253d7e%22%20stroke%3D%22%23253d7e%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M900%20104L900%200L811.5%200Z%22%20fill%3D%22%23243874%22%20stroke%3D%22%23243874%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M83.5%20174L0%20260L133.5%20338Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%2068L83.5%20174L141.5%20128Z%22%20fill%3D%22%231f55a7%22%20stroke%3D%22%231f55a7%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M83.5%20174L0%20194L0%20260Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%20414L0%20535L99.5%20461Z%22%20fill%3D%22%23224f9c%22%20stroke%3D%22%23224f9c%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M264%200L79.5%200L141.5%20128Z%22%20fill%3D%22%23254388%22%20stroke%3D%22%23254388%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%20535L0%20600L83.5%20600Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M79.5%200L0%2068L141.5%20128Z%22%20fill%3D%22%23244992%22%20stroke%3D%22%23244992%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M79.5%200L0%200L0%2068Z%22%20fill%3D%22%2323326a%22%20stroke%3D%22%2323326a%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.magicpattern {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-size: cover;
  background-position: center center;
  background-repeat: repeat;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1061%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1062%26quot%3b)'%3e%3c/rect%3e%3cpath d='M358.16 649.59C530.54 639.23 635.9 330.85 965.45 320.42 1295 309.99 1414.06 137.65 1572.74 135.62' stroke='rgba(95%2c 190%2c 234%2c 0.54)' stroke-width='2'%3e%3c/path%3e%3cpath d='M46.91 656.33C205.3 623.3 264.69 219.3 518.01 212.56 771.32 205.82 753.56 282.56 989.1 282.56 1224.65 282.56 1341.13 212.75 1460.2 212.56' stroke='rgba(95%2c 190%2c 234%2c 0.54)' stroke-width='2'%3e%3c/path%3e%3cpath d='M268.48 571.4C401.36 558.43 484.11 278.21 713.72 276.48 943.33 274.75 936.34 346.48 1158.96 346.48 1381.58 346.48 1491.52 276.69 1604.2 276.48' stroke='rgba(95%2c 190%2c 234%2c 0.54)' stroke-width='2'%3e%3c/path%3e%3cpath d='M283.85 591.34C415.25 576.78 492.76 290.12 717.08 288.09 941.39 286.06 933.69 358.09 1150.3 358.09 1366.92 358.09 1473.82 288.32 1583.53 288.09' stroke='rgba(95%2c 190%2c 234%2c 0.54)' stroke-width='2'%3e%3c/path%3e%3cpath d='M856.19 623.95C967.43 542.84 902.03 134.16 1096.75 128.6 1291.46 123.04 1447.51 326.18 1577.86 330.2' stroke='rgba(95%2c 190%2c 234%2c 0.54)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1061'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='84.72%25' y1='139.29%25' x2='15.28%25' y2='-39.29%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1062'%3e%3cstop stop-color='rgba(33%2c 45%2c 97%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 104%2c 199%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
}

.page-not-found {
  margin-top: 0;
  height: 90vh;
  padding: 7rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.search-filter {
  position: relative;
  width: 90%;
  display: flex;
}

.search-filter input[type="text"] {
  width: 100%;
  border: 2px solid #212529;
  border-radius: 5px 0 0 5px;
  padding: 7px;
  font-weight: 600;
}

.search-filter input[type="submit"] {
  width: 100px;
  border-radius: 0 5px 5px 0;
  padding: 7px;
  font-weight: 600;
  background-color: var(--dark-blue);
  color: #fff;
  border: none;
  margin-left: -2px;
}
.search-filter input[type="submit"]:hover {
  background-color: var(--persian-red);
  color: #fff;
}

#category-filter {
  margin: 2rem 0;
  border-top: 1rem solid #0068c7;
  border-bottom: 1rem solid #0068c7;
  padding-top: 1rem;
}
#category-filter ul {
  padding: 0;
}

#category-filter .categories {
  list-style: none;
  font-size: 2rem;
  font-weight: 600;
  text-decoration: underline;
}

#category-filter .cat-item {
  font-size: 1rem;
  list-style: none;
  padding: 0.5rem 0 0 1.5rem;
}

.recent-posts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-bottom: 1rem solid #0068c7;
  padding: 1rem 0 3rem 0;
  margin-bottom: 3rem;
}

.recent-posts .recent-post-image {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.recent-posts .mobile_title {
  color: #000 !important;
}

.offer-tag {
  background: #95fd26;
  border-radius: 10rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem !important;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.product-detail-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-image-container {
  width: 90%;
  height: 50%;
  margin: 0 auto;
}

.primary-image {
  width: 100%;
  height: 70%;
  object-fit: contain;
}

.child-image-container {
  width: 100%;
  height: 30%;
  display: flex;
  flex-wrap: wrap;
}

.child-image {
  width: 20%;
  height: 100%;
  object-fit: cover;
}

.price-text {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 500;
}

@media only screen and (max-width: 991px) {
  .product-image-container {
    width: 98%;
  }

  .primary-image {
    height: 50%;
  }

  .child-image-container {
    height: 25%;
  }

  .child-image {
    width: 25%;
  }
}
@media only screen and (max-width: 991px) {
  .product-detail-container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

.category_all {
  font-weight: 600;
  list-style: none;
  text-decoration: underline;
  padding-left: 1.5rem;
  cursor: pointer;
  padding-top: 0.2rem;
}

#about-us .image-holder {
  width: 90%;
}
#about-us .image-holder img {
  object-fit: contain;
}

.related-product-container:hover {
  background: #72aec820;
}

/* Service containers */

.our-service p {
  text-indent: 3rem;
  text-align: justify;
}
.our-service .image-holder img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.padding-md-service {
  padding-top: 3em;
}

.service-bg {
  background-color: var(--alice-blue);
}

.our-service .contact-details {
  width: 100%;
  background-color: #212d61;
  height: 15vh;
  display: flex;
  color: var(--white-color);
  justify-content: center;
  align-items: center;
  gap: 2em;
}

.our-service .contact-details div {
  width: 40%;
  padding: 10px 2rem 10px 0;
  display: flex;
}

.our-service .contact-details div:first-child {
  border-right: 1px solid #fff;
  align-items: center;
  justify-content: end;
}

.our-service .external-link {
  color: var(--white-color) !important;
  text-decoration: none;
  cursor: pointer;
}

.our-service .external-link:hover {
  color: var(--primary-color) !important;
}

.our-service .contact-details-cards {
  display: flex;
  justify-content: center;
  gap: 2em;
}

.our-service .contact-details-cards .cards {
  position: relative;
  width: 35%;
  padding: 3em;
  border-radius: 10px;
  display: flex;
  color: #fff;
  overflow: hidden;
}
.our-service .contact-details-cards .cards .magicpattern {
  top: 0;
  left: 0;
}

.our-service .contact-details-cards .cards div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-1 {
  background: #0c0e18;
}
.card-2 {
  background: #212d61;
}

.our-service .contact-redirection-container {
  background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22visual%22%20viewBox%3D%220%200%20900%20600%22%20width%3D%22900%22%20height%3D%22600%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cpath%20d%3D%22M0%20352L6.3%20339.2C12.7%20326.3%2025.3%20300.7%2037.8%20298.7C50.3%20296.7%2062.7%20318.3%2075.2%20325C87.7%20331.7%20100.3%20323.3%20112.8%20325.5C125.3%20327.7%20137.7%20340.3%20150.2%20346C162.7%20351.7%20175.3%20350.3%20187.8%20337.5C200.3%20324.7%20212.7%20300.3%20225.2%20282.2C237.7%20264%20250.3%20252%20262.8%20261.8C275.3%20271.7%20287.7%20303.3%20300.2%20305.2C312.7%20307%20325.3%20279%20337.8%20277.8C350.3%20276.7%20362.7%20302.3%20375.2%20303.8C387.7%20305.3%20400.3%20282.7%20412.8%20269.5C425.3%20256.3%20437.7%20252.7%20450%20252.2C462.3%20251.7%20474.7%20254.3%20487.2%20261C499.7%20267.7%20512.3%20278.3%20525%20277C537.7%20275.7%20550.3%20262.3%20562.8%20272.3C575.3%20282.3%20587.7%20315.7%20600.2%20316.2C612.7%20316.7%20625.3%20284.3%20637.8%20270C650.3%20255.7%20662.7%20259.3%20675.2%20269.2C687.7%20279%20700.3%20295%20712.8%20302.8C725.3%20310.7%20737.7%20310.3%20750.2%20302.8C762.7%20295.3%20775.3%20280.7%20787.8%20286.8C800.3%20293%20812.7%20320%20825.2%20328.5C837.7%20337%20850.3%20327%20862.8%20317.2C875.3%20307.3%20887.7%20297.7%20893.8%20292.8L900%20288L900%200L893.8%200C887.7%200%20875.3%200%20862.8%200C850.3%200%20837.7%200%20825.2%200C812.7%200%20800.3%200%20787.8%200C775.3%200%20762.7%200%20750.2%200C737.7%200%20725.3%200%20712.8%200C700.3%200%20687.7%200%20675.2%200C662.7%200%20650.3%200%20637.8%200C625.3%200%20612.7%200%20600.2%200C587.7%200%20575.3%200%20562.8%200C550.3%200%20537.7%200%20525%200C512.3%200%20499.7%200%20487.2%200C474.7%200%20462.3%200%20450%200C437.7%200%20425.3%200%20412.8%200C400.3%200%20387.7%200%20375.2%200C362.7%200%20350.3%200%20337.8%200C325.3%200%20312.7%200%20300.2%200C287.7%200%20275.3%200%20262.8%200C250.3%200%20237.7%200%20225.2%200C212.7%200%20200.3%200%20187.8%200C175.3%200%20162.7%200%20150.2%200C137.7%200%20125.3%200%20112.8%200C100.3%200%2087.7%200%2075.2%200C62.7%200%2050.3%200%2037.8%200C25.3%200%2012.7%200%206.3%200L0%200Z%22%20fill%3D%22%23212d61%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: cover; /* Adjust as needed */
  background-position: center;
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  color: #fff;
  padding: 1.5em;
}

.our-service .contact-redirection-container .btn-white {
  background: #fff;
  color: #000;
  font-weight: 700;
}

.our-service .contact-redirection-container .btn-white:hover {
  background: #c33f31;
  color: #fff;
}

@media only screen and (max-width: 991px) {
  .our-service .contact-details div {
    width: 50%;
  }
  .our-service .contact-details-cards .cards {
    padding: 1.5em;
  }
  .our-service .contact-redirection-container {
    height: 40vh;
    padding: 2em;
  }
}
@media only screen and (max-width: 767px) {
  .our-service .contact-details {
    flex-direction: column;
    height: auto;
    gap: 0.5em;
    padding: 1em 0;
  }
  .our-service .contact-details div {
    width: 70%;
    display: flex;
    justify-content: space-between !important;
  }

  .our-service .contact-details div:first-child {
    border-right: none;
    border-bottom: 1px solid #fff;
  }

  .our-service .contact-details-cards {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }

  .our-service .contact-details-cards .cards {
    width: 75%;
    padding: 2em;
  }
}

.our-service-redirection .container-full {
  position: relative;
  width: 100%;
  height: 80vh;
  background: #fff;
}

.our-service-redirection .container-full .image-holder {
  width: 100%;
  height: 100%;
}

.our-service-redirection .container-full .image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.our-service-redirection .container-full .detail {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 4em;
}

.our-service-redirection .container-full .detail p {
  width: 70%;
  color: #000;
  font-weight: 600;
}

@media only screen and (max-width: 991px) {
  .our-service-redirection .container-full {
    height: 70vh;
  }
}

@media only screen and (max-width: 767px) {
  .our-service-redirection .container-full {
    height: 50vh;
  }
  .our-service-redirection .container-full .detail {
    padding: 1em;
    align-items: start;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.9) 60%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .our-service-redirection .container-full .detail p {
    width: 90%;
    font-size: 0.75rem;
  }
}