Server : ApacheSystem : Linux host44.registrar-servers.com 4.18.0-513.18.1.lve.2.el8.x86_64 #1 SMP Sat Mar 30 15:36:11 UTC 2024 x86_64 User : vapecompany ( 2719) PHP Version : 7.4.33 Disable Function : NONE Directory : /home/vapecompany/demo.vapecompany.com.bd/public/frontend/styles/ |
Upload File : |
@charset "utf-8";
/* CSS Document */
/******************************
[Table of Contents]
1. Fonts
2. Body and some general stuff
3. Header
3.1 Top Bar
3.2 Header Main
3.3 Main Navigation
3.4 Page responsieve Menu
4. Banner
5. Characteristics
15. Brands
16. Newsletter
17. Footer
/***********
1. Fonts
***********/
@import url('https://fonts.googleapis.com/css?family=poppins:300,400,500,600,700,800,900|Rubik:300,400,500,700,900');
/*********************************
2. Body and some general stuff
*********************************/
:root {
--colp: #263995;
}
*
{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 400;
background: #FFFFFF;
color: #000000;
}
div
{
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style: none;
margin-bottom: 0px;
}
p
{
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
font-weight: 400;
color: #828282;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
display: inline;
position: relative;
color: inherit;
border-bottom: solid 1px #ffa07f;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
position: relative;
color: #FF6347;
}
p a:hover
{
color: #FFFFFF;
background: #ffa07f;
}
p a:hover::after
{
opacity: 0.2;
}
::selection
{
}
p::selection
{
}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 16px;}
h1, h2, h3, h4, h5, h6
{
font-family: 'Poppins', sans-serif;
font-weight: 500;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection
{
}
.center-section {
margin: auto;
max-width: 1400px;
}
.center-section-flex {
display: flex;
justify-content: space-between;
}
.divider {
border-top: 5px solid var(--colp);
border-radius: 5px;
margin-top: 50px;
margin-bottom: 50px;
}
.form-control
{
color: #000000;
margin-top: 10px;
margin-bottom: 10px;
}
.border-btn {
border: 1px solid #fff;
}
section
{
display: block;
position: relative;
box-sizing: border-box;
}
.clear
{
clear: both;
}
.clearfix::before, .clearfix::after
{
content: "";
display: table;
}
.clearfix::after
{
clear: both;
}
.clearfix
{
zoom: 1;
}
.float_left
{
float: left;
}
.float_right
{
float: right;
}
.trans_200
{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.trans_300
{
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.trans_400
{
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.trans_500
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.fill_height
{
height: 100%;
}
.super_container
{
width: 100%;
overflow: hidden;
}
.prlx_parent
{
overflow: hidden;
}
.prlx
{
height: 130% !important;
}
.nopadding
{
padding: 0px !important;
}
.button
{
display: inline-block;
background: var(--colp);
border-radius: 5px;
height: 48px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.button a
{
display: block;
font-size: 18px;
font-weight: 400;
line-height: 48px;
color: #FFFFFF;
padding-left: 35px;
padding-right: 35px;
}
.button:hover
{
opacity: 0.8;
}
/*********************************
3. Container
*********************************/
.container {
max-width: 1400px;
}
/*********************************
3. Header
*********************************/
.header
{
position: relative;
width: 100%;
z-index: 10;
}
/*********************************
3.1 Top Bar
*********************************/
.top_bar
{
width: 100%;
height: 36px;
background: var(--colp);
border-bottom: solid 1px rgba(0,0,0,0.05);
z-index: 2;
}
.header.scrolled .top_bar
{
display: none;
}
.top_bar_contact
{
display: inline-block;
}
.top_bar_contact_item
{
font-size: 16px;
font-weight: 300;
line-height: 36px;
margin-right: 40px;
}
.top_bar_contact_item:not(:first-child)
{
margin-right: 0px;
}
.top_bar_contact_item a
{
font-size: 16px;
font-weight: 300;
line-height: 36px;
color: rgb(255, 255, 255);
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.top_bar_contact_item a:hover
{
color: #8a8a8a;
}
.top_bar_contact_item:last-child
{
margin-right: 0px;
}
.top_bar_icon
{
display: inline-block;
margin-right: 16px;
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
}
.top_bar_menu
{
display: inline-block;
}
.top_bar_dropdown li
{
padding-left: 13px;
padding-right: 13px;
}
.standard_dropdown li
{
display: inline-block;
position: relative;
height: 56px;
}
.standard_dropdown li li
{
display: block;
width: 100%;
}
.standard_dropdown li li a
{
display: block;
width: 100%;
border-bottom: solid 1px #f2f2f2;
font-size: 16px;
color: #000;
}
.standard_dropdown li:last-child a
{
border-bottom: none;
}
.standard_dropdown li.hassubs > a i
{
display: inline-block;
margin-left: 5px;
}
.standard_dropdown li a
{
display: block;
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
line-height: 56px;
white-space: nowrap;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.standard_dropdown li a:hover
{
color: var(--colp);
}
.standard_dropdown li a i
{
display: none;
-webkit-transform: translateY(-1px);
-moz-transform: translateY(-1px);
-ms-transform: translateY(-1px);
-o-transform: translateY(-1px);
transform: translateY(-1px);
font-size: 12px;
}
.standard_dropdown li ul
{
display: block;
position: absolute;
top: 120%;
left: 0;
width: auto;
visibility: hidden;
opacity: 0;
background: #FFFFFF;
box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: all 0.3s ease;
z-index: 1;
}
.standard_dropdown li:hover > ul
{
top: 100%;
visibility: visible;
opacity: 1;
}
.standard_dropdown ul ul
{
left: 100%;
top: 0 !important;
}
.top_bar_user
{
display: inline-block;
margin-left: 35px;
}
.user_icon
{
display: inline-block;
margin-right: 7px;
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
width: 15px;
}
.user_icon img
{
width: 100%;
}
.top-bar-right {
display: inline-flex;
justify-content: space-between;
}
.top-bar-right ul {
display: inline-flex;
}
.top-bar-right li {
}
.top-bar-right li a {
line-height: 38px;
color: #ffffff;
}
.top-bar-right li:last-child::before {
margin-left: 10px;
margin-right: 10px;
content: "|";
color: white;
}
/*********************************
3.2 Header Main
*********************************/
.header_main
{
z-index: 1;
}
.header.scrolled .header_main
{
display: none;
}
.header_main_item
{
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.logo_container
{
height: 150px;
}
.logo
{
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.logo img {
border: none;
border-radius: 5px;
width: 50%;
height: 50%;
padding: 5px;
margin: 0;
display: block;
}
.logo p
{
font-size: 20px;
font-weight: 500;
color: #263995;
display: block;
}
.header_search
{
height: 150px;
}
.header_search_content
{
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.header_search_form_container
{
width: 100%;
height: 50px;
border: solid 1px #e5e5e5;
border-radius: 5px;
}
.header_search_form
{
width: 100%;
height: 100%;
}
.header_search_input
{
display: block;
position: relative;
width: calc((100% - 50px) * 0.601);
height: 100%;
line-height: 50px;
border: none !important;
outline: none !important;
padding-left: 26px;
color: #7f7f7f;
float: left;
}
.header_search_input::-webkit-input-placeholder
{
font-size: 16px !important;
font-weight: 300;
line-height: 50px;
color: #a3a3a3 !important;
}
.header_search_input:-moz-placeholder /* older Firefox*/
{
font-size: 16px !important;
font-weight: 300;
line-height: 50px;
color: #a3a3a3 !important;
}
.header_search_input::-moz-placeholder /* Firefox 19+ */
{
font-size: 16px !important;
font-weight: 300;
line-height: 50px;
color: #a3a3a3 !important;
}
.header_search_input:-ms-input-placeholder
{
font-size: 16px !important;
font-weight: 300;
line-height: 50px;
color: #a3a3a3 !important;
}
.header_search_input::input-placeholder
{
font-size: 16px !important;
font-weight: 300;
line-height: 50px;
color: #a3a3a3 !important;
}
.custom_dropdown
{
width: calc((100% - 50px) * 0.399);
height: 50px;
float: left;
padding-left: 26px;
}
.custom_dropdown::before
{
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
width: 1px;
height: 28px;
background: #e5e5e5;
content: '';
}
.custom_dropdown_list i
{
display: inline-block;
color: #a3a3a3;
font-size: 10px;
margin-left: 3px;
-webkit-transform: translateY(-1px);
-moz-transform: translateY(-1px);
-ms-transform: translateY(-1px);
-o-transform: translateY(-1px);
transform: translateY(-1px);
}
.custom_dropdown_placeholder
{
display: inline-block;
font-size: 16px;
font-weight: 300;
color: #a3a3a3;
line-height: 48px;
cursor: pointer;
}
.custom_dropdown_placeholder i
{
}
.custom_list
{
text-align: left;
position: absolute;
padding: 0;
top: 75px;
left: -15px;
visibility: hidden;
opacity: 0;
box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: all 0.2s ease;
}
.custom_list.active
{
visibility: visible;
opacity: 1;
top: 50px;
box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: all 0.3s ease;
}
.custom_list li
{
height: 35px;
padding-left: 15px;
padding-right: 15px;
background: #FFFFFF;
}
.custom_list li a
{
display: block;
color: #a3a3a3;
line-height: 35px;
border-bottom: solid 1px #ededed;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.custom_list li a:hover
{
color: var(--colp);
}
select
{
display: inline;
border: 0;
width: auto;
margin-left: 10px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
border-bottom: 2px solid #555;
color: #7b00ff;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
select:hover
{
cursor: pointer;
}
select option
{
border: 0;
border-bottom: 1px solid #555;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
}
.header_search_button
{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background: #263995;
border: none;
outline: none;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.account a
{
height: 150px;
font-size: 18px;
margin-right: 30px;
color: #000000;
}
.account a:hover
{
color: var(--colp);
}
.wishlist_cart
{
height: 150px;
}
.wishlist
{
margin-right: 50px;
}
.wishlist_icon img
{
width: 100%;
}
.wishlist_content
{
margin-left: 14px;
}
.wishlist_text a
{
font-size: 18px;
font-weight: 400;
color: #000000;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.wishlist_text a:hover
{
color: var(--colp);
}
.wishlist_count
{
margin-top: -2px;
color: var(--colp);
font-size: 16px;
}
.cart_count
{
position: absolute;
bottom: -1px;
right: -14px;
width: 23px;
height: 23px;
background: var(--colp);
border-radius: 50%;
text-align: center;
}
.cart_count span
{
display: block;
line-height: 23px;
font-size: 14px;
color: #FFFFFF;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
-o-transform: translateY(1px);
transform: translateY(1px);
}
.cart_icon img
{
width: 100%;
}
.cart_content
{
margin-left: 28px;
}
.cart_text a
{
font-size: 18px;
font-weight: 400;
color: #000000;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.cart_text a:hover
{
color: var(--colp);
}
.cart_price
{
font-size: 16px;
color: var(--colp);
margin-top: -2px;
}
/*********************************
3.3 Main Navigation
*********************************/
.main_nav
{
width: 100%;
border-top: solid 1px #dfdfdf;
border-bottom: solid 1px #dfdfdf;
background: #FFFFFF;
}
.header.scrolled .main_nav
{
position: fixed;
top: 0;
left: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.main_nav_content
{
width: 100%;
height: 60px;
}
.cat_menu_container
{
width: 330px;
height: 100%;
background: #263995;
padding-left: 35px;
cursor: pointer;
z-index: 1;
}
.cat_menu_title
{
height: 100%;
}
.cat_burger
{
width: 18px;
height: 14px;
}
.cat_burger span
{
display: block;
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #FFFFFF;
}
.cat_burger span:nth-child(2)
{
top: 6px;
}
.cat_burger span:nth-child(3)
{
top: 12px;
}
.cat_menu_text
{
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
text-transform: uppercase;
margin-left: 20px;
}
.cat_menu_container ul
{
display: block;
position: absolute;
top: 100%;
left: 0;
/*visibility: hidden;
opacity: 0;*/
min-width: 100%;
background: #FFFFFF;
box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: all 0.3s ease;
}
.cat_menu_container > ul
{
padding-top: 13px;
}
.cat_menu_container:hover .cat_menu
{
visibility: visible;
opacity: 1;
}
.cat_menu li
{
display: block;
position: relative;
width: auto;
height: 46px;
border-bottom: solid 1px #f2f2f2;
padding-left: 35px;
padding-right: 30px;
white-space: nowrap;
}
.cat_menu li.hassubs > a i
{
display: block;
}
.cat_menu li a
{
display: block;
position: relative;
font-size: 16px;
font-weight: 300;
color: #000000;
line-height: 46px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.cat_menu li a:hover
{
color: var(--colp);
}
.cat_menu li a i
{
display: none;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
font-size: 14px;
}
.cat_menu li ul
{
display: block;
position: absolute;
top: 35px;
left: 100%;
visibility: hidden;
opacity: 0;
width: 100%;
background: #FFFFFF;
box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
}
.cat_menu li:hover > ul
{
top: 0;
visibility: visible;
opacity: 1;
}
.main_nav_dropdown li
{
margin-right: 35px;
}
.main_nav_dropdown li:last-child
{
margin-right: 0px;
}
.main_nav_dropdown li a
{
font-size: 18px;
font-weight: 400;
color: #000000;
line-height: 60px;
}
.main_nav_dropdown li li
{
padding-left: 15px;
padding-right: 15px;
margin-right: 0px;
}
.menu_trigger_container
{
display: none;
width: auto;
height: 100%;
padding-right: 25px;
padding-left: 25px;
cursor: pointer;
}
.menu_trigger
{
height: 100%;
}
.menu_burger_inner
{
display: inline-block;
}
.menu_trigger_text
{
display: inline-block;
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
text-transform: uppercase;
margin-right: 16px;
}
/*********************************
3.4 Page Menu
*********************************/
.mar-0 {
margin: 0;
}
.mar-pad0
{
padding: 0;
margin: 0;
}
.page_menu
{
margin-top: 0;
position: absolute;
left: 0;
right: 0;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.page_menu_content
{
height: 0px;
background: var(--colp);
padding-left: 15px;
padding-right: 15px;
overflow: hidden;
}
.page_menu_search
{
display: none;
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
}
.page_menu_search_input
{
width: 100%;
height: 40px;
background: #FFFFFF;
border: none;
outline: none;
padding-left: 25px;
}
.page_menu_item
{
display: block;
position: relative;
border-bottom: solid 1px rgba(255,255,255,0.1);
vertical-align: middle;
}
.page_menu_item > a
{
display: block;
color: #FFFFFF;
font-weight: 500;
height: 50px;
line-height: 50px;
font-size: 16px;
text-transform: uppercase;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.page_menu_item > a:hover
{
color: #b5aec4;
}
.page_menu_item a i
{
display: none;
margin-left: 8px;
}
.page_menu_item.has-children > a > i
{
display: inline-block;
}
.page_menu_selection
{
margin: 0;
width: 100%;
height: 0px;
overflow: hidden;
z-index: 1;
}
.page_menu_selection li
{
padding-left: 10px;
padding-right: 10px;
line-height: 50px;
}
.page_menu_selection li a
{
display: block;
color: #FFFFFF;
border-bottom: solid 1px rgba(255,255,255,0.1);
font-size: 16px;
text-transform: uppercase;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: all 0.3s ease;
}
.page_menu_selection li a:hover
{
color: #b5aec4;
}
.page_menu_selection li:last-child a
{
border-bottom: none;
}
.menu_contact_item
{
display: inline-block;
font-size: 12px;
font-weight: 300;
line-height: 56px;
margin-right: 40px;
color: #FFFFFF;
}
.menu_contact_item:not(:first-child)
{
margin-right: 0px;
}
.menu_contact_item a
{
font-size: 12px;
font-weight: 300;
line-height: 56px;
color: #FFFFFF;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.menu_contact_item a:hover
{
color: #8a8a8a;
}
.menu_contact_item:last-child
{
margin-right: 0px;
}
.menu_contact_icon
{
display: inline-block;
margin-right: 14px;
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
}
/*********************************
4. Banner
*********************************/
#carouselExampleControls {
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 472px;
margin-right: 100px;
}
.banner-image {
height: 527px;
}
.banner
{
width: 100%;
padding-top: 0px;
padding-bottom: 100px;
overflow: hidden;
}
.banner_background
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.banner_content
{
z-index: 1;
}
.banner_text
{
font-family: 'Poppins', sans-serif;
font-weight: 500;
line-height: 1.166;
color: #7599b2;
text-transform: uppercase;
letter-spacing: 0.038em;
}
.banner_price
{
}
.banner_price
{
font-size: 30px;
color: #df3b3b;
margin-top: 87px;
}
.banner_price span
{
display: inline-block;
position: relative;
color: #7e8285;
margin-right: 14px;
}
.banner_price span::after
{
display: block;
position: absolute;
top: 21px;
left: 0;
width: 100%;
height: 2px;
background: #8d8d8d;
content: '';
}
.banner_product_name
{
font-size: 18px;
font-weight: 400;
color: #000000;
margin-top: 8px;
}
.banner_button {
margin-top: 300px;
margin-left: 20px;
}
.banner_product_image
{
position: absolute;
top: -5px;
right: -52px;
z-index: 0;
}
.banner_product_image {
position: absolute;
top: -5px;
right: -228px;
z-index: 0;
}
.banner_product_image img {
border-style: none;
margin: auto;
width: 1090px;
height: 600px;
}
/*********************************
5. Characteristics
*********************************/
.characteristics
{
padding-top: 50px;
padding-bottom: 50px;
}
.char_item
{
width: 100%;
height: 100px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
border: solid 1px #e8e8e8;
padding-left: 36px;
}
.char_icon
{
margin-right: 24px;
}
.char_content
{
transform: translate(-1px, 3px);
}
.char_title
{
font-size: 16px;
font-weight: 500;
color: #000000;
}
.char_subtitle
{
font-size: 12px;
font-weight: 400;
color: rgba(0,0,0,0.5);
margin-top: 3px;
}
/*********************************
6. homecatsec
*********************************/
.mb-0, .my-0 {
margin-bottom: 0!important;
display: flex;
justify-content: space-between;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
}
.card-body {
padding: 0;
border-left: 1px solid rgb(0 0 0 / 13%);
margin-left: 20px;
}
.card-header {
background: #FFFFFF;
}
.bloc_left_price {
color: #c01508;
text-align: center;
font-weight: bold;
font-size: 150%;
}
.category_block li:hover a {
text-decoration: underline;
}
.category_block li a {
color: #000000;
}
.add_to_cart_block .price {
color: #c01508;
text-align: center;
font-weight: bold;
font-size: 200%;
margin-bottom: 0;
}
.add_to_cart_block .price_discounted {
color: #343a40;
text-align: center;
text-decoration: line-through;
font-size: 140%;
}
.product_rassurance {
padding: 10px;
margin-top: 15px;
background: #ffffff;
border: 1px solid #6c757d;
color: #6c757d;
}
.product_rassurance .list-inline {
margin-bottom: 0;
text-transform: uppercase;
text-align: center;
}
.product_rassurance .list-inline li:hover {
color: #343a40;
}
.reviews_product .fa-star {
color: gold;
}
.pagination {
margin-top: 20px;
}
footer {
background: #343a40;
padding: 40px;
}
footer a {
color: #f8f9fa!important;
}
/*********************************
7. Product Gird
*********************************/
.cardmar {
margin-top: 30px;
}
.bg-red {
background: red;
}
.border {
border: 1px solid rgba(0,0,0,.125);
margin-top: 20px;
}
.border-none {
border: none;
margin-top: 20px;
}
.card {
border: none;
}
.list-group-item {
border: none;
margin-bottom: 2px;
}
.product-grid{
background-color: #fff;
font-family: 'Poppins', sans-serif;
text-align: center;
border: 1px solid rgba(0,0,0,.125);
}
.product-grid .product-image{
overflow: hidden;
position: relative;
}
.product-grid .product-image a.image{ display: block; }
.product-grid .product-image img{
width: 100%;
height: 220px;
}
.product-grid .product-image .pic-1{ transition: all 0.3s ease 0s; }
.product-grid .product-image:hover .pic-1{ transform: translateX(100%); }
.product-grid .product-image .pic-2{
width: 100%;
height: 220px;
transform: translateX(-101%);
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease 0s;
}
.product-grid .product-image:hover .pic-2{ transform: translateX(0); }
.product-grid .product-sale-label{
color: #fff;
background: #0a805e;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2px 8px;
position: absolute;
top: 15px;
left: 15px;
}
.product-grid .product-like-icon{
color: #696969;
font-size: 22px;
line-height: 20px;
position: absolute;
top: 15px;
right: 15px;
}
.product-grid .product-like-icon:hover{ color: var(--colp); }
.product-grid .product-like-icon:before,
.product-grid .product-like-icon:after{
content: attr(data-tip);
color: #fff;
background-color: #000;
font-size: 12px;
line-height: 18px;
padding: 7px 7px 5px;
visibility: hidden;
position: absolute;
right: 0;
top: 15px;
transition: all 0.3s ease 0s;
}
.product-grid .product-like-icon:after{
content: '';
height: 15px;
width: 15px;
padding: 0;
transform: translateX(-50%) rotate(45deg);
right: auto;
left: 50%;
top: 15px;
z-index: -1;
}
.product-grid .product-like-icon:hover:before,
.product-grid .product-like-icon:hover:after{
visibility: visible;
top: 30px;
}
.product-grid .product-links{
width: 170px;
padding: 0;
margin: 0;
list-style: none;
opacity: 0;
transform: translateX(-50%);
position: absolute;
bottom: -50px;
left: 50%;
transition: all 0.3s ease 0s;
}
.product-grid:hover .product-links{
bottom: 20px;
opacity: 1;
}
.product-grid .product-links li{
display: inline-block;
margin: 0 2px;
}
.product-grid .product-links li a{
color: #fff;
background: #000;
font-size: 14px;
line-height: 38px;
width: 38px;
height: 38px;
border-radius: 10px;
display: block;
transition: all 0.3s ease 0s;
}
.product-grid:hover .product-links li a:hover{ background: var(--colp); }
.product-grid .product-content{
text-align: left;
padding: 15px 0 0;
padding-left: 10px;
}
.product-grid .title{
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
margin: 0 0 8px;
}
.product-grid .title a{
color: #333;
transition: all 0.3s ease 0s;
}
.product-grid .title a:hover{ color: var(--colp); }
.product-grid .price{
color: var(--colp);
font-size: 16px;
font-weight: 500;
}
.product-grid .price span{
color: #555;
font-size: 16px;
font-weight: 400;
text-decoration: line-through;
margin: 0 5px 0 0;
}
@media screen and (max-width: 990px){
.product-grid{ margin: 0 0 30px; }
}
/*********************************
15. Map
*********************************/
.map-container{
overflow:hidden;
padding-bottom:0;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/*********************************
15. Brands
*********************************/
.brands
{
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
}
.brands_slider_container .fa-chevron-right:before, .fa-chevron-left:before {
color: var(--colp);
}
.brands_slider_container
{
height: 180px;
border: solid 1px var(--colp);
box-shadow: 0px 1px 5px rgba(13, 0, 255, 0.1);
padding-left: 97px;
padding-right: 97px;
}
.brands_slider
{
height: 100%;
}
.brands_item
{
height: 100%;
}
.brands_item img
{
max-width: 100%;
}
.brands_nav
{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding: 5px;
cursor: pointer;
}
.brands_nav i
{
color: #e5e5e5;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.brands_nav:hover i
{
color: #676767;
}
.brands_prev
{
left: 40px;
}
.brands_next
{
right: 40px;
}
/*********************************
16. Newsletter
*********************************/
.newsletter
{
width: 100%;
background: #fafafa;
padding-top: 40px;
padding-bottom: 40px;
box-shadow: 0px 5px 20px rgb(0 0 0 / 20%);
border-top: 2px #ffffff8c;
}
.newsletter_container
{
width: 100%;
padding-left: 100px;
padding-right: 100px;
}
.newsletter_title_container
{
width: 50%;
padding-left: 95px;
}
.newsletter_icon
{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
}
.newsletter_title
{
font-size: 18px;
color: #000000;
}
.newsletter_text p:last-child
{
margin-bottom: 0;
}
.newsletter_icon img
{
max-width: 100%;
}
.newsletter_content
{
width: 50%;
display: flex;
justify-content: end;
}
.newsletter_form
{
position: relative;
width: 569px;
float: left;
}
.newsletter_input
{
width: 100%;
height: 50px;
background: #FFFFFF;
border: solid 1px #e5e5e5;
border-radius: 5px;
padding-left: 25px;
font-size: 16px;
outline: none;
color: var(--colp);
}
.newsletter_input:focus
{
border: solid 1px rgba(14, 140, 228, 0.3);
box-shadow: 0px 1px 5px rgba(14, 140, 228, 0.3);
}
.newsletter_input::-webkit-input-placeholder
{
font-size: 16px;
color: rgba(0,0,0,0.3);
}
.newsletter_input:-moz-placeholder
{
font-size: 16px;
color: rgba(0,0,0,0.3);
}
.newsletter_input::-moz-placeholder
{
font-size: 16px;
color: rgba(0,0,0,0.3);
}
.newsletter_input:-ms-input-placeholder
{
font-size: 16px;
color: rgba(0,0,0,0.3);
}
.newsletter_input::input-placeholder
{
font-size: 16px;
color: rgba(0,0,0,0.3);
}
.newsletter_button
{
position: absolute;
top: 0;
right: 0;
width: 153px;
height: 50px;
background: var(--colp);
color: #FFFFFF;
line-height: 50px;
font-size: 18px;
border: none;
outline: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
}
.newsletter_button:hover
{
opacity: 0.8;
}
/*********************************
17. Footer
*********************************/
.footer
{
padding: 0px 0px 2px 0px;
}
.footer .logo_container
{
height: auto;
margin-bottom: 18px;
margin-top: -10px;
}
.footer .logo
{
top: auto;
-webkit-transform: transform: none;
-moz-transform: transform: none;
-ms-transform: transform: none;
-o-transform: transform: none;
transform: none;
}
.footer .logo img
{
border: 1px solid rgb(255, 255, 255);
border-radius: 5px;
width: 50%;
height: 50%;
padding: 5px;
margin: 0;
display: block;
}
.footer .logo a
{
text-align: left;
}
.footer_title
{
font-size: 16px;
font-weight: 500;
color: #000000;
}
.footer_phone
{
font-size: 18px;
font-weight: 500;
color: var(--colp);
margin-top: 13px;
}
.footer_contact_text
{
margin-top: 10px;
}
.footer_contact_text p
{
margin-bottom: 0px;
}
.footer_social
{
margin-top: 27px;
}
.footer_social ul li
{
display: inline-block;
width: 30px;
height: 30px;
background: #fafafa;
border-radius: 50%;
cursor: pointer;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
margin-right: 16px;
text-align: center;
}
.footer_social ul li i
{
color: #000000;
line-height: 30px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.footer_social ul li:hover i
{
color: var(--colp);
}
.footer_subtitle
{
font-size: 12px;
color: #000000;
}
.footer_column ul:first-of-type
{
margin-top: 21px;
}
.footer_column ul
{
margin-top: 7px;
}
.footer_list li
{
margin-bottom: 6px;
}
.footer_list li a
{
font-size: 12px;
font-weight: 500;
color: rgba(0,0,0,0.4);
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.footer_list li a:hover
{
color: var(--colp);
}
.footer_list_2
{
margin-top: 42px !important;
}
.copyright
{
width: 100%;
background: #fafafa;
}
.copyright_container
{
width: 100%;
height: 56px;
}
.copyright_content a
{
font-size: 12px;
color: var(--colp);
}
.copyright_content span
{
font-weight: 500;
}
.logos
{
}
.logos_list li
{
display: inline-block;
margin-right: 16px;
}
.logos_list li:last-child
{
margin-right: 0px;
}
/*footer*/
.col_white_amrc { color:#FFF;}
footer { width:100%; background-color: var(--colp); min-height:250px; padding:10px 0px 25px 0px ;}
.pt2 { padding-top:20px ; margin-bottom:20px ;}
footer p { font-size:13px; color:rgb(255, 255, 255); padding-bottom:0px; margin-bottom:8px;}
.mb10 { padding-bottom:15px ;}
.footer_ul_amrc { margin:0px ; list-style-type:none ; font-size:16px; padding:0px 0px 10px 0px ; }
.footer_ul_amrc li {padding:0px 0px 5px 0px;}
.footer_ul_amrc li a{ color:rgb(255, 255, 255);}
.footer_ul_amrc li a:hover{ color:#fff; text-decoration:none;}
.fleft { float:left;}
.padding-right { padding-right:10px; }
.footer_ul2_amrc {margin:0px; list-style-type:none; padding:0px;}
.footer_ul2_amrc li p { display:table; }
.footer_ul2_amrc li a:hover { text-decoration:none;}
.footer_ul2_amrc li i { margin-top:5px;}
.font_bold {
font-weight: bold;
}
.copyright {
padding: 10px 0;
background-color: transparent;
border-top: 1px solid #FFFFFF;
}
.copyright span,
.copyright a {
color: #ffffff;
line-height: 0;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear; }
.copyright a:hover {
color:#000000; }
.footer-social ul {
margin: 0; }
.footer-social li {
display: inline-block; }
.developer-menu {
display: block;
float: right;
}
/*footer Social Icon*/
.f-social-wrapper {
padding-bottom: 50px;
}
.f-social-button {
float: left;
margin: 3px;
width: 30px;
height: 30px;
cursor: pointer;
background: #fff;
overflow: hidden;
border-radius: 50px;
transition: all 0.3s ease-in-out;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.f-social-button span {
font-size: 14px;
font-weight: 500;
line-height: 30px;
margin-left: 5px;
}
.f-social-button:hover {
width: 120px;
}
.f-social-button:nth-child(1):hover .f-social-icon {
background: #4267b2;
}
.f-social-button:nth-child(2):hover .f-social-icon {
background: #e1306c;
}
.f-social-button:nth-child(3):hover .f-social-icon {
background: #1da1f2;
}
.f-social-button:nth-child(4):hover .f-social-icon {
background: #0e76a8;
}
.f-social-button:nth-child(5):hover .f-social-icon {
background: #ff0000;
}
.f-social-button:nth-child(6):hover .f-social-icon {
background: #333;
}
.f-social-button:nth-child(1) span {
color: #4267b2;
}
.f-social-button:nth-child(2) span {
color: #e1306c;
}
.f-social-button:nth-child(3) span {
color: #1da1f2;
}
.f-social-button:nth-child(4) span {
color: #0e76a8;
}
.f-social-button:nth-child(5) span {
color: #ff0000;
}
.f-social-button:nth-child(6) span {
color: #333;
}
.f-social-button .f-social-icon {
width: 30px;
height: 30px;
text-align: center;
border-radius: 50px;
display: inline-block;
transition: all 0.3s ease-in-out;
}
.f-social-button .f-social-icon i {
font-size: 13px;
line-height: 30px;
transition: all 0.3s ease-in-out;
}
.f-social-button:hover i {
color: #fff;
}
/*footer back to top*/
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
border: 1px solid #fff;
background: var(--colp);
}