<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--================= Font Family =================-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat: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&display=swap" rel="stylesheet">
<!--================= Bootstrap =================-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--================= Font Awesome =================-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet">
<!--================= Slick Slider =================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<!--================= Css =================-->
<link href="css/slicknav.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="custom-loader"></div>
</div>
<!-- Responsive Sidebar -->
<div class="offcanvas-menu-overlay"></div>
<div class="offcanvas-menu-wrapper">
<div class="offcanvas__close">+</div>
<ul class="offcanvas__widget">
<li><span class="search-switch"><i class="fa-solid fa-magnifying-glass"></i></span></li>
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span>
<div class="tip">2</div>
</a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span>
<div class="tip">2</div>
</a></li>
</ul>
<div class="offcanvas__logo">
<a href="./index.html"><img src="images/logo.svg" alt="" class="img-fluid"></a>
</div>
<div id="mobile-menu-wrap"></div>
<div class="offcanvas__auth">
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</div>
<!-- Header -->
<header class="header">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xl-3 col-lg-2">
<div class="header__logo">
<a href="./index.html"><img src="images/logo.svg" alt=""></a>
</div>
</div>
<div class="col-xl-6 col-lg-7">
<nav class="header__menu">
<ul>
<li class="active"><a href="./index.html">Home</a></li>
<li><a href="#">Women’s</a></li>
<li><a href="#">Men’s</a></li>
<li><a href="#">Kid’s</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Pages</a>
<ul class="dropdown">
<li><a href="#">Pages 1</a></li>
<li><a href="#">Pages 2</a></li>
<li><a href="#">Pages 3</a></li>
<li><a href="#">Pages 4</a></li>
</ul>
</li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="col-lg-3">
<div class="header__right">
<div class="header__right__auth">
<a href="#">Login</a>
<a href="#">Register</a>
</div>
<ul class="header__right__widget">
<li><span class="search-switch"><i class="fa-solid fa-magnifying-glass"></i></span></li>
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span>
<div class="tip">2</div>
</a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span>
<div class="tip">2</div>
</a></li>
</ul>
</div>
</div>
</div>
<div class="canvas__open">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<!-- Banner -->
<section class="banner">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<div class="banner_img">
<div class="row h-100 align-items-center">
<div class="col-6">
<div class="banner_text">
<h1>Women’s fashion</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt cilisis.</p>
<a href="#">Shop now</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="banner_sm_img banner_sm_1">
<div class="row h-100 align-items-center">
<div class="col-6">
<div class="banner_text">
<h2>Men’s fashion</h2>
<p>159 items</p>
<a href="#">Shop now</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="banner_sm_img banner_sm_2">
<div class="row h-100 align-items-center">
<div class="col-6">
<div class="banner_text">
<h2>Kid’s fashion</h2>
<p>159 items</p>
<a href="#">Shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product -->
<section class="product spad">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="section-title">
<h4>New product</h4>
<a href="">Show all</a>
</div>
</div>
</div>
<div class="row property__gallery" id="">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p4.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p2.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p3.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Collection -->
<section class="collection spad">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="collection__slider">
<div class="collection__text">
<span>Men's Collection</span>
<h2>The Men's Jacket</h2>
<a href="#">Shop now</a>
</div>
<div class="collection__text">
<span>Men's Collection</span>
<h2>The Men's Shoes</h2>
<a href="#">Shop now</a>
</div>
<div class="collection__text">
<span>Men's Collection</span>
<h2>The Men's Jeans</h2>
<a href="#">Shop now</a>
</div>
<div class="collection__text">
<span>Men's Collection</span>
<h2>The Men's Jacket</h2>
<a href="#">Shop now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product -->
<section class="product spad">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="section-title">
<h4>Men's product</h4>
<a href="">Show all</a>
</div>
</div>
</div>
<div class="row property__gallery" id="">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/b.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/b2.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/b33.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/b5.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product -->
<section class="product">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="section-title">
<h4>Women's product</h4>
<a href="">Show all</a>
</div>
</div>
</div>
<div class="row property__gallery" id="">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p.jpg);">
<div class="label sale">sale</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p4.jpg);">
<div class="label sale">sale</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p2.jpg);">
<div class="label sale">sale</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/p3.jpg);">
<div class="label sale">Sale</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product -->
<section class="product spad">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="section-title">
<h4>Kid's product</h4>
<a href="">Show all</a>
</div>
</div>
</div>
<div class="row property__gallery" id="">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/k.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/k2.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/k.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product__item">
<div class="product__item__pic set-bg" style="background-image: url(images/k2.jpg);">
<div class="label new">New</div>
<ul class="product__hover">
<li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li>
<li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="#">Buttons tweed blazer</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">$ 59.0</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Instagram -->
<section class="instagram">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-4 p-0">
<div class="instagram__item set-bg" style="background-image: url(images/1.jpg);">
<div class="instagram__text">
<i class="fa-brands fa-instagram"></i>
<a href="#">@ ShopStop</a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 p-0">
<div class="instagram__item set-bg" style="background-image: url(images/2.jpg);">
<div class="instagram__text">
<i class="fa-brands fa-instagram"></i>
<a href="#">@ ShopStop</a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 p-0">
<div class="instagram__item set-bg" style="background-image: url(images/3.jpg);">
<div class="instagram__text">
<i class="fa-brands fa-instagram"></i>
<a href="#">@ ShopStop</a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 p-0">
<div class="instagram__item set-bg" style="background-image: url(images/4.jpg);">
<div class="instagram__text">
<i class="fa-brands fa-instagram"></i>
<a href="#">@ ShopStop</a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 p-0">
<div class="instagram__item set-bg" style="background-image: url(images/5.jpg);">
<div class="instagram__text">
<i class="fa-brands fa-instagram"></i>
<a href="#">@ ShopStop</a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 p-0">
<div class="instagram__item set-bg" style="background-image: url(images/6.jpg);">
<div class="instagram__text">
<i class="fa-brands fa-instagram"></i>
<a href="#">@ ShopStop</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section class="services spad">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="services__item">
<i class="fa fa-car"></i>
<h6>Free Shipping</h6>
<p>For all oder over $99</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="services__item">
<i class="fa-solid fa-money-bill"></i>
<h6>Money Back Guarantee</h6>
<p>If good have Problems</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="services__item">
<i class="fa-solid fa-headset"></i>
<h6>Online Support 24/7</h6>
<p>Dedicated support</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="services__item">
<i class="fa-solid fa-lock"></i>
<h6>Payment Secure</h6>
<p>100% secure payment</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-7">
<div class="footer__about">
<div class="footer__logo">
<a href="./index.html"><img src="images/logo.svg" alt="" class="img-fluid"></a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
cilisis.</p>
<div class="footer__payment">
<a href="#"><img src="img/payment/payment-1.png" alt=""></a>
<a href="#"><img src="img/payment/payment-2.png" alt=""></a>
<a href="#"><img src="img/payment/payment-3.png" alt=""></a>
<a href="#"><img src="img/payment/payment-4.png" alt=""></a>
<a href="#"><img src="img/payment/payment-5.png" alt=""></a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-5">
<div class="footer__widget">
<h6>Quick links</h6>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4">
<div class="footer__widget">
<h6>Account</h6>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Orders Tracking</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Wishlist</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-8 col-sm-8">
<div class="footer__newsletter">
<h6>NEWSLETTER</h6>
<form action="#">
<input type="text" placeholder="Email">
<button type="submit" class="site-btn">Subscribe</button>
</form>
<div class="footer__social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="footer__copyright__text">
<p>Copyright © 2022 All rights reserved</p>
</div>
</div>
</div>
</div>
</footer>
<!--================= Scripts =================-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/main.js"></script>
</body>
</html>
/*------------------------------------------------------------------
[Table of contents]
1. Template default CSS
2. Helper Css
3. Header Section
4. Categories Section
5. Product Section
6. Banner Section
7. Countdown Section
8. Instagram
9. Contact
10. Footer Style
-------------------------------------------------------------------*/
/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/
html,
body {
height: 100%;
font-family: "Montserrat", sans-serif;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: #111111;
font-weight: 400;
font-family: "Montserrat", sans-serif;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 14px;
font-family: "Montserrat", sans-serif;
color: #666666;
font-weight: 400;
line-height: 24px;
margin: 0 0 15px 0;
}
img {
max-width: 100%;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
outline: none;
}
a{
text-decoration: none;
outline: none;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
ul,
ol {
padding: 0;
margin: 0;
}
/*--------------------- Helper CSS -----------------------*/
.section-title {
margin-bottom: 45px;
display: flex;
align-items: center;
justify-content: space-between;
}
.section-title h4 {
color: #111111;
font-weight: 600;
text-transform: uppercase;
position: relative;
display: inline-block;
}
.section-title a {
font-size: 14px;
color: #ca1515;
text-transform: uppercase;
font-weight: 600;
position: relative;
padding: 0 0 3px;
display: inline-block;
text-decoration: none;
}
.section-title a:after {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #ca1515;
content: "";
}
.set-bg {
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.spad {
padding-top: 100px;
padding-bottom: 100px;
}
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
color: #fff;
}
/* buttons */
.primary-btn {
display: inline-block;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
padding: 12px 30px 10px;
color: #ffffff;
background: #ca1515;
}
.site-btn {
font-size: 14px;
color: #ffffff;
background: #ca1515;
font-weight: 600;
border: none;
text-transform: uppercase;
display: inline-block;
padding: 12px 30px;
border-radius: 0;
}
/* Preloder */
#preloder {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999999;
background: #ffffff;
}
.custom-loader {
width:12px;
height:12px;
position: relative;
}
.custom-loader::before,
.custom-loader::after {
content:"";
position: absolute;
inset:0;
border-radius:50%;
background:#ca1515;
}
.custom-loader::before {
box-shadow: -24px 0 #ca1515;
animation:d8-1 1s infinite linear;
}
.custom-loader::after {
transform: rotate(0deg) translateX(24px);
animation:d8-2 1s infinite linear;
}
.custom-loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
}
@keyframes d8-1 {
100%{transform:translateX(24px)}
}
@keyframes d8-2 {
100%{transform:rotate(-180deg) translateX(24px)}
}
.spacial-controls {
position: fixed;
width: 111px;
height: 91px;
top: 0;
right: 0;
z-index: 999;
}
.spacial-controls .search-switch {
display: block;
height: 100%;
padding-top: 30px;
background: #323232;
text-align: center;
cursor: pointer;
}
.search-model {
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #ffffff;
z-index: 99999;
}
.search-model-form {
padding: 0 15px;
}
.search-model-form input {
width: 500px;
font-size: 40px;
border: none;
border-bottom: 2px solid #dddddd;
background: 0 0;
color: #999;
}
.search-close-switch {
position: absolute;
width: 50px;
height: 50px;
background: #333;
color: #fff;
text-align: center;
border-radius: 50%;
font-size: 28px;
line-height: 28px;
top: 30px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
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;
}
/*----------------------------------------*/
/* Header CSS
/*----------------------------------------*/
.header {
background: #ffffff;
-webkit-box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
}
.header__logo {
padding: 26px 0;
}
.header__logo a {
display: inline-block;
}
.header__logo img{
max-width:125px;
}
.header__menu {
padding: 30px 0 27px;
text-align:center;
}
.header__menu ul li {
list-style: none;
display: inline-block;
margin-right: 40px;
position: relative;
}
.header__menu ul li.active a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__menu ul li:hover a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__menu ul li:hover .dropdown {
top: 27px;
opacity: 1;
visibility: visible;
}
.header__menu ul li:last-child {
margin-right: 0;
}
.header__menu ul li .dropdown {
position: absolute;
left: 0;
top: 56px;
width: 150px;
background: #111111;
text-align: left;
padding: 2px 0;
z-index: 9;
opacity: 0;
visibility: hidden;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.header__menu ul li .dropdown li {
display: block;
margin-right: 0;
}
.header__menu ul li .dropdown li a {
font-size: 14px;
color: #ffffff;
font-weight: 400;
padding: 8px 20px;
text-transform: capitalize;
}
.header__menu ul li .dropdown li a:after {
display: none;
}
.header__menu ul li a {
font-size: 15px;
text-transform: uppercase;
color: #111111;
font-weight: 500;
display: block;
padding: 2px 0;
position: relative;
text-decoration:none;
}
.header__menu ul li a:after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #ca1515;
content: "";
-webkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.header__right {
text-align: right;
padding: 30px 0 27px;
}
.header__right__auth {
display: inline-block;
margin-right: 25px;
}
.header__right__auth a {
font-size: 15px;
color: #111111;
position: relative;
margin-right: 8px;
text-decoration: none;
font-weight: 500;
}
.header__right__auth a:last-child {
margin-right: 0;
}
.header__right__auth a:last-child:after {
display: none;
}
.header__right__auth a:after {
position: absolute;
right: -8px;
top: -2px;
content: "/";
font-size: 15px;
}
.header__right__widget {
display: inline-block;
}
.header__right__widget li {
list-style: none;
display: inline-block;
font-size: 18px;
color: #111111;
margin-right: 20px;
cursor: pointer;
}
.header__right__widget li:last-child {
margin-right: 0;
}
.header__right__widget li a {
font-size: 18px;
color: #111111;
position: relative;
}
.header__right__widget li a .tip {
position: absolute;
right: -5px;
top: -11px;
height: 18px;
width: 18px;
background: #ca1515;
font-size: 10px;
font-weight: 500;
color: #ffffff;
line-height: 18px;
text-align: center;
border-radius: 50%;
}
.offcanvas-menu-wrapper {
display: none;
}
.canvas__open {
display: none;
}
/*--------------------------------- Banner css -----------------------------*/
.banner_img {
background-image: url('../images/category-1.png');
background-size: cover;
height: 638px;
padding-left: 70px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
margin-bottom: 30px;
}
.banner_text h1 {
font-family: "Cookie", cursive;
color: #111111;
margin-bottom: 5px;
}
.banner_text p {
margin-bottom: 15px;
}
.banner_text a {
font-size: 14px;
color: #111111;
text-transform: uppercase;
font-weight: 600;
position: relative;
padding: 0 0 3px;
display: inline-block;
text-decoration:none;
}
.banner_text a:after {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #ca1515;
content: "";
}
.banner {
margin-top: 30px;
}
.banner_sm_1{
background-image: url('../images/category-12.png');
}
.banner_sm_2{
background-image: url('../images/kid.png');
}
.banner_sm_img{
background-size: cover;
height: 314px;
padding-left: 70px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
margin-bottom: 0;
}
.banner_sm_img h2 {
font-family: "Cookie", cursive;
color: #111111;
margin-bottom: 0;
font-size: 28px;
}
.banner_sm_img p {
margin-bottom: 10px;
}
/*--------------------------------- product css -----------------------------*/
.product__item:hover .product__hover li {
opacity: 1;
top: 0;
}
.product__item.sale .product__item__pic .label {
background: #ca1515;
}
.product__item.sale .product__item__text .product__price {
color: #ca1515;
}
.product__item__pic {
height: 360px;
position: relative;
overflow: hidden;
}
.product__item__pic .label {
font-size: 12px;
color: #ffffff;
font-weight: 500;
display: inline-block;
padding: 2px 8px;
text-transform: uppercase;
position: absolute;
right: 10px;
top: 10px;
}
.product__item__pic .label.new {
background: #36a300;
}
.product__item__pic .label.stockout {
background: #111111;
}
.product__item__pic .label.stockblue {
background: #0066bd !important;
}
.product__item__pic .label.sale {
background: #ca1515;
}
.product__hover {
position: absolute;
left: 0;
width: 100%;
bottom: 30px;
text-align: center;
}
.product__hover li {
list-style: none;
display: inline-block;
margin-right: 10px;
position: relative;
top: 100px;
opacity: 0;
}
.product__hover li:nth-child(1) {
-webkit-transition: all 0.4s ease 0.1s;
-o-transition: all 0.4s ease 0.1s;
transition: all 0.4s ease 0.1s;
}
.product__hover li:nth-child(2) {
-webkit-transition: all 0.4s ease 0.15s;
-o-transition: all 0.4s ease 0.15s;
transition: all 0.4s ease 0.15s;
}
.product__hover li:nth-child(3) {
-webkit-transition: all 0.4s ease 0.2s;
-o-transition: all 0.4s ease 0.2s;
transition: all 0.4s ease 0.2s;
}
.product__hover li:last-child {
margin-right: 0;
}
.product__hover li:hover a {
background: #ca1515;
}
.product__hover li:hover a span {
color: #ffffff;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.product__hover li a {
font-size: 18px;
color: #111111;
display: block;
height: 45px;
width: 45px;
background: #ffffff;
line-height: 48px;
text-align: center;
border-radius: 50%;
-webkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
}
.product__hover li a span {
position: relative;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
display: inline-block;
}
.product__item__text {
text-align: center;
padding-top: 22px;
}
.product__item__text h6 a {
font-size: 14px;
color: #111111;
font-weight:500;
}
.product__item__text .rating {
line-height: 18px;
margin-bottom: 5px;
}
.product__item__text .rating i {
font-size: 10px;
color: #e3c01c;
margin-right: -4px;
}
.product__item__text .rating i:last-child {
margin-right: 0;
}
.product__item__text .product__price {
color: #111111;
font-weight: 600;
}
.product__item__text .product__price span {
font-size: 14px;
color: #b1b0b0;
text-decoration: line-through;
margin-left: 4px;
}
/*--------------------------------- Banner css -----------------------------*/
.collection {
background-color: #f4f4f4;
}
.collection__text span {
font-size: 18px;
color: #ca1515;
text-transform: uppercase;
}
.collection__text {
text-align: center;
}
.collection__text h2 {
font-size: 80px;
color: #111111;
font-family: "Cookie", cursive;
margin-bottom: 15px;
}
.collection__text a {
font-size: 14px;
color: #111111;
text-transform: uppercase;
font-weight: 700;
position: relative;
padding: 0 0 3px;
display: inline-block;
}
.collection__text a:after {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #ca1515;
content: "";
}
.collection__slider .slick-dots {
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
margin-top: 25px;
}
.collection__slider .slick-dots li {
margin: 0 0.25rem;
}
.collection__slider .slick-dots button {
display: block;
width: 0.6rem;
height: 0.6rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: #ddd;
text-indent: -9999px;
}
.collection__slider .slick-dots li.slick-active button {
background-color: #ca1515;
}
/*--------------------- Instagram -----------------------*/
.instagram__item {
height: 320px;
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;
position: relative;
z-index: 1;
}
.instagram__item:hover:after {
opacity: 1;
}
.instagram__item:hover .instagram__text {
opacity: 1;
visibility: visible;
}
.instagram__item:after {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.9);
content: "";
opacity: 0;
z-index: -1;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.instagram__text {
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.instagram__text i {
font-size: 30px;
color: #0d0d0d;
}
.instagram__text a {
font-size: 16px;
color: #0d0d0d;
font-weight: 500;
display: block;
margin-top: 10px;
}
/*--------------------- Breadcrumb -----------------------*/
.breadcrumb-option {
padding-top: 100px;
background: #f4f4f4;
padding-bottom: 100px;
}
.breadcrumb__links a {
font-size: 15px;
font-weight: 500;
color: #ca1515;
margin-right: 18px;
display: inline-block;
position: relative;
}
.breadcrumb__links a:after {
position: absolute;
right: -14px;
top: 0;
content: "";
font-family: "FontAwesome";
}
.breadcrumb__links a i {
margin-right: 5px;
}
.breadcrumb__links span {
font-size: 15px;
font-weight: 500;
color: #888888;
display: inline-block;
}
/*--------------------- Categories -----------------------*/
.categories {
overflow: hidden;
margin-top: 10px;
}
.categories .container-fluid {
padding-right: 5px;
}
.categories__item {
height: 314px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 30px;
margin-bottom: 10px;
margin-right: 10px;
}
.categories__item.categories__large__item {
height: 638px;
padding-left: 70px;
}
.categories__item.categories__large__item .categories__text {
max-width: 480px;
}
.categories__item.categories__large__item .categories__text p {
margin-bottom: 15px;
}
.categories__text h1 {
font-family: "Cookie", cursive;
color: #111111;
margin-bottom: 5px;
}
.categories__text h4 {
color: #111111;
font-weight: 700;
}
.categories__text p {
margin-bottom: 10px;
}
.categories__text a {
font-size: 14px;
color: #111111;
text-transform: uppercase;
font-weight: 600;
position: relative;
padding: 0 0 3px;
display: inline-block;
}
.categories__text a:after {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #ca1515;
content: "";
}
/*--------------------- Shop -----------------------*/
.shop {
padding-top: 70px;
padding-bottom: 80px;
}
.sidebar__categories {
margin-bottom: 50px;
}
.sidebar__categories .section-title {
margin-bottom: 35px;
}
.sidebar__categories .section-title h4 {
font-size: 18px;
}
.categories__accordion .card {
border: none;
border-radius: 0;
padding-bottom: 12px;
border-bottom: 1px solid #f2f2f2 !important;
margin-bottom: 12px;
}
.categories__accordion .accordion-header.active .accordion-button {
background-color: #fff;
color: #111;
}
.categories__accordion .accordion-button {
color: #111;
font-size:14px;
outline:0;
box-shadow:none;
}
.categories__accordion .accordion-item {
background-color: #fff;
border-bottom: 1px solid rgba(0,0,0,.125) !important;
border: none;
}
.categories__accordion .accordion-button:not(.collapsed) {
color: #111;
background-color: #fff;
}
.categories__accordion .accordion-button::after {
width: 0.75rem;
height: 0.75rem;
background-size: 0.75rem;
}
.categories__accordion .card:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none !important;
}
.categories__accordion .card-heading {
cursor: pointer;
}
.categories__accordion .card-heading a {
font-size: 14px;
font-weight: 500;
color: #111111;
display: block;
}
.categories__accordion .card-body {
padding-left: 0;
padding-top: 6px;
padding-bottom: 0;
}
.categories__accordion .card-body li {
list-style: none;
position: relative;
padding-left: 16px;
}
.categories__accordion .card-body li:before {
position: absolute;
left: 4px;
top: 14px;
height: 1px;
width: 4px;
background: #666666;
content: "";
}
.categories__accordion .card-body li a {
font-size: 14px;
color: #666666;
line-height: 30px;
}
.categories__accordion .card-heading a:after,
.categories__accordion .card-heading>a.active[aria-expanded=false]:after {
content: "";
font-size: 14px;
font-family: "FontAwesome";
color: #666666;
position: absolute;
right: 30px;
top: 0px;
}
.categories__accordion .card-heading.active a:after {
content: "";
font-size: 14px;
font-family: "FontAwesome";
color: #666666;
position: absolute;
right: 30px;
top: -1px;
}
.categories__accordion .card-heading a[aria-expanded=true]:after,
.categories__accordion .card-heading>a.active:after {
content: "";
font-size: 14px;
font-family: "FontAwesome";
color: #666666;
position: absolute;
right: 30px;
top: -1px;
}
.sidebar__filter {
position: relative;
margin-bottom: 60px;
}
.sidebar__filter .section-title {
margin-bottom: 50px;
}
.sidebar__filter .section-title h4 {
font-size: 18px;
}
.sidebar__filter a {
font-size: 14px;
color: #0d0d0d;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
display: inline-block;
padding: 5px 16px 5px 24px;
border: 2px solid #ca1515;
position: absolute;
right: 0;
bottom: -5px;
border-radius: 2px;
}
.filter-range-wrap .range-slider .price-input {
position: relative;
}
.filter-range-wrap .range-slider .price-input p {
font-size: 16px;
color: #0d0d0d;
font-weight: 500;
display: inline-block;
margin-bottom: 0;
}
.filter-range-wrap .range-slider .price-input:after {
position: absolute;
left: 81px;
top: 12px;
height: 1px;
width: 5px;
background: #0d0d0d;
content: "";
}
.filter-range-wrap .range-slider .price-input input {
font-size: 16px;
color: #0d0d0d;
max-width: 16%;
border: none;
}
.filter-range-wrap .range-slider .price-input input:nth-child(1) {
margin-right: 28px;
}
.filter-range-wrap .price-range {
border-radius: 0;
margin-bottom: 28px;
}
.filter-range-wrap .price-range.ui-widget-content {
border: none;
background: rgba(0, 0, 0, 0.1);
height: 5px;
}
.filter-range-wrap .price-range.ui-widget-content .ui-slider-handle {
height: 14px;
width: 14px;
border-radius: 50%;
background: #ca1515;
border: none;
outline: none;
cursor: pointer;
}
.filter-range-wrap .price-range .ui-slider-range {
background: #ca1515;
border-radius: 0;
}
.sidebar__sizes,
.sidebar__color {
margin-bottom: 40px;
}
.sidebar__sizes .section-title,
.sidebar__color .section-title {
margin-bottom: 35px;
}
.sidebar__sizes .section-title h4,
.sidebar__color .section-title h4 {
font-size: 18px;
}
.sidebar__sizes .size__list label,
.sidebar__color .size__list label {
display: block;
padding-left: 30px;
font-size: 14px;
text-transform: uppercase;
color: #444444;
position: relative;
cursor: pointer;
margin-bottom: 5px;
}
.sidebar__sizes .size__list label input,
.sidebar__color .size__list label input {
position: absolute;
visibility: hidden;
}
.sidebar__sizes .size__list label input:checked~.checkmark,
.sidebar__color .size__list label input:checked~.checkmark {
border-color: #ca1515;
}
.sidebar__sizes .size__list label input:checked~.checkmark:after,
.sidebar__color .size__list label input:checked~.checkmark:after {
border-color: #ca1515;
opacity: 1;
}
.sidebar__sizes .size__list label .checkmark,
.sidebar__color .size__list label .checkmark {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border: 1px solid #444444;
border-radius: 2px;
}
.sidebar__sizes .size__list label .checkmark:after,
.sidebar__color .size__list label .checkmark:after {
position: absolute;
left: 3px;
top: 5px;
width: 11px;
height: 5px;
border: solid #ffffff;
border-width: 1.5px 1.5px 0px 0px;
-webkit-transform: rotate(127deg);
-ms-transform: rotate(127deg);
transform: rotate(127deg);
opacity: 0;
content: "";
}
.sidebar__color .color__list label {
text-transform: capitalize;
}
.shop .product__item{
margin-bottom:30px;
}
.pagination__option a {
display: inline-block;
height: 40px;
width: 40px;
border: 1px solid #f2f2f2;
border-radius: 0;
font-size: 14px;
color: #111111;
font-weight: 600;
line-height: 40px;
text-align: center;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
margin-right: 6px;
}
.pagination__option a:last-child {
margin-right: 0;
}
.pagination__option a i {
font-weight: 600;
}
.pagination__option a:hover {
background: #ca1515;
border-color: #ca1515;
color: #ffffff;
}
/*---------------------
Services
-----------------------*/
.services {
padding-top: 80px;
padding-bottom: 50px;
}
.services__item {
padding-left: 65px;
position: relative;
margin-bottom: 20px;
}
.services__item i {
font-size: 36px;
color: #ca1515;
position: absolute;
left: 0;
top: 4px;
}
.services__item h6 {
color: #111111;
font-weight: 600;
margin-bottom: 5px;
}
.services__item p {
margin-bottom: 0;
}
/*---------------------
Contact
-----------------------*/
.contact {
padding-top: 80px;
padding-bottom: 80px;
}
.contact__address {
margin-bottom: 45px;
}
.contact__address h5 {
color: #111111;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 20px;
}
.contact__address ul li {
list-style: none;
position: relative;
margin-bottom: 20px;
}
.contact__address ul li:last-child {
margin-bottom: 0;
}
.contact__address ul li h6 {
color: #111111;
font-weight: 600;
margin-bottom: 10px;
}
.contact__address ul li h6 i {
font-size: 16px;
color: #ca1515;
margin-right: 5px;
}
.contact__address ul li p {
margin-bottom: 0;
font-size: 15px;
color: #444444;
}
.contact__address ul li span {
font-size: 15px;
color: #444444;
display: inline-block;
margin-right: 25px;
position: relative;
}
.contact__address ul li span:after {
position: absolute;
right: -15px;
top: 11px;
content: "|";
line-height: 0;
}
.contact__address ul li span:last-child {
margin-right: 0;
}
.contact__address ul li span:last-child:after {
display: none;
}
.contact__form h5 {
color: #111111;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 35px;
}
.contact__form form input {
height: 50px;
width: 100%;
padding-left: 20px;
font-size: 14px;
color: #444444;
border: 1px solid #e1e1e1;
border-radius: 0;
margin-bottom: 20px;
}
.contact__form form input::-webkit-input-placeholder {
color: #444444;
}
.contact__form form input::-moz-placeholder {
color: #444444;
}
.contact__form form input:-ms-input-placeholder {
color: #444444;
}
.contact__form form input::-ms-input-placeholder {
color: #444444;
}
.contact__form form input::placeholder {
color: #444444;
}
.contact__form form textarea {
height: 130px;
width: 100%;
padding-left: 20px;
padding-top: 12px;
font-size: 14px;
color: #444444;
border: 1px solid #e1e1e1;
border-radius: 0;
margin-bottom: 14px;
resize: none;
}
.contact__form form textarea::-webkit-input-placeholder {
color: #444444;
}
.contact__form form textarea::-moz-placeholder {
color: #444444;
}
.contact__form form textarea:-ms-input-placeholder {
color: #444444;
}
.contact__form form textarea::-ms-input-placeholder {
color: #444444;
}
.contact__form form textarea::placeholder {
color: #444444;
}
.contact__map {
height: 480px;
margin-top:50px;
}
.contact__map iframe {
width: 100%;
}
/*--------------------- Footer -----------------------*/
.footer {
padding-top: 55px;
background-color: #f4f4f4;
}
.footer__about {
margin-bottom: 30px;
}
.footer__about p {
margin-bottom: 20px;
}
.footer__logo {
margin-bottom: 20px;
}
.footer__logo img{
max-width:125px;
}
.footer__payment a {
margin-right: 6px;
margin-bottom: 10px;
display: inline-block;
}
.footer__payment a:last-child {
margin-right: 0;
}
.footer__widget {
margin-bottom: 30px;
}
.footer__widget h6 {
color: #111111;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 12px;
}
.footer__widget ul li {
list-style: none;
}
.footer__widget ul li a {
font-size: 14px;
color: #666666;
line-height: 30px;
}
.footer__newsletter {
margin-bottom: 30px;
}
.footer__newsletter h6 {
color: #111111;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 25px;
}
.footer__newsletter form {
position: relative;
margin-bottom: 30px;
}
.footer__newsletter form input {
height: 52px;
width: 100%;
border: 1px solid #e1e1e1;
border-radius: 0;
padding-left: 15px;
font-size: 14px;
color: #666666;
}
.footer__newsletter form input::-webkit-input-placeholder {
color: #666666;
}
.footer__newsletter form input::-moz-placeholder {
color: #666666;
}
.footer__newsletter form input:-ms-input-placeholder {
color: #666666;
}
.footer__newsletter form input::-ms-input-placeholder {
color: #666666;
}
.footer__newsletter form input::placeholder {
color: #666666;
}
.footer__newsletter form button {
position: absolute;
right: 4px;
top: 4px;
}
.footer__social a {
display: inline-block;
height: 40px;
width: 40px;
background: #e1e1e1;
font-size: 15px;
color: #111111;
line-height: 41px;
text-align: center;
border-radius: 50%;
margin-right: 6px;
margin-bottom: 5px;
}
.footer__social a:last-child {
margin-right: 0;
}
.footer__copyright__text {
border-top: 1px solid #e1e1e1;
padding: 18px 0 25px;
text-align: center;
margin-top: 35px;
}
.footer__copyright__text p {
margin-bottom: 0;
}
.footer__copyright__text a {
color: #5C5C5C;
}
.footer__copyright__text i {
color: #ca1515;
}
.footer__copyright__text a:hover {
color: #ca1515;
}
/*--------------------------------- Responsive Media Quaries -----------------------------*/
@media only screen and (min-width: 1600px) and (max-width: 1900px) {
.header {
padding: 0 85px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
.header__menu ul li {
margin-right: 20px;
}
.header {
padding: 0 30px;
}
}
@media only screen and (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
/* Medium Device 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header__menu ul li {
margin-right: 20px;
}
.header__right__auth {
margin-right: 5px;
}
.sidebar__filter a {
padding: 5px 15px 5px 15px;
}
.nav::before {
width: 240px;
}
.nav::after {
width: 240px;
}
}
/* Tablet Device 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.spad {
padding-top: 50px;
padding-bottom: 50px;
}
.filter__controls li {
margin-right: 15px;
}
.discount__pic img {
height: auto;
}
.discount__text {
height: auto;
}
.sidebar__filter a {
position: relative;
bottom: 0;
}
.filter-range-wrap .range-slider .price-input input {
max-width: 27%;
}
.filter-range-wrap .range-slider .price-input {
margin-bottom: 20px;
}
.product__details__pic {
margin-bottom: 50px;
}
.nav::before {
width: 125px;
}
.nav::after {
width: 125px;
}
.discount__content {
margin-bottom: 40px;
}
.checkout__order {
margin-top: 20px;
}
.blog__sidebar {
padding-left: 0;
}
.canvas__open {
display: block;
font-size: 22px;
color: #ca1515;
height: 35px;
width: 35px;
line-height: 35px;
text-align: center;
border: 1px solid #ca1515;
border-radius: 2px;
cursor: pointer;
position: absolute;
right: 15px;
top: 24px;
}
.offcanvas-menu-overlay {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
content: "";
z-index: 98;
-webkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
visibility: hidden;
}
.offcanvas-menu-overlay.active {
visibility: visible;
}
.offcanvas-menu-wrapper {
position: fixed;
left: -300px;
width: 300px;
height: 100%;
background: #ffffff;
padding: 90px 20px 30px 30px;
display: block;
z-index: 99;
overflow-y: auto;
-webkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
opacity: 0;
}
.offcanvas-menu-wrapper.active {
opacity: 1;
left: 0;
}
.offcanvas__close {
position: absolute;
width: 40px;
height: 40px;
right: 30px;
top: 25px;
border: 1px solid #ddd;
border-radius: 50%;
font-size: 26px;
text-align: center;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
}
.offcanvas__menu {
display: none;
}
.slicknav_btn {
display: none;
}
.slicknav_menu {
background: transparent;
padding: 0;
margin-bottom: 20px;
}
.slicknav_nav ul {
margin: 0;
}
.slicknav_nav .slicknav_row,
.slicknav_nav a {
padding: 7px 0;
margin: 0;
color: #111111;
font-weight: 600;
}
.slicknav_nav .slicknav_row:hover {
border-radius: 0;
background: transparent;
color: #111111;
}
.slicknav_nav a:hover {
border-radius: 0;
background: transparent;
color: #111111;
}
.slicknav_nav {
display: block !important;
}
.offcanvas__logo {
margin-bottom: 25px;
}
.offcanvas__widget {
text-align: center;
margin-bottom: 20px;
}
.offcanvas__widget li {
list-style: none;
display: inline-block;
font-size: 18px;
color: #111111;
margin-right: 20px;
cursor: pointer;
}
.offcanvas__widget li:last-child {
margin-right: 0;
}
.offcanvas__widget li a {
font-size: 18px;
color: #111111;
position: relative;
}
.offcanvas__widget li a .tip {
position: absolute;
right: -12px;
top: -11px;
height: 18px;
width: 18px;
background: #111111;
font-size: 10px;
font-weight: 500;
color: #ffffff;
line-height: 18px;
text-align: center;
border-radius: 50%;
}
.offcanvas__auth a {
font-size: 15px;
color: #111111;
position: relative;
margin-right: 8px;
font-weight: 500;
}
.offcanvas__auth a:last-child {
margin-right: 0;
}
.offcanvas__auth a:last-child:after {
display: none;
}
.offcanvas__auth a:after {
position: absolute;
right: -8px;
top: -2px;
content: "/";
font-size: 13px;
}
.header__menu {
display: none;
}
.header__right {
display: none;
}
.banner_img {
height: 475px;
}
.banner_text h1 {
font-size: 38px;
}
.banner_sm_img {
margin-bottom: 30px;
}
.banner_sm_img.banner_sm_2 {
margin: 0;
}
.product__item {
margin-bottom: 30px;
}
.collection__text h2 {
font-size: 60px;
}
}
/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
.spad {
padding-top: 50px;
padding-bottom: 50px;
}
.canvas__open {
display: block;
font-size: 22px;
color: #ca1515;
height: 35px;
width: 35px;
line-height: 35px;
text-align: center;
border: 1px solid #ca1515;
border-radius: 2px;
cursor: pointer;
position: absolute;
right: 15px;
top: 24px;
}
.offcanvas-menu-overlay {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
content: "";
z-index: 98;
-webkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
visibility: hidden;
}
.offcanvas-menu-overlay.active {
visibility: visible;
}
.offcanvas-menu-wrapper {
position: fixed;
left: -270px;
width: 270px;
height: 100%;
background: #ffffff;
padding: 90px 20px 30px 30px;
display: block;
z-index: 99;
overflow-y: auto;
-webkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
opacity: 0;
}
.offcanvas-menu-wrapper.active {
opacity: 1;
left: 0;
}
.offcanvas__close {
position: absolute;
width: 40px;
height: 40px;
right: 30px;
top: 25px;
border: 1px solid #ddd;
border-radius: 50%;
font-size: 26px;
text-align: center;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
}
.offcanvas__menu {
display: none;
}
.slicknav_btn {
display: none;
}
.slicknav_menu {
background: transparent;
padding: 0;
margin-bottom: 20px;
}
.slicknav_nav ul {
margin: 0;
}
.slicknav_nav .slicknav_row,
.slicknav_nav a {
padding: 7px 0;
margin: 0;
color: #111111;
font-weight: 600;
}
.slicknav_nav .slicknav_row:hover {
border-radius: 0;
background: transparent;
color: #111111;
}
.slicknav_nav a:hover {
border-radius: 0;
background: transparent;
color: #111111;
}
.slicknav_nav {
display: block !important;
}
.offcanvas__logo {
margin-bottom: 25px;
}
.offcanvas__logo img{
max-width: 125px;
}
.offcanvas__widget {
text-align: center;
margin-bottom: 20px;
}
.offcanvas__widget li {
list-style: none;
display: inline-block;
font-size: 18px;
color: #111111;
margin-right: 20px;
cursor: pointer;
}
.offcanvas__widget li:last-child {
margin-right: 0;
}
.offcanvas__widget li a {
font-size: 18px;
color: #111111;
position: relative;
}
.offcanvas__widget li a .tip {
position: absolute;
right: -12px;
top: -11px;
height: 18px;
width: 18px;
background: #ca1515;
font-size: 10px;
font-weight: 500;
color: #ffffff;
line-height: 18px;
text-align: center;
border-radius: 50%;
}
.offcanvas__auth a {
font-size: 15px;
color: #111111;
position: relative;
margin-right: 8px;
font-weight: 500;
}
.offcanvas__auth a:last-child {
margin-right: 0;
}
.offcanvas__auth a:last-child:after {
display: none;
}
.offcanvas__auth a:after {
position: absolute;
right: -8px;
top: -2px;
content: "/";
font-size: 13px;
}
.header__menu {
display: none;
}
.header__right {
display: none;
}
.filter__controls {
text-align: left;
margin-bottom: 40px;
}
.filter__controls li {
margin-right: 20px;
}
.discount__pic img {
height: auto;
}
.discount__text {
padding: 75px 40px 50px;
height: auto;
}
.product__details__pic__left {
height: auto;
}
.product__details__pic {
margin-bottom: 30px;
}
.quantity {
float: none;
margin-right: 0;
}
.nav::before {
display: none;
}
.nav::after {
display: none;
}
.header__menu {
display: none;
}
.header__right {
display: none;
}
.banner_img {
height: 350px;
padding-left: 35px;
margin-bottom: 15px;
}
.banner_text h1 {
font-size: 28px;
}
.banner_sm_img {
padding-left: 35px;
margin-bottom: 15px;
}
.banner_sm_img.banner_sm_2 {
margin: 0;
}
.product__item {
margin-bottom: 30px;
}
.collection__text h2 {
font-size: 40px;
}
}
/* Small Device = 320px */
@media only screen and (max-width: 479px) {
.search-model-form input {
width: 100%;
font-size: 24px;
}
}
/*------------------
Preloader
--------------------*/
$(window).on('load', function () {
$(".custom-loader").fadeOut();
$("#preloder").delay(200).fadeOut("slow");
});
/*------------------
collection__slider
--------------------*/
$('.collection__slider').slick({
dots: true,
arrows: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
/*------------------
Canvas Menu
--------------------*/
$(".canvas__open").on('click', function () {
$(".offcanvas-menu-wrapper").addClass("active");
$(".offcanvas-menu-overlay").addClass("active");
});
$(".offcanvas-menu-overlay, .offcanvas__close").on('click', function () {
$(".offcanvas-menu-wrapper").removeClass("active");
$(".offcanvas-menu-overlay").removeClass("active");
});
/*------------------
Navigation
--------------------*/
$(".header__menu").slicknav({
prependTo: '#mobile-menu-wrap',
allowParentLinks: true
});
//Search Switch
$('.search-switch').on('click', function () {
$('.search-model').fadeIn(400);
});
$('.search-close-switch').on('click', function () {
$('.search-model').fadeOut(400, function () {
$('#search-input').val('');
});
});
/*-------------------
Range Slider
--------------------- */
var rangeSlider = $(".price-range"),
minamount = $("#minamount"),
maxamount = $("#maxamount"),
minPrice = rangeSlider.data('min'),
maxPrice = rangeSlider.data('max');
rangeSlider.slider({
range: true,
min: minPrice,
max: maxPrice,
values: [minPrice, maxPrice],
slide: function (event, ui) {
minamount.val('$' + ui.values[0]);
maxamount.val('$' + ui.values[1]);
}
});
minamount.val('$' + rangeSlider.slider("values", 0));
maxamount.val('$' + rangeSlider.slider("values", 1));
/*------------------
Accordin Active
--------------------*/
$('.collapse').on('shown.bs.collapse', function () {
$(this).prev().addClass('active');
});
$('.collapse').on('hidden.bs.collapse', function () {
$(this).prev().removeClass('active');
});
