html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: middle;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Euclid";
background: var(--site_bg);
// font-size: 14px;
// line-height: 1.5;
width: 100%;
outline: 0 !important;
&:before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(black, .5);
transition: .3s all ease;
opacity: 0;
visibility: hidden;
z-index: 1;
}
&.offcanvas-menu {
&:before {
opacity: 1;
z-index: 1002;
visibility: visible;
}
}
}
main {
flex-grow: 1;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none !important;
}
:focus {
outline: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ctn-preloader {
align-items: center;
cursor: none;
display: flex;
height: 100%;
justify-content: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 900;
.animation-preloader {
position: absolute;
z-index: 100;
.spinner {
animation: spinner 1s infinite linear;
border-radius: 50%;
border: 3px solid rgba(0, 0, 0, 0.2);
border-top-color: #000000;
height: 9em;
margin: 0 auto 0 auto;
width: 9em;
}
}
.loader-section {
background-color: #ffffff;
height: 100%;
position: fixed;
top: 0;
width: calc(50% + 1px);
}
.loader-section.section-left {
left: 0;
}
.loader-section.section-right {
right: 0;
}
}
.loaded {
.animation-preloader {
opacity: 0;
transition: 0.3s ease-out;
}
.loader-section.section-left {
transform: translateX(-101%);
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
.loader-section.section-right {
transform: translateX(101%);
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
}
@keyframes spinner {
to {
transform: rotateZ(360deg);
}
}
@keyframes letters-loading {
0%,
75%,
100% {
opacity: 0;
transform: rotateY(-90deg);
}
25%,
50% {
opacity: 1;
transform: rotateY(0deg);
}
}
.pd50 {
padding: 50px 0;
}
.pd30 {
padding-top: 0;
padding-bottom: 30px !important;
}
.bgsoft {
background: var(--section_bg);
}
:root {
--site_bg: #fafbfd; // -
--bg_1: #2e3647; // Header Top
--bg_2: #f5476a; // -
--bg_3: #fafbfd;
--site_header: #fff; // -
--alpha: 0.8;
// --bg_5: #677894;
--kutu_1: #F9F2F5; // -
--kutu_1_buton: #E34565; // -
--kutu_2: #F2F4F7; // -
--kutu_2_buton: #5D6C85; // -
--main_text: #2e3647; // -
--text_1: #677894; // -
--text_white: #ffffff; // -
--section_bg: #f4f8fb; // -
--breadcumb_background: #f4f8fb; // -
--size: calc(calc(100vw / var(--Nhexa)) - var(--gap));
}
.content__title {
margin-bottom: 50px;
text-align: center;
.content__title-title {
font-weight: 700;
font-size: 22px;
line-height: 33px;
color: var(--main_text);
margin-bottom: 4px;
}
.content__title-text {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--text_1);
}
}
.dropdown {
dd {
margin: 0px;
padding: 0px;
position: relative;
ul {
background: var(--site_bg);
display: block !important;
left: 0px;
list-style: none;
border-radius: 5px;
li {
a {
padding: 0 15px;
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text_1);
cursor: pointer;
padding: 5px;
padding-left: 15px;
display: block;
}
&:not(:last-child) {
border-bottom: 1px solid var(--section_bg);
}
}
}
}
dt {
margin: 0px;
padding: 0px;
a {
background: #fff;
padding-left: 15px;
display: block;
padding-right: 20px;
span {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
color: var(--text_1);
}
}
}
ul {
margin: 0px;
padding: 0px;
}
a {
color: #816c5b;
text-decoration: none;
outline: none;
&:visited {
color: #816c5b;
text-decoration: none;
outline: none;
}
}
span.value {
display: none;
}
img.flag {
border: none;
vertical-align: middle;
margin-left: 10px;
}
}
#sample {
display: block;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.page-wrapper {
z-index: 2;
.sidebar-wrapper {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-content {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.theme {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.theme.chiller-theme {
background: #1e2229;
}
}
.sidebar-wrapper {
position: absolute;
top: 50px;
right: 0;
z-index: 2;
border-radius: 3px;
opacity: 0;
visibility: hidden;
.sidebar-brand {
padding: 10px 15px 10px 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
min-width: 151px;
>a {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: bold;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#close-sidebar {
cursor: pointer;
font-size: 20px;
margin-left: auto;
svg {
vertical-align: middle;
.sidebar-wrapper {
.sidebar-dropdown {
>a {
&:after {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
}
}
}
}
}
}
.sidebar-menu {
.sidebar-dropdown {
.sidebar-submenu {
li {
padding-left: 25px;
font-size: 13px;
a {
&:before {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-style: normal;
display: inline-block;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 10px;
font-size: 8px;
}
.badge {
float: right;
margin-top: 0px;
}
.label {
float: right;
margin-top: 0px;
}
}
}
ul {
padding: 5px 0;
}
}
>a {
&:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-style: normal;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
background: 0 0;
position: absolute;
right: 15px;
top: 14px;
}
}
}
ul {
li {
a {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: inline-block;
width: 100%;
text-decoration: none;
position: relative;
padding: 10px 20px 10px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text_1);
&:not(:last-child) {
margin-bottom: 10px;
}
&:hover {
>i {
&::before {
display: inline-block;
-webkit-animation: swing ease-in-out 0.5s 1 alternate;
animation: swing ease-in-out 0.5s 1 alternate;
}
}
}
i {
margin-right: 10px;
font-size: 12px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
span.label {
float: right;
margin-top: 8px;
margin-left: 5px;
}
span.badge {
float: right;
margin-top: 8px;
margin-left: 5px;
}
}
}
}
.header-menu {
span {
font-weight: bold;
font-size: 14px;
padding: 15px 20px 5px 20px;
display: inline-block;
}
}
.sidebar-submenu {
display: none;
}
.sidebar-dropdown.active {
>a {
&:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
right: 17px;
}
}
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
a {
i {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
}
}
}
a {
text-decoration: none;
}
}
#show-sidebar {
left: 0;
top: 150px;
margin-bottom: 1px;
padding: 0;
margin: 0;
border: none;
line-height: 55px;
svg {
path {
fill: #fff;
}
-webkit-animation: rotate 4s infinite;
animation: rotate 4s infinite;
vertical-align: middle;
}
}
#close-sidebar {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-wrapper.toggled {
.sidebar-wrapper {
opacity: 1;
visibility: visible;
}
}
//Header
#header__top {
background: var(--bg_1);
color: var(--text_white);
z-index: 1;
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
.header__left {
display: flex;
align-items: center;
span {
font-weight: 400;
font-size: 15px;
line-height: 22px;
color: var(--text_white);
display: flex;
align-items: center;
&:not(:last-child) {
margin-right: 25px;
}
i {
font-size: 22px;
margin-right: 10px;
}
}
}
.header__right {
display: flex;
align-items: center;
.header__links {
line-height: 19px;
margin-right: 15px;
padding-right: 15px;
border-right: 1px solid var(--kutu_2_buton);
li {
&:not(:last-child) {
margin-right: 15px;
}
a {
i {
color: var(--text_white);
font-size: 19px;
}
}
}
}
}
}
}
.site-navbar {
margin-bottom: 0px;
z-index: 1999;
position: relative;
width: 100%;
background: var(--site_header);
.toggle-button {
right: 0px;
a {
color: var(--main__text);
span {
i {
color: var(--main__text);
font-size: 25px;
}
}
}
}
.site-navigation {
&.border-bottom {
border-bottom: 1px solid gray !important;
}
.site-menu {
margin-bottom: 0;
a {
text-decoration: none !important;
display: inline-block;
}
>li {
display: inline-block;
&:not(:last-child) {
padding-right: 32px;
}
>a {
font-weight: 500;
font-size: 15px;
line-height: 100px;
mix-blend-mode: normal;
display: flex;
align-items: center;
color: var(--main__text);
padding: 0;
}
}
.has-children {
position: relative;
.dropdown {
visibility: hidden;
opacity: 0;
top: 100%;
position: absolute;
text-align: left;
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 3px;
padding: 0px 0;
margin-top: 20px;
margin-left: 0px;
background: white;
transition: 0.2s 0s;
&.arrow-top {
position: absolute;
&:before {
display: none;
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:before {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: white;
border-width: 10px;
margin-left: -10px;
}
}
a {
// font-size: 16px;
text-transform: none;
letter-spacing: normal;
transition: 0.3s all;
}
>li {
list-style: none;
padding: 0;
margin: 0;
transition: 0.3s all;
min-width: 200px;
>a {
padding: 9px 20px;
display: block;
&:hover {
background: var(--bg_2);
color: var(--text_white);
}
}
}
}
&:hover,
&:focus,
&:active {
cursor: pointer;
>.dropdown {
transition-delay: 0s;
margin-top: 0px;
visibility: visible;
opacity: 1;
}
}
}
}
}
.site__menu-contact {
margin-left: 32px;
a {
font-weight: 500;
font-size: 15px;
background: var(--bg_2);
padding: 15px 30px;
border-radius: 3px;
line-height: 20px;
display: flex;
align-items: center;
color: var(--text_white);
i {
margin-right: 8px;
font-size: 20px;
}
}
}
}
.site-mobile-menu {
width: 300px;
position: fixed;
left: 0;
z-index: 2000;
padding-top: 20px;
background: white;
height: calc(100vh);
transform: translateX(-110%);
box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
transition: 0.3s all ease-in-out;
.offcanvas-menu & {
transform: translateX(0%);
}
.site-mobile-menu-header {
width: 100%;
float: left;
padding-right: 20px;
padding-bottom: 50px;
.site-mobile-menu-close {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 8px;
.mobilelogo {
img {
max-width: 170px;
object-fit: cover;
max-height: 45px;
}
}
span {
font-size: 30px;
display: inline-block;
padding-left: 20px;
padding-right: 0px;
line-height: 1;
cursor: pointer;
transition: 0.3s all ease;
i {
color: var(--main_text);
}
&:hover {
color: gray;
}
}
}
.site-mobile-menu-logo {
float: left;
margin-top: 10px;
margin-left: 0px;
a {
display: inline-block;
text-transform: uppercase;
img {
max-width: 70px;
}
&:hover {
text-decoration: none;
}
}
}
}
.site-mobile-menu-body {
overflow-y: scroll;
overflow: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
padding: 0 20px 20px 20px;
height: calc(100vh - 52px);
padding-bottom: 150px;
&::-webkit-scrollbar-track {
opacity: 0;
display: none;
}
&::-webkit-scrollbar-thumb {
opacity: 0;
display: none;
}
&::-webkit-scrollbar-thumb:hover {
opacity: 0;
display: none;
}
}
.site-nav-wrap {
padding: 0;
margin: 0;
list-style: none;
position: relative;
a {
padding: 0;
display: block;
position: relative;
color: var(--main_text);
}
li {
position: relative;
display: block;
margin: 20px 0;
}
.arrow-collapse {
position: absolute;
right: 0px;
top: 10px;
z-index: 20;
width: 36px;
height: 36px;
text-align: center;
cursor: pointer;
border-radius: 50%;
&:before {
font-size: 12px;
z-index: 20;
content: "";
position: absolute;
background-image: url(/assets/img/arrowdown.svg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-180deg);
transition: 0.3s all ease;
}
&.collapsed {
&:before {
transform: translate(-50%, -50%);
}
}
}
>li {
display: block;
position: relative;
float: left;
width: 100%;
>a {
font-size: 14px;
font-weight: 500;
}
>ul {
padding: 0;
margin: 0;
list-style: none;
>li {
display: block;
margin-top: 20px;
margin-bottom: 0;
>a {
padding-left: 20px;
font-size: 14px;
}
>ul {
padding: 0;
margin: 0;
>li {
display: block;
>a {
font-size: 15px;
padding-left: 60px;
}
}
}
}
}
}
&[data-class="social"] {
float: left;
width: 100%;
margin-top: 30px;
padding-bottom: 5em;
>li {
width: auto;
&:first-child {
a {
padding-left: 15px !important;
}
}
}
}
}
}
.sticky-wrapper {
position: relative;
z-index: 1;
width: 100%;
.site-navbar {
transition: 0.3s all ease;
width: 100% !important;
}
.site-navbar {
.site-logo {
img {
max-height: 50px;
max-width: 100%;
}
}
ul {
li {
a {
color: var(--main_text);
&.active {
color: white !important;
}
}
}
}
}
&.is-sticky {
.site-navbar {
box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2);
ul {
li {
a {
color: var(--main_text);
&.active {
color: blue !important;
}
}
}
}
}
}
.shrink {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
}
.page-wrapper {
z-index: 2;
position: relative;
.sidebar-wrapper {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-content {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.theme {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.theme.chiller-theme {
background: #1e2229;
}
}
// Hero
section#hero {
position: relative;
height: 600px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
z-index: 0;
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(273deg, var(--bg_1) 0%, var(--bg_1) 0%, transparent 95%);
transform: matrix(-1, 0, 0, 1, 0, 0);
}
.hero__container {
max-width: 660px;
z-index: 1;
.hero__top {
font-weight: 500;
font-size: 19px;
line-height: 28px;
color: var(--text_white);
margin-bottom: 5px;
}
.hero__title {
font-weight: 600;
font-size: 65px;
line-height: 73px;
color: var(--text_white);
margin-bottom: 30px;
}
.hero__text {
font-weight: 400;
font-size: 19px;
line-height: 32px;
color: var(--text_white);
margin-bottom: 35px;
}
.hero__links {
a {
display: inline-flex;
justify-content: center;
width: 100%;
max-width: 180px;
font-weight: 500;
font-size: 15px;
line-height: 48px;
color: var(--text_white);
border-radius: 3px;
transition: all 0.3s ease-in-out;
&:not(:last-child) {
margin-right: 30px;
}
&.hero__contact-link {
border: 1px solid var(--bg_2);
background: var(--bg_2);
}
&.hero__about-link {
border: 1px solid #fff;
line-height: 48px;
}
&:hover {
&.hero__contact-link {
background: transparent;
border: 1px solid #fff;
}
&.hero__about-link {
border: 1px solid var(--bg_2);
background: var(--bg_2);
}
}
}
}
}
}
section#portfolio {
.content__title {
margin-bottom: 24px;
}
.portfolio__container {
.portfolio__item {
background: #fff;
border-radius: 3px;
padding: 30px;
border: 15px solid var(--site_bg);
border-radius: 10px;
overflow: hidden;
border-bottom: 10px;
.portfolio__item-top {
display: flex;
align-items: center;
border-bottom: 1px solid var(--section_bg);
margin-bottom: 30px;
padding-bottom: 30px;
.portfolio__item-icon {
overflow: hidden;
margin-right: 25px;
width: 60px;
height: 60px;
background: var(--bg_3);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.7s;
position: relative;
transition: .4s;
z-index: 0;
&:after {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: 0;
background-color: var(--bg_2);
-webkit-transition: .4s;
transition: .4s;
visibility: hidden;
opacity: 0;
z-index: -1;
}
i {
font-size: 23px;
margin-top: 2px;
color: var(--main_text);
transition: all 0.7s;
}
}
}
.portfolio__item-info {
.portfolio__item-text {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--text_1);
margin-bottom: 1px;
}
.portfolio__item-title {
font-weight: 600;
font-size: 19px;
line-height: 28px;
color: var(--main_text);
}
}
.portfolio__item-detail {
font-weight: 400;
font-size: 15px;
line-height: 25px;
color: var(--text_1);
}
&:hover {
.portfolio__item-top {
.portfolio__item-icon {
&:after {
height: 100%;
visibility: visible;
opacity: 1;
}
i {
color: var(--text_white);
}
}
}
}
}
}
&.aboutusportfolio {
.portfolio__container {
.portfolio__item {
border: 15px solid var(--section_bg) !important;
}
}
}
}
section#product {
.content__title {
margin-bottom: 34px;
}
.product__container {
.product__item {
.product__content-box {
display: flex;
flex-direction: column;
height: 100%;
.product__item-image {
border-radius: 3px 3px 0 0;
overflow: hidden;
height: 200px;
min-height: 200px;
img {
max-width: 100%;
object-fit: cover;
transition: 0.7s;
}
}
&:hover {
.product__item-image {
img {
transform: scale(1.1);
}
}
}
.product__item-details {
padding: 30px;
background: #fff;
border-radius: 0 0 3px 3px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.product__item-title {
a {
font-weight: 600;
font-size: 19px;
line-height: 27px;
color: var(--main_text);
}
}
.product__item-text {
font-weight: 400;
font-size: 15px;
line-height: 25px;
color: var(--text_1);
border-bottom: 1px solid var(--section_bg);
padding: 30px 0;
margin-bottom: 30px;
height: 100%;
}
.product__item-price {
display: flex;
justify-content: space-between;
a {
font-weight: 500;
font-size: 15px;
width: 100%;
max-width: 155px;
display: inline-flex;
line-height: 50px;
background: var(--bg_2);
color: var(--text_white);
border-radius: 3px;
justify-content: center;
&.price {
background: transparent;
border: 1px solid var(--section_bg);
color: var(--main_text);
margin-left: 20px;
}
}
}
}
}
}
}
.pagicontainer {
padding-top: 30px;
}
}
section#projects {
padding-bottom: 100px;
padding-bottom: 20px;
padding-top: 40px;
.projects__container {
.projects__item {
margin-bottom: 30px;
line-height: 0;
.projects__details {
background: #fff;
border-radius: 3px;
position: relative;
overflow: hidden;
.projects__image {
margin-right: 30px;
overflow: hidden;
width: 100%;
max-width: 180px;
img {
max-width: 180px;
object-fit: cover;
border-radius: 3px 0 0 3px;
transition: 0.7s;
transform: scale(1);
}
}
.projects__info {
border-radius: 0 3px 3px 0;
width: 100%;
.projects__info-title {
margin-bottom: 24px;
a {
font-weight: 600;
font-size: 19px;
line-height: 27px;
color: var(--main_text);
}
}
.projects__info-link {
a {
position: relative;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: var(--text_1);
padding-bottom: 5px;
transition: all 0.7s;
&::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: -3px;
width: 24px;
height: 2px;
background: var(--text_1);
transition: all 0.7s;
opacity: 0.7;
}
}
}
}
&:after {
position: absolute;
right: 0;
bottom: 0;
content: "";
width: 58px;
height: 58px;
border-radius: 500px 0 0 0;
background: var(--section_bg);
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
}
&:hover {
.projects__details {
.projects__image {
img {
transform: scale(1.05);
}
}
&:after {
transform: scale(2.2);
}
.projects__info {
.projects__info-link {
a {
color: var(--bg_2);
&:after {
width: 100%;
background: var(--bg_2);
transition: all 0.7s;
}
}
}
}
}
}
}
}
}
section#comments {
.content__title {
margin-bottom: 40px;
}
.comments__container {
.comments__container-item {
padding: 30px;
background: #fff;
border: 10px solid var(--section_bg);
.comments__container-top {
display: flex;
align-items: center;
border-bottom: 1px solid var(--section_bg);
margin-bottom: 30px;
padding-bottom: 30px;
.comments__image {
width: 70px;
height: 70px;
border-radius: 3px;
margin-right: 15px;
overflow: hidden;
img {
width: 100%;
object-fit: cover;
}
}
.comments__text {
.comments__text-degree {
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: var(--text_1);
}
.comments__text-name {
font-weight: 500;
font-size: 17px;
line-height: 26px;
color: var(--main__text);
}
}
}
.comments__container-bottom {
.comments__container_bottom-text {
font-weight: 400;
font-size: 15px;
line-height: 22px;
color: var(--text_1);
}
}
}
}
&.aboutuscomments {
.comments__container {
.comments__container-item {
border: 10px solid var(--site_bg) !important;
}
}
}
section#references {
overflow: hidden;
.references__container {
.references__item {
display: inline-block;
margin: 35px 0 0 0;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
img {
height: 100%;
-o-object-fit: scale-down;
object-fit: scale-down;
filter: gray;
-webkit-filter: grayscale(100%);
opacity: 0.5;
transition: all 0.5s;
&:hover {
opacity: 1;
transition: 400ms;
}
}
}
}
.slick-slide {
margin: 0 15spx;
}
.slick-list {
margin: 0 -27px;
}
}
}
section#blog {
padding: 50px 0;
.blog__container {
.blog__item {
.blog__item-detail {
.blog__item-image {
border-radius: 5px;
line-height: 0;
overflow: hidden;
img {
width: 100%;
max-height: 200px;
object-fit: cover;
border-radius: 5px;
transition: .7s;
transform: scale(1);
}
}
.blog__item-body {
padding: 30px 0;
.blog__item-cat {
span {
a {
font-weight: 400;
font-size: 15px;
line-height: 22px;
color: var(--text_1);
}
}
}
.blog__item-title {
padding: 15px 0;
a {
font-weight: 600;
font-size: 19px;
line-height: 28px;
color: var(--main__text);
background-image: linear-gradient(var(--bg_2), var(--bg_2));
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 3px;
transition: background-size .8s;
display: initial!important;
&:hover {
background-size: 100% 3px;
}
}
}
.blog__item-btn {
a {
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: var(--text_1);
position: relative;
padding-bottom: 5px;
transition: all 0.7s;
&:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 24px;
height: 2px;
background: var(--text_1);
-webkit-transition: all 0.7s;
transition: all 0.7s;
opacity: 0.7;
}
}
}
}
&:hover {
.blog__item-image {
img {
transform: scale(1.05);
}
}
.blog__item-body {
.blog__item-btn {
a {
color: var(--bg_2);
&:after {
width: 100%;
background: var(--bg_2);
}
}
}
}
}
}
}
.blog__container-pagi {
margin: 30px 0 0 0;
}
}
&.blog__main {
.blog__container {
.blog__item {
.blog__item-detail {
margin-bottom: 40px;
}
}
}
.blog__main-container {
.blog__sidebar {
.sidebar__ads {
margin-bottom: 30px;
.ad {
height: 285px;
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
}
}
.blog__sidebar-search {
.box-title {
padding: 18px 20px;
color: var(--text_white);
font-weight: 500;
font-size: 15px;
line-height: 22px;
background: var(--bg_2);
border-radius: 3px 3px 0 0;
display: flex;
align-items: center;
svg {
margin-right: 7px;
path {
fill: var(--text_white);
}
}
}
.search {
background-color: #fff;
padding: 20px;
margin-bottom: 30px;
border-radius: 0 0 3px 3px;
.form-container {
position: relative;
input {
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: var(--main_text);
width: 100%;
padding-left: 15px;
line-height: 47px;
border: 1px solid #F4F8FB;
border-radius: 3px;
&:focus {
box-shadow: none;
outline: none;
}
&::placeholder {
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: var(--text_1);
}
}
button {
position: absolute;
display: flex;
padding: 0;
top: 50%;
transform: translate(-50%, -50%);
right: 5px;
border: none;
background-color: transparent;
}
}
}
}
.blog__sidebar-cat {
margin-bottom: 30px;
.box-title {
padding: 18px 20px;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_white);
background: var(--bg_2);
border-radius: 3px 3px 0 0;
display: flex;
align-items: center;
svg {
margin-right: 7px;
path {
fill: var(--text_white);
}
}
}
.blog__sidebar-features {
background-color: #fff;
padding: 25px;
border-radius: 0 0 3px 3px;
ul {
overflow: hidden;
li.category-item {
display: flex;
align-items: center;
cursor: default;
&:not(:last-child) {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #F4F8FB;
}
a {
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_1);
display: flex;
align-items: center;
transition: all 0.3s ease-in-out;
i {
margin-right: 10px;
font-size: 17px;
color: var(--text_1);
transition: all 0.3s ease-in-out;
}
}
&:hover {
a {
color: var(--main_text);
i {
color: var(--bg_2);
}
}
}
}
}
}
}
}
}
}
}
.pagination {
text-align: center;
width: 100%;
.page-item {
width: 100%;
max-width: 90px;
.page-link {
font-size: 14px;
font-weight: 600;
color: var(--text_1);
background: var(--section_bg);
padding: 0;
line-height: 48px;
border: none !important;
outline: none;
transition: 400ms;
&:hover {
background: var(--bg_2);
color: var(--text_white);
}
&.active {
background-color: var(--bg_2);
color: var(--text_white);
}
&:focus {
outline: none;
border: none;
box-shadow: none;
}
}
}
}
#blog-comments {
padding-bottom: 50px;
}
.blog__sidebar-search {
.box-title {
padding: 18px 20px;
color: var(--text_white);
font-weight: 500;
font-size: 15px;
line-height: 22px;
background: var(--bg_2);
border-radius: 3px 3px 0 0;
svg {
margin-right: 12px;
path {
fill: var(--text_white);
}
}
}
.search {
background-color: #fff;
padding: 20px;
margin-bottom: 30px;
border-radius: 0 0 3px 3px;
.form-container {
position: relative;
input {
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: var(--main_text);
width: 100%;
padding-left: 15px;
line-height: 47px;
border: 1px solid #F4F8FB;
border-radius: 3px;
&:focus {
box-shadow: none;
outline: none;
}
&::placeholder {
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: var(--text_1);
}
}
button {
position: absolute;
display: flex;
padding: 0;
top: 50%;
transform: translate(-50%, -50%);
right: 5px;
border: none;
background-color: transparent;
}
}
}
}
section#homeContent {
padding: 0 0 50px 0;
.content__container {
.content__item {
.content__item-content {
background: var(--kutu_1);
padding: 30px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
text-align: center;
&.right {
background: var(--kutu_2);
.content__item-btn {
a {
background: var(--kutu_2_buton);
}
}
}
.content__item-detail {
display: flex;
align-items: center;
.content__item-info {
.content__item-title {
font-weight: 600;
font-size: 17px;
line-height: 26px;
color: var(--main__text);
margin-bottom: 1px;
}
.content__item-text {
font-weight: 500;
font-size: 15px;
line-height: 22px;
padding-bottom: 15px;
color: var(--text_1);
}
}
}
.content__item-btn {
a {
border-radius: 3px;
line-height: 45px;
font-weight: 400;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
color: var(--text_white);
background: var(--kutu_1_buton);
}
}
}
}
}
}
.breadcrumb {
padding: 66px 0;
margin: 0;
background: var(--breadcumb_background);
.breadcrumb__container {
display: flex;
flex-direction: column;
align-items: center;
.breadcrumb__title {
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: var(--main__text);
margin-top: 1px;
text-align: center;
}
ul {
span {
margin: 0 5px;
i {
line-height: 4px;
color: var(--text_1);
}
}
li {
a {
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: var(--text_1);
}
}
}
}
}
section#about {
padding: 50px 0;
.about__container {
.about__container-left {
.about__container-left_top {
font-weight: 500;
font-size: 19px;
line-height: 28px;
color: var(--text_1);
margin-bottom: 5px;
}
.about__container-left_title {
font-weight: 700;
font-size: 50px;
line-height: 68px;
color: var(--main__text);
margin-bottom: 30px;
}
.about__container-left_text {
font-weight: 500;
font-size: 18px;
line-height: 30px;
color: var(--text_1);
margin-bottom: 40px;
margin-right: 30px;
}
.about__container-left_buttons {
a {
font-weight: 600;
font-size: 15px;
line-height: 22px;
max-width: 180px;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 48px;
border-radius: 3px;
transition: all 0.3s ease-in-out;
&.btn__one {
background: var(--bg_2);
border: 1px solid var(--bg_2);
color: var(--text_white);
margin-right: 30px;
&:hover {
background: transparent;
border: 1px solid var(--text_1);
color: var(--text_1);
}
}
&.btn__second {
border-style: solid;
border-width: 1px;
border-color: var(--text_1);
color: var(--text_1);
&:hover {
background: var(--bg_2);
border: 1px solid var(--bg_2);
color: var(--text_white);
}
}
}
}
}
.about__container-right {
.about__container-right_hexa {
position: relative;
.hex {
display: block;
position: relative;
width: 600px;
height: 600px;
box-sizing: border-box;
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
}
}
.about__hexa-item {
display: flex;
align-items: center;
position: absolute;
bottom: 113px;
background: #FFFFFF;
border-radius: 3px;
padding: 15px;
.about__hexa-img {
background: var(--section_bg);
min-width: 52px;
min-height: 52px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
i {
font-size: 25px;
color: var(--bg_2);
}
}
.about__hexa-text {
span {
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: var(--main_text);
position: relative;
&:after {
content: "+";
position: absolute;
right: -15px;
color: var(--main_text);
top: 50%;
transform: translate(-50%, -50%);
}
}
&.braone {
span {
&:after {
content: "%";
position: absolute;
right: -31px;
color: var(--main_text);
top: 50%;
transform: translate(-50%, -50%);
}
}
}
p {
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: var(--text_1);
}
}
&.item2 {
position: absolute;
bottom: 226px;
right: 0 !important;
}
}
}
}
}
}
section#about__bottom {
padding-bottom: 20px;
.about__bottom-container {
.about__bottom-item {
margin-bottom: 30px;
.about__bottom-detail {
display: flex;
align-items: center;
flex-direction: column;
padding: 30px;
background: #fff;
border-radius: 3px;
span.about__bottom-icon {
transition: all 0.3s ease-in-out;
min-width: 60px;
min-height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg_3);
margin-bottom: 25px;
position: relative;
border-radius: 50%;
z-index: 0;
overflow: hidden;
&::after {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: 0;
background-color: var(--bg_2);
transition: .4s;
visibility: hidden;
opacity: 0;
z-index: -1;
}
i {
font-size: 23px;
margin-top: 2px;
color: var(--main__text);
transition: all 0.3s ease-in-out;
}
}
.about__bottom-text {
span {
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: var(--main_text);
}
}
&:hover {
span.about__bottom-icon {
&:after {
height: 100%;
visibility: visible;
opacity: 1;
}
i {
color: var(--text_white);
}
}
}
}
}
}
}
section#customContent {
padding-bottom: 20px;
.customContent__container {
.customContent__item {
margin-bottom: 30px;
.customContent__item-detail {
display: flex;
align-items: center;
background: #FFFFFF;
border-radius: 3px;
padding: 25px 30px;
transition: all 0.3s ease-in-out;
.customContent__item-icon {
margin-right: 30px;
i {
font-size: 40px;
color: var(--main__text);
transition: all 0.3s ease-in-out;
}
}
.customContent__item-text {
display: flex;
flex-direction: column;
span.smile {
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: var(--text_1);
transition: all 0.3s ease-in-out;
}
span {
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 30px;
color: var(--main_text);
transition: all 0.3s ease-in-out;
}
}
svg {
transition: all 0.3s ease-in-out;
margin-left: auto;
path {
fill: var(--text_1);
}
}
&:hover {
background: var(--bg_2);
.customContent__item-icon {
i {
color: var(--text_white);
}
}
.customContent__item-text {
span {
color: var(--text_white);
}
}
svg {
transform: rotate(90deg);
path {
fill: var(--text_white);
}
}
}
}
}
}
}
section#page__text {
padding: 50px 0;
.page__text-container {
background: #ffffff;
padding: 30px;
border-radius: 3px;
p {
color: var(--text_1);
font-size: 14px;
line-height: 20px;
font-weight: 400;
b {
font-weight: 700;
}
}
}
}
section#bank {
position: relative;
padding: 80px 0;
z-index: 0;
.bank-item {
margin-bottom: 30px;
.bank-container {
padding: 40px;
background-color: #fff;
border-radius: 3px;
.bank-top {
border-bottom: 1px solid #ECF9FF;
padding-bottom: 23px;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
position: relative;
.bank-name {
font-weight: 600;
font-size: 18px;
line-height: 22px;
margin-top: 15px;
color: var(--main_text);
}
svg {
transition: 400ms;
}
}
.bank-bottom {
p {
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: var(--main_text);
b {
font-weight: 700;
}
button {
border: none;
background-color: var(--theme_color_btn2);
text-align: center;
vertical-align: middle;
padding: 1px 6px;
color: #fff;
i {
color: #fff;
font-size: 14px;
}
svg {
vertical-align: inherit;
}
}
&:not(:last-child) {
margin-bottom: 20px;
}
}
}
}
&:hover {
span.arr {
svg {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
path {
fill: var(--bg_2);
}
}
}
}
}
}
section#counter {
padding-bottom: 50px;
.main-counter-list {
.counter-box {
background: #fff;
border-radius: 3px;
padding: 15px 30px;
transition: all 0.3s ease-in-out;
position: relative;
z-index: 0;
&:after {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
content: "";
background-color: var(--bg_2);
visibility: hidden;
opacity: 0;
z-index: -1;
border-radius: 3px;
transition: .3s;
}
.box-img {
margin-right: 20px;
transition: all 0.3s ease-in-out;
z-index: 1;
i {
font-size: 30px;
color: var(--main_text);
transition: all 0.3s ease-in-out;
}
}
.box-detail {
z-index: 1;
.counter-title {
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: var(--main_text);
transition: all 0.3s ease-in-out;
display: flex;
align-items: center;
}
p {
font-size: 12px;
line-height: 15px;
font-weight: 400;
color: var(--text_1);
margin-bottom: 2px;
transition: all 0.3s ease-in-out;
}
}
&:hover {
&:after {
visibility: visible;
opacity: 1;
width: 100%;
}
.box-img {
i {
color: var(--text_white);
}
}
.box-detail {
.counter-title,
p {
color: var(--text_white);
}
}
}
}
}
}
section#blog__content {
padding: 50px 0;
.blog__content-container {
.blog__content-left {
.blog__content-image {
height: 350px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px 3px 0 0;
}
}
.blog__content-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
background: var(--section_bg);
ul {
display: flex;
align-items: center;
flex-wrap: wrap;
li {
img.admin {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
&:not(:last-child) {
margin-right: 20px;
}
display:flex;
align-items: center;
i,
img {
font-size: 16px;
margin-right: 10px;
color: var(--text_1);
}
span {
font-weight: 500;
font-size: 13px;
line-height: 20px;
color: var(--text_1);
vertical-align: bottom;
}
a {
font-weight: 500;
font-size: 13px;
color: var(--text_1);
}
}
}
.share {
li {
&:not(:last-child) {
margin-right: 10px;
}
a {
display: inline-flex;
width: 30px;
height: 30px;
border-radius: 2px;
background: #fff;
img {
width: 100%;
height: auto;
padding: 8px;
}
}
}
}
}
.blog__content-text {
padding: 30px;
background: #fff;
h1,
h2,
h3 {
font-weight: 700;
font-size: 19px;
line-height: 28px;
color: var(--main_text);
margin-bottom: 30px;
}
p {
font-weight: 400;
font-size: 15px;
line-height: 25px;
color: var(--text_1);
}
}
}
.blog__sidebar {
.sidebar__ads {
margin-bottom: 30px;
.ad {
height: 285px;
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
}
}
.blog__sidebar-cat {
margin-bottom: 30px;
.box-title {
padding: 18px 20px;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_white);
background: var(--bg_2);
border-radius: 3px 3px 0 0;
display: flex;
align-items: center;
svg {
margin-right: 7px;
path {
fill: var(--text_white);
}
}
}
.blog__sidebar-features {
background-color: #fff;
padding: 25px;
border-radius: 0 0 3px 3px;
ul {
overflow: hidden;
li.category-item {
display: flex;
align-items: center;
cursor: default;
&:not(:last-child) {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #F4F8FB;
}
a {
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_1);
display: flex;
align-items: center;
transition: all 0.3s ease-in-out;
i {
margin-right: 10px;
font-size: 17px;
color: var(--text_1);
transition: all 0.3s ease-in-out;
}
}
&:hover {
a {
color: var(--main_text);
i {
color: var(--bg_2);
}
}
}
}
}
}
}
}
.ad_hori {
display: block;
overflow: hidden;
width: 100%;
padding: 30px 0 0 0;
a {
outline: none;
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
}
}
}
}
section.order-inquiry {
padding: 50px 0;
.order-inquiry-wrapper {
background: #fff;
border-radius: 3px;
padding: 25px;
.order-inquiry_top {
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #F4F8FB;
font-weight: 500;
font-size: 18px;
line-height: 19px;
color: var(--main_text);
}
.order-inquiry_body {
display: flex;
flex-direction: column;
padding-bottom: 25px;
.o_label {
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: var(--main_text);
margin-bottom: 15px;
}
.order_control {
border: 1px solid #F1F1F1;
width: 100%;
border-radius: 3px;
font-size: 13px;
height: 50px;
padding: 15px;
line-height: 19px;
color: var(--main_text);
&::placeholder {
font-size: 13px;
line-height: 16px;
color: var(--text_1);
}
}
}
.order-action-btn {
button {
display: block;
height: 50px;
width: 100%;
border: none;
color: #fff;
background: var(--bg_2);
font-weight: 600;
font-size: 14px;
line-height: 17px;
border-radius: 3px;
}
}
}
}
.orderBox {
.orarea {
margin-top: 50px;
background: var(--bg_1);
border-radius: 3px;
padding: 15px;
font-size: 15px;
line-height: 25px;
color: var(--text_white);
}
}
section#productBox {
padding: 50px 0;
&.portfolioPage {
.product__box-container {
.product__box-title {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #F4F8FB;
}
.product__box-action {
padding: 30px 0;
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 130px;
height: 65px;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_white);
background: var(--bg_2);
border-radius: 3px;
transition: all 0.3s ease-in-out;
border: 1px solid var(--bg_2);
&:hover {
background: transparent;
border: 1px solid var(--text_1);
color: var(--text_1);
}
}
}
}
}
.product__box-container {
.product__box-view {
background: #fff;
border-radius: 3px;
.product__box-title {
padding-top: 30px;
padding-left: 30px;
h1 {
font-weight: 600;
font-size: 20px;
line-height: 30px;
color: var(--main_text);
}
}
.product__box-amount {
padding: 25px 30px 20px 30px;
background: var(--section_bg);
margin: 30px 0;
display: flex;
align-items: center;
justify-content: space-between;
ul {
display: flex;
align-items: center;
flex-wrap: wrap;
li {
margin-bottom: 5px;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_1);
i {
font-size: 16px;
margin-right: 8px;
}
strong {
font-weight: 500;
font-size: 15px;
line-height: 22px;
}
&:not(:last-child) {
margin-right: 30px;
}
}
}
.product__box-action {
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 130px;
height: 43px;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_white);
background: var(--bg_2);
border-radius: 3px;
transition: all 0.3s ease-in-out;
border: 1px solid var(--bg_2);
&:hover {
background: transparent;
border: 1px solid var(--text_1);
color: var(--text_1);
}
}
}
}
.product__box-text {
padding: 0 30px 30px 30px;
p {
font-weight: 400;
font-size: 15px;
line-height: 25px;
color: var(--text_1);
}
}
}
.product__box-ads {
padding-top: 30px;
img {
display: block;
overflow: hidden;
width: 100%;
}
}
.product__box-sidebar {
.product__box-sidecontent {
background: #fff;
border-radius: 3px;
padding: 30px;
.product__box-sideslide {
overflow: hidden !important;
&>.product__box-item:not(:first-child) {
display: none;
}
.slick-track {
display: block;
overflow: hidden !important;
}
.product__box-item {
a {
overflow: hidden;
}
&.slick-slide {
overflow: hidden;
}
img {
height: 250px;
object-fit: cover;
max-width: 100%;
border-radius: 3px;
}
}
position: relative;
i {
top: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
width: 35px;
background: var(--bg_2);
color: var(--text_white);
border-radius: 50%;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
&:hover {
i {
opacity: 1;
visibility: visible;
}
}
i.nextarrow {
position: absolute;
right: 4px;
}
i.prevarrow {
position: absolute;
left: 40px;
z-index: 1;
}
}
}
.sidebar__ads {
margin-top: 30px;
.ad {
text-align: center;
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
}
}
}
hr {
margin: 0;
border-top: 1px solid #F4F8FB;
}
.product__box-features {
padding: 30px 0 0 0;
ul {
li {
font-weight: 500;
font-size: 15px;
line-height: 22px;
cursor: default;
color: var(--text_1);
padding: 15px;
background: var(--bg_3);
border: 1px solid var(--bg_3);
border-radius: 3px;
i {
font-size: 17px;
margin-right: 10px;
}
&:not(:last-child) {
margin-bottom: 30px;
}
}
}
}
}
}
.slick-lightbox-slick {
.slick-arrow {
display: none !important;
}
}
section#contact-boxes {
position: relative;
padding: 50px 0 20px 0;
z-index: 0;
.row {
.box-detail {
background-color: #fff;
border-radius: 3px;
padding: 30px;
margin-bottom: 30px;
display: flex;
justify-content: center;
flex-direction: column;
.bn-2 {
overflow: hidden;
width: 60px;
height: 60px;
background: var(--bg_3);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.7s;
position: relative;
transition: .4s;
z-index: 0;
&:after {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: 0;
background-color: var(--bg_2);
-webkit-transition: .4s;
transition: .4s;
visibility: hidden;
opacity: 0;
z-index: -1;
}
i {
font-size: 20px;
transition: 0.3s ease-in-out;
}
}
p {
padding: 30px 0 6px 0;
font-size: 14px;
line-height: 17px;
font-weight: 400;
color: var(--text_1);
}
a,
span {
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: var(--main_text);
}
svg {
transition: 0.3s ease-in-out;
}
&:hover {
.bn-2 {
&:after {
height: 100%;
visibility: visible;
opacity: 1;
}
i {
color: var(--text_white);
}
}
span.arr {
svg {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
path {
fill: var(--bg_2);
}
}
}
}
}
}
}
.goog-text-highlight {
vertical-align: unset !important;
}
section#contact-form {
margin-bottom: 50px;
.contact-img {
height: 585px;
overflow: hidden;
margin: 0 auto;
iframe,
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px;
}
}
.form {
border-radius: 3px;
.form-bottom {
.form-box {
position: relative;
margin-bottom: 30px;
input {
font-size: 15px;
line-height: 15px;
color: var(--main_text);
width: 100%;
font-size: 14px;
line-height: 70px;
padding: 0 0 0 50px;
border: none;
border-radius: 3px;
&:focus {
outline: none;
}
&::placeholder {
font-size: 15px;
line-height: 15px;
color: var(--text_1);
}
}
&.message {
margin-bottom: 22px;
}
textarea {
font-size: 15px;
line-height: 15px;
width: 100%;
color: var(--main_text);
min-height: 185px;
border: none;
padding: 26px 0 0 19px;
border-radius: 3px;
&:focus {
outline: none;
}
&::placeholder {
font-size: 15px;
line-height: 15px;
color: var(--text_1);
}
}
button {
font-size: 17px;
line-height: 17px;
font-weight: 600;
color: #fff;
width: 100%;
border: none;
background-color: var(--bg_2);
line-height: 68px;
border-radius: 3px;
}
i {
position: absolute;
font-size: 20px;
color: var(--text_1);
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
}
}
section#contact-bottom {
padding-bottom: 20px;
.bottom-boxes {
.boxes-item {
margin-bottom: 30px;
.boxes-detail {
transition: all 0.3s;
background-color: #fff;
border-radius: 3px;
padding: 0 25px;
display: flex;
align-items: center;
z-index: 0;
position: relative;
&:after {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
content: "";
background-color: var(--bg_2);
visibility: hidden;
opacity: 0;
z-index: -1;
border-radius: 3px;
-webkit-transition: .3s;
transition: .3s;
}
a {
transition: all 0.3s;
display: flex;
align-items: center;
font-size: 18px;
font-weight: 500;
line-height: 22px;
color: var(--text_1);
width: 100%;
height: 72px;
i {
font-weight: 400;
font-size: 22px;
}
}
svg {
color: var(--theme_color_1);
font-size: 25px;
margin-right: 15px;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transition: all 0.3s;
}
&:hover {
transition: all 0.3s;
background: var(--theme_color_2_hover);
a {
transition: all 0.3s;
color: #fff;
}
svg {
color: #fff;
transition: all 0.3s;
}
&:after {
visibility: visible;
opacity: 1;
width: 100%;
}
}
}
}
}
}
.siparis {
padding: 80px 0;
.section-title {
margin-bottom: 40px;
h2 {
color: var(--main_text);
border-bottom: 1px solid #F4F8FB;
padding-bottom: 30px;
margin-bottom: 30px;
font-size: 16px;
display: flex;
align-items: center;
b {
padding: 0 5px;
}
}
}
.lightbox-container {
background: #fff;
padding: 30px;
}
#product-lightbox {
.box-title {
background: #fff;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: var(--theme_color_1);
padding: 0 30px 30px 0;
margin-bottom: 20px;
}
.price {
background: #fff;
padding: 30px;
strong {
font-size: 14px;
line-height: 17px;
color: var(--main_text);
font-weight: 400;
margin-bottom: 5px;
}
span {
font-weight: 500;
font-size: 15px;
line-height: 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
color: var(--theme_color_1);
&:not(:last-child) {
border-bottom: 1px solid #F4F8FB;
padding-bottom: 20px;
margin-bottom: 20px;
}
&.toplam {
strong {
color: var(--bg_2);
font-weight: 600;
}
b {
color: var(--bg_2);
}
}
}
}
}
#selector {
position: relative;
.bootstrap-select {
width: 100%;
}
.form-control {
border-radius: 16px;
background: transparent;
&:hover {
outline: none;
box-shadow: none;
}
}
.dropdown-toggle {
padding: 18px 20px;
background: #fff;
border-radius: 16px;
border: 1px solid #ECF9FF;
&:hover {
background: #fff;
outline: none;
box-shadow: none;
}
&:focus {
outline: none;
outline: none !important;
outline-offset: none !important;
box-shadow: none;
}
&:after {
display: none;
}
.filter-option-inner-inner {
font-size: 15px;
line-height: 15px;
font-weight: 400;
color: var(--text_1);
}
}
.dropdown-menu {
border: none;
border-radius: 16px;
min-width: 96.5%;
.dropdown-item {
color: var(--main_text);
&.active {
background: transparent;
color: var(--main_text);
}
&:active {
background: transparent
}
&:focus {
background: transparent
}
}
}
i {
position: absolute;
right: 20px;
top: 50%;
color: var(--text_1);
transform: translate(-50%, -50%);
}
}
.form {
border-radius: 3px;
.form-bottom {
.form-box {
position: relative;
margin-bottom: 30px;
input {
font-size: 15px;
line-height: 15px;
color: var(--main_text);
width: 100%;
font-size: 14px;
line-height: 50px;
padding: 0 0 0 20px;
border: 1px solid #ECF9FF;
margin-bottom: 30px;
border-radius: 3px;
&:focus {
outline: none;
}
&::placeholder {
font-size: 14px;
line-height: 17px;
color: var(--text_1);
}
}
button {
font-size: 17px;
line-height: 17px;
font-weight: 600;
color: #fff;
width: 100%;
border: none;
background-color: var(--bg_2);
line-height: 68px;
}
textarea {
width: 100%;
border: none;
border-radius: 3px;
font-size: 14px;
min-height: 80px;
padding: 16px 0 0 20px;
color: var(--main_text);
border: 1px solid #ECF9FF;
&:focus {
outline: none;
}
&::placeholder {
font-size: 15px;
line-height: 15px;
color: var(--text_1);
}
}
}
}
#subbmit {
background: var(--bg_2);
color: var(--text_white);
border-radius: 3px;
font-weight: 600;
font-size: 17px;
line-height: 55px;
padding: 0;
border: none;
&:hover {
background: var(--bg_2);
}
&:focus {
outline: none;
box-shadow: none;
}
}
}
}
#top_alert {
padding-top: 50px;
.alertt {
padding: 17px 30px;
background: var(--bg_2);
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 3px;
strong {
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: var(--text_white);
}
span {
font-size: 18px;
line-height: 22px;
font-weight: 400;
color: var(--text_white);
display: flex;
align-items: center;
strong {
margin-right: 10px;
}
}
a {
font-weight: 600;
font-size: 15px;
line-height: 15px;
color: var(--text_white);
padding: 17.5px 30px;
background: var(--kutu_1_buton);
border-radius: 3px;
}
}
}
.order_follow {
padding: 30px 0 50px 0;
.lightbox-container {
background-color: #fff;
padding: 30px;
border-radius: 3px;
.sip_item {
&:not(:last-child) {
border-bottom: 1px solid #ECF9FF;
padding-bottom: 30px;
margin-bottom: 30px;
}
strong {
font-size: 14px;
line-height: 17px;
font-weight: 500;
margin-bottom: 10px;
color: var(--passive_color);
}
p {
font-size: 14px;
line-height: 20px;
color: var(--main_text);
font-weight: 400;
a {
color: var(--main_color);
&:hover {
color: var(--main_color);
}
}
}
}
.sip_item.product_area {
.product_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.p_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.product_img {
max-width: 100px;
height: 70px;
border-radius: 3px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.prd_im {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
span {
font-size: 14px;
line-height: 17px;
color: var(--main_text);
}
span.pr_text {
font-weight: 500;
font-size: 15px;
line-height: 18px;
color: var(--main_text);
margin-top: 2px;
}
&:not(:last-child) {
margin-right: 35px;
}
}
}
.p_info {
span {
padding: 14px 15px;
border-radius: 3px;
font-weight: 500;
font-size: 11px;
line-height: 13px;
cursor: pointer;
}
}
}
}
}
.price {
padding: 30px !important;
background-color: #fff;
align-items: flex-start;
strong {
font-size: 14px;
line-height: 17px;
color: var(--passive_color);
font-weight: 400;
margin-bottom: 5px;
}
span {
font-weight: 500;
font-size: 15px;
line-height: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
color: var(--main_text);
&:not(:last-child) {
border-bottom: 1px solid #ECF9FF;
padding-bottom: 20px;
margin-bottom: 20px;
}
}
span.toplam {
strong {
color: var(--bg_2);
font-weight: 600;
}
b {
color: var(--bg_2);
}
}
.payment {
a {
color: var(--bg_2);
}
}
}
}
.odeme_bildir {
display: block;
width: 100%;
height: 100%;
line-height: 60px;
border: none;
background: var(--bg_2);
color: var(--text_white);
border-radius: 3px;
font-weight: 500;
font-size: 18px;
}
.odeme_bildirbtn {
background: var(--main_color) !important;
}
// Custom sonradan eklenenler
.badge-basarilibg {
background: rgba(40, 167, 69, 0.15);
color: #28A745;
}
.badge-hazirlaniyorbg {
background: rgba(23, 162, 184, 0.15);
color: #17A2B8;
}
.badge-odemebekbg {
background: rgba(52, 152, 177, 0.15);
color: #3498B1;
}
.badge-iptalbg {
background: rgba(255, 70, 92, 0.15);
color: #FF465C;
}
.badge-teslimbg {
background: rgba(4, 53, 156, 0.15);
color: #04359C;
}
.badge-kargobg {
background: rgba(131, 182, 143, 0.15);
color: #83B68F;
}
.badge-kontrolbg {
background: rgba(26, 119, 134, 0.15);
color: #1A7786;
}
.badge-stokyokbg {
background: rgba(0, 2, 25, 0.15);
color: #000219;
}
#odeme-bildirimi {
h3,
i,
label {
color: #5e5c7f;
}
h3 {
display: flex;
align-items: center;
i {
margin-right: 5px;
}
}
input,
textarea,
select {
&:focus,
&:active {
outline: none;
box-shadow: none;
}
}
.modal-content {
border: none;
}
.modal-header {
align-items: center;
}
input[type="submit"] {
background: var(--bg_2);
border-color: var(--bg_2);
width: 100%;
&:hover {
background: var(--bg_2);
}
}
}
.modal-header {
.close {
padding: 0;
margin: 0;
span {
vertical-align: inherit;
}
}
}
section#gallerybox {
padding: 50px 0;
.gallerybox-container {
.gallerybox__item {
background: #fff;
border: 10px solid var(--site_bg);
padding: 5px;
.modal-dialog {
.modal-content {
background: transparent;
border: none;
border-radius: 0 0 3px 3px;
.modal-header {
padding: 0;
border: none;
border-radius: 0;
.close {
text-shadow: none;
padding: 0;
margin-bottom: 15px;
color: #fff;
font-weight: 400;
margin-left: auto;
i {
font-size: 24px;
color: #fff;
}
}
}
.modal-body {
padding: 0;
}
}
}
.card {
background: transparent;
border: none;
overflow: hidden;
border-radius: 3px;
height: 100%;
.card-body {
padding: 0;
height: 200px;
min-height: unset;
position: relative;
span.hov {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text_white);
font-size: 50px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
z-index: 0;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg_1);
opacity: 0.8;
z-index: -1;
}
}
img {
height: 200px;
object-fit: cover;
}
}
.card-footer {
background: transparent;
border: none;
border-radius: 0 0 3px 3px;
padding: 30px;
display: flex;
flex-direction: column;
height: 100%;
h2 {
border-bottom: 1px solid #F4F8FB;
margin-bottom: 30px;
padding-bottom: 30px;
height: 100%;
a {
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: var(--main_text);
}
}
.actionbtn {
a {
display: block;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border: 1px solid #F4F8FB;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--main_text);
border-radius: 3px;
transition: all 0.3s ease-in-out;
height: 50px;
}
}
}
&:hover {
.card-footer {
.actionbtn {
a {
color: var(--text_white);
background: var(--bg_2);
}
}
}
.card-body {
span.hov {
opacity: 1;
visibility: visible;
}
}
}
}
}
}
}
.footer {
background-color: var(--section_bg);
padding: 40px 0 40px 0;
.footer_top {
margin-bottom: 30px;
.footer-site-logo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
img {
vertical-align: middle;
max-height: 50px;
max-width: 100%;
}
}
.nav-links {
display: flex;
flex-wrap: wrap;
li {
display: inline-block;
&:not(:last-child) {
margin-right: 26px;
}
a {
cursor: pointer;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_1);
}
}
}
}
.footer_bottom {
.social {
ul {
li {
display: inline-block;
&:not(:last-child) {
margin-right: 13px;
}
a {
display: inline-block;
color: var(--text_1);
font-size: 25px;
i {
vertical-align: middle;
}
}
}
}
}
.copyright {
cursor: default;
p {
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--text_1);
}
}
}
}
// Cookie
.cookieConsentContainer {
z-index: 999;
width: 90%;
max-width: max-content;
border-radius: 5px;
text-align: center;
min-height: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px 20px;
box-shadow: 0px 4px 10px rgba(215, 222, 230, 0.3);
border-radius: 16px;
background: #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
overflow: hidden;
position: fixed;
bottom: 30px;
right: 50%;
transform: translate(50%);
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
display: flex;
align-items: center;
.cookieCont {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.cookieTitle {
a {
vertical-align: text-top;
}
}
.cookieDesc {
p {
font-weight: 400;
font-size: 15px;
line-height: 18px;
padding: 0 20px;
color: var(--main_text);
}
a {
font-weight: 700;
color: var(--main_text);
text-decoration: none;
}
}
.cookieButton {
button {
display: inline-block;
cursor: pointer;
background: var(--site_background_secondary);
min-width: 30px;
min-height: 30px;
width: 100%;
color: #a9b5b7;
border-radius: 5px;
border: none;
}
}
}
.cookieConsentContainer.hidden {
opacity: 0;
display: none;
z-index: -99;
}
// Fixed whatsApp
section#fixed-whatsapp {
position: fixed;
left: 30px;
bottom: 30px;
z-index: 3;
.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #e89f04;
cursor: pointer;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
.item-detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 50px;
height: 50px;
}
span {
padding: 0 20px 0 0;
font-size: 14px;
color: var(--text_white);
position: absolute;
visibility: hidden;
opacity: 0;
margin-left: -30px;
font-weight: 500;
}
}
}
}
// Back to top
.back-to-top {
visibility: hidden;
background-color: var(--bg_2);
color: #fff;
width: 50px;
height: 50px;
text-align: center;
line-height: 38px;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 90;
cursor: pointer;
opacity: 0;
border-radius: 3px;
-webkit-transition: all 0.4s;
transition: all 0.4s;
svg {
fill: var(--text_white);
}
}
.back-to-top.show {
visibility: visible;
opacity: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
}
//Responsive
@media (min-width: 1366px) {
.container {
max-width: 1230px;
}
.header-container {
.navbar {
.navbar-collapse {
.navbar-nav {
.dropdown {
&:hover {
.dropdown-menu {
display: block;
}
}
}
}
}
}
}
}
@media (max-width: 1200px) {
.container {
max-width: 95%;
}
.site-navbar {
.site__menu-contact {
a {
padding: 10px 10px;
i {
margin-right: 0;
}
span {
display: none;
}
}
}
}
section#blog {
&.blog__main {
padding-top: 0;
}
.blog__container {
.blog__container-pagi {
margin-bottom: 30px;
}
}
}
.site-navbar {
padding: 25px 0;
.site__menu-contact {
margin-left: 0;
}
}
.site-navbar {
.site__navbar-container {
justify-content: space-between;
.site-navigation {
display: none;
}
}
}
}
@media (min-width: 1200px) {
.container {
max-width: 1260px;
}
}
@media (min-width: 998px) and (max-width: 1200px) {
section#about {
.about__container {
.about__container-right {
.about__container-right_hexa {
.hex {
width: 500px;
height: 500px;
}
}
}
}
}
}
@media (max-width: 998px) {
section#productBox {
.product__box-container {
.row {
flex-direction: column-reverse;
.product__box-body {
margin-top: 30px;
}
.product__box-sidebar {
display: flex;
flex-direction: column-reverse;
.product__box-sidecontent {
.product__box-sideslide {
.product__box-item {
img {
width: 100%;
max-height: 350px;
}
}
}
}
.sidebar__ads {
.ad {
text-align: left;
margin-bottom: 30px;
}
}
}
}
}
}
section#about {
.about__container {
flex-direction: column-reverse;
align-items: flex-start !important;
.about__container-right {
margin-bottom: 30px;
flex: 0 0 100%;
max-width: 100%;
.about__container-right_hexa {
width: fit-content;
}
}
.about__container-left {
flex: 0 0 100%;
max-width: 100%;
}
}
}
section#blog__content {
.blog__content-container {
.blog__sidebar {
.blog__sidebar-cat {
margin-top: 30px;
}
.sticky {
flex-direction: column-reverse;
display: flex;
}
.sidebar__ads {
margin-bottom: 0;
}
}
}
}
}
@media (min-width: 998px) {
section#fixed-whatsapp {
.item {
.item-detail {
span {
padding: 0 20px 0 0;
font-size: 14px;
color: var(--text_white);
position: absolute;
visibility: hidden;
opacity: 0;
margin-left: -30px;
font-weight: 500;
}
&:hover {
span {
position: relative;
opacity: 1;
visibility: visible;
margin-left: 0;
-webkit-transition: 0.4s cubic-bezier(0, 0, 0.34, 0.81);
transition: 0.4s cubic-bezier(0, 0, 0.34, 0.81);
}
}
}
}
}
.sticky {
position: sticky;
top: 130px;
}
}
@media (max-width: 870px) {
section#blog__content {
.blog__content-container {
.blog__content-left {
.blog__content-info {
flex-direction: column;
align-items: flex-start;
.share {
margin-top: 10px;
}
}
}
}
}
}
@media (max-width: 768px) {
.site-navbar {
.site__menu-contact {
a {
padding: 10px 10px;
i {
margin-right: 0;
}
span {
display: none;
}
}
}
}
section#contact-form {
.mobile {
flex-direction: column-reverse;
}
.contact-img {
padding-top: 30px;
}
}
.order_follow {
.lightbox-container {
.sip_item.product_area {
.product_container {
.p_wrapper {
flex-direction: column;
align-items: flex-start;
.prd_im {
&:not(:last-child) {
margin-bottom: 10px;
}
}
}
}
}
}
}
.footer {
.footer_top {
flex-direction: column;
align-items: flex-start !important;
.footer-site-logo {
margin-bottom: 15px;
}
}
}
}
@media (max-width: 640px) {
section#about {
.about__container {
.about__container-right {
.about__container-right_hexa {
.hex {
width: 440px;
height: 440px;
}
}
}
}
}
}
@media (min-width: 576px) {
.site-navbar {
.site__menu-contact {
.page-wrapper {
display: none;
}
}
}
}
@media (max-width: 576px) {
.sticky-wrapper {
.site-navbar {
.site-logo {
img {
max-height: 27px;
}
}
}
}
#header__top {
display: none;
}
.site-navbar {
.site__menu-contact {
.contactbtn {
display: none;
}
a {
background: transparent !important;
}
}
}
#header__top {
.header__container {
justify-content: center;
.header__left {
display: none;
}
}
}
section#hero {
&:before {
background: linear-gradient(273deg, var(--bg_1) 0%, var(--bg_1) 0%, transparent 157%)
}
.hero__container {
.hero__top {
font-size: 16px;
}
.hero__title {
font-size: 40px;
line-height: 44px;
}
.hero__text {
font-size: 16px;
line-height: 25px;
}
.hero__links {
flex-direction: column;
a {
max-width: 100%;
&:not(:last-child) {
margin-right: 0;
margin-bottom: 30px;
}
}
}
}
}
section#homeContent {
.content__container {
.content__item {
.content__item-content {
.content__item-btn {
width: 100%;
a {
width: 100%;
}
}
}
}
}
}
section#about {
.about__container {
.about__container-left {
.about__container-left_top {
font-size: 16px;
}
.about__container-left_title {
font-size: 40px;
line-height: 44px;
}
.about__container-left_text {
font-size: 16px;
line-height: 25px;
}
.about__container-left_buttons {
a {
max-width: 100%;
}
}
.about__container-left_buttons {
flex-direction: column;
display: flex;
a.btn__one {
margin-bottom: 20px;
margin-right: 0;
}
}
}
}
}
.footer {
.footer_bottom {
flex-direction: column;
align-items: flex-start !important;
justify-content: flex-start !important;
}
}
section#productBox {
.product__box-container {
.product__box-view {
.product__box-amount {
flex-direction: column;
align-items: flex-start;
.product__box-action {
width: 100%;
}
ul {
margin-bottom: 15px;
li {
&:not(:last-child) {
margin-bottom: 15px;
}
}
}
}
}
}
}
section#projects {
.projects__container {
.projects__item {
.projects__details {
padding: 30px;
flex-direction: column;
align-items: flex-start !important;
.projects__image {
margin-right: 0;
margin-bottom: 30px;
border-radius: 3px;
overflow: hidden;
}
}
}
}
}
.order_follow {
.lightbox-container {
.sip_item.product_area {
.product_container {
flex-direction: column;
align-items: flex-start;
.p_wrapper {
margin-bottom: 20px;
}
}
}
}
}
section#blog {
.blog__container {
.blog__container-pagi {
.pagination {
.page-item {
max-width: 100%;
}
}
}
.blog__item {
.blog__item-detail {
.blog__item-image {
img {
width: 100%;
}
}
}
}
}
}
.footer {
.footer_top {
.nav-links {
li {
&:not(:last-child) {}
}
}
}
}
section#blog__content {
.blog__content-container {
.blog__content-left {
.blog__content-info {
ul {
li {
margin-bottom: 15px;
}
}
}
}
}
}
}
@media (max-width: 470px) {
section#about {
.about__container {
.about__container-right {
.about__container-right_hexa {
.about__hexa-item {
bottom: 50px;
}
.hex {
width: 330px;
height: 330px;
}
}
}
}
}
}
@media (max-width: 350px) {
section#about {
.about__container {
.about__container-right {
.about__container-right_hexa {
.about__hexa-item {
bottom: -7px;
}
.hex {
width: 300px;
height: 300px;
}
}
}
}
}
section#portfolio {
.portfolio__container {
.portfolio__item {
.portfolio__item-top {
flex-direction: column;
align-items: flex-start;
.portfolio__item-icon {
margin-bottom: 15px;
}
}
}
}
}
}