@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* Fonts */
:root {
  --default-font: "Poppins", sans-serif;
  --heading-font: "Playfair Display", serif;
  --nav-font: "Gilda Display", serif;
}

/* font-family: "Unna", serif;
font-family: "Gilda Display", serif;
font-family: "Playfair Display", serif; */

:root{
  --first_color:#000000;
  --color_white:#ffffff;
  --color_third:#171717;
  --first_font:'Lora', serif;
  --seconde_font:'EB Garamond', serif;
  --third_font: 'Roboto', sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #222222; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #106eea; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #222222;  /* The default color of the main navmenu links */
  --nav-hover-color: #106eea; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #222222; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #106eea; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}
.font-fmly-secondry{
  font-family: "Open Sans",  sans-serif;
}
a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

img{
  max-width:100%;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  background-color: var(--accent-color);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

.header .branding {
  min-height: 60px;
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 45px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 600;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 30px;
  font-weight: 700;
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }
  .navmenu ul.nav-block{
    display:  block !important;
  }
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size:18px;
    font-family: var(--nav-font);
    font-weight:500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    columns: 2;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

section{
  padding:40px 0;
}

.hero-section{
  padding-bottom:30px !important;
}

.homecoming-dress {
  background-color: #ececec;
  padding: 70px 0;
}

.heading-text h1 {
  font-size: 56px;
  font-weight: 800;
  color: #000000;
}

.discover-button{
  margin:20px;
}

.discover-button a{
  color:#000000;
  font-size:20px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:end;
  font-style:italic;
}

.discover-button a i{
  margin-left:20px;
  font-size:30px;
}

.category-carousel .owl-stage > div:nth-child(odd), .designer-carousel .owl-stage > div:nth-child(odd){
  position: relative;
  top: -40px;
}



.category-carousel .owl-stage{
  padding:50px 0;
}

.designer-carousel .owl-stage{
  padding-bottom:50px;
}

.video-wrapper{
  background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)), url(../img/promdress.png);
  background-repeat: no-repeat;
  filter: grayscale(100%);
  background-position: top;
  background-size: cover;
  padding: 38.5px;
}

.video-text-box h2 {
  font-size: 50px;
  font-weight: 600;
  width: 80%;
  margin: 0 0 0 auto;
}

.video-text-box p {
  font-size: 37px;
  width: 80%;
  margin: 10px 0 10px auto;
  color: #000000;
}

.drees-headings h3 {
  font-size: 40px;
  font-weight: 600;
  color: #000000;
}

.drees-headings p{
  font-size:20px;
  color:#000000;
}

.home_coming_box h2 {
  font-size: 55px;
  font-weight: 800;
  margin-bottom: 20px;
}
.home_coming_box h3{
  font-size:50px;
  font-weight:700;
  color:#000000;
}

.home_coming_box {
  position: relative;
  left: 40%;
  top:10%;
  padding: 30px;
  background-color:rgba(255, 255, 255, .6);
}

.about-section {
  background: url(../img/static_image/dummy/back-ground.webp) no-repeat top center;
  background-size: cover;
  position: relative;
  padding: 80px 0;
  z-index: 1;
}
.about-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .6);
  z-index: -1;
}

.about-wrapper h2 {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 45px;
  margin-bottom: 20px;
}

.about-wrapper h2 {
  color:#ffffff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 45px;
  margin-bottom: 20px;
}

.about-wrapper p {
  font-size: 16px;
  color: #ffffff;
  line-height: 26px;
}

.explore-button a {
  border: 1px solid #000;
  background: #FFF;
  color: #303030;
  text-align: center;
  font-family: Lora;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  padding: 15px 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  min-width: 188px;
  margin-top: 3rem;
  letter-spacing: 1px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/


.footer .footer-content {
  background: #000000!important;
  padding: 60px 0 30px 0;
}

.footer .footer-content .footer-info {
  margin-bottom: 30px;
}

.footer .footer-content .footer-info h3 {
  font-size: 28px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color_white);
}

.footer .footer-content .footer-info h3 span {
  color: var(--color-primary);
}

.footer .footer-content .footer-info p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0;
  color: var(--color_white);
}

.footer .footer-content h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color_white);
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.footer .footer-content h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color_white);
  bottom: 0;
  left: 0;
}

.footer .footer-content .footer-links {
  margin-bottom: 30px;
}

.footer .footer-content .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-content .footer-links ul i {
  padding-right: 2px;
  color: var(--color_white);
  font-size: 12px;
  line-height: 1;
}

.footer .footer-content .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-content .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-content .footer-links ul a {
  color:var(--color_white);
  transition: 0.3s;
  font-size: 16px;
  display: inline-block;
  line-height: 1;
}



.footer .footer-content .footer-newsletter form {
  margin-top: 30px;
  position: relative;
  border-radius: 4px;
}

.footer-newsletter p ,.copyright ,.credits{
  color: var(--color_white);
}

.footer .footer-content .footer-links ul a {
  color: var(--color_white);
  transition: 0.3s;
  font-size: 14px;
  display: inline-block;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 1px;
}

.footer .footer-content .footer-newsletter form input[type=email] {
    border: 0;
    padding: 10px;
    width: calc(100% - 110px);
    background: #ffffff;
}

.footer .footer-content .footer-newsletter form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-content .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: var(--color_third);
  color: var(--color_white);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}



.footer .footer-legal {
  padding: 15px 0;
  background:  #252829;
}

.footer .footer-legal .credits {
  padding-left: 4px;
  color: var(--color_white);
}

.footer .footer-legal .credits a {
  color: var(--color-primary-light);
}

.Subscribe::placeholder{
  color: var(--first_color);
}

.footer .footer-legal .social-links a {
  font-size: 18px;
  display: inline-block;
  background: rgba(var(--color-white-rgb), 0.1);
  color: var(--color-white);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .footer-legal .social-links a:hover {
  background: var(--color-primary);
  text-decoration: none;
}


button#subscribe-btn {
  height: 44px;
  margin: 0;
  padding: 0;
  margin-left: -5px;
  border: none;
  outline: none;
  padding: 10px;
  line-height: 1;
  color: #fff;
  background: #333333;
}

.footer .footer-content h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color_white);
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.store-loceter, .social-links, .size-charts {
  border-bottom: 1px dashed #ccc !important;
  padding: 16px 0;
}

.social-links li+li {
  margin-left: 10px;
}

.social-links li a {
  display: inline-block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #000000;
  border-radius: 5px;
  color: #ffffff;
}

ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

.about-wrapper {
  text-align: center;
}


.pictures {
  /* height: calc(100% + 25px); */
  height: 100%;
}

.pictures {
  background: #c5c5c5;
  display: block;
  overflow: hidden;
}

.product-thumb .image a {
  height: 100%;
  overflow: hidden;
}
.product-thumb .image a {
  border: 1px solid transparent;
}
.product-thumb .image a {
  display: block;
}

#productlist .product-thumb-out .image img {
  /* height: 100%;
  object-fit: cover; */
  width:100%;
}
#productlist .product-thumb-out .image img {
  position: relative;
}

.second_img{
  position:absolute !important;
  top:0;
  left:0;
  opacity:0;
  visibility:hidden;
  transition:all 0.2s ease-in-out;
}

.product-thumb:hover .pictures .second_img{
  opacity:1;
  visibility:visible;
}

.product-thumb .product_title a{
  position: relative;
  text-align: center;
  margin: 10px 0 10px;
  color: #000;
  display:block;
  font-weight:500;
}

.product-thumb .product_title ul {
  margin: 0
}

.product-thumb .product_title li {
  background: transparent;
  color: #000
}

.product-thumb {
  height: 100%;
}

.product-thumb .image a {
  height: 100%;
  overflow: hidden;
}

#productlist .product-thumb-out .image {
  min-height: unset;
  height: 100%;
}

/* #productlist .product-thumb-out .image img {
  height: 100%;
  object-fit: cover;
} */



.grid-container {
  display: grid;
  gap:40px 5px;
  margin-bottom:50px;
}

.grid-container.first {
  grid:
      'item1 item1'
      'item2 item3'
      'item4 item5'
      'item6 item7';
}

.grid-container.second {
  grid:
      'item1 item2'
      'item3 item4'
      'item5 item6'
      'item7 item7';
}

.grid-container.third {
  grid:
      'item1 item2'
      'item3 item4';
  padding: 0;
}

.grid-container.first.last4,
.grid-container.second.last4 {
  grid:
      'item1 item2'
      'item3 item4';
}

.grid-container.first.last8,
.grid-container.second.last8 {
  grid:
      'item1 item2'
      'item3 item4'
      'item5 item6'
      'item7 item8';
}

.grid-container.third.last4 {
  grid:
      'item1 item2'
      'item3 item4';
}

.pictures {
  height: 100%;
}

.filter_main {
  width: auto !important;
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid black;
}

.filter_main:hover {
  cursor: pointer;
}

#filters {
  padding-bottom: 20px;
}

.mobile_hidden {
  display: none;
}

@media (min-width:775px) {

  .mobile_hidden {
      display: block;
  }

  .grid-container {
      /* gap: 0 13px; */
      /* margin-bottom: 10px; */
      gap:50px 15px;
      margin-bottom:50px;
  }

  .grid-container.first {
      grid:
          'item1 item1'
          'item2 item3'
          'item4 item5'
          'item6 item7';
  }

  .grid-container.second {
      grid:
          'item1 item2'
          'item3 item4'
          'item5 item6'
          'item7 item7';
  }

  .grid-container.third {
      grid:
          'item1 item2'
          'item3 item4';
  }

  .grid-container.first.last4,
  .grid-container.second.last4 {
      grid:
          'item1 item2'
          'item3 item4';
  }

  .grid-container.first.last8,
  .grid-container.second.last8 {
      grid:
          'item1 item2'
          'item3 item4'
          'item5 item6'
          'item7 item8';
  }

  .grid-container.third.last4 {
      grid:
          'item1 item2'
          'item3 item4';
  }

}

@media (min-width:990px) and (max-width:1199px) {

  .grid-container {
      gap: 105px 13px;
      margin-bottom: 105px;
  }

  .grid-container.first {
      grid:
          'item1 item1 item2 item3 item4'
          'item1 item1 item2 item3 item4'
          'item1 item1 item5 item6 item7'
          'item1 item1 item5 item6 item7';
  }

  .grid-container.second {
      grid:
          'item1 item2 item3 item7 item7'
          'item1 item2 item3 item7 item7'
          'item4 item5 item6 item7 item7'
          'item4 item5 item6 item7 item7';
  }

  .grid-container.third {
      grid:
          'item1 item2 item3 item4';
  }

  .grid-container.first.last4,
  .grid-container.second.last4 {
      grid:
          'item1 item2 item3 item4';
  }

  .grid-container.first.last8,
  .grid-container.second.last8 {
      grid:
          'item1 item2 item3 item4'
          'item5 item6 item7 item8';
  }

  .grid-container.third.last4 {
      grid:
          'item1 item2 item3 item4';
  }

}

@media (min-width:1200px) {

  .grid-container.first {
      grid:
          'item1 item1 item2 item3 item4'
          'item1 item1 item2 item3 item4'
          'item1 item1 item5 item6 item7'
          'item1 item1 item5 item6 item7';
  }

  .grid-container.second {
      grid:
          'item1 item2 item3 item7 item7'
          'item1 item2 item3 item7 item7'
          'item4 item5 item6 item7 item7'
          'item4 item5 item6 item7 item7';
  }

  .grid-container.third {
      grid:
          'item1 item2 item3 item4';
  }

  .grid-container.first.last4,
  .grid-container.second.last4 {
      grid:
          'item1 item2 item3 item4';
  }

  .grid-container.first.last8,
  .grid-container.second.last8 {
      grid:
          'item1 item2 item3 item4'
          'item5 item6 item7 item8';
  }

  .grid-container.third.last4 {
      grid:
          'item1 item2 item3 item4';
  }

}

.grid-item {
  position: relative;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item7 {
  grid-area: item7;
}

.item8 {
  grid-area: item8;
}

.cl_btn {
  width: auto !important;
}

.mobile_show_category {
  display: none;
}

.description li {
  margin-bottom: 20px;
}

@media (min-width: 320px) and (max-width: 767px) {

  .breadcrumb li a,
  .breadcrumb li i,
  .bc-icon {
      font-size: 13px !important;
      line-height: 13px !important;
  }

  .top_content {
      text-align: center;
  }

  .mobile_show_filter {
      margin-left: 30px !important;
  }

  .description h2 {
      text-align: center;
  }
}

.breadcrumb>li+li::before {
  content: "";
  padding: 0;
  color: transparent;
}

.vehicle-detail-banner .car-slider-desc {
  max-width: 180px;
  margin: 0 auto;
}
.banner-slider .slider.slider-for {
  max-width: 80%;
  padding-left: 35px;
}
.banner-slider .slider.slider-nav {
  max-width: 20%;
}
.banner-slider .slider.slider-for,
.banner-slider .slider.slider-nav {
  width: 100%;
  float: left;
}
.banner-slider .slider.slider-nav {
  height: 100%;
  overflow: hidden;
}
.slider-banner-image {
  height: 100%;
}
.banner-slider .slider.slider-nav {
  padding: 0;
  padding-right: 0;
}
.slider-nav .slick-slide.thumbnail-image .thumbImg{
  max-width: 178px;
  height: 110px;
  margin: 0 auto;
  border: 1px solid #EBEBEB;
}
.slider-banner-image img,
.slider-nav .slick-slide.thumbnail-image .thumbImg img {
  height: 100%;
  width:100%;
  object-fit: cover;
}
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide:focus,
.slick-arrow:hover,
.slick-arrow:focus {
  border: 0;
  outline: 0;
}
.slider-nav .slick-slide.slick-current.thumbnail-image .thumbImg {
  border: 2px solid #196DB6;
}
.slider-nav .slick-slide.slick-current span {
  color: #196DB6;
}
.slider-nav .slick-slide {
  text-align: center;
}
.slider-nav .slick-slide span {
  font-size: 14px;
  display: block;
  padding: 5px 0 15px;
}
.slick-arrow {
  width: 100%;
  background-color: transparent;
  border: 0;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  height: 18px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 99;
}
.slick-prev {
 top: 0;
}
.slick-next {
 bottom: 0;
 background-color: #fff;
}
.slick-prev.slick-arrow {
  background-image: url(../img/static_image/arrow-up.jpeg);
}

.slick-next.slick-arrow {
  background-image: url(../img/static_image/down-arrow.jpeg);
}

.slick-arrow{
  width:35px;
  height:35px;
  left:50%;
  transform: translateX(-50%);
  border-radius:0%;
  background-color:#ffffff;
}
/*End USE CSS for Slider*/

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

.banner-slider .slider.slider-for,
.banner-slider .slider.slider-nav {
    max-width: 100%;
    float: none;
}
.banner-slider .slider.slider-for {
  padding-right: 0;
}
.banner-slider .slider.slider-nav {
  height: auto;
}
.slider-banner-image {
    height: 500px;
} 
.slider.slider-nav.thumb-image {
      padding: 10px 30px 0;
}
.slider-nav .slick-slide span {
  padding: 5px 0;
}
.slick-arrow {
  padding: 0;
    width: 30px;
    height: 30px;
    top: 50%;
    bottom: 0;
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -moz-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
}
.slick-prev {
    left: 0;
    right: unset;
}
.slick-next {
    left: unset;
    right: 0;
     background-color: transparent;
}
.vehicle-detail-banner .car-slider-desc {
    max-width: 340px;
}
.bid-tag {
    padding: 10px 0 15px;
}
.slider.slider-nav.thumb-image {
   white-space: nowrap;
}
.thumbnail-image.slick-slide {
  padding: 0px 5px;
  min-width: 75px;
  display: inline-block;
  float: none;
}
}

@media screen and (max-width : 767px) {
.slider-banner-image {
    height: 400px;
}
.slider.slider-nav.thumb-image {
    padding: 0px 20px 0;
    margin: 10px 0px 0;
}
.slider-nav .slick-slide.thumbnail-image .thumbImg {
  max-width: 140px;
  height: 80px;
}
.slick-prev.slick-arrow {
    background-position: center 10px;
}
.slick-next.slick-arrow {
    background-position: center 10px, center;
}
.slider-nav .slick-slide span {
    font-size: 12px;
    white-space: normal;
}
}

@media screen and (max-width: 580px) {
.slider-banner-image {
    height:340px;
}
}

@media screen and (max-width : 480px) {
.slider-banner-image {
    height:280px;
}
}

video {
  width: 100%;
}

.category-text-number {
  border-bottom: 1px solid #444;
  margin-bottom: 5px;
}

.category-text-number p {
  color: #222222;
  margin-bottom: 5px;
  font-size: 24px;
  font-weight: 600;
}

.rating-form-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rating-form-box ul li {
  color: #ffd414;
}

.code-box, .color-box {
  margin-top: 20px;
}
.code-box p, .color-box p {
  margin-bottom: 10px;
  color: #222222;
  font-weight: 500;
  font-size: 18px;
}



.colors span {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 10px;
}

.store-loceter a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color:#ffffff;
  background-color:#000000;
  padding: 12px 15px;
  display: inline-block;
  margin-top: 10px;
  border-radius: 5px;
}

.thumbImg {
  height: 220px;
}

.collections {
  columns:3;
}

label.form-label {
  color: #222222;
  font-weight:bold;
}

form.form-retailer .form-control , form.form-retailer .form-control:focus {
  padding: 10px;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  border-color: #888888;
}

form.form-retailer button , form.form-retailer button:focus{
  padding:10px 60px;
  letter-spacing:0.5px;
  text-transform: capitalize;
  font-weight:500;
  background-color:#000000;
  color:#ffffff;
  text-align:center;
  border:none;
  outline:none;
  box-shadow:none;
}

.findsearch .form-select , .findsearch .form-control{
  background-color:transparent;
  border:none;
  outline:none;
  box-shadow:none;
  color:#212529;
  font-weight:400;
  padding:12px 20px;
}

.findsearch{
  border:1px solid #888888;
}

.findsearch button{
  background-color:transparent;
  height:100%;
  width:50px;
  color:#212529;
  outline:none;
  box-shadow:none;
  border:none;
  line-height:50px;
  text-align:center;
}

.storelocator__store {
  border-bottom: .0625rem solid #878787;
  padding: 1rem 0 0;
}

h3.storelocator__address-title , h3.storelocator__phone-title , h3.storelocator__store-hours {
  font-size: 16px;
  border-bottom:.0625rem solid #878787;
  padding-bottom:8px;
  display:inline-block;
}
.store-address {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
}

.cell.storelocator__phone-number {
  margin-top:15px;
}

.store-phone a {
  color: #000000;
  font-size: 14px;
}

.store-hours {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 10px;
}

.findstore-section{
  padding:60px 0;
}

.retail_box {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50% , -50%);
  background-color: rgba(255, 255, 255, .6);
  width:50%;
  padding:50px;
}
.retail-img img {
  filter: blur(1px);
}

.contact .info-box {
  color: #444444;
  text-align: center;
  background-color: #ffffff;
  padding: 20px 0 30px 0;
  height: 100%;
}

.contact .info-box i {
  font-size: 32px;
  color: #000000;
  border-radius: 50%;
  padding: 8px;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #777777;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form {
  padding: 30px;
  border: 1px solid #dddddd;
  background: #ffffff;
}


.section-title {
  text-align: center;
}

.section-title h2{
  font-size: 40px;
  font-weight:700;
  text-transform: uppercase;
}

.offcanvas-body h5 {
  font-weight: 600;
  font-size: 34px !important;
}

.form-wrapper {
  width: 60%;
  margin: auto;
}

.form-wrapper form {
  border: 1px solid lightgray;
  border-radius: 30px;
}

.form-wrapper input, .form-wrapper input:focus {
  border: none;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0px 25px;
  height: 45px;
  box-shadow: none;
  font-size: 18px;
  font-weight: 500;
}

.form-wrapper button {
  border: none;
  outline: none;
  box-shadow: none;
  text-align: center;
  width: 45px;
  line-height: 45px;
  height: 45px;
  font-size: 22px;
  display: block;
  color: #000000;
  background-color: transparent;
  padding-right: 15px;
}

div#offcanvasTop {
  height: 50vh;
  z-index: 999999;
}

.sear_icons i{
  font-size:20px !important;
}

section#contact {
  background: #f8f8f8;
}

.top-bar {
  background-color: #000000;
  padding: 5px 0;
}

.top-bar p {
  margin-bottom: 0;
  color: #ffffff;
  letter-spacing: 0.5px;
  font-weight: 400;
}

.category-img{
  position:relative;
}

.view_btn{
  position:absolute;
  bottom:0;
  left:20px;
  font-size:14px;
  color:#ffffff;
  padding:8px 35px;
  border:1px solid #000000;
  border-radius:5px;
  background-color:#000000;
  opacity:0;
  visibility:hidden;
  transition:all 0.4s ease-in-out;
}

.category-img:hover .view_btn{
  opacity:1;
  visibility:visible;
  bottom:40px;
}

.headblock_Yes_Top {
  text-align: center;
}

.imageblock_Yes_Top_Standard_5, .imageblock_Yes_Bottom_Standard_5 {
  display: grid;
  grid-template-areas:
    'item1 item1 item2 item4 item4'
    'item1 item1 item2 item4 item4'
    'item1 item1 item3 item4 item4'
    'item1 item1 item3 item4 item4';
  gap: 10px;
}

.grid-container {
  display: inline-grid;
}
.grid-item {
  position:relative;
}

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }


.category-link-with-video .product-video-wrapper {
  position: absolute;
  width: 100%;
  top:0;
  z-index: 0;
  height: 100%;
}

.category-link-with-video .product-video-wrapper>video, .owl-wrapper video {
  max-height: 100%;
  min-height: 0px;
  min-width: 100%;
  object-fit:cover;
  object-position:top;
  height: 100%; /* auto */
  width:100%;
  z-index: 0;
  outline: 0;
  line-height: 0px;
  background: #fff;

}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
  margin: 0 auto;
  display: block;
  height: auto;
}

.headblock_Yes_Top h2 {
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

.headblock_Yes_Top {
  text-align: center;
  margin-bottom: 30px;
}

.findsearch{
  position: relative;
}
.store-suggations{
  display: none;
  visibility: hidden;
  width: 70%;
  margin: 15px 45px;
  background: #fff;
}
.store-suggations.active{
  display: block;
  visibility: visible;
  opacity: 1;
}
.store-suggations .suggations{
  display: block;
  width: 100%;
  padding: 7px 10px;
  list-style: none;
}
.store-suggations .suggations .item{
  padding: 5px 18px;
    margin: 15px 0;
    width: 100%;
    display: block;
    cursor: pointer;
    border-bottom: 1px dashed #eee;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
    font-weight: 600;
    color: #7b7b7d;
}
.store-suggations .suggations .item i{
  font-weight: 700;
  font-size: 16px;
}
.store-suggations .suggations .item:hover{
  background: #eee;
}
.retailer-loggin-profile-indicator{
  width: 165px;
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  transition: all 0.5s ease-in-out;
  align-self: right;
  margin-left: 65px;
  z-index: 999;
}

.retailer-loggin-profile-indicator .profile-img{
  width: 30px;
  height: 30px;
}
.retailer-loggin-profile-indicator .retailer-login-opts{
  display: none;
  background: #eeeeee;
  padding: 3px 7px;
  margin: 10px auto;
}
.retailer-loggin-profile-indicator .retailer-login-opts.active{
  display: block;
}
.retailer-loggin-profile-indicator .retailer-login-opts li{
  display: block;
    padding: 7px 3px;
    font-size: 14px;
    color: #000;
    margin: 5px 0;
}
.retailer-loggin-profile-indicator .retailer-login-opts li a{
  color: #000;
}
.search-wrapper, nav{
  min-width: 60px;
  transition: all .3s ease-in-out;
}
.search-wrapper .search_icons{
  display: none;
}
.search-wrapper .search_icons.inactive{
  display: block;
  cursor: pointer;
}
.search-wrapper .search_icons i{
  cursor: pointer;
}

.search-wrapper .seach-form{
  display: none;
  position: relative;
}
.search-wrapper .seach-form.active{
  display: block;
}
.search-wrapper .seach-form .search-suggations-wrapper{
  position: absolute;
  padding: 10px 3px;
  display: none;
  width: 100%;
  background: #fff;
  z-index: 1;
}
.search-wrapper .seach-form .search-suggations-wrapper.active{
  display: block;
}
.search-wrapper .seach-form .search-suggations-wrapper .suggations{
  display: block;
  padding: 10px 7px;
}
.search-wrapper .seach-form .search-suggations-wrapper .suggations li{
  margin: 7px 0;
  padding: 7px 4px;
  border-bottom: 1px dashed #ccc;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.search-wrapper .seach-form .search-suggations-wrapper .suggations li:hover{
  background: #eeeeee;
}
.search-wrapper .seach-form .search-suggations-wrapper .suggations li:last-child{
  border: none;
}
.form-control{
  outline: none;
}
.form-control:focus{
  box-shadow: none;
  border-color: #eeeeee;
}
.go-to-top{
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  width: 80px;
  height: 80px;
  z-index: 333;
}
.go-to-top.active{
  display: block;
}
.go-to-top .button{
  background: #b7b7b7;
  width: 58px;
  height: 58px;
  border-radius: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.go-to-top .button a{
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #ccc; 
}
::-webkit-scrollbar-thumb {
  background: #7e7e7e; 
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background: #0d0d0e; 
}

.catlouge-catg-card{
  transition: all .5s ease-in-out;
  overflow: hidden;
  cursor: pointer;
}
.catlouge-catg-card:hover img{
  transition: all .5s ease-in-out;
  transform: scale(1.1);
}

.jumpssuite_banner_home {
  display: block;
}
.jumpssuite_banner_home .banner_image img{
  display: block;
  aspect-ratio: 2/1;
}