/**************************************************************************
***************** Master Stylesheet for Sophia ecommerce************************
***************************************************************************
=========================== Content Index =================================
* 1. General styles
* 2. HOME-1 STYLES
- Info bar styles
- Header-1 styles
- Shopping widget styles
- Home product section styles
- Home baners section styles
- Home vertical-product section styles
- Home footer section styles
* 3. HOME-2 STYLES
- Carousel styles
- Header-2 styles
- Info bar styles
- Shopping widget styles
- Home-2 product section styles
* 4. HOME-3 STYLES
- Carousel styles
- Header-2 styles
- Info bar styles
- Shopping widget styles
- Home-2 product section styles
* 4. HOME-4 STYLES
- Carousel styles
- Header-2 styles
- Info bar styles
- Shopping widget styles
- Home-2 product section styles
* 3. Menu-1 styles
* 4. Menu-2 styles
* 5. Products left sidebar page styles
* 6. Popular product page styles
* 7. My account page styles
* 8. Blog- column page styles
* 9. Blog- details page styles
* 10. Blog- list page styles
* 11. Price slider styles
* 12. Product dialog styles
* 13. Popular products styles
***************************************************************************
**************************************************************************/
/***************************************/
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
.color-options{
width: 60px;
height: 300px;
position: fixed;
top: 414px;
right: -62px;
z-index: 9999;
.options-icon{
padding: 0;
position: absolute;
top: 12px;
left: -46px;
min-width: 49px;
z-index: 1;
box-shadow: -2px 3px 1px -2px rgba(0,0,0,.2),
-2px 2px 2px 0 rgba(0,0,0,.14),
-2px 1px 5px 0 rgba(0,0,0,.12) !important;
padding-right: 15px;
.mat-icon {
-webkit-animation: rotation 2s infinite linear;
}
}
.mat-card{
position: absolute;
padding: 14px;
width: 100%;
height: 100%;
}
&.show{
right: -2px;
-webkit-transition: max-height 0.25s ease-in;
-moz-transition: max-height 0.25s ease-in;
transition: max-height 0.25s ease-in;
}
.skin-icon{
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
&.green{
background-color: #438807;
}
&.blue{
background-color: #0087d4;
}
&.red{
background-color: #d32f2f;
}
&.pink{
background-color: #c2185b;
}
&.purple{
background-color: #7b1fa2;
}
&.grey{
background-color: #455a64;
}
}
}
/***************************************
* 1. General styles
****************************************/
.mat-warn .mat-slider-thumb, .mat-warn .mat-slider-thumb-label, .mat-warn .mat-slider-track-fill {
background-color: #ff7e00 !important;
}
.mat-primary .mat-slider-thumb, .mat-primary .mat-slider-thumb-label, .mat-primary .mat-slider-track-fill {
background-color: #ff7e00 !important;
}
html, body { height: 100%; }
body {
margin: 0;
font-family: "Roboto",Arial,Helvetica,sans-serif;
position: relative;
font-size: 1rem;
color: $font-color !important;
}
h1 {
font-size: 60px;
color: $theme-main-dark;
font-weight: 700;
font-family: 'Gelasio', serif;
text-transform: uppercase;
}
h2 {
font-size: 33px;
color: $theme-main-dark;
text-transform: capitalize;
font-family: 'Gelasio', serif;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
}
h3 {
font-size: 28px;
text-align: left;
color: $theme-main-dark;
margin: 0;
font-weight: 600;
font-family: 'Gelasio', serif;
}
h4 {
font-size: 21px;
text-transform: capitalize;
font-weight: 600;
line-height: 1;
font-family: 'Gelasio', serif;
}
h5 {
font-size: 16px;
font-weight: 400;
color: $theme-main-dark;
line-height: 24px;
letter-spacing: 0.05em;
font-family: "Gelasio", serif;
}
h6 {
font-size: 14px;
font-weight: 400;
color: $theme-main-dark;
line-height: 24px;
}
.mat-menu-content {
width: 221px;
padding-top: 0;
padding-bottom: 0;
border-top: 4px solid $theme-main !important;
}
.btn-project {
padding: 5px 32px!important;
color: $white !important;
border-radius: 0 !important;
transition: .3s;
}
* {
margin: 0;
padding: 0;
}
.mat-raised-button:not([class*=mat-elevation-z]) {
box-shadow: none;
}
.mat-slider-track-fill {
background-color: $theme-main;
}
.mat-primary .mat-slider-thumb {
background-color: $theme-main;
}
.mat-raised-button.mat-warn {
background-color: $theme-main-red;
}
.mat-card:not([class*=mat-elevation-z]) {
box-shadow: none !important;
}
// .overlay {
// background-color: rgba(255, 193, 17, 0.8) !important;
// position: fixed;
// }
.mat-form-field.mat-focused .mat-form-field-label{color:$theme-main}
.mat-form-field.mat-focused .mat-form-field-ripple{background-color:$theme-main}
.mat-expansion-indicator::after, .mat-expansion-panel-header-description {
color:$grey4;
}
.sophia-app .mat-drawer-container {
background: #fff;
position: relative;
z-index: 1;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
display: block;
overflow: hidden;
}
.mat-menu-panel {
min-width: 100% !important;
max-width: 100% !important;
}
.mat-mini-fab.mat-accent {
background-color: $theme-main;
}
a {
text-decoration: none;
}
.text-center {
text-align: center !important;
}
li {
list-style-type: none;
}
.mat-snack-bar-container.error {
background: $theme-main-red !important;
}
.mat-drawer-backdrop {
background-color: rgba(0,0,0,.6);
}
.mat-drawer-container {
color: $font-color;
}
.mat-radio-label-content {
color: $grey7;
font-weight: 400;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
background-color: $theme-main-red;
}
.mat-radio-button.mat-accent .mat-radio-inner-circle {
background: $theme-main-red !important;
}
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: $theme-main-red !important;
}
.mat-raised-button.mat-primary {
padding: 3px 32px;
color: $white;
border-radius: 0;
transition: .3s;
}
.mat-input-element {
caret-color: $theme-main !important;;
}
.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 15px !important;
}
.divider {
border-top: 1px solid $grey3;
}
.bg {
background: $background;
}
.ml-10 {
margin-left: 10px;
}
.mb-5 {
margin-bottom: 5px !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-15 {
margin-bottom: 15px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.w-50 {
width: 50%;
}
.mr-10 {
margin-right: 10px !important;
}
.ml-10 {
margin-left: 10px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mt-15 {
margin-top: 15px !important;
}
.mt-40 {
margin-top: 40px !important;
}
.mt-15 {
margin-top: 15px;
}
.mt-10 {
margin-top: 10px !important;
}
.mb-15 {
margin-bottom: 15px !important;
}
.mr-7 {
margin-right: 7px !important;
}
.ml-7 {
margin-left: 7px !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pl-15 {
padding-left: 15px;
}
.pr-15 {
padding-right: 15px;
}
.no-pdn {
padding: 0 !important;
}
.pt-20 {
padding-top: 20px !important;
}
.pl-5 {
padding-left: 5px !important;
}
.pr-5 {
padding-right: 5px !important;
}
.pr-50 {
padding-right: 50px !important;
}
.pt-40 {
padding-top: 40px !important;
}
.pt-60 {
padding-top: 60px !important;
}
.devider {
padding-top: 15px;
padding-bottom: 20px;
border-top: 1px dashed $grey;
}
.w-100 {
width: 100% !important;
}
.text-muted {
color: $grey !important;
}
.sec-padding {
padding: 60px 0;
}
.btn-project {
padding: 3px 32px;
color: $white;
border-radius: 0;
transition: .3s;
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: $theme-main;
}
/***************************************
***************************************
***************************************
* HOME-1 STYLES
****************************************
****************************************
****************************************/
/***************************************
* Carousel-1 styles
****************************************/
.main-slider{
height: 760px;
.sl-wrap {
position: relative;
height: 100%;
.content{
height: 100%;
position: relative;
z-index: 9;
/* padding-left: 294px; */
vertical-align: middle;
position: relative;
text-align: center;
/* top: 58%; */
button {
background: $theme-main;
// color: $white;
// border: 2px solid $white;
border-radius: 0;
padding: 5px 33px;
width: 200px;
margin: 0 auto;
margin-top: 20px;
span {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
}
h1{
font-size: 48px;
text-align: center;
color: $white;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 0;
// color: $white;
}
p{
font-size: 19px;
text-align: center;
color: $white;
margin-bottom: 30px;
font-weight: 400;
width: 756px;
margin: 0 auto;
line-height: 35px;
}
}
}
.slide-item{
height: 100%;
background-size: cover;
background-position: center;
}
}
.swiper-pagination-bullet-active {
background: $white !important;
}
/* .mask{
opacity: 0.6;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
z-index: 0;
background-color: rgba(0,0,0,0.8);
} */
.swiper-lazy-preloader{
top: 18%;
}
.h-100 {
height: 100%;
}
/***************************************
* Topbar styles
****************************************/
.main-topbar {
background: $sec-color ;
min-height: 49px;
max-height: 55px;
.top-bar {
.widget-text {
a {
color: $white;
text-decoration: none;
font-size: 13px;
transition: .4s;
.mat-icon {
vertical-align: middle;
margin-right: 1px !important;
font-size: 23px;
}
&:hover {
color: $theme-main;
}
}
&:not(:last-child) {
margin: 0 20px 0 0;
}
.mat-button-wrapper {
img {
margin-right: 3px;
}
}
}
.welcome-message {
p {
color: $grey7;
font-size: 13.5px;
font-weight: 400;
}
}
span {
.mat-icon {
color: $theme-main;
}
}
.cur-icon {
color: $white !important;
}
}
}
/***************************************
* Header-1 styles
****************************************/
.header {
position: relative;
.header-wrapper {
position: absolute;
top: 20px;
z-index: 9999;
left: 0;
right: 0;
.main-menu {
a {
text-transform: uppercase;
color: $white;
}
}
}
}
.mat-menu-content {
width: 221px;
padding-top: 0;
padding-bottom: 0;
border-top: 4px solid $grey3 !important;
}
/***************************************
* Menu styles
****************************************/
.widgets {
width: 30px;
margin-left: 0;
position: relative;
padding-top: 10px;
.bucket {
.mat-button-wrapper {
width: 30px;
svg {
max-height: 40px;
fill: $white;
}
.mat-badge {
margin-left: -10px;
}
.cart-count-wrapper {
position: absolute;
text-align: center;
top: -3px;
left: 37px;
background: $white;
height: 18px;
width: 18px;
line-height: 18px;
border-radius: 50%;
font-size: 11px;
color: $theme-main;
font-weight: 700;
}
}
.top-cart {
span {
color: $white;
}
}
}
}
.spCard-main {
width: 100%;
.mat-menu-content {
width: 239px !important;
}
.spCard-dropdown {
background-color: $white;
padding: 15px 10px;
max-width: 300px;
z-index: 400;
.card-list-title {
padding: 0 0 10px 0;
}
h4 {
padding-bottom: 10px;
}
.new-product {
.product {
img {
width: 70px;
}
}
.close-circle {
flex: 1;
a{
cursor: pointer;
color: $grey3;
transition: .3s;
float: right;
&:hover {
color: $theme-main;
}
i {
font-size: 20px;
}
}
}
.item {
padding: 10px 0;
.product {
margin-right: 7px;
background: #ffffff;
/* border-radius: 3px; */
border: 1px solid #e7e7e7;
}
.desc {
p {
font-weight: 500;
}
span {
color: $grey;
font-size: 15px;
margin-top: 5px;
/* padding-top: 7px; */
display: block;
}
}
}
.total {
padding-top: 15px;
p {
font-size: 15px;
}
span {
font-weight: 500;
font-size: 16px;
}
}
}
.card-list-title {
a{
color: $grey4;
font-size: 14px;
font-weight: 500;
}
p{
color: $grey4;
font-size: 14px;
font-weight: 500;
}
}
.woo-message {
text-align: center;
padding: 0;
margin: 1.5em 0 0 0;
}
}
}
/***************************************
* Shopping widget styles
****************************************/
.card-list-title2 {
padding: 5px 0 15px 0;
}
/***************************************
* Products styles
****************************************/
.product-section {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
z-index: 989;
.back-img1 {
position: absolute;
left: 0;
top: 56px;
}
.back-img2 {
position: absolute;
left: 0;
bottom: 56px;
}
.back-img3 {
position: absolute;
right: 0;
bottom: 235px;
}
.head-title {
text-align: center;
h3 {
text-align: center;
margin-bottom: 15px;
}
p{
line-height: 28px;
margin-top: 0px;
}
}
.prod-menu {
margin-top: 45px;
margin-bottom: 45px;
ul {
li {
cursor: pointer;
transition: .3s;
.icon {
height: 50px;
svg {
max-height: 38px;
fill: $grey4 !important;
.cls-1 {
stroke: $grey4 !important;
}
}
}
.text {
p {
color: $grey;
margin: 0;
}
}
&:hover {
transition: .3s;
.icon {
svg {
color: $theme-main;
}
}
.text {
p {
transition: .3s;
color: $theme-main;
}
}
}
}
}
}
.product-wrapper {
display: grid;
// grid-template-rows: 150px 150px;
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(4, 1fr);
// grid-template-columns: 150px 150px 150px;
grid-row-gap: 20px;
grid-column-gap: 20px;
.product-box {
.product-item {
position: relative;
overflow: hidden;
// transition: all .5s ease;
mat-card {
padding: 0;
box-shadow: none;
border: 1px solid $grey6;
.product-img {
text-align: center;
cursor: pointer;
img {
max-width: 180px;
}
}
.product-info-wrapper {
background: #f9f9f9;
padding: 15px;
.category {
text-align: left;
font-weight: 400;
color: $grey7;
}
.title-wrap {
margin: 7px 0;
h4 {
font-size: 21px;
margin: 0;
}
p {
font-size: 21px;
font-family: 'Gelasio', serif;
font-weight: 600;
margin: 0;
}
}
.stars {
.mat-icon {
font-size: 20px;
height: 22px;
width: 22px;
color: $theme-main;
}
}
.btn-wrap {
margin-top: 10px;
.view-more {
font-weight: 500;
color: $grey7;
cursor: pointer;
}
a {
cursor: pointer;
}
.bucket {
width: 38px;
height:38px;
border-radius: 50%;
background: #dedede;
text-align: center;
vertical-align: middle;
line-height: 49px;
// box-shadow: none;
// cursor: pointer;
a {
mat-icon {
}
}
}
}
.details-products {
.more-info {
margin-top: 15px;
overflow: hidden;
p {
line-height: 24px;
}
}
}
.icons {
position: absolute;
top: 30px;
right: -10px;
opacity: 0;
// transition: all .6s ease;
mat-icon {
color: $grey4;
cursor: pointer;
}
}
}
&:hover {
.icons {
opacity: 1;
transition: all .4s ease;
transform: translateX(-20px);
.ic-1 {
animation-delay: 2s;
}
.ic-2 {
animation: .5s ease-in-out fadeInRight;
}
.ic-3 {
animation: .7s ease-in-out fadeInRight;
}
}
}
}
}
}
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/***************************************
* Popular recipes
****************************************/
.popular-recipes-box {
padding: 90px 0 0 0;
background-size: cover;
position: relative;
.recipes-contain {
.head-title {
text-align: center;
color: $white;
margin-bottom: 60px;
h3 {
text-align: center;
margin-bottom: 15px;
color: $white;
}
p {
line-height: 28px;
margin-top: 0px;
margin-bottom: 20px;
}
}
.gallery {
.gallery-section {
grid-column: full-start / full-end;
display: grid;
/*grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 5vw);*/
grid-template: repeat(5, 5vw)/repeat(8, 1fr);
grid-gap: 1.5rem;
padding: 1.5rem;
img {
max-width: 100%;
height: auto;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
will-change: transform;
}
.gallery__item {
overflow: hidden;
cursor: pointer;
&:nth-child(1) {
overflow: hidden;
grid-row: 1 / span 2;
grid-column: 1 / span 2; }
&:nth-child(2) {
grid-row: 1 / span 3;
grid-column: 3 / span 3; }
&:nth-child(3) {
grid-row: 1/span 2;
grid-column: 8/8; }
&:nth-child(4) {
grid-row: 3 / span 3;
grid-column: 1 / span 2; }
&:nth-child(5) {
grid-row: 4 / span 2;
grid-column: 3 / span 2; }
&:nth-child(6) {
grid-row: 4/6;
grid-column: 5/8;}
&:nth-child(7) {
grid-row: 1/4;
grid-column: 6/span 2; }
&:nth-child(8) {
grid-row: 3 / span 3;
grid-column: 8 / -1;
}
&:hover {
img {
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
}
}
}
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0px;
}
}
}
}
}
/***************************************
* About products
****************************************/
.about-products {
padding: 90px 0;
background: $background;
.about-products-wrap {
.left {
.text {
text-align: center;
padding: 0 50px;
h3 {
text-align: center;
margin-bottom: 10px;
}
span {
font-weight: 500;
line-height: 26px;
margin-top: 10px;
}
p {
line-height: 26px;
}
.btn-project {
margin-top: 20px;
}
}
}
.right {
.img-wrap {
img {
max-width: 100%;
height: auto;
}
}
}
}
}
/***************************************
* Vertical products
****************************************/
.vertical-products {
.widget-column {
.title {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
.widget-title {
font-size: 21px;
font-weight: 500;
margin: 0;
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color:$gray-lighter;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color:$dark-font;
bottom: 0.3125rem;
}
}
}
.media-image {
background: $gray-lighter;
margin-right: 20px;
width: 80px;
height: 80px;
border-radius: 3px;
.small {
width: 100%;
}
}
.media-body {
a {
text-decoration: none;
span {
font-size: 17px;
text-transform: capitalize;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1;
color: $font-color;
}
}
.stars {
mat-icon {
color: $theme-main;
font-size: 17px;
line-height: 17px;
height: 17px;
width: 17px;
vertical-align: middle;
}
}
p.price {
margin-top: 5px;
}
}
.product-list {
padding: 0;
li:not(:last-child){
margin-bottom: 20px;
}
}
}
.product-panel:not(:last-child) {
padding-right: 30px;
}
}
/***************************************
* Home footer section styles
****************************************/
.footer {
background-position: center;
background-repeat: no-repeat;
// background-size: cover;
.footer-widget {
padding-right: 15px;
text-align: center;
.social {
margin-top: 20px;
li {
width: 33px;
height: 33px;
border: 1px solid $grey4;
border-radius: 50%;
text-align: center;
margin-right: 5px;
a {
i {
color: $white;
}
}
}
}
.ped-btn-footer {
border: 1px solid $theme-main;
color: $white !important;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 700;
margin-top: 20px;
padding: 0px 10px;
text-align: center;
text-transform: uppercase;
transition: all 0.4s ease 0s;
z-index: 222;
background: $theme-main;
width: 100%;
border-radius: 3px;
line-height: 45px;
}
.title {
margin-bottom: 10px;
h5 {
color: $white;
font-size: 18px;
font-weight: 600;
}
}
a {
text-decoration: none;
font-size: 15px;
line-height: 32px;
color: $white;
}
.newsletter-widget {
position: relative;
margin: 15px 0 20px 0;
}
p {
line-height: 24px;
color: $white;
font-weight: 300;
font-size: 15px;
}
ul {
list-style-type: none;
}
.about-widget {
.logo {
img {
max-width: 240px;
}
}
}
.tel-box {
.icon {
i {
color: $white;
display: block;
line-height: 27px;
vertical-align: middle;
margin-right: 5px;
width: 18px;
text-align: center;
font-size: 18px;
}
}
.text {
p {
a {
line-height: 22px;
}
}
}
}
}
.subscribe-widget {
input {
height: 45px;
background: $white;
font-size: 15px;
line-height: 45px;
border: 1px solid $white-dark;
border-radius: 4px;
padding: 0 65px 0 20px;
color: $grey;
}
}
}
/***************************************
* Sidebar styles
****************************************/
.mat-drawer {
width: 240px;
padding: 8px 14px;
position: fixed;
margin-left: 0px;
}
.toggle-header {
height: 64px;
background: $theme-main-red;
}
.sidebar-menu {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid $grey2;
.menu-item {
a {
color: $theme-main-dark;
padding: 8px 15px;
font-size: 16px;
display: block;
}
}
}
/***************************************
* Products left sidebar page styles
****************************************/
.left-sidebar-wrapper mat-sidenav.filter-sidenav.mat-drawer.mat-sidenav.ng-tns-c15-4.ng-trigger.ng-trigger-transform.ng-tns-c13-3.ng-star-inserted.mat-drawer-over {
padding-right: 10px;
}
.left-sidebar-wrapper {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.sidebar {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.mat-expansion-panel {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border: 1px solid $grey-light;
box-shadow: none !important;
margin-bottom: 20px;
.mat-expansion-panel-header-title span {
font-size: 17px;
text-transform: capitalize;
font-weight: 500;
line-height: 1;
}
.mat-expansion-panel-header {
}
.mat-expansion-panel-content {
// border-top: 1px solid $grey-light;
// padding-top: 17px;
}
}
.filter-sidenav {
width: 280px;
border: 0 !important;
.brands {
.title-header {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
h4 {
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: $grey6;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: $font-color;
bottom: 0.3125rem;
}
}
}
.brand-logos {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-row-gap: 1em;
grid-column-gap: 1em;
.brand-item {
display: inline-block;
text-align: center;
vertical-align: top;
overflow: hidden;
position: relative;
margin-right: 10px;
a {
img {
width: 100%;
}
}
}
}
}
.popular-products {
margin-top: 20px;
}
}
.filter-row {
padding: 8px 25px;
background: $white;
margin-bottom: 0px;
box-shadow: none !important;
}
.all-products {
padding-left: 17px;
background: $white;
select {
/* margin: 50px; */
width: 150px;
padding: 5px 35px 5px 5px;
color: $grey7;
font-size: 16px;
border: none;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
background: url(/assets/images/dropdown.png) no-repeat 90%;
}
.col {
padding: 9px 0 9px 0px;
.product-item {
position: relative;
overflow: hidden;
padding: 26px 5px 5px 5px;
// transition: all .5s ease;
mat-card {
padding: 0;
box-shadow: none;
border: 1px solid $grey6;
.product-img {
text-align: center;
cursor: pointer;
img {
max-width: 180px;
}
}
.product-info-wrapper {
background: #f9f9f9;
padding: 15px;
.category {
text-align: left;
font-weight: 400;
color: $grey7;
}
.title-wrap {
margin: 7px 0;
h4 {
font-size: 21px;
margin: 0;
}
p {
font-size: 21px;
font-family: 'Gelasio', serif;
font-weight: 600;
margin: 0;
}
}
.stars {
.mat-icon {
font-size: 20px;
height: 22px;
width: 22px;
color: $theme-main;
}
}
.btn-wrap {
margin-top: 10px;
.view-more {
font-weight: 500;
color: $grey7;
cursor: pointer;
}
.bucket {
background: #dedede;
width: 38px;
height:38px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 49px;
cursor: pointer;
a {
mat-icon {
font-size: 21px;
}
}
}
}
.details-products {
.more-info {
margin-top: 15px;
overflow: hidden;
}
}
.icons {
position: absolute;
top: 30px;
right: -10px;
opacity: 0;
// transition: all .6s ease;
mat-icon {
color: $grey4;
cursor: pointer;
}
}
}
&:hover {
.icons {
opacity: 1;
transition: all .4s ease;
transform: translateX(-20px);
.ic-1 {
animation-delay: 2s;
}
.ic-2 {
animation: .5s ease-in-out fadeInRight;
}
.ic-3 {
animation: .7s ease-in-out fadeInRight;
}
}
}
}
}
}
}
.no-shadow {
box-shadow: none !important;
}
}
}
/***************************************
* Categories menu styles
****************************************/
.categories-menu-wrap {
.category-contant {
ul {
background-color: #403f3f;
li {
width: 14.285%;
transition: .3s;
a {
display: flex;
flex-direction: column;
line-height: 16px;
letter-spacing: -.13px;
color: #fff;
padding: 15px 16px 18px 16px;
justify-content: center;
text-align: center;
transition: .3s;
i {
margin-bottom: 5px;
}
&:hover {
color: $dark-font !important;
}
}
&:hover {
background: $theme-main;
color: $dark-font !important;
}
}
}
}
}
/***************************************
* Products styles
****************************************/
.home-5-wrap {
.products {
position: relative;
h3 {
margin-bottom: 0;
display: inline-block;
font-size: 22px;
font-weight: 500;
position: absolute;
top: 69px;
}
.mat-tab-labels {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
}
}
/***************************************
* Categories section styles
****************************************/
.home-5-wrap {
.categories {
background: $background;
.title {
position: relative;
margin-bottom: 15px;
padding-bottom: 1.25rem;
h3 {
margin-bottom: 0;
display: inline-block;
font-size: 22px;
font-weight: 500;
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: #e4e4e4;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: #222222;
bottom: 0.3125rem;
}
}
}
.left-section {
padding-right: 7px;
.item {
background: $white;
height: 100%;
padding: 20px;
border: 1px solid $grey2;
.product {
text-align: center;
img {
max-width: 40%;
}
}
.product-info {
display: flex;
flex-direction: row;
justify-content: center;
h4 {
margin-right: 15px;
a {
color: $font-color;
&:hover {
text-decoration: underline;
}
}
}
ul {
margin-left: 15px;
li {
a {
color: $grey;
font-size: 15px;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
}
.right-section {
padding-left: 7px;
.item {
background: $white;
height: 100%;
padding: 20px;
border: 1px solid $grey2;
.product {
text-align: center;
img {
max-width: 40%;
}
}
.product-info {
display: flex;
flex-direction: row;
justify-content: center;
h4 {
margin-right: 15px;
a {
color: $font-color;
&:hover {
text-decoration: underline;
}
}
}
li {
a {
color: $grey;
font-size: 15px;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
}
}
/***************************************
* Home footer-2 section styles
****************************************/
.footer-two {
background-color: $theme-main-dark;
.footer-widget {
padding-right: 15px;
.social {
margin-top: 20px;
li {
width: 33px;
height: 33px;
border: 1px solid $grey3;
border-radius: 50%;
text-align: center;
margin-right: 5px;
a {
color: $grey-light;
i {
color: $theme-main;
}
}
}
}
.ped-btn-footer {
border: 1px solid $theme-main;
color: $theme-main-dark !important;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 700;
margin-top: 20px;
padding: 0px 10px;
text-align: center;
text-transform: uppercase;
transition: all 0.4s ease 0s;
z-index: 222;
background: $theme-main;
width: 100%;
border-radius: 3px;
line-height: 45px;
}
.title {
margin-bottom: 10px;
h5 {
font-size: 18px;
font-weight: 600;
color: $white;
}
}
a {
text-decoration: none;
font-size: 15px;
line-height: 32px;
color: $grey-light;
}
.newsletter-widget {
position: relative;
margin: 15px 0 20px 0;
}
p {
line-height: 24px;
color: $grey-light;
}
ul {
list-style-type: none;
}
.about-widget {
.logo {
img {
max-width: 240px;
}
}
}
.tel-box {
.icon {
i {
color: $theme-main;
display: block;
line-height: 27px;
vertical-align: middle;
margin-right: 5px;
width: 18px;
text-align: center;
font-size: 18px;
}
}
.text {
p {
a {
line-height: 22px;
}
}
}
}
}
.subscribe-widget {
input {
height: 45px;
background: $white;
font-size: 15px;
line-height: 45px;
border: 1px solid $white-dark;
border-radius: 4px;
padding: 0 65px 0 20px;
color: $grey;
}
}
}
/***************************************
* Popular product page styles
****************************************/
.popular-products {
.reviews {
.content {
height: auto;
margin-bottom: 10px;
margin-left: -15px !important;
.media {
margin-right: 7px;
background: #ffffff;
border-radius: 0;
border: 1px solid #e1e1e1;
img {
max-width: 80px;
margin-right: 8px;
}
}
.info {
h5 {
color: rgba(0,0,0,.87);
text-decoration: none;
font-size: 17px;
font-weight: 600;
-webkit-transition: color .4s ease;
transition: color .4s ease;
}
.price {
font-weight: 400;
}
}
}
}
.title-header {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
h4 {
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: $grey6;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: $font-color;
bottom: 0.3125rem;
}
}
}
}
/***************************************
* My account page styles
****************************************/
.my-account {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.my-acc {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.my-account-wrap {
.title {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
> h2 {
}
&:before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: $grey6;
}
&:after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: $font-color;
bottom: 0.3125rem;
}
}
form {
.mat-form-field {
width: 100%;
margin-bottom: 10px;
}
}
.register-wrapper {
.register-body {
.mat-form-field {
width: 100%;
margin-bottom: 10px;
margin-top: 10px;
}
p {
font-size: 15px;
font-weight: 400;
line-height: 26px;
}
.button-wrap {
margin-top: 20px;
}
}
}
}
}
}
/***************************************
* Blog- column page styles
****************************************/
.blog-column {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.blog-column-wrapper {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.blog-list-wrapper {
.main-blog-panel {
.single-blog-list {
margin-bottom: 80px;
.image-box {
overflow: hidden;
padding-right: 10px;
img {
width: 100%;
}
}
.text-box {
margin-top: 10px;
h4 {
font-size: 24px;
margin-bottom: 7px;
}
p {
line-height: 26px;
margin-top: 16px;
}
ul {
li {
margin-right: 7px;
font-size: 14px;
mat-icon {
font-size: 20px;
line-height: 23px;
vertical-align: middle;
}
}
}
}
}
}
.sidebar {
padding-left: 15px;
.blog-sidebar {
.search {
position: relative;
input {
width: 100%;
height: 54px;
border: none;
border: 1px solid $grey6;
padding: 0 56px 0 12px;
color: $grey;
&:focus {
outline: none;
}
}
button {
height: 100%;
position: absolute;
top: 0;
right: 0;
color: $white;
border: none;
outline: none;
box-shadow: none
}
}
.single-sidebar-widget {
.post-widget {
.title {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
h4 {
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
margin-top: 10px;
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: $baners-background;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: $dark-font;
bottom: 0.3125rem;
}
}
}
ul {
li {
margin-top: 20px;
.icon-box {
width: 110px;
img {
width: 100%;
height: auto;
}
}
.text-box {
padding-left: 15px;
h5 {
font-weight: 500;
a {
color: $font-color;
}
}
}
}
}
p {
font-size: 14.5px;
line-height: 25px;
margin-bottom: 0;
}
}
.tags-widget {
ul {
li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
a {
padding: 6px 0;
display: block;
font-size: 12px;
border: 1px solid $grey6;
border-radius: 16px;
padding-left: 25px;
padding-right: 25px;
text-transform: uppercase;
color: $grey7;
font-weight: 600;
-webkit-transition: all .4s ease;
transition: all .4s ease;
&:hover {
background: $theme-main;
border-color: $theme-main;
color: $white;
}
}
}
}
}
}
}
}
}
}
}
/***************************************
* Blog-details page styles
****************************************/
.blog-details {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.blog-details-wrapper {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.blog-list-wrapper {
.main-blog-panel {
padding-right: 15px;
.single-blog-list {
.image-box {
overflow: hidden;
padding-right: 10px;
img {
width: 100%;
}
}
.text-box {
margin-top: 10px;
h4 {
font-size: 24px;
margin-bottom: 7px;
}
p {
line-height: 26px;
margin-top: 16px;
}
ul.post-info {
li {
margin-right: 7px;
font-size: 14.5px;
mat-icon {
font-size: 20px;
line-height: 23px;
vertical-align: middle;
}
}
}
.share-box {
margin: 25px 0 25px 0;
display: block;
/* clear: both; */
overflow: hidden;
.tag-box {
li {
display: inline-block;
margin-right: 4px;
a {
color: $dark-font;
}
}
}
.social-box {
.social {
li {
display: inline-block;
margin: 0;
padding: 0;
a {
width: 40px;
border-radius: 50%;
height: 40px;
color: $grey4;
text-align: center;
margin: 0 3px;
border: 1px solid $grey2;
display: block;
line-height: 41px;
transition: all 0.5s ease;
}
}
}
}
}
}
.author-box {
.post-author {
.inner {
position: relative;
padding: 30px 0px 25px;
border-top: 1px solid $grey6;
border-bottom: 1px solid $grey6;
.img-box {
width: 100px;
height: 100px;
overflow: hidden;
float: left;
margin-right: 10px;
img {
width: 100%;
height: auto;
}
}
.text-box {
padding: 0 10px;
line-height: 24px;
border-bottom: none;
margin: 0;
h5 {
color: $grey4;
font-size: 18px;
margin-bottom: 5px;
font-weight: 500;
}
p {
margin: 0;
}
}
}
}
}
.comments-area {
margin-top: 40px;
.group-title {
margin-bottom: 20px;
}
.comment-box {
position: relative;
margin-bottom: 35px;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
.comment {
position: relative;
font-size: 14px;
padding: 0px 0px 0px 80px;
.author-thumb {
position: absolute;
left: 0px;
top: 0px;
margin-bottom: 20px;
img {
width: 60px;
display: block;
}
}
.comment-inner {
position: relative;
padding: 15px 20px;
border: 1px solid $grey6;
.comment-info {
position: relative;
color: $grey4;
line-height: 24px;
font-size: 16px;
font-weight: 500;
}
.rating {
position: absolute;
right: 15px;
top: 15px;
span {
display: inline-block;
color: $theme-main;
font-size: 14px;
}
}
.text {
color: $grey;
font-size: 15px;
margin-top: 12px;
font-weight: 400;
line-height: 1.6em;
margin-bottom: 0px;
}
}
}
}
.reply-comment {
margin-left: 30px;
}
}
.contact-form {
margin-top: 40px;
}
}
}
.sidebar {
padding-left: 15px;
.blog-sidebar {
.search {
position: relative;
input {
width: 100%;
height: 54px;
border: none;
border: 1px solid $grey6;
padding: 0 56px 0 12px;
color: $grey;;
&:focus {
outline: none;
}
}
button {
height: 100%;
position: absolute;
top: 0;
right: 0;
color: $white;
border: none;
outline: none;
box-shadow: none
}
}
.single-sidebar-widget {
.post-widget {
.title {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
h4 {
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
margin-top: 10px;
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: $baners-background;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: $dark-font;
bottom: 0.3125rem;
}
}
}
ul {
li {
margin-top: 20px;
.icon-box {
width: 110px;
img {
width: 100%;
height: auto;
}
}
.text-box {
padding-left: 15px;
h5 {
font-weight: 500;
a {
color: $font-color;
}
}
}
}
}
p {
font-size: 14.5px;
line-height: 25px;
margin-bottom: 0;
}
}
.tags-widget {
ul {
li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
a {
padding: 6px 0;
display: block;
font-size: 12px;
border: 1px solid $grey6;
border-radius: 16px;
padding-left: 25px;
padding-right: 25px;
text-transform: uppercase;
color: $grey7;
font-weight: 600;
-webkit-transition: all .4s ease;
transition: all .4s ease;
&:hover {
background: $theme-main;
border-color: $theme-main;
color: $white;
}
}
}
}
}
}
}
}
}
}
}
/***************************************
* Blog-list page styles
****************************************/
.blog-list {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.blog-list-wrap {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.blog-list-wrapper {
.main-blog-panel {
padding-right: 15px;
.single-blog-list {
margin-bottom: 20px;
.image-box {
overflow: hidden;
padding-right: 10px;
img {
width: 100%;
}
}
.text-box {
padding: 0 10px;
a {
h4 {
font-size: 24px;
margin-bottom: 7px;
color: $theme-main-dark;
}
}
p {
line-height: 26px;
margin-top: 16px;
}
ul {
li {
margin-right: 7px;
font-size: 14px;
mat-icon {
font-size: 20px;
line-height: 23px;
vertical-align: middle;
margin-right: 0px;
}
}
}
}
}
}
.sidebar {
padding-left: 15px;
.blog-sidebar {
.search {
position: relative;
input {
width: 100%;
height: 54px;
border: none;
border: 1px solid $grey6;
padding: 0 56px 0 12px;
color: $grey;;
&:focus {
outline: none;
}
}
button {
height: 100%;
position: absolute;
top: 0;
right: 0;
color: $white;
border: none;
outline: none;
box-shadow: none
}
}
.single-sidebar-widget {
.post-widget {
.title {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
h4 {
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
margin-top: 10px;
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: $baners-background;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: $dark-font;
bottom: 0.3125rem;
}
}
}
ul {
li {
margin-top: 20px;
.icon-box {
width: 110px;
img {
width: 100%;
height: auto;
}
}
.text-box {
padding-left: 15px;
h5 {
font-weight: 500;
a {
color: $font-color;
}
}
}
}
}
p {
font-size: 14.5px;
line-height: 25px;
margin-bottom: 0;
}
}
.tags-widget {
ul {
li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
a {
padding: 6px 0;
display: block;
font-size: 12px;
border: 1px solid $grey6;
border-radius: 16px;
padding-left: 25px;
padding-right: 25px;
text-transform: uppercase;
color: $grey7;
font-weight: 600;
-webkit-transition: all .4s ease;
transition: all .4s ease;
&:hover {
background: $theme-main;
border-color: $theme-main;
color: $white;
}
}
}
}
}
}
}
}
}
}
}
/***************************************
* Price slider styles
****************************************/
.price-slider {
.filter-price {
.mat-slider-horizontal {
min-width: 110px;
}
}
}
/***************************************
* Product dialog styles
****************************************/
.product-dialog {
.mat-dialog-container {
overflow: visible;
}
.swiper-container {
.swiper-wrapper {
img.img-fluid {
margin:0 auto;
max-width: 100%;
}
}
}
.swiper-wrapper {
width: 84%;
height: auto;
}
.product-right {
padding: 0 30px;
.product-details {
h2 {
margin: 0;
}
.stars {
mat-icon {
color: $theme-main;
font-size: 18px;
width: 21px;
}
}
.prices {
margin-top: 15px;
h4 {
margin-top: 7px;
margin-right: 10px;
span {
padding-left: 5px;
color: $theme-main-red;
font-size: 25px;
}
del {
color: $grey;
font-size: 18px;
}
}
h3.price {
font-size: 26px;
font-weight: 400;
margin: 0;
}
}
.discription {
padding-top: 15px;
padding-bottom: 20px;
border-top: 1px dashed $grey-light;
border-bottom: 1px dashed $grey-light;
.bold {
font-weight: 600;
margin-top: 0;
}
p.productDescription {
line-height: 24px;
margin-top: 5px;
margin-bottom: 0;
}
}
}
.quantity {
padding-top: 20px;
.counter {
position: relative;
margin-right: 10px;
input {
width: 71px;
text-align: center;
background-color: $gray-lighter;
height: 50px;
border: none;
padding-right: 24px;
}
.add {
background-color: #e0e0e0;
border-left: 0;
cursor: pointer;
font-size: 20px;
height: 24px;
line-height: 21px;
position: absolute;
right: 0;
-webkit-transition: background-color .2s ease-out;
-o-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
width: 25px;
border-radius: 0;
}
.remove {
background-color: #e0e0e0;
border-left: 0;
cursor: pointer;
font-size: 20px;
height: 24px;
line-height: 21px;
position: absolute;
right: 0px;
-webkit-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
width: 25px;
bottom: 0px;
border-radius: 0;
z-index: 99;
}
}
span {
margin-bottom: 5px;
}
}
.avalibility {
.red {
color: $theme-main-red;
font-weight: 500;
}
}
}
.mat-dialog-container {
.close-btn-outer button {
position: absolute;
right: -44px;
top: -42px;
}
}
.product-dialog {
.close-btn-outer {
position: relative;
}
}
}
.product-pagination .ngx-pagination {
margin-left: 0;
margin-bottom: 1rem;
text-align: center;
padding: 10px 5px;
font-size: 14px;
}
.product-pagination .ngx-pagination .current {
padding: 4px 12px;
background: $grey4;
color: $white;
cursor: default;
border-radius: 2px;
line-height: 22px;
}
.product-dialog .mat-dialog-content {
max-width: 52vw;
}
/***************************************
* Popular products styles
****************************************/
.popular-products {
.reviews {
.stars {
color: $theme-main;
margin: 0px 0 5px 0;
span {
color: $grey3;
font-size: 13px;
margin-left: 10px;
}
mat-icon{
font-size: 17px;
line-height: 17px;
height: 17px;
width: 17px;
vertical-align: middle;
}
}
}
}
.mega-menu-pane {
.mat-menu-panel{
width: 668px !important;
.mat-menu-content {
width: 100% !important;
}
}
}
/***************************************
* Error page styles
****************************************/
.error {
text-align: center;
.page404 {
font-size: 67px;
font-weight: 700;
color: $grey;
margin-bottom: 30px;
}
.not-found {
font-size: 39px;
font-weight: 700;
color: $font-color;
margin-bottom: 30px;
}
.error_description {
margin-bottom: 30px;
p {
font-weight: 600;
}
}
button {
background: $theme-main;
color: $font-color;
padding: 5px 33px;
width: 200px;
}
}
/***************************************
* FAQ page styles
****************************************/
.faq {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.faq-wrapper {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
}
.questions {
padding-right: 15px;
.faq-wrap {
.mat-expansion-panel {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border: 1px solid $grey-light;
box-shadow: none;
margin-bottom: 20px;
.mat-expansion-panel-header-title {
span {
font-size: 17px;
text-transform: capitalize;
font-weight: 500;
line-height: 1;
}
}
.mat-expansion-panel-body {
p {
line-height: 24px;
}
}
}
}
}
.faq-form {
padding-left: 15px;
.text-wrap {
p {
line-height: 26px;
}
}
form {
margin: 30px 0;
}
}
}
/***************************************
* About us page styles
****************************************/
.about-us-wrapper {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.about-section {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.left-info-panel {
overflow: hidden;
.about-us-intro {
h2 {
margin-bottom: 20px;
}
p {
line-height: 26px;
}
.accordions {
margin-top: 20px;
.mat-expansion-panel {
margin-bottom: 10px;
box-shadow: none;
border: 1px solid $grey6;
border-radius: 5px;
h4 {
font-weight: 500;
}
}
}
}
}
}
.our-values {
background: $baners-background;
.box-wraper {
.box {
padding-left: 15px;
padding-right: 15px;
.content {
padding: 41px 20px 31px;
background: $white;
.icon-box {
i {
font-size: 55px;
color: $theme-main;
}
}
h4 {
font-weight: 500;
font-size: 22px;
margin-bottom: 5px;
margin-bottom: 10px;
}
p {
line-height: 26px;
}
}
}
}
}
.title-wrapper {
text-align: center;
margin-bottom: 35px;
h2 {
margin-bottom: 10px;
}
p {
color: $grey;
}
}
.our-team {
.team-members {
.item {
padding-left: 15px;
padding-right: 15px;
.single-team-member {
transition: .3s;
.img-box {
position: relative;
img {
width: 100%;
-webkit-transition: opacity .4s ease;
transition: opacity .4s ease;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.box {
display: table;
width: 100%;
height: 100%;
.content {
display: table-cell;
vertical-align: bottom;
overflow: hidden;
ul {
background: $theme-main;
margin: 0;
margin-left: -12px;
margin-right: -12px;
-webkit-transform: translate3d(0, 35px, 0);
transform: translate3d(0, 35px, 0);
-webkit-transition: -webkit-transform .4s ease, visibility .4s ease, opacity .4s ease;
transition: transform .4s ease, visibility .4s ease, opacity .4s ease;
visibility: hidden;
li {
padding: 0 12px;
i {
color: $font-color;
font-size: 16px;
line-height: 35px;
display: block;
}
}
}
}
}
}
}
.text-box {
border: 1px solid $gray-lighter;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: .4s ease;
transition: .4s ease;
}
&:hover {
.img-box {
img {
opacity: .4;
}
.overlay {
.box {
.content {
.social {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
}
}
}
}
.text-box {
background: #18191d;
h4 {
color: $white;
}
p {
color: $white;
}
}
}
}
}
}
}
}
/***************************************
* Checkout page styles
****************************************/
.checkout-wrapper {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.checkout {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.billing-details {
.mat-form-field {
width: 100%;
}
.add-info {
margin-top: 15px;
}
}
.mainOrder-wrapper {
.main-order {
border: 1px solid $grey8;
padding: 30px;
.order-box {
.title-box {
position: relative;
padding-bottom: 25px;
color: $grey4;
font-weight: 500;
font-size: 20px;
border-bottom: 1px solid $grey6;
margin-bottom: 20px;
span.tl-amount {
position: relative;
width: 35%;
float: right;
line-height: 1.2em;
}
}
ul.price-list {
position: relative;
border-bottom: 1px solid $grey6;
margin-bottom: 30px;
padding-bottom: 20px;
li {
line-height: 44px;
span {
position: relative;
width: 35%;
float: right;
font-size: 20px;
}
}
}
}
ul.total-amount {
position: relative;
border-bottom: 1px solid $grey6;
margin-bottom: 30px;
padding-bottom: 20px;
.shipping {
width: 35%;
float: right;
.shopping-option {
line-height: 30px;
}
}
li {
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 500;
color: $font-color;
line-height: 20px;
margin-bottom: 20px;
width: 100%;
span.amount{
position: relative;
font-size: 20px;
line-height: 20px;
color: $theme-main-red;
font-weight: 400;
width: 35%;
float: right;
}
}
}
ul.quantity {
position: relative;
border-bottom: 1px solid $grey6;
margin-bottom: 30px;
padding-bottom: 20px;
li {
span.total{
position: relative;
font-size: 20px;
line-height: 20px;
color: $theme-main-red;
font-weight: 400;
width: 35%;
float: right;
}
}
}
ul.total {
position: relative;
border-bottom: 1px solid $grey6;
margin-bottom: 30px;
padding-bottom: 20px;
li {
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 500;
color: $font-color;
line-height: 20px;
margin-bottom: 20px;
width: 100%;
span.count {
position: relative;
font-size: 20px;
line-height: 20px;
color: $theme-main-red;
font-weight: 400;
width: 35%;
float: right;
}
}
}
.paymentFinal {
margin-bottom: 20px;
line-height: 34px;
}
}
}
}
}
.mat-radio-label-content {
color: $grey5;
font-weight: 400;
}
/***************************************
* Cart page styles
****************************************/
.cart-wrapper {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.cart {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.mat-card {
text-align: center;
.cart-table.mat-table {
display: block;
overflow-x:auto;
.mat-row{
min-height: 100px;
min-height: 100px;
border-bottom: 1px solid $grey2;
.product-name{
color: inherit;
text-decoration: none;
font-weight: 500;
}
.grand-total{
font-weight: 500;
}
span:nth-child(3){
font-size: 16px;
}
input {
width: 80px;
text-align: center;
background-color: $grey2;
height: 35px;
border: 1px solid $grey6;
}
.price {
font-size: 21px;
font-weight: 500;
}
.total {
font-size: 21px;
font-weight: 500;
color: $theme-main-red;
}
}
.mat-cell, .mat-header-cell {
flex: 1;
overflow: hidden;
word-wrap: break-word;
font-size: 14px;
mat-icon {
cursor: pointer;
}
img{
width: 100px;
}
}
}
}
}
}
/***************************************
* Wishlist page styles
****************************************/
.wishlist-wrapper {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.wishlist {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.cart-wrapper {
.mat-card {
text-align: center;
.cart-table.mat-table {
display: block;
overflow-x:auto;
.mat-row{
min-height: 100px;
min-height: 100px;
border-bottom: 1px solid $grey2;
.product-name{
color: inherit;
text-decoration: none;
font-weight: 500;
}
.grand-total{
font-weight: 500;
}
span:nth-child(3){
font-size: 16px;
}
input {
width: 80px;
text-align: center;
background-color: $grey2;
height: 35px;
border: 1px solid $grey6;
}
.price {
font-size: 21px;
font-weight: 500;
}
.total {
font-size: 21px;
font-weight: 500;
color: $theme-main-red;
}
}
.mat-cell, .mat-header-cell {
flex: 1;
overflow: hidden;
word-wrap: break-word;
font-size: 14px;
mat-icon {
cursor: pointer;
}
img{
width: 100px;
}
}
}
}
}
}
}
.mat-row, .mat-header-row {
display: flex;
border-bottom-width: 1px;
border-bottom-style: solid;
align-items: center;
min-height: 48px;
padding: 0 24px;
min-width: 870px;
}
/***************************************
* Compare page styles
****************************************/
.compare-component {
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
table {
width: 100%;
border: 1px solid $grey2;
thead {
.th-compare {
td {
padding: 15px;
vertical-align: top;
border-bottom: 1px solid $grey2;
border-top: 1px solid $grey2;
border-right: 1px solid $grey2;
background: $gray-lighter;
font-weight: 600;
font-size: 14px;
}
a {
cursor: pointer;
}
}
}
tbody {
tr {
th {
padding: 15px;
vertical-align: top;
border-bottom: 1px solid $grey2;
border-top: 1px solid $grey2;
border-right: 1px solid $grey2;
background: $gray-lighter;
text-align: left;
}
.product-name {
width: 15%;
font-size: 14px;
}
td {
.description-compare {
font-size: 14px;
line-height: 22px;
}
}
}
}
}
}
img.img-fluid.mb-4 {
max-width: 100px;
}
.empty-cart-cls {
h4 {
font-weight: 500;
color: $grey5;
}
h3 {
text-align: center;
}
}
}
.compare-component .table-responsive .table tbody tr td, .compare-component .table-responsive .table tbody tr th {
padding: 15px;
vertical-align: top;
border-top: 1px solid $grey2;
}
/***************************************
* Details page styles
****************************************/
.main-details-wrap {
.header-title {
background-size: cover;
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.details-wrapper {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.product-image {
box-shadow: none !important;
border: 1px solid $grey8;
border-radius: 0;
img {
max-width: 100%;
}
a {
cursor: pointer;
}
}
.product-right {
padding: 0 30px 0 25px;
.product-details {
padding-bottom: 15px;
border-bottom: 1px dashed $grey-light;
h2 {
margin-bottom: 10px;
}
h4 {
del {
color: $grey;
font-size: 17px;
}
span {
padding-left: 5px;
color: $theme-main-red;
font-size: 24px;
}
}
.avalibility {
padding-bottom: 15px;
span {
color: $theme-main-red;
font-weight: 500;
}
}
p.description {
line-height: 26px;
}
h3.price {
font-size: 26px;
font-weight: 400;
margin: 10px 0;
}
}
.py-1 {
.red {
font-weight: 600;
color:$theme-main;
}
}
.quantity {
margin-top: 10px;
span {
margin-bottom: 0;
display: block;
.mat-icon {
font-weight: 300;
font-size: 20px;
}
}
.quantity-box {
border: 1px solid $grey8;
margin-right: 10px;
input {
width: 48px;
text-align: center;
background-color: #fff;
height: 100%;
border: none;
border-left: 1px solid $grey8;
border-right: 1px solid $grey8;
}
button {
line-height: 44px;
}
}
}
.social-icons {
padding-top: 15px;
border-top: 1px dashed $grey-light;
ul {
li {
width: 33px;
height: 33px;
border: 1px solid $grey3;
border-radius: 50%;
text-align: center;
margin-right: 5px;
a {
text-decoration: none;
font-size: 15px;
line-height: 32px;
color: $grey-light;
i {
color: $grey4;
}
}
}
}
}
}
.info-bar {
border: 1px solid $grey-light;
padding: 0 20px;
margin-top: 0px !important;
.mat-icon{
color: $font-color;
font-size: 41px;
margin-right: 15px;
line-height: 23px;
}
.content {
p {
text-transform: capitalize;
font-weight: 500;
}
}
.mat-card {
box-shadow: none !important;
padding: 20px 0;
border-bottom: 1px solid $grey-light;
}
.mat-card.no-border {
border-bottom: none;
}
}
.review-wrapper {
padding-right: 30px;
margin-top: 30px;
.mat-tab-label {
color: #333333 !important;
height: 48px;
padding: 0 24px;
cursor: pointer;
box-sizing: border-box;
/* opacity: 0.1; */
min-width: 33%;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap;
position: relative;
background: #f4f4f4;
margin: 0 2px;
.mat-tab-label-content {
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap;
color: #333333 !important;
font-family: "Gelasio", serif;
font-weight: 600;
font-size: 15px;
}
}
.full-desc {
padding: 20px;
p {
line-height: 24px;
}
ul {
margin-top: 15px;
padding-left: 20px;
li {
margin-bottom: 7px;
}
}
}
.Reviews {
.reviews {
.name {
font-weight: 500;
}
p {
line-height: 22px;
white-space: normal;
}
.text {
margin-top: 10px;
}
.mat-list-item {
.mat-list-item-content {
align-items: start !important;
}
}
}
}
.writte-reviews {
.mat-form-field {
width: 100%;
}
.rating {
h3 {
font-size: 22px;
margin-top: 20px;
}
}
.btn-project {
background: $theme-main;
padding: 3px 32px;
color: #ffffff;
border: 2px solid $theme-main;
border-radius: 0;
transition: 0.3s;
&:hover {
background: $white;
color: $theme-main;
border: 2px solid $theme-main;
}
}
}
.products {
padding-right: 30px;
.title {
margin-bottom: 15px;
position: relative;
padding-bottom: 1.25rem;
&::before {
content: "";
left: 0;
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0.34375rem;
background-color: #f6f6f6;
}
&::after {
content: "";
left: 0;
position: absolute;
width: 2.5rem;
height: 0.125rem;
background-color: #222222;
bottom: 0.3125rem;
}
}
}
}
.sale-widget {
padding: 15px 20px;
background: $grey4;
text-align: center;
margin-bottom: 25px;
margin-top: 25px;
.sale-widget1 {
color: $white;
font-size: 36px;
font-weight: 600;
display: block;
letter-spacing: .5;
}
.sale-widget2 {
color: $white;
font-size: 18px;
font-weight: 600;
display: block;
letter-spacing: .5;
}
.discount {
display: inline-block;
color: $white;
font-size: 77px;
font-weight: 600;
position: relative;
letter-spacing: .5;
}
.percent {
display: inline-block;
line-height: 31px;
color: $white;
span {
display: block;
font-size: 3.067em;
font-weight: 500;
color: $white;
}
}
p {
color: $white;
line-height: 24px;
font-weight: 300;
font-size: 15px;
}
}
.small-carousel {
.swiper-slide {
mat-card {
img {
max-width: 110px;
margin-bottom: 12px;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
}
}
}
.small-carousel {
position: relative;
margin-top: 10px;
.swiper-container {
height: 180px;
.swiper-slide {
mat-card {
max-height: 120px;
min-height: 120px;
}
}
.swiper-button-prev {
position: absolute;
top: 32%;
left: 0px;;
}
.swiper-button-next {
position: absolute;
top: 32%;
right: 0px;;
}
}
}
.product-item {
position: relative;
overflow: hidden;
// transition: all .5s ease;
mat-card {
padding: 0;
box-shadow: none;
border: 1px solid $grey6;
.product-img {
text-align: center;
cursor: pointer;
img {
max-width: 180px;
}
}
.product-info-wrapper {
background: #f9f9f9;
padding: 15px;
.category {
text-align: left;
font-weight: 400;
color: $grey7;
}
.title-wrap {
margin: 7px 0;
h4 {
font-size: 21px;
margin: 0;
}
p {
font-size: 21px;
font-family: 'Gelasio', serif;
font-weight: 600;
margin: 0;
}
}
.stars {
.mat-icon {
font-size: 20px;
height: 22px;
width: 22px;
color: $theme-main;
}
}
.btn-wrap {
margin-top: 10px;
.view-more {
font-weight: 500;
color: $grey7;
cursor: pointer;
}
.bucket {
background: #dedede;
width: 38px;
height:38px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 49px;
cursor: pointer;
a {
mat-icon {
font-size: 21px;
}
}
}
}
.details-products {
.more-info {
margin-top: 15px;
overflow: hidden;
}
}
.icons {
position: absolute;
top: 30px;
right: -10px;
opacity: 0;
// transition: all .6s ease;
mat-icon {
color: $grey4;
cursor: pointer;
}
}
}
&:hover {
.icons {
opacity: 1;
transition: all .4s ease;
transform: translateX(-20px);
.ic-1 {
animation-delay: 2s;
}
.ic-2 {
animation: .5s ease-in-out fadeInRight;
}
.ic-3 {
animation: .7s ease-in-out fadeInRight;
}
}
}
}
}
.title {
margin-bottom: 22px;
}
}
.no-bg {
background: transparent !important;
.title {
h4 {
font-size: 22px;
}
}
}
}
.product-slick.product-zoom.slick-initialized.slick-slider {
z-index: 1;
}
.mat-list-base .mat-list-item.mat-3-line, .mat-list-base .mat-list-option.mat-3-line {
height: 100% !important;
margin-bottom: 20px;
}
/***************************************
* Brands page styles
****************************************/
.brands-items {
.mat-radio-button {
margin-bottom: 15px;
}
.mat-radio-button.mat-accent .mat-radio-inner-circle {
background: $theme-main-red !important;
}
}
/***************************************
* Categorie page styles
****************************************/
.category-contant {
ul {
li {
a {
color: $grey;
padding-bottom: 10px;
display: block;
font-size: 15px;
}
}
}
}
/***************************************
* Contact us page styles
****************************************/
.contact-page {
.header-title {
padding: 130px 0;
position: relative;
.title {
text-align: center;
h2 {
color: $white;
font-size: 52px;
margin: 0;
}
p {
color: $white;
line-height: 26px;
margin: 0;
}
}
}
.contact-wrap {
position: relative;
top: -15px;
background-size: auto 75px;
background-repeat: repeat-x;
background-position: center 0;
.left-info-panel {
padding-right: 100px;
.get-in-touch {
.title {
margin-bottom: 15px;
h3 {
font-size: 24px;
}
}
p {
line-height: 26px;
color: $grey7;
}
}
.address {
.title {
margin-bottom: 15px;
h3 {
font-size: 24px;
}
}
ul {
list-style-type: none;
padding: 0;
> *:not(:last-child) {
padding-bottom: 10px;
}
li {
.icon {
width: 35px;
height: 35px;
background: #dedede;
border-radius: 50%;
text-align: center;
margin-right: 7px;
i {
font-size: 21px;
line-height: 34px;
margin-right: 0;
text-align: center;
color: $grey4;
}
}
h4{
display: inline-block;
font-size: 20px;
}
}
}
}
.hours {
.title {
margin-bottom: 15px;
h3 {
font-size: 24px;
}
}
ul {
list-style-type: none;
padding: 0;
> *:not(:last-child) {
padding-bottom: 10px;
}
li {
.icon {
text-align: center;
margin-right: 7px;
i {
font-size: 21px;
line-height: 33px;
margin-right: 0;
text-align: center;
color: $grey-dark;
}
}
h4{
display: inline-block;
font-size: 20px;
}
}
}
}
}
}
.devider {
padding: 0px; margin: 20px 0;
}
.contact-form {
.title {
margin-bottom: 15px;
h3 {
font-size: 24px;
}
}
.w-100 {
width: 100% !important;
}
.mat-form-field {
caret-color: $theme-main !important;
font-size: 14px !important;
.mat-input-element {
caret-color: $theme-main !important;
}
}
.px-1 {
margin-bottom: 15px;
}
}
.button-wrap {
.btn-project {
background: $theme-main;
padding: 3px 32px;
color: $white;
border-radius: 0;
transition: 0.3s;
}
}
.map {
agm-map {
height: 400px;
}
margin-bottom: 15px;
}
}
@media screen and (max-width: 599px) {
.contact-page {
.left-info-panel {
padding-right: 0px;
width: 100%;
}
}
}
.sidenav {
.divider {
margin: 10px 0;
}
}
:host {
display: flex;
flex-direction: column;
outline: none;
width: 100%;
.mat-list-item.active {
background-color: mat-color($theme-main, 50);
}
&:hover,
&:focus {
>.mat-list-item:not(.expanded) {
background-color: mat-color($theme-main, 100) !important;
}
}
}
.mat-list-item {
padding: 10px 0;
display: flex;
width: auto;
.mat-list-item-content {
width: 100%;
}
.routeIcon {
margin-right: 40px;
}
}
