/*
Theme Name: Beeberry HTML5 Template
Theme URI: https://themeforest.net/item/beeberry-beekeeping-and-honey-online-shop-html5-template/43618342
Design by: techsometimes
Developed by: A N Abdullah Al Numan
Version: 2.3.1
License:
Tags:
*/
@import url("https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@400;500;700;800;900&family=Roboto:wght@400;500;700&display=swap");
:root {
--color-white: #fff;
--color-white2: #f9f6f2;
--color-white3: #e2d9d2;
--color-black: #2b221f;
--color-black2: #201a18;
--color-black3: #3f3532;
--color-gBlack: #50413c;
--color-gBlack2: #aca5a3;
--color-yellow: #fcc41a;
--color-green: #639533;
--color-border: #e5e1dd;
--color-fb: #3b5998;
--color-tw: #00acee;
--color-pin: #c8232c;
--color-in: #8a3ab9;
--color-tr: transparent
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
.ban {
height: 80vh; /* Full-screen height */
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.ban-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; /* Send the image to the back */
}
.ban-cont {
text-align: center;
color: #FFFFFF;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.ban-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.ban-btn {
padding: 10px 20px;
font-size: 1.2rem;
font-weight: 600;
color: #FFFFFF;
background-color: transparent;
border: 1px solid black;
border-radius: 5px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.ban-btn:hover {
background-color: transparent;
color: #FFFFFF;
border: 1px solid white;
text-decoration: none;
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
[hidden],
template {
display: none
}
*,
:after,
:before,
a,
abbr,
address,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
cite,
code,
dd,
del,
div,
dl,
dt,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
iframe,
img,
li,
mark,
menu,
nav,
ol,
p,
pre,
q,
section,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
video {
margin: 0;
padding: 0;
border: 0
}
*,
:after,
:before {
outline: none;
box-sizing: border-box
}
article,
aside,
footer,
header,
nav,
section {
display: block
}
table {
border-collapse: collapse;
border-spacing: 0
}
li,
ol,
ul {
list-style: none
}
img {
vertical-align: middle
}
iframe {
max-width: 100%
}
del {
text-decoration: line-through
}
table {
width: 100%;
max-width: 100%
}
table th {
vertical-align: top
}
pre {
display: block;
word-break: break-all;
word-wrap: break-word
}
textarea {
resize: none
}
b,
strong {
font-weight: 700
}
blockquote,
q {
quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: "";
content: none
}
.uneditable-input,
input,
select,
textarea {
border-radius: 0;
font-size: 14px;
min-width: auto;
letter-spacing: 1.4px;
box-sizing: border-box;
line-height: 1.6;
height: 50px;
padding: 0 20px;
vertical-align: middle
}
.uneditable-input:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
box-shadow: 0 0 0 0 rgba(0, 123, 255, .25)
}
input[type=submit] {
padding: 13px 15px;
height: 40px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
letter-spacing: .5px;
border: none
}
input[type=button],
input[type=submit] {
cursor: pointer
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl,
.row {
--bs-gutter-x: 1.875rem
}
html {
overflow-x: hidden
}
body {
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 25px;
letter-spacing: .2px;
word-spacing: 0;
word-wrap: break-word;
background: var(--color-white)
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Arima Madurai, cursive;
color: var(--color-black)
}
h1 {
font-size: 54px;
line-height: 66px
}
h2 {
font-size: 48px;
line-height: 60px
}
h3 {
font-size: 32px;
line-height: 44px
}
h4 {
font-size: 24px;
line-height: 36px
}
h5 {
font-size: 20px;
line-height: 30px
}
h6 {
font-size: 18px;
line-height: 28px
}
p {
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
line-height: 26px;
color: var(--color-gBlack)
}
.color-green {
color: var(--color-green)
}
.btn,
a,
button {
outline: none;
cursor: pointer;
color: var(--color-black);
transition: all .4s ease
}
.btn:hover,
a:hover,
button:hover {
color: var(--color-yellow);
outline: none
}
a,
a:hover {
text-decoration: none
}
a:hover {
color: var(--color-yellow)
}
.btn,
.btn:focus {
outline: none;
box-shadow: 0 0 0 0 rgba(0, 123, 255, .25)
}
.uneditable-input,
input,
select,
textarea {
transition: all .4s ease
}
section {
padding: 65px 0
}
section.pt-spach {
padding-top: 200px
}
section.pb-spach {
padding-bottom: 200px
}
section.mt-spach {
margin-top: -100px
}
section.mb-spach {
margin-bottom: -100px
}
.menu-bar.v1,
.menu-bar.v2 {
position: fixed;
padding: 20px 0;
width: 100%;
left: 0;
top: 0;
z-index: 5
}
.menu-bar.v1 .main-menu>ul,
.menu-bar.v1 .menu-bar-content,
.menu-bar.v1 .menu-right>ul,
.menu-bar.v2 .main-menu>ul,
.menu-bar.v2 .menu-bar-content,
.menu-bar.v2 .menu-right>ul {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.menu-bar.v1 .menu-bar-content,
.menu-bar.v2 .menu-bar-content {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px
}
.menu-bar.v1 .menu-logo,
.menu-bar.v2 .menu-logo {
max-width: 130px
}
.menu-bar.v1 .menu-logo a,
.menu-bar.v2 .menu-logo a {
display: inline-block
}
.menu-bar.v1 .menu-logo img,
.menu-bar.v2 .menu-logo img {
width: 100%
}
.menu-bar.v1 .main-menu,
.menu-bar.v2 .main-menu {
display: none
}
.menu-bar.v1 .main-menu>ul,
.menu-bar.v2 .main-menu>ul {
gap: 30px
}
.menu-bar.v1 .main-menu>ul>li>a,
.menu-bar.v2 .main-menu>ul>li>a {
position: relative;
display: inline-block;
text-transform: uppercase;
font-weight: 700
}
.menu-bar.v1 .main-menu li,
.menu-bar.v2 .main-menu li {
position: relative
}
.menu-bar.v1 .main-menu li ul,
.menu-bar.v2 .main-menu li ul {
padding-top: 0;
position: absolute;
min-width: 220px;
gap: 0;
top: 120%;
opacity: 0;
visibility: hidden;
z-index: 4;
transition: all .4s ease;
-ms-flex-direction: column;
flex-direction: column;
box-shadow: 0 0 30px rgba(0, 0, 0, .09)
}
.menu-bar.v1 .main-menu li ul li:hover>ul,
.menu-bar.v2 .main-menu li ul li:hover>ul {
top: 0
}
.menu-bar.v1 .main-menu li:hover>ul,
.menu-bar.v2 .main-menu li:hover>ul {
top: 100%;
opacity: 1;
visibility: visible
}
.menu-bar.v1 .main-menu li li~li,
.menu-bar.v2 .main-menu li li~li {
border-top: 1px dashed var(--color-yellow)
}
.menu-bar.v1 .main-menu li li a,
.menu-bar.v2 .main-menu li li a {
display: block;
padding: 15px 35px;
font-weight: 500
}
.menu-bar.v1 .main-menu li li.active>a,
.menu-bar.v1 .main-menu li li:hover>a,
.menu-bar.v2 .main-menu li li.active>a,
.menu-bar.v2 .main-menu li li:hover>a {
color: var(--color-yellow)
}
.menu-bar.v1 .menu-right>ul,
.menu-bar.v2 .menu-right>ul {
gap: 20px;
-ms-flex-pack: end;
justify-content: flex-end
}
.menu-bar.v1 .menu-right>ul>li:first-child,
.menu-bar.v1 .menu-right>ul>li:nth-child(2),
.menu-bar.v2 .menu-right>ul>li:first-child,
.menu-bar.v2 .menu-right>ul>li:nth-child(2) {
display: none
}
.menu-bar.v1 .menu-right .top-bar-search,
.menu-bar.v2 .menu-right .top-bar-search {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
opacity: 0;
visibility: hidden;
transition: all .4s ease
}
.menu-bar.v1 .menu-right .top-bar-search .search-overlay,
.menu-bar.v2 .menu-right .top-bar-search .search-overlay {
position: fixed;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .8;
z-index: -1;
background: #000
}
.menu-bar.v1 .menu-right .top-bar-search .search-close,
.menu-bar.v2 .menu-right .top-bar-search .search-close {
position: absolute;
padding: 0;
top: 120px;
font-size: 24px;
color: var(--color-white);
background: var(--color-tr)
}
.menu-bar.v1 .menu-right .top-bar-search .search-close:hover,
.menu-bar.v2 .menu-right .top-bar-search .search-close:hover {
color: var(--color-yellow)
}
.menu-bar.v1 .menu-right .top-bar-search form,
.menu-bar.v2 .menu-right .top-bar-search form {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
position: absolute;
width: 50%;
height: 70px;
top: 50%;
left: 50%;
border-bottom: 1px solid var(--color-border);
background: var(--color-tr);
transform: translate(-50%, -150%) scale(.8);
transition: all .4s ease
}
.menu-bar.v1 .menu-right .top-bar-search form input,
.menu-bar.v2 .menu-right .top-bar-search form input {
width: calc(100% - 40px);
height: 100%;
font-size: 24px;
color: var(--color-white);
background: var(--color-tr)
}
.menu-bar.v1 .menu-right .top-bar-search form button,
.menu-bar.v2 .menu-right .top-bar-search form button {
width: 70px;
height: 100%;
padding: 0;
color: var(--color-white);
font-size: 24px;
background: var(--color-tr)
}
.menu-bar.v1 .menu-right .top-bar-search form button:hover,
.menu-bar.v2 .menu-right .top-bar-search form button:hover {
color: var(--color-yellow)
}
.menu-bar.v1 .menu-right .top-bar-search.active,
.menu-bar.v2 .menu-right .top-bar-search.active {
opacity: 1;
visibility: visible
}
.menu-bar.v1 .menu-right .top-bar-search.active form,
.menu-bar.v2 .menu-right .top-bar-search.active form {
transform: translate(-50%, -50%) scale(1)
}
.menu-bar.v1 .menu-right .search-open-btn,
.menu-bar.v1 .menu-right .shop-card-btn .my-icon,
.menu-bar.v1 .menu-right .wishlist-btn,
.menu-bar.v2 .menu-right .search-open-btn,
.menu-bar.v2 .menu-right .shop-card-btn .my-icon,
.menu-bar.v2 .menu-right .wishlist-btn {
margin-bottom: 2px;
position: relative;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 80px;
z-index: 1;
font-size: 18px;
box-shadow: 0 2px 0 var(--color-yellow)
}
.menu-bar.v1 .menu-right .shop-card-btn .my-icon,
.menu-bar.v2 .menu-right .shop-card-btn .my-icon {
display: inline-block
}
.menu-bar.v1 .menu-right .shop-card-btn,
.menu-bar.v1 .menu-right .wishlist-btn,
.menu-bar.v2 .menu-right .shop-card-btn,
.menu-bar.v2 .menu-right .wishlist-btn {
display: inline-block;
position: relative
}
.menu-bar.v1 .menu-right .shop-card-btn .count,
.menu-bar.v1 .menu-right .wishlist-btn .count,
.menu-bar.v2 .menu-right .shop-card-btn .count,
.menu-bar.v2 .menu-right .wishlist-btn .count {
position: absolute;
width: 22px;
height: 22px;
text-align: center;
font-size: 10px;
font-weight: 500;
line-height: 22px;
border-radius: 50px;
color: var(--color-black);
top: -5px;
z-index: 1;
background: var(--color-yellow)
}
.menu-bar.v1 .menu-right .shop-card-btn,
.menu-bar.v2 .menu-right .shop-card-btn {
background: var(--color-tr)
}
.menu-bar.v1 .menu-right .shop-card-btn .price,
.menu-bar.v2 .menu-right .shop-card-btn .price {
display: none;
font-size: 14px;
line-height: 24px;
font-weight: 700
}
.menu-bar.v1 .menu-right .shop-card-list .offcanvas-backdrop.show,
.menu-bar.v2 .menu-right .shop-card-list .offcanvas-backdrop.show {
opacity: .8
}
.menu-bar.v1 .menu-right .mobile-menu-btn,
.menu-bar.v2 .menu-right .mobile-menu-btn {
position: relative;
width: 35px;
height: 25px;
background: var(--color-tr)
}
.menu-bar.v1 .menu-right .mobile-menu-btn span,
.menu-bar.v2 .menu-right .mobile-menu-btn span {
position: absolute;
width: 100%;
height: 2px;
border-radius: 10px;
background: var(--color-yellow);
transition: all .4s ease
}
.menu-bar.v1 .menu-right .mobile-menu-btn span:first-child,
.menu-bar.v2 .menu-right .mobile-menu-btn span:first-child {
top: 0
}
.menu-bar.v1 .menu-right .mobile-menu-btn span:nth-child(3),
.menu-bar.v2 .menu-right .mobile-menu-btn span:nth-child(3) {
bottom: 0
}
.menu-bar.v1 .menu-right .mobile-menu-btn.active span:first-child,
.menu-bar.v2 .menu-right .mobile-menu-btn.active span:first-child {
width: 15px;
top: 23px
}
.menu-bar.v1 .menu-right .mobile-menu-btn.active span:nth-child(2),
.menu-bar.v2 .menu-right .mobile-menu-btn.active span:nth-child(2) {
width: 75%
}
.menu-bar.v1 .menu-right .mobile-menu-btn.active span:nth-child(3),
.menu-bar.v2 .menu-right .mobile-menu-btn.active span:nth-child(3) {
width: 15px;
bottom: 23px
}
.menu-bar.v1 .menu-right .mobile-menu-bar,
.menu-bar.v2 .menu-right .mobile-menu-bar {
position: fixed;
width: 320px;
max-width: 100%;
height: 100%;
top: 0;
opacity: 0;
visibility: hidden;
background: var(--color-white);
box-shadow: 0 0 30px rgba(0, 0, 0, .09);
transition: all .4s ease;
z-index: 5
}
.menu-bar.v1 .menu-right .mobile-menu-bar.active,
.menu-bar.v2 .menu-right .mobile-menu-bar.active {
opacity: 1;
visibility: visible
}
.menu-bar.v1 .menu-right .mobile-menu-header,
.menu-bar.v2 .menu-right .mobile-menu-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 30px;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px dashed var(--color-yellow)
}
.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo a,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo a {
display: inline-block;
max-width: 140px
}
.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo a img,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo a img {
max-width: 100%
}
.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo img,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo img {
max-width: 140px
}
.menu-bar.v1 .menu-right .mobile-menu-header .close-mobile-btn,
.menu-bar.v2 .menu-right .mobile-menu-header .close-mobile-btn {
padding: 25px;
font-size: 20px;
background: var(--color-tr)
}
.menu-bar.v1 .menu-right .mobile-overflow,
.menu-bar.v2 .menu-right .mobile-overflow {
margin-top: 25px;
overflow-y: auto;
height: calc(100% - 100px)
}
.menu-bar.v1 .menu-right .mobile-main-manu li,
.menu-bar.v2 .menu-right .mobile-main-manu li {
border-top: 1px dashed var(--color-yellow)
}
.menu-bar.v1 .menu-right .mobile-main-manu li.active>a,
.menu-bar.v2 .menu-right .mobile-main-manu li.active>a {
color: var(--color-yellow)
}
.menu-bar.v1 .menu-right .mobile-main-manu li.active a>.my-icon,
.menu-bar.v2 .menu-right .mobile-main-manu li.active a>.my-icon {
transform: rotate(0deg)
}
.menu-bar.v1 .menu-right .mobile-main-manu li.has-dropdown>a:after,
.menu-bar.v2 .menu-right .mobile-main-manu li.has-dropdown>a:after {
position: absolute;
font-family: icomoon;
content: "\e900";
speak: never;
font-size: calc(100% - 5px);
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: 21px;
font-size: 12px;
transition: all .4s ease
}
.menu-bar.v1 .menu-right .mobile-main-manu li.has-dropdown.active>a:after,
.menu-bar.v2 .menu-right .mobile-main-manu li.has-dropdown.active>a:after {
transform: rotate(0deg)
}
.menu-bar.v1 .menu-right .mobile-main-manu>ul>li:first-child,
.menu-bar.v2 .menu-right .mobile-main-manu>ul>li:first-child {
border-top: none
}
.menu-bar.v1 .menu-right .mobile-main-manu ul ul,
.menu-bar.v2 .menu-right .mobile-main-manu ul ul {
display: none
}
.menu-bar.v1 .menu-right .mobile-main-manu ul ul a,
.menu-bar.v2 .menu-right .mobile-main-manu ul ul a {
font-size: calc(100% - .4px)
}
.menu-bar.v1 .menu-right .mobile-main-manu a,
.menu-bar.v2 .menu-right .mobile-main-manu a {
position: relative;
display: block;
font-size: 15px;
line-height: 25px;
font-weight: 700
}
.menu-bar.v1 .menu-right .social-link,
.menu-bar.v2 .menu-right .social-link {
padding: 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 15px
}
.menu-bar.v1 .menu-right .social-link a,
.menu-bar.v2 .menu-right .social-link a {
display: block;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50px;
text-align: center;
font-size: 15px;
color: var(--color-yellow);
border: 1px solid var(--color-yellow);
background: var(--color-white)
}
.menu-bar.v1 .menu-right .social-link a:hover,
.menu-bar.v2 .menu-right .social-link a:hover {
color: var(--color-white);
background: var(--color-yellow)
}
.menu-bar.v1 .menu-right .mobile-menu-overlay,
.menu-bar.v2 .menu-right .mobile-menu-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
background: #000;
transition: all .4s ease;
z-index: 2
}
.menu-bar.v1 .menu-right .mobile-menu-overlay.active,
.menu-bar.v2 .menu-right .mobile-menu-overlay.active {
opacity: .8;
visibility: visible
}
.menu-bar.v1 {
background: var(--color-black2)
}
.menu-bar.v1.sticky-header {
box-shadow: 4px 0 20px 10px rgba(0, 0, 0, .34)
}
.menu-bar.v1 .main-menu li.active>a,
.menu-bar.v1 .main-menu li.current-menu-parent>a,
.menu-bar.v1 .main-menu li.current_page_item>a,
.menu-bar.v1 .main-menu li.current_page_parent>a,
.menu-bar.v1 .main-menu li:hover>a,
.menu-bar.v1 .main-menu li a,
.menu-bar.v1 .main-menu li li a,
.menu-bar.v1 .menu-right .search-open-btn,
.menu-bar.v1 .menu-right .shop-card-btn .my-icon,
.menu-bar.v1 .menu-right .shop-card-btn .price,
.menu-bar.v1 .menu-right .wishlist-btn {
color: var(--color-white)
}
.menu-bar.v1 .main-menu li ul,
.menu-bar.v1 .menu-right .search-open-btn,
.menu-bar.v1 .menu-right .shop-card-btn .my-icon,
.menu-bar.v1 .menu-right .wishlist-btn {
background: var(--color-black)
}
.menu-bar.v2 {
background: var(--color-white2)
}
.menu-bar.v2.sticky-header {
box-shadow: 4px 0 20px 10px hsla(0, 0%, 54%, .34)
}
.menu-bar.v2 .main-menu li.active>a,
.menu-bar.v2 .main-menu li.current-menu-parent>a,
.menu-bar.v2 .main-menu li.current_page_item>a,
.menu-bar.v2 .main-menu li.current_page_parent>a,
.menu-bar.v2 .main-menu li:hover>a,
.menu-bar.v2 .main-menu li a,
.menu-bar.v2 .main-menu li li a,
.menu-bar.v2 .menu-right .search-open-btn,
.menu-bar.v2 .menu-right .shop-card-btn .my-icon,
.menu-bar.v2 .menu-right .shop-card-btn .price,
.menu-bar.v2 .menu-right .wishlist-btn {
color: var(--color-black)
}
.menu-bar.v2 .main-menu li ul,
.menu-bar.v2 .menu-right .search-open-btn,
.menu-bar.v2 .menu-right .shop-card-btn .my-icon,
.menu-bar.v2 .menu-right .wishlist-btn {
background: var(--color-white)
}
.menu-bar~.h-spach {
margin-top: 82px
}
.bouns-anime,
.play-btn.v1,
.play-btn.v2 {
position: relative;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px;
line-height: 53px;
border-radius: 100px
}
.bouns-anime:before,
.play-btn.v1:before,
.play-btn.v2:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100px;
z-index: -1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
animation: a 4s ease-out infinite
}
@keyframes a {
0% {
opacity: .8;
transform: scale(1)
}
to {
transform: scale(1.3);
opacity: 0
}
}
.play-btn.v1 {
color: var(--color-yellow)
}
.play-btn.v1,
.play-btn.v1:before {
background: var(--color-white);
box-shadow: 0 0 45px 0 rgba(0, 0, 0, .09)
}
.play-btn.v2 {
color: var(--color-white);
background: var(--color-green)
}
.play-btn.v2:before {
border: 3px solid var(--color-green)
}
.play-btn.v2.bouns-anime:before {
background: var(--color-green)
}
.bouns-anime,
.bouns-anime:before {
background: var(--color-white);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .09)
}
.video-box {
position: relative;
border-radius: 20px;
overflow: hidden
}
.video-box:before {
top: -100%;
left: -100%;
transform: translate(-30%, -30%) rotate(-40deg);
background-image: url(../img/honeycom-b-a/v1/shap-1.png)
}
.video-box:after {
bottom: -100%;
right: -100%;
transform: translate(30%, 30%) rotate(-40deg);
background-image: url(../img/honeycom-b-a/v1/shap-2.png)
}
.video-box:after,
.video-box:before {
position: absolute;
content: "";
width: 35vw;
height: 35vw;
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
z-index: 1;
transition: all .4s ease
}
.video-box img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transition: all .4s ease
}
.video-box .play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1
}
.video-box:hover:before {
top: 0;
left: 0
}
.video-box:hover:after {
bottom: 0;
right: 0
}
.video-box:hover img {
transform: scale(1.1) rotate(1deg);
filter: blur(0) grayscale(0)
}
.section-title-center-white h2,
.section-title-center-white h6,
.section-title-center h2,
.section-title-center h6,
.section-title-white h2,
.section-title-white h6,
.section-title h2,
.section-title h6 {
font-weight: 900
}
.section-title-center-white h2,
.section-title-center h2,
.section-title-white h2,
.section-title h2 {
font-size: 37px;
line-height: 50px
}
.section-title-center-white h2~p,
.section-title-center h2~p,
.section-title-white h2~p,
.section-title h2~p {
margin-top: 20px
}
.section-title-center-white.v1 h6,
.section-title-center.v1 h6,
.section-title-white.v1 h6,
.section-title.v1 h6 {
padding-bottom: 10px
}
.section-title-center-white.v1 h6:before,
.section-title-center.v1 h6:before,
.section-title-white.v1 h6:before,
.section-title.v1 h6:before {
position: absolute;
content: url(../img/title/shap.svg);
bottom: -8px
}
.section-title-center-white.shap-green h6:before,
.section-title-center.shap-green h6:before,
.section-title-white.shap-green h6:before,
.section-title.shap-green h6:before {
content: url(../img/title/shap-2.svg)
}
.section-title-center-white.v2 h6,
.section-title-center.v2 h6,
.section-title-white.v2 h6,
.section-title.v2 h6 {
padding: 0 35px;
font-weight: 700;
font-family: Roboto, sans-serif
}
.section-title-center-white.v2 h6:after,
.section-title-center-white.v2 h6:before,
.section-title-center.v2 h6:after,
.section-title-center.v2 h6:before,
.section-title-white.v2 h6:after,
.section-title-white.v2 h6:before,
.section-title.v2 h6:after,
.section-title.v2 h6:before {
position: absolute;
content: "";
width: 25px;
height: 2px;
top: 50%;
transform: translateY(-50%);
background: var(--color-yellow)
}
.section-title-center-white.v2 h6:before,
.section-title-center.v2 h6:before,
.section-title-white.v2 h6:before,
.section-title.v2 h6:before {
left: 0
}
.section-title-center-white.v2 h6:after,
.section-title-center.v2 h6:after,
.section-title-white.v2 h6:after,
.section-title.v2 h6:after {
right: 0
}
.section-title-center-white h6,
.section-title-center h6,
.section-title-white h6,
.section-title h6 {
position: relative;
display: inline-block
}
.section-title-center-white h6~h2,
.section-title-center h6~h2,
.section-title-white h6~h2,
.section-title h6~h2 {
margin-top: 32px
}
.section-title-center-white~.row,
.section-title-center-white~.slider,
.section-title-center~.row,
.section-title-center~.slider,
.section-title-white~.row,
.section-title-white~.slider,
.section-title~.row,
.section-title~.slider {
margin-top: 60px
}
.section-title-center,
.section-title-center-white {
text-align: center
}
.section-title-center-white.v1 h6:before,
.section-title-center.v1 h6:before {
left: 50%;
transform: translateX(-50%)
}
.section-title-center-white h2,
.section-title-center-white h6,
.section-title-center-white p,
.section-title-center h2,
.section-title-center h6,
.section-title-center p {
margin-left: auto;
margin-right: auto
}
.title-left-right .left-content {
margin-bottom: 30px
}
.section-title-center-white h2,
.section-title-center-white h6,
.section-title-white h2,
.section-title-white h6 {
color: var(--color-white)
}
.btn-anime,
.link-anime {
position: relative;
font-size: 14px;
font-weight: 700;
letter-spacing: .2px;
border-radius: 5px;
text-transform: uppercase;
background: var(--color-tr)
}
.btn-anime.v1,
.btn-anime.v2,
.link-anime.v1,
.link-anime.v2 {
z-index: 1
}
.btn-anime.v1:after,
.btn-anime.v1:before,
.btn-anime.v2:after,
.btn-anime.v2:before,
.link-anime.v1:after,
.link-anime.v1:before,
.link-anime.v2:after,
.link-anime.v2:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
transition: all .4s ease
}
.btn-anime.v1:after,
.btn-anime.v2:after,
.link-anime.v1:after,
.link-anime.v2:after {
background: var(--color-black);
z-index: -2
}
.btn-anime.v1:hover,
.btn-anime.v2:hover,
.link-anime.v1:hover,
.link-anime.v2:hover {
color: var(--color-white)
}
.btn-anime.v1:hover:after,
.btn-anime.v2:hover:after,
.link-anime.v1:hover:after,
.link-anime.v2:hover:after {
top: 3px
}
.btn-anime.v1.btn-round,
.btn-anime.v1.btn-round:after,
.btn-anime.v1.btn-round:before,
.btn-anime.v2.btn-round,
.btn-anime.v2.btn-round:after,
.btn-anime.v2.btn-round:before,
.link-anime.v1.btn-round,
.link-anime.v1.btn-round:after,
.link-anime.v1.btn-round:before,
.link-anime.v2.btn-round,
.link-anime.v2.btn-round:after,
.link-anime.v2.btn-round:before {
border-radius: 100px
}
.btn-anime.v1,
.link-anime.v1 {
color: var(--color-white)
}
.btn-anime.v1:before,
.link-anime.v1:before {
background: var(--color-green);
z-index: -1
}
.btn-anime.v2,
.link-anime.v2 {
color: var(--color-black)
}
.btn-anime.v2:before,
.link-anime.v2:before {
background: var(--color-yellow);
z-index: -1
}
.btn-anime.v2:hover,
.link-anime.v2:hover {
color: var(--color-black)
}
.btn-anime.v3,
.link-anime.v3 {
color: var(--color-black);
border: 1px solid var(--color-yellow);
background: var(--color-yellow)
}
.btn-anime.v3.btn-round,
.link-anime.v3.btn-round {
border-radius: 100px
}
.btn-anime.v3:hover,
.link-anime.v3:hover {
color: var(--color-yellow);
background: var(--color-white)
}
.link-anime {
padding: 18px 35px;
display: inline-block
}
.btn-anime {
padding: 22.2px 35px;
background: var(--color-tr)
}
.post-link {
display: inline-block;
position: relative;
font-weight: 500;
color: var(--color-black);
text-transform: uppercase;
margin: 2px 0;
z-index: 1
}
.post-link:before {
position: absolute;
top: -1px;
font-size: 12px;
font-family: icomoon;
color: var(--color-black);
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: -1
}
.post-link:after {
position: absolute;
content: "";
top: -3px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50px;
opacity: .5;
background: var(--color-yellow);
z-index: -2;
transition: all .4s ease
}
.post-link:hover {
color: var(--color-black)
}
.post-link:hover:after {
opacity: 1
}
.check-mark-list.v1 li,
.check-mark-list.v2 li {
display: -ms-flexbox;
display: flex;
gap: 12px
}
.check-mark-list.v1 li~li,
.check-mark-list.v2 li~li {
margin-top: 20px
}
.check-mark-list.v1 li .my-icon,
.check-mark-list.v2 li .my-icon {
font-size: 14px;
width: 30px;
height: 30px;
min-width: 30px;
line-height: 27px;
text-align: center;
border-radius: 50px;
margin-top: 3px
}
.check-mark-list.v1 h6,
.check-mark-list.v1 p,
.check-mark-list.v2 h6,
.check-mark-list.v2 p {
font-weight: 500
}
.check-mark-list.v1 h6,
.check-mark-list.v2 h6 {
font-family: Roboto, sans-serif
}
.check-mark-list.v1 .my-icon {
color: var(--color-yellow);
background: var(--color-black3)
}
.check-mark-list.v1 h6,
.check-mark-list.v1 p {
color: var(--color-white)
}
.check-mark-list.v2 .my-icon {
color: var(--color-black);
border: 1px solid var(--color-border);
background: var(--color-white)
}
.preloder {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: var(--color-white)
}
.preloder .sotcox-spinner {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
width: 70px;
text-align: center
}
.preloder .sotcox-spinner>div {
width: 18px;
height: 18px;
background: var(--color-yellow);
border-radius: 100%;
display: inline-block;
animation: b 1.4s infinite ease-in-out both
}
.preloder .sotcox-spinner .bounce1 {
animation-delay: -.32s
}
.preloder .sotcox-spinner .bounce2 {
animation-delay: -.16s
}
@keyframes b {
0%,
80%,
to {
transform: scale(0)
}
40% {
transform: scale(1)
}
}
.my-select {
position: relative;
display: inline-block
}
.my-select .current {
position: relative;
padding: 0 40px 0 20px;
height: 50px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
border-radius: 5px;
letter-spacing: 1.4px;
color: var(--color-gBlack);
border: 1px solid var(--color-border);
background: var(--color-white)
}
.my-select .current:before {
position: absolute;
font-size: 10px;
top: 50%;
right: 20px;
content: "\e900";
font-family: icomoon;
-moz-osx-font-smoothing: grayscale;
transform: translateY(-50%);
transition: all .4s ease
}
.my-select .current.open:before {
transform: translateY(-50%) rotate(180deg)
}
.my-select .list {
position: absolute;
width: 100%;
top: 110%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
box-shadow: 0 0 30px rgba(0, 0, 0, .09);
background: var(--color-white);
opacity: 0;
visibility: hidden;
transition: all .4s ease;
z-index: 2
}
.my-select .list.open {
top: 100%;
opacity: 1;
visibility: visible
}
.my-select .list li {
cursor: pointer;
padding: 15px 20px;
font-weight: 400;
font-size: 14px;
line-height: 24px;
transition: all .4s ease
}
.my-select .list li:hover {
padding: 15px 20px 15px 30px;
color: var(--color-green)
}
.my-select .list li~li {
border-top: 1px dashed var(--color-green)
}
.message-form.v1 .group-box,
.message-form.v2 .group-box,
.message-form.v3 .group-box {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 30px
}
.message-form.v1 input[type=number]::-webkit-inner-spin-button,
.message-form.v1 input[type=number]::-webkit-outer-spin-button,
.message-form.v2 input[type=number]::-webkit-inner-spin-button,
.message-form.v2 input[type=number]::-webkit-outer-spin-button,
.message-form.v3 input[type=number]::-webkit-inner-spin-button,
.message-form.v3 input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.message-form.v1 input[type=number],
.message-form.v2 input[type=number],
.message-form.v3 input[type=number] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.message-form.v1 .my-select,
.message-form.v1 input,
.message-form.v1 textarea,
.message-form.v2 .my-select,
.message-form.v2 input,
.message-form.v2 textarea,
.message-form.v3 .my-select,
.message-form.v3 input,
.message-form.v3 textarea {
width: 100%;
border: 1px solid var(--color-border);
border-radius: 5px;
background: var(--color-white)
}
.message-form.v1 .my-select,
.message-form.v1 input,
.message-form.v2 .my-select,
.message-form.v2 input,
.message-form.v3 .my-select,
.message-form.v3 input {
height: 70px
}
.message-form.v1 input,
.message-form.v1 textarea,
.message-form.v2 input,
.message-form.v2 textarea,
.message-form.v3 input,
.message-form.v3 textarea {
color: var(--color-gBlack);
font-size: 16px;
line-height: 26px
}
.message-form.v1 textarea,
.message-form.v2 textarea,
.message-form.v3 textarea {
height: 140px;
padding: 15px 20px
}
.message-form.v1 .my-select,
.message-form.v2 .my-select,
.message-form.v3 .my-select {
width: calc(100% + 50px);
text-align: left
}
.message-form.v1 .my-select button,
.message-form.v2 .my-select button,
.message-form.v3 .my-select button {
border: none;
width: 100%;
height: 100%;
text-align: left
}
.message-form.v1 .submit-btn,
.message-form.v2 .submit-btn,
.message-form.v3 .submit-btn {
padding: 20px 30px
}
.message-form.v1 .group-box~.group-box,
.message-form.v1 .group-box~textarea,
.message-form.v1 textarea~.btn-anime,
.message-form.v2 .group-box~.group-box,
.message-form.v2 .group-box~textarea,
.message-form.v2 textarea~.btn-anime,
.message-form.v3 .group-box~.group-box,
.message-form.v3 .group-box~textarea,
.message-form.v3 textarea~.btn-anime {
margin-top: 30px
}
.message-form.v1 .submit-btn {
display: block;
width: 100%
}
.message-form.v3 {
text-align: center
}
.slider {
position: relative;
overflow: hidden;
padding-bottom: 45px
}
.slider .swiper-pagination {
bottom: 0;
z-index: 1
}
.slider .swiper-pagination .swiper-pagination-bullet {
position: relative;
width: 30px;
height: 5px;
border-radius: 2px;
padding: 0;
opacity: 1;
background: var(--color-gBlack);
transition: all .4s ease
}
.slider .swiper-pagination .swiper-pagination-bullet~.swiper-pagination-bullet {
margin: 0 0 0 10px
}
.slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--color-black)
}
.star-mark {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 8px
}
.star-mark .my-icon {
font-size: 19px;
color: var(--color-yellow)
}
.star-mark.star-1 .my-icon:first-child::before,
.star-mark.star-2 .my-icon:first-child::before,
.star-mark.star-2 .my-icon:nth-child(2):before,
.star-mark.star-3 .my-icon:first-child::before,
.star-mark.star-3 .my-icon:nth-child(2):before,
.star-mark.star-3 .my-icon:nth-child(3):before,
.star-mark.star-4 .my-icon:first-child::before,
.star-mark.star-4 .my-icon:nth-child(2):before,
.star-mark.star-4 .my-icon:nth-child(3):before,
.star-mark.star-4 .my-icon:nth-child(4):before,
.star-mark.star-5 .my-icon:first-child::before,
.star-mark.star-5 .my-icon:nth-child(2):before,
.star-mark.star-5 .my-icon:nth-child(3):before,
.star-mark.star-5 .my-icon:nth-child(4):before,
.star-mark.star-5 .my-icon:nth-child(5):before {
content: "\e939"
}
.bg-cover,
.bg-cover-bottom,
.bg-cover-center,
.bg-cover-top {
background-repeat: no-repeat;
background-size: cover
}
.bg-cover-top {
background-position: top
}
.bg-cover-center {
background-position: 50%
}
.bg-cover-bottom {
background-position: bottom
}
.breadcum.v1 {
text-align: center;
padding: 60px 0
}
.breadcum.v1 h2 {
color: var(--color-white);
font-weight: 900;
font-size: 40px;
line-height: 50px
}
.breadcum.v1 h2~ul {
margin-top: 20px
}
.breadcum.v1 ul {
-ms-flex-pack: center;
justify-content: center;
color: var(--color-white);
font-size: 15px;
line-height: 34px;
font-weight: 600
}
.breadcum.v1 li~li,
.breadcum.v1 ul {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 5px
}
.breadcum.v1 li~li:before {
content: "/"
}
.breadcum.v1 a {
display: block;
font-size: 15px;
color: var(--color-white)
}
.breadcum.v1 a:hover {
color: var(--color-yellow)
}
.pegination {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
margin-top: 65px
}
.pegination li .page-numbers,
.pegination li a {
display: inline-block;
font-family: Arima Madurai, cursive;
font-weight: 900;
color: var(--color-black);
font-size: 15px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: 50px;
background: var(--color-tr)
}
.pegination li .page-numbers:hover,
.pegination li a:hover {
background: var(--color-yellow)
}
.pegination li .page-numbers {
transition: all .4s ease
}
.pegination li.active a,
.pegination li .current {
background: var(--color-yellow)
}
.next-preve-post {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px
}
.next-preve-post .next-post,
.next-preve-post .prev-post {
position: relative;
display: inline-block;
color: var(--color-black);
width: 100%;
line-height: 25px;
text-transform: capitalize;
margin: 2px 0;
z-index: 1
}
.next-preve-post .next-post .text,
.next-preve-post .prev-post .text {
display: inline-block;
overflow: hidden;
width: 100%;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
text-overflow: "..."
}
.next-preve-post .next-post:before,
.next-preve-post .prev-post:before {
position: absolute;
top: -1px;
font-size: 12px;
font-family: icomoon;
color: var(--color-black);
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: -1
}
.next-preve-post .next-post:after,
.next-preve-post .prev-post:after {
position: absolute;
content: "";
top: -3px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50px;
opacity: .5;
background: var(--color-yellow);
z-index: -2;
transition: all .4s ease
}
.next-preve-post .next-post:hover,
.next-preve-post .prev-post:hover {
color: var(--color-yellow)
}
.next-preve-post .next-post:hover:after,
.next-preve-post .prev-post:hover:after {
opacity: 1
}
.next-preve-post~.all-comments {
margin-top: 70px
}
.v1 .blog-sidebar__wrapper .blog-sidebar__widget {
margin-top: 50px
}
.v1 .blog-sidebar__wrapper .blog-sidebar__widget-head {
padding: 30px 30px 0;
border: 1px solid var(--color-border);
border-radius: 10px 10px 0 0;
border-bottom: none
}
.v1 .blog-sidebar__wrapper .blog-sidebar__widget-head .blog-sidebar__widget-title {
position: relative;
font-weight: 700
}
.v1 .blog-sidebar__wrapper .blog-sidebar__widget-head .blog-sidebar__widget-title:before {
position: absolute;
content: "";
height: 17px;
width: 17px;
top: 8px;
border-radius: 50px;
border: 3px solid rgba(43, 34, 31, .1);
background: var(--color-yellow)
}
.v1 .blog-sidebar__wrapper .blog-sidebar__widget-content {
padding: 30px;
border-radius: 0 0 10px 10px;
border: 1px solid var(--color-border);
border-top: none
}
.v1 .blog-sidebar__wrapper .search-widget form {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
border: 1px solid var(--color-border)
}
.v1 .blog-sidebar__wrapper .search-widget input {
width: 100%;
font-size: 16px;
border-radius: 5px 0 0 5px
}
.v1 .blog-sidebar__wrapper .search-widget button {
padding: 0;
width: 50px;
height: 50px;
font-size: 15px;
color: var(--color-gBlack);
border-radius: 0 5px 5px 0;
background: var(--color-white)
}
.v1 .blog-sidebar__wrapper .category-list li {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 14px
}
.v1 .blog-sidebar__wrapper .category-list li~li {
margin-top: 20px
}
.v1 .blog-sidebar__wrapper .category-list h6 {
font-weight: 700
}
.v1 .blog-sidebar__wrapper .category-list .my-icon {
color: var(--color-green);
font-size: 18px
}
.v1 .blog-sidebar__wrapper .best-seller-items li {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.v1 .blog-sidebar__wrapper .best-seller-items li~li {
padding-top: 20px;
border-top: 1px dashed var(--color-border);
margin-top: 20px
}
.v1 .blog-sidebar__wrapper .best-seller-items li .item-img {
width: 100px;
border-radius: 0 0 200px 200px;
overflow: hidden
}
.v1 .blog-sidebar__wrapper .best-seller-items li .item-img img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transform: rotate(1deg) scale(1.1);
transition: all .4s ease
}
.v1 .blog-sidebar__wrapper .best-seller-items li .item-text {
width: calc(100% - 100px)
}
.v1 .blog-sidebar__wrapper .best-seller-items li .item-text h6,
.v1 .blog-sidebar__wrapper .best-seller-items li .item-text p {
font-size: 18px;
line-height: 28px
}
.v1 .blog-sidebar__wrapper .best-seller-items li .item-text h6 {
font-weight: 900
}
.v1 .blog-sidebar__wrapper .best-seller-items li .item-text h6~p {
margin-top: 10px
}
.v1 .blog-sidebar__wrapper .best-seller-items li:hover .item-img img {
filter: blur(0) grayscale(0);
transform: rotate(0deg) scale(1)
}
.v1 .blog-sidebar__wrapper .my-range-slider .my-range-slider-wrapper {
width: 100%;
padding: 0 16px 0 4px
}
.v1 .blog-sidebar__wrapper .my-range-slider .my-range-slider-wrapper~.tag-price {
margin-top: 25px
}
.v1 .blog-sidebar__wrapper .my-range-slider[data-slider-double=true] .my-range-slider-wrapper {
padding: 0 34px 0 4px
}
.v1 .blog-sidebar__wrapper .my-range-slider[data-slider-double=true] .my-range-slider-wrapper .slider-track:before {
width: calc(100% + 38px)
}
.v1 .blog-sidebar__wrapper .my-range-slider .slider-track {
position: relative;
width: 100%;
height: 20px
}
.v1 .blog-sidebar__wrapper .my-range-slider .slider-track:before {
position: absolute;
content: "";
left: -4px;
top: 50%;
width: 100%;
height: 4px;
border-radius: 5px;
background: #dee4ec;
transform: translateY(-50%)
}
.v1 .blog-sidebar__wrapper .my-range-slider .slider-track .slider-bar {
position: absolute;
pointer-events: none;
width: 100vw;
height: 4px;
left: 0;
top: 50%;
cursor: default;
transform: translate(15px, -50%);
background: #fcc41a
}
.v1 .blog-sidebar__wrapper .my-range-slider .slider-handle {
width: 20px;
height: 20px;
background: #fcc41a;
position: absolute;
top: 50%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50px;
cursor: pointer
}
.v1 .blog-sidebar__wrapper .my-range-slider .slider-handle:first-child {
transform: translate(-4px, -50%)
}
.v1 .blog-sidebar__wrapper .my-range-slider .slider-handle:nth-child(2) {
transform: translate(14px, -50%)
}
.v1 .blog-sidebar__wrapper .my-range-slider .tag-price ul {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between
}
.v1 .blog-sidebar__wrapper .my-range-slider .tag-price .tag {
padding: 5px 20px;
font-weight: 700;
color: var(--color-black);
border-radius: 3px;
background: var(--color-yellow)
}
.v1 .blog-sidebar__wrapper .my-range-slider .tag-price p {
font-size: 16px;
line-height: 26px;
font-weight: 500;
color: #73747d
}
.v1 .blog-sidebar__wrapper .latest-posts li {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 20px
}
.v1 .blog-sidebar__wrapper .latest-posts li~li {
padding-top: 15px;
border-top: 1px dashed var(--color-border);
margin-top: 15px
}
.v1 .blog-sidebar__wrapper .latest-posts .post-img img {
border-radius: 5px
}
.v1 .blog-sidebar__wrapper .latest-posts .post-text h6 {
font-weight: 800
}
.v1 .blog-sidebar__wrapper .latest-posts .post-text h6~p {
margin-top: 4px
}
.tags-social {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.tags-social~.next-preve-post {
margin-top: 50px
}
.tags-links ul,
.tags-widgets ul {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px
}
.tags-links a,
.tags-widgets a {
display: inline-block;
padding: 8px 24px;
color: var(--color-gBlack);
border: 1px solid var(--color-white3);
border-radius: 3px
}
.tags-links a:hover,
.tags-widgets a:hover {
color: var(--color-yellow)
}
.socials-links-box ul {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.socials-links-box a {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
color: var(--color-black);
line-height: 40px;
border: 1px solid var(--color-white3);
border-radius: 50px;
background: var(--color-tr)
}
.socials-links-box a:hover {
background: var(--color-yellow)
}
.scroll-bottom-Top {
position: fixed;
width: 55px;
height: 55px;
bottom: 50px;
text-align: center;
line-height: 55px;
opacity: 0;
font-size: 15px;
visibility: hidden;
border-radius: 100px;
color: var(--color-yellow);
background: var(--color-white);
box-shadow: 0 4.8px 24.4px -6px rgba(19, 16, 34, .1), 0 4px 13px -2px rgba(19, 16, 34, .06);
z-index: 5
}
.scroll-bottom-Top.show {
opacity: 1;
visibility: visible
}
.product-card.v1,
.product-card.v2 {
text-align: center;
border: 1px solid rgba(43, 34, 31, .1)
}
.product-card.v1 .product-img img,
.product-card.v2 .product-img img {
max-width: 180px;
height: 180px;
transition: all .4s ease
}
.product-card.v1 .product-content,
.product-card.v2 .product-content {
margin-top: 40px
}
.product-card.v1 .product-content h4,
.product-card.v1 .product-content h5,
.product-card.v2 .product-content h4,
.product-card.v2 .product-content h5 {
font-weight: 700
}
.product-card.v1 .product-content h5,
.product-card.v2 .product-content h5 {
font-family: Roboto, sans-serif;
margin-top: 5px
}
.product-card.v1 .product-content p,
.product-card.v2 .product-content p {
margin-top: 5px
}
.product-card.v1 .shop-btns,
.product-card.v2 .shop-btns {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 15px
}
.product-card.v1 .shop-btns a,
.product-card.v2 .shop-btns a {
display: block;
width: 50px;
height: 50px;
font-size: 17px;
text-align: center;
line-height: 50px;
border-radius: 100px
}
.product-card.v1:hover,
.product-card.v2:hover {
background: var(--color-white)
}
.product-card.v1:hover .product-img img,
.product-card.v2:hover .product-img img {
filter: grayscale(.5);
transform: scale(1.1)
}
.product-card.v1 {
position: relative;
padding: 45px 30px 70px;
border-radius: 0 0 300px 300px;
background: var(--color-white2);
transition: all .4s ease
}
.product-card.v1 .shop-btns {
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%)
}
.product-card.v1 .shop-btns a {
color: var(--color-black);
background: var(--color-white)
}
.product-card.v1 .shop-btns a:hover {
background: var(--color-yellow)
}
.product-card.v2 {
padding: 45px 30px;
border-radius: 20px;
background: var(--color-white)
}
.product-card.v2 .product-img {
margin: 0 auto
}
.product-card.v2 .product-img~.product-content {
margin-top: 40px
}
.product-card.v2 .product-content~.shop-btns {
margin-top: 30px
}
.product-card.v2 .shop-btns {
-ms-flex-pack: center;
justify-content: center
}
.product-card.v2 .shop-btns a {
color: var(--color-black);
border: 1px solid var(--color-yellow);
background: var(--color-yellow)
}
.product-card.v2 .shop-btns a:hover {
color: var(--color-yellow);
background: var(--color-white)
}
.banner.v1,
.banner.v2,
.banner.v3 {
position: relative;
padding: 0;
overflow: hidden;
z-index: 1
}
.banner.v1 .banner-content,
.banner.v2 .banner-content,
.banner.v3 .banner-content {
padding: 65px 0
}
.banner.v1 .banner-content .all-btns,
.banner.v2 .banner-content .all-btns,
.banner.v3 .banner-content .all-btns {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.banner.v1 .banner-content .section-title-center~ul,
.banner.v1 .banner-content .section-title-white-center~ul,
.banner.v1 .banner-content .section-title-white~ul,
.banner.v1 .banner-content .section-title~ul,
.banner.v2 .banner-content .section-title-center~ul,
.banner.v2 .banner-content .section-title-white-center~ul,
.banner.v2 .banner-content .section-title-white~ul,
.banner.v2 .banner-content .section-title~ul,
.banner.v3 .banner-content .section-title-center~ul,
.banner.v3 .banner-content .section-title-white-center~ul,
.banner.v3 .banner-content .section-title-white~ul,
.banner.v3 .banner-content .section-title~ul {
margin-top: 45px
}
.banner.v1 .scroll-down-1,
.banner.v2 .scroll-down-1 {
position: absolute;
z-index: 1
}
.banner.v1 {
background: var(--color-white2)
}
.banner.v1:before {
position: absolute;
content: "";
top: 0;
width: 100%;
height: calc(100% - 100px);
z-index: -1;
background: var(--color-black2)
}
.banner.v1:after {
position: relative;
content: "";
width: 100%;
height: 133px;
margin-top: 135px;
margin-bottom: -135px;
display: block;
background-image: url(../img/banner/v1/shap-1.png);
background-repeat: no-repeat;
background-size: 114% 130%;
background-position: 0
}
.banner.v1 .shape-1 {
position: absolute;
width: 230px;
height: 230px;
transform: rotate(127deg);
background-repeat: no-repeat;
background-size: contain;
background-position: 50%;
z-index: -1
}
.banner.v1 .scroll-down-1 {
bottom: 35px
}
.banner.v1 .banner-content:before {
position: absolute;
content: "";
width: 80%;
height: 155px;
bottom: 48px;
border-radius: 100%;
background: var(--color-black2);
z-index: -1
}
.banner.v1 .banner-content .section-title-white h2 {
font-size: 45px;
line-height: 52px;
font-weight: 900
}
.banner.v1 .banner-content .section-title-white p {
color: var(--color-gBlack2)
}
.banner.v1 .banner-content .all-btns a.v1:hover:before,
.banner.v1 .banner-content .all-btns a.v2:hover:before {
background: var(--color-white)
}
.banner.v1 .banner-content .all-btns a.v1:hover {
color: var(--color-green)
}
.banner.v1 .banner-content .all-btns a.v2:hover {
color: var(--color-yellow)
}
.banner.v1 .rount-profile-bg {
position: relative;
width: 100%;
height: 500px;
border-radius: 20px;
margin: 0 auto 65px
}
.banner.v1 .rount-profile-bg,
.banner.v1 .rount-profile-bg .play-btn {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover
}
.banner.v1 .rount-profile-bg .play-btn {
position: absolute;
width: 150px;
height: 150px;
bottom: 50%;
left: 50%;
font-size: 35px;
color: var(--color-white);
border: 3px solid var(--color-white);
border-radius: 100%;
z-index: 2;
transform: translate(-50%, 50%);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}
.banner.v1 .rount-profile-bg .play-btn:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100%;
opacity: .5;
background: var(--color-black)
}
.banner.v1 .rount-profile-bg .play-btn:before {
opacity: .5;
border-radius: 100%;
border: 3px solid var(--color-white);
background: var(--color-tr)
}
.banner.v1 .rount-profile-bg .play-btn .my-icon {
position: relative;
z-index: 1;
transform: rotate(90deg)
}
.banner.v2 {
padding-bottom: 65px
}
.banner.v2 h2~a {
margin-top: 45px
}
.banner.v2:before {
height: 100%;
bottom: 110px;
transform: scale(1.1);
background: url(../img/banner/v2/bg.png);
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: cover;
z-index: -1
}
.banner.v2:after,
.banner.v2:before {
position: absolute;
content: "";
width: 100%;
left: 0
}
.banner.v2:after {
height: 20%;
top: 0;
z-index: -2;
background: var(--color-yellow)
}
.banner.v2 .bee-1,
.banner.v2 .bee-2 {
position: absolute;
width: 116px;
height: 107px;
opacity: 0;
top: 34%;
transform: translateY(-15%);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain
}
.banner.v2 .bee-1 {
left: 8%;
animation: c 11s ease-out infinite alternate
}
.banner.v2 .bee-2 {
right: 8%;
animation: c 11s .8s ease-out infinite alternate
}
@keyframes c {
0% {
transform: translate(-40%)
}
30% {
transform: translate(-9%, -50%) rotate(30deg)
}
40% {
transform: translate(-2%, -30%) rotate(10deg)
}
80% {
transform: translate(-9%, -50%)
}
to {
transform: translate(-40%, -10%)
}
}
.banner.v2 .banner-box-img {
position: relative;
width: calc(100% - 30px);
margin: 0 auto
}
.banner.v2 .banner-box-img img {
width: 100%;
border-radius: 500px
}
.banner.v2 .banner-box-img .scroll-down-1 {
left: 50%;
bottom: -20px;
transform: translateX(-50%)
}
.banner.v3 {
padding: 65px 0
}
.banner.v3:before {
width: 215px;
height: 480px;
top: -5px;
left: -15px;
background: url(../img/banner/v3/banner-shapeleft.png)
}
.banner.v3:after {
width: 200px;
height: 305px;
top: -2px;
right: -15px;
background: url(../img/banner/v3/banner-shaperight.png)
}
.banner.v3:after,
.banner.v3:before {
content: ""
}
.banner.v3 .shape-1,
.banner.v3:after,
.banner.v3:before {
position: absolute;
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
z-index: -1
}
.banner.v3 .shape-1 {
bottom: 60px;
left: 0;
width: 180px;
height: 280px;
animation: d 4s linear infinite
}
@keyframes d {
50% {
transform: translateY(-10px)
}
80% {
transform: translateX(-10px)
}
}
.banner.v3 .flower-anime-btn {
position: relative;
font-size: 18px;
font-weight: 700;
background: var(--color-tr)
}
.banner.v3 .flower-anime-btn .icon-play-t {
position: relative;
width: 80px;
height: 80px;
line-height: 80px;
color: var(--color-white);
transition: all .4s ease
}
.banner.v3 .flower-anime-btn .icon-play-t:after {
position: absolute;
width: 100%;
height: calc(100% - 50px);
content: "";
bottom: -5px;
z-index: -1;
animation: e 2s ease-out infinite;
background-image: url(../img/banner/v3/video-vector.svg)
}
@keyframes e {
50% {
bottom: -10px
}
}
.banner.v3 .flower-anime-btn .icon-play-t,
.banner.v3 .flower-anime-btn .icon-play-t:after {
display: inline-block;
background-repeat: no-repeat;
background-position: 50%;
background-size: contain
}
.banner.v3 .flower-anime-btn:hover .icon-play-t {
color: var(--color-yellow)
}
.banner.v3 .product-img {
position: relative;
margin: 0 auto -40px
}
.banner.v3 .product-img .small-img-1,
.banner.v3 .product-img .small-img-2 {
position: absolute;
bottom: 50px
}
.banner.v3 .product-img .small-img-1 {
width: 21vw;
height: 21vw;
left: 0;
animation: f 15s linear infinite
}
.banner.v3 .product-img .small-img-2 {
width: 19vw;
height: 19vw;
right: 0;
animation: f 20s linear infinite
}
@keyframes f {
to {
transform: rotate(1turn)
}
}
.banner.v3 .product-img .main-img {
width: 100%
}
.banner.v3 .future-list {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
gap: 30px
}
.banner.v3 .future-list li {
max-width: 190px;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.banner.v3 .future-list .my-icon {
min-width: 65px;
width: 65px;
height: 65px;
font-size: 35px;
color: var(--color-yellow);
text-align: center;
line-height: 65px;
border-radius: 100px;
background: var(--color-tr);
box-shadow: 0 5px 0 var(--color-black);
margin-bottom: 5px
}
.banner.v3 .future-list .my-icon~p {
margin-top: 25px
}
.banner.v3 .future-list p {
position: relative;
font-size: 18px;
font-weight: 700
}
.banner.v3 .future-list p:after {
position: absolute;
font-family: icomoon;
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
bottom: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.banner.v3 .scroll-down-2 {
display: block;
font-size: 16px;
font-weight: 500;
color: var(--color-gBlack);
margin-top: 30px;
text-align: center
}
.banner.v3 .scroll-down-2 .my-icon {
display: inline-block;
position: relative;
width: 24px;
height: 35px;
text-align: center;
line-height: 25px;
border-radius: 100px;
border: 1px solid var(--color-gBlack)
}
.banner.v3 .scroll-down-2 .my-icon:before {
display: inline-block;
opacity: 1;
transform: translateY(0);
animation: g 2s linear infinite
}
@keyframes g {
50% {
opacity: 0;
transform: translateY(9px)
}
}
.our-services.v1 .service-card,
.our-services.v3 .service-card {
width: 100%;
padding: 50px 35px;
border-radius: 20px;
margin-bottom: 30px
}
.our-services.v1 .service-card .my-icon,
.our-services.v3 .service-card .my-icon {
font-size: 57px
}
.our-services.v1 .service-card h4,
.our-services.v3 .service-card h4 {
font-weight: 700
}
.our-services.v1 .row>div:last-child .service-card,
.our-services.v3 .row>div:last-child .service-card {
margin-bottom: 0
}
.our-services.v1 .row~.more-link,
.our-services.v3 .row~.more-link {
margin-top: 40px
}
.our-services.v1 .more-link,
.our-services.v3 .more-link {
text-align: center
}
.our-services.v1 {
background: var(--color-white2)
}
.our-services.v1 .service-card {
box-shadow: 0 7px 31px #f8f2ea;
background: var(--color-white);
transition: all .4s ease
}
.our-services.v1 .service-card .my-icon {
position: relative;
color: var(--color-green);
z-index: 1;
transition: all .4s ease
}
.our-services.v1 .service-card .my-icon:after {
position: absolute;
content: "";
width: 55px;
height: 55px;
top: -10px;
border-radius: 100px;
opacity: .2;
background: var(--color-green);
z-index: -1;
transition: all .4s ease
}
.our-services.v1 .service-card .my-icon~h4 {
margin-top: 45px
}
.our-services.v1 .service-card:hover {
border-color: var(--color-yellow)
}
.our-services.v1 .service-card:hover .my-icon {
color: var(--color-yellow)
}
.our-services.v1 .service-card:hover .my-icon:after {
background: var(--color-yellow)
}
.our-services.v2 {
background: var(--color-white2)
}
.our-services.v2 ul,
.our-services.v2 ul~a {
margin-top: 30px
}
.our-services.v2 li~li {
margin-top: 15px
}
.our-services.v2 li a {
padding-bottom: 2px;
position: relative;
display: inline-block;
font-family: Arima Madurai, cursive;
font-size: 24px;
line-height: 34px;
opacity: .6
}
.our-services.v2 li a:before {
position: absolute;
content: "";
width: 100%;
height: 1px;
bottom: 0;
opacity: 0;
visibility: hidden;
background: var(--color-black);
transition: all .4s ease
}
.our-services.v2 li a:hover {
color: var(--color-black);
opacity: 1
}
.our-services.v2 li a:hover:before {
opacity: 1;
visibility: visible
}
.our-services.v2 .check-our-profile {
position: relative;
z-index: 1;
margin: 30px 0
}
.our-services.v2 .check-our-profile:before {
position: absolute;
content: "";
width: calc(100% - 30px);
height: calc(100% - 30px);
bottom: -30px;
border-radius: 20px;
background: var(--color-yellow);
z-index: -1
}
.our-services.v2 .check-our-profile img {
width: calc(100% - 30px);
border-radius: 20px
}
.our-services.v2 .content-left {
margin-top: 65px
}
.our-services.v3 .service-card {
position: relative;
text-align: center;
border: 1px solid var(--color-tr);
background: var(--color-black2);
z-index: 1;
transition: all .4s ease
}
.our-services.v3 .service-card .my-icon {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
color: var(--color-yellow);
border: 1px solid var(--color-yellow);
border-radius: 300px;
background: var(--color-black2);
margin: 0 auto 30px
}
.our-services.v3 .service-card .my-icon:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
background-image: url(../img/our-services/v1/service-icon.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
opacity: 0;
transition: all .4s ease
}
.our-services.v3 .service-card h4 {
position: relative;
color: var(--color-white);
padding-bottom: 25px
}
.our-services.v3 .service-card h4:before {
position: absolute;
content: "";
width: 70px;
height: 2px;
bottom: 0;
left: 50%;
background: var(--color-yellow);
transform: translateX(-50%)
}
.our-services.v3 .service-card h4~p {
margin-top: 25px
}
.our-services.v3 .service-card p {
color: var(--color-gBlack2)
}
.our-services.v3 .service-card a {
color: var(--color-white)
}
.our-services.v3 .service-card a:hover {
color: var(--color-yellow)
}
.our-services.v3 .service-card:hover {
border: 1px solid var(--color-yellow)
}
.our-services.v3 .service-card:hover .my-icon:after {
transform: scale(1.3);
opacity: 1
}
.why-us.v1 {
background: var(--color-white)
}
.why-us.v1 .list-1 {
margin-bottom: 30px
}
.why-us.v1 li {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 20px
}
.why-us.v1 li~li {
margin-top: 30px
}
.why-us.v1 li .my-icon {
position: relative;
min-width: 65px;
width: 65px;
height: 65px;
font-size: 35px;
text-align: center;
line-height: 65px;
border-radius: 100px;
background: var(--color-yellow);
box-shadow: 0 5px 0 var(--color-black);
margin-bottom: 5px;
z-index: 1
}
.why-us.v1 li .text h5 {
font-weight: 700
}
.why-us.v1 li .text h5~p {
margin-top: 7px
}
.why-us.v1 .big-pic {
margin-bottom: 50px
}
.why-us.v1 .big-pic img {
width: 100%
}
.download-app.v1 {
padding: 0;
position: relative;
z-index: 1
}
.download-app.v1 .section-title {
margin-top: 50px
}
.download-app.v1 .mobile-ads-box {
padding: 65px 30px;
border-radius: 20px
}
.download-app.v1 .mobile-ads-box img {
width: 100%
}
.download-app.v1 .download-btns ul {
margin-top: 30px
}
.download-app.v1 .download-btns img {
width: 100%
}
.our-products.v1,
.our-products.v2 {
background: var(--color-white2)
}
.our-products.v1 .right-btn,
.our-products.v2 .right-btn {
margin-top: 20px
}
.our-products.v1 .row~.slider,
.our-products.v2 .row~.slider {
margin-top: 60px
}
.our-products.v1 .slider,
.our-products.v2 .slider {
position: relative;
padding: 0 30px 28px
}
.our-products.v1 .slider .next-btn,
.our-products.v1 .slider .prev-btn,
.our-products.v2 .slider .next-btn,
.our-products.v2 .slider .prev-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
color: var(--color-black);
border: 1px solid rgba(43, 34, 31, .1);
border-radius: 80px;
text-align: center;
line-height: 50px;
background: var(--color-white);
z-index: 2
}
.our-products.v1 .slider .next-btn:hover,
.our-products.v1 .slider .prev-btn:hover,
.our-products.v2 .slider .next-btn:hover,
.our-products.v2 .slider .prev-btn:hover {
background: var(--color-yellow)
}
.our-products.v1 .slider {
padding: 0 30px 28px
}
.our-products.v2 .slider {
padding: 0 30px
}
.we-serve.v1 {
padding-top: 0;
background: var(--color-white2)
}
.we-serve.v1 .we-serve-card {
padding: 50px;
box-shadow: -8px 10px 30px rgba(0, 0, 0, .06);
border-radius: 20px;
background: var(--color-white);
margin-bottom: 30px
}
.we-serve.v1 .we-serve-card .my-icon {
position: relative;
padding: 10px 0 0 10px;
font-size: 57px;
color: var(--color-green);
z-index: 1
}
.we-serve.v1 .we-serve-card .my-icon:after {
position: absolute;
content: "";
width: 55px;
height: 55px;
top: -10px;
border-radius: 100px;
opacity: .2;
background: var(--color-green);
z-index: -1;
transition: all .4s ease
}
.we-serve.v1 .we-serve-card .my-icon~h4 {
margin-top: 45px
}
.we-serve.v1 .we-serve-card h4 {
font-weight: 700
}
.we-serve.v1 .we-serve-card h4~p {
margin-top: 17px
}
.we-serve.v1 .row>div:last-child .we-serve-card {
margin-bottom: 0
}
.testimonial.v1 .testimonial-card,
.testimonial.v2 .testimonial-card,
.testimonial.v3 .testimonial-card {
padding: 50px;
border-radius: 20px
}
.testimonial.v1 .testimonial-card .profile .profile-img,
.testimonial.v2 .testimonial-card .profile .profile-img,
.testimonial.v3 .testimonial-card .profile .profile-img {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 100px;
overflow: hidden
}
.testimonial.v1 .testimonial-card .profile .profile-img img,
.testimonial.v2 .testimonial-card .profile .profile-img img,
.testimonial.v3 .testimonial-card .profile .profile-img img {
width: 100%
}
.testimonial.v1 .testimonial-card .profile .profile-content h6,
.testimonial.v2 .testimonial-card .profile .profile-content h6,
.testimonial.v3 .testimonial-card .profile .profile-content h6 {
font-family: Roboto, sans-serif;
font-weight: 500
}
.testimonial.v1 .testimonial-card .profile .profile-content h6~p,
.testimonial.v2 .testimonial-card .profile .profile-content h6~p,
.testimonial.v3 .testimonial-card .profile .profile-content h6~p {
margin-top: 10px
}
.testimonial.v1 .testimonial-card .profile~p,
.testimonial.v2 .testimonial-card .profile~p,
.testimonial.v3 .testimonial-card .profile~p {
margin-top: 20px
}
.testimonial.v1 .slider,
.testimonial.v2 .slider,
.testimonial.v3 .slider {
overflow: hidden;
margin-top: 60px;
padding: 0 30px
}
.testimonial.v1 .slider .next-btn,
.testimonial.v1 .slider .prev-btn,
.testimonial.v2 .slider .next-btn,
.testimonial.v2 .slider .prev-btn,
.testimonial.v3 .slider .next-btn,
.testimonial.v3 .slider .prev-btn {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border-radius: 80px;
border: 1px solid var(--color-tr);
text-align: center;
line-height: 50px;
transform: translateY(-50%);
z-index: 2
}
.testimonial.v1 .testimonial-card .profile,
.testimonial.v2 .testimonial-card .profile {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 20px
}
.testimonial.v2 .slider .next-btn,
.testimonial.v2 .slider .prev-btn,
.testimonial.v3 .slider .next-btn,
.testimonial.v3 .slider .prev-btn {
border: 1px solid var(--color-border);
background: var(--color-white);
color: var(--color-black)
}
.testimonial.v2 .slider .next-btn:hover,
.testimonial.v2 .slider .prev-btn:hover,
.testimonial.v3 .slider .next-btn:hover,
.testimonial.v3 .slider .prev-btn:hover {
background: var(--color-yellow)
}
.testimonial.v2 .testimonial-card,
.testimonial.v3 .testimonial-card {
background: var(--color-white);
box-shadow: 0 1px 5px 4px rgba(43, 32, 18, .03)
}
.testimonial.v1 .slider .next-btn,
.testimonial.v1 .slider .prev-btn {
background: var(--color-gBlack);
color: var(--color-white)
}
.testimonial.v1 .slider .next-btn:hover,
.testimonial.v1 .slider .prev-btn:hover {
background: var(--color-yellow)
}
.testimonial.v1 .testimonial-card {
background: var(--color-black2);
box-shadow: 0 4px 4px rgba(43, 32, 18, .03)
}
.testimonial.v1 .testimonial-card .profile .profile-content h6,
.testimonial.v1 .testimonial-card .profile .profile-content h6 a {
color: var(--color-white)
}
.testimonial.v1 .testimonial-card .profile .profile-content h6 a:hover {
color: var(--color-yellow)
}
.testimonial.v1 .testimonial-card .profile~p {
margin-top: 20px
}
.testimonial.v1 .testimonial-card p {
color: var(--color-white)
}
.testimonial.v2 {
padding-top: 0
}
.testimonial.v3 {
background: var(--color-white2)
}
.testimonial.v3 .testimonial-card {
padding: 30px 50px;
text-align: center
}
.testimonial.v3 .testimonial-card .profile .profile-img {
border: 2px solid var(--color-border);
margin: 0 auto
}
.testimonial.v3 .testimonial-card .profile .profile-img~.profile-content {
margin-top: 20px
}
.blog-news.v1 .blog-card .blog-img,
.blog-news.v3 .blog-card .blog-img {
border-radius: 20px;
overflow: hidden
}
.blog-news.v1 .blog-card .blog-img img,
.blog-news.v3 .blog-card .blog-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
filter: blur(.3px) grayscale(.2);
transition: all .4s ease
}
.blog-news.v1 .blog-card .post-tag,
.blog-news.v3 .blog-card .post-tag {
padding: 3px 10px;
display: inline-block;
border: 2px solid var(--color-border);
border-radius: 3px;
font-family: Arima Madurai, cursive;
font-weight: 700;
color: var(--color-gBlack);
background: var(--color-tr)
}
.blog-news.v1 .blog-card .post-tag:hover,
.blog-news.v3 .blog-card .post-tag:hover {
border-color: var(--color-yellow);
background: var(--color-yellow)
}
.blog-news.v1 .blog-card .blog-content,
.blog-news.v3 .blog-card .blog-content {
margin-top: 40px
}
.blog-news.v1 .blog-card .blog-content .post-header,
.blog-news.v3 .blog-card .blog-content .post-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.blog-news.v1 .blog-card .blog-content .post-header a,
.blog-news.v3 .blog-card .blog-content .post-header a {
display: inline-block
}
.blog-news.v1 .blog-card .blog-content .post-header li h6,
.blog-news.v3 .blog-card .blog-content .post-header li h6 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.blog-news.v1 .blog-card .blog-content h6,
.blog-news.v3 .blog-card .blog-content h6 {
font-weight: 700
}
.blog-news.v1 .blog-card .blog-content h6 .my-icon,
.blog-news.v3 .blog-card .blog-content h6 .my-icon {
font-size: 15px;
color: var(--color-green)
}
.blog-news.v1 .blog-card .blog-content h3,
.blog-news.v3 .blog-card .blog-content h3 {
font-size: 24px;
line-height: 34px;
font-weight: 800;
margin-top: 30px
}
.blog-news.v1 .blog-card .blog-content .post-footer,
.blog-news.v1 .blog-card .blog-content .post-footer .porfile,
.blog-news.v3 .blog-card .blog-content .post-footer,
.blog-news.v3 .blog-card .blog-content .post-footer .porfile {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.blog-news.v1 .blog-card .blog-content .post-footer,
.blog-news.v3 .blog-card .blog-content .post-footer {
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 20px
}
.blog-news.v1 .blog-card .blog-content .post-footer .porfile img,
.blog-news.v3 .blog-card .blog-content .post-footer .porfile img {
border-radius: 50px
}
.blog-news.v1 .blog-card .blog-content .post-footer .porfile h6,
.blog-news.v3 .blog-card .blog-content .post-footer .porfile h6 {
font-weight: 700;
font-size: 14px;
line-height: 24px
}
.blog-news.v1 .blog-card:hover .blog-img img,
.blog-news.v3 .blog-card:hover .blog-img img {
filter: blur(0) grayscale(0);
transform: rotate(1deg) scale(1.1)
}
.blog-news.v2 {
background: var(--color-white2)
}
.blog-news.v2 .blog-card {
padding-bottom: 40px;
border-radius: 20px;
background: var(--color-white);
margin-bottom: 30px
}
.blog-news.v2 .blog-card .blog-img {
border-radius: 20px 20px 0 0;
overflow: hidden
}
.blog-news.v2 .blog-card .blog-img img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transition: all .4s ease
}
.blog-news.v2 .blog-card .blog-content {
position: relative;
padding: 60px 30px 0;
background: var(--color-white);
margin-top: -100px;
z-index: 1
}
.blog-news.v2 .blog-card .blog-content h6 {
font-weight: 900
}
.blog-news.v2 .blog-card .blog-content h6 .my-icon {
color: var(--color-gBlack)
}
.blog-news.v2 .blog-card .blog-content h6~h4 {
margin-top: 15px
}
.blog-news.v2 .blog-card .blog-content h4 {
font-weight: 700
}
.blog-news.v2 .blog-card .blog-content .date-link {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-top: 20px
}
.blog-news.v2 .blog-card .blog-content .date-link h6 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
width: calc(100% - 40px)
}
.blog-news.v2 .blog-card .blog-content .date-link h6 .my-icon {
font-size: 18px
}
.blog-news.v2 .blog-card .blog-content .date-link h6 .text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.blog-news.v2 .blog-card .blog-content .date-link .link-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 16px;
line-height: 40px;
color: var(--color-black);
border-radius: 50px;
background: var(--color-yellow)
}
.blog-news.v2 .blog-card .blog-content .left-btn {
position: absolute;
padding: 55px 13px;
border: none;
bottom: 0;
background: var(--color-tr)
}
.blog-news.v2 .blog-card .profile-img {
position: absolute;
top: -30px;
width: 60px;
height: 60px
}
.blog-news.v2 .blog-card .profile-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 100px
}
.blog-news.v2 .blog-card:hover .blog-img img {
transform: scale(1.1) rotate(1deg);
filter: blur(0) grayscale(0)
}
.blog-news.v2 .row>div:last-child .blog-card {
margin-bottom: 0
}
.blog-news.v1 {
background: var(--color-white2)
}
.blog-news.v1 .blog-card .blog-content ul {
gap: 30px
}
.blog-news.v1 .blog-card .blog-content .post-header li h6 {
gap: 10px
}
.blog-news.v1 .small-post {
margin-top: 35px
}
.blog-news.v1 .small-post>li {
padding: 35px 0
}
.blog-news.v1 .small-post>li~li {
border-top: 1px solid var(--color-border)
}
.blog-news.v1 .small-post>li:last-child {
padding-bottom: 0
}
.blog-news.v3 {
background: var(--color-white)
}
.blog-news.v3 .blog-card .blog-content .post-header li h6,
.blog-news.v3 .blog-card .blog-content ul {
gap: 10px
}
.blog-news.v3 .blog-card .blog-content .post-header~.text-content,
.blog-news.v3 .blog-card .blog-content .text-content h6~p {
margin-top: 15px
}
.blog-news.v3 .contact-form,
.blog-news.v3 .contact-form~.our-sweet-partners,
.blog-news.v3 .section-title h2~p,
.blog-news.v3 .section-title~form,
.blog-news.v3 .small-post,
.blog-news.v3 .small-post>li~li {
margin-top: 40px
}
.blog-news.v3 form {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 20px
}
.blog-news.v3 form input {
width: 100%;
height: 60px;
background: var(--color-white2);
border-radius: 100px;
border: 1px solid var(--color-white2);
color: var(--color-gBlack);
font-size: 14px;
font-weight: 400;
padding: 12px 25px
}
.blog-news.v3 .our-sweet-partners .section-title~ul {
margin-top: 50px
}
.blog-news.v3 .our-sweet-partners ul {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px
}
.blog-news.v3 .our-sweet-partners ul li {
width: calc(50% - 30px)
}
.blog-news.v3 .our-sweet-partners ul li a {
display: inline-block
}
.blog-news.v3 .our-sweet-partners ul li img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.our-sweet-clients.v1 li,
.our-sweet-clients.v2 li {
text-align: center
}
.about-beeberry.v1 .left-content {
padding-right: 50px
}
.about-beeberry.v1 .exp-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 30px
}
.about-beeberry.v1 .exp-text h2 {
font-size: 60px;
line-height: 70px;
font-weight: 900
}
.about-beeberry.v1 .exp-text p {
position: relative;
padding-left: 110px
}
.about-beeberry.v1 .exp-text p:before {
position: absolute;
content: "";
width: 95px;
height: 2px;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--color-black)
}
.about-beeberry.v1 .right-content p~a {
margin-top: 50px
}
.about-beeberry.v1 .row~.video-box {
margin-top: 60px
}
.about-beeberry.v2 .content-left,
.about-beeberry.v3 .content-left {
margin-top: 30px
}
.about-beeberry.v2 .content-left .check-mark-list~.btn-anime,
.about-beeberry.v2 .content-left .check-mark-list~.link-anime,
.about-beeberry.v2 .content-left .section-title~.check-mark-list,
.about-beeberry.v3 .content-left .check-mark-list~.btn-anime,
.about-beeberry.v3 .content-left .check-mark-list~.link-anime,
.about-beeberry.v3 .content-left .section-title~.check-mark-list {
margin-top: 40px
}
.about-beeberry.v2 .content-right img {
width: 100%
}
.about-beeberry.v3 .abou-o-img img {
width: 100%;
max-width: calc(67% - 15px);
border-radius: 20px
}
.about-beeberry.v3 .abou-o-img img:nth-child(2) {
position: relative;
bottom: 0;
margin-top: -38%
}
.fun-fact.v1 li~li,
.fun-fact.v2 li~li {
margin-top: 25px
}
.fun-fact.v1 .my-icon,
.fun-fact.v2 .my-icon {
width: 65px;
height: 65px;
text-align: center;
line-height: 65px;
font-size: 25px
}
.fun-fact.v1 h3,
.fun-fact.v2 h3 {
font-weight: 900
}
.fun-fact.v1 h3~h5,
.fun-fact.v2 h3~h5 {
margin-top: 5px
}
.fun-fact.v1 h5,
.fun-fact.v2 h5 {
font-weight: 700
}
.fun-fact.v1 .my-icon {
color: var(--color-black);
border-radius: 100px;
box-shadow: 1px 1px 32px rgba(0, 0, 0, .1);
background: var(--color-white)
}
.fun-fact.v1 .my-icon~.text {
margin-top: 25px
}
.fun-fact.v2 ul li {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
gap: 20px
}
.fun-fact.v2 .my-icon {
color: var(--color-yellow);
border-radius: 10px;
border: 1px solid var(--color-yellow);
background: var(--color-black2)
}
.fun-fact.v2 h3,
.fun-fact.v2 h5 {
color: var(--color-white)
}
.gallery-display.v1 .gallery-btns ul {
text-align: center
}
.gallery-display.v1 .gallery-btns li {
display: inline-block
}
.gallery-display.v1 .gallery-btns button {
padding: 16px 40px;
font-family: Arima Madurai, cursive;
font-weight: 900;
font-size: 16px;
line-height: 22px;
color: var(--color-black);
border: 1px solid var(--color-border);
border-radius: 50px;
background: var(--color-tr);
margin: 10px 5px
}
.gallery-display.v1 .gallery-btns button.active {
border-color: var(--color-tr);
background: var(--color-yellow)
}
.gallery-display.v1 .gallery-btns~.gallery-items {
margin-top: 60px
}
.gallery-display.v1 .gallery-content {
position: relative;
display: inline-block;
border-radius: 20px;
overflow: hidden;
margin-bottom: 30px
}
.gallery-display.v1 .gallery-content:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: linear-gradient(358.9deg, #2b221f 11.13%, rgba(43, 34, 31, 0) 98.98%);
transition: all .4s ease;
z-index: 1
}
.gallery-display.v1 .gallery-content:after {
position: absolute;
content: "";
width: 35vw;
height: 35vw;
top: -100%;
z-index: 2;
opacity: 0;
background-image: url(../img/honeycom-b-a/v1/shap-2.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50%;
transition: all .4s ease
}
.gallery-display.v1 .gallery-content .video-box:after,
.gallery-display.v1 .gallery-content .video-box:before {
content: none
}
.gallery-display.v1 .gallery-content img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transform: rotate(1deg) scale(1.1);
transition: all .4s ease
}
.gallery-display.v1 .gallery-content .tag {
display: inline-block;
padding: 1px 20px;
font-weight: 700;
text-transform: uppercase;
color: var(--color-black);
border-radius: 50px;
background: var(--color-yellow)
}
.gallery-display.v1 .gallery-content .tag~h3 {
margin-top: 30px
}
.gallery-display.v1 .gallery-content h3 {
color: var(--color-white);
font-weight: 900
}
.gallery-display.v1 .gallery-content h3 a {
color: var(--color-white)
}
.gallery-display.v1 .gallery-content h3 a:hover {
color: var(--color-yellow)
}
.gallery-display.v1 .gallery-content .text {
position: absolute;
width: 100%;
padding: 30px;
bottom: -100%;
left: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
transition: all .4s ease
}
.gallery-display.v1 .gallery-content:hover:after,
.gallery-display.v1 .gallery-content:hover:before {
opacity: 1
}
.gallery-display.v1 .gallery-content:hover:after {
top: 0
}
.gallery-display.v1 .gallery-content:hover img {
filter: blur(0) grayscale(0);
transform: rotate(0deg) scale(1)
}
.gallery-display.v1 .gallery-content:hover .text {
opacity: 1;
visibility: visible;
bottom: 0
}
.gallery-display.v1 .gallery-item:last-child .gallery-content,
.gallery-display.v1 .gallery-item:nth-last-child(2) .gallery-content {
margin-bottom: 0
}
.gallery-display.v1 .gallery-items~.lode-btns {
margin-top: 40px
}
.gallery-display.v1 .lode-btns {
text-align: center
}
.working-process.v1 .process-boxs {
margin-top: 60px
}
.working-process.v1 .process-boxs ul {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px
}
.working-process.v1 .process-boxs li {
width: 100%;
text-align: center
}
.working-process.v1 .process-boxs li .icon-box {
position: relative;
width: 85px;
height: 85px;
text-align: center;
border-radius: 10px;
border: 1px solid var(--color-yellow);
background: var(--color-black);
margin: 22px auto 0
}
.working-process.v1 .process-boxs li .icon-box .my-icon {
font-size: 40px;
color: var(--color-yellow);
line-height: 85px
}
.working-process.v1 .process-boxs li .icon-box .num-count {
position: absolute;
width: 40px;
height: 40px;
top: -21px;
font-size: 18px;
line-height: 40px;
color: var(--color-white);
border-radius: 50px;
border: 1px solid var(--color-yellow);
background: var(--color-black)
}
.working-process.v1 .process-boxs li h5 {
color: var(--color-white);
font-weight: 700;
margin-top: 30px
}
.working-process.v1 .process-boxs li:last-child .icon-box:before {
content: none
}
.get-in-touch.v1 .box-content {
position: relative;
padding: 50px;
z-index: 1
}
.get-in-touch.v1 .box-content:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .8;
background: var(--color-black);
z-index: -1
}
.get-in-touch.v1 .box-content .section-title-white~.star-mark {
margin-top: 30px
}
.get-in-touch.v1 .box-content p {
color: var(--color-white);
margin-top: 20px
}
.get-in-touch.v1 .box-content .play-btn {
margin-top: 30px
}
.team.v1 {
background: var(--color-white2)
}
.team.v1>.container {
position: relative
}
.team.v1 .slider {
margin-top: 50px
}
.team.v1 .next-btn,
.team.v1 .prev-btn {
position: absolute;
width: 50px;
height: 50px;
top: 60%;
color: var(--color-black);
font-size: 20px;
line-height: 52px;
transform: translateY(-50%);
background: var(--color-tr);
z-index: 1
}
.team.v1 .next-btn:before,
.team.v1 .prev-btn:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
opacity: .5;
border-radius: 100px;
background: var(--color-yellow);
transition: all .4s ease;
z-index: -1
}
.team.v1 .next-btn:hover:before,
.team.v1 .prev-btn:hover:before {
opacity: 1
}
.team.v1 .team-card .profile-img {
position: relative;
border-radius: 20px 20px 0 0;
overflow: hidden
}
.team.v1 .team-card .profile-img:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: var(--color-white);
z-index: 1;
transition: all .4s ease
}
.team.v1 .team-card .profile-img img {
width: 100%;
transition: all .4s ease
}
.team.v1 .team-card .profile-img ul {
position: absolute;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
gap: 5px;
top: 50%;
left: 50%;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%) scale(.8);
transition: all .4s ease;
z-index: 2
}
.team.v1 .team-card .profile-img li a {
display: block;
width: 40px;
height: 40px;
font-size: 16px;
color: var(--color-white);
text-align: center;
line-height: 40px;
border-radius: 4px
}
.team.v1 .team-card .profile-img li.fb a {
background: var(--color-fb)
}
.team.v1 .team-card .profile-img li.fb a:hover {
color: var(--color-fb)
}
.team.v1 .team-card .profile-img li.tw a {
background: var(--color-tw)
}
.team.v1 .team-card .profile-img li.tw a:hover {
color: var(--color-tw)
}
.team.v1 .team-card .profile-img li.pin a {
background: var(--color-pin)
}
.team.v1 .team-card .profile-img li.pin a:hover {
color: var(--color-pin)
}
.team.v1 .team-card .profile-img li.in a {
background: var(--color-in)
}
.team.v1 .team-card .profile-img li.in a:hover {
color: var(--color-in)
}
.team.v1 .team-card .profile-img li a:hover {
background: var(--color-white)
}
.team.v1 .team-card .profile-info {
padding: 30px;
border-radius: 0 0 20px 20px;
background: var(--color-green)
}
.team.v1 .team-card .profile-info h4,
.team.v1 .team-card .profile-info p {
color: var(--color-white)
}
.team.v1 .team-card .profile-info h4 {
font-family: Roboto, sans-serif;
font-weight: 500
}
.team.v1 .team-card .profile-info p {
margin-top: 5px
}
.team.v1 .team-card:hover .profile-img img {
transform: scale(1.1)
}
.team.v1 .team-card:hover .profile-img:before {
opacity: .5
}
.team.v1 .team-card:hover .profile-img ul {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
visibility: visible
}
.tasty-honey.v1 {
background: var(--color-white2)
}
.tasty-honey.v1 .tasty-honey-card {
position: relative;
padding: 40px;
border-radius: 20px;
background: var(--color-white);
margin-bottom: 30px
}
.tasty-honey.v1 .tasty-honey-card .tasty-honey-header {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px
}
.tasty-honey.v1 .tasty-honey-card .tasty-honey-header h4 {
font-weight: 900;
color: var(--color-tr);
opacity: .5;
-webkit-text-stroke: 1px var(--color-black)
}
.tasty-honey.v1 .tasty-honey-card .tasty-honey-header .my-icon {
font-size: 30px
}
.tasty-honey.v1 .tasty-honey-card .tasty-honey-body h4 {
font-weight: 900;
margin-top: 25px
}
.tasty-honey.v1 .tasty-honey-card .tasty-honey-body p {
margin-top: 20px
}
.tasty-honey.v1 .row>div:last-child .tasty-honey-card {
margin-bottom: 0
}
.services-details.v1 img {
width: 100%;
border-radius: 20px
}
.services-details.v1 h3 {
font-weight: 900;
margin-top: 30px
}
.services-details.v1 p {
margin-top: 20px
}
.services-details.v1 .big-post-img,
.services-details.v1 .box-img {
border-radius: 20px;
overflow: hidden
}
.services-details.v1 .big-post-img img,
.services-details.v1 .box-img img {
filter: blur(.3px) grayscale(.2);
transition: all .4s ease
}
.services-details.v1 .big-post-img:hover img,
.services-details.v1 .box-img:hover img {
transform: scale(1.1) rotate(1deg);
filter: blur(0) grayscale(0)
}
.services-details.v1 .feedbac-box {
padding: 30px 15px;
margin-top: 30px
}
.services-details.v1 .feedbac-box .box-img {
margin-bottom: 20px
}
.services-details.v1 .feedbac-box .box-content {
text-align: center
}
.services-details.v1 .feedbac-box .box-content h5,
.services-details.v1 .feedbac-box .box-content p {
color: var(--color-white)
}
.services-details.v1 .feedbac-box .box-content h5 {
font-weight: 700
}
.services-details.v1 .feedbac-box .box-content .feedbac-btn,
.services-details.v1 .feedbac-box .box-content .star-mark,
.services-details.v1 .feedbac-box .box-content p {
margin-top: 20px
}
.services-details.v1 .feedbac-box .box-content .feedbac-btn,
.services-details.v1 .feedbac-box .box-content .star-mark {
-ms-flex-pack: center;
justify-content: center
}
.services-details.v1 .feedbac-box .box-content .feedbac-btn {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-weight: 500;
text-transform: uppercase;
color: var(--color-white);
transition: all .4s ease
}
.services-details.v1 .feedbac-box .box-content .feedbac-btn:hover {
color: var(--color-yellow)
}
.services-details.v1 .feedbac-box .box-content .feedbac-btn .my-icon {
font-size: 18px;
color: var(--color-yellow)
}
.services-details.v1 .mid-box-imgs {
margin-top: 30px
}
.services-details.v1 .mid-box-imgs .box-img:nth-child(2) {
margin-top: 20px
}
.faq.v1 {
background: var(--color-white2)
}
.faq.v1 .left-content {
padding-right: 50px
}
.faq.v1 .left-content .section-title~.link-anime,
.faq.v1 .right-countent ul {
margin-top: 30px
}
.faq.v1 .right-countent li~li {
margin-top: 15px
}
.faq.v1 .right-countent button {
position: relative;
font-family: Arima Madurai, cursive;
width: 100%;
color: var(--color-black);
font-size: 18px;
font-weight: 700;
line-height: 28px;
text-align: inherit;
border-radius: 5px;
border: 1px solid var(--color-border);
background: var(--color-white)
}
.faq.v1 .right-countent button:before {
position: absolute;
top: 25px;
font-size: 16px;
color: var(--color-yellow);
transform: rotate(180deg);
transition: all .4s ease;
font-family: icomoon;
content: "\e919";
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.faq.v1 .right-countent button.collapsed:before {
transform: rotate(0deg);
color: var(--color-black)
}
.faq.v1 .right-countent .box-content {
padding: 30px;
border: 1px solid var(--color-border);
border-top: none;
background: var(--color-white)
}
.who-we-are.v1 {
background: var(--color-white2)
}
.who-we-are.v1 .who-we-are-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px
}
.who-we-are.v1 .who-we-img img {
width: 100%;
border-radius: 20px
}
.who-we-are.v1 .who-we-box {
padding: 50px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-white)
}
.who-we-are.v1 .who-we-box .section-title~.check-mark-list {
margin-top: 20px
}
.make-a-new-story.v1 {
padding-top: 0;
background: var(--color-white2)
}
.make-a-new-story.v1 .section-title-center~.story-cards,
.make-a-new-story.v1 .story-cards li~li {
margin-top: 60px
}
.make-a-new-story.v1 .story-cards li:first-child .count-item:after {
content: none
}
.make-a-new-story.v1 .story-cards .count-item,
.make-a-new-story.v1 .story-cards .more-story-btn {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50px;
font-weight: 500;
color: var(--color-black);
box-shadow: 0 6px 8px hsla(0, 0%, 83%, .25);
background: var(--color-white);
z-index: 1
}
.make-a-new-story.v1 .story-cards .count-item {
position: relative;
margin: 0 auto
}
.make-a-new-story.v1 .story-cards .count-item:after,
.make-a-new-story.v1 .story-cards .count-item:before {
position: absolute;
content: "";
width: 1px;
height: 60px;
left: 20px;
background: var(--color-border)
}
.make-a-new-story.v1 .story-cards .count-item:before {
top: 40px
}
.make-a-new-story.v1 .story-cards .count-item:after {
bottom: 40px
}
.make-a-new-story.v1 .story-cards .more-story-btn {
position: relative
}
.make-a-new-story.v1 .story-cards .more-story-btn:hover {
background: var(--color-yellow)
}
.make-a-new-story.v1 .story-cards .more-story-btn:before {
position: absolute;
content: "";
width: 1px;
height: 60px;
top: -60px;
left: 20px;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: var(--color-border)
}
.make-a-new-story.v1 .story-cards .count-item~.story-content,
.make-a-new-story.v1 .story-cards ul~.more-story {
margin-top: 60px
}
.make-a-new-story.v1 .more-story {
text-align: center
}
.make-a-new-story.v1 .content-img {
position: relative;
overflow: hidden;
border-radius: 20px 20px 0 0
}
.make-a-new-story.v1 .content-img img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transform: rotate(1deg) scale(1.1);
transition: all .4s ease
}
.make-a-new-story.v1 .content-img .year {
position: absolute;
padding: 30px 30px 10px;
text-align: center;
bottom: 0;
font-family: Arima Madurai, cursive;
font-size: 22px;
font-weight: 700;
border: 1px solid var(--color-white2);
border-radius: 500px 500px 0 0;
background: var(--color-white)
}
.make-a-new-story.v1 .content-text {
padding: 30px;
border-radius: 0 0 20px 20px;
background: var(--color-white)
}
.make-a-new-story.v1 .content-text h3 {
font-weight: 900
}
.make-a-new-story.v1 .content-text p {
margin-top: 15px
}
.make-a-new-story.v1 .story-content:hover .content-img img {
filter: blur(0) grayscale(0);
transform: scale(1) rotate(0deg)
}
.shop.v1 {
background: var(--color-white2)
}
.shop.v1 .products .pro-right {
margin-top: 20px
}
.shop.v1 .products .pro-right .my-select .current {
background: var(--color-tr);
font-size: 14px
}
.shop.v1 .products .pro-display-header~.row {
margin-top: 30px
}
.shop.v1 .products .product-card {
margin-bottom: 60px
}
.shop.v1 .products .row>div:last-child .product-card {
margin-bottom: 0
}
.shop-details.v1 {
background: var(--color-white2)
}
.shop-details.v1 .big-box-img {
position: relative
}
.shop-details.v1 .big-box-img .zoom-btn {
position: absolute;
width: 45px;
height: 45px;
top: 30px;
right: 30px;
text-align: center;
line-height: 45px;
border-radius: 50px;
border: 1px solid var(--color-border);
background: var(--color-white);
z-index: 2
}
.shop-details.v1 .big-box-img .slider {
border-radius: 20px;
padding-bottom: 0
}
.shop-details.v1 .big-box-img .swiper-slide {
overflow: hidden
}
.shop-details.v1 .big-box-img .swiper-slide img {
width: 100%
}
.shop-details.v1 .small-box-img {
width: 65%;
margin-top: 30px
}
.shop-details.v1 .small-box-img .slider {
padding-bottom: 0
}
.shop-details.v1 .small-box-img .swiper-slide {
width: 120px;
border-radius: 10px;
border: 2px solid var(--color-border);
overflow: hidden
}
.shop-details.v1 .small-box-img .swiper-slide img {
width: 100%
}
.shop-details.v1 .small-box-img .swiper-slide a {
pointer-events: none
}
.shop-details.v1 .small-box-img .swiper-slide.swiper-slide-thumb-active,
.shop-details.v1 .small-box-img .swiper-slide:hover {
border-color: var(--color-yellow)
}
.shop-details.v1 .quan-card {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px
}
.shop-details.v1 .quan-card,
.shop-details.v1 .quan-card .quantity-count {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.shop-details.v1 .quan-card .quantity-count {
width: 150px;
border-radius: 3px;
border: 1px solid var(--color-border)
}
.shop-details.v1 .quan-card .quantity-count .count-down-btn,
.shop-details.v1 .quan-card .quantity-count .count-plus-btn {
width: 50px;
height: 60px;
font-size: 18px;
color: var(--color-black);
background: var(--color-tr)
}
.shop-details.v1 .quan-card .quantity-count input {
font-family: Arima Madurai, cursive;
padding: 0;
width: calc(100% - 100px);
height: 60px;
font-size: 18px;
text-align: center;
font-weight: 900;
line-height: 28px;
background: var(--color-tr)
}
.shop-details.v1 .quan-card .quantity-count input[type=number]::-webkit-inner-spin-button,
.shop-details.v1 .quan-card .quantity-count input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0
}
.shop-details.v1 .quan-card .quantity-count input[type=number] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield
}
.shop-details.v1 .display-right {
margin-top: 40px
}
.shop-details.v1 .display-right h3,
.shop-details.v1 .display-right h4 {
font-weight: 900
}
.shop-details.v1 .display-right h3~h4 {
margin-top: 10px
}
.shop-details.v1 .display-right .quan-card~ul,
.shop-details.v1 .display-right h4~p,
.shop-details.v1 .display-right p~.quan-card {
margin-top: 30px
}
.shop-details.v1 .display-right li~li {
margin-top: 13px
}
.shop-details.v1 .display-right li .title {
font-family: Arima Madurai, cursive;
font-weight: 900
}
.shop-details.v1 .product-tab {
margin-top: 40px
}
.shop-details.v1 .product-tab .nav-tabs {
border-bottom: none
}
.shop-details.v1 .product-tab .nav-tabs>li~li {
margin-top: 20px
}
.shop-details.v1 .product-tab .nav-tabs button {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
gap: 20px;
width: 100%;
position: relative;
padding-bottom: 15px;
text-align: inherit;
font-family: Arima Madurai, cursive;
font-weight: 700;
font-size: 18px;
line-height: 28px;
color: var(--color-black);
background: var(--color-tr)
}
.shop-details.v1 .product-tab .nav-tabs button:after,
.shop-details.v1 .product-tab .nav-tabs button:before {
position: absolute;
content: "";
height: 2px;
bottom: -2px;
background: var(--color-border)
}
.shop-details.v1 .product-tab .nav-tabs button:after {
width: 100%
}
.shop-details.v1 .product-tab .nav-tabs button:before {
width: 50%;
opacity: 0;
visibility: hidden;
background: var(--color-black);
transition: all .4s ease;
z-index: 1
}
.shop-details.v1 .product-tab .nav-tabs button.active:before {
width: 100%;
opacity: 1;
visibility: visible
}
.shop-details.v1 .product-tab .tab-content {
padding-top: 24px
}
.blog.v1 .big-post~.big-post {
margin-top: 60px
}
.blog.v1 .big-post .post-img {
border-radius: 20px;
overflow: hidden
}
.blog.v1 .big-post .post-img.video-box:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .3;
background: var(--color-black);
transform: translate(0) rotate(0deg)
}
.blog.v1 .big-post .post-img.video-box:after {
content: none
}
.blog.v1 .big-post .post-img img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transition: all .4s ease
}
.blog.v1 .big-post .post-content ul {
padding: 20px 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.blog.v1 .big-post .post-content li .my-icon {
font-size: 15px;
color: var(--color-green);
margin-right: 10px
}
.blog.v1 .big-post .post-content h3 {
font-weight: 900
}
.blog.v1 .big-post .post-content h3~p {
margin: 30px 0
}
.blog.v1 .big-post:hover .post-img img {
transform: scale(1.1) rotate(1deg);
filter: blur(0) grayscale(0)
}
.blog.v1 .big-post .slider {
padding-bottom: 0
}
.blog.v1 .big-post .slider .swiper-slide {
overflow: hidden
}
.blog.v1 .big-post .slider .next-btn,
.blog.v1 .big-post .slider .prev-btn {
position: absolute;
width: 50px;
height: 50px;
line-height: 55px;
top: 50%;
transform: translateY(-50%);
background: var(--color-tr);
z-index: 1
}
.blog.v1 .big-post .slider .next-btn:before,
.blog.v1 .big-post .slider .prev-btn:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100px;
background: var(--color-green);
transition: all .4s ease;
z-index: -1
}
.blog.v1 .big-post .slider .next-btn .my-icon,
.blog.v1 .big-post .slider .prev-btn .my-icon {
color: var(--color-white);
font-size: 20px
}
.blog-details.v1 .big-post-details .post-img {
border-radius: 20px;
overflow: hidden
}
.blog-details.v1 .big-post-details .post-img.video-box:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .3;
background: var(--color-black);
transform: translate(0) rotate(0deg)
}
.blog-details.v1 .big-post-details .post-img.video-box:after {
content: none
}
.blog-details.v1 .big-post-details .post-img img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transition: all .4s ease
}
.blog-details.v1 .big-post-details .post-content ul {
padding-top: 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.blog-details.v1 .big-post-details .post-content li .my-icon {
font-size: 15px;
color: var(--color-green)
}
.blog-details.v1 .big-post-details .post-content h3 {
font-weight: 900;
margin-top: 20px
}
.blog-details.v1 .big-post-details .post-content h3~p,
.blog-details.v1 .big-post-details .post-content p~.gallery-box-images,
.blog-details.v1 .big-post-details .post-content p~p {
margin-top: 30px
}
.blog-details.v1 .big-post-details .post-content~.tags-social {
margin-top: 50px
}
.blog-details.v1 .big-post-details .slider {
padding-bottom: 0
}
.blog-details.v1 .big-post-details .slider .swiper-slide {
overflow: hidden
}
.blog-details.v1 .big-post-details .slider .next-btn,
.blog-details.v1 .big-post-details .slider .prev-btn {
position: absolute;
width: 50px;
height: 50px;
line-height: 55px;
top: 50%;
transform: translateY(-50%);
background: var(--color-tr);
z-index: 1
}
.blog-details.v1 .big-post-details .slider .next-btn:before,
.blog-details.v1 .big-post-details .slider .prev-btn:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100px;
background: var(--color-green);
transition: all .4s ease;
z-index: -1
}
.blog-details.v1 .big-post-details .slider .next-btn .my-icon,
.blog-details.v1 .big-post-details .slider .prev-btn .my-icon {
color: var(--color-white);
font-size: 20px
}
.blog-details.v1 .big-post-details .user {
position: relative;
border-radius: 20px;
margin-top: 40px
}
.blog-details.v1 .big-post-details .user:before {
position: absolute;
width: 50px;
height: 50px;
content: "\e934";
top: 0;
color: var(--color-tr);
font-size: 20px;
text-align: center;
line-height: 50px;
background: var(--color-yellow);
font-family: icomoon;
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-stroke: 1.5px var(--color-black)
}
.blog-details.v1 .big-post-details .user .user-content {
padding: 70px 30px 30px
}
.blog-details.v1 .big-post-details .user .user-content h5 {
font-family: Roboto, sans-serif;
font-weight: 400
}
.blog-details.v1 .big-post-details .user .user-content h5~p {
margin-top: 12px
}
.blog-details.v1 .big-post-details .user .user-content h5,
.blog-details.v1 .big-post-details .user .user-content p {
color: var(--color-white)
}
.blog-details.v1 .big-post-details .user .user-content a {
color: var(--color-yellow)
}
.blog-details.v1 .big-post-details .user .user-content a:hover {
color: var(--color-white)
}
.blog-details.v1 .big-post-details .user .user-content~p {
margin-top: 30px
}
.blog-details.v1 .big-post-details .gallery-box-images {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px
}
.blog-details.v1 .big-post-details .gallery-box-images .box-image {
width: 100%
}
.blog-details.v1 .big-post-details .gallery-box-images .box-image img {
width: 100%;
border-radius: 20px
}
.blog-details.v1 .big-post-details .all-comments h4 {
font-weight: 700
}
.blog-details.v1 .big-post-details .all-comments h4~.comments-list {
margin-top: 40px
}
.blog-details.v1 .big-post-details .all-comments .comments-list>li~li {
margin-top: 35px
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-img {
width: 60px;
height: 60px;
min-width: 60px;
overflow: hidden;
border-radius: 100px
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text {
width: calc(100% - 90px)
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .comment-info {
gap: 20px
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .comment-info,
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .comment-info li {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .comment-info li {
gap: 8px
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .comment-info h6 {
font-family: Roboto, sans-serif;
font-weight: 500
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .comment-info .my-icon {
font-size: 16px;
color: var(--color-green)
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .comment-info~.content {
margin-top: 15px
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .content {
position: relative;
padding: 40px 30px;
background: var(--color-white2)
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .content:before {
position: absolute;
content: "";
width: 25px;
height: 19px;
top: 0;
border-bottom: 19px solid var(--color-tr);
background: var(--color-tr)
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .content~.reply-btn {
margin-top: 15px
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .reply-btn {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
padding: 0;
color: var(--color-green);
font-weight: 500;
font-size: 16px;
background: var(--color-tr)
}
.blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .reply-btn:hover {
color: var(--color-yellow)
}
.blog-details.v1 .big-post-details .all-comments~.comments-form {
margin-top: 70px
}
.blog-details.v1 .big-post-details .comments-form h3 {
font-weight: 700
}
.blog-details.v1 .big-post-details .comments-form h3~p {
margin-top: 5px
}
.blog-details.v1 .big-post-details .comments-form p~.main-form {
margin-top: 30px
}
.blog-details.v1 .big-post-details .comments-form .main-form input {
width: 100%;
height: 70px;
border: 1px solid var(--color-border);
border-radius: 5px;
font-size: 16px;
line-height: 26px
}
.blog-details.v1 .big-post-details .comments-form .main-form .group-input {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 30px
}
.blog-details.v1 .big-post-details .comments-form .main-form .group-input~input,
.blog-details.v1 .big-post-details .comments-form .main-form .group-input~textarea {
margin-top: 30px
}
.blog-details.v1 .big-post-details .comments-form .main-form .check-box {
display: -ms-flexbox;
display: flex;
gap: 10px
}
.blog-details.v1 .big-post-details .comments-form .main-form .check-box input {
padding: 0;
width: 14px;
height: 14px;
min-width: 14px;
border-radius: 1px;
border: 1px solid var(--color-border);
margin-top: 2px
}
.blog-details.v1 .big-post-details .comments-form .main-form .check-box input:checked {
background-color: var(--color-yellow);
border-color: var(--color-yellow)
}
.blog-details.v1 .big-post-details .comments-form .main-form .check-box input:focus {
box-shadow: none
}
.blog-details.v1 .big-post-details .comments-form .main-form .check-box label {
width: calc(100% - 20px);
color: var(--color-gBlack);
font-size: 16px;
line-height: 26px;
margin-top: -5px
}
.blog-details.v1 .big-post-details .comments-form .main-form textarea {
width: 100%;
height: 140px;
padding: 15px 20px;
border: 1px solid var(--color-border);
border-radius: 5px;
font-size: 16px;
line-height: 26px
}
.blog-details.v1 .big-post-details .comments-form .main-form textarea~.btn-anime,
.blog-details.v1 .big-post-details .comments-form .main-form textarea~.check-box {
margin-top: 30px
}
.gallery-single.v1 .gallery-big-img {
border-radius: 20px 20px 0 0;
overflow: hidden
}
.gallery-single.v1 .gallery-big-img img {
width: 100%
}
.gallery-single.v1 .gallery-big-img~h3 {
margin-top: 50px
}
.gallery-single.v1 .img-box {
position: relative;
border-radius: 20px;
overflow: hidden
}
.gallery-single.v1 .img-box img {
width: 100%;
filter: blur(.3px) grayscale(.2);
transform: rotate(1deg) scale(1.1);
transition: all .4s ease
}
.gallery-single.v1 .img-box:hover img {
filter: blur(0) grayscale(0);
transform: rotate(0deg) scale(1)
}
.gallery-single.v1 .img-box .play-btn {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%)
}
.gallery-single.v1 .img-box~.tags-social {
margin-top: 50px
}
.gallery-single.v1 .big-img-count .box-img {
border-radius: 20px 20px 0 0
}
.gallery-single.v1 .big-img-count .box-content {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1px
}
.gallery-single.v1 .big-img-count .box-content li {
width: 100%;
text-align: center;
padding: 25px 15px;
background: var(--color-yellow)
}
.gallery-single.v1 .big-img-count .box-content li:last-child {
border-radius: 0 0 20px 20px
}
.gallery-single.v1 .big-img-count .box-content li h4 {
font-weight: 500
}
.gallery-single.v1 .big-img-count .box-content li h4~p {
margin-top: 4px
}
.gallery-single.v1 .big-img-count~h3 {
margin-top: 50px
}
.gallery-single.v1 h3 {
font-weight: 900
}
.gallery-single.v1 h3~p,
.gallery-single.v1 p~.box-gallery,
.gallery-single.v1 p~.check-mark-list {
margin-top: 30px
}
.gallery-single.v1 .check-mark-list {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.gallery-single.v1 .check-mark-list li {
width: 100%;
margin-top: 0
}
.gallery-single.v1 .check-mark-list~.user {
margin-top: 50px
}
.gallery-single.v1 .user {
padding: 40px;
border-radius: 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 50px
}
.gallery-single.v1 .user .user-profile {
position: relative;
width: 150px;
height: 150px
}
.gallery-single.v1 .user .user-profile:before {
position: absolute;
content: "\e934";
width: 50px;
height: 50px;
top: 0;
color: var(--color-tr);
font-size: 24px;
text-align: center;
line-height: 50px;
border-radius: 100px;
background: var(--color-yellow);
font-family: icomoon;
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-stroke: 1.5px var(--color-black)
}
.gallery-single.v1 .user .user-profile img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 100%;
border: 2px solid var(--color-border)
}
.gallery-single.v1 .user .user-content h4,
.gallery-single.v1 .user .user-content p {
color: var(--color-white)
}
.gallery-single.v1 .user .user-content h4 {
font-weight: 400;
font-family: Roboto, sans-serif
}
.gallery-single.v1 .user .user-content h4~p {
margin-top: 15px
}
.gallery-single.v1 .user .user-content p a {
color: var(--color-yellow)
}
.gallery-single.v1 .user .user-content p a:hover {
color: var(--color-white)
}
.gallery-single.v1 .user .user-content ul {
margin-top: 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.gallery-single.v1 .user .user-content ul a {
font-size: 20px;
color: var(--color-white)
}
.gallery-single.v1 .user .user-content ul a:hover {
color: var(--color-yellow)
}
.gallery-single.v1 .box-gallery {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px
}
.gallery-single.v1 .box-gallery .img-box {
width: 100%
}
.gallery-single.v1 .box-gallery~.img-box {
margin-top: 30px
}
.gallery-single.v1 .box-video {
position: relative;
margin-top: 30px
}
.gallery-single.v1 .box-video .play-video-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1
}
.send-message.v1 {
background: var(--color-white2)
}
.send-message.v1 .left-content .section-title~.socials-links-box {
margin-top: 40px
}
.send-message.v1 .message-form {
padding: 40px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-white);
margin-top: 50px
}
.send-message.v1 .message-form li~li {
margin-top: 25px
}
.send-message.v1 .message-form h5 {
font-weight: 900
}
.send-message.v1 .message-form h5~input,
.send-message.v1 .message-form h5~textarea {
margin-top: 10px
}
.send-message.v1 .message-form input,
.send-message.v1 .message-form textarea {
padding: 20px;
width: 100%;
font-size: 16px;
line-height: 26px;
color: var(--color-gBlack);
border-radius: 5px;
border: 1px solid rgba(43, 34, 31, .1);
background: var(--color-white)
}
.send-message.v1 .message-form input {
height: 60px
}
.send-message.v1 .message-form input[type=number]::-webkit-inner-spin-button,
.send-message.v1 .message-form input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.send-message.v1 .message-form input[type=number] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield
}
.send-message.v1 .message-form textarea {
height: 160px
}
.send-message.v1 .message-form .response.error,
.send-message.v1 .message-form .response.success {
padding: 20px;
border-radius: 5px;
background: var(--color-white)
}
.send-message.v1 .message-form .response.error {
color: #ef4444
}
.send-message.v1 .message-form .response.success {
color: #22c55e
}
.send-message.v1 .message-form ul~.btn-anime {
margin-top: 30px
}
.contact-us.v1 .info-content,
.contact-us.v1 .schedule-content {
border-radius: 20px;
background: var(--color-black2)
}
.contact-us.v1 li~li {
border-top: 1px dashed var(--color-gBlack)
}
.contact-us.v1 li a,
.contact-us.v1 li p {
color: var(--color-white)
}
.contact-us.v1 li a:hover {
color: var(--color-yellow)
}
.contact-us.v1 .info-content {
padding: 55px 45px
}
.contact-us.v1 .info-content li {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.contact-us.v1 .info-content li~li {
padding-top: 25px;
margin-top: 25px
}
.contact-us.v1 .info-content .my-icon {
font-size: 20px;
color: var(--color-yellow)
}
.contact-us.v1 .info-content .my-icon~p {
width: calc(100% - 50px)
}
.contact-us.v1 .schedule-content {
padding: 40px 45px
}
.contact-us.v1 .schedule-content li p {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between
}
.contact-us.v1 .schedule-content li .off-day {
color: var(--color-yellow)
}
.contact-us.v1 .schedule-content li~li {
padding-top: 20px;
margin-top: 20px
}
.contact-us.v1 .schedule-content h4 {
font-weight: 700;
color: var(--color-white)
}
.contact-us.v1 .schedule-content h4~ul {
margin-top: 20px
}
.contact-map.v1 iframe {
width: 100%;
height: 650px;
margin-bottom: -8px
}
.info-footer.v1,
.info-footer.v2 {
padding-top: 65px
}
.info-footer.v1 .news-letter,
.info-footer.v2 .news-letter {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px;
padding: 30px;
border-radius: 20px
}
.info-footer.v1 .news-letter h2,
.info-footer.v2 .news-letter h2 {
font-size: 28px;
line-height: 38px
}
.info-footer.v1 .news-letter .subscribe-bar input,
.info-footer.v2 .news-letter .subscribe-bar input {
padding: 24px 20px;
width: 100%;
height: 60px;
font-size: 16px;
line-height: 26px;
border-radius: 5px;
color: var(--color-gBlack)
}
.info-footer.v1 .news-letter .subscribe-bar .btn-anime,
.info-footer.v2 .news-letter .subscribe-bar .btn-anime {
margin-top: 20px
}
.info-footer.v1 .box-insta-gallry,
.info-footer.v2 .box-insta-gallry {
border-radius: 20px 20px 0 0;
overflow: hidden;
background: var(--color-yellow)
}
.info-footer.v1 .box-insta-gallry h4,
.info-footer.v2 .box-insta-gallry h4 {
padding: 30px 40px;
font-size: 30px;
font-weight: 900;
line-height: 40px
}
.info-footer.v1 .box-insta-gallry ul,
.info-footer.v2 .box-insta-gallry ul {
display: grid;
grid-template-columns: repeat(4, 25%)
}
.info-footer.v1 .footer__widget,
.info-footer.v2 .footer__widget {
margin-top: 65px
}
.info-footer.v1 .footer__widget h4.footer__widget-title,
.info-footer.v2 .footer__widget h4.footer__widget-title {
font-weight: 900;
font-size: 28px;
line-height: 38px
}
.info-footer.v1 .footer__widget h4.footer__widget-title~.footer__widget-content,
.info-footer.v2 .footer__widget h4.footer__widget-title~.footer__widget-content {
margin-top: 40px
}
.info-footer.v1 .footer-left .footer-logo,
.info-footer.v2 .footer-left .footer-logo {
max-width: 130px
}
.info-footer.v1 .footer-left .footer-logo a,
.info-footer.v2 .footer-left .footer-logo a {
display: inline-block
}
.info-footer.v1 .footer-left .footer-logo img,
.info-footer.v2 .footer-left .footer-logo img {
width: 100%
}
.info-footer.v1 .footer-left .footer-logo~p,
.info-footer.v1 .footer-left p~.link-anime,
.info-footer.v1 .footer-left p~.socials-links-box,
.info-footer.v2 .footer-left .footer-logo~p,
.info-footer.v2 .footer-left p~.link-anime,
.info-footer.v2 .footer-left p~.socials-links-box {
margin-top: 25px
}
.info-footer.v1 .useful-link li~li,
.info-footer.v2 .useful-link li~li {
margin-top: 7px
}
.info-footer.v1 .useful-link li a,
.info-footer.v2 .useful-link li a {
font-size: 16px;
line-height: 26px
}
.info-footer.v1 .info-link p~ul,
.info-footer.v2 .info-link p~ul {
margin-top: 20px
}
.info-footer.v1 .info-link li~li,
.info-footer.v2 .info-link li~li {
margin-top: 5px
}
.info-footer.v1 .info-link li .my-icon,
.info-footer.v2 .info-link li .my-icon {
color: var(--color-yellow)
}
.info-footer.v1 .info-link li a,
.info-footer.v2 .info-link li a {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-size: 18px;
line-height: 28px;
font-weight: 700
}
.info-footer.v1 .insta-gallry a,
.info-footer.v2 .insta-gallry a {
display: block;
position: relative;
overflow: hidden;
font-family: icomoon;
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.info-footer.v1 .insta-gallry a:before,
.info-footer.v2 .insta-gallry a:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
text-align: center;
line-height: 50%;
background: var(--color-black);
transition: all .4s ease
}
.info-footer.v1 .insta-gallry a:after,
.info-footer.v2 .insta-gallry a:after {
position: absolute;
content: "\e92c";
top: 50%;
left: 50%;
font-size: 40px;
opacity: 0;
color: var(--color-white);
transform: translate(-50%, 100%);
transition: all .4s ease
}
.info-footer.v1 .insta-gallry a:hover:before,
.info-footer.v2 .insta-gallry a:hover:before {
opacity: .5
}
.info-footer.v1 .insta-gallry a:hover:after,
.info-footer.v2 .insta-gallry a:hover:after {
opacity: 1;
transform: translate(-50%, -50%)
}
.info-footer.v1 .insta-gallry img,
.info-footer.v2 .insta-gallry img {
width: 100%
}
.info-footer.v1 .footer__widget .insta-gallry ul,
.info-footer.v2 .footer__widget .insta-gallry ul {
display: grid;
grid-template-columns: repeat(3, calc(33.333% - 9px));
gap: 10px
}
.info-footer.v1 .footer__widget .insta-gallry img,
.info-footer.v2 .footer__widget .insta-gallry img {
width: 100%
}
.info-footer.v1 .footer__widget .insta-gallry a,
.info-footer.v2 .footer__widget .insta-gallry a {
display: block;
border-radius: 5px
}
.info-footer.v1 .socials-links-box.v1,
.info-footer.v1 .socials-links-box.v2,
.info-footer.v2 .socials-links-box.v1,
.info-footer.v2 .socials-links-box.v2 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px
}
.info-footer.v1 .socials-links-box.v1 a,
.info-footer.v1 .socials-links-box.v2 a,
.info-footer.v2 .socials-links-box.v1 a,
.info-footer.v2 .socials-links-box.v2 a {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 15px;
border-radius: 50px
}
.info-footer.v1 .socials-links-box.v1 a,
.info-footer.v2 .socials-links-box.v1 a {
color: var(--color-white);
border: 1px solid var(--color-white)
}
.info-footer.v1 .socials-links-box.v1 a:hover,
.info-footer.v2 .socials-links-box.v1 a:hover {
color: var(--color-yellow);
background: var(--color-white)
}
.info-footer.v1 .socials-links-box.v2 a,
.info-footer.v2 .socials-links-box.v2 a {
color: var(--color-black);
background: var(--color-yellow)
}
.info-footer.v1 .socials-links-box.v2 a:hover,
.info-footer.v2 .socials-links-box.v2 a:hover {
color: var(--color-white);
background: var(--color-green)
}
.info-footer.v1 .useful-link li a,
.info-footer.v2 .useful-link li a {
position: relative
}
.info-footer.v1 .useful-link li a:before,
.info-footer.v2 .useful-link li a:before {
position: absolute;
content: "";
width: 6px;
height: 6px;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 50px;
background: var(--color-yellow)
}
.info-footer.v1 .useful-link li a:hover,
.info-footer.v2 .useful-link li a:hover {
color: var(--color-yellow)
}
.info-footer.v1 .main-footer,
.info-footer.v2 .main-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 15px;
padding: 30px 0;
margin-top: 30px
}
.info-footer.v1 .footer__widget h4.footer__widget-title,
.info-footer.v1 .info-link li a,
.info-footer.v1 .useful-link li a,
.info-footer.v1 p {
color: var(--color-white)
}
.info-footer.v1 .info-link li a:hover {
color: var(--color-yellow)
}
.info-footer.v1 .main-footer {
border-top: 1px solid var(--color-gBlack)
}
.info-footer.v1 .main-footer .left-text p a {
color: var(--color-white)
}
.info-footer.v1 .main-footer .left-text p a:hover {
color: var(--color-yellow)
}
.info-footer.v2 {
background: var(--color-white2)
}
.info-footer.v2 .main-footer {
border-top: 1px solid var(--color-border)
}
html:not([dir=rtl]) .btn-anime.v1:after,
html:not([dir=rtl]) .btn-anime.v1:before,
html:not([dir=rtl]) .btn-anime.v2:after,
html:not([dir=rtl]) .btn-anime.v2:before,
html:not([dir=rtl]) .link-anime.v1:after,
html:not([dir=rtl]) .link-anime.v1:before,
html:not([dir=rtl]) .link-anime.v2:after,
html:not([dir=rtl]) .link-anime.v2:before {
left: 0
}
html:not([dir=rtl]) .btn-anime.v1:hover:after,
html:not([dir=rtl]) .btn-anime.v2:hover:after,
html:not([dir=rtl]) .link-anime.v1:hover:after,
html:not([dir=rtl]) .link-anime.v2:hover:after {
left: 3px
}
html:not([dir=rtl]) .scroll-bottom-Top {
right: 0
}
html:not([dir=rtl]) .scroll-bottom-Top.show {
right: 50px
}
html:not([dir=rtl]) .v1 .blog-sidebar__wrapper .blog-sidebar__widget-head .blog-sidebar__widget-title {
padding-left: 30px
}
html:not([dir=rtl]) .v1 .blog-sidebar__wrapper .blog-sidebar__widget-head .blog-sidebar__widget-title:before {
left: 0
}
html:not([dir=rtl]) .v1 .blog-sidebar__wrapper .best-seller-items li .item-text {
padding-left: 20px
}
html:not([dir=rtl]) .v1 .blog-sidebar__wrapper .latest-posts p .my-icon {
margin-right: 5px
}
html:not([dir=rtl]) .post-link {
padding-right: 50px
}
html:not([dir=rtl]) .post-link:before {
content: "\e908";
right: 11px
}
html:not([dir=rtl]) .post-link:after {
right: 0
}
html:not([dir=rtl]) .next-preve-post .prev-post {
padding-left: 50px
}
html:not([dir=rtl]) .next-preve-post .prev-post:before {
content: "\e906";
left: 11px
}
html:not([dir=rtl]) .next-preve-post .prev-post:after {
left: 0
}
html:not([dir=rtl]) .next-preve-post .next-post {
text-align: right;
padding-right: 50px
}
html:not([dir=rtl]) .next-preve-post .next-post:before {
content: "\e908";
right: 11px
}
html:not([dir=rtl]) .next-preve-post .next-post:after {
right: 0
}
html:not([dir=rtl]) .section-title-white.v1 h6:before,
html:not([dir=rtl]) .section-title.v1 h6:before {
left: 0
}
html:not([dir=rtl]) .menu-bar .main-menu>ul>li>a {
padding: 35px 0 35px 15px
}
html:not([dir=rtl]) .menu-bar .main-menu>ul>li>a:before {
position: absolute;
content: "";
width: 9px;
height: 9px;
border-radius: 10px;
top: 50%;
left: 0;
opacity: .4;
background: var(--color-yellow);
transform: translateY(-50%);
transition: all .4s ease
}
html:not([dir=rtl]) .menu-bar .main-menu li.active>a:before,
html:not([dir=rtl]) .menu-bar .main-menu li.current-menu-parent>a:before,
html:not([dir=rtl]) .menu-bar .main-menu li.current_page_item>a:before,
html:not([dir=rtl]) .menu-bar .main-menu li.current_page_parent>a:before,
html:not([dir=rtl]) .menu-bar .main-menu li:hover>a:before {
opacity: 1
}
html:not([dir=rtl]) .menu-bar .main-menu li.has-dropdown>a:after {
font-family: icomoon;
content: "\e900";
speak: never;
font-size: calc(100% - 1px);
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
margin-left: 5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 8px
}
html:not([dir=rtl]) .menu-bar .main-menu li.has-dropdown .has-dropdown>a {
position: relative;
padding-right: 50px
}
html:not([dir=rtl]) .menu-bar .main-menu li.has-dropdown .has-dropdown>a:after {
position: absolute;
top: 20px;
right: 33px;
transform: rotate(-90deg);
margin-left: 0
}
html:not([dir=rtl]) .menu-bar .main-menu li li:hover>a {
padding-left: 45px
}
html:not([dir=rtl]) .menu-bar .main-menu li ul {
left: 0
}
html:not([dir=rtl]) .menu-bar .main-menu li ul ul {
left: 100%
}
html:not([dir=rtl]) .menu-bar .menu-right .top-bar-search .search-close {
right: 80px
}
html:not([dir=rtl]) .menu-bar .menu-right .shop-card-btn .count,
html:not([dir=rtl]) .menu-bar .menu-right .wishlist-btn .count {
right: -5px
}
html:not([dir=rtl]) .menu-bar .menu-right .shop-card-btn,
html:not([dir=rtl]) .menu-bar .menu-right .shop-card-btn .price,
html:not([dir=rtl]) .menu-bar .menu-right .wishlist-btn {
margin-right: 6px
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-btn span {
left: 0
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-btn.active span:first-child {
transform: translate(-1.5px, -5.3px) rotate(-135deg)
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-btn.active span:nth-child(2) {
transform: rotate(-180deg)
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-btn.active span:nth-child(3) {
transform: translate(-1.5px, 7.3px) rotate(135deg)
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-header .mobile-logo {
padding-left: 15px
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-header .close-mobile-btn {
border-left: 1px dashed var(--color-yellow)
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-main-manu li.has-dropdown>a:after {
right: 24px;
transform: rotate(90deg)
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-main-manu li.has-dropdown>ul {
padding-left: 10px
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-main-manu a {
padding: 15px 40px 15px 20px
}
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-bar {
left: -100%
}
html:not([dir=rtl]) .banner.v1:before,
html:not([dir=rtl]) .menu-bar .menu-right .mobile-menu-bar.active {
left: 0
}
html:not([dir=rtl]) .banner.v1:after {
transform: translateY(-135px)
}
html:not([dir=rtl]) .banner.v1 .shape-1 {
left: -94px;
top: -170px
}
html:not([dir=rtl]) .banner.v1 .banner-content:before {
left: 22%
}
html:not([dir=rtl]) .banner.v3 .flower-anime-btn .icon-play-t {
margin-right: 5px
}
html:not([dir=rtl]) .banner.v3 .flower-anime-btn .icon-play-t:after {
left: calc(100% - 30px)
}
html:not([dir=rtl]) .banner.v3 .future-list p:after {
content: "\e909";
margin-left: 15px
}
html:not([dir=rtl]) .banner.v3 .scroll-down-2 .my-icon {
margin-left: 10px
}
html:not([dir=rtl]) .our-services.v1 .service-card {
border-left: 3px solid var(--color-tr)
}
html:not([dir=rtl]) .our-services.v1 .service-card .my-icon {
padding: 10px 0 0 10px
}
html:not([dir=rtl]) .our-services.v1 .service-card .my-icon:after {
left: -10px
}
html:not([dir=rtl]) .our-services.v1 .service-card:hover {
border-radius: 0 20px 20px 0;
border-color: var(--color-yellow)
}
html:not([dir=rtl]) .our-services.v2 .check-our-profile:before {
right: 0
}
html:not([dir=rtl]) .our-products.v1 .slider .next-btn,
html:not([dir=rtl]) .our-products.v2 .slider .next-btn {
left: 0
}
html:not([dir=rtl]) .our-products.v1 .slider .prev-btn,
html:not([dir=rtl]) .our-products.v2 .slider .prev-btn {
right: 0
}
html:not([dir=rtl]) .we-serve.v1 .we-serve-card .my-icon:after {
left: -10px
}
html:not([dir=rtl]) .testimonial.v1 .slider .next-btn,
html:not([dir=rtl]) .testimonial.v2 .slider .next-btn,
html:not([dir=rtl]) .testimonial.v3 .slider .next-btn {
left: 0
}
html:not([dir=rtl]) .testimonial.v1 .slider .prev-btn,
html:not([dir=rtl]) .testimonial.v2 .slider .prev-btn,
html:not([dir=rtl]) .testimonial.v3 .slider .prev-btn {
right: 0
}
html:not([dir=rtl]) .blog-news.v1 .blog-card .blog-content .post-footer .porfile h6 {
margin-left: 10px
}
html:not([dir=rtl]) .blog-news.v1 .blog-card .blog-content .post-footer .post-link a {
padding-right: 50px
}
html:not([dir=rtl]) .blog-news.v1 .blog-card .blog-content .post-footer .post-link a:before {
content: "\e908";
top: -1px;
right: 11px
}
html:not([dir=rtl]) .blog-news.v1 .blog-card .blog-content .post-footer .post-link a:after {
top: -3px;
right: 0
}
html:not([dir=rtl]) .blog-news.v2 .blog-card .blog-content {
border-radius: 20px 0 0 0;
margin-left: 40px
}
html:not([dir=rtl]) .blog-news.v2 .blog-card .blog-content h6 .my-icon {
margin-right: 10px
}
html:not([dir=rtl]) .blog-news.v2 .blog-card .blog-content .left-btn {
border-right: 1px solid var(--color-border);
left: -40px
}
html:not([dir=rtl]) .blog-news.v2 .blog-card .profile-img {
left: 30px
}
html:not([dir=rtl]) .about-beeberry.v3 .abou-o-img img:nth-child(2) {
left: calc(38% - 12px)
}
html:not([dir=rtl]) .gallery-display.v1 .gallery-content:after {
right: -100%;
transform: translate(30%, -30%) rotate(-141deg)
}
html:not([dir=rtl]) .gallery-display.v1 .gallery-content:hover:after {
right: 0
}
html:not([dir=rtl]) .working-process.v1 .process-boxs li .icon-box .num-count {
right: -21px
}
html:not([dir=rtl]) .team.v1 .next-btn:before,
html:not([dir=rtl]) .team.v1 .prev-btn:before {
left: 0
}
html:not([dir=rtl]) .team.v1 .prev-btn {
right: 15px
}
html:not([dir=rtl]) .team.v1 .prev-btn .my-icon {
margin-left: -40px
}
html:not([dir=rtl]) .team.v1 .next-btn {
left: 15px
}
html:not([dir=rtl]) .team.v1 .next-btn .my-icon {
margin-left: 20px
}
html:not([dir=rtl]) .faq.v1 .right-countent button {
padding: 20px 50px 20px 20px
}
html:not([dir=rtl]) .faq.v1 .right-countent button:before {
right: 20px
}
html:not([dir=rtl]) .make-a-new-story.v1 .content-img .year {
left: 50px
}
html:not([dir=rtl]) .shop-details.v1 .display-right li .title~.text {
margin-left: 20px
}
html:not([dir=rtl]) .blog.v1 .big-post .slider .next-btn:before,
html:not([dir=rtl]) .blog.v1 .big-post .slider .prev-btn:before,
html:not([dir=rtl]) .shop-details.v1 .product-tab .nav-tabs button:after,
html:not([dir=rtl]) .shop-details.v1 .product-tab .nav-tabs button:before {
left: 0
}
html:not([dir=rtl]) .blog.v1 .big-post .slider .prev-btn {
right: 0
}
html:not([dir=rtl]) .blog.v1 .big-post .slider .prev-btn .my-icon {
margin-left: -20px
}
html:not([dir=rtl]) .blog.v1 .big-post .slider .next-btn {
left: 0
}
html:not([dir=rtl]) .blog.v1 .big-post .slider .next-btn .my-icon {
margin-left: 20px
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .post-content li .my-icon {
margin-right: 10px
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .slider .next-btn:before,
html:not([dir=rtl]) .blog-details.v1 .big-post-details .slider .prev-btn:before {
left: 0
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .slider .prev-btn {
right: 0
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .slider .prev-btn .my-icon {
margin-left: -20px
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .slider .next-btn {
left: 0
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .slider .next-btn .my-icon {
margin-left: 20px
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .user:before {
left: 0;
border-radius: 20px 0;
transform: rotate(180deg)
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .all-comments .comments-list>li>ul {
margin: 30px 0 0 calc(9% + 15px)
}
html:not([dir=rtl]) .blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .content:before {
left: -25px;
border-right: 25px solid var(--color-white2)
}
html:not([dir=rtl]) .gallery-single.v1 .user .user-profile:before {
right: -10px
}
html:not([dir=rtl]) .info-footer.v1 .useful-link li a,
html:not([dir=rtl]) .info-footer.v2 .useful-link li a {
padding-left: 16px
}
html:not([dir=rtl]) .info-footer.v1 .useful-link li a:before,
html:not([dir=rtl]) .info-footer.v2 .useful-link li a:before {
left: 0
}
html:not([dir=rtl]) .info-footer.v1 .useful-link li a:hover,
html:not([dir=rtl]) .info-footer.v2 .useful-link li a:hover {
padding-left: 22px
}
html[dir=rtl] .icon-angle-left:before,
html[dir=rtl] .icon-angle-right:before,
html[dir=rtl] .icon-arrow-left-long:before,
html[dir=rtl] .icon-arrow-left:before,
html[dir=rtl] .icon-arrow-right-long:before,
html[dir=rtl] .icon-arrow-right:before,
html[dir=rtl] .icon-arrow-up-long:before,
html[dir=rtl] .icon-comments:before,
html[dir=rtl] .icon-dobble-angles-left:before,
html[dir=rtl] .icon-dobble-angles-right:before,
html[dir=rtl] .icon-magnifying-glass:before,
html[dir=rtl] .icon-phone:before,
html[dir=rtl] .icon-quote-right:before,
html[dir=rtl] .icon-shipped:before,
html[dir=rtl] .icon-tag:before {
display: inline-block;
transform: rotateY(-180deg)
}
html[dir=rtl] .btn-anime.v1:after,
html[dir=rtl] .btn-anime.v1:before,
html[dir=rtl] .btn-anime.v2:after,
html[dir=rtl] .btn-anime.v2:before,
html[dir=rtl] .link-anime.v1:after,
html[dir=rtl] .link-anime.v1:before,
html[dir=rtl] .link-anime.v2:after,
html[dir=rtl] .link-anime.v2:before {
right: 0
}
html[dir=rtl] .btn-anime.v1:hover:after,
html[dir=rtl] .btn-anime.v2:hover:after,
html[dir=rtl] .link-anime.v1:hover:after,
html[dir=rtl] .link-anime.v2:hover:after {
right: 3px
}
html[dir=rtl] .scroll-bottom-Top {
left: 0
}
html[dir=rtl] .scroll-bottom-Top.show {
left: 50px
}
html[dir=rtl] .post-link {
padding-left: 50px
}
html[dir=rtl] .post-link:before {
content: "\e906";
left: 11px
}
html[dir=rtl] .post-link:after {
left: 0
}
html[dir=rtl] .next-preve-post .prev-post {
padding-right: 50px
}
html[dir=rtl] .next-preve-post .prev-post:before {
content: "\e908";
right: 11px
}
html[dir=rtl] .next-preve-post .prev-post:after {
right: 0
}
html[dir=rtl] .next-preve-post .next-post {
text-align: left;
padding-left: 50px
}
html[dir=rtl] .next-preve-post .next-post:before {
content: "\e906";
left: 11px
}
html[dir=rtl] .next-preve-post .next-post:after {
left: 0
}
html[dir=rtl] .section-title-white.v1 h6:before,
html[dir=rtl] .section-title.v1 h6:before {
right: 0
}
html[dir=rtl] .v1 .blog-sidebar__wrapper .blog-sidebar__widget-head .blog-sidebar__widget-title {
padding-right: 30px
}
html[dir=rtl] .v1 .blog-sidebar__wrapper .blog-sidebar__widget-head .blog-sidebar__widget-title:before {
right: 0
}
html[dir=rtl] .v1 .blog-sidebar__wrapper .best-seller-items li .item-text {
padding-right: 20px
}
html[dir=rtl] .v1 .blog-sidebar__wrapper .latest-posts p .my-icon {
margin-left: 5px
}
html[dir=rtl] .menu-bar .main-menu>ul>li>a {
padding: 35px 15px 35px 0
}
html[dir=rtl] .menu-bar .main-menu>ul>li>a:after {
position: absolute;
content: "";
width: 9px;
height: 9px;
border-radius: 10px;
top: 50%;
right: 0;
opacity: .4;
background: var(--color-yellow);
transform: translateY(-50%);
transition: all .4s ease
}
html[dir=rtl] .menu-bar .main-menu li.active>a:after,
html[dir=rtl] .menu-bar .main-menu li.current-menu-parent>a:after,
html[dir=rtl] .menu-bar .main-menu li.current_page_item>a:after,
html[dir=rtl] .menu-bar .main-menu li.current_page_parent>a:after,
html[dir=rtl] .menu-bar .main-menu li:hover>a:after {
opacity: 1
}
html[dir=rtl] .menu-bar .main-menu li.has-dropdown>a:before {
font-family: icomoon;
content: "\e900";
speak: never;
font-size: calc(100% - 1px);
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
margin-left: 5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 8px
}
html[dir=rtl] .menu-bar .main-menu li.has-dropdown .has-dropdown>a {
position: relative;
padding-left: 50px
}
html[dir=rtl] .menu-bar .main-menu li.has-dropdown .has-dropdown>a:before {
position: absolute;
top: 20px;
left: 33px;
transform: rotate(90deg);
margin-right: 0
}
html[dir=rtl] .menu-bar .main-menu li li:hover>a {
padding-right: 45px
}
html[dir=rtl] .menu-bar .main-menu li ul {
right: 0
}
html[dir=rtl] .menu-bar .main-menu li ul ul {
right: 100%
}
html[dir=rtl] .menu-bar .menu-right .top-bar-search .search-close {
left: 80px
}
html[dir=rtl] .menu-bar .menu-right .shop-card-btn .count,
html[dir=rtl] .menu-bar .menu-right .wishlist-btn .count {
left: -5px
}
html[dir=rtl] .menu-bar .menu-right .shop-card-btn,
html[dir=rtl] .menu-bar .menu-right .shop-card-btn .price,
html[dir=rtl] .menu-bar .menu-right .wishlist-btn {
margin-left: 6px
}
html[dir=rtl] .menu-bar .menu-right .mobile-menu-btn span {
right: 0
}
html[dir=rtl] .menu-bar .menu-right .mobile-menu-btn.active span:first-child {
transform: translate(2.1px, -5.3px) rotate(135deg)
}
html[dir=rtl] .menu-bar .menu-right .mobile-menu-btn.active span:nth-child(2) {
transform: rotate(-180deg)
}
html[dir=rtl] .menu-bar .menu-right .mobile-menu-btn.active span:nth-child(3) {
transform: translate(2px, 7.4px) rotate(225deg)
}
html[dir=rtl] .menu-bar .menu-right .mobile-menu-header .mobile-logo {
padding-right: 15px
}
html[dir=rtl] .menu-bar .menu-right .mobile-menu-header .close-mobile-btn {
border-right: 1px dashed var(--color-yellow)
}
html[dir=rtl] .menu-bar .menu-right .mobile-main-manu li.has-dropdown>a:after {
left: 24px;
transform: rotate(-90deg)
}
html[dir=rtl] .menu-bar .menu-right .mobile-main-manu li.has-dropdown>ul {
padding-right: 10px
}
html[dir=rtl] .menu-bar .menu-right .mobile-main-manu a {
padding: 15px 20px 15px 40px
}
html[dir=rtl] .menu-bar .menu-right .mobile-menu-bar {
right: -100%
}
html[dir=rtl] .banner.v1:before,
html[dir=rtl] .menu-bar .menu-right .mobile-menu-bar.active {
right: 0
}
html[dir=rtl] .banner.v1:after {
transform: translateY(-135px) rotateY(180deg)
}
html[dir=rtl] .banner.v1 .shape-1 {
right: -105px;
top: -153px;
transform: rotate(-150deg)
}
html[dir=rtl] .banner.v1 .banner-content:before {
right: 22%
}
html[dir=rtl] .banner.v3 .flower-anime-btn .icon-play-t {
margin-left: 5px
}
html[dir=rtl] .banner.v3 .flower-anime-btn .icon-play-t:after {
transform: rotateY(180deg);
right: calc(100% - 30px)
}
html[dir=rtl] .banner.v3 .future-list p:after {
content: "\e907";
margin-right: 15px
}
html[dir=rtl] .banner.v3 .scroll-down-2 .my-icon {
margin-right: 10px
}
html[dir=rtl] .our-services.v1 .service-card {
border-right: 3px solid var(--color-tr)
}
html[dir=rtl] .our-services.v1 .service-card .my-icon {
padding: 10px 10px 0 0
}
html[dir=rtl] .our-services.v1 .service-card .my-icon:after {
right: -10px
}
html[dir=rtl] .our-services.v1 .service-card:hover {
border-radius: 20px 0 0 20px;
border-color: var(--color-yellow)
}
html[dir=rtl] .our-services.v2 .check-our-profile:before {
left: 0
}
html[dir=rtl] .our-products.v1 .slider .next-btn,
html[dir=rtl] .our-products.v2 .slider .next-btn {
right: 0
}
html[dir=rtl] .our-products.v1 .slider .prev-btn,
html[dir=rtl] .our-products.v2 .slider .prev-btn {
left: 0
}
html[dir=rtl] .we-serve.v1 .we-serve-card .my-icon:after {
right: -10px
}
html[dir=rtl] .testimonial.v1 .slider .next-btn,
html[dir=rtl] .testimonial.v2 .slider .next-btn,
html[dir=rtl] .testimonial.v3 .slider .next-btn {
right: 0
}
html[dir=rtl] .testimonial.v1 .slider .prev-btn,
html[dir=rtl] .testimonial.v2 .slider .prev-btn,
html[dir=rtl] .testimonial.v3 .slider .prev-btn {
left: 0
}
html[dir=rtl] .blog-news.v1 .blog-card .blog-content .post-footer .porfile h6 {
margin-right: 10px
}
html[dir=rtl] .blog-news.v1 .blog-card .blog-content .post-footer .post-link a {
padding-left: 50px
}
html[dir=rtl] .blog-news.v1 .blog-card .blog-content .post-footer .post-link a:before {
content: "\e906";
top: 0;
left: 11px
}
html[dir=rtl] .blog-news.v1 .blog-card .blog-content .post-footer .post-link a:after {
top: -3px;
left: 0
}
html[dir=rtl] .blog-news.v2 .blog-card .blog-content {
border-radius: 0 20px 0 0;
margin-right: 40px
}
html[dir=rtl] .blog-news.v2 .blog-card .blog-content h6 .my-icon {
margin-left: 10px
}
html[dir=rtl] .blog-news.v2 .blog-card .blog-content .left-btn {
border-left: 1px solid var(--color-border);
right: -40px
}
html[dir=rtl] .blog-news.v2 .blog-card .profile-img {
right: 30px
}
html[dir=rtl] .about-beeberry.v3 .abou-o-img img:nth-child(2) {
right: calc(38% - 12px)
}
html[dir=rtl] .gallery-display.v1 .gallery-content:after {
left: -100%;
transform: translate(-30%, -30%) rotate(140deg)
}
html[dir=rtl] .gallery-display.v1 .gallery-content:hover:after {
left: 0
}
html[dir=rtl] .working-process.v1 .process-boxs li .icon-box .num-count {
left: -21px
}
html[dir=rtl] .team.v1 .next-btn:before,
html[dir=rtl] .team.v1 .prev-btn:before {
right: 0
}
html[dir=rtl] .team.v1 .prev-btn {
left: 15px
}
html[dir=rtl] .team.v1 .prev-btn .my-icon {
margin-right: -40px
}
html[dir=rtl] .team.v1 .next-btn {
right: 15px
}
html[dir=rtl] .team.v1 .next-btn .my-icon {
margin-right: 20px
}
html[dir=rtl] .faq.v1 .right-countent button {
padding: 20px 20px 20px 50px
}
html[dir=rtl] .faq.v1 .right-countent button:before {
left: 20px
}
html[dir=rtl] .make-a-new-story.v1 .content-img .year {
right: 50px
}
html[dir=rtl] .shop-details.v1 .display-right li .title~.text {
margin-right: 20px
}
html[dir=rtl] .blog.v1 .big-post .slider .next-btn:before,
html[dir=rtl] .blog.v1 .big-post .slider .prev-btn:before,
html[dir=rtl] .shop-details.v1 .product-tab .nav-tabs button:after,
html[dir=rtl] .shop-details.v1 .product-tab .nav-tabs button:before {
right: 0
}
html[dir=rtl] .blog.v1 .big-post .slider .prev-btn {
left: 0
}
html[dir=rtl] .blog.v1 .big-post .slider .prev-btn .my-icon {
margin-right: -20px
}
html[dir=rtl] .blog.v1 .big-post .slider .next-btn {
right: 0
}
html[dir=rtl] .blog.v1 .big-post .slider .next-btn .my-icon {
margin-right: 20px
}
html[dir=rtl] .blog-details.v1 .big-post-details .post-content li .my-icon {
margin-left: 10px
}
html[dir=rtl] .blog-details.v1 .big-post-details .slider .next-btn:before,
html[dir=rtl] .blog-details.v1 .big-post-details .slider .prev-btn:before {
right: 0
}
html[dir=rtl] .blog-details.v1 .big-post-details .slider .prev-btn {
left: 0
}
html[dir=rtl] .blog-details.v1 .big-post-details .slider .prev-btn .my-icon {
margin-right: -20px
}
html[dir=rtl] .blog-details.v1 .big-post-details .slider .next-btn {
right: 0
}
html[dir=rtl] .blog-details.v1 .big-post-details .slider .next-btn .my-icon {
margin-right: 20px
}
html[dir=rtl] .blog-details.v1 .big-post-details .user:before {
right: 0;
border-radius: 20px 0;
transform: rotateX(180deg)
}
html[dir=rtl] .blog-details.v1 .big-post-details .all-comments .comments-list>li>ul {
margin: 30px calc(9% + 15px) 0 0
}
html[dir=rtl] .blog-details.v1 .big-post-details .all-comments .comment-wrapper .profile-text .content:before {
right: -25px;
border-left: 25px solid var(--color-white2)
}
html[dir=rtl] .gallery-single.v1 .user .user-profile:before {
left: -10px;
transform: rotateY(180deg)
}
html[dir=rtl] .info-footer.v1 .useful-link li a,
html[dir=rtl] .info-footer.v2 .useful-link li a {
padding-right: 16px
}
html[dir=rtl] .info-footer.v1 .useful-link li a:before,
html[dir=rtl] .info-footer.v2 .useful-link li a:before {
right: 0
}
html[dir=rtl] .info-footer.v1 .useful-link li a:hover,
html[dir=rtl] .info-footer.v2 .useful-link li a:hover {
padding-right: 22px
}