/*********************************************************************

 *  Document   : Custom.css
 *  Author     : Sakan Jabin
 *  Description: The main stylesheet of the template
 *  Structure (with shortcodes):
        01. Global Style
        02. Top Header
        03. Nav-Bar
        04. Home Section
        05. Features Section
        06. Why Fling Pro Section
        07. Collection Or Screenshots Or Product Showcase Section
        08. Reviews Or Testimonial Section
        09. FAQ Section
        10. Pricing Or Packages Or Offers Section
        11. Team Or Agents Or Experts Section
        12. Blog Or News Section : Blog Post, Sidebar, Details
        13. Subscribe Section
        14. Certified By or Partners or Clients Section
        15. Contact Section
        16. Products Section : Product Item, Sidebar, Details
        17. Cart Section
        18. Checkout Section
        19. Authentication Section : Sign In, Sign Up, Forgot Password
        20. Footer
        21. Back To Top
        22. Preloader

********************************************************************/

/********************* [ 01. Global Style ] **************************/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,800|Oswald:400,500,600,700&display=swap");

:root {
  --color-primary: #ff4600;
   --color-primary-light: #ff7541;
   --color-white: #ffffff;
   --color-white-dark: #f1f1f1;
   --color-black: #000000;
   --color-dark: #333333;
   --color-dark-gray: #666666;
   --color-dark-gray-light: #888888;
   --color-light-gray: #dddddd;

   /* RGBA Color */
   --color-primary-rgba-75: rgba(210, 64, 0, 0.75);
   --color-primary-rgba-80: rgba(210, 64, 0, 0.8);
   --color-primary-rgba-85: rgba(210, 64, 0, 0.85);
   --color-primary-rgba-90: rgba(210, 64, 0, 0.9);
   --color-primary-rgba-95: rgba(210, 64, 0, 0.95);
   --color-primary-rgba-100: rgba(210, 64, 0, 1);

   /* RGBA Color */
   --color-google: #ea4335;
   --color-facebook: #1b74e4;
   --color-twitter: #1c96e8;
}

html,
body {
   color: var(--color-dark);
   font-family: "Oswald", sans-serif;
   font-weight: 400;
}

.navbar-expand-lg>.container,
.navbar-expand-lg>.container-fluid {
   padding-left: 15px;
   padding-right: 15px;
}

.navbar-light .navbar-toggler {
   border: 2px solid var(--color-primary);
   border-radius: 0;
   padding: 0.2rem 0.75rem;
}

section {
   padding: 10px 0;
}

section.breadcrumbs {
   padding: 160px 0 0 0;
}

.breadcrumbs .breadcrumb-nav {
   position: relative;
   background: var(--color-white-dark);
   padding: 30px 90px 30px 30px;
   border-radius: 4px;
}

.breadcrumbs .breadcrumb-nav h2 {
   margin-bottom: 4px;
}

.breadcrumbs .breadcrumb-nav .breadcrumb {
   background: transparent;
   padding: 0;
   margin-bottom: 0;
   font-size: 18px;
}

.breadcrumbs .breadcrumb-nav .breadcrumb a {
   color: var(--color-primary);
}

.breadcrumbs .breadcrumb-nav .breadcrumb a:hover {
   color: var(--color-primary-light);
}

.breadcrumbs .cart-notification {
   position: absolute;
   top: 50%;
   right: 30px;
   transform: translateY(-50%);
}

.breadcrumbs .cart-notification .cart-notification-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border: 2px solid var(--color-primary);
   border-radius: 50%;
   text-decoration: none;
   color: var(--color-dark);
   position: relative;
}

.breadcrumbs .cart-notification .cart-notification-link i {
   font-size: 18px;
}

.breadcrumbs .cart-notification .cart-notification-link span {
   position: absolute;
   top: -14px;
   right: -9px;
   background: var(--color-white);
   color: var(--color-primary);
   font-size: 13px;
   font-weight: 500;
   border-radius: 20px;
   padding: 3px 5px;
}

.breadcrumbs .cart-notification .cart-notification-link:hover {
   color: var(--color-primary);
}

.title-wrap {
   margin: 0 0 40px;
}

.title-wrap .section-title {
   font-size: 34px;
   font-weight: 700;
   margin-bottom: 15px;
   position: relative;
   text-transform: uppercase;
}

.title-wrap .section-title-big {
   font-size: 36px;
   font-weight: 700;
   line-height: 36px;
   margin-bottom: 30px;
   position: relative;
   text-transform: uppercase;
}

.title-wrap .title-line {
   clear: both;
   position: relative;
   line-height: 0;
}

.title-line .long-line {
   background-color: var(--color-white);
   border-radius: 10px;
   display: inline-block;
   height: 3px;
   position: relative;
   width: 90px;
}

.title-line .short-line {
   background-color: var(--color-primary-light);
   border-radius: 10px;
   display: inline-block;
   height: 3px;
   margin-right: 5px;
   position: relative;
   width: 20px;
}

.intro-text {
   color: var(--color-dark);
   max-width: 620px;
   margin: 0 auto 50px;
   font-size: 17px;
   font-weight: 500;
   text-align: center;
}

.section-small-title {
   text-transform: uppercase;
  /* margin-bottom: 40px; */
   color: var(--color-dark-gray-light);
}

.btn {
   font-weight: 500;
   line-height: 24px;
   letter-spacing: 0.325px;
   padding: 6px 15px;
   overflow: hidden;
}

.btn.focus,
.btn:focus {
   box-shadow: none;
}

.btn-custom {
   font-size: 14px;
   border: 1px solid var(--color-primary);
   border-radius: 0;
   background-color: transparent;
   color: var(--color-dark);
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   position: relative;
   vertical-align: middle;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px transparent;
   box-shadow: 0 0 1px transparent;
   -moz-transform: perspective(1px) translateZ(0px);
   -webkit-transform: perspective(1px) translateZ(0px);
   -o-transform: perspective(1px) translateZ(0px);
   -ms-transform: perspective(1px) translateZ(0px);
   transform: perspective(1px) translateZ(0px);
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: color;
   transition-property: color;
}

.btn-custom i {
   margin-right: 6px;
   font-size: 16px;
}

.btn-custom::before {
   background-color: var(--color-primary);
   background-image: radial-gradient(circle at 0 0,
         var(--color-primary),
         var(--color-primary));
   bottom: 0;
   content: "";
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   -moz-transform: scaleX(0);
   -webkit-transform: scaleX(0);
   -o-transform: scaleX(0);
   -ms-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transform-origin: 50%;
   transform-origin: 50%;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
   z-index: -1;
}

.btn.btn-custom:hover,
.btn.btn-custom:focus,
.btn.btn-custom:active {
   border-color: var(--color-primary);
   color: var(--color-white);
}

.btn-custom:hover::before,
.btn-custom:focus::before,
.btn-custom:active::before {
   -moz-transform: scaleX(1);
   -webkit-transform: scaleX(1);
   -o-transform: scaleX(1);
   -ms-transform: scaleX(1);
   transform: scaleX(1);
}

p {
   font-family: "Open Sans", sans-serif;
}

a,
button,
i {
   -webkit-transition: all 0.35s ease 0s;
   -moz-transition: all 0.35s ease 0s;
   transition: all 0.35s ease 0s;
   letter-spacing: 0.325px;
}

.possion-sticky-top {
   position: sticky;
   top: 120px;
   align-self: flex-start;
}

.pagination {
   margin-top: 30px;
   margin-bottom: 0;
}

.pagination li {
   margin-right: 6px;
}

.pagination li:last-child {
   margin-right: 0;
}

.pagination li a.page-link {
   color: var(--color-black);
   font-size: 14px;
   font-weight: 600;
   width: 38px;
   height: 38px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50% !important;
}

.pagination li.active a.page-link {
   background: var(--color-primary);
   border-color: var(--color-primary);
}

.mb-30 {
   margin-bottom: 30px !important;
}

/********************* [ 02. Top Header ] **************************/

header#top-header {
   background: var(--color-white) none repeat scroll 0 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 10px 0;
   margin-bottom: 100px;
}

header#top-header .btn {
   padding: 5px 18px;
   font-size: 14px;
   text-transform: uppercase;
   font-weight: 500;
   background: var(--color-primary);
   color: var(--color-white);
   border-radius: 0;
}

header#top-header .btn i {
   margin-right: 4px;
}

header#top-header .btn:hover {
   background: var(--color-primary-light);
}

header#top-header .phone {
   padding: 6px 0;
   font-weight: 600;
   text-transform: uppercase;
}

header#top-header .phone i {
   color: var(--color-primary);
}

/********************* [ 03. Nav-Bar ] **************************/

.sps {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   font-weight: 900;
   font-size: 14px;
   text-transform: uppercase;
   z-index: 111;
   -webkit-transition: all 0.25s ease;
   -moz-transition: all 0.25s ease;
   transition: all 0.25s ease;
}

.sps--abv {
   background-color: transparent;
   color: var(--color-black);
}

/* .sps--abv.has-th {
   top: 100px;
}
*/
.single-page.sps--abv.has-th {
   top: 0;
}

.navbar-expand-lg .navbar-nav .nav-item:last-child .nav-link {
   padding-right: 0;
}

.sps--abv .navbar-nav .nav-link {
   color: var(--color-dark);
}

.sps--blw .navbar-nav .nav-link {
   color: var(--color-dark);
}

.sps--blw {
   background-color: var(--color-white);
   box-shadow: -1px 4px 4px rgba(0, 0, 0, 0.1);
}

.sps--blw .navbar-brand img {
   width: 150px;
   -webkit-transition: all 300ms linear 0s;
   -moz-transition: all 300ms linear 0s;
   transition: all 300ms linear 0s;
}

.navbar .active,
.navbar .active a,
.navbar li a.current:hover,
.navbar li a:hover {
   background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
   color: var(--color-primary) !important;
}

.navbar-light .navbar-toggler-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51, 51, 51, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/********************* [ 04. Home Section ] **************************/

section.home {
   background: var(--color-white);
   position: relative;
   width: 100%;
   padding-top: 90px;
}

.watch-review {
   width: 100%;
   display: block;
   overflow: hidden;
   padding: 0 0 20px 0;
}

.watch-review a {
   color: var(--color-dark-gray);
   text-decoration: none;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 14px;
}

.watch-review a:hover {
   color: var(--color-primary);
}

.watch-review a i {
   color: var(--color-dark-gray);
   padding: 10px;
   border: 2px solid var(--color-primary);
   border-radius: 50%;
   font-size: 12px;
   margin-right: 5px;
   text-indent: 2px;
}

.watch-review a:hover i {
   color: var(--color-primary);
}

.banner-content h1.header-title-text {
   font-size: 58px;
   font-weight: 700;
   line-height: 50px;
   margin-bottom: 20px;
   margin-top: 0;
   text-transform: uppercase;
   text-indent: -3px;
}

.banner-content h1.header-title-text span {
   display: block;
   font-size: 40px;
   color: var(--color-primary);
   text-indent: -2px;
}

.banner-content p.header-des-text {
   margin-bottom: 20px;
   max-width: 325px;
   font-family: "Open Sans", sans-serif;
   text-transform: unset;
   font-weight: 500;
}

.banner-content p {
   font-size: 16px;
   color: var(--color-dark);
   text-transform: capitalize;
   font-weight: 400;
   margin-bottom: 5px;
   letter-spacing: 0;
}

.button-holder {
   margin-top: 0;
   margin-bottom: 10px;
}

.button-holder .btn.btn-custom {
   margin: 0 10px 10px 0;
}

.home-image img {
   width: 100%;
}

/********************* [ 05. Features Section ] **************************/

section.features {
   background: var(--color-white-dark);
}

section.features img {
   width: 100%;
}

.feature-all-wrap h1 {
   font-weight: 700;
   font-size: 30px;
   text-transform: uppercase;
   margin-top: 0;
   margin-bottom: 50px;
}

.feature-wrap {
   margin: 0 0 30px;
   padding: 0 0 0 60px;
   position: relative;
   text-align: left;
}

.feature-icon {
   left: 0;
   position: absolute;
   top: 0;
}

.feature-wrap h3 {
   font-size: 18px;
   font-weight: 900;
   margin: 0 0 15px;
}

.feature-wrap:hover i {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-white);
}

.feature-icon i {
   background-color: transparent;
   border: 2px solid var(--color-primary);
   border-radius: 50%;
   color: var(--color-dark);
   font-size: 20px;
   height: 40px;
   line-height: 36px;
   position: relative;
   text-align: center;
   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
   width: 40px;
}

.feature-details p {
   font-weight: 400;
   margin-bottom: 0;
   line-height: 25px;
   font-family: "Open Sans", sans-serif;
}

/********************* [ 06. Why Fling Pro Section ] **************************/

section.why-us {
   background-image: url("../images/why-bg.jpg");
   background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-attachment: fixed;
   background-position: top center;
}

section.why-us .title-wrap .section-title,
section.why-us .intro-text,
section.why-us .title-wrap .section-title-big {
   color: var(--color-white);
}

section.why-us .feature-wrap {
   margin: 0;
}

section.why-us .feature-wrap .feature-icon i {
   color: var(--color-white);
}

section.why-us .feature-wrap:hover .feature-icon i {
   color: var(--color-white);
}

/********************* [ 07. Collection Or Screenshots Or Product Showcase Section ] **************************/

section.collection {
   background: var(--color-white);
}

.collection-text h1 {
   font-size: 36px;
   line-height: 38px;
   font-weight: 700;
   text-transform: uppercase;
   text-indent: -3px;
   margin-bottom: 15px;
}

.collection-text h1 span {
   display: block;
}

.collection-text .long-line {
   background-color: var(--color-dark-gray);
}

.collection-text p {
   margin-top: 20px;
   font-weight: 400;
   margin-bottom: 15px;
   letter-spacing: 1px;
}

.collection .owl-carousel .item {
   border: 1px solid var(--color-light-gray);
   padding: 10px;
   -webkit-transition: all 2s ease-in-out 0s;
   transition: all 2s ease-in-out 0s;
}

.collection-text a {
   color: var(--color-dark-gray);
   text-transform: uppercase;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
   margin-top: 15px;
}

.collection-text a i {
   color: var(--color-primary);
   font-size: 18px;
}

.collection-text a:hover i {
   color: var(--color-white);
}

.cpsp-des {
   text-align: center;
   position: absolute;
   top: -40%;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.75);
   width: 100%;
   padding: 5px 0 10px 0;
   display: block;
   -webkit-transition: all 0.3s ease-in-out 0s;
   transition: all 0.3s ease-in-out 0s;
}

.collection .owl-carousel .item:hover .cpsp-des {
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

.cpsp-des .btn {
   font-size: 20px;
   padding: 8px 10px;
   text-align: center;
   color: var(--color-white);
   border: 2px solid var(--color-primary);
   border-radius: 0;
}

.cpsp-des .btn i {
   margin-right: 0 !important;
}

.cpsp-des .cpsp-price {
   color: var(--color-white);
   font-weight: 600;
   font-size: 18px;
   margin-bottom: 8px;
}

.cpsp-des .cpsp-price span {
   color: var(--color-primary);
   text-decoration: line-through;
}

.collection .owl-carousel .owl-nav {
   display: none;
}

.collection .owl-carousel .owl-dots {
   bottom: 10px;
   left: 0;
   position: absolute;
   right: 0;
   text-align: center;
}

.owl-carousel .owl-dots .owl-dot span {
   background: var(--color-dark);
   border-radius: 0;
   height: 8px;
   width: 20px;
}

.owl-carousel .owl-dots .owl-dot.active span {
   background: var(--color-primary);
}

/********************* [ 08. Reviews Or Testimonial Section ] **************************/

section.reviews {
   background: var(--color-white-dark);
}

section.reviews .long-line {
   background-color: var(--color-dark-gray);
}

.review-slider {
   display: block;
   background: var(--color-white);
}

.well.client-wall {
   width: 100%;
   position: relative;
   padding: 30px 30px;
   background: var(--color-white);
   text-align: center;
}

.well.client-wall img {
   width: 84px;
   background-color: var(--color-white);
   margin: 0 auto 10px;
   border-radius: 50%;
}

.client-rating {
   color: var(--color-primary);
}

.well.client-wall h4 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 0;
}

.well.client-wall h4 span {
   color: var(--color-primary);
}

.review-slider.owl-carousel .owl-dots {
   top: 0;
   right: 23px;
   position: absolute;
}

/********************* [ 09. FAQ Section ] **************************/

section.faq {
   background: url("../images/product/contact.webp");
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-attachment: fixed;
}

section.faq .section-title-big {
   color: var(--color-white);
}

section.faq #accordion .card {
   margin-bottom: 15px;
   border-radius: 0;
   text-align: left;
   letter-spacing: 1px;
}

section.faq #accordion .card:last-child {
   margin-bottom: 0;
}

section.faq #accordion .card-header {
   padding: 0;
   border-bottom: none;
}

section.faq #accordion .card-header button {
   display: block;
   width: 100%;
   text-align: left;
   background-color: var(--color-white);
   text-decoration: none;
   color: var(--color-primary);
   padding: 20px 20px 20px 50px;
   white-space: normal;
}

section.faq #accordion .card-header button::before {
   content: "−";
   float: left;
   margin-right: 1em;
   margin-left: 10px;
   color: var(--color-white);
   font-size: 28px;
   font-weight: 600;
   display: inline-block;
   position: absolute;
   left: 10px;
   color: var(--color-primary);
}

section.faq #accordion .card-header button.collapsed {
   color: var(--color-dark);
}

section.faq #accordion .card-header button.collapsed::before {
   content: "+";
   color: var(--color-dark);
   position: absolute;
}

section.faq #accordion .card-header button.collapsed:hover {
   color: var(--color-primary);
}

section.faq #accordion .card-body {
   padding-top: 0;
}

section.faq #accordion .card-body p:last-child {
   margin-bottom: 0;
}

section.faq #accordion .card-body ul {
   list-style-type: circle;
   font-size: 14px;
   font-weight: 500;
   font-family: "Open Sans", sans-serif;
}

/********************* [ 10. Pricing Or Packages Or Offers Section ] **************************/

section.pricing {
   background: var(--color-white);
}

section.pricing .long-line {
   background-color: var(--color-dark-gray);
}

.pbg-simple {
   background: var(--color-primary-rgba-75);
}

.pbg-normal {
   background: var(--color-primary-rgba-80);
}

.pbg-standard {
   background: var(--color-primary-rgba-85);
}

.pbg-boss {
   background: var(--color-primary-rgba-90);
}

.pbg-big-boss {
   background: var(--color-primary-rgba-95);
}

.pbg-king {
   background: var(--color-primary-rgba-100);
}

.pricing-table {
   height: auto;
   margin: 0 auto;
   padding: 40px 20px;
   position: relative;
   width: 100%;
   color: var(--color-white);
}

.pricing-wrap h3 {
   font-size: 24px;
   font-weight: 600;
   margin-top: 0;
   margin-bottom: 15px;
   text-transform: uppercase;
}

.pricing-wrap h2 span {
   font-size: 1.5em;
   font-weight: 500;
}

.pricing-wrap h2 span.line-through {
   color: var(--color-dark);
   text-decoration: line-through;
   font-size: 20px;
}

.pricing-wrap h2 {
   font-size: 2rem;
   margin-bottom: 16px;
   padding: 0;
}

h2 {
   letter-spacing: 1.1px;
   line-height: 1.4;
}

ul.price li {
   margin: 0 auto;
   padding: 8px 0;
   width: 100%;
   font-weight: 400;
}

ul.price li a {
   color: var(--color-white);
}

ul.price li a:hover {
   text-decoration: none;
}

ul.price {
   list-style: outside none none;
   margin: 0 0 30px 0;
   text-align: center;
   padding: 0;
}

.pricing-table .btn.btn-custom {
   border-color: var(--color-white);
   color: var(--color-white);
}

.pricing-slider .owl-dots {
   margin-top: 30px !important;
}

/********************* [ 11. Team Or Agents Or Experts Section ] **************************/

section.team {
   background: var(--color-white-dark);
}

section.team .long-line {
   background-color: var(--color-dark-gray);
}

section.team .card {
   border: none;
   background: var(--color-white);
}

section.team .image-flip:hover .backside,
section.team .image-flip.hover .backside {
   -webkit-transform: rotateY(0deg);
   -moz-transform: rotateY(0deg);
   -o-transform: rotateY(0deg);
   -ms-transform: rotateY(0deg);
   transform: rotateY(0deg);
   border-radius: 0.25rem;
}

section.team .image-flip:hover .frontside,
section.team .image-flip.hover .frontside {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

section.team .mainflip {
   -webkit-transition: 1s;
   -webkit-transform-style: preserve-3d;
   -ms-transition: 1s;
   -moz-transition: 1s;
   -moz-transform: perspective(1000px);
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transition: 1s;
   transform-style: preserve-3d;
   position: relative;
}

section.team .frontside {
   position: relative;
   -webkit-transform: rotateY(0deg);
   -ms-transform: rotateY(0deg);
   z-index: 2;
   margin-bottom: 30px;
}

section.team .backside {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   background: var(--color-white);
   -webkit-transform: rotateY(-180deg);
   -moz-transform: rotateY(-180deg);
   -o-transform: rotateY(-180deg);
   -ms-transform: rotateY(-180deg);
   transform: rotateY(-180deg);
   -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
   -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
   box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

section.team .frontside,
section.team .backside {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transition: 1s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 1s;
   -moz-transform-style: preserve-3d;
   -o-transition: 1s;
   -o-transform-style: preserve-3d;
   -ms-transition: 1s;
   -ms-transform-style: preserve-3d;
   transition: 1s;
   transform-style: preserve-3d;
}

section.team .frontside .card,
section.team .backside .card {
   min-height: 320px;
   border-radius: 0;
}

section.team .frontside .card .card-body,
section.team .backside .card .card-body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

section.team .frontside .card a i {
   color: var(--color-primary);
   font-size: 20px !important;
}

section.team .backside .card a {
   font-size: 18px;
   color: var(--color-dark);
   text-decoration: none;
}

section.team .backside .card a:hover {
   color: var(--color-primary);
}

section.team .frontside .card .card-title,
section.team .backside .card .card-title {
   color: var(--color-dark);
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 15px;
}

section.team .frontside .card .card-text,
section.team .backside .card .card-text {
   font-weight: 400;
}

section.team .frontside .card .card-body img {
   width: 120px;
   height: 120px;
   border-radius: 50%;
}

/********************* [ 12. Blog Or News Section : Blog Post, Sidebar, Details  ] **************************/

section.blog {
   background: var(--color-white);
}

section.blog .long-line {
   background-color: var(--color-dark-gray);
}

.post-blog {
   margin: 0;
   position: relative;
   background: var(--color-white);
}

.post-blog .post-img {
   position: relative;
   overflow: hidden;
}

.post-blog .post-img img {
   width: 100%;
   height: auto;
}

.post-blog .over-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   background: rgba(0, 0, 0, 0.6);
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.post-blog:hover .over-layer {
   opacity: 1;
}

.post-blog .post-link {
   margin: 0;
   padding: 0;
   position: relative;
   top: 45%;
   text-align: center;
}

.post-blog .post-link li {
   display: inline-block;
   list-style: none;
   margin: -9px 0 0;
}

.post-blog .post-link li a {
   color: var(--color-white);
   font-size: 39px;
}

.post-blog .post-link li a:hover {
   color: var(--color-primary);
   text-decoration: none;
}

.post-blog .post-date {
   position: absolute;
   top: 30px;
   left: 30px;
}

.post-blog .date {
   display: inline-block;
   border-radius: 0;
   padding: 5px 8px;
   color: var(--color-white);
   font-size: 16px;
   font-weight: bold;
   text-align: center;
   background: var(--color-dark);
   float: left;
}

.post-blog .month {
   display: inline-block;
   border-radius: 0;
   padding: 5px 10px;
   color: var(--color-white);
   font-size: 16px;
   font-weight: bold;
   background: var(--color-primary);
   text-transform: uppercase;
}

.post-blog .post-content {
   padding: 30px;
   background-color: var(--color-white-dark);
}

.post-blog h3.post-title {
   margin: 0 0 15px 0;
   font-size: 18px;
}

.post-blog h3.post-title a {
   font-weight: 500;
   color: var(--color-dark);
   display: inline-block;
   -webkit-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

.post-blog h2.post-title {
   margin: 0 0 15px 0;
   font-size: 28px;
}

.post-blog .post-title a:hover {
   text-decoration: none;
   color: var(--color-primary);
}

.post-blog .post-description {
   font-size: 14px;
   line-height: 22px;
   color: var(--color-dark);
   padding: 0;
   font-weight: 400;
}

.post-blog blockquote {
   padding: 16px;
   background: var(--color-white);
   border-left: 4px solid var(--color-primary);
}

.post-blog blockquote p {
   font-family: "Oswald", sans-serif;
   margin-bottom: 0;
   font-size: 16px;
   font-weight: 500;
}

.post-blog .post-content ul {
   font-family: "Open Sans", sans-serif;
   list-style: decimal;
   padding-left: 30px;
}

.post-blog .post-content ul li {
   padding: 4px 0;
   font-size: 14px;
}

.share-on {
   display: flex;
   align-items: center;
}

.share-on span {
   margin-right: 16px;
   font-size: 16px;
   font-weight: 500;
}

.share-on a {
   background: var(--color-white);
   color: var(--color-primary);
   margin-right: 8px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.share-on a:last-of-type {
   margin-right: 0;
}

.share-on a:hover {
   background-color: var(--color-primary);
   color: var(--color-white);
}

.post-blog .read-more {
   color: var(--color-dark);
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   position: relative;
   -webkit-transition: color 0.2s linear;
   transition: color 0.2s linear;
}

.post-blog .read-more:hover {
   text-decoration: none;
   color: var(--color-primary);
}

.post-blog .read-more:after {
   content: "";
   position: absolute;
   width: 30%;
   bottom: -2px;
   left: 0;
   display: block;
   border: 1px solid var(--color-primary);
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.post-blog .read-more:hover:after {
   width: 100%;
}

.blog-slider.owl-carousel .owl-dots {
   margin-top: 30px !important;
}

.blog-pre-next-post {
   background: var(--color-white-dark);
   display: flex;
   margin-bottom: 30px;
}

.blog-pre-next-post .pre-post,
.blog-pre-next-post .next-post {
   flex: 0 0 50%;
   max-width: 50%;
   display: block;
   position: relative;
   float: left;
   text-decoration: none;
   padding: 30px;
}

.blog-pre-next-post .pre-post {
   border-right: 1px solid var(--color-white);
}

.blog-pre-next-post .next-post {
   border-left: 1px solid var(--color-white);
}

.blog-pre-next-post i {
   font-size: 16px;
   color: var(--color-primary);
}

.blog-pre-next-post p.sub {
   margin-bottom: 16px;
   font-weight: 600;
   font-family: "Oswald", sans-serif;
   color: var(--color-dark);
}

.blog-pre-next-post p {
   color: var(--color-dark-gray);
   font-size: 16px;
   margin-bottom: 0;
}

.blog-pre-next-post .next-post {
   text-align: right;
}

/* Blog Post Comments */

.blog-post-comments {
   background: var(--color-white-dark);
   display: block;
   overflow: hidden;
   padding: 30px;
   margin-bottom: 30px;
}

.comment-title {
   border-bottom: 1px solid var(--color-light-gray);
   padding-bottom: 8px;
   margin-bottom: 30px;
   position: relative;
}

.comment-list .media {
   margin-bottom: 20px;
}

.comment-list .media:last-of-type {
   margin-bottom: 0;
}

.blog-post-comments .media-left img {
   width: 50px;
   margin-right: 10px;
   border-radius: 50%;
}

.blog-post-comments p {
   font-size: 14px;
}

.blog-post-comments .main-comment-wrap {
   padding-bottom: 20px;
}

.blog-post-comments .media-body a {
   text-decoration: none;
   color: var(--color-dark);
}

.blog-post-comments .time-stamp {
   color: var(--color-dark-gray-light);
   display: block;
   font-size: 14px;
   background: transparent;
}

.blog-post-comments .media-body span.badge {
   background: var(--color-dark-gray);
   color: var(--color-white);
   font-size: 10px;
   line-height: 1.1;
   font-family: "Open Sans", sans-serif;
   vertical-align: middle;
   text-decoration: none;
}

.blog-post-comments .media-body h6 {
   margin-bottom: 0;
}

.blog-post-comments .media-body h6,
.blog-post-comments .media-body span {
   display: inline-block;
   text-decoration: none;
}

.blog-post-comments .btn.btn-replay {
   background: var(--color-primary);
   color: var(--color-white);
   text-align: center;
   font-size: 12px;
   line-height: 1.1;
   font-weight: 400;
   padding: 4px 8px;
   border-radius: 4px;
   text-transform: capitalize;
}

.leave-comment {
   background: var(--color-white-dark);
   padding: 30px;
}

.leave-comment .form-control {
   background: var(--color-white-dark);
   border-radius: 0;
}

.leave-comment .form-control:focus {
   outline: none;
   box-shadow: none;
   border-color: var(--color-primary);
}

/* Blog Sidebar */

.blog-sidebar-widget {
   padding: 30px;
   margin-bottom: 30px;
   display: block;
   overflow: hidden;
   height: 100%;
   background: var(--color-white-dark);
}

.blog-sidebar-widget h3 {
   margin-top: 0;
   margin-bottom: 20px;
}

.blog-sidebar-widget .categories ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.blog-sidebar-widget .categories ul li {
   float: none;
   display: block;
   overflow: hidden;
}

.blog-sidebar-widget .categories ul li a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   color: var(--color-dark);
   text-decoration: none;
   font-size: 16px;
   font-weight: 500;
}

.blog-sidebar-widget .categories ul li:last-child a {
   padding-bottom: 0;
}

.blog-sidebar-widget .categories ul li a:hover {
   color: var(--color-primary);
}

.blog-sidebar-widget .categories ul li a .badge {
   background: var(--color-primary);
   color: var(--color-white);
   border-radius: 50%;
   padding: 0;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.blog-sidebar-widget .popular-post-wrap {
   margin-top: 30px;
}

.blog-sidebar-widget.popular-post .popular-post-box {
   display: flex;
   align-items: center;
   margin-top: 15px;
}

.blog-sidebar-widget.popular-post .popular-post-box img {
   width: 70px;
   margin-right: 12px;
}

.blog-sidebar-widget.popular-post .popular-post-box .popular-post-des h4 {
   font-size: 16px;
   margin-bottom: 4px;
}

.blog-sidebar-widget.popular-post .popular-post-box .popular-post-des h4 a {
   color: var(--color-dark);
   text-decoration: none;
}

.blog-sidebar-widget.popular-post .popular-post-box .popular-post-des h4 a:hover {
   color: var(--color-primary);
}

.blog-sidebar-widget.popular-post .popular-post-box .popular-post-des p {
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 0;
   color: var(--color-dark-gray);
}

.blog-sidebar-widget.popular-post .popular-post-box .popular-post-des p i {
   margin-right: 8px;
   color: var(--color-primary);
}

.blog-sidebar-widget.post-tags .tags a {
   display: inline-block;
   background: var(--color-white);
   color: var(--color-dark);
   font-size: 14px;
   font-weight: 500;
   padding: 8px 16px;
   margin-top: 10px;
   margin-right: 8px;
   margin-bottom: 5px;
   border-radius: 20px;
   text-decoration: none;
}

.blog-sidebar-widget.post-tags .tags a:hover {
   background: var(--color-primary);
   color: var(--color-white);
}

/********************* [ 13. Subscribe Section ] **************************/

section.subscribe {
   background: url("../images/news-subs-bg.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
}

section.subscribe .section-title-big {
   color: var(--color-white);
}

.subscribe-head {
   text-align: center;
}

.subscribe-form input[type="email"] {
   border: 0 none;
   border-radius: 25px;
   color: var(--color-dark);
   font-size: 16px;
   font-style: normal;
   height: 51px;
   letter-spacing: 0;
   text-align: center;
   width: 460px;
}

.subscribe-form input[type="submit"] {
   background: var(--color-primary);
   border: 0 none;
   border-radius: 25px;
   color: var(--color-white);
   height: 51px;
   letter-spacing: 0;
   margin-left: -60px;
   padding: 0 58px;
   font-weight: 600;
   cursor: pointer;
}

/********************* [ 14. Certified By or Partners or Clients Section ] **************************/

section.certified {
   background: var(--color-white-dark);
}

section.certified .long-line {
   background-color: var(--color-dark-gray);
}

section.certified .certified-slider .item {
   border: 1px solid var(--color-light-gray);
   overflow: hidden;
}

section.certified img {
   width: 100%;
   padding: 0;
   -webkit-transition: all 200ms ease-in;
   -webkit-transform: scale(1);
   -ms-transition: all 200ms ease-in;
   -ms-transform: scale(1);
   -moz-transition: all 200ms ease-in;
   -moz-transform: scale(1);
   transition: all 200ms ease-in;
   transform: scale(1);
}

section.certified img:hover {
   z-index: 2;
   -webkit-transition: all 200ms ease-in;
   -webkit-transform: scale(1.1);
   -ms-transition: all 200ms ease-in;
   -ms-transform: scale(1.1);
   -moz-transition: all 200ms ease-in;
   -moz-transform: scale(1.1);
   transition: all 200ms ease-in;
   transform: scale(1.1);
}

.certified-slider.owl-carousel .owl-dots {
   margin-top: 30px !important;
}

/********************* [ 15. Contact Section ] **************************/

section.contact {
   background-image: url("../images/product/contact.webp");
   background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-attachment: fixed;
   min-height: 500px;
   background-position: center;
}

section.contact .section-title-big {
   color: var(--color-white);
}

section.contact .long-line {
   background-color: var(--color-white);
}

.contact-details {
   color: var(--color-white);
}

.contact-item {
   margin: 0 0 23px;
}

.contact-item:last-child {
   margin-bottom: 0;
}

.contact-icon {
   float: left;
   margin-right: 15px;
}

.contact-icon i {
   background-color: transparent;
   border: 2px solid var(--color-primary);
   border-radius: 50%;
   color: var(--color-white);
   font-size: 20px;
   height: 40px;
   line-height: 38px;
   text-align: center;
   width: 40px;
}

.contact-item:hover .contact-icon i {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-white);
}

.contact-desc {
   padding-left: 55px;
}

.contact-desc h4 {
   color: var(--color-white);
   font-size: 20px;
   font-weight: 500;
   margin: 0 0 10px;
}

.contact-desc a {
   text-decoration: none;
}

.contact-item a {
   color: var(--color-white);
}

.contact-item ul.list-inline.list-social {
   margin: 0;
}

.list-inline.list-social {
   padding: 0;
}

.list-social.list-inline>li {
   padding: 0;
}

.list-inline>li {
   display: inline-block;
}

.social-icon.social-icon-small {
   height: 34px;
   width: 34px;
}

.contact-desc a {
   text-decoration: none;
}

.contact-item a {
   color: var(--color-white);
}

.contact-item p {
   margin-bottom: 0;
}

.social-icon {
   border-radius: 5px 0;
   display: block;
   margin-right: 5px;
   overflow: hidden;
   text-align: center;
   text-shadow: none;
}

.social-icon.social-icon-small i {
   background-color: var(--color-primary-light);
   font-size: 18px;
   line-height: 32px;
}

.social-icon i {
   display: block;
   position: relative;
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

.social-icon.social-icon-small:hover i:first-child {
   margin-top: -32px;
}

.contact-item:hover i {
   border-color: var(--color-white);
}

.contact-form .form-control {
   border-radius: 0;
   font-weight: 400;
   color: var(--color-white);
   background: transparent;
   border: 2px solid var(--color-white);
}

.contact-form .form-control::-moz-placeholder {
   color: var(--color-light-gray);
   opacity: 1;
}

.contact-form .form-control:-moz-placeholder {
   color: var(--color-light-gray);
   opacity: 1;
}

.contact-form .form-control:-ms-input-placeholder {
   color: var(--color-light-gray);
   opacity: 1;
}

.contact-form .form-control::-webkit-input-placeholder {
   color: var(--color-light-gray);
   opacity: 1;
}

.contact-form .btn-custom {
   color: var(--color-white);
   font-weight: 600;
}

/********************* [ 16. Products Section : Product Item, Sidebar, Details ] **************************/

.product-sorting {
   display: flex;
   align-items: center;
   margin-bottom: 30px;
}

.product-sorting .nav-tabs {
   margin-right: 8px;
   border-bottom: none;
}

.product-sorting .nav-tabs .nav-item {
   margin-right: 4px;
}

.product-sorting .nav-tabs .nav-item .nav-link {
   border-radius: 0 !important;
   border: 1px solid var(--color-light-gray);
   background: var(--color-white);
   color: var(--color-dark-gray);
   padding: 0;
   height: 38px;
   width: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.product-sorting .nav-tabs .nav-item .nav-link.active {
   background: var(--color-primary);
   border-color: var(--color-primary);
}

.product-sorting .nav-tabs .nav-item .nav-link i {
   font-size: 16px;
}

.product-sorting .nav-tabs .nav-item .nav-link.active i {
   color: var(--color-white);
}

.product-sorting .sorting-form .form-group {
   margin-bottom: 0;
   position: relative;
}

.product-sorting .sorting-form .form-group::before {
   content: "\f078";
   font: var(--fa-font-solid);
   color: var(--color-dark);
   font-size: 12px;
   position: absolute;
   top: 13px;
   right: 10px;
}

.product-sorting .sorting-form .form-group select.form-control {
   height: 38px;
   padding-right: 24px;
   line-height: 1.1;
   border-radius: 0;
   border: 1px solid var(--color-light-gray);
   appearance: none;
}

.product-sorting .sorting-form .form-group select.form-control:focus {
   box-shadow: none;
}

.product-sorting .product-showing-count {
   margin-left: auto;
   margin-bottom: 0;
   font-weight: 600;
}

/* Product Display : Grid View */

.product-display .grid-view .product-item {
   margin-bottom: 10px;
   transition: all 0.35s ease 0s;
   border: solid 1px;
    border-color: var(--color-primary-light);
}

.product-display .grid-view .product-item:hover {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.product-display .grid-view .product-item .product-img {
   background: var(--color-white-dark);
   padding: 5px;
}

.product-display .grid-view .product-item .product-img img {
   width: 100%;
}

.product-display .grid-view .product-item .product-details {
   padding: 5px 0 0 0;
}

.product-display .grid-view .product-item .product-details .product-caption {
   text-align: center;
   margin-bottom: 5px;
   font-size: 20px;
}

.product-display .grid-view .product-item .product-details .product-rating {
   text-align: center;
}

.product-display .grid-view .product-item .product-details .product-rating i {
   color: var(--color-primary);
}

.product-display .grid-view .product-item .product-details .product-price {
   text-align: center;
   font-weight: 500;
   margin-bottom: 20px;
}

.product-display .grid-view .product-item .product-details .product-price .original-price {
   text-decoration: line-through;
   opacity: 0.75;
}

.product-display .grid-view .product-item .product-details .product-price .present-price {
   font-size: 20px;
   color: var(--color-primary);
}

.product-display .grid-view .product-item .product-details .action {
   display: flex;
   flex-wrap: wrap;
   margin-left: -8px;
   margin-right: -8px;
}

.product-display .grid-view .product-item .product-details .action a {
   padding: 10px 12px;
   border-radius: 0;
   line-height: 1.1;
}

.product-display .grid-view .product-item .product-details .action .details,
.product-display .grid-view .product-item .product-details .action .buy-now {
   flex: 0 0 100%;
   max-width: 100%;
   padding-left: 8px;
   padding-right: 8px;
   margin-top: 5px;
}

.product-display .grid-view .product-item .product-details .action .details a {
   background: var(--color-dark-gray);
   color: var(--color-white);
   width: 100%;
}

.product-display .grid-view .product-item .product-details .action .details a:hover {
   background: var(--color-dark);
}

.product-display .grid-view .product-item .product-details .action .buy-now a {
   background: var(--color-primary);
   color: var(--color-white);
   width: 100%;
}

.product-display .grid-view .product-item .product-details .action .buy-now a:hover {
   background: var(--color-primary-light);
}

/* Product Display : List View */

.product-display .list-view .product-item {
   display: flex;
   align-items: center;
   margin-bottom: 30px;
}

.product-display .list-view .product-item .product-img {
   background: var(--color-white-dark);
   width: 300px;
   min-width: 300px;
   padding: 15px;
}

.product-display .list-view .product-item .product-img img {
   width: 100%;
}

.product-display .list-view .product-item .product-details {
   padding: 0 0 0 30px;
}

.product-display .list-view .product-item .product-details .product-caption {
   font-size: 24px;
   margin-bottom: 20px;
}

.product-display .list-view .product-item .product-details .product-rating {
   margin-bottom: 4px;
}

.product-display .list-view .product-item .product-details .product-rating i {
   color: var(--color-primary);
}

.product-display .list-view .product-item .product-details .product-price {
   font-weight: 500;
   margin-bottom: 20px;
}

.product-display .list-view .product-item .product-details .product-price .present-price {
   font-size: 20px;
   color: var(--color-primary);
}

.product-display .list-view .product-item .product-details .product-price .original-price {
   text-decoration: line-through;
   opacity: 0.75;
}

.product-display .list-view .product-item .product-details .short-description {
   margin-bottom: 20px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.product-display .list-view .product-item .product-details .action {
   display: flex;
   flex-wrap: wrap;
   margin-left: -8px;
   margin-right: -8px;
}

.product-display .list-view .product-item .product-details .action a {
   padding: 10px 12px;
   border-radius: 0;
   line-height: 1.1;
}

.product-display .list-view .product-item .product-details .action .details,
.product-display .list-view .product-item .product-details .action .buy-now {
   padding-left: 8px;
   padding-right: 8px;
}

.product-display .list-view .product-item .product-details .action .details a {
   background: var(--color-dark-gray);
   color: var(--color-white);
}

.product-display .list-view .product-item .product-details .action .details a:hover {
   background: var(--color-dark);
}

.product-display .list-view .product-item .product-details .action .buy-now a {
   background: var(--color-primary);
   color: var(--color-white);
}

.product-display .list-view .product-item .product-details .action .buy-now a:hover {
   background: var(--color-primary-light);
}

/* Product Sidebar */

.product-sidebar-widget {
   padding: 30px;
   background: var(--color-white-dark);
}

.price-range-slider {
   margin-bottom: 30px;
}

.price-range-slider h3 {
   margin-bottom: 8px;
}

.price-range-slider p {
   font-size: 14px;
}

.price-range-slider .price-input {
   width: 100%;
   display: flex;
   margin: 30px 0;
}

.price-range-slider .price-input .field {
   display: flex;
   width: 100%;
   height: 38px;
   align-items: center;
}

.price-range-slider .field input {
   width: 100%;
   height: 100%;
   outline: none;
   font-size: 18px;
   margin-left: 8px;
   border-radius: 0;
   text-align: center;
   border: 1px solid var(--color-light-gray);
   -moz-appearance: textfield;
   appearance: textfield;
}

.price-range-slider input[type="number"]::-webkit-outer-spin-button,
.price-range-slider input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   appearance: none;
}

.price-range-slider .price-input .separator {
   width: 130px;
   display: flex;
   font-size: 19px;
   align-items: center;
   justify-content: center;
}

.price-range-slider .slider {
   height: 5px;
   position: relative;
   background: var(--color-light-gray);
   border-radius: 5px;
}

.price-range-slider .slider .progress {
   height: 100%;
   left: 0%;
   right: 0%;
   position: absolute;
   border-radius: 5px;
   background: var(--color-primary);
}

.price-range-slider .range-input {
   position: relative;
   margin-bottom: 4px;
}

.price-range-slider .range-input input {
   position: absolute;
   width: 100%;
   height: 5px;
   top: -5px;
   background: none;
   pointer-events: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

.price-range-slider input[type="range"]::-webkit-slider-thumb {
   height: 17px;
   width: 17px;
   border-radius: 50%;
   background: var(--color-primary);
   pointer-events: auto;
   -webkit-appearance: none;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.price-range-slider input[type="range"]::-moz-range-thumb {
   height: 17px;
   width: 17px;
   border: none;
   border-radius: 50%;
   background: var(--color-primary);
   pointer-events: auto;
   -moz-appearance: none;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.product-category {
   margin-bottom: 30px;
}

.product-category h3 {
   margin-bottom: 20px;
}

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

.product-category ul li {
   font-weight: 500;
}

.product-category ul li a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--color-dark);
   padding: 10px 0;
   text-decoration: none;
}

.product-category ul li:last-child a {
   padding-bottom: 0;
}

.product-category ul li a span.badge {
   background: var(--color-primary);
   color: var(--color-white);
   border-radius: 50%;
   padding: 0;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.product-category ul li a:hover {
   color: var(--color-primary);
}

.product-category-check-box {
   margin-bottom: 30px;
}

.product-category-check-box h3 {
   margin-bottom: 20px;
}

.product-category-check-box ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.product-category-check-box ul li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   font-weight: 500;
}

.product-category-check-box ul li:last-child {
   padding-bottom: 0;
}

.product-category-check-box ul li .form-check {
   margin-bottom: 0;
}

.product-category-check-box ul li .form-check .form-check-input {
   margin-top: 6px;
}

.product-category-check-box ul li span.badge {
   background: var(--color-primary);
   color: var(--color-white);
   border-radius: 50%;
   padding: 0;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.product-tag {
   margin-bottom: 30px;
}

.product-tag h3 {
   margin-bottom: 20px;
}

.product-tag .tags a {
   display: inline-block;
   background: var(--color-white);
   color: var(--color-dark);
   font-size: 14px;
   font-weight: 500;
   padding: 8px 16px;
   margin-top: 10px;
   margin-right: 8px;
   margin-bottom: 5px;
   border-radius: 20px;
   text-decoration: none;
}

.product-tag .tags a:hover {
   background: var(--color-primary);
   color: var(--color-white);
}

/* Product Details */

.product-details-wrap {
   margin-bottom: 30px;
}

#productDetailsSlider .carousel-item {
   background: var(--color-white-dark);
   padding: 20px;
}

#productDetailsSlider .carousel-control-next,
#productDetailsSlider .carousel-control-prev {
   border: none;
   background: none;
   transition: all 0.15 ease-in-out;
}

#productDetailsSlider:hover .carousel-control-prev {
   background: linear-gradient(90deg,
         rgba(0, 0, 0, 0.85) 0%,
         rgba(0, 0, 0, 0) 100%);
}

#productDetailsSlider:hover .carousel-control-next {
   background: linear-gradient(90deg,
         rgba(0, 0, 0, 0) 0%,
         rgba(0, 0, 0, 0.85) 100%);
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
   opacity: 0.5;
}

#productDetailsSlider .carousel-control-next-icon,
#productDetailsSlider .carousel-control-prev-icon {
   width: 32px;
   height: 32px;
}

#productDetailsSlider .carousel-indicators li {
   width: 48px;
   height: 48px;
   padding: 4px;
   text-indent: 0;
}

#productDetailsSlider .carousel-indicators li img {
   width: 100%;
}

.product-title-price {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.product-title-price h4 {
   margin-right: 12px;
   margin-bottom: 0;
}

.product-title-price p.product-price {
   margin-bottom: 0;
   font-weight: 600;
   font-family: "Oswald", sans-serif;
}

.product-title-price p.product-price .price-off {
   text-decoration: line-through;
   font-size: 20px;
}

.product-title-price p.product-price .current-price {
   font-size: 24px;
   color: var(--color-primary);
}

.product-small-des {
   margin-bottom: 15px;
}

.product-small-des .reviews {
   margin-bottom: 15px;
}

.product-small-des .reviews .review-icon {
   margin-right: 8px;
   font-size: 16px;
   color: var(--color-primary);
}

.sku-model-stock {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}

.sku-model-stock p {
   margin-right: 12px;
   margin-bottom: 0;
}

.sku-model-stock p:last-of-type {
   margin-right: 0;
}

.sku-model-stock p strong {
   white-space: nowrap;
   color: var(--color-dark-gray);
}

.color-info,
.size-info {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
}

.color-info .pick,
.size-info .pick {
   min-width: 48px;
   margin-right: 8px;
   margin-bottom: 0;
}

.color-info .product-colors {
   display: flex;
}

.color-info .product-colors .color {
   width: 30px;
   height: 30px;
   margin-right: 10px;
   border-radius: 50%;
   appearance: none;
   position: relative;
}

.color-info .product-colors .color:last-child {
   margin-right: 0;
}

.color-info .product-colors .color:hover {
   transition: all 0.3s ease-in-out;
   cursor: pointer;
}

.color-info .product-colors .color:checked:before {
   content: "\f00c";
   font: var(--fa-font-solid);
   color: var(--color-white);
   font-size: 16px;
   position: absolute;
   bottom: 7px;
   right: 7px;
}

.color-info .product-colors #brown {
   background-color: brown;
}

.color-info .product-colors #blue {
   background-color: #5555ff;
}

.color-info .product-colors #indianred {
   background-color: indianred;
}

.color-info .product-colors #indigo {
   background-color: indigo;
}

.size-info .product-sizes {
   display: flex;
   justify-content: flex-start;
   margin: 0;
   padding: 0;
   list-style: none;
}

.size-info .product-sizes .size {
   height: 30px;
   width: 30px;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   text-transform: uppercase;
   margin-right: 10px;
   border: 2px solid var(--color-light-gray);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.size-info .product-sizes .size:last-child {
   margin-right: 0;
}

.size-info .product-sizes .size:hover {
   background: var(--color-white-dark);
   transition: all 0.4s ease-in-out;
   cursor: pointer;
}

.size-info .product-sizes .focus {
   border-color: var(--color-primary);
}

.product-cart .form-inline {
   padding-bottom: 4px;
}

.product-cart .form-inline .form-control {
   width: 80px;
   height: 38px;
   margin-right: 16px;
   text-align: center;
   font-weight: 600;
   border-radius: 0;
   border: 1px solid var(--color-light-gray);
}

.product-cart .form-inline .form-control:focus {
   box-shadow: none;
   border-color: var(--color-primary);
}

.product-in-details .share-icon {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.product-in-details .share-icon a.btn-custom {
   border-radius: 50%;
   width: 30px;
   height: 30px;
   padding: 0;
   margin-right: 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.product-in-details .share-icon a.btn-custom i {
   margin-right: 0;
   font-size: 14px;
}

.product-in-details hr {
   margin: 20px 0;
   border-top: 1px dashed var(--color-light-gray);
}

.product-additional-details {
   margin-bottom: 30px;
}

.product-additional-details .nav-tabs {
   border-bottom: 1px solid var(--color-light-gray);
}

.product-additional-details .nav-tabs .nav-link {
   background: var(--color-white);
   border-bottom: 1px solid var(--color-light-gray);
   font-weight: 600;
}

.product-additional-details .nav-tabs .nav-link.active {
   border-color: var(--color-white) var(--color-white) var(--color-primary);
   color: var(--color-primary);
}

.product-additional-details .tab-content {
   padding: 30px 0;
   font-family: "Open Sans", sans-serif;
}

.product-additional-details #nav-description ul {
   list-style: square;
   padding-left: 32px;
}

.product-additional-details #nav-description p:last-child {
   margin-bottom: 0;
}

.review-box {
   margin-bottom: 30px;
}

.review-box:last-of-type {
   margin-bottom: 0;
}

.review-count {
   margin-bottom: 30px;
   font-weight: 600;
   color: var(--color-dark-gray);
}

.review-box .review-customer {
   margin-bottom: 8px;
   display: flex;
   align-items: center;
}

.review-box .review-customer img {
   width: 40px;
   padding: 0;
   margin-right: 8px;
   border: 1px solid var(--color-light-gray);
   background: var(--color-white-dark);
   border-radius: 50%;
}

.review-box .review-customer span {
   font-weight: 600;
}

.review-box .rating {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
}

.review-box .rating .rating-icon {
   color: var(--color-primary);
   margin-right: 8px;
}

.review-box .rating .rating-for {
   margin-bottom: 0;
}

.review-box .review-details p:last-child {
   margin-bottom: 0;
}

.related-product h3 {
   margin-bottom: 20px;
}

/********************* [ 17. Cart Section ] **************************/

section.cart .cart-table {
   font-weight: 500;
}

section.cart .cart-table thead {
   background: var(--color-white-dark);
}

section.cart .cart-table thead th {
   padding: 20px 12px;
}

section.cart .cart-table th,
section.cart .cart-table td {
   vertical-align: middle;
   border-color: var(--color-light-gray);
}

section.cart .cart-table .cart-action,
section.cart .cart-table .single-price,
section.cart .cart-table .subtotal {
   text-align: center;
}

section.cart .cart-table .cart-action i {
   font-size: 20px;
   cursor: pointer;
   color: var(--color-dark-gray);
}

section.cart .cart-table .cart-action i:hover {
   color: var(--color-primary);
}

section.cart .cart-table .cart-product {
   white-space: nowrap;
}

section.cart .cart-table .cart-product img {
   width: 72px;
   margin-right: 8px;
   background: var(--color-white-dark);
}

section.cart .cart-table .form-control.cart-value {
   width: 80px;
   margin: 0 auto;
   border-radius: 0;
   text-align: center;
}

section.cart .cart-table .form-control.cart-value:focus {
   box-shadow: none;
   border-color: var(--color-primary);
}

section.cart .cart-table .cart-total {
   font-size: 18px;
}

section.cart .cart-table .cart-total .total {
   text-align: right;
}

section.cart .coupon-update {
   margin-top: 15px;
   margin-bottom: 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

section.cart .coupon-update .input-group {
   width: 250px;
}

section.cart .coupon-update .input-group .form-control {
   text-align: center;
   border-radius: 0 !important;
   border-color: var(--color-light-gray);
   line-height: 1;
}

section.cart .coupon-update .input-group .form-control:focus {
   border-color: var(--color-primary);
   box-shadow: none;
}

section.cart .cart-summary {
   padding: 30px;
   background: var(--color-white-dark);
}

section.cart .cart-summary h3.summary-title {
   margin-bottom: 30px;
}

section.cart .cart-summary .cart-summary-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box {
   margin-right: 8px;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box:last-of-type {
   margin-right: 0;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box h5 {
   margin-bottom: 12px;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box p {
   margin-bottom: 0;
   font-weight: 600;
   font-family: "Oswald", sans-serif;
   color: var(--color-dark-gray);
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box p.continue-shoping {
   margin-right: 12px;
   margin-bottom: 12px;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box p.continue-shoping a {
   color: var(--color-dark);
   text-decoration: none;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box p.continue-shoping a i {
   margin-left: 4px;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box p.continue-shoping a:hover {
   color: var(--color-primary);
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box .btn {
   background: var(--color-primary);
   color: var(--color-white);
   border-radius: 0;
   padding: 8px 15px;
   font-size: 14px;
   text-transform: uppercase;
}

section.cart .cart-summary .cart-summary-wrap .cart-summary-box .btn:hover {
   background: var(--color-primary-light);
}

/********************* [ 18. Checkout Section ] **************************/

section.checkout .checkout-details {
   padding: 30px;
   margin-bottom: 30px;
   border: 2px dashed var(--color-light-gray);
}

section.checkout .checkout-details h3 {
   margin-bottom: 20px;
}

section.checkout form .form-row {
   margin-left: -10px;
   margin-right: -10px;
}

section.checkout form .form-row .form-group {
   padding-left: 10px;
   padding-right: 10px;
}

section.checkout form .form-control,
section.checkout form .custom-select {
   border-radius: 0;
   border: 2px solid var(--color-light-gray);
   height: 48px;
   -webkit-transition: all 0.35s;
   -moz-transition: all 0.35s;
   transition: all 0.35s;
}

section.checkout form textarea.form-control {
   height: auto;
}

section.checkout form .form-control:focus,
section.checkout form .custom-select:focus {
   box-shadow: none;
   border-color: var(--color-primary);
}

section.checkout .order-summary {
   padding: 30px;
   background: var(--color-white-dark);
}

section.checkout .order-summary h3.summary-title {
   margin-bottom: 20px;
}

section.checkout .order-summary .order-summary-wrap {
   display: flex;
   flex-direction: column;
}

section.checkout .order-summary .order-summary-wrap .order-summary-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 12px;
}

section.checkout .order-summary .order-summary-wrap .order-summary-box h5 {
   font-size: 1rem;
   margin-bottom: 0;
}

section.checkout .order-summary .order-summary-wrap .order-summary-box span {
   font-weight: 500;
}

section.checkout .order-summary .order-summary-wrap .alert {
   margin-top: 30px;
}

section.checkout .order-summary .order-summary-wrap .alert p {
   margin-bottom: 0;
}

section.checkout .order-summary .order-summary-wrap .alert p a {
   color: var(--color-primary);
}

section.checkout .order-summary .order-summary-wrap a.btn {
   width: 100%;
   padding: 10px 24px;
   background: var(--color-primary);
   color: var(--color-white);
   border-radius: 0;
   font-size: 16px;
   letter-spacing: 0.75px;
   text-transform: uppercase;
}

/********************* [ 19. Authentication Section : Sign In, Sign Up, Forgot Password ] **************************/

section.authentication .auth-wrap {
   padding: 30px;
   background: var(--color-white-dark);
   border-radius: 4px;
}

section.authentication .auth-wrap .auto-header {
   margin-bottom: 30px;
}

section.authentication .auth-wrap .auto-header p {
   margin-bottom: 0;
}

section.authentication .auth-wrap form .form-control {
   border-radius: 0;
   border-color: var(--color-white-dark);
   height: 48px;
}

section.authentication .auth-wrap form .custom-control {
   margin-bottom: 30px;
}

section.authentication .auth-wrap form .custom-control-label a {
   color: var(--color-primary);
}

section.authentication .auth-wrap form .custom-control span a {
   color: var(--color-dark);
}

section.authentication .auth-wrap form button.btn-submit {
   width: 100%;
   padding: 12px;
   font-size: 16px;
   text-align: center;
   text-transform: uppercase;
   border-radius: 48px;
   background: var(--color-primary);
   color: var(--color-white);
}

section.authentication .auth-wrap form button.btn-submit i {
   margin-left: 4px;
}

section.authentication .auth-wrap form button.btn-submit:hover {
   background: var(--color-primary-light);
}

section.authentication .auth-wrap form button.btn-submit:hover i {
   margin-left: 8px;
}

section.authentication .or-signin {
   margin-top: 30px;
   text-align: center;
}

section.authentication .or-signin p {
   margin-bottom: 24px;
}

section.authentication .or-signin .signin-with a {
   width: 40px;
   height: 40px;
   margin-right: 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--color-white);
   color: var(--color-dark);
   border: 2px solid;
   border-radius: 50%;
   text-decoration: none;
}

section.authentication .or-signin .signin-with a:last-of-type {
   margin-right: 0;
}

section.authentication .or-signin .signin-with a.google {
   color: var(--color-white);
   border-color: var(--color-google);
   background: var(--color-google);
}

section.authentication .or-signin .signin-with a.google:hover {
   color: var(--color-google);
   border-color: var(--color-google);
   background: transparent;
}

section.authentication .or-signin .signin-with a.facebook {
   color: var(--color-white);
   border-color: var(--color-facebook);
   background: var(--color-facebook);
}

section.authentication .or-signin .signin-with a.facebook:hover {
   color: var(--color-facebook);
   border-color: var(--color-facebook);
   background: transparent;
}

section.authentication .or-signin .signin-with a.twitter {
   color: var(--color-white);
   border-color: var(--color-twitter);
   background: var(--color-twitter);
}

section.authentication .or-signin .signin-with a.twitter:hover {
   color: var(--color-twitter);
   border-color: var(--color-twitter);
   background: transparent;
}

section.authentication p.auth-help {
   text-align: center;
   margin-top: 30px;
   margin-bottom: 0;
}

section.authentication p.auth-help a {
   color: var(--color-primary);
   font-weight: 600;
}

/********************* [ 20. Footer ] **************************/

.footer {
   background-color: var(--color-black);
   color: var(--color-white);
}

#footer ul.list-inline.list-social {
   margin: 60px 0 30px;
}

.list-inline.list-social {
   padding: 0;
}

.list-inline {
   list-style: outside none none;
}

.footer .copyright {
   font-size: 16px;
   margin: 30px 0 0;
}

.footer a,
.footer p,
.footer li {
   border-color: var(--color-white);
   color: var(--color-white);
   line-height: 1.3;
}

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

/********************* [ 21. Back To Top ] **************************/

.scrollup {
   bottom: 40px;
   color: var(--color-primary-light);
   font-size: 42px;
   height: 40px;
   position: fixed;
   right: 22px;
   text-align: center;
   width: 40px;
   z-index: 999;
   display: none;
}

.scrollup:hover {
   color: var(--color-primary);
}

/********************* [ 22. Preloader ] **************************/

.preloader.flex-center {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--color-white);
   z-index: 111111;
}

.dots .dot {
   display: inline-block;
   width: 30px;
   height: 30px;
   margin: 0 10px 0 10px;
   border-radius: 50%;
   background: var(--color-primary);
   -webkit-animation: dot-dot-dot 1.4s linear infinite;
   animation: dot-dot-dot 1.4s linear infinite;
}

.dots .dot:nth-child(2) {
   animation-delay: 0.2s;
}

.dots .dot:nth-child(3) {
   animation-delay: 0.4s;
}

@keyframes dot-dot-dot {

   0%,
   60%,
   100% {
      -webkit-transform: initial;
      -ms-transform: initial;
      transform: initial;
   }

   30% {
      -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
      transform: translateY(-25px);
   }
}
/********* End Of Custom CSS *********/

.btn-new {
    background: var(--color-primary);
    color: var(--color-white) !important;
    text-decoration: none !important;
    padding: 15px 12px;
    border-radius: 0;
    line-height: 1.1;
    display: block;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 900;
}

.btn-new:hover {
    
  background: var(--color-primary-light);

}

.title h1 {
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
}

.phone {
    border: 2px solid var(--color-primary);
    border-radius: 0;
    padding: 0.5rem 0.75rem;
}

.phone:hover {
   background-color: var(--color-primary);
}

.phone a {
   text-decoration: none;
   color: black;
   font-size: 16px;
}