@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
:root { --Black: #000000; --White: #ffffff; --body-text: #6e7673; --Primary: #3E4B41; --Secondary: #9E6C34; --Third: #8a9b8e; --Text: #6e7673; --Text-2: #072010; --Text-3: #eeeeee; --Text-4: #9E6C34; --Text-5: #222222; --Text-6: #ededed; --Text-7: #093416; --Bg: #235130; --Bg-1: rgb(13, 64, 28, 0.1); --Bg-2: rgb(4, 18, 8, 0.4); --Bg-3: rgb(13, 64, 28, 0.05); --Bg-4: #6c512f; --Bg-5: #3d6649; --Bg-6: #52320a; --Bg-7: rgb(13, 64, 28, 0.12); --Bg-8: #f3f0eb; --Bg-9: rgb(13, 64, 28, 0.13); --Bg-10: rgb(13, 64, 28, 0.05); --Bg-11: #1c6932; --Bg-12: rgba(255, 255, 255, 0.07); --Bg-13: rgb(13, 64, 28, 0.7); --Bg-14: rgb(4, 18, 8, 0.3); --Bg-15: rgb(255, 255, 255, 0.25); --Bg-16: #e9e0ce; --Bg-17: rgb(13, 64, 28, 0.07); --Border: rgb(13, 64, 28, 0.15); --Border-2: #6a5030; --Border-3: rgb(255, 255, 255, 0.2); --Border-4: #dbe3dd; --Border-5: rgba(255, 255, 255, 0.15); --Border-6: #e9e4df; --Border-7: rgba(255, 255, 255, 0.5); --Border-8: rgb(243, 240, 235, 0.25); --Border-9: rgb(4, 18, 8, 0.25); --Border-10: rgba(255, 255, 255, 0.3); --Border-11: #d1d6cc; --Border-12: rgb(13, 64, 28, 0.2); --Border-13: rgb(82, 50, 10, 0.23); --Border-14: #3b6345; --Border-15: rgb(13, 64, 28, 0.5); --Color-1: #d11b1b; --Color-2: #acd373; --Color-3: #f26522; --Color-4: #8560a8; --Color-5: #95bfa1; --Color-6: rgb(255, 255, 255, 0.4); --Color-7: #156b2f; --Color-8: #1cbbb4; --Color-9: #bd8cbf; --Color-10: #f26c4f; --Color-11: #ed1c24; --Color-12: #00aeef; --Color-13: #39b54a;
}
.custom-padding-section { padding: 120px 0 0 0 !important;
}
.custom-padding-section-2 { padding: 0 0 120px 0 !important;
}
/*---------- Reset css styles ----------- */
/* Reset Browsers
-------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
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; outline: 0; font: inherit; vertical-align: baseline; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit;
} article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block;
} html { margin-right: 0 !important; font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} *,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} body { background: var(--White); line-height: 1; padding: 0 !important; /* Đổi màu nền của thanh cuộn */ /* Đổi màu thanh cuộn chính */
}
body::-webkit-scrollbar { width: 3px;
}
body::-webkit-scrollbar-track { background-color: #f1f1f1; /* Màu nền */
}
body::-webkit-scrollbar-thumb { background-color: var(--Secondary); /* Màu thanh cuộn */ border-radius: 6px; /* Bo góc cho thanh cuộn */
}
body.no-scroll { overflow: hidden;
} article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block;
} ol,
ul { list-style: none;
} table { border-collapse: collapse; border-spacing: 0;
} caption,
th,
td { font-weight: normal; text-align: left;
} blockquote:before,
blockquote:after,
q:before,
q:after { content: "";
} blockquote,
q { quotes: none;
} a img { border: 0;
} img { max-width: 100%; height: auto;
} select { max-width: 100%;
} /* General
-------------------------------------------------------------- */
body,
button,
input,
select,
textarea { font-family: "Nunito Sans", sans-serif; font-size: 15px; font-weight: 400; color: var(--body-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: auto;
} img { height: auto; max-width: 100%; vertical-align: middle; -ms-interpolation-mode: bicubic;
} p { font-weight: 400; font-size: 16px; line-height: 26px;
} strong,
b,
cite { font-weight: bold;
} dfn,
cite,
em,
i,
blockquote { font-style: italic;
} abbr,
acronym { border-bottom: 1px dotted #e0e0e0; cursor: help;
} .btn-link:focus,
.btn-link:hover,
mark,
ins { text-decoration: none;
} sup,
sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline;
} small { font-size: 75%;
} big { font-size: 125%;
} address { font-style: italic; margin: 0 0 20px;
} code,
kbd,
tt,
var,
samp,
pre { margin: 20px 0; padding: 4px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; overflow-x: auto; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-radius: 0; height: auto;
} svg,
svg path { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
} /* Elements
-------------------------------------------------------------- */
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} *,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} hr { margin-bottom: 20px; border: dashed 1px #ccc;
} /* List */
ul,
ol { padding: 0;
} ul { list-style: disc;
} ol { list-style: decimal;
} li >ul,
li >ol { margin-bottom: 0;
} li { list-style: none;
} ul li,
ol li { padding: 0;
} dl,
dd { margin: 0 0 20px;
} dt { font-weight: bold;
} del,
.disable { text-decoration: line-through; filter: alpha(opacity=50); opacity: 0.5;
} /* Table */
table,
th,
td { border: 1px solid #343444;
} table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 30px; table-layout: fixed; width: 100%;
} caption,
th,
td { font-weight: normal; text-align: left;
} th { border-width: 0 1px 1px 0; font-weight: bold;
} td { border-width: 0 1px 1px 0;
} th,
td { padding: 8px 12px;
} /* Media */
embed,
object,
video { margin-bottom: 20px; max-width: 100%; vertical-align: middle;
} p >embed,
p >iframe,
p >object,
p >video { margin-bottom: 0;
} /* Forms
-------------------------------------------------------------- */
/* Fixes */
button,
input { line-height: normal;
} button,
input,
select,
textarea { font-size: 100%; line-height: inherit; margin: 0; vertical-align: baseline;
} textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ vertical-align: top; /* Improves readability and alignment in all browsers */
} input[type=checkbox] { display: inline;
} button,
input[type=button],
input[type=reset],
input[type=submit] { line-height: 1; cursor: pointer; -webkit-appearance: button; border: 0;
} input[type=checkbox],
input[type=radio] { padding: 0; width: 20px; height: 20px; border-radius: 6px; background: rgba(0, 0, 0, 0); cursor: pointer; vertical-align: sub; /* Addresses excess padding in IE8/9 */
} input[type=search] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
} input[type=search]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none;
} button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;
} /* Remove chrome yellow autofill */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
} /* Reset search styling */
input[type=search] { outline: 0;
} input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration { display: none;
} /* Placeholder color */
::-webkit-input-placeholder { color: #171412;
} ::-moz-placeholder { color: #171412; opacity: 1;
} /* Since FF19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder { color: #171412;
} /* Typography
-------------------------------------------------------------- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 { font-family: "Work Sans", sans-serif; color: var(--Text-2); margin: 0; text-rendering: optimizeLegibility;
} h1,
.h1 { font-size: 70px; line-height: 100px;
} h2,
.h2 { font-size: 40px; line-height: 55px;
} h3,
.h3 { font-size: 30px; line-height: 40px;
} h4,
.h4 { font-size: 23px; line-height: 33px;
} h5,
.h5 { font-size: 20px; line-height: 30px;
} h6,
.h6 { font-size: 16px; line-height: 28px;
} .font-intertight { font-family: "Inter Tight", sans-serif;
} .font-farmhouse { font-family: "Farmhouse", sans-serif;
} .font-sarabun { font-family: "Sarabun", sans-serif;
} .font-nunito { font-family: "Nunito Sans", sans-serif;
} .font-worksans { font-family: "Work Sans", sans-serif !important;
} .font-snowfall { font-family: "GlitterySnowfall", sans-serif;
} .text-upper { text-transform: uppercase;
} .fw-7 { font-weight: 700;
} .fw-6 { font-weight: 600;
} .fw-5 { font-weight: 500;
} .fs-45 { font-size: 45px;
} .fs-35 { font-size: 35px;
} .fs-30 { font-size: 30px;
} .fs-24 { font-size: 24px;
} .fs-23 { font-size: 23px;
} .fs-20 { font-size: 20px;
} .fs-22 { font-size: 22px;
} .fs-21 { font-size: 21px;
} .fs-18 { font-size: 18px;
} .fs-17 { font-size: 17px;
} .fs-15 { font-size: 15px;
} .fs-14 { font-size: 14px;
} .fw-5 { font-weight: 500;
} /* link style
-------------------------------------------------------------- */
a { text-decoration: none; color: var(--Text-2); cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
a:hover, a:focus { color: var(--Bg); outline: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
a.hover-text-primary:hover { color: var(--Primary) !important;
}
a.hover-text-secondary:hover { color: var(--Secondary) !important;
}
a.hover-text-4:hover { color: var(--Text-4) !important;
}
a.text-white { color: var(--White);
} /* tf-container
-------------------------------------------------------------- */
.tf-container { position: relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; width: 1320px; max-width: 100%;
}
.tf-container .row { margin-left: -15px !important; margin-right: -15px !important;
}
.tf-container .row >* { padding-left: 15px !important; padding-right: 15px !important;
}
.tf-container.full { width: 100%;
}
.tf-container.w-1780 { width: 100%; max-width: 1810px;
}
.tf-container.w-1290 { width: 100%; max-width: 1320px;
}
.tf-container.w-1620 { width: 100%; max-width: 1650px;
} /* Extra classes
-------------------------------------------------------------- */
#wrapper { width: 100vw;
} .hidden { display: none;
} .block { display: block;
} .relative { position: relative;
} .absolute { position: absolute;
} .fixed { position: fixed !important;
} .position-unset { position: unset !important;
} .z-5 { z-index: 5;
} .flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
} .mb-80 { margin-bottom: 80px;
} .mb-50 { margin-bottom: 50px;
} .mb-42 { margin-bottom: 42px;
} .mb-40 { margin-bottom: 40px;
} .mb-35 { margin-bottom: 35px;
} .mb-30 { margin-bottom: 30px;
} .mb-25 { margin-bottom: 25px;
} .mb-20 { margin-bottom: 20px;
} .mb-10 { margin-bottom: 10px;
} .lt-sp-01 { letter-spacing: 0.1px;
} .overflow-x-auto { overflow-x: auto;
}
.overflow-x-auto::-webkit-scrollbar { height: 2px;
}
.overflow-x-auto::-webkit-scrollbar-thumb { background: var(--Border); border-radius: 999px;
} .overflow-y-auto { overflow-y: auto;
}
.overflow-y-auto::-webkit-scrollbar { width: 2px;
}
.overflow-y-auto::-webkit-scrollbar-thumb { background: var(--Border); border-radius: 999px;
} .justify-center { justify-content: center;
} .item-center { align-items: center;
} .swiper-slide { height: auto;
}
.swiper-slide >* { height: 100%;
} .pt-0 { padding-top: 0px;
} .text-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
} .wrap-reverse { flex-wrap: wrap-reverse;
} .overflow-hidden { overflow: hidden;
} .sticky-top { position: sticky; top: 0; z-index: 10;
} .text-left { text-align: left;
} /*------------ Components ---------------- */
/*------------ header ---------------- */
.tf-topbar { background-color: var(--Primary); padding: 17px 0px;
}
.tf-topbar .topbar-inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.tf-topbar .topbar-inner .topbar-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 31px; background-color: var(--Bg); padding: 10px 20px; border-radius: 18px;
}
.tf-topbar .topbar-inner .topbar-left span { color: var(--White);
}
.tf-topbar .topbar-inner .topbar-left span:not(:last-child) { position: relative;
}
.tf-topbar .topbar-inner .topbar-left span:not(:last-child)::after { content: ""; position: absolute; width: 5px; height: 5px; top: 50%; transform: translateY(-50%); right: -20px; border-radius: 50%; background-color: var(--Secondary);
}
.tf-topbar .topbar-inner .topbar-right { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 59px;
}
.tf-topbar .topbar-inner .topbar-right .contact-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 36px;
}
.tf-topbar .topbar-inner .topbar-right .contact-list .item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.tf-topbar .topbar-inner .topbar-right .contact-list .item .icon { width: 30px; height: 30px; background-color: var(--Secondary); border-radius: 50%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.tf-topbar .topbar-inner .topbar-right .contact-list .item .icon i { color: var(--Primary); font-size: 13px;
}
.tf-topbar .topbar-inner .topbar-right .contact-list .item a { color: var(--White); font-family: "Nunito Sans", sans-serif; font-size: 14px; letter-spacing: 0.1px;
}
.tf-topbar .topbar-inner .topbar-right .contact-list .item a:hover { color: var(--Third);
}
.tf-topbar .topbar-inner .topbar-right .social-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: var(--Bg); border-radius: 18px; padding: 10px 29px 10px 24px; gap: 21px;
}
.tf-topbar .topbar-inner .topbar-right .social-list a { color: var(--Third);
}
.tf-topbar .topbar-inner .topbar-right .social-list a:hover { color: var(--White);
}
.tf-topbar .topbar-inner .topbar-right .social-list a .icon-instagram2 { font-size: 12px;
}
.tf-topbar.style-2 { background-color: transparent; padding: 0px;
}
.tf-topbar.style-2 .topbar-inner { border-bottom: 1px dashed var(--Bg-15); padding: 31px 0px 27px 0px;
}
.tf-topbar.style-2 .topbar-inner .topbar-left { background-color: unset; padding: 0px;
}
.tf-topbar.style-2 .topbar-inner .topbar-left .logo { max-width: 220px;
}
.tf-topbar.style-2 .topbar-inner .topbar-right .contact-list { gap: 53px;
}
.tf-topbar.style-2 .topbar-inner .topbar-right .contact-list .item { gap: 21px;
}
.tf-topbar.style-2 .topbar-inner .topbar-right .contact-list .icon { width: 55px; height: 55px;
}
.tf-topbar.style-2 .topbar-inner .topbar-right .contact-list .icon i { font-size: 28px;
}
.tf-topbar.style-2 .topbar-inner .topbar-right .contact-list .infor .title { color: var(--White); font-family: "Work Sans", sans-serif; font-weight: 500;
}
.tf-topbar.style-2 .topbar-inner .topbar-right .contact-list .infor .text { color: var(--Text-3); font-family: "Nunito Sans", sans-serif;
}
.tf-topbar.style-2 .contact-list.mobile { display: none; width: 100%; justify-content: space-between;
}
.tf-topbar.style-2 .contact-list.mobile .item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px;
}
.tf-topbar.style-2 .contact-list.mobile .item .icon { width: 30px; height: 30px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: var(--Secondary); border-radius: 50%;
}
.tf-topbar.style-2 .contact-list.mobile .item i { color: var(--Primary); font-size: 12px;
}
.tf-topbar.style-2 .contact-list.mobile .item p { color: var(--White); font-size: 14px;
}
.tf-topbar.style-3 { background-color: unset; padding: 0px;
}
.tf-topbar.style-3 .topbar-inner { padding: 21px 0px 20px; border-bottom: 1px solid var(--Bg-1);
}
.tf-topbar.style-3 .topbar-left { padding: 0px; background-color: unset; gap: 35px;
}
.tf-topbar.style-3 .topbar-left span { color: var(--Primary); font-size: 16px;
}
.tf-topbar.style-3 .topbar-left span:not(:last-child)::after { top: 40%; width: 7px; height: 7px;
}
.tf-topbar.style-3 .topbar-right { gap: 72px;
}
.tf-topbar.style-3 .topbar-right .contact-list { gap: 49px;
}
.tf-topbar.style-3 .topbar-right .contact-list .item a { font-size: 16px; color: var(--Text);
}
.tf-topbar.style-3 .icon-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 44px; padding-right: 2px; margin-right: 27px; position: relative;
}
.tf-topbar.style-3 .icon-wrap::after { content: ""; position: absolute; height: 33px; width: 1px; background-color: var(--Bg-9); right: 50%; top: 0;
}
.tf-topbar.style-3 .icon-wrap .icon:not(:last-child) { position: relative;
}
.tf-topbar.style-3 .icon-wrap .icon i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--Primary);
}
.tf-topbar.style-3 .icon-wrap .icon i.fs-25 { font-size: 25px;
}
.tf-topbar.style-3 .icon-wrap .icon:hover i { color: var(--Secondary);
}
.tf-topbar.style-3 .icon-wrap .icon.wg-bag { position: relative;
}
.tf-topbar.style-3 .icon-wrap .icon.wg-bag i { font-size: 24px;
}
.tf-topbar.style-3 .icon-wrap .icon.wg-bag::after { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; content: "3"; position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: var(--Secondary); color: var(--Text-5); font-weight: 600; font-size: 14px; top: -14px; right: -30px;
} .header .fixed-header.style-absolute { position: fixed; z-index: 299; top: -1px; left: 0; transform: translateY(-100%); transition: 0.6s cubic-bezier(0.43, 0.46, 0.64, 0.66) !important; width: 100%; background-color: var(--White); opacity: 0; pointer-events: none; box-shadow: 0 3px 100px rgba(2, 21, 78, 0.09);
}
.header .fixed-header.style-absolute.visible { pointer-events: all; transform: translateY(0%); opacity: 1; backdrop-filter: blur(10px);
}
.header .fixed-header.style-absolute.style-2 { z-index: 9999;
}
.header .fixed-header.style-absolute.style-2 .nav-list .item >a { line-height: 80px !important; color: var(--Text-2) !important;
}
.header .fixed-header.style-absolute .nav-list .item a { line-height: 80px;
}
.header .fixed-header .header-item.children { bottom: -20px; width: 100%;
}
.header .fixed-header .header-item.children img { width: 100%;
}
.header.has-item-bot { position: relative;
}
.header.has-item-bot .header-item { position: absolute; bottom: -5px; width: 100%; z-index: 3;
}
.header.has-item-bot .header-item img { width: 100%;
}
.header .header-inner { position: relative; z-index: 5; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;
}
.header .header-inner .header-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.header .header-inner .header-left .logo-site { padding-right: 68px; padding-top: 6px;
}
.header .header-inner .header-left .logo-site img { max-width: 208px;
}
.header .header-inner .nav-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 25px;
}
.header .header-inner .nav-list .item { position: relative;
}
.header .header-inner .nav-list .item a { font-family: "Work Sans", sans-serif; font-weight: 500; line-height: 120px; display: block; font-size: 18px;
}
.header .bg-custom-teofarm .icon{ background-color: #FFF !important;
}
.header .bg-custom-teofarm .icon img{ height: 35px;
}
.header .header-inner .nav-list .item:hover .sub-nav { visibility: visible; opacity: 1; -webkit-transform: perspective(500px) rotateY(0); -khtml-transform: perspective(500px) rotateY(0); -moz-transform: perspective(500px) rotateY(0); -ms-transform: perspective(500px) rotateY(0); -o-transform: perspective(500px) rotateY(0); transform: perspective(500px) rotateY(0);
}
.header .header-inner .nav-list .item.current-menu::before { top: 50%; transform: translateY(-50%); visibility: visible; opacity: 1;
}
.header .header-inner .nav-list .item .sub-nav { visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; min-width: 200px; transform: translateY(20px); z-index: 50; background-color: var(--Bg); border-radius: 8px; padding: 10px 0px 10px 20px; -webkit-transform: perspective(500px) rotateY(20deg); -khtml-transform: perspective(500px) rotateY(20deg); -moz-transform: perspective(500px) rotateY(20deg); -ms-transform: perspective(500px) rotateY(20deg); -o-transform: perspective(500px) rotateY(20deg); transform: perspective(500px) rotateY(20deg); transform-origin: -50% 0%; -webkit-box-shadow: 0px 10px 40px 0px rgba(27, 26, 26, 0.09); -khtml-box-shadow: 0px 10px 40px 0px rgba(27, 26, 26, 0.09); -moz-box-shadow: 0px 10px 40px 0px rgba(27, 26, 26, 0.09); -ms-box-shadow: 0px 10px 40px 0px rgba(27, 26, 26, 0.09); -o-box-shadow: 0px 10px 40px 0px rgba(27, 26, 26, 0.09); box-shadow: 0px 10px 40px 0px rgba(27, 26, 26, 0.09); -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1); -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1); -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1); -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1); -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1); transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
}
.header .header-inner .nav-list .item .sub-nav li.current-item a { color: var(--Secondary);
}
.header .header-inner .nav-list .item .sub-nav li.current-item a span::before { width: 100%;
}
.header .header-inner .nav-list .item .sub-nav li a { display: inline-block; line-height: 40px; font-size: 15px; color: var(--White); width: 100%;
}
.header .header-inner .nav-list .item .sub-nav li a span { position: relative;
}
.header .header-inner .nav-list .item .sub-nav li a span::before { content: ""; position: absolute; left: auto; right: 0; bottom: -2px; height: 1px; width: 0%; background-color: var(--Secondary); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header .header-inner .nav-list .item .sub-nav li a:hover { color: var(--Secondary);
}
.header .header-inner .nav-list .item .sub-nav li a:hover span::before { left: 0; right: auto; width: 100%;
}
.header .header-inner .header-right { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 43px; padding-right: 12px;
}
.header .header-inner .header-right .icon-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.header .header-inner .header-right .icon-wrap .icon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; border: 1px solid var(--Border); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header .header-inner .header-right .icon-wrap .icon i { color: var(--Primary);
}
.header .header-inner .header-right .icon-wrap .icon:hover { background-color: var(--Bg-1); border-color: var(--Bg-1);
}
.header .header-inner .header-right .icon-wrap .icon.wg-bag { position: relative;
}
.header .header-inner .header-right .icon-wrap .icon.wg-bag i { font-size: 24px;
}
.header .header-inner .header-right .icon-wrap .icon.wg-bag::after { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; content: "3"; position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: var(--Secondary); color: var(--Text-5); font-weight: 600; font-size: 14px; top: -9px; right: -7px;
}
.header .header-inner .header-right .wg-welcome { width: 60px; height: 59px; border-radius: 50%; background-color: var(--Primary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header .header-inner .header-right .wg-welcome:hover { background-color: var(--Secondary);
}
.header .header-inner .header-right .wg-welcome:hover i { color: var(--Primary);
}
.header .header-inner .header-right .wg-welcome i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--White);
}
.header.style-2 { padding: 0px;
}
.header.style-2 .mobile-button span { background-color: var(--White);
}
.header.style-2 .mobile-button::after { background-color: var(--White);
}
.header.style-2 .mobile-button::before { background-color: var(--White);
}
.header.style-2 .header-left { padding-left: 18px;
}
.header.style-2 .header-left .logo { display: none; max-width: 220px;
}
.header.style-2 .header-left .nav-list { gap: 41px;
}
.header.style-2 .header-left .nav-list .item >a { color: var(--White); line-height: 110px; font-size: 16px;
}
.header.style-2 .header-right { padding: 0px; gap: 37px;
}
.header.style-2 .header-right .icon-wrap { gap: 11px;
}
.header.style-2 .header-right .icon-wrap .icon { background-color: var(--Primary); border-color: var(--Primary);
}
.header.style-2 .header-right .icon-wrap .icon i { color: var(--White);
}
.header.style-2 .header-right .icon-wrap .icon:hover { background-color: var(--Secondary); border-color: var(--Secondary);
}
.header.style-3 .header-inner .header-right { padding-right: 0px; gap: 76px;
}
.header.style-3 .header-inner .header-right .contact-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 25px;
}
.header.style-3 .header-inner .header-right .contact-wrap .icon i { color: var(--White);
}
.header.style-3 .header-inner .header-right .contact-wrap .sub { color: var(--Text-4); font-size: 23px;
}
.header.style-3 .header-inner .header-right .contact-wrap .number { font-weight: 600; font-size: 23px; color: var(--Primary);
}
.header.style-3 .header-inner .header-right .contact-wrap .contact { display: flex; flex-direction: column; gap: 10px;
}
.header.style-4 .header-inner a { font-size: 18px; font-weight: 600; color: var(--Text-2); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 13px;
}
.header.style-4 .header-inner a:hover { color: var(--Text-4);
}
.header.style-4 .header-inner a i { color: var(--Text-4);
}
.header.style-4 .header-inner a.wg-category .fa-angle-down { color: var(--Text-2);
}
.header.scrollHeader { position: sticky; z-index: 99999; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header.scrollHeader::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 80%; background-color: var(--White);
} .mobile-button { position: relative; width: 26px; height: 26px; background-color: transparent; cursor: pointer; display: none;
}
.mobile-button span { position: absolute; width: 100%; height: 2px; left: 0; top: 12px; background-color: var(--Primary);
}
.mobile-button::before { content: ""; position: absolute; top: 5px; height: 2px; width: 100%; left: 0; background-color: var(--Primary);
}
.mobile-button::after { content: ""; position: absolute; bottom: 5px; height: 2px; width: 100%; left: 0; background-color: var(--Primary);
} .mobile-nav-wrap { position: fixed; left: 0; top: 0; bottom: 0; width: 100%; z-index: 9999999; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.mobile-nav-wrap.active { opacity: 1; visibility: visible;
}
.mobile-nav-wrap.active .inner-mobile-nav { left: 0 !important;
}
.mobile-nav-wrap .group-icon { display: flex; align-items: center; gap: 10px;
}
.mobile-nav-wrap .group-icon .site-nav-icon { padding: 0 15px; line-height: 35px; border: 1px solid #f2f2f2; gap: 8px; background-color: #f2f2f2; color: var(--main); border-radius: 3px; display: inline-flex; align-items: center; font-weight: 500;
}
.mobile-nav-wrap .group-icon .site-nav-icon i { font-size: 14px;
}
.mobile-nav-wrap .overlay-mobile-nav { z-index: 300; content: ""; position: fixed; left: 0; top: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%); width: 100%; height: 100%; z-index: 1000;
}
.mobile-nav-wrap .inner-mobile-nav { z-index: 300; position: fixed; padding: 15px; z-index: 1001; height: 100%; width: 320px; background-color: var(--Primary); left: -320px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
}
.mobile-nav-wrap .inner-mobile-nav .logo { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 40px;
}
.mobile-nav-wrap .inner-mobile-nav .logo img { max-width: 173px; filter: brightness(0) invert(1);
}
.mobile-nav-wrap .inner-mobile-nav .logo .mobile-nav-close { top: 20px; right: 20px; position: absolute; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--White);
}
.mobile-nav-wrap .inner-mobile-nav .logo .mobile-nav-close:hover { color: var(--Secondary);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile { padding-bottom: 10px; padding-top: 10px;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile a { font-family: "Work Sans", sans-serif; font-weight: 500; color: var(--White);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile.active .item-menu-mobile { color: var(--Secondary);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile.active i { transform: rotate(-180deg);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .item-menu-mobile { justify-content: space-between; display: flex; margin-bottom: 15px; position: relative; transition-timing-function: linear; font-size: 18px;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .item-menu-mobile:hover { color: var(--Secondary);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .item-menu-mobile:hover i { color: var(--Secondary);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .item-menu-mobile.current { color: var(--Secondary);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .item-menu-mobile i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 22px;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .sub-menu-mobile { display: none;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .sub-menu-mobile .menu-item a { padding-left: 15px; display: block; line-height: 40px;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .sub-menu-mobile .menu-item a::before { content: "\e90e"; position: relative; top: 2px; left: -10px; font-family: "icomoon"; color: var(--Secondary); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .sub-menu-mobile .menu-item a:hover { color: var(--Secondary);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .sub-menu-mobile .menu-item a:hover::before { left: -5px; visibility: visible; opacity: 1;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .sub-menu-mobile .menu-item.current a { color: var(--Secondary);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .menu-item-has-children-mobile .sub-menu-mobile .menu-item.current a::before { left: -5px; visibility: visible; opacity: 1;
}
.mobile-nav-wrap .inner-mobile-nav .infor-list { margin-bottom: 30px;
}
.mobile-nav-wrap .inner-mobile-nav .infor-list li a { color: var(--White);
}
.mobile-nav-wrap .inner-mobile-nav .infor-list li:not(:last-child) { margin-bottom: 10px;
}
.mobile-nav-wrap .inner-mobile-nav .infor-list li h5 { font-size: 16px; line-height: 22px; color: var(--White); text-transform: uppercase;
}
.mobile-nav-wrap .inner-mobile-nav .infor-list li p { font-size: 14px; line-height: 20px; color: var(--White);
} .box-welcome { position: fixed; z-index: 999; width: 100%; height: 100%; top: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0;
}
.box-welcome .tf-overlay { z-index: 100; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute;
}
.box-welcome.active { visibility: visible; opacity: 1;
}
.box-welcome.active .welcome-wrap { visibility: visible; opacity: 1; transform: translateX(0px);
} .welcome-wrap { position: fixed; right: 90px; top: 220px; width: 447px; background-color: var(--Bg-11); z-index: 100; border-radius: 20px; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0; transform: translateX(100px);
}
.welcome-wrap::after { content: ""; position: absolute; height: 100%; width: 100%; right: 0px; top: 0px; background: linear-gradient(to top, #0d401c, #1c6932); z-index: 51;
}
.welcome-wrap .content { position: relative; z-index: 52; right: 0px; top: 0px; padding: 55px 35px;
}
.welcome-wrap .content .btn-close-welcome { width: 34px; height: 34px; position: absolute; top: 22px; right: 23px; cursor: pointer; background-color: var(--Primary); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; pointer-events: all;
}
.welcome-wrap .content .btn-close-welcome i { color: var(--White);
}
.welcome-wrap .content .btn-close-welcome:hover { background-color: var(--Secondary);
}
.welcome-wrap .content .title { color: var(--Secondary);
}
.welcome-wrap .content .text { color: var(--Text-3); margin-bottom: 20px; padding-bottom: 20px; position: relative;
}
.welcome-wrap .content .text::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; border-bottom: 1px dashed var(--Border-5);
}
.welcome-wrap .content .infor-list { margin-bottom: 20px;
}
.welcome-wrap .content .infor-list .item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px;
}
.welcome-wrap .content .infor-list .item:not(:last-child) { margin-bottom: 15px;
}
.welcome-wrap .content .infor-list .item i { color: var(--Secondary);
}
.welcome-wrap .content .infor-list .item p { font-family: "Nunito Sans", sans-serif; color: var(--White);
}
.welcome-wrap .content .wg-social .list { justify-content: flex-start;
} .header-wrap { width: 100%; z-index: 3; top: 48px; padding: 0px 30px;
} .bg-page { top: 0; width: 100%;
}
.bg-page img { width: 100%; object-fit: cover; object-position: bottom; height: 824px;
} .tf-topbar-shop { background-color: #FFF !important; position: relative; z-index: 201; padding: 7px 0px 12px;
}
.tf-topbar-shop .s-img-item { position: absolute; width: 100%;
}
.tf-topbar-shop .s-img-item img { width: 100%;
}
.tf-topbar-shop .s-img-item.item-1 { bottom: -3px; left: 0; z-index: 1;
}
.tf-topbar-shop .s-img-item.item-1 img { width: 100%; height: 10px; object-fit: cover; object-position: top;
}
.tf-topbar-shop .topbar-inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2;
}
.tf-topbar-shop .topbar-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 14px;
}
.tf-topbar-shop .topbar-left .icon { width: 38px; height: 38px; background-color: var(--Border-5); transform: rotate(-15deg);
}
.tf-topbar-shop .topbar-left .icon i { animation: tf-ani-tada 2s infinite; color: var(--Secondary);
}
.tf-topbar-shop .topbar-left p { letter-spacing: 0.1px; color: var(--White);
}
.tf-topbar-shop .topbar-right ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.tf-topbar-shop .topbar-right ul li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 14px;
}
.tf-topbar-shop .topbar-right ul li:not(:last-child) { padding-right: 50px; position: relative;
}
.tf-topbar-shop .topbar-right ul li:not(:last-child)::after { position: absolute; content: ""; width: 1px; height: 33px; right: 25px; top: -3px; background-color: var(--Border-5);
}
.tf-topbar-shop .topbar-right ul li .icon i { color: var(--Secondary);
}
.tf-topbar-shop .topbar-right ul li a { color: var(--White); font-size: 16px; line-height: 26px;
}
.tf-topbar-shop::after { content: ""; background-image: -moz-linear-gradient(-92deg, rgb(28, 105, 50) 0%, rgb(21, 85, 39) 38%, rgb(13, 64, 28) 100%); background-image: -webkit-linear-gradient(-92deg, rgb(28, 105, 50) 0%, rgb(21, 85, 39) 38%, rgb(13, 64, 28) 100%); background-image: -ms-linear-gradient(-92deg, rgb(28, 105, 50) 0%, rgb(21, 85, 39) 38%, rgb(13, 64, 28) 100%); position: absolute; width: 100%; height: 100%; top: 0; left: 0;
} .tf-header-shop { padding-top: 25px; position: relative; z-index: 200;
}
.tf-header-shop .s-img-item { position: absolute; width: 100%; width: 100%;
}
.tf-header-shop .s-img-item img { height: 10px; width: 100%; object-fit: cover; object-position: bottom;
}
.tf-header-shop .s-img-item.item-1 { bottom: -10px; left: 0;
}
.tf-header-shop .icon-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 13px; margin-left: 84px;
}
.tf-header-shop .icon-wrap .icon { width: 50px; height: 50px; background-color: transparent; border: 1px solid var(--Border-12);
}
.tf-header-shop .icon-wrap .icon i { font-size: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.tf-header-shop .icon-wrap .icon:hover { background-color: var(--Primary);
}
.tf-header-shop .icon-wrap .icon:hover i { color: var(--White);
}
.tf-header-shop .icon-wrap .icon.wg-bag { position: relative; margin-right: 7px;
}
.tf-header-shop .icon-wrap .icon.wg-bag i { font-size: 24px;
}
.tf-header-shop .icon-wrap .icon.wg-bag::after { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; content: "3"; position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: var(--Secondary); color: var(--Text-5); font-weight: 600; font-size: 14px; top: -9px; right: -7px;
}
.tf-header-shop .wg-category { font-size: 18px; font-weight: 600; color: var(--Text-2); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 13px;
}
.tf-header-shop .wg-category i { color: var(--Text-4);
}
.tf-header-shop .header-topbar { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--Border); padding-bottom: 22px;
}
.tf-header-shop .header-topbar .logo-site img { max-width: 209px; width: 100%;
}
.tf-header-shop .header-topbar .search-product { width: 100%; flex-shrink: 0; max-width: 467px;
}
.tf-header-shop .header-topbar .header-search { display: none;
}
.tf-header-shop .header-topbar .wg-category { display: none;
}
.tf-header-shop .header-topbar .header-right { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; flex-grow: 1;
}
.tf-header-shop .header-topbar .header-right .call-us { margin-left: 60px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 24px;
}
.tf-header-shop .header-topbar .header-right .call-us .content p { font-size: 23px; line-height: 35px; color: var(--Text-4);
}
.tf-header-shop .header-topbar .header-right .call-us .content a { font-size: 23px; line-height: 35px; font-weight: 600; color: var(--Text-2);
}
.tf-header-shop .your-cart { margin-left: 23px;
}
.tf-header-shop .your-cart .total { color: var(--Text-2);
}
.tf-header-shop .form-search input { background-color: var(--Bg-17); padding: 12px 15px 9px 25px;
}
.tf-header-shop .form-search input::placeholder { font-size: 14px; line-height: 26px; letter-spacing: 0.2px;
}
.tf-header-shop .form-search .btn-search { background-color: transparent; right: 10px;
}
.tf-header-shop .form-search .btn-search i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--Text-2); font-size: 16px;
}
.tf-header-shop .form-search .btn-search:hover i { color: var(--Secondary);
}
.tf-header-shop .header-inner .main-nav .item >a { line-height: 81px; font-size: 16px;
}
.tf-header-shop .header-inner .header-right { padding: unset;
} /*------------ footer ---------------- */
.footer { background-color: var(--Primary); padding-top: 123px; margin-top: 20px; position: relative;
}
.footer .footer-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--Border-5); padding-bottom: 30px; margin-bottom: 63px;
}
.footer .footer-top .footer-left .logo img { width: 100%; max-width: 225px;
}
.footer .footer-top .footer-center p { color: var(--White); font-size: 35px; line-height: 35px;
}
.footer .footer-top .footer-right { position: relative; z-index: 2;
}
.footer .footer-inner { margin-bottom: 43px; position: relative; z-index: 5;
}
.footer .footer-inner .footer-inner-wrap.open .footer-title-mobile::before { opacity: 0;
}
.footer .footer-inner .footer-inner-wrap.open .footer-title-mobile::after { transform: translate(0%, -50%) rotate(180deg);
}
.footer .footer-inner .footer-inner-wrap .footer-title-mobile { display: none; position: relative; cursor: pointer;
}
.footer .footer-inner .footer-inner-wrap .footer-title-mobile::after { position: absolute; content: ""; right: 10px; top: 50%; transform: translateY(-50%); width: 12px; height: 1px; background-color: var(--White); transition: 0.25s ease-in-out;
}
.footer .footer-inner .footer-inner-wrap .footer-title-mobile::before { position: absolute; content: ""; right: 15px; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 12px; background-color: var(--White); transition: 0.25s ease-in-out;
}
.footer .footer-inner .footer-inner-wrap .footer-title { color: var(--White); font-weight: 600; margin-bottom: 31px;
}
.footer .footer-inner .footer-inner-wrap .footer-title.mb-23 { margin-bottom: 23px;
}
.footer .footer-inner .footer-inner-wrap .footer-title.mb-28 { margin-bottom: 28px;
}
.footer .footer-inner .footer-inner-wrap .contact-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 16px;
}
.footer .footer-inner .footer-inner-wrap .contact-list li:not(:last-child) { margin-bottom: 14px;
}
.footer .footer-inner .footer-inner-wrap .contact-list li i { color: var(--White);
}
.footer .footer-inner .footer-inner-wrap .contact-list li p { color: var(--White); font-family: "Nunito Sans", sans-serif; letter-spacing: 0.1px;
}
.footer .footer-inner .footer-inner-wrap .contact-list li p.address { letter-spacing: 0.2px;
}
.footer .footer-inner .footer-inner-wrap .new-post-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 19px;
}
.footer .footer-inner .footer-inner-wrap .new-post-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; gap: 23px;
}
.footer .footer-inner .footer-inner-wrap .new-post-list li .image { max-width: 63px; border-radius: 10px; overflow: hidden;
}
.footer .footer-inner .footer-inner-wrap .new-post-list li .content { flex-direction: column; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 8px;
}
.footer .footer-inner .footer-inner-wrap .new-post-list li .content .title-post { color: var(--White); font-weight: 500; font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 26px;
}
.footer .footer-inner .footer-inner-wrap .new-post-list li .content p { font-family: "Nunito Sans", sans-serif; color: var(--Secondary); font-size: 14px;
}
.footer .footer-inner .footer-inner-wrap .link-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 20px;
}
.footer .footer-inner .footer-inner-wrap .link-list li { position: relative; overflow: hidden;
}
.footer .footer-inner .footer-inner-wrap .link-list li a { display: inline-flex; color: var(--White); font-family: "Nunito Sans", sans-serif; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); position: relative; font-size: 16px; overflow: hidden;
}
.footer .footer-inner .footer-inner-wrap .link-list li a:hover { padding-left: 22px; color: var(--Secondary);
}
.footer .footer-inner .footer-inner-wrap .link-list li a:hover svg { left: 0px; visibility: visible; opacity: 1;
}
.footer .footer-inner .footer-inner-wrap .link-list li a:hover svg path { fill: var(--Secondary);
}
.footer .footer-inner .footer-inner-wrap .link-list li svg { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); visibility: hidden; opacity: 0;
}
.footer .footer-inner .footer-inner-wrap .link-list li svg path { fill: var(--White);
}
.footer .footer-bottom { border-top: 1px dashed var(--Border-5); padding-top: 29px; padding-bottom: 29px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; gap: 20px; flex-wrap: wrap;
}
.footer .footer-bottom .no-copy { color: var(--White); text-align: center;
}
.footer .footer-bottom .no-copy a { position: relative; color: var(--Secondary); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.footer .footer-bottom .no-copy a:hover::after { width: 100%; left: 0; right: auto;
}
.footer .footer-bottom .no-copy a:after { content: ""; position: absolute; left: auto; right: 0; bottom: 0; width: 0; background-color: var(--Secondary); height: 1px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.footer .footer-bottom .policy-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 10px 37px; flex-wrap: wrap;
}
.footer .footer-bottom .policy-list li { position: relative;
}
.footer .footer-bottom .policy-list li:not(:last-child)::after { content: "\e90e"; font-family: "icomoon"; position: absolute; right: -25px; color: var(--Secondary);
}
.footer .footer-bottom .policy-list li a { color: var(--White); font-family: "Nunito Sans", sans-serif; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 16px;
}
.footer .footer-bottom .policy-list li a:hover { color: var(--Secondary);
}
.footer .img-item { position: absolute;
}
.footer .img-item.item-1 { top: -22px; width: 100%; left: 0; max-width: unset !important;
}
.footer .img-item.item-1 img { height: 23px; object-fit: cover; width: 100%;
}
.footer .img-item.item-2 { bottom: 0; right: 0; z-index: 0;
}
.footer.style-2 { padding-top: 106px; z-index: 1; position: relative;
}
.footer.style-2 .img-item.item-1 { top: -10px; width: 100%; max-width: unset;
}
.footer.style-2 .img-item.item-1 img { max-width: unset; width: 100%; height: 73px;
}
.footer.style-2 .footer-top { padding-bottom: 39px; margin-bottom: 64px; border: unset; position: relative;
}
.footer.style-2 .footer-top::after { content: ""; max-width: 1290px; width: 100%; left: 50%; transform: translateX(-50%); position: absolute; bottom: 0; border-bottom: 1px dashed var(--Border-5);
}
.footer.style-2 .footer-top .footer-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 44px;
}
.footer.style-2 .footer-top .footer-left .icon { width: 87px; height: 87px; transform: rotate(-30deg);
}
.footer.style-2 .footer-top .footer-left .icon i { animation: tf-ani-tada 2s infinite; font-size: 31px; color: var(--White);
}
.footer.style-2 .footer-top .footer-left .content { display: flex; flex-direction: column; gap: 10px;
}
.footer.style-2 .footer-top .footer-left .content .title { color: var(--White);
}
.footer.style-2 .footer-top .footer-left .content .sub { color: var(--White);
}
.footer.style-2 .footer-top .footer-right { max-width: 543px; height: 100%; margin-left: auto; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.footer.style-2 .footer-top .footer-right input { padding: 14px 53px 12px 30px;
}
.footer.style-2 .footer-top .footer-right .btn-send { right: 17px; top: 8px;
}
.footer.style-2 .footer-inner { margin-bottom: 59px;
}
.footer.style-2 .footer-inner .footer-title { padding-bottom: 14px; margin-bottom: 29px; position: relative;
}
.footer.style-2 .footer-inner .footer-title::after { content: ""; position: absolute; width: 60px; height: 3px; background-color: var(--Secondary); bottom: 0; left: 0;
}
.footer.style-2 .footer-inner .footer-inner-wrap .logo { max-width: 180px; margin-bottom: 32px;
}
.footer.style-2 .footer-inner .footer-inner-wrap .text { color: var(--White); margin-bottom: 32px;
}
.footer.style-2 .footer-inner .footer-inner-wrap .wg-social ul { justify-content: flex-start; gap: 8px;
}
.footer.style-2 .footer-inner .footer-inner-wrap .wg-social li a { width: 44px; height: 44px;
}
.footer.style-2 .footer-bottom { padding-bottom: 33px;
} /*------------ tabs ---------------- */
.wg-tabs .menu-tab { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 41px; margin-bottom: 35px; white-space: nowrap;
}
.wg-tabs .menu-tab.mb-61 { margin-bottom: 61px;
}
.wg-tabs .menu-tab.mb-65 { margin-bottom: 62px;
}
.wg-tabs .menu-tab .item { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.wg-tabs .menu-tab .item a { padding-bottom: 15px; position: relative; font-size: 18px; font-weight: 500; font-family: "Work Sans", sans-serif; display: block;
}
.wg-tabs .menu-tab .item a::after { content: ""; position: absolute; bottom: 0px; left: auto; right: 0; height: 2px; width: 0; background-color: var(--Secondary); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.wg-tabs .menu-tab .item a:hover { color: var(--Text-4);
}
.wg-tabs .menu-tab .item a:hover::after { left: 0; right: auto; width: 100%;
}
.wg-tabs .menu-tab .item.active a { color: var(--Text-4);
}
.wg-tabs .menu-tab .item.active a::after { width: 100%;
}
.wg-tabs .widget-content-tab .widget-content-inner { visibility: hidden; opacity: 0;
}
.wg-tabs .widget-content-tab .widget-content-inner.active { visibility: visible; opacity: 1;
}
.wg-tabs.style-2 { margin-top: 29px; border-radius: 20px; border: 1px solid var(--Border); padding: 0px 130px 72px;
}
.wg-tabs.style-2 .menu-tab { padding: 0px 20px; margin-top: -32px; margin-bottom: 38px; gap: 14px; background: white;
}
.wg-tabs.style-2 .menu-tab .item a { font-size: 16px; background-color: var(--Bg-9); color: var(--Primary); border-radius: 27.5px; padding: 20px 56px 20px 52px;
}
.wg-tabs.style-2 .menu-tab .item a::after { content: none;
}
.wg-tabs.style-2 .menu-tab .item a:hover { background-color: var(--Primary); color: var(--White);
}
.wg-tabs.style-2 .menu-tab .item.active a { background-color: var(--Primary); color: var(--White);
}
.wg-tabs.style-2 .widget-content-inner { text-align: center;
}
.wg-tabs.style-2 .widget-content-inner p { letter-spacing: 0.1px;
}
.wg-tabs.style-2 .widget-content-inner .text-1 { margin-bottom: 16px;
}
.wg-tabs.style-3 .menu-tab { justify-content: flex-start;
}
.wg-tabs.style-3 .menu-tab .item.active .btn-tab { color: var(--Secondary);
}
.wg-tabs.style-3 .menu-tab .item .btn-tab { color: var(--White);
}
.wg-tabs.style-3 .menu-tab .item .btn-tab::after { content: none;
}
.wg-tabs.style-3 .menu-tab .item .btn-tab:hover { color: var(--Secondary);
}
.wg-tabs.style-4 .menu-tab { flex-direction: column; margin-bottom: 0px; gap: 10px; align-items: start;
}
.wg-tabs.style-4 .menu-tab li { width: 100%;
}
.wg-tabs.style-4 .menu-tab li a { font-family: "Work Sans", sans-serif; color: var(--White); padding-bottom: 0px;
}
.wg-tabs.style-4 .menu-tab li a:hover { color: var(--Secondary); padding-left: 24px;
}
.wg-tabs.style-4 .menu-tab li a:hover::before { left: 0; visibility: visible; opacity: 1; transition-delay: 0.1s;
}
.wg-tabs.style-4 .menu-tab li a::after { content: none;
}
.wg-tabs.style-4 .menu-tab li a::before { position: absolute; font-size: 25px; color: var(--Secondary); content: "\e926"; font-family: "icomoon"; top: 50%; left: -18px; transform: translateY(-50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0;
}
.wg-tabs.style-4 .menu-tab li.active a { padding-left: 24px; color: var(--Secondary);
}
.wg-tabs.style-4 .menu-tab li.active a::before { left: -8px; visibility: visible; opacity: 1;
}
.wg-tabs.style-4 .menu-tab li:not(:last-child) { padding-bottom: 21px; border-bottom: 1px dashed var(--Border-5);
}
.wg-tabs.style-4 .menu-tab li:not(:first-child) { padding-top: 10px;
}
.wg-tabs.style-5 { border-radius: 20px 20px 10px 10px; overflow: hidden;
}
.wg-tabs.style-5 .menu-tab { padding: 0px; margin-bottom: 0px; gap: 0px;
}
.wg-tabs.style-5 .menu-tab .item { width: 100%;
}
.wg-tabs.style-5 .menu-tab .item:not(:last-child) { border-right: 1px solid var(--White);
}
.wg-tabs.style-5 .menu-tab .item.active a { background-color: var(--Primary); color: var(--White);
}
.wg-tabs.style-5 .menu-tab .item a { padding-bottom: 0px; color: var(--Bg-6); width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: var(--Secondary); padding: 16px 0px 17px; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 16px;
}
.wg-tabs.style-5 .menu-tab .item a::after { content: none;
}
.wg-tabs.style-5 .widget-content-tab { background-color: var(--Bg-8); padding: 31px 30px 31px 31px;
}
.wg-tabs.style-5 .widget-content-tab p { letter-spacing: 0.2px;
} /*------------ button ---------------- */
.tf-btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 34px; background-color: var(--Primary); color: var(--White); padding: 6px 5px 6px 35px; border-radius: 28px; position: relative; z-index: 1; width: max-content; font-weight: 500; font-size: 16px; font-family: "Work Sans", sans-serif; overflow: hidden;
}
.tf-btn.gap-37 { gap: 37px;
}
.tf-btn.gap-34 { gap: 34px;
}
.tf-btn.gap-30 { gap: 30px;
}
.tf-btn .icon { width: 43px; height: 43px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background-color: var(--Secondary); border-radius: 50%; position: relative;
}
.tf-btn .icon i { position: relative; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--Text-6); font-size: 23px;
}
.tf-btn .icon i.fs-14 { font-size: 14px;
}
.tf-btn .icon::before { content: none; position: absolute; top: 0; left: 0; border-radius: 50%; width: 0%; height: 100%; z-index: 0; background-color: var(--Text-6); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;
}
.tf-btn.style-2 { padding: 20px 35px; width: max-content; gap: 15px; background-color: var(--White); color: var(--Text-6); border: 1px solid var(--Border-4); font-weight: 500; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.tf-btn.style-2::after { content: none;
}
.tf-btn.style-2:hover { box-shadow: 0px 67px 2px 0px var(--Secondary) inset; border-color: var(--Secondary);
}
.tf-btn.style-2.type-2 { background-color: var(--Text-6); color: var(--White); padding: 16px 27px; font-weight: 400; gap: 11px;
}
.tf-btn.style-2.type-3 { background-color: var(--Bg-6); border-color: var(--Bg-6); color: var(--White); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.tf-btn.style-2.type-3:hover { box-shadow: 0px 67px 2px 0px var(--Text-4) inset; border-color: var(--Text-4);
}
.tf-btn:hover { background-color: transparent;
}
.tf-btn:hover .text-style { color: var(--White); transform: translateX(5px);
}
.tf-btn:hover::after { transform: scale(30); color: var(--White); !important;
}
.tf-btn .text-style { color: var(--White); transform: translateX(0px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.tf-btn .text-style.cl-primary { color: var(--White);
}
.tf-btn.scale-40:hover::after { transform: scale(40);
}
.tf-btn.scale-50:hover { transition-delay: 0.1s;
}
.tf-btn.scale-50:hover::after { transform: scale(50);
}
.tf-btn::after { content: ""; position: absolute; width: 22px; height: 22px; right: 14px; top: 17px; border-radius: 28px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; z-index: -1; background-color: var(--Secondary); transform: scale(1);
}
.tf-btn.full { width: 100%; justify-content: space-between;
}
.tf-btn.bg-white { background-color: var(--White); color: var(--Text-2);
}
.tf-btn.gap-35 { gap: 35px;
}
.tf-btn.style-3 { background-color: var(--Bg-6); padding: 19px 35px 18px 35px;
}
.tf-btn.style-3:hover { background-color: transparent;
}
.tf-btn.style-3.pd-defalt { padding: 6px 5px 6px 35px;
} .tf-btn-read { display: block; padding-bottom: 10px; position: relative; font-family: "Work Sans", sans-serif; color: var(--Primary); width: max-content; font-weight: 500; letter-spacing: 0.5px;
}
.tf-btn-read:hover { color: var(--Secondary);
}
.tf-btn-read:hover::after { width: 0%; left: auto; right: 0;
}
.tf-btn-read.hover-text-4:hover { color: var(--Text-4);
}
.tf-btn-read::after { content: ""; position: absolute; bottom: 0; left: 0; right: auto; height: 2px; width: 100%; background-color: var(--Secondary); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.tf-btn-read.text-white { color: var(--White);
} /*------------ range slider ---------------- */
/*range-slider ---------------------*/
.range-slider #range-two-val { margin-bottom: 10px; height: 1px; box-shadow: none; border: 0; background-color: var(--Border-12); margin-bottom: 21px;
}
.range-slider #range-two-val .noUi-connects .noUi-connect { background-color: var(--Primary);
}
.range-slider #range-two-val .noUi-origin .noUi-handle { cursor: pointer; width: 9px; height: 9px; border-radius: 50%; background-color: var(--Text-4); border: none; box-shadow: none; top: 0; right: -9px; transform: translate(-50%, -50%);
}
.range-slider #range-two-val .noUi-origin .noUi-handle:active { width: 17px !important; height: 17px !important; border: 4px solid var(--Text-4) !important; right: -17px !important;
}
.range-slider #range-two-val .noUi-origin .noUi-handle::after, .range-slider #range-two-val .noUi-origin .noUi-handle::before { display: none;
}
.range-slider .bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between;
}
.range-slider .bottom .price-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; gap: 2px;
}
.range-slider .bottom .price-wrap .text { font-size: 16px; line-height: 26px;
}
.range-slider .bottom .price-wrap .value { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; font-family: "Work Sans", sans-serif; position: relative;
}
.range-slider .bottom .price-wrap .line { display: block; width: 15px; height: 1px; background-color: var(--Text);
}
.range-slider .bottom .btn-filter { line-height: 26px; padding-bottom: 0px;
}
.range-slider .bottom .btn-filter::after { background-color: var(--Text-2); bottom: 3px;
} /*------------ form ---------------- */
form { position: relative; z-index: 30;
}
form textarea,
form input[type=text],
form input[type=password],
form input[type=datetime],
form input[type=datetime-local],
form input[type=date],
form input[type=month],
form input[type=time],
form input[type=week],
form input[type=number],
form input[type=email],
form input[type=url],
form input[type=search],
form input[type=tel],
form input[type=color] { outline: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 100%; padding: 8px 19px; font-size: 14px; font-weight: 400; line-height: 28px; background: var(--Bg-3); border: 1px solid transparent; border-radius: 27.5px; color: var(--Text-2); overflow: hidden; margin-bottom: 0;
}
form textarea::placeholder,
form input[type=text]::placeholder,
form input[type=password]::placeholder,
form input[type=datetime]::placeholder,
form input[type=datetime-local]::placeholder,
form input[type=date]::placeholder,
form input[type=month]::placeholder,
form input[type=time]::placeholder,
form input[type=week]::placeholder,
form input[type=number]::placeholder,
form input[type=email]::placeholder,
form input[type=url]::placeholder,
form input[type=search]::placeholder,
form input[type=tel]::placeholder,
form input[type=color]::placeholder { font-size: 16px; font-weight: 400; line-height: 28px; color: var(--Soft-Text); font-family: "Nunito Sans", sans-serif;
}
form textarea.style-1,
form input[type=text].style-1,
form input[type=password].style-1,
form input[type=datetime].style-1,
form input[type=datetime-local].style-1,
form input[type=date].style-1,
form input[type=month].style-1,
form input[type=time].style-1,
form input[type=week].style-1,
form input[type=number].style-1,
form input[type=email].style-1,
form input[type=url].style-1,
form input[type=search].style-1,
form input[type=tel].style-1,
form input[type=color].style-1 { background-color: var(--Bg-4) !important; color: var(--White); font-weight: 400; padding: 15px 19px 10px 19px;
}
form textarea.style-1::placeholder,
form input[type=text].style-1::placeholder,
form input[type=password].style-1::placeholder,
form input[type=datetime].style-1::placeholder,
form input[type=datetime-local].style-1::placeholder,
form input[type=date].style-1::placeholder,
form input[type=month].style-1::placeholder,
form input[type=time].style-1::placeholder,
form input[type=week].style-1::placeholder,
form input[type=number].style-1::placeholder,
form input[type=email].style-1::placeholder,
form input[type=url].style-1::placeholder,
form input[type=search].style-1::placeholder,
form input[type=tel].style-1::placeholder,
form input[type=color].style-1::placeholder { font-weight: 400;
}
form textarea.style-1:focus,
form input[type=text].style-1:focus,
form input[type=password].style-1:focus,
form input[type=datetime].style-1:focus,
form input[type=datetime-local].style-1:focus,
form input[type=date].style-1:focus,
form input[type=month].style-1:focus,
form input[type=time].style-1:focus,
form input[type=week].style-1:focus,
form input[type=number].style-1:focus,
form input[type=email].style-1:focus,
form input[type=url].style-1:focus,
form input[type=search].style-1:focus,
form input[type=tel].style-1:focus,
form input[type=color].style-1:focus { border: 1px solid transparent; background: transparent;
}
form textarea.style-2,
form input[type=text].style-2,
form input[type=password].style-2,
form input[type=datetime].style-2,
form input[type=datetime-local].style-2,
form input[type=date].style-2,
form input[type=month].style-2,
form input[type=time].style-2,
form input[type=week].style-2,
form input[type=number].style-2,
form input[type=url].style-2,
form input[type=search].style-2,
form input[type=tel].style-2,
form input[type=color].style-2 { background-color: var(--Bg-5) !important; color: var(--White); font-weight: 400; line-height: 25px; padding: 14px 19px;
}
form textarea.style-2::placeholder,
form input[type=text].style-2::placeholder,
form input[type=password].style-2::placeholder,
form input[type=datetime].style-2::placeholder,
form input[type=datetime-local].style-2::placeholder,
form input[type=date].style-2::placeholder,
form input[type=month].style-2::placeholder,
form input[type=time].style-2::placeholder,
form input[type=week].style-2::placeholder,
form input[type=number].style-2::placeholder,
form input[type=email].style-2::placeholder,
form input[type=url].style-2::placeholder,
form input[type=search].style-2::placeholder,
form input[type=tel].style-2::placeholder,
form input[type=color].style-2::placeholder { font-weight: 400;
}
form textarea.style-2:focus,
form input[type=text].style-2:focus,
form input[type=password].style-2:focus,
form input[type=datetime].style-2:focus,
form input[type=datetime-local].style-2:focus,
form input[type=date].style-2:focus,
form input[type=month].style-2:focus,
form input[type=time].style-2:focus,
form input[type=week].style-2:focus,
form input[type=number].style-2:focus,
form input[type=email].style-2:focus,
form input[type=url].style-2:focus,
form input[type=search].style-2:focus,
form input[type=tel].style-2:focus,
form input[type=color].style-2:focus { border: 1px solid transparent; background: transparent;
}
form textarea:focus,
form input[type=text]:focus,
form input[type=password]:focus,
form input[type=datetime]:focus,
form input[type=datetime-local]:focus,
form input[type=date]:focus,
form input[type=month]:focus,
form input[type=time]:focus,
form input[type=week]:focus,
form input[type=number]:focus,
form input[type=email]:focus,
form input[type=url]:focus,
form input[type=search]:focus,
form input[type=tel]:focus,
form input[type=color]:focus { border: 1px solid var(--Primary); background: var(--White);
}
form button,
form input[type=button],
form input[type=reset],
form input[type=submit] { background-color: transparent; overflow: hidden; padding: 0;
}
form textarea { height: 218px;
}
form .cols { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 22px 30px; width: 100%;
}
form .cols.cols-two >* { width: 50%;
}
form .cols.style-2 { gap: 15px;
}
form .cols.mb-15 { margin-bottom: 15px;
} fieldset { margin-bottom: 0px; width: 100%;
} .form-email { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: relative; width: 100%;
}
.form-email .btn-send { width: 43px; height: 43px; background: var(--Secondary); border-radius: 50%; position: absolute; right: 6px;
}
.form-email .btn-send i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--White);
}
.form-email .btn-send:hover i { color: var(--Primary);
}
.form-email.style-2 { flex-wrap: wrap;
}
.form-email.style-2 input { padding: 16px 19px 12px 18px !important;
}
.form-email.style-2 .email { margin-bottom: 16px;
}
.form-email.style-2 .tf-btn { padding: 6px 7px 6px 33px;
}
.form-email.style-3 input { background-color: var(--White);
}
.form-email.style-3 .btn-send { background-color: transparent;
}
.form-email.style-3 .btn-send i { color: var(--Text-4);
}
.form-email.style-4 input { background-color: var(--White); padding: 12px 19px; color: var(--Primary); font-family: "Nunito Sans", sans-serif; font-weight: 600;
}
.form-email.style-4 input:focus { border: 1px solid var(--White);
}
.form-email.style-4 input::placeholder { color: var(--Primary); font-family: "Nunito Sans", sans-serif; font-weight: 600;
}
.form-email.style-4 .btn-send { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.form-email.style-4 .btn-send:hover { background-color: var(--Text-4);
}
.form-email.style-4 .btn-send:hover i { color: var(--White);
}
.form-email.style-4 .btn-send i { color: var(--Bg-6);
} .checkbox-item.mb-10 { margin-bottom: 10px;
}
.checkbox-item label { padding-left: 32px; cursor: pointer; position: relative;
}
.checkbox-item label .checkbox-item { position: absolute; opacity: 0; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; background: var(--White) !important;
}
.checkbox-item label .checkbox-item:checked ~ .btn-checkbox { background-color: var(--Secondary);
}
.checkbox-item label .checkbox-item:checked ~ .btn-checkbox:after { display: block;
}
.checkbox-item label .checkbox-item:checked ~ .btn-radio:after { display: block;
}
.checkbox-item label .text { font-size: 16px; font-weight: 400; line-height: 19.6px; color: var(--White);
}
.checkbox-item label .btn-checkbox { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 19px; height: 20px; background-color: transparent; border: 2px solid var(--Secondary); border-radius: 50%;
}
.checkbox-item label .btn-checkbox:after { content: "\e9c5"; font-family: "icomoon" !important; position: absolute; font-size: 14px; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; color: var(--Text-2);
} .form-send-message .flat-alert { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 5px;
}
.form-send-message .flat-alert.msg-success { color: #ffffff;
}
.form-send-message .flat-alert.msg-success i { color: #ffffff;
}
.form-send-message .flat-alert.msg-error { color: #ffffff;
}
.form-send-message input,
.form-send-message textarea { background: var(--Border-3) !important; color: var(--White) !important; padding: 10px 19px !important;
}
.form-send-message input:focus,
.form-send-message textarea:focus { border: 1px solid var(--White) !important; background: var(--White) !important; color: var(--Text-2) !important;
}
.form-send-message select { width: 100%; padding: 20px 10px 19px 25px; letter-spacing: 1.2px; border: 1px solid var(--Primary); background: var(--Border-3) !important; color: var(--White); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 27.5px; position: relative;
}
.form-send-message select option { background-color: var(--Primary); border-radius: 20px;
}
.form-send-message select:focus { border-color: var(--Primary) !important;
}
.form-send-message select:focus.fieldset::after { transform: rotate(180deg);
}
.form-send-message select:focus-visible { outline: none;
}
.form-send-message fieldset.dropdown { position: relative;
}
.form-send-message fieldset.dropdown::after { content: "\e9c8"; position: absolute; font-family: "icomoon"; right: 17px; top: 17px; font-size: 16px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--White);
}
.form-send-message .checkbox-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 10px;
}
.form-send-message.style-2 .flat-alert.msg-success { color: #072010;
}
.form-send-message.style-2 .flat-alert.msg-success i { color: var(--Black);
}
.form-send-message.style-2 .flat-alert.msg-error { color: #072010;
}
.form-send-message.style-2 input,
.form-send-message.style-2 textarea { background: var(--Bg-10) !important; color: var(--Text-2) !important;
}
.form-send-message.style-2 input:focus,
.form-send-message.style-2 textarea:focus { border: 1px solid var(--Primary) !important; background: var(--White) !important;
}
.form-send-message.style-2 select { width: 100%; padding: 17px 10px 16px 16px; border: 1px solid var(--Bg-10); background: var(--Bg-10) !important; color: var(--Text-2);
}
.form-send-message.style-2 select.lt-sp-07 { letter-spacing: 0.7px;
}
.form-send-message.style-2 select option { background-color: var(--Bg-10);
}
.form-send-message.style-2 select:focus { border-color: var(--Primary) !important;
}
.form-send-message.style-2 select:focus-visible { outline: none;
}
.form-send-message.style-2 .checkbox-item .text { color: var(--Text-2);
}
.form-send-message.style-2 .checkbox-item .btn-checkbox { top: 40%;
}
.form-send-message.style-2 .checkbox-item .btn-checkbox::after { color: var(--Text-2);
}
.form-send-message.style-2 .checkbox-item .tf-btn { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
} .form-book .choose-date,
.form-book .choose-date-2 { position: relative;
}
.form-book .choose-date label,
.form-book .choose-date-2 label { position: absolute; left: 22px; top: 51%; letter-spacing: 0.5px; transform: translateY(-50%); color: var(--Text-2); z-index: 1;
}
.form-book .choose-date input,
.form-book .choose-date-2 input { position: relative; z-index: 0; color: transparent; padding: 15px 19px 11px 16px;
}
.form-book .choose-date input:focus,
.form-book .choose-date-2 input:focus { color: var(--Text-2); z-index: 2;
}
.form-book .choose-date.has-value label,
.form-book .choose-date-2.has-value label { z-index: -1; color: transparent;
}
.form-book .choose-date.has-value input,
.form-book .choose-date-2.has-value input { color: var(--Text-2);
}
.form-book fieldset.mb-15 { margin-bottom: 15px;
}
.form-book fieldset.mb-35 { margin-bottom: 35px;
}
.form-book fieldset input { background-color: var(--White); padding: 12px 19px;
}
.form-book fieldset input:focus { border-color: var(--White);
} input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;
} #subscribe-msg { color: var(--Color-11);
}
#subscribe-msg .notification_ok { font-weight: 500; color: var(--Color-11);
}
#subscribe-msg .notification_error { font-weight: 500; color: var(--Color-11);
} /*------------ slider ---------------- */
.page-title-home-1 { position: relative;
}
.page-title-home-1 .swiper-slide-active .slide-home-1 .content .fade-item-1 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.2s;
}
.page-title-home-1 .swiper-slide-active .slide-home-1 .content .fade-item-2 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.3s;
}
.page-title-home-1 .swiper-slide-active .slide-home-1 .content .fade-item-3 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.4s; margin: auto; text-align: center;
}
.page-title-home-1 .swiper-slide-active .slide-home-1 .content .fade-item-4 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.5s; width: 100%; margin: auto; text-align: center;
}
.page-title-home-1 .swiper-slide-active .slide-home-1 .content .fade-item-5 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.6s;
}
.page-title-home-1 .btn-slide-home-1 { position: absolute; z-index: 3;
}
.page-title-home-1 .btn-slide-home-1:hover svg path { fill: #f8c32c;
}
.page-title-home-1 .btn-slide-home-1.btn-next { right: 70px; top: 50%; transform: translateY(-50%);
}
.page-title-home-1 .btn-slide-home-1.btn-prev { left: 70px; top: 50%; transform: translateY(-50%);
}
.page-title-home-1 .img-item-1 { position: absolute; z-index: 3; top: -25px; width: 100%;
}
.page-title-home-1 .img-item-1 img { width: 100%; height: 60px;
} .slide-home-1 { position: relative; z-index: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.slide-home-1 .image { width: 100%;
}
.slide-home-1 .image img { width: 100%; height: 673px; object-fit: cover;
}
.slide-home-1 .content-wrap { width: 100%; position: absolute; z-index: 2;
}
.slide-home-1 .content-wrap .content { max-width: 1290px; margin: 0px auto;
}
.slide-home-1 .content-wrap .content .sub-title { font-size: 23px; color: var(--Secondary); margin-bottom: 16px;
}
.slide-home-1 .content-wrap .content .title { color: var(--White);
}
.slide-home-1 .content-wrap .content .img-item { margin-bottom: 25px;
}
.slide-home-1 .content-wrap .content .text { color: var(--Text-3); margin-bottom: 43px; letter-spacing: 1px;
}
.slide-home-1 .content-wrap .content .tf-btn { gap: 33px;
}
.slide-home-1::after { top: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; z-index: 0; background-color: var(--Bg-2);
} .slider-home-1 .swiper-slide-active .content .fade-item-2 { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0.3s;
}
.slider-home-1 .swiper-slide-active .content .fade-item-3 { width: 100%; transition-delay: 0.5s;
}
.slider-home-1 .swiper-slide-active .content .access-trainsition { transition-delay: 0.6s; clip-path: inset(0 0 0 0);
}
.slider-home-1 .swiper-slide-active .content .sub-title .tf-fade-right-visible { transition-delay: 0.2s; transform: translateX(0px); visibility: visible; opacity: 1;
}
.slider-home-1 .swiper-slide-active .content .fade-item-4 { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0.6s;
}
.slider-home-1 .swiper-slide-active .content .fade-item-5 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.7s;
} .slider-home-2 { max-width: 1820px; border-radius: 40px; position: relative;
}
.slider-home-2 .swiper-slide-active .content .fade-item-2 { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0.3s;
}
.slider-home-2 .swiper-slide-active .content .fade-item-3 { width: 100%; transition-delay: 0.5s;
}
.slider-home-2 .swiper-slide-active .content .access-trainsition { transition-delay: 0.6s; clip-path: inset(0 0 0 0);
}
.slider-home-2 .swiper-slide-active .content .sub-title .tf-fade-right-visible { transition-delay: 0.2s; transform: translateX(0px); visibility: visible; opacity: 1;
}
.slider-home-2 .swiper-slide-active .content .fade-item-4 { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0.6s;
}
.slider-home-2 .swiper-slide-active .content .fade-item-5 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.7s;
}
.slider-home-2 .btn-slide-home-2 { position: absolute; z-index: 3; top: 54%; transform: translateY(5px);
}
.slider-home-2 .btn-slide-home-2:hover svg path { fill: #f8c32c;
}
.slider-home-2 .btn-slide-home-2.btn-next { right: 70px;
}
.slider-home-2 .btn-slide-home-2.btn-prev { left: 70px;
} .slide-home-2 { position: relative; z-index: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.slide-home-2 .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 3; top: 0; width: 100%; left: 0; flex-direction: column; text-align: center; padding: 324px 0px 350px 0px;
}
.slide-home-2 .content .title { color: var(--White);
}
.slide-home-2 .content .img-item { margin-bottom: 25px;
}
.slide-home-2 .content .text { color: var(--Text-3); margin-bottom: 43px; letter-spacing: 1px;
}
.slide-home-2::after { top: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; z-index: 0; background-color: var(--Bg-2);
}
.slider-home-3 { position: relative;
}
.slider-home-3 .swiper-slide-active .content .fade-item-1 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.2s;
}
.slider-home-3 .swiper-slide-active .content .fade-item-2 { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0.3s;
}
.slider-home-3 .swiper-slide-active .content .fade-item-3 { width: 100%; transition-delay: 0.5s;
}
.slider-home-3 .swiper-slide-active .content .access-trainsition { clip-path: inset(0 0 0 0);
}
.slider-home-3 .swiper-slide-active .content .sub-title .tf-fade-right-visible { transition-delay: 0.2s; transform: translateX(0px); visibility: visible; opacity: 1;
}
.slider-home-3 .swiper-slide-active .content .fade-item-4 { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0.6s;
}
.slider-home-3 .swiper-slide-active .content .fade-item-5 { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.7s;
}
.slider-home-3 .btn-slide-home-3 { position: absolute; z-index: 3;
}
.slider-home-3 .btn-slide-home-3:hover svg path { fill: #f8c32c;
}
.slider-home-3 .btn-slide-home-3.btn-next { right: 282px; top: 45%;
}
.slider-home-3 .btn-slide-home-3.btn-prev { right: 282px; top: 55%;
} .slide-home-3 { position: relative; z-index: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.slide-home-3 .content-wrap { width: 100%; position: absolute; z-index: 2; top: 0; padding: 128px 0px 130px 0px;
}
.slide-home-3 .content-wrap .content { max-width: 1290px; margin: 0px auto;
}
.slide-home-3 .content-wrap .sub-title { font-size: 23px; color: var(--Secondary); margin-bottom: 25px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: unset; justify-content: unset; gap: 15px; margin-bottom: 16px;
}
.slide-home-3 .content-wrap .sub-title img { position: relative; top: -3px; transition-delay: 0.2s;
}
.slide-home-3 .content-wrap .title { color: var(--White);
}
.slide-home-3 .content-wrap .img-item { margin-bottom: 25px; position: relative;
}
.slide-home-3 .content-wrap .img-item img { transition-delay: 0.5s;
}
.slide-home-3 .content-wrap .text { color: var(--Text-3); margin-bottom: 43px; letter-spacing: 1.1px;
}
.slide-home-3 .image { width: 100%; max-height: 700px; height: 100%;
}
.slide-home-3 .image img { width: 100%; height: 697px; object-fit: cover;
}
.slide-home-3::after { top: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; z-index: 0; background-color: var(--Bg-2);
} .slider-partner .slide-partner .image { max-width: 185px; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.slider-partner .slide-partner .image a { display: block; opacity: 0.45;
}
.slider-partner .slide-partner .image a img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.slider-partner .slide-partner .image a:hover { opacity: 1;
} .slider-s-testimonial { position: relative;
}
.slider-s-testimonial .btn-s-testimonial { position: absolute; z-index: 7;
}
.slider-s-testimonial .btn-s-testimonial:hover svg path { fill: #f8c32c;
}
.slider-s-testimonial .btn-s-testimonial.btn-next { left: 82%; bottom: 26px;
}
.slider-s-testimonial .btn-s-testimonial.btn-prev { left: 70%; bottom: 26px;
} .slider-blog-post .article-blog-item .image { border-radius: 20px; overflow: hidden;
}
.slider-blog-post .article-blog-item .image .style-icon-play { display: none;
} .slider-gallery .gallery-item .image { max-width: 382px; width: 100%; max-height: 326px; height: 100%;
}
.slider-gallery .gallery-item .image img { width: 100%; height: 100%; object-fit: cover;
} .btn-next.style-2,
.btn-prev.style-2 { width: 50px; height: 50px; border-radius: 50%; background-color: var(--Secondary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.btn-next.style-2 i,
.btn-prev.style-2 i { color: var(--Bg-6); font-size: 25px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.btn-next.style-2:hover,
.btn-prev.style-2:hover { background-color: var(--Text-4);
}
.btn-next.style-2:hover i,
.btn-prev.style-2:hover i { color: var(--White);
} .slider-portfolio .gallery-item .image { width: 100%;
}
.slider-portfolio .gallery-item img { width: 100%;
}
.slider-portfolio .btn-portfolio { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
}
.slider-portfolio .btn-portfolio.btn-next { right: 50px;
}
.slider-portfolio .btn-portfolio.btn-prev { left: 50px;
} .slider-event-detail,
.slider-service-detail { position: relative; border-radius: 20px;
}
.slider-event-detail .image,
.slider-service-detail .image { overflow: hidden;
}
.slider-event-detail .image img,
.slider-service-detail .image img { width: 100%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.slider-event-detail .image:hover img,
.slider-service-detail .image:hover img { transform: scale(1.1);
}
.slider-event-detail .btn-event-detail,
.slider-event-detail .btn-service-detail,
.slider-service-detail .btn-event-detail,
.slider-service-detail .btn-service-detail { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0;
}
.slider-event-detail .btn-event-detail i,
.slider-event-detail .btn-service-detail i,
.slider-service-detail .btn-event-detail i,
.slider-service-detail .btn-service-detail i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.slider-event-detail .btn-event-detail:hover,
.slider-event-detail .btn-service-detail:hover,
.slider-service-detail .btn-event-detail:hover,
.slider-service-detail .btn-service-detail:hover { background-color: var(--Text-4);
}
.slider-event-detail .btn-event-detail:hover i,
.slider-event-detail .btn-service-detail:hover i,
.slider-service-detail .btn-event-detail:hover i,
.slider-service-detail .btn-service-detail:hover i { color: var(--White);
}
.slider-event-detail .btn-event-detail.btn-next,
.slider-event-detail .btn-service-detail.btn-next,
.slider-service-detail .btn-event-detail.btn-next,
.slider-service-detail .btn-service-detail.btn-next { right: 23px;
}
.slider-event-detail .btn-event-detail.btn-prev,
.slider-event-detail .btn-service-detail.btn-prev,
.slider-service-detail .btn-event-detail.btn-prev,
.slider-service-detail .btn-service-detail.btn-prev { left: 23px;
}
.slider-event-detail:hover .btn-event-detail,
.slider-event-detail:hover .btn-service-detail,
.slider-service-detail:hover .btn-event-detail,
.slider-service-detail:hover .btn-service-detail { visibility: visible; opacity: 1;
}
.slider-event-detail:hover .btn-event-detail.btn-next,
.slider-event-detail:hover .btn-service-detail.btn-next,
.slider-service-detail:hover .btn-event-detail.btn-next,
.slider-service-detail:hover .btn-service-detail.btn-next { right: 43px;
}
.slider-event-detail:hover .btn-event-detail.btn-prev,
.slider-event-detail:hover .btn-service-detail.btn-prev,
.slider-service-detail:hover .btn-event-detail.btn-prev,
.slider-service-detail:hover .btn-service-detail.btn-prev { left: 43px;
}
input[type=email].style-2{ background: var(--White); color: var(--Black); font-weight: 400; line-height: 25px; padding: 14px 19px;
}
.slider-relate-product { position: relative;
}
.slider-relate-product .card-product.style-2 { padding: 30px 25px 34px 25px;
}
.slider-relate-product .card-product.style-2 .trendy-item p { padding: 2px 18px;
}
.slider-relate-product .card-product.style-2 .name-product { font-size: 18px; margin-bottom: 15px;
}
.slider-relate-product .card-product.style-2 .price-wrap span { font-size: 18px;
}
.slider-relate-product .card-product.style-2 .image img { max-width: unset; width: unset; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;
}
.slider-relate-product .card-product.style-2 .wg-rating { top: 0px; gap: 1px;
}
.slider-relate-product .card-product.style-2 .wg-rating i { font-size: 12px;
}
.slider-relate-product .card-product.style-2 .pricing-star { margin-bottom: 34px;
}
.slider-relate-product .card-product.style-2:hover { box-shadow: unset; border: 1px solid var(--Border-11);
}
.slider-relate-product .card-product.style-2:hover img { transform: scale(1.2);
} /* CSS change effect slide--- */
.slider-home-1 .swiper-slide,
.slider-home-2 .swiper-slide,
.slider-home-3 .swiper-slide { transition: transform 0.8s ease-in, opacity 0.8s ease-in; transform-origin: center; opacity: 0;
}
.slider-home-1 .swiper-slide-active,
.slider-home-2 .swiper-slide-active,
.slider-home-3 .swiper-slide-active { z-index: 10; opacity: 1; transform: scale(1);
}
.slider-home-1 .swiper-slide-prev,
.slider-home-1 .swiper-slide-next,
.slider-home-2 .swiper-slide-prev,
.slider-home-2 .swiper-slide-next,
.slider-home-3 .swiper-slide-prev,
.slider-home-3 .swiper-slide-next { opacity: 0.5; transform: scale(0.9);
}
.slider-home-1 .swiper-slide-prev ~ .swiper-slide,
.slider-home-1 .swiper-slide-next ~ .swiper-slide,
.slider-home-2 .swiper-slide-prev ~ .swiper-slide,
.slider-home-2 .swiper-slide-next ~ .swiper-slide,
.slider-home-3 .swiper-slide-prev ~ .swiper-slide,
.slider-home-3 .swiper-slide-next ~ .swiper-slide { opacity: 0.2; transform: scale(0.8);
} /*------------ pop up ---------------- */
.offcanvas { z-index: 3000;
} .offcanvas-backdrop { cursor: url("../icons/cursor-close.html"), auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.offcanvas-search { height: max-content !important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; visibility: hidden; opacity: 0; transform: translateY(-100px) !important;
}
.offcanvas-search.show { transform: translateY(0px) !important; visibility: visible; opacity: 1; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; z-index: 99999999999;
}
.offcanvas-search >.btn-close-search { position: absolute; right: 10px; top: 10px; background-color: var(--bg-4); width: 30px; height: 30px; font-size: 22px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1;
}
.offcanvas-search .offcanvas-body { padding: 60px 0;
}
.offcanvas-search .form-search-courses input { border: 1px solid var(--Border); border-radius: 4px;
}
.offcanvas-search .form-search-courses .button-submit button { border-radius: 8px; height: 30px; width: 30px; position: absolute; top: 10px; right: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.offcanvas-search .form-search-courses .button-submit button i { font-size: 22px; color: var(--Bg);
} /*------------ blog ---------------- */
.page-title { padding: 111px 0px 50px; position: relative; z-index: 0; background-image: url("../images/page-title/blog-full-w.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden;
}
.page-title .rellax { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; width: 100%;
}
.page-title .rellax img { min-height: 800px; width: 100%; height: 100%; object-fit: cover; object-position: bottom;
}
.page-title.style-2 { padding: 100px 0px 50px;
}
.page-title::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-color: var(--Bg-2);
}
.page-title .content-wrap { position: relative; z-index: 1;
}
.page-title .content.center { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.page-title .content .sub-title { font-family: "GlitterySnowfall", sans-serif; color: var(--Secondary); font-size: 23px; margin-bottom: 9px;
}
.page-title .content .title { font-family: "Farmhouse", sans-serif; text-transform: uppercase; color: var(--White); margin-bottom: 2px;
}
.page-title .content .icon-img { margin-bottom: 87px;
}
.page-title .content .breadcrumb { position: relative; z-index: 2; margin-bottom: 0px; gap: 7px;
}
.page-title .content .breadcrumb i { color: var(--White); font-size: 24px; position: relative; top: -2px;
}
.page-title .content .breadcrumb a { color: var(--White); font-family: "GlitterySnowfall", sans-serif; font-size: 20px;
}
.page-title .content .breadcrumb a:hover { color: var(--Secondary);
}
.page-title .content .breadcrumb a:last-child { cursor: default;
}
.page-title .img-item { position: absolute; width: 100%; z-index: 1;
}
.page-title .img-item img { width: 100%;
}
.page-title .img-item.item-1 { top: -24px; left: 0;
}
.page-title .img-item.item-2 { bottom: -1px; left: 0;
}
.page-title.page-about-us { background-image: unset; background-attachment: unset;
}
.main-content { background-color: var(--White);
} .main-content { padding: 90px 0 116px;
}
.main-content.page-contact-us { margin-bottom: -20px;
}
.main-content.mb--20px { margin-bottom: -20px;
}
.main-content.pt-93 { padding-top: 93px;
}
.main-content.page-blog-single { padding: 110px 0px 111px;
}
.fancybox__nav *{ overflow: hidden;
}
.subscribe-wrap { background-color: var(--Bg-6); border-radius: 20px; padding: 12px;
}
.subscribe-wrap .has-border { padding: 45px 50px 39px 51px; border-radius: 20px; border: 1px dashed var(--Border-2); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: unset; gap: 97px;
}
.subscribe-wrap .has-border .icon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--Secondary); width: 90px; height: 90px; flex-shrink: 0;
}
.subscribe-wrap .has-border .icon i { color: var(--White); font-size: 35px;
}
.subscribe-wrap .has-border .notice { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-shrink: 0; gap: 43px;
}
.subscribe-wrap .has-border .notice .content-inner { margin-top: -7px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 11px; max-width: 512px; width: 100%;
}
.subscribe-wrap .has-border .notice .title { color: var(--White); font-weight: 700;
}
.subscribe-wrap .has-border .notice .text { color: var(--Text-3); font-family: "Nunito Sans", sans-serif;
} .article-blog-item { padding: 19px 50px 15px 18px; border-radius: 20px; border: 1px solid var(--Border); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 50px;
}
.article-blog-item.type-2 { padding: 19px 50px 18px 18px;
}
.article-blog-item.type-2 .image { max-width: 467px; width: 100%; flex-shrink: 0;
}
.article-blog-item.type-2 .image .video-wrap { width: 100%;
}
.article-blog-item.type-2 .image .video-wrap img { height: 360px;
}
.article-blog-item .image { position: relative;
}
.article-blog-item .image .entry-date { width: 97px; border-radius: 50%; height: 97px; color: var(--Bg-6); background-color: var(--Secondary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; top: 19px; right: 18px;
}
.article-blog-item .image .entry-date p { font-family: "Work Sans", sans-serif; font-weight: 700; line-height: 30px;
}
.article-blog-item .image .entry-date .day { font-size: 35px; margin-top: 7px;
}
.article-blog-item .image .entry-date .month-year { font-size: 16px;
}
.article-blog-item .content { padding-top: 24px;
}
.article-blog-item .content .entry-meta { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--Border); gap: 43px; position: relative; padding-bottom: 20px; margin-bottom: 23px;
}
.article-blog-item .content .entry-meta::after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 97px; background-color: var(--Secondary);
}
.article-blog-item .content .entry-meta .entry { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 5px; position: relative;
}
.article-blog-item .content .entry-meta .entry a { font-family: "Nunito Sans", sans-serif; font-size: 14px;
}
.article-blog-item .content .entry-meta .entry a:hover { color: var(--Text-4);
}
.article-blog-item .content .entry-meta .entry i { color: var(--Text-4);
}
.article-blog-item .content .entry-meta .entry:not(:last-child):after { content: "/"; position: absolute; right: -23px; font-family: "Nunito Sans", sans-serif; color: var(--Text);
}
.article-blog-item .content .title { margin-bottom: 18px;
}
.article-blog-item .content .title a { color: var(--Primary);
}
.article-blog-item .content .title a:hover { color: var(--Text-4);
}
.article-blog-item .content .text { margin-bottom: 43px; letter-spacing: 0.1px; font-family: "Nunito Sans", sans-serif;
}
.article-blog-item .content .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 15px 10px; flex-wrap: wrap; overflow: hidden;
}
.article-blog-item .content .bot .share { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px 0px; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform: translateX(216px);
}
.article-blog-item .content .bot .share .icon { width: 43px; height: 43px; border-radius: 50%; background-color: var(--Primary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin-right: 12px;
}
.article-blog-item .content .bot .share .icon i { color: var(--White);
}
.article-blog-item .content .bot .share p.mr-23 { margin-right: 23px;
}
.article-blog-item .content .bot .share .social-list { visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.article-blog-item .content .bot .share:hover { transform: translateX(0px);
}
.article-blog-item .content .bot .share:hover .social-list { visibility: visible; opacity: 1;
}
.article-blog-item.style-2 { flex-direction: column; padding: 0px; gap: 23px; border-radius: unset; border: unset;
}
.article-blog-item.style-2 .image .video-wrap { width: 100%;
}
.article-blog-item.style-2 .image .video-wrap img { max-width: unset; max-height: 413px; height: 100%;
}
.article-blog-item.style-2 .image .entry-date { right: unset; top: 15px; left: 17px;
}
.article-blog-item.style-2 .content { padding-top: 0px;
}
.article-blog-item.style-2.type-3 { gap: 0px;
}
.article-blog-item.style-2.type-3 .image img { max-height: 348px; height: 100%;
}
.article-blog-item.style-2.type-3 .content { text-align: center; padding: 23px 20px 25px 20px;
}
.article-blog-item.style-2.type-3 .content .text { margin-bottom: 38px;
}
.article-blog-item.style-2.type-3 .content .entry-meta { border: unset; padding-bottom: 0px; gap: 18px; justify-content: center; margin-bottom: 13px;
}
.article-blog-item.style-2.type-3 .content .entry-meta::after { content: none;
}
.article-blog-item.style-2.type-3 .content .entry-meta li:not(:last-child)::after { content: none;
}
.article-blog-item.style-2.type-3 .content .title { font-size: 23px; line-height: 33px;
}
.article-blog-item.style-2.type-3 .content .bot { justify-content: center;
} .social-list.style-2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.social-list.style-2 li a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 50%; border: 1px solid var(--Border);
}
.social-list.style-2 li a i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.social-list.style-2 li a:hover { background-color: var(--Text-4); border-color: var(--Text-4);
}
.social-list.style-2 li a:hover i { color: var(--White);
}
.social-list.style-3 li a { border: unset;
} .icon.style-circle { border-radius: 50%; background-color: var(--Secondary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: max-content; width: 50px; height: 50px; flex-shrink: 0;
}
.icon.white i { color: var(--White);
} .block-quote { background-color: var(--Primary); padding: 10px; border-radius: 20px;
}
.block-quote .has-border { border-radius: 20px; border: 1px dashed var(--Border-3); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: unset; justify-content: unset; flex-direction: column; padding: 27px 57px 33px 55px;
}
.block-quote .quote { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; gap: 29px; border-bottom: 1px solid var(--Border-3); padding-bottom: 24px; margin-bottom: 16px;
}
.block-quote .quote .icon { height: 57px; width: 57px;
}
.block-quote .quote .icon i { color: var(--Bg-6); font-size: 23px;
}
.block-quote .quote .cite { color: var(--White); font-size: 26px; line-height: 36px;
}
.block-quote .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px;
}
.block-quote .bot .meta-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 38px;
}
.block-quote .bot .meta-left a { color: var(--Text-3); font-family: "Nunito Sans", sans-serif;
}
.block-quote .bot .meta-left p { color: var(--Text-3); font-family: "Nunito Sans", sans-serif; letter-spacing: 0.1px; font-size: 14px;
}
.block-quote .bot .meta-left i { color: var(--Secondary);
}
.block-quote .bot .meta-left .entry { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 11px; position: relative;
}
.block-quote .bot .meta-left .entry:not(:last-child):after { content: "/"; position: absolute; right: -20px; font-family: "Nunito Sans", sans-serif; color: var(--White);
}
.block-quote .bot .entry-author { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.block-quote .bot .entry-author a,
.block-quote .bot .entry-author p { font-weight: 600; color: var(--White); text-transform: uppercase; font-size: 14px; font-family: "Work Sans", sans-serif;
}
.block-quote.style-2 { margin-bottom: 33px;
}
.block-quote.style-2 .has-border { padding: 36px 57px 33px 55px;
}
.block-quote.style-2 .has-border .quote { padding-bottom: 30px;
}
.block-quote.style-2 .entry-author a { font-weight: normal; text-transform: unset;
}
.block-quote.style-3 { padding: 38px 52px 40px 43px;
}
.block-quote.style-3 .has-border { padding: unset; border: unset; gap: 9px;
}
.block-quote.style-3 .quote { padding-bottom: unset; border: unset; margin-bottom: 10px;
}
.block-quote.style-3 .quote .icon { transform: rotate(15deg);
}
.block-quote.style-3 .quote .icon i { color: var(--White);
}
.block-quote.style-3 .bot { padding-left: 84px;
}
.block-quote.style-3 .bot a,
.block-quote.style-3 .bot p { color: var(--Secondary);
}
.block-quote.type-2 .has-border { padding: 27px 38px 33px 32px;
}
.block-quote.type-2 .has-border .quote { padding-bottom: 17px; margin-bottom: 16px; gap: 28px;
}
.block-quote.type-2 .has-border .entry-author { padding-right: 8px;
}
.block-quote.type-2.style-2 .has-border { padding: 28px 38px 33px 32px;
}
.block-quote.type-2.style-2 .has-border .quote { gap: 27px; padding-bottom: 22px;
}
.block-quote.type-2.style-2 .entry-author { padding-right: 0px;
}
.block-quote.style-4 { padding: 58px 60px 60px 63px; background-color: var(--Secondary); margin-bottom: 78px;
}
.block-quote.style-4 .quote { border: unset; padding-bottom: unset; margin-bottom: unset; gap: 62px;
}
.block-quote.style-4 .icon { background-color: var(--Bg-6); width: 88px; height: 88px; transform: rotate(20deg);
}
.block-quote.style-4 .icon i { color: var(--White); font-size: 30px;
}
.block-quote.style-4 .cite { color: var(--Bg-6); font-size: 30px; line-height: 40px; margin-top: -3px;
} .blog-right-sidebar-wrap { margin-right: 20px;
}
.blog-right-sidebar-wrap .block-quote.style-2 { margin-bottom: 80px;
} .wg-author-farm { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0px 30px 26px; text-align: center; flex-direction: column; border-radius: 20px; background-color: var(--Bg-8); margin-top: 89px;
}
.wg-author-farm .image-avt { margin: -64px 0px 27px; border-radius: 50%; overflow: hidden; max-width: 203px; border: 3px solid var(--Secondary);
}
.wg-author-farm .name { font-size: 18px; font-weight: 600; margin-bottom: 7px;
}
.wg-author-farm .duty { position: relative; width: 100%; padding-bottom: 18px; margin-bottom: 18px;
}
.wg-author-farm .duty::after { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0px; left: 0px; background-color: var(--Border);
}
.wg-author-farm .text { margin-bottom: 17px;
} .tf-sidebar .sidebar-item { border-radius: 20px; overflow: hidden;
}
.tf-sidebar .sidebar-item .sb-title { font-family: "Work Sans", sans-serif; font-weight: 600; display: block; color: var(--White); background-color: var(--Bg); padding: 14px 35px 16px 35px;
}
.tf-sidebar .sidebar-item .sb-content { padding: 38px 35px; border-radius: 0px 0px 20px 20px; border: 1px solid var(--Border-6);
}
.tf-sidebar .sidebar-item .sb-content .category-list li:not(:first-child) a { padding-top: 20px;
}
.tf-sidebar .sidebar-item .sb-content .category-list li:not(:last-child) { border-bottom: 1px dashed var(--Border-6);
}
.tf-sidebar .sidebar-item .sb-content .category-list li:not(:last-child) a { padding-bottom: 20px;
}
.tf-sidebar .sidebar-item .sb-content .category-list li a { display: block; font-weight: 600; font-size: 18px; font-family: "Work Sans", sans-serif; position: relative;
}
.tf-sidebar .sidebar-item .sb-content .category-list li a::before { position: absolute; left: -5px; content: "\e926"; font-family: "icomoon"; color: var(--Secondary); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0;
}
.tf-sidebar .sidebar-item .sb-content .category-list li a:hover { padding-left: 20px; color: var(--Text-4);
}
.tf-sidebar .sidebar-item .sb-content .category-list li a:hover::before { left: 0px; transition-delay: 0.2s; visibility: visible; opacity: 1;
}
.tf-sidebar .sidebar-item .sb-content .latest-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: unset; gap: 29px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list li:not(:first-child) { padding-top: 20px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list li:not(:last-child) { border-bottom: 1px dashed var(--Border-6); padding-bottom: 20px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list li .image { max-width: 90px; border-radius: 10px; overflow: hidden;
}
.tf-sidebar .sidebar-item .sb-content .latest-list li .content .date { color: var(--Text); font-size: 14px; font-family: "Nunito Sans", sans-serif; margin-bottom: 7px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list li .content .name-post { font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 26px; font-weight: 500; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.tf-sidebar .sidebar-item .sb-content .latest-list li .content .name-post:hover { color: var(--Text-4);
}
.tf-sidebar .sidebar-item .sb-content .latest-list.style-2 .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 10px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list.style-2 .content .name { color: var(--Primary); line-height: 26px; font-size: 16px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list.style-2 .content .pricing-star { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; gap: 20px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list.style-2 .content .pricing-star .price { color: var(--Text-4); font-size: 18px;
}
.tf-sidebar .sidebar-item .sb-content .latest-list.style-2 .content .pricing-star .wg-rating { position: relative; top: -2px;
}
.tf-sidebar .sidebar-item .sb-content .tag-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 9px 4px; flex-wrap: wrap;
}
.tf-sidebar .sidebar-item .sb-content .tag-list li a { display: block; letter-spacing: 0.7px; padding: 10px 23px 8px 23px; border-radius: 17.5px; border: 1px solid var(--Border-4);
}
.tf-sidebar .sidebar-item .sb-content .tag-list li a:hover { background-color: var(--Bg); color: var(--White); border-color: var(--Bg);
}
.tf-sidebar .sidebar-item .sb-content .project-detail-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px;
}
.tf-sidebar .sidebar-item .sb-content .project-detail-list li i { color: var(--Text-4);
}
.tf-sidebar .sidebar-item .sb-content .project-detail-list li .infor { font-family: "Work Sans", sans-serif; font-weight: 500; color: var(--Text-2);
}
.tf-sidebar .sidebar-item .sb-content .project-detail-list li:not(:last-child) { padding-bottom: 14px; border-bottom: 1px dashed var(--Border-6);
}
.tf-sidebar .sidebar-item .sb-content .project-detail-list li:not(:first-child) { padding-top: 14px;
}
.tf-sidebar .sidebar-item .sb-content .color-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px;
}
.tf-sidebar .sidebar-item .sb-content .color-list li { width: 24px; height: 24px; border-radius: 50%; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: all;
}
.tf-sidebar .sidebar-item .sb-content .color-list li.color-1 { background-color: var(--Color-2);
}
.tf-sidebar .sidebar-item .sb-content .color-list li.color-2 { background-color: var(--Color-8);
}
.tf-sidebar .sidebar-item .sb-content .color-list li.color-3 { background-color: var(--Color-9);
}
.tf-sidebar .sidebar-item .sb-content .color-list li.color-4 { background-color: var(--Color-10);
}
.tf-sidebar .sidebar-item .sb-content .color-list li.color-5 { background-color: var(--Color-11);
}
.tf-sidebar .sidebar-item .sb-content .color-list li.color-6 { background-color: var(--Color-12);
}
.tf-sidebar .sidebar-item .sb-content .color-list li.color-7 { background-color: var(--Color-13);
}
.tf-sidebar .sidebar-item .sb-content .color-list li.active { width: 15px; height: 15px;
}
.tf-sidebar .sidebar-item .sb-content .color-list li.active::after { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--Border);
}
.tf-sidebar .sidebar-item .sb-content.sb-project-detail { padding: 32px 35px 31px 33px;
}
.tf-sidebar .sidebar-item .sb-content.sb-brochure-download { padding: 32px 34px 38px 34px;
}
.tf-sidebar .sidebar-item .sb-content.sb-brochure-download .text { margin-bottom: 23px;
}
.tf-sidebar .sidebar-item .sb-content.sb-color { padding: 38px 35px 35px 35px;
}
.tf-sidebar .sidebar-item .sb-content.sb-filter-price { padding: 38px 35px 31px 35px;
}
.tf-sidebar .sidebar-item .sb-content.sb-popular-product { padding: 36px 35px 40px 35px;
}
.tf-sidebar .sidebar-item:not(:last-child) { margin-bottom: 40px;
} .tf-sidebar-2 .sidebar-item-2 { padding: 35px 35px 50px 35px; border-radius: 20px;
}
.tf-sidebar-2 .sidebar-item-2.has-bg-1 { background-color: var(--Primary);
}
.tf-sidebar-2 .sidebar-item-2.has-bg-2 { background-color: var(--Secondary);
}
.tf-sidebar-2 .sidebar-item-2.has-bg-3 { background-color: var(--Bg-6);
}
.tf-sidebar-2 .sidebar-item-2.booking .top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
}
.tf-sidebar-2 .sidebar-item-2.booking .top .title { font-size: 23px; color: var(--Bg-6);
}
.tf-sidebar-2 .sidebar-item-2.booking .icon { width: 44px; height: 44px; background-color: var(--Bg-6);
}
.tf-sidebar-2 .sidebar-item-2.booking .icon i { color: var(--White);
}
.tf-sidebar-2 .sidebar-item-2.infor-contact { padding: 46px 35px 42px 35px;
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .sub { color: var(--Secondary); margin-bottom: 20px; line-height: 33px;
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .text { color: var(--Text-3); position: relative; margin-bottom: 27px; padding-bottom: 27px;
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .text::after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; border-bottom: 1px dashed var(--Border-3);
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .contact-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 16px;
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .contact-list li:not(:last-child) { margin-bottom: 14px;
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .contact-list li i { color: var(--Secondary);
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .contact-list li p { color: var(--White); font-family: "Nunito Sans", sans-serif; letter-spacing: 0.1px;
}
.tf-sidebar-2 .sidebar-item-2.infor-contact .contact-list li p.address { letter-spacing: 0.2px;
}
.tf-sidebar-2 .sidebar-item-2.get-in { padding: 0px; position: relative; overflow: hidden;
}
.tf-sidebar-2 .sidebar-item-2.get-in::after { content: ""; position: absolute; width: 100%; height: 407px; bottom: 0; left: 0; z-index: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.502), transparent);
}
.tf-sidebar-2 .sidebar-item-2.get-in .image { border-radius: 20px; overflow: hidden; max-height: 452px; height: 100%;
}
.tf-sidebar-2 .sidebar-item-2.get-in .image img { height: 452px; width: 100%; object-fit: cover;
}
.tf-sidebar-2 .sidebar-item-2.get-in .img-item { position: absolute; bottom: 0px; right: 0px; z-index: 2;
}
.tf-sidebar-2 .sidebar-item-2.get-in .content { position: absolute; bottom: 50px; left: 35px; z-index: 2;
}
.tf-sidebar-2 .sidebar-item-2.get-in .content .text { font-size: 45px; line-height: 55px; color: var(--White); margin-bottom: 30px;
}
.tf-sidebar-2 .sidebar-item-2.list-tab { padding: 46px 35px 47px 35px;
} .form-search { position: relative;
}
.form-search fieldset input { border-color: var(--Border-6); background-color: var(--White); padding: 12px 19px;
}
.form-search .btn-search { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: absolute; width: 43px; height: 43px; top: 5px; right: 5px; border-radius: 50%; background-color: var(--Secondary);
} .blog-single .content { margin-right: 18px;
}
.blog-single .content .title-name { margin-bottom: 19px;
}
.blog-single .content .entry-meta { margin-bottom: 25px;
}
.blog-single .content .meta-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 33px;
}
.blog-single .content .meta-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.blog-single .content .meta-list li a { font-size: 14px;
}
.blog-single .content .meta-list li a:hover { color: var(--Text-4);
}
.blog-single .content .meta-list li i { color: var(--Text-4); font-size: 14px;
}
.blog-single .content .meta-list li:not(:last-child)::after { position: relative; content: "/"; font-family: "Work Sans", sans-serif; right: -13px;
}
.blog-single .content .entry-image { border-radius: 20px; overflow: hidden; margin-bottom: 38px;
}
.blog-single .content .entry-image img { width: 100%; max-height: 442px; object-fit: cover;
}
.blog-single .content .block-quote { margin-bottom: 46px;
}
.blog-single .content .text { font-family: "Nunito Sans", sans-serif;
}
.blog-single .content .text.text-1 { margin-bottom: 16px;
}
.blog-single .content .text.text-2 { margin-bottom: 39px;
}
.blog-single .content .text.text-3 { margin-bottom: 34px;
}
.blog-single .content .text.text-4 { margin-bottom: 36px;
}
.blog-single .content .text.text-5 { margin-bottom: 26px;
}
.blog-single .content .text.text-6 { margin-bottom: 68px;
}
.blog-single .content .title { font-size: 26px; color: var(--Bg);
}
.blog-single .content .title.title-1 { margin-bottom: 24px;
}
.blog-single .content .title.title-2 { margin-bottom: 24px;
}
.blog-single .content .entry-video { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px; margin-bottom: 32px;
}
.blog-single .content .entry-video .video-wrap { flex-shrink: 0; max-width: 401px;
}
.blog-single .content .entry-video .benefit-list { width: 100%; padding: 46px 35px 47px 38px; border-radius: 20px; background-color: var(--Bg-8);
}
.blog-single .content .entry-video .benefit-list li:not(:last-child) { margin-bottom: 10px;
}
.blog-single .content .entry-video .benefit-list li p { padding-left: 20px; font-weight: 400; font-family: "Nunito Sans", sans-serif; position: relative; color: var(--Text-2);
}
.blog-single .content .entry-video .benefit-list li p::before { content: ""; left: 2px; top: 11px; position: absolute; width: 6px; height: 6px; background-color: var(--Text-4); border-radius: 50%;
}
.blog-single .content .opinion-list { margin-bottom: 38px;
}
.blog-single .content .opinion-list li:not(:last-child) { margin-bottom: 6px;
}
.blog-single .content .opinion-list li p { padding-left: 20px; font-weight: 400; font-family: "Nunito Sans", sans-serif; position: relative; color: var(--Text-2);
}
.blog-single .content .opinion-list li p::before { content: ""; left: 0px; top: 11px; position: absolute; width: 6px; height: 6px; background-color: var(--Text-4); border-radius: 50%;
}
.blog-single .content .entry-image-2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; margin-bottom: 33px;
}
.blog-single .content .entry-image-2 .image { max-width: 402px; overflow: hidden; border-radius: 20px;
}
.blog-single .content .blog-bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; padding-bottom: 31px; margin-bottom: 66px; border-bottom: 1px solid var(--Border);
}
.blog-single .content .blog-bot .tags-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 9px 8px; flex-wrap: wrap;
}
.blog-single .content .blog-bot .tags-list li a { display: block; letter-spacing: 1px; padding: 10px 20px 8px 22px; border-radius: 17.5px; border: 1px solid var(--Border-4);
}
.blog-single .content .blog-bot .tags-list li a:hover { background-color: var(--Bg); color: var(--White); border-color: var(--Bg);
}
.blog-single .content .blog-bot .share { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px 0px;
}
.blog-single .content .blog-bot .share .icon { width: 43px; height: 43px; border-radius: 50%; background-color: var(--Primary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin-right: 12px;
}
.blog-single .content .blog-bot .share .icon i { color: var(--White);
}
.blog-single .content .blog-bot .share p.mr-23 { margin-right: 23px;
} .comment-wrap { padding-bottom: 27px; margin-bottom: 65px; border-bottom: 1px solid var(--Border);
}
.comment-wrap h2 { margin-bottom: 35px;
}
.comment-wrap .author-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px;
}
.comment-wrap .author-wrap .author { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 24px;
}
.comment-wrap .author-wrap .author .image-avt { max-width: 69px; border-radius: 50%; overflow: hidden; border: 2px solid var(--Secondary);
}
.comment-wrap .author-wrap .author .entry { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 2px;
}
.comment-wrap .author-wrap .author .entry p { line-height: 28px;
}
.comment-wrap .author-wrap .author .entry-name { font-size: 18px; line-height: 26px;
}
.comment-wrap .author-wrap .btn-reply { padding: 10px 21px; font-size: 14px; gap: 8px;
}
.comment-wrap .author-wrap .btn-reply i { font-size: 10px;
}
.comment-wrap .author-wrap .btn-reply:hover { background-color: transparent;
} .post-comment-wrap h2 { margin-bottom: 15px;
}
.post-comment-wrap .sub-title { color: var(--Text-2); margin-bottom: 42px;
} .form-post-comment .cols { margin-bottom: 14px; gap: 19px;
}
.form-post-comment .cols.field-text { margin-bottom: 50px;
}
.form-post-comment .cols input { padding: 13px 19px;
}
.form-post-comment .tf-btn { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
} .box-event .image img { width: 100%; object-fit: cover;
} /*------------ testimonial ---------------- */
/*------------ accordion ---------------- */
.accordion .accordion-item { border-color: transparent;
}
.accordion .accordion-item .accordion-header .accordion-button { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative;
}
.accordion .accordion-item .accordion-header .accordion-button::after { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; content: ""; margin-left: unset;
}
.accordion .accordion-item .accordion-header .accordion-button::before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { background-color: unset; box-shadow: unset;
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { transform: rotate(90deg);
}
.accordion .accordion-item .accordion-header .accordion-button:focus { box-shadow: unset;
}
.accordion .accordion-item .accordion-collapse { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.accordion .accordion-item .accordion-collapse .accordion-body { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
} .tf-accordion { width: 100%;
}
.tf-accordion .accordion-item { border-radius: 10px; border: unset; overflow: hidden;
}
.tf-accordion .accordion-item:not(:last-child) { margin-bottom: 9px;
}
.tf-accordion .accordion-item .accordion-header { background-color: var(--Primary);
}
.tf-accordion .accordion-item .accordion-header .accordion-button { padding: 17px 25px 15px 29px; background-color: var(--Primary); font-size: 18px; line-height: 28px; font-family: "Work Sans", sans-serif; font-weight: 600; color: var(--White);
}
.tf-accordion .accordion-item .accordion-header .accordion-button::before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; content: ""; width: 14px; height: 2px; top: 29px; right: 35px; background-color: var(--Secondary);
}
.tf-accordion .accordion-item .accordion-header .accordion-button::after { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; content: ""; position: absolute; width: 2px; height: 14px; background-color: var(--Secondary); right: 41px; top: 23px; margin-left: unset; background-image: unset;
}
.tf-accordion .accordion-item .accordion-collapse .accordion-body { background-color: var(--Bg-8); font-family: "Nunito Sans", sans-serif; letter-spacing: 0.1px; line-height: 26px; font-size: 16px; padding: 30px 30px 31px 30px; margin-bottom: 13px; border-radius: 0px 0px 20px 20px; color: var(--Text);
} .tf-dropdown-sort { cursor: pointer; position: relative; padding: 15px 0px;
}
.tf-dropdown-sort .btn-select { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
}
.tf-dropdown-sort .btn-select span { color: var(--White); font-size: 16px; line-height: 26px;
}
.tf-dropdown-sort.tf-languages .btn-select, .tf-dropdown-sort.tf-currencies .btn-select { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 7px; align-items: center;
}
.tf-dropdown-sort.tf-languages .btn-select .icon i, .tf-dropdown-sort.tf-currencies .btn-select .icon i { font-size: 10px; color: var(--White);
}
.tf-dropdown-sort.tf-languages .dropdown-menu, .tf-dropdown-sort.tf-currencies .dropdown-menu { width: 96px; background-color: var(--Bg-11); top: 10px; border-radius: 10px; padding-top: unset; padding-bottom: 5px; position: absolute; z-index: 200; padding-left: 10px;
}
.tf-dropdown-sort.tf-languages .select-item, .tf-dropdown-sort.tf-currencies .select-item { cursor: pointer; width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.tf-dropdown-sort.tf-languages .select-item span, .tf-dropdown-sort.tf-currencies .select-item span { color: var(--White); font-size: 16px; line-height: 26px;
} /*------------ map ---------------- */
.box-map { width: 100%; height: 100%;
}
.box-map .map { height: 475px; width: 100%;
}
.box-map .map .marker { background-image: url("../icons/marker.svg"); background-size: cover; width: 35px; height: 50px; cursor: pointer;
}
.box-map.style-2 .map { height: 283px; border-radius: 20px;
}
.box-map.style-3 .map { height: 327px; border-radius: 20px;
} .mapboxgl-ctrl-attrib a, .mapboxgl-ctrl-attrib.mapboxgl-compact { display: none !important;
} a.mapboxgl-ctrl-logo { display: none !important;
} /*------------ animation ---------------- */
.fade-item { transform: translateY(100px); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
} .tf-fade-right { transform: translateX(30px); visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
} .tf-fade-left { transform: translateX(-30px); visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
} .tf-fade-bottom { transform: translateY(30px); visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
} .tf-fade-top { transform: translateY(-30px); visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
} .tf-animate-w { width: 0%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
} .rollInRight { animation-name: rollInRight; animation-duration: 1s; animation-fill-mode: both;
} .tf-animate-zoom-in-out { -webkit-animation: tf-animate-zoom-in-out 60s linear infinite; -khtml-animation: tf-animate-zoom-in-out 60s linear infinite; -moz-animation: tf-animate-zoom-in-out 60s linear infinite; -ms-animation: tf-animate-zoom-in-out 60s linear infinite; -o-animation: tf-animate-zoom-in-out 60s linear infinite; animation: tf-animate-zoom-in-out 60s linear infinite;
} .clip-text-bg-vertical { -webkit-animation: BackgroundAnimatedVertical 10s linear infinite; -moz-animation: BackgroundAnimatedVertical 10s linear infinite; -ms-animation: BackgroundAnimatedVertical 10s linear infinite; -o-animation: BackgroundAnimatedVertical 10s linear infinite; animation: BackgroundAnimatedVertical 10s linear infinite;
} .up-down-move { animation-duration: 2.3s; animation-iteration-count: infinite; transform-origin: bottom; animation-name: up-down-move; animation-timing-function: linear;
} .tf-trainsition-draw-left { clip-path: inset(0 100% 0 0); -webkit-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -khtml-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -moz-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -ms-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -o-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1);
} .tf-animate-spin-reverse { -webkit-transition: all 300ms cubic-bezier(0.4, 0, 1, 1); -khtml-transition: all 300ms cubic-bezier(0.4, 0, 1, 1); -moz-transition: all 300ms cubic-bezier(0.4, 0, 1, 1); -ms-transition: all 300ms cubic-bezier(0.4, 0, 1, 1); -o-transition: all 300ms cubic-bezier(0.4, 0, 1, 1); transition: all 300ms cubic-bezier(0.4, 0, 1, 1); -webkit-animation: spin-reverse 30s infinite linear; -khtml-animation: spin-reverse 30s infinite linear; -moz-animation: spin-reverse 30s infinite linear; -ms-animation: spin-reverse 30s infinite linear; -o-animation: spin-reverse 30s infinite linear; animation: spin-reverse 30s infinite linear;
} .scroll-element,
.scroll-element-2,
.scroll-element-3,
.scroll-element-4 { transition: transform 1s ease;
} .tf-animation-pulse { animation-name: tf-animation-pulse; animation-duration: var(--animation-duration, 1750ms); animation-timing-function: linear; animation-iteration-count: infinite;
} .tf-rotate-back-and-forth { -webkit-animation: rotate-back-and-forth 15s infinite linear; -khtml-animation: rotate-back-and-forth 15s infinite linear; -moz-animation: rotate-back-and-forth 15s infinite linear; -ms-animation: rotate-back-and-forth 15s infinite linear; -o-animation: rotate-back-and-forth 15s infinite linear; animation: rotate-back-and-forth 15s infinite linear;
} .tf-animate-1 { clip-path: inset(0 100% 0 0); -webkit-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -khtml-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -moz-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -ms-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -o-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1);
}
.tf-animate-1.active-animate { clip-path: inset(0 0 0 0); animation-delay: 0.5s;
}
.tf-animate-1.transition-1s { -webkit-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -khtml-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -moz-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -ms-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -o-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
} .tf-animate-2 { clip-path: inset(0 0 100% 0); -webkit-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -khtml-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -moz-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -ms-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -o-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1);
}
.tf-animate-2.active-animate { clip-path: inset(0 0 0 0); animation-delay: 0.7s;
} .tf-animate-3 { clip-path: inset(100% 0 0 0); -webkit-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -khtml-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -moz-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -ms-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -o-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1);
}
.tf-animate-3.active-animate { clip-path: inset(0 0 0 0); animation-delay: 0.5s;
} .tf-animate-4 { clip-path: inset(0 0 0 100%); -webkit-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -khtml-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -moz-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -ms-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); -o-transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1); transition: 0.6s cubic-bezier(0.63, 0.25, 0.25, 1);
}
.tf-animate-4.active-animate { clip-path: inset(0 0 0 0); animation-delay: 0.5s;
} .nhapNhap { animation: nhapNhay 8s infinite linear alternate;
} .tf-animate__box,
.tf-animate__box-2,
.tf-animate__rotate-left,
.tf-animate__rotate-right { visibility: hidden;
}
.tf-animate__box.animate__animated,
.tf-animate__box-2.animate__animated,
.tf-animate__rotate-left.animate__animated,
.tf-animate__rotate-right.animate__animated { visibility: visible;
} .tf-heartBeat { animation: heartBeat 3s ease-in-out infinite;
} @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
@keyframes ripple { 0% { width: 86.09px; height: 86.09px; opacity: 1; } 100% { width: 109.04px; height: 109.04px; opacity: 0; }
}
@keyframes ripple-1 { 0% { width: 86.09px; height: 86.09px; opacity: 1; } 100% { width: 132px; height: 132px; opacity: 0; }
}
@keyframes rollInRight { 0% { opacity: 0; transform: translateX(100%) rotate(120deg); } 100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}
@keyframes ring { 0% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-20deg) translateX(0.2em); } 50% { transform: rotate(20deg) translateX(-0.2em); } 75% { transform: rotate(-10deg) translateX(0.1em); } 100% { transform: rotate(10deg) translateX(-0.1em); }
}
@keyframes tf-ani-tada { 0%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
}
@keyframes tf-animate-zoom-in-out { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }
}
@keyframes BackgroundAnimatedVertical { 0% { background-position: 50% 0; } 100% { background-position: 50% 100%; }
}
@keyframes up-down-move { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); }
}
@keyframes spin-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); }
}
@keyframes dotAnimationTopToBot { 0% { top: 22%; } 50% { top: 100%; } 100% { top: 0%; }
}
@keyframes dotAnimationBotToTop { 0% { bottom: 24%; } 50% { bottom: 100%; } 100% { bottom: 0%; }
}
@keyframes rotate-back-and-forth { 0% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); }
}
@keyframes tf-animation-pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); }
}
@-webkit-keyframes shine { 100% { left: 125%; }
}
@keyframes shine { 100% { left: 125%; }
}
@keyframes iconBounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } 60% { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
}
@keyframes goTopToBottom { 49% { transform: translateY(-100%); } 50% { opacity: 0; transform: translateY(100%); } 51% { opacity: 1; }
}
@keyframes preload { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes tf-spin { 0% { transform: rotate(0deg); box-shadow: 0 2px 0 #0d401c; } 50% { transform: rotate(180deg); box-shadow: 0 2px 0 #0d401c; } 100% { transform: rotate(360deg); box-shadow: 0 2px 0 #0d401c; }
}
@keyframes nhapNhay { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.1); } 60% { transform: scale(1); }
}
/*------------ hover ---------------- */
.img-hover .hover-item { overflow: hidden;
}
.img-hover .hover-item img { width: 100%; transform: scale(1.1); transition: all 1s ease-in-out;
}
.img-hover .hover-item-2 { overflow: hidden;
}
.img-hover .hover-item-2 img { width: 100%; transform: scale(1.1); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.img-hover:hover .hover-item img { transform: scale(1.15);
}
.img-hover:hover .hover-item-2 img { transform: scale(1.2);
} .ic-hover .hover-icon .icon, .ic-hover .hover-icon.icon { transition: all 0.8s ease-in-out;
}
.ic-hover .hover-icon-2 .icon, .ic-hover .hover-icon-2.icon { transition: all 0.8s ease-in-out;
}
.ic-hover:hover .hover-icon .icon, .ic-hover:hover .hover-icon.icon { transform: rotateY(360deg);
}
.ic-hover:hover .hover-icon-2 .icon, .ic-hover:hover .hover-icon-2.icon { transform: rotateY(180deg);
} .tf-img-hover .hover01 img { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
.tf-img-hover .hover06 img { -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
.tf-img-hover .hover14 { position: relative;
}
.tf-img-hover .hover14::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg);
}
.tf-img-hover:hover .hover01 img { -webkit-transform: scale(1); transform: scale(1);
}
.tf-img-hover:hover .hover06 img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1);
}
.tf-img-hover:hover .hover14::before { -webkit-animation: shine 0.75s; animation: shine 0.75s;
} /*------------ zoom ---------------- */
.tf-zoom-main { position: sticky; top: 30px; z-index: 50;
}
.tf-zoom-main .drift-zoom-pane { border-radius: 20px; top: 0; left: 0; height: 520px; max-width: 520px; width: 100%; background: #fff; -webkit-transform: translate3d(0, 0, 0); box-shadow: 0 1px 5px rgba(127, 127, 127, 0.0196078431), 0 5px 18px rgba(127, 127, 127, 0.2); z-index: 3;
} .drift-bounding-box.drift-open { background: rgba(255, 255, 255, 0.2509803922); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset; z-index: 5000;
} .drift-zoom-pane { z-index: 5000;
} .section-image-zoom .other-image-zoom { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.section-image-zoom.zoom-active .other-image-zoom { opacity: 0.3;
} .pswp__bg { background: white;
} .pswp__icn { fill: rgb(34, 34, 34); color: white;
}
.pswp__icn .pswp__icn-shadow { stroke: white; stroke-width: 1px; fill: none;
} .pswp__counter { color: #222; text-shadow: 1px 1px 3px #ffffff;
} .tf-model-viewer { width: 100%; height: 100%; position: relative;
}
.tf-model-viewer model-viewer { display: block; position: relative; z-index: 5; width: 100%; height: 100%;
}
.tf-model-viewer model-viewer.disabled { pointer-events: none;
}
.tf-model-viewer.active .model-viewer { pointer-events: all;
}
.tf-model-viewer.active .wrap-btn-viewer { display: none;
} /*------------ widgets ---------------- */
.icon-wheat-grains { color: var(--Secondary);
} i.fs-16 { font-size: 16px;
}
i.fs-12 { font-size: 12px;
} /*tf-control-sorting
------------------------------------------------------------------------*/
.tf-control-sorting .tf-dropdown-sort { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; cursor: pointer; z-index: 51; width: max-content;
}
.tf-control-sorting .tf-dropdown-sort .tf-btn { gap: 10px; padding: 17px 31px 17px 33px;
}
.tf-control-sorting .tf-dropdown-sort .tf-btn i { font-size: 20px;
}
.tf-control-sorting .tf-dropdown-sort .tf-btn span { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 16px; font-family: "Work Sans", sans-serif; font-weight: 500;
}
.tf-control-sorting .tf-dropdown-sort .tf-btn:hover i,
.tf-control-sorting .tf-dropdown-sort .tf-btn:hover span { color: var(--Main-color);
}
.tf-control-sorting .tf-dropdown-sort .dropdown-menu { width: 100%; margin-top: 14px !important; background-color: var(--Bg); border: 1px solid #191d3c; border-radius: 16px; padding: 20px 16px; z-index: 10;
}
.tf-control-sorting .tf-dropdown-sort .dropdown-menu::after { position: absolute; content: ""; width: 0; height: 0; top: -8px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid var(--Bg);
}
.tf-control-sorting .tf-dropdown-sort .dropdown-menu .select-item { overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tf-control-sorting .tf-dropdown-sort .select-item { cursor: pointer; font-size: 14px; font-weight: 645; line-height: 18.52px; color: var(--White); width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.tf-control-sorting .tf-dropdown-sort .select-item:not(:last-child) { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--Border-3);
}
.tf-control-sorting .tf-dropdown-sort .select-item.active, .tf-control-sorting .tf-dropdown-sort .select-item:hover { color: var(--Secondary);
} /*video-wrap
------------------------------------------------------------------------*/
.video-wrap { position: relative; width: max-content; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.video-wrap img { object-fit: cover; width: 100%; max-width: 467px; border-radius: 20px;
}
.video-wrap img.mw-unset { max-width: unset;
}
.video-wrap .popup-youtube { position: absolute; height: 77px; width: 77px; background-color: var(--White); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2;
}
.video-wrap .popup-youtube i { color: var(--Bg); font-size: 25px; padding-left: 6px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; z-index: 2;
}
.video-wrap .popup-youtube .wave { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 109.04px; height: 109.04px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; animation: ripple 1s infinite;
}
.video-wrap .popup-youtube .wave-1 { z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 132px; height: 132px; background-color: rgb(255, 255, 255); border-radius: 50%; animation: ripple-1 1s infinite;
}
.video-wrap.style-2 img { max-width: unset;
}
.video-wrap.style-2 a { height: 75px; width: 75px; -webkit-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -khtml-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -moz-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -ms-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -o-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7);
}
.video-wrap.style-2 a:hover { height: 80px; width: 80px; background-color: transparent; border: 2px solid var(--White);
}
.video-wrap.style-2 a:hover::after { border-color: var(--White);
}
.video-wrap.style-2 a:hover i { color: var(--White);
}
.video-wrap.style-2 a i { font-size: 20px; padding-left: 4px; -webkit-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -khtml-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -moz-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -ms-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -o-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7);
}
.video-wrap.style-2 a::after { content: ""; position: absolute; height: 69px; width: 69px; border: 1px dashed var(--Border-15); border-radius: 50%; -webkit-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -khtml-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -moz-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -ms-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); -o-transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); transition: all 0.3s cubic-bezier(0.4, 0.5, 0.6, 0.7); animation: spin-reverse 30s infinite linear;
}
.video-wrap.style-3 .popup-youtube { background-color: var(--Secondary);
}
.video-wrap.style-3 .popup-youtube i { color: var(--Bg-6);
}
.video-wrap.style-3 .popup-youtube .wave { background-color: var(--Secondary);
}
.video-wrap.style-3 .popup-youtube .wave-1 { background-color: var(--Secondary);
}
.video-wrap.style-4 .popup-youtube { background-color: var(--Bg-6); height: 74px; width: 74px;
}
.video-wrap.style-4 .popup-youtube .wave { background-color: var(--Bg-6);
}
.video-wrap.style-4 .popup-youtube .wave-1 { background-color: var(--Bg-6);
} .blog-pagination ul,
.tf-page-pagination ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 11px;
}
.blog-pagination ul li a,
.tf-page-pagination ul li a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 51px; height: 51px; border-radius: 50%; background-color: var(--Bg-7);
}
.blog-pagination ul li a.active, .blog-pagination ul li a:hover,
.tf-page-pagination ul li a.active,
.tf-page-pagination ul li a:hover { color: var(--White); background-color: var(--Primary);
} .wg-social .list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 11px;
}
.wg-social .list li a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 49px; height: 49px; background-color: var(--Secondary); border-radius: 50%;
}
.wg-social .list li a i { color: var(--Text-6);
}
.wg-social .list li a:hover { background-color: var(--Secondary)
}
.wg-social.style-2 .list { gap: 0px; border-radius: 10px; overflow: hidden;
}
.wg-social.style-2 .list li { border: 1px solid var(--Border-14); border-radius: 0; overflow: hidden;
}
.wg-social.style-2 .list li:first-child { border-radius: 10px 0 0 10px;
}
.wg-social.style-2 .list li:last-child { border-radius: 0 10px 10px 0;
}
.wg-social.style-2 .list li:not(:last-child) { border-right: 0;
}
.wg-social.style-2 .list li:hover { border-color: var(--Text-4) !important;
}
.wg-social.style-2 .list li a { border-radius: unset; width: 45px; height: 45px; background-color: unset;
}
.wg-social.style-2 .list li a i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--Color-6);
}
.wg-social.style-2 .list li a:hover { background-color: var(--Text-4);
}
.wg-social.style-2 .list li a:hover i { color: var(--White);
}
.wg-social.style-3 li a { background-color: var(--Text-4);
}
.wg-social.style-3 li a i { color: var(--White);
}
.wg-social.style-3 li a:hover { background-color: var(--Secondary);
} .widget { height: 20000px;
} .wg-counter { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; padding: 20px 0px;
}
.wg-counter.p-0 { padding: 0px;
}
.wg-counter .counter-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; flex-direction: column; max-width: 300px; width: 100%;
}
.wg-counter .counter-item:not(:last-child) { border-right: 1px dashed var(--Border-5);
}
.wg-counter .icon { margin-bottom: 38px;
}
.wg-counter .icon i { font-size: 35px; color: var(--White);
}
.wg-counter .counter { height: 100%; margin-bottom: 20px;
}
.wg-counter .counter .sub-odo { position: relative; bottom: -14px; font-size: 55px; line-height: 55px; font-weight: 700; font-family: "Work Sans", sans-serif;
}
.wg-counter .counter .sub-odo.color-secondary { color: var(--Secondary);
}
.wg-counter .odometer { left: -12px;
}
.wg-counter .odometer.fs-65 span { font-size: 65px;
}
.wg-counter .odometer .odometer-value { width: 100%; text-align: right !important;
}
.wg-counter .odometer .odometer-digit { vertical-align: unset !important;
}
.wg-counter .odometer span { color: var(--Secondary); font-size: 55px; font-family: "Work Sans", sans-serif; line-height: 50px; font-weight: 700;
}
.wg-counter .sub { font-size: 20px; font-family: "Work Sans", sans-serif; color: var(--White); font-weight: 500;
}
.wg-counter.style-2 { max-width: 440px; width: 100%; background-color: var(--Secondary); padding: 18px 18px 20px 19px; border-radius: 20px;
}
.wg-counter.style-2 .has-border { width: 100%; padding: 36px 30px 31px 32px; border-radius: 15px; border: 1px dashed var(--Border-7); position: relative;
}
.wg-counter.style-2 .counter-item { align-items: flex-start;
}
.wg-counter.style-2 .counter-item .sub-odo { color: var(--Bg-6); font-size: 55px; font-family: "Work Sans", sans-serif; line-height: 50px; font-weight: 700; left: -17px;
}
.wg-counter.style-2 .counter-item .icon { position: absolute; top: 20px; right: 18px; background-color: var(--Bg-6); width: 54px; height: 54px;
}
.wg-counter.style-2 .counter-item .icon i { font-size: 32px; transform: rotate(45deg);
}
.wg-counter.style-2 .counter-item .title { color: var(--Bg-6); font-size: 18px; font-weight: 500; margin-bottom: 13px;
}
.wg-counter.style-2 .counter-item .text { color: var(--Bg-6);
}
.wg-counter.style-2 .counter { margin-top: -10px; margin-bottom: 10px;
}
.wg-counter.style-2 .odometer span { color: var(--Bg-6);
}
.wg-counter.style-3 { background-color: var(--Text-4); max-width: 198px; width: 100%; border-radius: 20px; padding: 12px; background: url("../images/item/counter.jpg") center center;
}
.wg-counter.style-3 .has-border { width: 100%; padding: 20px 0px; border-radius: 20px; border: 1px dashed var(--Border-8);
}
.wg-counter.style-3 .icon { background-color: var(--Primary); width: 53px; height: 53px; margin-bottom: 1px;
}
.wg-counter.style-3 .icon i { font-size: 22px;
}
.wg-counter.style-3 .odometer { left: -3px;
}
.wg-counter.style-3 .counter { margin-bottom: 3px;
}
.wg-counter.style-3 .sub-odo { font-size: 55px; line-height: 55px; font-weight: 700; left: -8px; color: var(--Secondary);
}
.wg-counter.style-3 .title { color: var(--White); font-weight: 500; margin-bottom: 9px;
}
.wg-counter.style-4 { background: unset;
}
.wg-counter.style-4 .counter-item { max-width: 222px;
}
.wg-counter.style-4 .odometer span { color: var(--Text-4);
}
.wg-counter.style-4 .title { font-size: 20px; color: var(--Text-2); margin-bottom: 20px;
}
.wg-counter.style-4 .icon-img { max-width: 140px;
}
.wg-counter.style-4 .icon-img img { height: 9px;
}
.wg-counter.style-5 { max-width: 280px; background-color: transparent; gap: 25px;
}
.wg-counter.style-5 .icon { background-color: var(--Text-4); width: 57px; height: 57px;
}
.wg-counter.style-5 .icon i { font-size: 20px;
}
.wg-counter.style-5 .counter-item .counter span { font-size: 55px;
}
.wg-counter.style-5 .counter-item .counter .sub-odo { line-height: 0px; bottom: -12px; left: -17px;
}
.wg-counter.style-6.style-5 { justify-content: flex-end; align-items: center; max-width: unset; gap: 20px;
}
.wg-counter.style-6.style-5 .icon { margin-bottom: 0px; background-color: var(--Secondary);
}
.wg-counter.style-6.style-5 .icon i { color: var(--Bg-6);
}
.wg-counter.style-6.style-5 .counter-item { font-weight: 500; color: var(--Text-2); justify-content: flex-start; align-items: start;
}
.wg-counter.style-6.style-5 .counter-item .odometer span { color: var(--Text-4);
}
.wg-counter.style-6.style-5 .counter-item .sub-odo { color: var(--Text-4);
} .wg-rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 1px;
}
.wg-rating i { font-size: 12px; color: var(--Secondary);
} .page-title-home-3 { position: relative;
}
.page-title-home-3 .img-item { z-index: 1; position: absolute;
}
.page-title-home-3 .img-item.item-1 { top: -30px; left: 0; width: 100%; height: 60px;
}
.page-title-home-3 .img-item.item-1 img { width: 100%;
}
.page-title-home-3 .img-item.item-2 { bottom: 0;
}
.page-title-home-3 .img-item.item-3 { top: 0; right: 0;
} .card-provide { border-radius: 20px; padding: 20px; background-color: var(--Bg-8); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.card-provide .has-border { border-radius: 15px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--Border-10); flex-direction: column; padding-bottom: 30px;
}
.card-provide .image { margin-top: 20px; max-width: 254px; border-radius: 50%; overflow: hidden; border: 3px solid var(--Secondary); margin-bottom: 45px;
}
.card-provide .title { font-size: 23px; color: var(--Primary); font-weight: 600; width: 100%; text-align: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; margin-bottom: 25px;
}
.card-provide .text { position: relative; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: max-content; padding-top: 27px; color: var(--Text); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; letter-spacing: 0.1px;
}
.card-provide .text::after { content: ""; position: absolute; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; top: 0; width: 65px; height: 3px; background-color: var(--Text-4);
}
.card-provide:hover { background-color: var(--Primary);
}
.card-provide:hover .title { color: var(--White);
}
.card-provide:hover .text { color: var(--White);
}
.card-provide:hover .text::after { background-color: var(--Secondary);
}
.card-provide:hover .tf-btn-read { color: var(--White);
}
.card-provide:hover .tf-btn-read:hover { color: var(--Secondary);
} .price-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 15px;
}
.price-wrap.price-left { justify-content: flex-start;
}
.price-wrap span { font-size: 20px; font-weight: 600;
}
.price-wrap span.price-1 { color: var(--Color-5); text-decoration: line-through;
}
.price-wrap span.price-2 { color: var(--Text-4);
} .card-product { width: 100%; border-radius: 20px; border: 1px solid var(--Border-11); padding: 28px 35px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background-color: var(--White); position: relative; display: flex; flex-direction: column;
}
.card-product:hover { box-shadow: 0px 25px 32.2px 2.8px rgba(0, 0, 0, 0.06); border-color: var(--White);
}
.card-product .trendy-list { position: absolute; top: 10px; right: 13px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.card-product .trendy-list .trendy-item p { display: block; padding: 5px 25px; border-radius: 7px; color: var(--White); font-weight: 600; font-family: "Work Sans", sans-serif;
}
.card-product .trendy-list .trendy-item p.color-1 { background-color: var(--Color-1);
}
.card-product .trendy-list .trendy-item p.color-2 { background-color: var(--Text-4);
}
.card-product .trendy-list .trendy-item p.color-3 { background-color: var(--Color-3);
}
.card-product .trendy-list .trendy-item p.color-4 { background-color: var(--Color-4);
}
.card-product .image { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin-top: 30px; margin-bottom: 35px; height: 100%;
}
.card-product .image img { max-width: 194px; width: 100%;
}
.card-product .name-product { color: var(--Text-2); font-weight: 600; font-size: 20px; display: block; margin-bottom: 20px;
}
.card-product .pricing-star { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; gap: 20px; margin-bottom: 25px;
}
.card-product .product-btn-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 10px;
}
.card-product .product-btn-list .icon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 51px; height: 51px; border: 1px solid var(--Border); border-radius: 50%;
}
.card-product .product-btn-list .icon i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--Primary);
}
.card-product .product-btn-list .icon:hover { background-color: var(--Primary); border-color: var(--Primary);
}
.card-product .product-btn-list .icon:hover i { color: var(--White);
}
.card-product.style-2 { max-width: 270px; width: 100%; padding: 30px 25px; justify-content: flex-end;
}
.card-product.style-2.mw-unset { max-width: unset;
}
.card-product.style-2.type-2 { padding: 30px 25px 49px 37px;
}
.card-product.style-2.type-2 .image { margin-bottom: 52px;
}
.card-product.style-2.type-2 .image img { max-width: 215px;
}
.card-product.style-2.type-2 .trendy-list { top: 27px; right: 34px;
}
.card-product.style-2.type-2 .trendy-list p { padding: 5px 27px; font-size: 16px;
}
.card-product.style-2.type-2 .name-product { font-size: 20px;
}
.card-product.style-2.type-2 .price-wrap { gap: 18px;
}
.card-product.style-2.type-2 .price-wrap span { font-size: 20px;
}
.card-product.style-2.type-2 .product-btn-list .icon { width: 51px; height: 51px;
}
.card-product.style-2.type-2 .pricing-star { margin-bottom: 29px;
}
.card-product.style-2.mw-unset { max-width: unset;
}
.card-product.style-2 .trendy-list { gap: 6px;
}
.card-product.style-2 .trendy-item p { padding: 2px 15px; font-size: 14px; font-weight: 500;
}
.card-product.style-2 .image { height: unset;
}
.card-product.style-2 .image img { max-width: unset; width: unset;
}
.card-product.style-2 .name-product { font-size: 16px;
}
.card-product.style-2 .price-wrap span { font-size: 16px; font-family: "Work Sans", sans-serif;
}
.card-product.style-2 .wg-rating { position: relative; top: -2px;
}
.card-product.style-2 .product-btn-list { position: relative;
}
.card-product.style-2 .product-btn-list .tt-text { position: absolute; top: -35px; white-space: nowrap; pointer-events: visible; z-index: 1; pointer-events: none; padding: 0px 7px; transform: translateY(10px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0;
}
.card-product.style-2 .product-btn-list .tt-text p { position: relative; z-index: 2; color: var(--White) !important;
}
.card-product.style-2 .product-btn-list .tt-text::after { content: ""; border-radius: 5px; position: absolute; width: 100%; height: 100%; background-color: var(--Black); left: 0; top: 0; z-index: 1;
}
.card-product.style-2 .product-btn-list .tt-text::before { content: ""; position: absolute; width: 10px; transform: rotate(45deg) translateX(-50%); height: 10px; background-color: var(--Black); left: 50%; top: 24px; z-index: 2;
}
.card-product.style-2 .product-btn-list .icon { width: 41px; height: 41px;
}
.card-product.style-2 .product-btn-list .icon:hover .tt-text { visibility: visible; opacity: 1; transform: translateY(0px); transition-delay: 0.3s;
} .box-icon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; position: relative;
}
.box-icon::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; border-right: 1px dashed var(--Border-3);
}
.box-icon .icon { width: 71px; height: 71px; margin-bottom: 20px;
}
.box-icon .icon.mb-30 { margin-bottom: 30px;
}
.box-icon .icon.mb-29 { margin-bottom: 29px;
}
.box-icon .icon i { font-size: 24px; color: var(--Bg-6);
}
.box-icon .caption { color: var(--White); font-size: 20px; margin-bottom: 20px;
}
.box-icon .caption.mb-17 { margin-bottom: 17px;
}
.box-icon .text { color: var(--Text-3);
}
.box-icon.style-2 { max-width: 410px; width: 100%; border-right: unset !important;
}
.box-icon.style-2::after { border-right: 1px dashed var(--Border-13); right: -14px;
}
.box-icon.style-2 .icon { margin-bottom: 28px;
}
.box-icon.style-2 .caption { color: var(--Text-2); margin-bottom: 17px;
}
.box-icon.style-2 .text { color: var(--Text);
}
.box-icon.style-3 { flex-direction: row; gap: 12px; max-width: 257px; border-radius: 20px; border: 1px solid var(--Bg-9); padding: 35px 15px 35px 35px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-icon.style-3:hover { border-color: var(--Primary);
}
.box-icon.style-3::after { content: none;
}
.box-icon.style-3 .icon { width: unset; height: unset; margin-bottom: unset;
}
.box-icon.style-3 .icon i { color: var(--Text-4); font-size: 35px;
}
.box-icon.style-3 .caption { color: var(--Text-2); margin-bottom: unset; text-align: left; line-height: 24px;
}
.box-icon.style-4 { max-width: 270px;
}
.box-icon.style-4 .icon { background-color: var(--Text-4); width: 80px; height: 80px; margin-bottom: 31px;
}
.box-icon.style-4 .caption { margin-bottom: 25px; color: var(--Text-2);
}
.box-icon.style-4 .text { color: var(--Text);
}
.box-icon.style-5 { max-width: 291px; background-color: var(--Secondary); border-radius: 20px; align-items: flex-start; padding: 50px 38px;
}
.box-icon.style-5 .icon { width: 65px; height: 65px; background-color: var(--Bg-6); transform: rotate(45deg);
}
.box-icon.style-5 .icon i { color: var(--White); font-size: 28px;
}
.box-icon.style-5 .text { font-size: 30px; color: var(--Bg-6); text-align: left; line-height: 40px;
}
.box-icon.style-6 { background-color: var(--Primary); max-width: 383px; width: 100%; border-radius: 20px; margin-top: 48px; margin-bottom: -65px; padding: 0px 15px 47px;
}
.box-icon.style-6 .icon { width: 125px; height: 125px; margin-top: -38px; margin-bottom: 47px;
}
.box-icon.style-6 .icon i { font-size: 57px;
}
.box-icon.style-6 .icon i.fs-67 { font-size: 67px;
}
.box-icon.style-6 .caption { padding-bottom: 29px; margin-bottom: 23px; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 22px; letter-spacing: 0.5px;
}
.box-icon.style-6 .caption::after { content: ""; position: absolute; width: 65px; height: 3px; background-color: var(--Secondary); bottom: 0;
}
.box-icon.style-6 .text { margin-bottom: 35px;
}
.box-icon.style-6 .btn-read svg { width: 58px;
}
.box-icon.style-6 .btn-read:hover svg path { fill: #f8c32c;
} .box-event { position: relative; border-radius: 20px; overflow: hidden;
}
.box-event:hover::after { height: 100%;
}
.box-event:hover::before { height: 100%;
}
.box-event:hover .image { transform: rotate(-3deg) scale(1.2);
}
.box-event::after { content: ""; width: 50%; bottom: 0; left: 0; position: absolute; height: 0%; background-color: rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1; border-radius: 20px 0px 0px 20px;
}
.box-event::before { content: ""; width: 50%; top: 0; right: 0; position: absolute; height: 0%; background-color: rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1; transition-delay: 0.2s; border-radius: 0px 20px 20px 0px;
}
.box-event .image { border-radius: 20px; overflow: hidden; -webkit-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -khtml-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -moz-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -ms-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); -o-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1); transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
}
.box-event .img-item { margin-bottom: 17px;
}
.box-event .img-item img { transform: scale(1) !important;
}
.box-event .content { top: 52px; width: 100%; position: absolute; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; z-index: 2;
}
.box-event .content .title { font-size: 30px; line-height: 55px; margin-bottom: 6px;
}
.box-event .content .text { margin-bottom: 31px;
}
.box-event.style-2 { padding: 50px 30px; border-radius: 20px; border: 1px dashed var(--Border-12); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-event.style-2:hover { background-color: var(--Bg-10); border: 1px solid var(--Bg-10);
}
.box-event.style-2::after { content: none;
}
.box-event.style-2::before { content: none;
}
.box-event.style-2 .icon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin-bottom: 17px;
}
.box-event.style-2 .icon i { font-size: 48px; color: var(--Text-4);
}
.box-event.style-2 .icon i.fs-55 { font-size: 55px;
}
.box-event.style-2 .content { position: unset;
}
.box-event.style-2 .content .title { font-size: 26px; margin-bottom: 12px;
}
.box-event.style-2 .content .sub { font-size: 26px; line-height: 26px; color: var(--Text-2); margin-bottom: 24px; letter-spacing: 0.3px;
}
.box-event.style-2 .content .text { margin-bottom: 35px;
} .box-about-us { border-radius: 20px; overflow: hidden;
}
.box-about-us .image img { width: 100%;
}
.box-about-us .content { background-color: var(--Primary); text-align: center; padding: 45px 15px 50px;
}
.box-about-us .content .title { color: var(--White); margin-bottom: 18px; display: block;
}
.box-about-us .content .text { color: var(--Text-3); margin-bottom: 40px;
}
.box-about-us.style-2 { position: relative;
}
.box-about-us.style-2 .content { text-align: left; padding: 80px;
}
.box-about-us.style-2 .content .top { margin-bottom: 20px;
}
.box-about-us.style-2 .content .top .img-item { margin-right: 25px;
}
.box-about-us.style-2 .content .sub { color: var(--Secondary);
}
.box-about-us.style-2 .img-item.item-1 { bottom: 0; right: 0;
} .box-farmer { position: relative;
}
.box-farmer .image { border-radius: 20px 20px 0px 0px;
}
.box-farmer .content { border-radius: 0px 0px 20px 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: var(--Primary); text-align: center; flex-direction: column; padding: 0px 33px 50px; position: relative; z-index: 5;
}
.box-farmer .content .author-wrap { max-width: 343px; width: 100%; background-color: var(--Secondary); border-radius: 10px; padding: 10px 10px 8px 10px; margin-top: -49px; margin-bottom: 30px;
}
.box-farmer .content .author-wrap .has-border { border: 1px dashed var(--Border-13); border-radius: 10px; padding: 13px 0px 10px 0px;
}
.box-farmer .content .author-wrap .has-border .name { display: block; margin-bottom: 6px;
}
.box-farmer .content .author-wrap .has-border p { color: var(--Bg-6);
}
.box-farmer .content .text { color: var(--Text-3); margin-bottom: 29px;
}
.box-farmer:hover .say-hi { transform: scale(1);
}
.box-farmer .say-hi { position: absolute; top: -56px; left: -56px; transform: scale(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-farmer .say-hi .img-item { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.box-farmer .say-hi .img-item p { position: absolute; color: var(--White); line-height: 29px;
} .box-portfolio { position: relative; z-index: 0; overflow: hidden; border-radius: 20px;
}
.box-portfolio .image { border-radius: 20px; overflow: hidden;
}
.box-portfolio .content { bottom: -140px; left: 35px; right: 35px; position: absolute; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; top: auto; z-index: 2;
}
.box-portfolio .content .sub { color: var(--Secondary); font-size: 25px; margin-bottom: 20px; letter-spacing: 1.4px;
}
.box-portfolio .content .title { color: var(--White); margin-bottom: 25px; padding-bottom: 25px; display: block; position: relative;
}
.box-portfolio .content .title::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 57px; height: 2px; background-color: var(--Secondary);
}
.box-portfolio .content .text { color: var(--Text-3); visibility: hidden; opacity: 0; transform: translateY(20px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-portfolio .content .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end;
}
.box-portfolio .content .btn-read { visibility: hidden; opacity: 0; transform: translateY(20px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-portfolio .content .btn-read i { font-size: 24px;
}
.box-portfolio .content .btn-read:hover { background-color: var(--Text-4); color: var(--White);
}
.box-portfolio::after { border-radius: 20px; content: ""; position: absolute; width: 100%; height: 278px; bottom: 0; left: 0; background: linear-gradient(to top, rgba(13, 21, 15, 0.749), transparent); z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-portfolio::before { border-radius: 20px; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background-color: rgb(13, 21, 15); opacity: 0.502;
}
.box-portfolio:hover::before { height: 100%;
}
.box-portfolio:hover .image img { filter: blur(0.8px);
}
.box-portfolio:hover .content { bottom: 35px;
}
.box-portfolio:hover .content .text { visibility: visible; opacity: 1; transform: translateY(0px);
}
.box-portfolio:hover .content .btn-read { visibility: visible; opacity: 1; transform: translateY(0px);
}
.box-portfolio.style-4 { position: relative;
}
.box-portfolio.style-4 .content { background-color: var(--White); border-radius: 20px; top: 398px; bottom: 20px; left: 20px; right: 23px; text-align: center; padding: 0px 35px 10px; height: 81px;
}
.box-portfolio.style-4 .content .icon { margin-bottom: 22px; visibility: hidden; opacity: 0; transform: scale(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-portfolio.style-4 .content .icon i { color: var(--Text-4); font-size: 61px;
}
.box-portfolio.style-4 .content .title { color: var(--Text-2); margin-bottom: 23px; padding-bottom: 29px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin-top: -55px; white-space: nowrap;
}
.box-portfolio.style-4 .content .title::after { visibility: hidden; opacity: 0; transform: translateY(20px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; left: unset; width: 64px; height: 3px;
}
.box-portfolio.style-4 .content .text { color: var(--Text); margin-bottom: 32px; transform: translateY(15px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0;
}
.box-portfolio.style-4 .content .bot { justify-content: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform: translateY(15px); visibility: hidden; opacity: 0;
}
.box-portfolio.style-4 .content .bot a { background-color: var(--Primary); color: var(--White); display: block; padding: 20px 35px; border-radius: 8px; letter-spacing: 0.5px;
}
.box-portfolio.style-4 .content .bot a:hover { background-color: var(--Text-4);
}
.box-portfolio.style-4:hover .content { padding: 59px 35px 10px; top: 20px; height: calc(100% - 40px);
}
.box-portfolio.style-4:hover .content .title { margin-top: 0px !important; letter-spacing: 0.5px;
}
.box-portfolio.style-4:hover .content .title::after { visibility: visible; opacity: 1; transform: translateY(0px);
}
.box-portfolio.style-4:hover .content .icon { visibility: visible; opacity: 1; transition-delay: 0.1s; transform: scale(1); margin-bottom: 35px;
}
.box-portfolio.style-4:hover .content .text { transition-delay: 0.2s; transform: translateY(0px); visibility: visible; opacity: 1;
}
.box-portfolio.style-4:hover .content .bot { transition-delay: 0.3s; transform: translateY(0px); visibility: visible; opacity: 1;
}
.box-portfolio.style-4::after { background: linear-gradient(to top, rgba(13, 64, 28, 0.89), transparent);
}
.box-portfolio.style-3:hover .content-2 { background-color: var(--Primary);
}
.box-portfolio.style-3:hover .content-2 .text { color: var(--White);
}
.box-portfolio.style-3:hover .content-2 .tf-btn-read { color: var(--White);
}
.box-portfolio.style-3::after { content: none;
}
.box-portfolio.style-3::before { content: none;
}
.box-portfolio.style-3 .image { max-width: 410px; max-height: 410px; position: relative; border-radius: 20px 20px 0px 0px;
}
.box-portfolio.style-3 .image::after { content: ""; position: absolute; width: 100%; height: 278px; bottom: 0; left: 0; background: linear-gradient(to top, rgba(13, 21, 15, 0.749), transparent); z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-portfolio.style-3 .image img { width: 100%;
}
.box-portfolio.style-3 .image .content { bottom: 28px !important; text-align: center;
}
.box-portfolio.style-3 .image .content .sub { margin-bottom: 5px;
}
.box-portfolio.style-3 .image .content .title { margin-bottom: 0px; padding-bottom: 0px; font-size: 20px; line-height: 30px;
}
.box-portfolio.style-3 .image .content .title::after { content: none;
}
.box-portfolio.style-3 .content-2 { padding: 25px 25px 40px 25px; text-align: center; background-color: var(--Bg-8); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-portfolio.style-3 .content-2 .text { margin-bottom: 28px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.box-portfolio.style-5 .image img { width: 100%;
}
.box-portfolio.style-5 .content { bottom: -90px; left: 42px; right: 46px;
}
.box-portfolio.style-5 .content .bot { margin-top: 0px;
}
.box-portfolio.style-5 .content .title { margin-bottom: 48px; padding-bottom: 23px;
}
.box-portfolio.style-5:hover .content { bottom: 43px;
}
.box-portfolio.style-5:hover .content .sub { margin-bottom: 17px;
}
.box-portfolio.style-5:hover .content .title { margin-bottom: 28px; padding-bottom: 23px;
}
.box-portfolio.style-5:hover .content .bot { margin-top: 0px;
}
.box-portfolio.style-6 .image img { width: 100%;
} .box-portfolio-style-2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; border-radius: 20px; overflow: hidden; height: 100%;
}
.box-portfolio-style-2 .image { width: 100%;
}
.box-portfolio-style-2 .content { max-width: 481px; width: 100%; background-color: var(--Primary); padding: 77px 40px 0px 48px;
}
.box-portfolio-style-2 .content .sub { color: var(--Secondary); font-size: 25px; margin-bottom: 14px; letter-spacing: 1.3px;
}
.box-portfolio-style-2 .content .title { color: var(--White); margin-bottom: 30px; padding-bottom: 19px; display: block; position: relative; line-height: 30px;
}
.box-portfolio-style-2 .content .title::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 57px; height: 2px; background-color: var(--Secondary);
}
.box-portfolio-style-2 .content .text { color: var(--Text-3); margin-bottom: 41px;
}
.box-portfolio-style-2 .content .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end;
}
.box-portfolio-style-2 .content .btn-read i { font-size: 24px;
}
.box-portfolio-style-2 .content .btn-read:hover { background-color: var(--Text-4); color: var(--White);
} .box-portfolio-2 { position: relative; overflow: hidden;
}
.box-portfolio-2:hover .content { visibility: visible; opacity: 1; transform: translate(0px, 0px);
}
.box-portfolio-2 .image { border-radius: 20px; overflow: hidden; max-height: 465px; height: 100%;
}
.box-portfolio-2 .image img { width: 100%;
}
.box-portfolio-2 .content { position: absolute; top: 55px; bottom: 29px; left: 25px; max-width: 430px; width: 100%; background-color: var(--White); border-radius: 20px; padding: 60px 50px; z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform: translate(-50px, -50px); visibility: hidden; opacity: 0;
}
.box-portfolio-2 .content::after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 15px; border: 1px dashed var(--Border); z-index: -1;
}
.box-portfolio-2 .content .sub { font-size: 25px; color: var(--Text-4); margin-bottom: 20px;
}
.box-portfolio-2 .content .title { display: block; margin-bottom: 20px; padding-bottom: 20px; position: relative;
}
.box-portfolio-2 .content .title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 57px; height: 2px; background-color: var(--Secondary);
}
.box-portfolio-2 .content .text { margin-bottom: 40px;
} .box-infor .image { border-radius: 20px; overflow: hidden; position: relative;
}
.box-infor .image img { width: 100%; object-fit: cover; max-height: 329px;
}
.box-infor .image .icon { position: absolute; bottom: 35px; height: 99px; width: 99px; left: 27px;
}
.box-infor .image .icon i { font-size: 45px; color: var(--Bg-6);
}
.box-infor .content { padding: 30px 27px;
}
.box-infor .content .title { margin-bottom: 25px; display: block;
}
.box-infor .content .text { margin-bottom: 30px;
}
.box-infor.style-1 .content { padding: 36px 27px 21px 27px;
}
.box-infor.style-1 .content .title { margin-bottom: 19px; line-height: 32px !important;
}
.box-infor.style-2 .image { border-radius: 20px 20px 0px 0px; max-height: 305px;
}
.box-infor.style-2 .icon { bottom: 25px; left: 35px;
}
.box-infor.style-2 .content { border-radius: 0px 0px 20px 20px; padding: 32px 27px 10px 34px; background-color: var(--Primary);
}
.box-infor.style-2 .content .title { color: var(--White);
}
.box-infor.style-2 .content .text { color: var(--Text-3);
} /*Count-down
------------------------------------------------------------------------*/
.js-countdown { display: block; width: max-content; padding-bottom: 60px;
}
.js-countdown .countdown__timer { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 97px;
}
.js-countdown .countdown__timer .countdown__item { display: inline-block; position: relative; width: 100px; text-align: center;
}
.js-countdown .countdown__timer .countdown__item:not(:last-child)::after { content: ":"; font-family: "Work Sans", sans-serif; position: absolute; font-size: 23px; font-weight: 700; line-height: 55px; color: var(--White); right: -53%; top: -2px;
}
.js-countdown .countdown__timer .countdown__item::before { font-family: "Work Sans", sans-serif; color: var(--White); font-size: 23px; font-weight: 700; line-height: 55px; position: absolute; bottom: -71px; left: 50%; transform: translate(-50%, 0%);
}
.js-countdown .countdown__timer .countdown__item:nth-child(1)::before { content: "Days";
}
.js-countdown .countdown__timer .countdown__item:nth-child(2)::before { content: "Hours";
}
.js-countdown .countdown__timer .countdown__item:nth-child(3)::before { content: "Minutes";
}
.js-countdown .countdown__timer .countdown__item:nth-child(4)::before { content: "Seconds";
}
.js-countdown .countdown__timer .countdown__item .countdown__value { display: inline-block; font-family: "Work Sans", sans-serif; font-size: 70px; font-weight: 700; line-height: 55px; color: var(--Secondary);
}
.js-countdown .countdown__timer .countdown__item .countdown__value .countdown__value--3 { width: 100%; max-width: 100px;
} .wg-coming-soon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; min-height: 100vh; background-color: var(--Primary);
}
.wg-coming-soon .img-item.item-2 { position: absolute; top: 70px; right: 120px;
}
.wg-coming-soon .content { position: relative; max-width: 1080px; width: 100%; padding: 90px 132px 90px 127px;
}
.wg-coming-soon .content .top { margin-bottom: 88px;
}
.wg-coming-soon .content .text { margin-bottom: 68px;
}
.wg-coming-soon .content .wg-countdown { padding-bottom: 40px; margin-bottom: 29px; border-bottom: 1px solid var(--Border-5);
}
.wg-coming-soon .content .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;
}
.wg-coming-soon .content .bot .form-email { max-width: 514px; width: 100%;
}
.wg-coming-soon .image img { height: 100%; object-fit: cover;
}
.wg-coming-soon p { color: var(--White);
}
.wg-coming-soon p.title { font-size: 100px; line-height: 100px;
}
.wg-coming-soon p.caption { font-size: 45px; line-height: 55px; margin-bottom: 22px;
}
.wg-coming-soon p.notice { font-size: 20px; line-height: 55px; margin-bottom: 15px;
} .wg-404 { padding: 163px 0px 72px 0px; background-image: url("../images/item/404-2.png"); background-repeat: no-repeat; background-size: contain; background-position: bottom; min-height: 100vh;
}
.wg-404 .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;
}
.wg-404 .title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; position: relative;
}
.wg-404 .title .image { z-index: 101;
}
.wg-404 .title::after { position: absolute; content: none; box-shadow: 0px 0px 200px var(--Black); width: 250px; height: 250px; border-radius: 50%; z-index: 100; background-color: var(--Black);
}
.wg-404 .title .number { font-size: 250px; line-height: 50px; color: var(--Text-4);
}
.wg-404 .title .number.s1 { position: relative; top: -18px; right: -4px;
}
.wg-404 .title .number.s2 { position: relative; top: -18px; right: -2px;
}
.wg-404 .not-found { margin-bottom: 12px; color: var(--Text-2);
}
.wg-404 .desc { margin-bottom: 40px; font-size: 26px; line-height: 36px; color: var(--Text-2);
}
.wg-404 .img-item { margin-bottom: 36px;
}
.wg-404 .btn-back { padding: 10px 32px 8px 31px;
} .testimonial { padding: 50px 45px; background: var(--White); border-radius: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.testimonial:hover { box-shadow: 0px 14px 35px 0px rgba(0, 0, 0, 0.13);
}
.testimonial .author-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px;
}
.testimonial .author-wrap .left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 20px;
}
.testimonial .author-wrap .image-avt { max-width: 69px; width: 100%; border-radius: 50%; border: 3px solid var(--Secondary); overflow: hidden;
}
.testimonial .author-wrap .infor .name-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.testimonial .author-wrap .infor .name-wrap .name { font-size: 18px; font-weight: 600; color: var(--Text-2); margin-right: 20px;
}
.testimonial .author-wrap .infor .name-wrap .wg-rating { position: relative; top: -2px;
}
.testimonial .author-wrap .right { transform: rotate(17deg);
}
.testimonial .author-wrap .right i { color: var(--Secondary); font-size: 35px;
}
.testimonial .comment .caption { color: var(--Text-2); margin-bottom: 25px;
}
.testimonial.style-2 { padding: 0px; display: flex; flex-direction: column;
}
.testimonial.style-2 .caption { margin-bottom: 19px;
}
.testimonial.style-2 .comment { flex-grow: 1; margin-bottom: 39px;
}
.testimonial.style-2 .text { font-style: italic; line-height: 28px;
}
.testimonial.style-2 .author-wrap { margin-bottom: 0px;
}
.testimonial.style-2 .author-wrap .left { gap: 23px;
}
.testimonial.style-2 .author-wrap .image-avt { border-width: 2px;
}
.testimonial.style-2 .author-wrap .name { font-weight: 700 !important;
}
.testimonial.style-2 .author-wrap .infor { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 6px;
}
.testimonial.style-2 .author-wrap .wg-rating { top: -1px !important;
}
.testimonial.style-3 { padding: 0px 20px; background-color: transparent;
}
.testimonial.style-3 .author-wrap { gap: 28px; justify-content: center;
}
.testimonial.style-3 .comment { text-align: center;
}
.testimonial.style-3 .caption { line-height: 45px; margin-bottom: 36px;
}
.testimonial.style-3 .wg-rating i { font-size: 12px;
}
.testimonial.style-3 .infor { text-align: center;
}
.testimonial.style-3 .infor .name { margin-bottom: 2px;
}
.testimonial.style-3 .infor .name-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column-reverse; margin-bottom: 5px;
}
.testimonial.style-3 .infor .name-wrap .wg-rating { margin-bottom: 27px;
}
.testimonial.style-4 { padding: 0px;
}
.testimonial.style-4:hover { box-shadow: unset;
}
.testimonial.style-4 .infor .name { font-family: "Work Sans", sans-serif;
}
.testimonial.style-4 .left { gap: 22px;
}
.testimonial.style-4 .caption { font-size: 26px; line-height: 35px; margin-bottom: 44px;
}
.testimonial.style-4 .author-wrap { margin-bottom: 0px;
} .main-customer { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px; flex-direction: column;
} .wg-pricing { background-color: var(--Primary); border-radius: 20px; padding: 40px 40px 40px 42px; position: relative;
}
.wg-pricing .best-choice { top: -9px; right: 36px; position: absolute; padding: 13px 20px; background-color: var(--Text-4); border-radius: 0px 6px 6px 6px;
}
.wg-pricing .best-choice p { color: var(--White);
}
.wg-pricing .best-choice::after { content: ""; position: absolute; top: 0; left: -8px; border-top: 9px solid transparent; border-right: 9px solid var(--Color-7); /* Màu tam giác */
}
.wg-pricing .type-plan { margin-bottom: 32px; display: flex; align-items: center; gap: 11px;
}
.wg-pricing .type-plan i { font-size: 18px; color: var(--White);
}
.wg-pricing .type-plan span { color: var(--White);
}
.wg-pricing .price { margin-bottom: -2px;
}
.wg-pricing .price span { color: var(--Secondary); font-size: 100px; line-height: 100px;
}
.wg-pricing .price span.dollar { font-size: 55px; position: relative; top: -35px;
}
.wg-pricing .price span.per { color: var(--White); font-size: 30px;
}
.wg-pricing .text { padding: 20px 25px; background-color: var(--Bg-12); border-radius: 20px; margin: 0px -26px 36px -23px;
}
.wg-pricing .text p { color: var(--Text-6);
}
.wg-pricing .benifit-list { margin-bottom: 34px;
}
.wg-pricing .benifit-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 12px;
}
.wg-pricing .benifit-list li:not(:last-child) { margin-bottom: 9px;
}
.wg-pricing .benifit-list li i { color: var(--Secondary);
}
.wg-pricing .benifit-list li p { color: var(--White); font-size: 16px; font-family: "Nunito Sans", sans-serif;
}
.wg-pricing.style-2 { background-color: var(--Bg-6);
} .grid-layout-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.grid-layout-3.gap-30-20 { gap: 30px 20px;
} .grid-layout-2 { display: grid; grid-template-rows: repeat(2, 1fr); gap: 30px;
} .wg-gallery { display: grid; gap: 30px; grid-template-areas: "aa aa bb bb cc cc" "dd dd dd ee ee ee " "ff ff gg gg hh hh ";
}
.wg-gallery .item-1 { grid-area: aa;
}
.wg-gallery .item-2 { grid-area: bb;
}
.wg-gallery .item-3 { grid-area: cc;
}
.wg-gallery .item-4 { grid-area: dd; max-height: 346px; height: 100%;
}
.wg-gallery .item-5 { grid-area: ee; max-height: 346px; height: 100%;
}
.wg-gallery .item-6 { grid-area: ff;
}
.wg-gallery .item-7 { grid-area: gg;
}
.wg-gallery .item-8 { grid-area: hh;
} .gallery-item { border-radius: 20px; overflow: hidden; position: relative; z-index: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.gallery-item .add-gallery { position: absolute; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; border-radius: 50%; background-color: var(--Secondary); font-size: 30px; color: var(--White); z-index: 3; transform: translateY(20px); visibility: hidden; opacity: 0;
}
.gallery-item::after { content: ""; position: absolute; width: 100%; height: 0%; background-color: var(--Bg-13); top: 0; left: 0; z-index: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.gallery-item:hover::after { height: 100%;
}
.gallery-item:hover .add-gallery { transition-delay: 0.2s; transform: translateY(0px); visibility: visible; opacity: 1;
}
.gallery-item:hover .add-gallery:hover { transition-delay: 0s; color: var(--Primary);
} .wg-progress { width: 100%; height: 50px;
}
.wg-progress.mb-29 { margin-bottom: 29px;
}
.wg-progress .top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; margin-bottom: 13px;
}
.wg-progress .top span { font-family: "GlitterySnowfall", sans-serif; font-size: 23px; line-height: 26px; color: var(--Text-2);
}
.wg-progress .progress { height: 6px; border-radius: 3px;
}
.wg-progress .progress-bar { border-radius: 3px; background-image: -webkit-linear-gradient(0deg, rgb(39, 141, 69) 0%, rgb(248, 195, 44) 100%);
}
.wg-progress .progress-bar.w-76 { width: 76%;
} .main-history { padding-top: 60px; padding-bottom: 9px; position: relative;
}
.main-history::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background-color: var(--Bg-6); left: 50%; transform: translate(-63%, 0%); top: 0;
}
.main-history::before { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background-color: var(--Bg-6); left: 50%; transform: translate(-63%, 0%); bottom: 0;
}
.main-history .line { position: absolute; width: 100%; height: 100%; top: 0;
}
.main-history .line::after { content: ""; position: absolute; width: 1px; height: 100%; background-color: var(--Bg-7); top: 0; left: 50%; z-index: 1; transform: translate(-2px, 0%);
} .wg-history { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 41px; position: relative; z-index: 5;
}
.wg-history.mb-50 { margin-bottom: 50px;
}
.wg-history .image { max-width: 562px; width: 100%; border-radius: 20px; overflow: hidden;
}
.wg-history .image.type-1 { max-height: 375px; flex-grow: 1; border-radius: unset; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end;
}
.wg-history .image.type-1 img { max-width: 299px;
}
.wg-history .year { width: 88px; height: 88px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: var(--Bg-6); border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; flex-shrink: 0;
}
.wg-history .year p { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--White);
}
.wg-history .content { max-width: 562px; width: 100%; flex-grow: 1;
}
.wg-history .content.text-right { text-align: right;
}
.wg-history .content .title { margin-bottom: 12px;
}
.wg-history:hover .year { background-color: var(--Secondary);
}
.wg-history:hover .year p { color: var(--Bg-6);
} .wrap-quantity { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 19px; margin-bottom: 33px;
}
.wrap-quantity .wg-quantity { position: relative;
}
.wrap-quantity .wg-quantity input { width: 66px; height: 54px; background-color: var(--Bg-9); border: none; box-shadow: none; color: var(--Text-2); padding-left: 19px; border-radius: 10px;
}
.wrap-quantity .wg-quantity .btn-quantity { font-size: 18px; color: var(--Text-2); cursor: pointer; position: absolute;
}
.wrap-quantity .wg-quantity .minus-btn { bottom: 7px; right: 10px;
}
.wrap-quantity .wg-quantity .plus-btn { top: 9px; right: 11px;
}
.wrap-quantity .btn-add-cart { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.wrap-quantity .btn-add-cart i { font-size: 15px;
}
.wrap-quantity .white-list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px;
}
.wrap-quantity .white-list-wrap .icon { width: 44px; height: 44px; background-color: var(--White); border: 1px solid var(--Border); position: relative;
}
.wrap-quantity .white-list-wrap .icon i { color: var(--Primary);
}
.wrap-quantity .white-list-wrap .icon:hover { background-color: var(--Secondary); border-color: var(--Secondary);
}
.wrap-quantity .white-list-wrap .icon:hover span { transition-delay: 0.1s; top: -30px; visibility: visible; opacity: 1;
}
.wrap-quantity .white-list-wrap .icon span { position: absolute; white-space: nowrap; top: -20px; display: block; background-color: var(--Black); color: var(--White); padding: 5px; font-size: 12px; z-index: 3; border-radius: 8px; pointer-events: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0;
}
.wrap-quantity .white-list-wrap .icon span::before { content: ""; position: absolute; width: 10px; transform: rotate(45deg) translateX(-50%); height: 10px; background-color: var(--Black); left: 50%; top: 20px; z-index: 1;
} .our-event-item { padding: 29px 60px 26px 29px; border-radius: 20px; border: 1px solid var(--Border); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 58px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.our-event-item .image { border-radius: 20px; overflow: hidden; max-width: 491px; width: 100%; flex-shrink: 0;
}
.our-event-item .price-wrap { width: 96px; height: 96px; background-color: var(--Secondary); top: 22px; right: 25px; border-radius: 50%; gap: unset;
}
.our-event-item .price-wrap span { color: var(--Bg-6); font-size: 35px; font-family: "Work Sans", sans-serif; font-weight: 700;
}
.our-event-item .price-wrap span.dollar { font-size: 20px; position: relative; top: -8px;
}
.our-event-item .price-wrap span.free { font-size: 20px;
}
.our-event-item .content { padding-top: 43px;
}
.our-event-item .content .title { margin-bottom: 30px; display: block;
}
.our-event-item .content .infor-event { background-color: var(--Bg-6); border-radius: 10px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 55px; padding: 16px 20px; margin-bottom: 28px;
}
.our-event-item .content .infor-event p { letter-spacing: 0.6px; color: var(--White); font-weight: 500; font-family: "Nunito Sans", sans-serif;
}
.our-event-item .content .infor-event li:not(:last-child) { position: relative;
}
.our-event-item .content .infor-event li:not(:last-child)::after { content: "\e90e"; position: absolute; font-family: "icomoon"; color: var(--Secondary); right: -40px; top: 50%; font-size: 20px; transform: translateY(-50%);
}
.our-event-item .content .sub { margin-bottom: 43px;
}
.our-event-item:hover { background-color: var(--Bg-8); border-color: var(--Bg-8);
} .clip-color-text { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center;
}
.clip-color-text p { font-size: 150px; line-height: 140px; background-image: url("../images/widget/clip-text.jpg"); background-repeat: no-repeat; background-size: cover; background-clip: text; -webkit-text-fill-color: transparent; width: max-content;
} .box-icon-list.style-2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 37px;
}
.box-icon-list.style-2 .box-icon { padding: 0px; border: unset; flex-direction: column;
}
.box-icon-list.style-2 .box-icon .icon { width: 79px; height: 79px; background-color: var(--White); border: 2px solid var(--Primary); position: relative; overflow: hidden;
}
.box-icon-list.style-2 .box-icon .icon i { color: var(--Primary);
}
.box-icon-list.style-2 .box-icon .icon::after { content: ""; position: absolute; height: 100%; width: 2px; background-color: var(--Primary); top: 0; left: 50%; transform: translateX(-50%) rotate(-45deg);
}
.box-icon-list.style-2 .box-icon .caption { color: var(--Text-2); font-size: 16px; text-align: center; line-height: 26px;
} .box-text { border-radius: 20px; background-color: var(--Bg-6); position: relative; padding: 48px 55px 57px 55px;
}
.box-text::after { content: ""; position: absolute; top: 16px; right: 19px; left: 19px; bottom: 16px; border-radius: 15px; border: 1px dashed var(--Bg-15); z-index: 0;
}
.box-text p { font-size: 26px; text-align: center;
}
.box-text p.title { line-height: 55px; color: var(--Secondary); margin-bottom: 8px;
}
.box-text p.text { color: var(--White); line-height: 36px;
} .wg-exprerience { width: 200px; height: 200px; border-radius: 50%; background-image: url("../images/item/counter.jpg"); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; top: 0; left: -57px; gap: 11px;
}
.wg-exprerience::after { content: ""; position: absolute; top: 11px; left: 11px; right: 11px; bottom: 11px; border-radius: 50%; border: 1px dashed var(--Border-7);
}
.wg-exprerience p { font-family: "Work Sans", sans-serif;
}
.wg-exprerience p.year { font-size: 65px; line-height: 50px; font-weight: 700; color: var(--Secondary);
}
.wg-exprerience p.text { font-weight: 500; color: var(--White); margin-bottom: 0 !important;
} .wg-shop-content { margin-bottom: 50px;
} .progress-wrap { position: fixed; bottom: 40px; right: 40px; height: 40px; width: 40px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; border-radius: 999px; z-index: 98; opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background: var(--Secondary); border: 1.2px solid rgba(134, 134, 134, 0.12);
}
.progress-wrap.b-100 { bottom: 100px;
}
.progress-wrap:hover { box-shadow: 0 8px 16px rgba(13, 64, 28, 0.5); background: var(--Primary);
}
.progress-wrap::after { position: absolute; content: "\e9c6"; font-family: "icomoon"; text-align: center; line-height: 40px; font-size: 20px; color: var(--White); height: 40px; width: 40px; cursor: pointer; z-index: 1; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; animation: iconBounce 2s linear 0s infinite;
}
.progress-wrap::after:active { animation: goTopToBottom 0.6s forwards;
}
.progress-wrap.active-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
}
.progress-wrap svg path { fill: none;
}
.progress-wrap svg.progress-circle path { box-sizing: border-box; stroke: var(--Text-2); stroke-width: 4; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transition-duration: 0.4s; transition-timing-function: linear;
} .flat-alert .close { font-size: 14px;
} .subscribe-msg .notification_ok { color: var(--White);
} .scale-1-1 { transform: scale(1.1);
}
.scale-1-1 img { transform: scale(1.1);
} /*------------ sections ---------------- */
.main-content.pb-0 { padding-bottom: 0px;
}
.main-content.pt-0 { padding-top: 0px;
}
.main-content.page-index { padding-top: 0px; padding-bottom: 0px; margin-bottom: -23px;
}
.main-content.mb--20 { margin-bottom: -20px;
}
.main-content.page-event-detail { padding: 88px 0px 106px;
}
.main-content.page-event-detail .slider-event-detail { margin-bottom: 43px;
}
.main-content.page-event-detail .tour-infor { background-color: var(--Bg-8); border-radius: 20px; padding: 51px 45px 51px 47px; position: relative; margin-bottom: 51px;
}
.main-content.page-event-detail .tour-infor .icon { width: 65px; height: 65px; background-color: var(--Primary); transform: rotate(30deg); position: absolute; top: 30px; right: 30px;
}
.main-content.page-event-detail .tour-infor .icon i { font-size: 29px;
}
.main-content.page-event-detail .tour-infor .title-2 { margin-bottom: 29px;
}
.main-content.page-event-detail .tour-infor .tour-infor-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 13px;
}
.main-content.page-event-detail .tour-infor .tour-infor-list li { position: relative;
}
.main-content.page-event-detail .tour-infor .tour-infor-list li::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background-color: var(--Text-4); left: 0; top: 9px;
}
.main-content.page-event-detail .tour-infor .tour-infor-list li p { padding-left: 22px; letter-spacing: 0.1px; color: var(--Text-2);
}
.main-content.page-event-detail .tour-schedule .list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column;
}
.main-content.page-event-detail .tour-schedule .list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 45px;
}
.main-content.page-event-detail .tour-schedule .list li:not(:last-child) { padding-bottom: 31px; border-bottom: 1px dashed var(--Border-12);
}
.main-content.page-event-detail .tour-schedule .list li:not(:first-child) { padding-top: 29px;
}
.main-content.page-event-detail .tour-schedule .list li .image { border-radius: 50%; overflow: hidden; width: 100%; height: 100%; max-width: 166px; max-height: 166px; flex-shrink: 0;
}
.main-content.page-event-detail .tour-schedule .list li .image img { width: 100%; height: 166px; object-fit: cover;
}
.main-content.page-event-detail .tour-schedule .list li .text-wrap { display: flex; flex-direction: column; margin-top: -9px; gap: 10px;
}
.main-content.page-event-detail .tour-schedule .list li .text-wrap .name-tour { font-size: 26px; line-height: 50px; color: var(--Text-2); font-weight: 600; font-family: "Work Sans", sans-serif;
}
.main-content.page-event-detail .content { max-width: 830px; width: 100%; margin-right: auto;
}
.main-content.page-event-detail .content .title { margin-bottom: 21px; line-height: 50px;
}
.main-content.page-event-detail .content .title.s2 { margin-bottom: 82px;
}
.main-content.page-event-detail .content .text-1 { margin-bottom: 16px;
}
.main-content.page-event-detail .content .text-2 { margin-bottom: 49px;
}
.main-content.page-faq { padding: 127px 0px 106px;
}
.main-content.page-faq .content { max-width: 830px; width: 100%; margin-left: auto;
}
.main-content.page-faq .content .title { line-height: 50px; margin-top: -13px; margin-bottom: 17px;
}
.main-content.page-faq .content .text { margin-bottom: 40px;
}
.main-content.page-faq .content .widget-content-tab { margin-bottom: 80px;
}
.main-content.page-faq .content .widget-content-tab .accordion-item { border: unset;
}
.main-content.page-faq .content .widget-content-tab .accordion-item:not(:last-child) { margin-bottom: 9px;
}
.main-content.page-faq .content .widget-content-tab .accordion-item .accordion-body { padding: 30px 30px 34px 30px;
}
.main-content.page-faq .content .bot { background-color: var(--Text-4); border-radius: 20px; position: relative; padding: 74px 0px 80px 70px;
}
.main-content.page-faq .content .bot p { color: var(--White); font-family: "Work Sans", sans-serif; font-weight: 500; font-size: 20px;
}
.main-content.page-faq .content .bot p.question { line-height: 50px; font-weight: 700; font-size: 40px; margin-bottom: 38px; letter-spacing: 0.8px;
}
.main-content.page-faq .content .bot p.sub { margin-bottom: 6px;
}
.main-content.page-faq .content .img-item { position: absolute;
}
.main-content.page-faq .content .img-item.item-1 { bottom: 0; right: 46px;
}
.main-content.page-faq .content .img-item.item-2 { bottom: 0; left: 0;
}
.main-content.page-our-commitments { padding: 104px 0px 106px;
}
.main-content.page-our-commitments .s-quality-of-life { position: relative; padding: 0px; padding-bottom: 46px;
}
.main-content.page-our-commitments .s-quality-of-life .box-icon-list { margin-bottom: 71px;
}
.main-content.page-our-commitments .s-quality-of-life .img-item { position: relative;
}
.main-content.page-our-commitments .s-quality-of-life .img-item.item-4 { margin-bottom: 29px;
}
.main-content.page-our-commitments .s-quality-of-life .img-item.item-3 { top: 54%; left: -98px;
}
.main-content.page-our-commitments .s-quality-of-life .sub { margin-bottom: 70px; font-size: 23px; line-height: 30px;
}
.main-content.page-our-commitments .s-quality-of-life .heading { margin-bottom: 20px;
}
.main-content.page-our-commitments .s-quality-of-life .heading p { font-size: 45px; line-height: 55px; font-family: "Work Sans", sans-serif; font-weight: 700; color: var(--Text-2); margin-bottom: 21px;
}
.main-content.page-our-commitments .s-quality-of-life .content-section { z-index: 1;
}
.main-content.page-our-commitments .s-quality-of-life .s-img-item { position: absolute; bottom: 0; z-index: 0;
}
.main-content.page-our-commitments .s-quality-of-life .s-img-item.item-2 { bottom: -20px;
}
.main-content.page-our-commitments .s-quality-of-life .video-wrap { z-index: 2; margin-bottom: -90px;
}
.main-content.page-our-commitments .s-benefit { margin: 0px; background-color: var(--Bg-11); position: relative;
}
.main-content.page-our-commitments .s-benefit .benefit-list { max-width: unset; border-radius: unset; z-index: 1; background-color: unset;
}
.main-content.page-our-commitments .s-benefit .benefit-list::after { content: none;
}
.main-content.page-our-commitments .s-benefit .benefit-list::before { content: none;
}
.main-content.page-our-commitments .s-benefit::after { position: absolute; content: ""; background: linear-gradient(to top, #0d401c, #1c6932); width: 100%; height: 100%; z-index: 0; top: 0; left: 0;
}
.main-content.page-our-commitments .s-benefit .box-icon:not(:last-child)::after { right: 0px;
}
.main-content.page-our-service { padding: 115px 0px 106px;
}
.main-content.page-our-service .s-testimonial-2 { position: relative; padding: 120px 0px 417px;
}
.main-content.page-our-service .s-testimonial-2 .s-img-item.item-1 { position: absolute; bottom: 0; left: 0; width: 100%;
}
.main-content.page-our-service .s-testimonial-2 .s-img-item.item-1 img { width: 100%; height: 200px; object-fit: cover; object-position: bottom;
}
.main-content.page-our-service .s-testimonial-2 .s-img-item.item-2 { position: absolute; bottom: -20px; left: 0; width: 100%;
}
.main-content.page-our-service .s-testimonial-2 .s-img-item.item-2 img { width: 100%;
}
.main-content.page-our-service .s-contact-us { margin-bottom: unset; background-color: transparent;
}
.main-content.page-our-service .s-contact-us .section-wrap { top: unset;
}
.main-content.page-our-service .s-contact-us .content-left .image { max-height: unset !important;
}
.main-content.page-our-service .s-partner { padding-top: 100px;
}
.main-content.page-portfolio-details { padding: 0px 0px 109px;
}
.main-content.page-portfolio-details .slider-portfolio { margin-bottom: 63px; padding-top: 25px;
}
.main-content.page-portfolio-details .content { max-width: 830px; width: 100%; margin-right: auto;
}
.main-content.page-portfolio-details .content .title-2 { color: var(--Text-2); margin-bottom: 27px;
}
.main-content.page-portfolio-details .content .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; margin-right: 59px;
}
.main-content.page-portfolio-details .content .bot .btn-project { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 20px;
}
.main-content.page-portfolio-details .content .bot .btn-project:hover p { color: var(--Text-4);
}
.main-content.page-portfolio-details .content .bot .btn-project .image { border-radius: 5px; max-height: 78px; max-width: 78px;
}
.main-content.page-portfolio-details .content .bot .btn-project p { font-weight: 600; font-size: 14px; letter-spacing: 1.4px; color: var(--Text-2); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.main-content.page-portfolio-details .wrap { border-bottom: 1px solid var(--Bg-9); padding-bottom: 41px; margin-bottom: 48px;
}
.main-content.page-portfolio-details .wrap.s2 { padding-bottom: 49px;
}
.main-content.page-portfolio-details .wrap.s3 { margin-bottom: 50px;
}
.main-content.page-portfolio-details .s1 .title { position: relative; margin-bottom: 37px; border-bottom: 1px solid var(--Bg-9); padding-bottom: 22px;
}
.main-content.page-portfolio-details .s1 .title::after { content: ""; position: absolute; width: 153px; height: 3px; bottom: 0; left: 0; background-color: var(--Secondary);
}
.main-content.page-portfolio-details .s1 .text-1 { margin-bottom: 16px;
}
.main-content.page-portfolio-details .s2 .text-3 { margin-bottom: 42px;
}
.main-content.page-portfolio-details .s2 .tips { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.main-content.page-portfolio-details .s3 .text-3 { margin-bottom: 20px;
}
.main-content.page-portfolio-details .s3 .benefit { margin-bottom: 20px;
}
.main-content.page-portfolio-details .s3 .benefit ul li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 14px;
}
.main-content.page-portfolio-details .s3 .benefit ul li .icon i { font-size: 18px; color: var(--Text-4);
}
.main-content.page-portfolio-details .s3 .benefit ul li p { font-style: "Work Sans", sans-serif; font-weight: 600; font-size: 18px; line-height: 42px; color: var(--Text-2);
}
.main-content.page-portfolio-details .tf-sidebar { margin-top: 12px;
}
.main-content.page-service-detail { padding: 123px 0px 106px;
}
.main-content.page-service-detail .slider-service-detail { margin-bottom: 40px;
}
.main-content.page-service-detail .content { max-width: 830px; width: 100%; margin-right: auto;
}
.main-content.page-service-detail .content .title { padding-bottom: 21px; margin-bottom: 32px; border-bottom: 1px solid var(--Border); position: relative;
}
.main-content.page-service-detail .content .title::after { content: ""; position: absolute; width: 155px; height: 3px; background-color: var(--Secondary); bottom: 0; left: 0;
}
.main-content.page-service-detail .content .quote { background-color: var(--Secondary); border-radius: 20px; padding: 35px 40px 35px 42px; margin-bottom: 38px;
}
.main-content.page-service-detail .content .quote p { font-size: 26px; line-height: 33px; color: var(--Bg-6);
}
.main-content.page-service-detail .content .text { margin-bottom: 26px;
}
.main-content.page-service-detail .content .text.text-2 { margin-bottom: 33px; padding-bottom: 42px; border-bottom: 1px solid var(--Bg-9);
}
.main-content.page-service-detail .content .text.text-3 { margin-bottom: 41px;
}
.main-content.page-service-detail .content .offer-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-bottom: 32px; gap: 52px;
}
.main-content.page-service-detail .content .title-2 { font-family: "Work Sans", sans-serif; font-weight: 700; font-size: 26px; line-height: 50px; color: var(--Text-2); margin-bottom: 34px;
}
.main-content.page-service-detail .content .solution { margin-bottom: 33px;
}
.main-content.page-service-detail .content .benefit { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; padding-bottom: 49px; border-bottom: 1px solid var(--Bg-9);
}
.main-content.page-service-detail .content .box-icon { padding: 31px 15px 32px 35px; gap: 21px;
}
.main-content.page-service-detail .content .box-icon .caption { font-size: 18px; line-height: 28px; font-weight: normal;
}
.main-content.page-service-detail .content .box-icon i { font-size: 45px;
}
.main-content.page-service-detail .content .box-icon i.fs-40 { font-size: 40px;
}
.main-content.page-service-detail .content .tf-accordion { max-width: unset; margin-right: unset;
}
.main-content.page-gallery { padding: 116px 0px 111px;
}
.main-content.page-our-events { padding: 115px 0px 106px;
}
.main-content.page-portfolio-1 { padding: 120px 0px 68px;
}
.main-content.page-portfolio-1.style-2 { padding: 113px 0px 68px;
}
.main-content.page-testimonial { padding: 113px 0px 106px;
}
.main-content.page-shop-product { padding-top: 119px;
} .tf-spacing-1 { padding-top: 100px; padding-bottom: 100px;
} .tf-spacing-2 { padding-top: 100px; padding-bottom: 0px;
} .tf-spacing-3 { padding-top: 0px; padding-bottom: 100px;
} .heading-section { margin-bottom: 30px;
}
.heading-section.mb-81 { margin-bottom: 81px;
}
.heading-section.mb-26 { margin-bottom: 26px;
}
.heading-section.mb-35 { margin-bottom: 35px;
}
.heading-section .sub-title { color: var(--Text-4); font-family: "GlitterySnowfall", sans-serif; font-size: 23px; line-height: 26px; margin-bottom: 16px;
}
.heading-section .sub-title.fs-35 { font-size: 35px;
}
.heading-section .title { font-size: 45px; line-height: 55px; font-family: "Work Sans", sans-serif; color: var(--Text-2); font-weight: 700;
}
.heading-section .title.mb-21 { margin-bottom: 21px;
}
.heading-section .img-item .mb-25 { margin-bottom: 25px;
}
.heading-section.has-text .title { margin-bottom: 15px;
}
.heading-section.has-text .title.mb-24 { margin-bottom: 24px;
}
.heading-section.has-text .title.mb-18 { margin-bottom: 18px;
}
.heading-section.has-text .text { color: var(--Text-2); margin-bottom: 26px; letter-spacing: 0.1px;
}
.heading-section.style-2 { margin-bottom: 26px;
}
.heading-section.style-2.mb-43 { margin-bottom: 43px;
}
.heading-section.style-2 .img-item { margin-bottom: 16px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.heading-section.style-2 .img-item .item { margin-right: 19px;
}
.heading-section.style-2 .img-item .item.mr-16 { margin-right: 16px;
}
.heading-section.style-2 .img-item .item.mr-25 { margin-right: 25px;
}
.heading-section.style-2 .img-item .sub-title { margin-bottom: 0px;
}
.heading-section.style-3 .sub-title { color: var(--Secondary);
}
.heading-section.style-3 .title { color: var(--White);
}
.heading-section.style-3 .text { color: var(--Text-3);
}
.heading-section.style-4 .img-item { margin-bottom: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.heading-section.style-4 .img-item.mb-25 { margin-bottom: 25px;
}
.heading-section.style-4 .img-item .item { margin-right: 15px;
}
.heading-section.style-4 .img-item .item.mr-23 { margin-right: 23px;
}
.heading-section.style-4 .img-item .sub-title { margin-bottom: 0px;
} .s-sub { margin-bottom: 79px;
} .s-filter-sorting { margin-bottom: 50px;
}
.s-filter-sorting .s-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.s-filter-sorting .s-top .text { color: var(--Text-2); font-weight: 500;
} .s-product-detail { padding-top: 99px; padding-bottom: 100px; position: relative; z-index: 9;
}
.s-product-detail .content { padding: 10px 0px;
}
.s-product-detail .tf-product-media-main { margin-bottom: 17px; border-radius: 20px; border: 1px solid var(--Border); overflow: hidden; max-width: 550px; width: 100%; max-height: 535px; margin-left: 0px;
}
.s-product-detail .tf-product-media-main .image img { width: 100%; height: 100%; object-fit: cover;
}
.s-product-detail .tf-product-media-thumbs { max-width: 550px; width: 100%; margin: 0px;
}
.s-product-detail .tf-product-media-thumbs .image { border-radius: 20px; border: 1px solid var(--Border); overflow: hidden;
}
.s-product-detail .tf-product-media-thumbs .image img { width: 100%; height: 100%; object-fit: cover;
}
.s-product-detail .content-inner { margin-left: -30px; margin-top: 35px;
}
.s-product-detail .content-inner .title { margin-bottom: 12px;
}
.s-product-detail .content-inner .wg-rating { gap: 1px;
}
.s-product-detail .content-inner .wg-rating i { font-size: 12px;
}
.s-product-detail .content-inner .rating-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 18px; align-items: center; margin-bottom: 16px;
}
.s-product-detail .content-inner .price-wrap { margin-bottom: 27px; gap: 16px;
}
.s-product-detail .content-inner .sub { margin-bottom: 28px;
}
.s-product-detail .content-inner .notice-list { margin-bottom: 32px;
}
.s-product-detail .content-inner .notice-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 12px;
}
.s-product-detail .content-inner .notice-list li:not(:last-child) { margin-bottom: 12px;
}
.s-product-detail .content-inner .notice-list li p { font-family: "Work Sans", sans-serif; color: var(--Text-2); font-weight: 500;
}
.s-product-detail .content-inner .more-infor { margin-bottom: 28px;
}
.s-product-detail .content-inner .more-infor li:not(:last-child) { margin-bottom: 4px;
}
.s-product-detail .content-inner .more-infor li p { font-family: "Work Sans", sans-serif; letter-spacing: 0.3px;
}
.s-product-detail .content-inner .more-infor li p a { color: var(--Text);
}
.s-product-detail .content-inner .more-infor li p a:hover { color: var(--Text-4);
}
.s-product-detail .content-inner .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 18px;
}
.s-product-detail .content-inner .bot .text { color: var(--Text-2);
}
.s-product-detail .content-inner .bot a { width: 41px; height: 41px;
}
.s-product-detail .content-inner .bot .list { gap: 10px;
} .s-break-page { background-color: var(--Secondary); position: relative; z-index: 3;
}
.s-break-page .img-item { position: absolute;
}
.s-break-page .img-item.item-1 { top: -20px; left: 0; width: 100%;
}
.s-break-page .img-item.item-1 img { height: 23px; width: 100%; object-fit: cover;
}
.s-break-page .img-item.item-2 { right: 0; bottom: 0;
}
.s-break-page .img-item.item-3 { bottom: -40px; left: 0; width: 100%;
}
.s-break-page .img-item.item-3 img { width: 100%; height: 60px;
}
.s-break-page.style-2 { height: 580px; position: relative; z-index: 0;
}
.s-break-page.style-2 .content { position: absolute; top: 0; z-index: 3; padding: 156px 0px 0px; width: 100%;
}
.s-break-page.style-2 .content h1 { color: var(--White); padding: 0px 15px;
}
.s-break-page.style-2::after { z-index: 0; content: ""; position: absolute; height: 100%; width: 100%; background: url("../images/section/break-page.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed;
}
.s-break-page.style-2::before { background-color: var(--Bg-14); content: ""; position: absolute; height: 100%; width: 100%; z-index: 1;
}
.s-break-page.style-3 .image::after { top: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; z-index: 0; background-color: var(--Bg-2);
}
.s-break-page.style-3 .image { position: relative; z-index: 1; height: 100%; max-height: 450px;
}
.s-break-page.style-3 .image img { height: 100%; width: 100%;
}
.s-break-page.style-3 .content { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); z-index: 2; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.s-break-page.style-3 .content .text { color: var(--White);
}
.s-break-page.style-3 .content .img-item { position: relative;
} .s-box-portfolio { position: relative; z-index: 4; margin-top: -344px;
} .s-about-us { padding-top: 130px; padding-bottom: 70px;
}
.s-about-us .main-section { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px;
}
.s-about-us .main-section .content-left { max-width: 820px; width: 100%; flex-shrink: 0;
}
.s-about-us .main-section .content-left .heading-section { margin-bottom: 25px;
}
.s-about-us .main-section .content-left .text-1 { margin-bottom: 16px;
}
.s-about-us .main-section .content-left .text-2 { margin-bottom: 42px;
}
.s-about-us .main-section .content-left .btn-read-more { margin-bottom: 50px;
}
.s-about-us .main-section .content-left .image { border-radius: 20px; overflow: hidden; max-height: 378px; height: 100%;
}
.s-about-us .main-section .content-right { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 30px;
}
.s-about-us .main-section .content-right .box-trust { height: 100%; border-radius: 20px; padding: 19px; background-color: var(--Primary);
}
.s-about-us .main-section .content-right .box-trust .has-border { border-radius: 15px; border: 1px dashed var(--Border-3); padding: 57px 34px 50px; height: 100%;
}
.s-about-us .main-section .content-right .box-trust .benefit-list { border-bottom: 1px solid var(--Border-3); padding-bottom: 27px; margin-bottom: 34px;
}
.s-about-us .main-section .content-right .box-trust .benefit-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 16px;
}
.s-about-us .main-section .content-right .box-trust .benefit-list li:not(:last-child) { margin-bottom: 14px;
}
.s-about-us .main-section .content-right .box-trust .benefit-list li i { color: var(--Secondary); font-size: 18px;
}
.s-about-us .main-section .content-right .box-trust .benefit-list li p { color: var(--White); font-size: 18px;
}
.s-about-us .main-section .content-right .box-trust .box-icon-list { margin-bottom: 50px;
}
.s-about-us .main-section .content-right .box-trust .box-icon-list li:not(:last-child) { margin-bottom: 25px;
}
.s-about-us .main-section .content-right .box-trust .box-icon-list li .box-icon { padding: 0px; border: unset; max-width: unset; justify-content: flex-start; gap: 15px;
}
.s-about-us .main-section .content-right .box-trust .box-icon-list li .box-icon .icon { width: 79px; height: 79px; background-color: var(--Text-7);
}
.s-about-us .main-section .content-right .box-trust .box-icon-list li .box-icon .icon i { color: var(--Secondary);
}
.s-about-us .main-section .content-right .box-trust .box-icon-list li .box-icon .icon i.icon-farmer { font-size: 48px;
}
.s-about-us .main-section .content-right .box-trust .box-icon-list li .box-icon .caption { color: var(--White); line-height: 28px; font-size: 19px;
}
.s-about-us .main-section .content-right .box-trust .tf-btn-read { margin-left: 22px;
} .s-service { background-color: var(--Bg-8); position: relative; padding-top: 117px; z-index: 1;
}
.s-service .s-img-item.item-2 { position: absolute; right: 0; bottom: 0; z-index: 0;
}
.s-service .s-img-item.item-3 { position: absolute; bottom: -30px; height: 60px; width: 100%;
}
.s-service .heading-section { z-index: 2; position: relative; padding-bottom: 30px;
}
.s-service .box-icon { position: relative; z-index: 2;
} .has-img-item { position: relative; margin-top: 30px;
}
.has-img-item.mt-0 { margin-top: 0px;
}
.has-img-item.tf-pt-0 .tf-container { padding-top: 0px;
}
.has-img-item .tf-container { padding-top: 30px;
}
.has-img-item .s-img-item.z-3 { z-index: 3;
}
.has-img-item .s-img-item.item-1 { position: absolute; top: -30px; width: 100%;
}
.has-img-item .s-img-item.item-1.t--40 { top: -40px;
}
.has-img-item .s-img-item.item-1 img { height: 60px; width: 100%;
}
.has-img-item .s-img-item.item-bottom { position: absolute; bottom: -30px; width: 100%;
}
.has-img-item .s-img-item.item-bottom img { height: 60px; width: 100%;
} .s-why-us { padding-top: 157px;
}
.s-why-us .main-section { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; gap: 20px;
}
.s-why-us .main-section .video-wrap img { max-width: 550px;
}
.s-why-us .main-section .video-wrap .box-video { position: absolute; top: -26px; left: -37px; background-color: var(--Secondary); padding: 44px 34px; border-radius: 20px;
}
.s-why-us .main-section .video-wrap .box-video a { position: relative; background-color: var(--Bg-6);
}
.s-why-us .main-section .video-wrap .box-video a i { color: var(--White);
}
.s-why-us .main-section .video-wrap .box-video::after { content: ""; position: absolute; top: 9px; bottom: 9px; left: 9px; right: 9px; border-radius: 20px; border: 1px dashed var(--Border-7);
}
.s-why-us .main-section .content-section { max-width: 660px; width: 100%; padding-top: 72px;
}
.s-why-us .main-section .content-section .img-item { margin-bottom: 17px;
}
.s-why-us .main-section .content-section .heading-section { margin-bottom: 25px;
}
.s-why-us .main-section .content-section .text { margin-bottom: 43px;
}
.s-why-us .bot { margin-top: -205px;
}
.s-why-us .bot .benefit-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; max-width: 1140px; width: 100%; margin-left: auto; background-color: var(--Bg-6); border-radius: 20px;
}
.s-why-us .bot .benefit-list li { max-width: 380px; width: 100%; padding: 50px 50px 42px 50px;
}
.s-why-us .bot .benefit-list li:not(:last-child) { position: relative;
}
.s-why-us .bot .benefit-list li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 153px; width: 1px; border-right: 1px dashed var(--Border-3);
}
.s-why-us .bot .benefit-list li:first-child { padding-left: 54px;
}
.s-why-us .bot .benefit-list li i { color: var(--Secondary); font-size: 30px;
}
.s-why-us .bot .benefit-list li .icon { margin-bottom: 23px;
}
.s-why-us .bot .benefit-list li .title { color: var(--White); margin-bottom: 15px; display: block;
}
.s-why-us .bot .benefit-list li .sub { color: var(--Text-3);
} .s-our-commitment { padding-top: 100px;
}
.s-our-commitment.pb-75 { padding-bottom: 75px;
}
.s-our-commitment .main-section { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between;
}
.s-our-commitment .main-section .content-section { max-width: 730px; width: 100%; padding-top: 46px;
}
.s-our-commitment .main-section .image-wrap { position: relative;
}
.s-our-commitment .main-section .image-wrap .image { max-width: 746px; width: 100%; border-radius: 20px;
}
.s-our-commitment .main-section .image-wrap .img-item.item-1 { position: absolute; top: -21px; left: 34px;
}
.s-our-commitment .main-section .box-icon-list { margin-bottom: 45px;
} .s-project { position: relative; z-index: 0;
}
.s-project .heading-side { background-color: var(--Primary); padding: 115px 0px 450px;
}
.s-project .heading-side .s-img-item.item-2 { position: absolute; right: 0; bottom: 0;
}
.s-project .heading-side .s-img-item.item-3 { position: absolute; bottom: -30px; width: 100%;
}
.s-project .heading-side .s-img-item.item-3 img { height: 60px; width: 100%;
}
.s-project .slider-side { background-color: var(--Bg-8); padding-bottom: 100px;
}
.s-project .slider-side .slider-s-project { margin-top: -400px;
}
.s-project .slider-side .bot { margin-top: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;
}
.s-project .s-img-item.item-4 { width: 100%; position: absolute; bottom: -30px; left: 0;
}
.s-project .s-img-item.item-4 img { height: 60px; width: 100%;
} .swiper-pagination.style-1 { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.swiper-pagination.style-1 .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--Primary); opacity: 1; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.swiper-pagination.style-1 .swiper-pagination-bullet:not(:last-child) { margin-right: 24px;
}
.swiper-pagination.style-1 .swiper-pagination-bullet::after { content: ""; position: absolute; width: 15px; height: 15px;
}
.swiper-pagination.style-1 .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 15px; height: 15px; background-color: var(--Text-4);
} .s-testimonial { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding-bottom: 150px;
}
.s-testimonial .testimonial { background-color: transparent;
}
.s-testimonial .content-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
}
.s-testimonial .content-wrap .image { margin-left: -15px;
}
.s-testimonial .content-wrap .image img { height: 682px; object-fit: cover;
}
.s-testimonial .image { position: relative; margin-top: -45px; width: 55%;
}
.s-testimonial .image .img-item { position: absolute;
}
.s-testimonial .content-section { padding-top: 94px; width: 45%; margin-left: -175px; background-color: transparent;
}
.s-testimonial .content-section .heading-section { margin-bottom: 42px; position: relative;
}
.s-testimonial .content-section .heading-section .title { margin-bottom: 22px;
}
.s-testimonial .content-section .heading-section .img-item.item-2 { position: absolute; transform: rotate(20deg); right: 22px; bottom: -32px;
}
.s-testimonial .content-section .heading-section .img-item.item-2 i { font-size: 65px; color: var(--Secondary);
}
.s-testimonial.style-2 { justify-content: center; padding-top: 49px; padding-bottom: 124px;
}
.s-testimonial.style-2 .wrap { margin-left: auto; position: relative; justify-content: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-right: calc((100% - 1320px) / 2); padding-right: calc((1320px - 100%) / 2);
}
.s-testimonial.style-2 .image { padding-top: 114px; height: 100%; position: relative;
}
.s-testimonial.style-2 .image img { position: absolute; max-width: 1010px;
}
.s-testimonial.style-2 .image .sign { position: absolute; bottom: -2%; right: 400px;
}
.s-testimonial.style-2 .content-section { margin-left: 0px; padding-right: 15px;
}
.s-testimonial.style-2 .content-section .quote { line-height: 40px; color: var(--Text-2); margin-bottom: 55px;
}
.s-testimonial.style-2 .content-section .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;
}
.s-testimonial.style-2 .content-section .bot .author-wrap .author { font-size: 18px; color: var(--Text-2);
}
.s-testimonial.style-2.type-2 { padding-bottom: 0px;
}
.s-testimonial.style-2.type-2 .wrap { height: 100%;
}
.s-testimonial.style-2.type-2 .heading-section { margin-bottom: 25px;
}
.s-testimonial.style-2.type-2 .quote { margin-bottom: 33px;
}
.s-testimonial.style-2.type-2 .content-section { padding-top: 60px; position: relative; margin-left: -2px;
}
.s-testimonial.style-2.type-2 .content-section .title { font-size: 35px; line-height: 55px;
}
.s-testimonial.style-2.type-2 .image { padding-top: 0px; margin-top: -50px;
}
.s-testimonial.style-2.type-2 .image img { position: relative; top: -33px; max-width: 800px;
}
.s-testimonial.style-2.type-2 .icon { position: absolute; top: 90px; right: -40px; transform: rotate(25deg);
}
.s-testimonial.style-2.type-2 .icon i { font-size: 65px; color: var(--Secondary);
} .s-counter { background-color: var(--Bg-6); padding: 32px 0px 65px 0px; z-index: 1;
}
.s-counter.has-img-item { margin-top: 25px;
}
.s-counter .s-img-item { pointer-events: none;
}
.s-counter .s-img-item.item-2 { position: absolute; right: 0; bottom: 0;
}
.s-counter .s-img-item.item-bottom { z-index: 1;
} .s-faq { padding-top: 87px; padding-bottom: 86px;
}
.s-faq .content-section { padding-top: 20px; max-width: 722px; width: 100%; margin-right: auto;
}
.s-faq .s-right { max-width: 500px; width: 100%; margin-left: auto;
}
.s-faq .s-right .image-wrap { position: relative; z-index: 0;
}
.s-faq .s-right .image-wrap .image { border-radius: 20px 20px 0px 0px; overflow: hidden;
}
.s-faq .s-right .img-item { position: absolute; right: -20px; top: 30%; z-index: 1;
}
.s-faq .s-right .content { border-radius: 0px 0px 20px 20px; background-color: var(--Text-4); padding: 40px 50px 50px 46px;
}
.s-faq .s-right .content .text { color: var(--White); line-height: 40px; margin-bottom: 38px;
} .s-banner .heading-side .image img { max-height: 450px; width: 100%; object-fit: cover; object-position: bottom;
}
.s-banner .slider-side { margin-top: -450px;
}
.s-banner.style-2 .heading-side { margin-top: 0px;
}
.s-banner.style-2 .slider-side { margin-top: -441px;
} .s-blog-post { position: relative; padding-top: 120px; padding-bottom: 175px;
}
.s-blog-post.pb-44 { padding-bottom: 44px;
}
.s-blog-post.pb-35 { padding-bottom: 35px;
}
.s-blog-post.pt-121 { padding-top: 121px;
}
.s-blog-post .s-slide .btn-s-blog-post { position: absolute; top: 58%; transform: translateY(23px);
}
.s-blog-post .s-slide .btn-s-blog-post:hover svg path { fill: #f8c32c;
}
.s-blog-post .s-slide .btn-s-blog-post.btn-next { right: 171px;
}
.s-blog-post .s-slide .btn-s-blog-post.btn-prev { left: 171px;
} .s-contact-us .contact-list { background-color: var(--Secondary); border-radius: 20px; padding: 57px 50px 56px 50px; position: relative; z-index: 1; gap: 23px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column;
}
.s-contact-us .contact-list::after { content: ""; position: absolute; top: 19px; right: 19px; bottom: 19px; left: 19px; border-radius: 15px; border: 1px dashed var(--Border-7); z-index: 0;
}
.s-contact-us .contact-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; position: relative; z-index: 1; gap: 29px;
}
.s-contact-us .contact-list li .icon { width: 56px; height: 56px; background-color: var(--Bg-6);
}
.s-contact-us .contact-list li .icon i { color: var(--White); font-size: 20px;
}
.s-contact-us .contact-list li .infor { gap: 8px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column;
}
.s-contact-us .contact-list li p { color: var(--Bg-6); font-size: 16px;
}
.s-contact-us .contact-list li p.title { font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 26px; font-weight: 500;
}
.s-contact-us .content-section { height: 100%; background-color: var(--Primary); border-radius: 20px; padding: 92px 54px 77px 51px; position: relative; z-index: 1;
}
.s-contact-us .content-section .heading-section.mb-50 { margin-bottom: 50px;
}
.s-contact-us .content-section .img-item.item-1 { position: absolute; top: 20px; right: 25px;
}
.s-contact-us .content-section .form-send-message input { padding: 15px 19px 11px 22px !important;
}
.s-contact-us .section-wrap { position: relative; top: -136px; bottom: 0;
}
.s-contact-us .section-wrap .image { max-height: 283px; height: 100%; width: 100%;
}
.s-contact-us .section-wrap .image.mh-unset { max-height: unset;
}
.s-contact-us .section-wrap .image .img { max-height: 283px; height: 100%; width: 100%; object-fit: cover;
}
.s-contact-us.style-2 { padding-top: 200px; padding-bottom: 100px; margin-bottom: 0px; background-image: url("../images/item/yellow-field.png"); background-size: contain; background-repeat: no-repeat; background-position: bottom; /* -- */
}
.s-contact-us.style-2.pt-147 { padding-top: 147px;
}
.s-contact-us.style-2.pt-138 { padding-top: 138px;
}
.s-contact-us.style-2.pt-118 { padding-top: 118px;
}
.s-contact-us.style-2.pt-124 { padding-top: 124px;
}
.s-contact-us.style-2.pb-80 { padding-bottom: 80px;
}
.s-contact-us.style-2.pb-82 { padding-bottom: 82px;
}
.s-contact-us.style-2.pb-88 { padding-bottom: 88px;
}
.s-contact-us.style-2.pb-78 { padding-bottom: 78px;
}
.s-contact-us.style-2 .box-map { margin-bottom: 30px;
}
.s-contact-us.style-2 .section-wrap { position: unset; top: unset;
}
.s-contact-us.style-2 .content-section { padding: 26px 54px 77px 49px; background-color: transparent;
}
.s-contact-us.style-2.bg-white { background-color: var(--White);
}
.s-contact-us.style-3 { margin-top: -293px;
} .s-partner { background-color: var(--Bg-8); padding-bottom: 50px;
}
.s-partner.style-4 { padding-bottom: 71px;
}
.s-partner.style-3 { padding-top: 85px; padding-bottom: 57px;
}
.s-partner.pb-100 { padding-bottom: 100px;
}
.s-partner.style-2 { padding: 50px 0px; background-color: transparent; margin-top: 0px;
}
.s-partner.style-2.pb-53-0-75 { padding: 53px 0px 75px 0px;
}
.s-partner.style-2.pb-71 { padding-bottom: 71px;
} .page-title-home-2 { margin-top: 48px; padding: 0px 30px;
} .s-benefit { margin-top: -115px;
}
.s-benefit.mt--217 { margin-top: -217px;
}
.s-benefit .benefit-list { max-width: 1390px; width: 100%; margin: 0px auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; border-radius: 20px; overflow: hidden; position: relative; background-color: var(--Bg-11); z-index: 1; padding: 75px 50px 67px 50px;
}
.s-benefit .benefit-list::after { content: ""; position: absolute; height: 100%; width: 100%; right: 0px; top: 0px; background: linear-gradient(to top, #0d401c, #1c6932); z-index: z;
}
.s-benefit .benefit-list::before { content: ""; position: absolute; top: 25px; right: 25px; left: 25px; bottom: 25px; border-radius: 15px; border: 1px dashed var(--Border-3); z-index: 1;
}
.s-benefit .benefit-list .box-icon { position: relative; z-index: 2; max-width: 300px; width: 100%;
}
.s-benefit .benefit-list .box-icon .icon { width: 70px; height: 70px;
}
.s-benefit .benefit-list .box-icon:not(:last-child)::after { right: -15px;
}
.s-benefit .benefit-list .box-icon:last-child::after { content: none;
}
.s-benefit.style-2 { position: relative;
}
.s-benefit.style-2 .benefit-list { padding: 75px 0px 67px 0px;
}
.s-benefit.style-2 .box-icon { justify-content: flex-start; position: relative;
}
.s-benefit.style-2 .box-icon .icon { margin-bottom: 29px;
}
.s-benefit.style-2 .box-icon .caption { margin-bottom: 17px;
}
.s-benefit.style-2 .box-icon::before { content: ""; position: absolute; width: 1px; height: 189px; border-right: 1px dashed var(--Border-3); right: -15px; top: 50%; transform: translateY(-50%);
}
.s-benefit.style-2 .btn-slide-box-list { position: relative; z-index: 2; top: 50%; transform: translateY(-50%); position: absolute;
}
.s-benefit.style-2 .btn-slide-box-list:hover svg path { fill: #f8c32c;
}
.s-benefit.style-2 .btn-slide-box-list.btn-next { right: 174px;
}
.s-benefit.style-2 .btn-slide-box-list.btn-prev { left: 174px;
} .s-about-us-2 { padding-top: 122px; padding-bottom: 36px; position: relative;
}
.s-about-us-2 .s-img-item.item-1 { position: absolute; content: ""; bottom: -10px; width: 100%; height: 330px; z-index: 0;
}
.s-about-us-2 .s-img-item.item-1 img { height: 100%; object-fit: cover;
}
.s-about-us-2 .content-section { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; height: 100%; position: relative; z-index: 2;
}
.s-about-us-2 .content-section .image { border-radius: 20px; overflow: hidden; max-width: 404px; width: 100%;
}
.s-about-us-2 .content-section .image.image-left { transform: rotate(-9.06deg);
}
.s-about-us-2 .content-section .image.image-right { transform: rotate(9.06deg);
}
.s-about-us-2 .content-section .content-wrap { max-width: 705px; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; height: 100%;
}
.s-about-us-2 .content-section .content-wrap .content { padding: 0px 15px;
}
.s-about-us-2 .content-section .content-wrap .text-1 { font-size: 23px; line-height: 32px; color: var(--Text-2); letter-spacing: 0.2px;
}
.s-about-us-2 .wg-counter { position: relative; z-index: 2;
}
.s-about-us-2 .wg-counter.style-4 { gap: 80px; justify-content: center; padding: 0px;
}
.s-about-us-2 .wg-counter.style-4 .counter-item { max-width: 250px; width: 100%;
} .s-service-2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; padding: 123px 0px 120px; background-image: url("../images/section/bg-s-service-2.png"); margin-top: -20px; background-size: cover; background-repeat: no-repeat; z-index: 999;
}
.s-service-2 .content-section { max-width: 755px; width: 100%; flex-shrink: 0; padding: 47px 92px 50px 149px;
}
.s-service-2 .content-section .button-slide-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 38px; justify-content: flex-end;
}
.s-service-2 .content-section .btn-s-service-2:hover svg path { fill: #f8c32c;
}
.s-service-2 .content-section .tf-btn { margin-bottom: 45px;
}
.s-service-2 .text { margin-bottom: 43px;
}
.s-service-2 .slider-wrap { max-width: 1165px; width: 100%;
} .s-quality-of-life { position: relative; z-index: 0; padding: 103px 0px 112px;
}
.s-quality-of-life .clip-color-text { margin-bottom: 18px;
}
.s-quality-of-life .content-section { position: relative;
}
.s-quality-of-life .content-section .sub { letter-spacing: 0.3px; margin-bottom: 73px;
}
.s-quality-of-life .content-section .img-item.item-3 { position: absolute; left: 0; top: 19%; left: 42px;
}
.s-quality-of-life .content-section .sub { color: var(--Text-2);
}
.s-quality-of-life .content-section .slider-box-icon { max-width: 916px; width: 100%; margin: 0px auto 67px;
}
.s-quality-of-life .img-item { position: absolute;
}
.s-quality-of-life .img-item.item-1 { top: -30px; right: -4px;
}
.s-quality-of-life .img-item.item-2 { bottom: -94px; left: -4px;
}
.s-quality-of-life.style-2 { position: relative; padding: 108px 0px 165px;
}
.s-quality-of-life.style-2 .content-section { z-index: 2;
}
.s-quality-of-life.style-2 .content-section .img-item.item-3 { top: 34%; left: -35px;
}
.s-quality-of-life.style-2::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 300px; background-image: url("../images/item/gree-field.jpg"); background-position: center; background-size: cover; z-index: 0;
} .s-what-we-do { padding: 93px 0px 0px; background-image: url(../images/section/s-what-we.png); background-repeat: no-repeat; background-size: cover; margin-bottom: 70px; padding-bottom: 15px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; position: relative; z-index: 2;
}
.s-what-we-do .heading-section .title { margin-bottom: 23px;
}
.s-what-we-do .heading-section .text { margin-bottom: 41px;
}
.s-what-we-do .content-wrap { align-items: end; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; max-width: 1920px; width: 100%;
}
.s-what-we-do .content-section { margin-bottom: -70px; margin-left: auto; background-color: var(--Primary); border-radius: 20px; max-width: 661px; width: 100%; padding: 75px 69px 93px 69px; position: relative;
}
.s-what-we-do .content-section .img-item.item-1 { position: absolute; bottom: 0; right: 0;
}
.s-what-we-do .content-section .video-wrap { position: absolute; top: 33px; right: 36px; display: block; width: 74px; height: 74px;
}
.s-what-we-do .content-section .video-wrap a { width: 74px; height: 74px;
}
.s-what-we-do .we-do-list { background-image: url("../images/item/s-we-do.png"); background-repeat: no-repeat; background-size: cover; padding: 66px 55px 62px 77px; max-width: 940px; width: 100%; margin-bottom: -18px;
}
.s-what-we-do .we-do-list ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 61px;
}
.s-what-we-do .we-do-list ul li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 16px; max-width: 300px; width: 100%;
}
.s-what-we-do .we-do-list ul li p { color: var(--Bg-6);
}
.s-what-we-do .we-do-list ul li p i { padding-right: 10px;
}
.s-what-we-do .we-do-list ul li p.title { font-weight: 600; font-size: 20px; font-family: "Work Sans", sans-serif;
} .s-our-agriculture { padding-top: 87px; padding-bottom: 67px;
}
.s-our-agriculture .content-section { margin-bottom: 74px;
}
.s-our-agriculture .content-section .image-wrap { position: relative; margin-right: -30px;
}
.s-our-agriculture .content-section .image-wrap .image { max-width: 550px; width: 100%; border-radius: 50%; overflow: hidden;
}
.s-our-agriculture .content-section .content { padding-top: 61px; max-width: 660px; width: 100%; margin-left: auto;
}
.s-our-agriculture .content-section .content .text { margin-bottom: 34px;
}
.s-our-agriculture.style-2 { background-color: var(--Primary); position: relative; padding-bottom: 250px; padding-top: 44px; z-index: 1;
}
.s-our-agriculture.style-2 .s-img-item { position: absolute;
}
.s-our-agriculture.style-2 .s-img-item.item-1 { bottom: 0; right: 0px; z-index: 0;
}
.s-our-agriculture.style-2 .s-img-item.item-2 { top: -30px; width: 100%;
}
.s-our-agriculture.style-2 .s-img-item.item-2 img { width: 100%;
}
.s-our-agriculture.style-2 .counter-wrap { position: relative; margin-bottom: 80px; padding-bottom: 39px;
}
.s-our-agriculture.style-2 .counter-wrap::after { content: ""; position: absolute; width: 100%; max-width: 1290px; left: 50%; transform: translateX(-50%); bottom: 0; height: 2px; border-bottom: 1px dashed var(--Border-3);
}
.s-our-agriculture.style-2 .counter-wrap .wrap { height: 100%;
}
.s-our-agriculture.style-2 .counter-wrap .wrap p { color: var(--White); line-height: 40px; margin-top: 13px;
}
.s-our-agriculture.style-2 .counter-wrap .wrap p span { position: relative;
}
.s-our-agriculture.style-2 .counter-wrap .wrap p span a { color: var(--White);
}
.s-our-agriculture.style-2 .counter-wrap .wrap p span::after { content: ""; position: absolute; width: 100%; height: 2px; background-color: var(--White); bottom: 0; left: 0;
}
.s-our-agriculture.style-2 .counter-wrap .wg-counter { padding: 0px; gap: 25px; max-width: unset;
}
.s-our-agriculture.style-2 .counter-wrap .wg-counter .icon { margin-bottom: 0px;
}
.s-our-agriculture.style-2 .counter-wrap .wg-counter .icon i { font-size: 24px;
}
.s-our-agriculture.style-2 .counter-wrap .wg-counter .counter-item { justify-content: flex-start; align-items: start; gap: 17px;
}
.s-our-agriculture.style-2 .counter-wrap .wg-counter .counter-item .title { color: var(--White);
}
.s-our-agriculture.style-2 .counter-wrap .wg-counter .counter-item .counter { white-space: nowrap; margin-bottom: 0px;
}
.s-our-agriculture.style-2 .content-section { position: relative; z-index: 2;
}
.s-our-agriculture.style-2 .content-section .image-wrap { margin-right: 0px; position: relative;
}
.s-our-agriculture.style-2 .content-section .image-wrap::after { content: ""; position: absolute; width: 1px; height: 1px; top: 92px; left: 73px; z-index: 0; box-shadow: 0px 1px 105px 80px var(--Secondary); border-radius: 50%;
}
.s-our-agriculture.style-2 .content-section .image { max-width: 478px; position: relative; z-index: 2;
}
.s-our-agriculture.style-2 .content-section .exprerience { z-index: 3; left: -37px;
}
.s-our-agriculture.style-2 .content-section .content { max-width: unset; width: unset; margin-left: unset; padding-top: 31px;
}
.s-our-agriculture.style-2 .content-section .content .text { margin-bottom: 42px;
}
.s-our-agriculture.style-2.type-2 { padding: 0px; background-color: transparent;
}
.s-our-agriculture.style-2.type-2 .counter-wrap .text { color: var(--Text-2);
}
.s-our-agriculture.style-2.type-2 .counter-wrap .text a { color: var(--Text-2);
}
.s-our-agriculture.style-2.type-2 .counter-wrap .text span::after { background-color: var(--Text-2);
}
.s-our-agriculture.style-2.type-2 .counter-wrap .wg-counter .counter-item .title { color: var(--Text-2);
}
.s-our-agriculture.style-2.type-2 .counter-wrap::after { border-color: var(--Border);
}
.s-our-agriculture.style-3 { background-color: var(--Bg-8); padding: 109px 0px 293px 0px; margin-top: -30px; position: relative;
}
.s-our-agriculture.style-3 .content-section { margin-bottom: 0px;
}
.s-our-agriculture.style-3 .s-content-wrap .content { max-width: 669px;
}
.s-our-agriculture.style-3 .s-content-wrap .image-wrap { margin-left: -8px;
}
.s-our-agriculture.style-3 .s-content-wrap .image-wrap .image { max-width: 550px;
}
.s-our-agriculture.style-3 .s-content-wrap .image-wrap .image img { max-width: unset;
}
.s-our-agriculture.style-3 .s-img-item { position: absolute;
}
.s-our-agriculture.style-3 .s-img-item.item-1 { top: 60px; transform: rotateY(180deg); left: -30px;
}
.s-our-agriculture.style-3 .s-img-item.item-2 { width: 100%; bottom: -20px;
}
.s-our-agriculture.style-3 .s-img-item.item-2 img { width: 100%;
} .s-testimonial-2 { padding-top: 93px; padding-bottom: 130px;
}
.s-testimonial-2 .heading-section { position: relative; margin-bottom: 69px;
}
.s-testimonial-2 .heading-section .title { margin-bottom: 22px;
}
.s-testimonial-2 .img-item.item-2 { position: absolute; transform: rotate(20deg); top: -14px; right: 73px;
}
.s-testimonial-2 .img-item.item-2 i { color: var(--Secondary); font-size: 55px;
}
.s-testimonial-2 .wg-counter { padding: 0px; width: max-content;
}
.s-testimonial-2 .wg-counter.style-6 { gap: 26px; margin-bottom: 14px;
}
.s-testimonial-2 .wg-counter .counter { margin-bottom: 0px;
}
.s-testimonial-2 .wg-counter .counter .sub-odo { bottom: -11px; left: -17px;
}
.s-testimonial-2 .wg-counter .icon { width: 57px; height: 57px;
}
.s-testimonial-2 .wg-counter .icon i { font-size: 30px;
}
.s-testimonial-2 .counter-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-end; align-items: end;
}
.s-testimonial-2 .counter-wrap .img-item { max-width: 300px; width: 100%;
}
.s-testimonial-2 .counter-wrap .img-item img { width: 100%;
}
.s-testimonial-2 .s-slider { position: relative;
}
.s-testimonial-2 .s-slider .testimonial:hover { box-shadow: unset;
}
.s-testimonial-2 .s-slider .btn-slide-testimonial-2 { position: absolute; top: 50%; transform: translateY(-6px);
}
.s-testimonial-2 .s-slider .btn-slide-testimonial-2:hover svg path { fill: #f8c32c;
}
.s-testimonial-2 .s-slider .btn-slide-testimonial-2.btn-next { right: 169px;
}
.s-testimonial-2 .s-slider .btn-slide-testimonial-2.btn-prev { left: 169px;
} .s-happy-farm .bg-section { position: relative;
}
.s-happy-farm .bg-section img { max-height: 350px; height: 100%; object-position: bottom; object-fit: cover; width: 100%;
}
.s-happy-farm .bg-section .s-img-item.item-1 { position: absolute; bottom: -54px; width: 100%;
}
.s-happy-farm .bg-section .s-img-item.item-1 img { width: 100%;
}
.s-happy-farm .content-section { margin-top: -355px;
}
.s-happy-farm .content-section .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; background-color: var(--Bg-6); border-radius: 20px; position: relative;
}
.s-happy-farm .content-section .content .heading-section { width: 100%; max-width: 748px; padding-top: 80px; margin-left: auto; margin-bottom: 0px;
}
.s-happy-farm .content-section .content .heading-section .top { position: relative; width: max-content;
}
.s-happy-farm .content-section .content .heading-section .top .sub-title { line-height: 35px;
}
.s-happy-farm .content-section .content .heading-section .top .img-item.item-2 { position: absolute; right: -50px; top: -29px;
}
.s-happy-farm .content-section .content .heading-section .title { margin-bottom: 16px;
}
.s-happy-farm .content-section .content .heading-section .text { margin-bottom: 41px;
}
.s-happy-farm .content-section .content .image-wrap { position: relative; overflow: hidden; flex-shrink: 0;
}
.s-happy-farm .content-section .content .img-item.item-1 { position: absolute; bottom: 0;
} .s-meet-farmer { background-image: url("../images/section/s-meet.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; padding-top: 185px; padding-bottom: 6px; z-index: 1;
}
.s-meet-farmer .content-section { position: relative; z-index: 3;
}
.s-meet-farmer .s-img-item.item-2 { position: absolute; bottom: -30px;
}
.s-meet-farmer .heading-section { background-color: var(--Primary); border-radius: 20px; padding: 75px 80px 80px 82px; margin-bottom: -30px;
}
.s-meet-farmer .heading-section .img-item { margin-bottom: 18px;
}
.s-meet-farmer .heading-section .title { margin-bottom: 26px;
}
.s-meet-farmer .heading-section .text { margin-bottom: 41px;
} .s-our-mission { margin-top: 0px;
}
.s-our-mission .content-section { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px; margin-top: -275px; position: relative; z-index: 6;
}
.s-our-mission .content-section .slider-wrap { max-width: 655px; width: 100%; background-color: var(--Secondary); border-radius: 20px; padding: 77px 60px 80px 64px; position: relative;
}
.s-our-mission .content-section .slider-wrap::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background-image: url("../images/item/s-our-mission.png");
}
.s-our-mission .content-section .slider-wrap .content p { color: var(--Bg-6);
}
.s-our-mission .content-section .slider-wrap .content p.title { font-size: 26px; margin-bottom: 27px;
}
.s-our-mission .content-section .slider-wrap .content p.text { font-size: 30px; margin-bottom: 39px; line-height: 40px;
}
.s-our-mission .content-section .slider-wrap .btn-slide-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; margin-right: 22px; gap: 38px;
}
.s-our-mission .btn-slide-our-mission:hover svg path { fill: var(--White);
}
.s-our-expertise .heading-section .image { width: 100%; height: 591px; object-fit: cover;
}
.s-our-expertise .heading-section .img-item.item-2 { margin-top: -36px;
}
.s-our-expertise .s-slider { margin-top: -566px; position: relative;
}
.s-our-expertise .s-slider .btn-slider-provide { position: absolute; width: 70px; height: 70px; border-radius: 50%; background-color: var(--White); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.s-our-expertise .s-slider .btn-slider-provide:hover { background-color: var(--Secondary);
}
.s-our-expertise .s-slider .btn-slider-provide img { width: 36px;
}
.s-our-expertise .s-slider .btn-slider-provide.btn-next { top: 57%; transform: translateY(-50%); right: 185px;
}
.s-our-expertise .s-slider .btn-slider-provide.btn-prev { top: 57%; transform: translateY(-50%); left: 185px;
}
.s-our-expertise .s-slider .pagination-slider-provide { display: none;
} .s-quality-of-life-2 { padding: 108px 0px 91px 0px;
}
.s-quality-of-life-2 .clip-color-text { margin-bottom: 18px;
}
.s-quality-of-life-2 .content-section { margin-bottom: 76px; position: relative;
}
.s-quality-of-life-2 .content-section .sub { letter-spacing: 0.2px; color: var(--Text-2);
}
.s-quality-of-life-2 .img-item.item-1 { position: absolute; left: 44px; top: 37%; transform: translateY(-50%);
}
.s-quality-of-life-2 .swiper-slide { min-width: 0;
}
.s-quality-of-life-2 .box-icon { max-width: unset; width: 100%; position: relative; padding: 0px 15px;
}
.s-quality-of-life-2 .box-icon .icon i { color: var(--White); font-size: 30px;
}
.s-quality-of-life-2 .box-icon::after { content: ""; position: absolute; right: -15px; top: 0; height: 100%; width: 2px; border-right: 1px dashed var(--Border-12); z-index: 1;
}
.s-quality-of-life-2 .box-icon::before { position: absolute; content: ""; height: 11px; width: 11px; border-radius: 50%; right: -15px; transform: translateX(50%); background-color: var(--Secondary); z-index: 2; -webkit-animation: dotAnimationTopToBot 30s infinite linear; -khtml-animation: dotAnimationTopToBot 30s infinite linear; -moz-animation: dotAnimationTopToBot 30s infinite linear; -ms-animation: dotAnimationTopToBot 30s infinite linear; -o-animation: dotAnimationTopToBot 30s infinite linear; animation: dotAnimationTopToBot 30s infinite linear;
}
.s-quality-of-life-2 .box-icon.bottom::before { top: unset; -webkit-animation: dotAnimationBotToTop 30s infinite linear; -khtml-animation: dotAnimationBotToTop 30s infinite linear; -moz-animation: dotAnimationBotToTop 30s infinite linear; -ms-animation: dotAnimationBotToTop 30s infinite linear; -o-animation: dotAnimationBotToTop 30s infinite linear; animation: dotAnimationBotToTop 30s infinite linear;
} .s-why-choose { position: relative; padding-bottom: 80px;
}
.s-why-choose .image-wrap { max-width: 497px; width: 100%; margin-right: auto; position: relative;
}
.s-why-choose .image-wrap .image { border-radius: 20px; overflow: hidden;
}
.s-why-choose .notice { position: absolute; top: 51px; left: -70px; background-color: var(--Secondary); max-width: 291px; width: 100%; border-radius: 20px; padding: 50px 38px 39px 38px;
}
.s-why-choose .notice .icon { background-color: var(--Bg-6); margin-bottom: 25px; transform: rotate(45deg); width: 65px; height: 65px;
}
.s-why-choose .notice .icon i { color: var(--White); font-size: 35px;
}
.s-why-choose .notice .img-item.item-1 { position: absolute; right: 64px; bottom: -20px;
}
.s-why-choose .notice .text { line-height: 40px; color: var(--Bg-6);
}
.s-why-choose .s-img-item.item-1 { position: absolute; top: 0; right: 30px;
}
.s-why-choose .content-section { padding-top: 56px; max-width: 720px; width: 100%; margin-left: auto;
}
.s-why-choose .content-section .heading-section { margin-bottom: 35px;
}
.s-why-choose .content-section .heading-section .title { margin-bottom: 23px;
}
.s-why-choose .content-section .text { margin-bottom: 20px;
}
.s-why-choose .content-section .benefit-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-bottom: 43px; gap: 60px;
}
.s-why-choose .content-section .benefit-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 20px;
}
.s-why-choose .content-section .benefit-list li .icon i { font-size: 25px; color: var(--Text-4);
}
.s-why-choose .content-section .benefit-list li .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 3px;
}
.s-why-choose .content-section .benefit-list li .content .title { color: var(--Text-2); font-size: 23px; line-height: 55px; font-weight: 600; font-family: "Work Sans", sans-serif;
} .s-project-2 .s-content-wrap { background-color: var(--Primary); padding: 143px 0px 398px; position: relative;
}
.s-project-2 .s-img-item { position: absolute;
}
.s-project-2 .s-img-item.item-2 { bottom: -15px;
}
.s-project-2 .s-img-item.item-3 { right: 0px; bottom: 0px;
}
.s-project-2 .content-section { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;
}
.s-project-2 .content-section .heading-section { max-width: 440px; width: 100%;
}
.s-project-2 .content-section .heading-section .sub-title { color: var(--Secondary);
}
.s-project-2 .content-section .heading-section .title { color: var(--White);
}
.s-project-2 .content-section .text { max-width: 440px; width: 100%; color: var(--White);
}
.s-project-2 .content-section .btn-read-more { white-space: nowrap;
}
.s-project-2 .s-slider { margin-top: -350px; background-color: var(--Bg-8);
}
.s-project-2 .s-slider .wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; margin-bottom: 52px;
}
.s-project-2 .s-slider .wrap .menu-tab { margin-bottom: 0px;
}
.s-project-2 .s-slider .wrap .btn-slide-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 38px;
}
.s-project-2 .s-slider .wrap .btn-slide-wrap img { max-width: 58px;
} .s-shopping { background-color: var(--Bg-8); margin-top: -20px; padding: 108px 0px 121px 0px; position: relative;
}
.s-shopping .btn-slide-wrap .btn-slider-shopping { position: absolute; right: 15px; z-index: 2;
}
.s-shopping .btn-slide-wrap .btn-slider-shopping:hover svg path { fill: #f8c32c;
}
.s-shopping .btn-slide-wrap .btn-slider-shopping.btn-next { top: 54%;
}
.s-shopping .btn-slide-wrap .btn-slider-shopping.btn-prev { top: 42%;
}
.s-shopping .content-section { padding-top: 30px; position: relative;
}
.s-shopping .content-section .title { margin-bottom: 27px;
}
.s-shopping .content-section .text { margin-bottom: 42px;
}
.s-shopping .content-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px;
}
.s-shopping .content-wrap .heading-section { max-width: 575px; width: 100%;
}
.s-shopping .content-wrap .s-slider { max-width: 850px; width: 100%;
}
.s-shopping .s-img-item { position: absolute;
}
.s-shopping .s-img-item.item-1 { bottom: -30px; width: 100%; z-index: 1;
}
.s-shopping .s-img-item.item-1 img { width: 100%;
}
.s-shopping .s-img-item.item-2 { bottom: 0px; right: 0px; z-index: 0;
} .s-testimonial-3 { position: relative; padding: 95px 0px 128px 0px;
}
.s-testimonial-3 .heading-section { margin-bottom: 57px;
}
.s-testimonial-3 .sub-title i { position: absolute; color: var(--Secondary); font-size: 55px; transform: rotate(25deg) translateX(39px); top: -47px;
}
.s-testimonial-3 .testimonial-thumbs .slider-testimonial-3-thumb { max-width: 265px; width: 100%; margin-bottom: 33px;
}
.s-testimonial-3 .testimonial-thumbs .slider-testimonial-3-thumb .image-avt { width: 69px; height: 69px; border-radius: 50px; border: 2px solid var(--Secondary); overflow: hidden; cursor: pointer;
}
.s-testimonial-3 .testimonial-thumbs .slider-testimonial-3 .testimonial:hover { box-shadow: unset;
}
.s-testimonial-3 .testimonial-thumbs .slider-testimonial-3 .testimonial .infor .name { font-family: "Work Sans", sans-serif; font-weight: 600;
}
.s-testimonial-3 .s-slider { position: relative;
}
.s-testimonial-3 .s-slider .btn-slide-testimonial-3 { position: absolute; z-index: 3; top: 44%; transform: translateY(1px);
}
.s-testimonial-3 .s-slider .btn-slide-testimonial-3:hover svg path { fill: #f8c32c;
}
.s-testimonial-3 .s-slider .btn-slide-testimonial-3.btn-prev { left: 170px;
}
.s-testimonial-3 .s-slider .btn-slide-testimonial-3.btn-next { right: 170px;
}
.s-testimonial-3 .s-img-item { position: absolute; bottom: 0;
} .s-farm-event { background-color: transparent; padding: 0px; margin-top: 0px;
}
.s-farm-event .s-content-wrap { background-color: var(--Primary); padding: 109px 0px 386px; position: relative;
}
.s-farm-event .s-slider { margin-top: -336px; background-color: transparent;
}
.s-farm-event .content-section { position: relative; z-index: 2;
}
.s-farm-event .content-section .heading-section { max-width: 520px;
}
.s-farm-event .content-section .text { max-width: 520px;
}
.s-farm-event .content-section .btn-right { max-width: 190px; width: 100%; display: flex; justify-content: flex-end;
}
.s-farm-event .s-img-item { z-index: 1;
} .s-happy-farm-2 { background-image: url("../images/section/s-happy.jpg"); background-repeat: no-repeat; background-position: bottom; background-size: cover; position: relative; padding: 120px 0px 103px; margin-bottom: -20px;
}
.s-happy-farm-2 .content-section { position: relative; z-index: 5;
}
.s-happy-farm-2 .heading-section { padding: 21px 0px 0px 24px;
}
.s-happy-farm-2 .heading-section .sub-title { font-size: 35px; margin-bottom: 20px;
}
.s-happy-farm-2 .heading-section .text { margin-bottom: 42px;
}
.s-happy-farm-2 .heading-section .top { position: relative; width: max-content;
}
.s-happy-farm-2 .heading-section .top .img-item.item-2 { position: absolute; right: -50px; top: -28px;
}
.s-happy-farm-2::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: linear-gradient(to right, rgba(6, 32, 15, 0.85) 20%, transparent);
}
.s-happy-farm-2 .s-img-item.item-2 { position: absolute; left: 0; bottom: -11px;
}
.s-happy-farm-2.style-2 { margin-bottom: -23px;
} .s-welcome-to { position: relative; z-index: 1;
}
.s-welcome-to .text-wrap { padding: 50px 0px 0px 16px;
}
.s-welcome-to .text-wrap .text-1 { margin-bottom: 15px;
}
.s-welcome-to .s-content-wrap { position: relative; padding-bottom: 293px;
}
.s-welcome-to .s-content-wrap .img-item { margin-bottom: 29px;
}
.s-welcome-to .s-content-wrap .s-img-item.item-1 { position: absolute; bottom: 0; width: 100%;
}
.s-welcome-to .s-content-wrap .s-img-item.item-1 img { width: 100%;
}
.s-welcome-to .s-content-wrap-2 { position: relative; margin-top: -15px; padding-bottom: 78px;
}
.s-welcome-to .s-content-wrap-2 .slider-gallery { margin-top: -240px; margin-bottom: 80px;
}
.s-welcome-to .s-content-wrap-2 .box-text { z-index: 2; position: relative;
}
.s-welcome-to .s-content-wrap-2 .s-img-item { position: absolute;
}
.s-welcome-to .s-content-wrap-2 .s-img-item.item-1 { top: 0; height: 100%; width: 100%; z-index: 0;
}
.s-welcome-to .s-content-wrap-2 .s-img-item.item-1 img { width: 100%; height: 100%;
} .s-our-history { background-color: var(--Bg-6); padding-top: 53px; padding-bottom: 53px; margin-top: 0;
}
.s-our-history .img-item { margin-bottom: 16px;
}
.s-our-history .content-section { gap: 85px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
}
.s-our-history .content-section .image { max-width: 629px; width: 100%; border-radius: 20px; overflow: hidden;
}
.s-our-history .content-section .heading-section { margin-top: 74px;
}
.s-our-history .content-section .title { margin-bottom: 26px;
}
.s-our-history .content-section .text { margin-bottom: 42px;
}
.s-our-history .wg-exprerience { left: unset; top: -11px; right: 105px;
}
.s-our-history .s-img-item.item-3 { position: absolute; right: 0; bottom: 0;
} .offer-wrap { max-width: 410px; width: 100%;
}
.offer-wrap .caption { font-family: "Work Sans", sans-serif; font-weight: 700; font-size: 25px; line-height: 50px; color: var(--Text-2); padding-bottom: 10px; letter-spacing: 0.5px; margin-bottom: 22px; position: relative;
}
.offer-wrap .caption::after { content: ""; position: absolute; width: 88px; height: 3px; background-color: var(--Secondary); left: 0; bottom: 0;
}
.offer-wrap .list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 14px;
}
.offer-wrap .list i { color: var(--Text-4); font-size: 18px;
}
.offer-wrap .list p { font-size: 18px; line-height: 42px; font-weight: 600; color: var(--Text-2);
} .wg-tips { max-width: 400px; width: 100%; padding: 17px 30px 26px 27px; background-color: var(--Bg-8); border-radius: 20px;
}
.wg-tips .caption { font-size: 20px; line-height: 50px; color: var(--Text-2);
}
.wg-tips .sub { margin-bottom: 14px;
}
.wg-tips .list li { position: relative;
}
.wg-tips .list li:not(:last-child) { margin-bottom: 4px;
}
.wg-tips .list li::after { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: var(--Text-4);
}
.wg-tips .list li p { color: var(--Text-2); font-weight: 600; padding-left: 19px;
} .s-other-commitment { padding-top: 169px; position: relative; padding-bottom: 124px;
}
.s-other-commitment .content .img-item { margin-bottom: 25px;
}
.s-other-commitment .content .title { margin-bottom: 28px;
}
.s-other-commitment .other-list ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column;
}
.s-other-commitment .other-list ul li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative;
}
.s-other-commitment .other-list ul li .icon { position: absolute; left: 1px; top: 4px;
}
.s-other-commitment .other-list ul li .icon i { font-size: 16px; color: var(--Text-4);
}
.s-other-commitment .other-list ul li p { text-indent: 30px; letter-spacing: 0.2px;
}
.s-other-commitment .other-list ul li:not(:last-child) { margin-bottom: 19px;
}
.s-other-commitment .image-wrap { margin-top: -46px; position: relative; overflow: hidden; border-radius: 50%; margin-left: auto; max-width: 568px; width: 100%;
}
.s-other-commitment .image-wrap .image { border-radius: 50%;
}
.s-other-commitment .image-wrap .img-item.item-1 { position: absolute; bottom: 0; right: 160px;
}
.s-other-commitment .s-img-item { position: absolute;
}
.s-other-commitment .s-img-item.item-1 { top: 58px; right: -31px;
}
.s-other-commitment .s-img-item.item-2 { bottom: -62px; left: -9px;
} .s-video { position: relative; padding-bottom: 115px;
}
.s-video .video-wrap { max-width: 595px; width: 100%; margin-right: auto;
}
.s-video .heading-section { margin-bottom: 24px;
}
.s-video .text { margin-bottom: 42px;
}
.s-video .content-section { margin-top: 52px;
}
.s-video .content-section .img-item { margin-bottom: 22px;
}
.s-video .s-img-item { position: absolute; top: -11px; right: 116px;
} .s-question { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: var(--Bg-8);
}
.s-question .heading-section { margin-bottom: 43px;
}
.s-question .content-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; width: 100%;
}
.s-question .content-wrap .title { margin-bottom: 17px;
}
.s-question .content-wrap .content { padding: 136px 100px 126px 311px; width: 73.5%; margin-left: auto; position: relative; z-index: 2;
}
.s-question .content-wrap .content .bot { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 26px;
}
.s-question .content-wrap .image-wrap { position: relative; width: 44.5%;
}
.s-question .content-wrap .image-wrap .img-item { position: absolute; bottom: -15px; left: 0;
}
.s-question .content-wrap .image { height: 100%;
}
.s-question .content-wrap .image img { height: 100%; object-fit: cover;
}
.s-question .s-img-item.item-1 { z-index: 2;
}
.s-question .s-img-item.item-2 { position: absolute; bottom: 0; left: 0; z-index: 0;
} .s-we-are { background-color: var(--Secondary); position: relative; z-index: 1;
}
.s-we-are .s-img-item.item-1 { position: absolute; bottom: -10px; left: 0; width: 100%;
}
.s-we-are .s-img-item.item-1 img { width: 100%;
} .we-are-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 45px; padding: 77px 0px 75px 0px;
}
.we-are-wrap .image { border-radius: 50%; overflow: hidden; max-width: 219px; width: 100%;
}
.we-are-wrap p,
.we-are-wrap a { color: var(--Bg-6);
}
.we-are-wrap .title { font-size: 26px; line-height: 26px; font-weight: 600;
}
.we-are-wrap .content { display: flex; flex-direction: column; gap: 25px;
} .s-mission { position: relative; padding-top: 102px;
}
.s-mission .heading-section { margin-bottom: 65px;
}
.s-mission .heading-section .title { margin-bottom: 24px;
}
.s-mission .heading-section .text { color: var(--Text-2); line-height: 40px;
}
.s-mission .slider-gallery { margin-bottom: -200px;
}
.s-mission .s-img-item.item-1 { position: absolute; top: -110px; right: 310px; transform: rotate(-20deg);
}
.s-mission .s-img-item.item-1 .wg-exprerience { position: relative; top: unset; left: unset;
} .s-history { background-color: var(--Bg-16); padding-top: 299px; padding-bottom: 124px; margin-top: 20px;
} .s-pricing { background-color: var(--Bg-8); padding: 153px 0px 0px; margin-bottom: 170px;
}
.s-pricing .s-img-item.item-2 { position: absolute; bottom: -20px; width: 100%;
}
.s-pricing .s-img-item.item-2 img { width: 100%;
}
.s-pricing .wg-pricing { position: relative; z-index: 2; margin-bottom: -170px;
} .hidden { display: none;
} .grid-portfolio.item { padding: 30px 0px 0px;
}
.grid-portfolio .box-portfolio:hover .sub { margin-bottom: 14px;
}
.grid-portfolio .box-portfolio:hover .content { bottom: 77px;
}
.grid-portfolio .box-portfolio:hover .text { margin-bottom: 32px;
}
.grid-portfolio .box-portfolio:hover .title { margin-bottom: 30px; padding-bottom: 19px;
}
.grid-portfolio .box-portfolio .content { bottom: -152px;
}
.grid-portfolio .box-portfolio .title { line-height: 30px; padding-bottom: 19px;
}
.grid-portfolio .box-portfolio .sub { margin-bottom: 14px;
}
.grid-portfolio .box-portfolio .bot .icon { width: 58px; height: 58px;
}
.grid-portfolio .box-portfolio .bot .icon i { font-size: 28px;
} .btn-loadMore.mt-50 { margin-top: 50px;
} .more-portfolio.item { margin: 30px 0px 0px;
} .s-box-wrap { background-color: var(--Bg-8); position: relative; padding: 77px 0px 98px 0px;
}
.s-box-wrap .wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 27px;
}
.s-box-wrap .wrap .box-icon:not(:last-child) { border-right: 1px dashed var(--Border-13);
}
.s-box-wrap .wrap .box-icon:last-child { content: none !important;
}
.s-box-wrap .s-img-item { position: absolute;
}
.s-box-wrap .s-img-item.item-1 { bottom: 0; right: 0;
}
.s-box-wrap .s-img-item.item-2 { bottom: -30px; left: 0; width: 100%;
}
.s-box-wrap .s-img-item.item-2 img { width: 100%;
} .s-relate-product { padding-top: 100px; position: relative; z-index: 2;
}
.s-relate-product .title { margin-bottom: 67px;
}
.s-relate-product .btn-slide-product { position: absolute; top: 50%;
}
.s-relate-product .btn-slide-product i { font-size: 25px; color: var(--Primary);
}
.s-relate-product .btn-slide-product.btn-next { right: -20px;
}
.s-relate-product .btn-slide-product.btn-prev { left: -20px;
} .price-slider { position: relative; width: 300px; margin: 50px auto;
}
.price-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #ddd; position: absolute; pointer-events: none;
}
.price-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #007bff; cursor: pointer; pointer-events: all; position: relative;
}
.price-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #007bff; cursor: pointer; position: relative;
}
.price-slider .slider-values { display: flex; justify-content: space-between; padding-top: 20px;
}
.price-slider #min-value,
.price-slider #max-value { font-weight: bold;
} .tf-shop-control { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;
}
.tf-shop-control .control-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px;
}
.tf-shop-control .control-left p { color: var(--Text-2);
}
.tf-shop-control .control-left .btn-view { width: 46px; height: 46px; border-radius: 50%; background-color: var(--Primary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.tf-shop-control .control-left .btn-view i { color: var(--Secondary);
} .s-farm-tour { padding-top: 105px;
} .s-award { padding-top: 118px; padding-bottom: 68px;
}
.s-award .headding-text { height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding-top: 16px; padding-bottom: 30px;
}
.s-award .top { padding-bottom: 68px;
}
.s-award .img-item-award { max-width: 296px; max-height: 330px; height: 100%; width: 100%; border-radius: 10px; border: 1px solid var(--Border); margin: 0px 17px 0px auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.s-award .image-award { border-radius: 20px; overflow: hidden; position: relative;
}
.s-award .image-award .tf-overlay { content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--Primary); opacity: 0; border-radius: 20px; transform: scale(0.5); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.s-award .image-award a { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; display: block;
}
.s-award .image-award a::after { content: ""; z-index: 3; width: 1px; height: 27px; background-color: #fff; position: absolute; top: calc(50% - 14px); left: calc(50% - 1px); transform: scale(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.s-award .image-award a::before { content: ""; width: 27px; height: 1px; z-index: 3; background-color: #fff; position: absolute; top: calc(50% - 1px); left: calc(50% - 14px); transform: scale(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.s-award .image-award img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; z-index: 1;
}
.s-award .image-award:hover a::after, .s-award .image-award:hover a::before { transition-delay: 0.2s; transform: scale(1);
}
.s-award .image-award:hover img { transform: scale(1.1);
}
.s-award .image-award:hover .tf-overlay { opacity: 0.5; transform: scale(1);
} .wg-award-winner { margin-bottom: 40px;
}
.wg-award-winner .title { font-size: 25px; line-height: 24px; color: var(--Text-2); margin-bottom: 23px;
}
.wg-award-winner .text-wrap { font-family: "Work Sans", sans-serif; line-height: 30px; font-weight: 500; color: var(--Text-2);
}
.wg-award-winner .text-wrap.mb-18 { margin-bottom: 18px;
}
.wg-award-winner .text-wrap span { font-weight: normal; color: var(--Text); line-height: 30px; font-family: "Nunito Sans", sans-serif;
}
.wg-award-winner .caption { font-weight: 500; margin-bottom: 10px; color: var(--Text-2);
}
.wg-award-winner .text { margin-bottom: 10px; letter-spacing: 0.1px;
}
.wg-award-winner .text.s4 { margin-bottom: 0px;
}
.wg-award-winner .text.s4 a { color: var(--Text);
} .s-other-event { padding-top: 125px; padding-bottom: 72px;
}
.s-other-event .heading-section { margin-bottom: 72px;
} .s-commitment-2 { padding-bottom: 99px; position: relative;
}
.s-commitment-2 .s-img-item.item-1 { position: absolute; bottom: 0; right: 0;
}
.s-commitment-2 .image-wrap { position: relative;
}
.s-commitment-2 .image { border-radius: 20px; overflow: hidden;
}
.s-commitment-2 .img-item.item-1 { position: absolute; top: 80px; left: -79px;
}
.s-commitment-2 .content-section { max-width: 690px; width: 100%; margin-left: auto; padding-top: 36px;
}
.s-commitment-2 .content-section .text { margin-bottom: 28px;
}
.s-commitment-2 .benefit-list { margin-bottom: 43px;
}
.s-commitment-2 .benefit-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.s-commitment-2 .benefit-list li:not(:last-child) { margin-bottom: 16px;
}
.s-commitment-2 .benefit-list i { font-size: 18px; color: var(--Text-4);
}
.s-commitment-2 .benefit-list p { padding-left: 14px; color: var(--Text-2); font-size: 18px; font-family: "Work Sans", sans-serif;
} .s-provide { padding-top: 121px; padding-bottom: 46px;
} .s-review { position: relative; padding-bottom: 67px;
}
.s-review .wg-counter { position: absolute; top: -23px; left: -38px;
}
.s-review .image-wrap { position: relative; max-width: 478px; width: 100%; margin-right: auto;
}
.s-review .image-wrap .image { border-radius: 20px; overflow: hidden;
}
.s-review .content-section { padding-top: 77px;
}
.s-review .content-section .img-item { margin-bottom: 19px;
}
.s-review .content-section .text { margin-bottom: 42px;
}
.s-review .img-item.item-1 { position: absolute; top: -63px; right: -37px;
} .s-customer-say { padding: 137px 0px 132px; background-color: var(--Bg-8);
}
.s-customer-say .heading-section { margin-bottom: 75px;
}
.s-customer-say .testimonial { padding: 50px 50px 42px 43px;
}
.s-customer-say .testimonial .caption { line-height: 35px; margin-bottom: 19px;
}
.s-customer-say .testimonial .text { letter-spacing: 0.2px;
}
.s-customer-say .testimonial .author-wrap { margin-bottom: 33px;
}
.s-customer-say .testimonial .author-wrap .name { font-family: "Work Sans", sans-serif;
}
.s-customer-say .testimonial .author-wrap .left { gap: 23px; align-items: unset;
}
.s-customer-say .testimonial .author-wrap .infor { margin-top: 11px;
}
.s-customer-say .testimonial .author-wrap .right i { font-size: 42px;
}
.s-customer-say .testimonial .name-wrap { margin-bottom: 7px;
} .s-tab { padding-top: 64px; position: relative; z-index: 1;
}
.s-tab .post-comment-wrap .sub-title { margin-bottom: 20px;
} .table-infor tr { border-color: #e0e0e0;
}
.table-infor td { border-color: #e0e0e0;
}
.table-infor table { border-color: #e0e0e0;
}
.table-infor tbody { border-color: #e0e0e0;
}
.table-infor th { border-color: #e0e0e0;
} .s-meet-farm { padding-bottom: 60px; padding-top: 100px;
} #loading { background-color: var(--White); height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; left: 0px; bottom: 0px; overflow: hidden; right: 0px; z-index: 999999;
}
#loading #loading-center { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
#loading #loading-center .loader-container { display: flex; justify-content: center; align-items: center;
}
#loading #loading-center .loader-container .wrap-loader { position: relative; display: flex; justify-content: center; align-items: center;
}
#loading #loading-center .loader-container .wrap-loader .icon { position: absolute; bottom: 16px;
}
#loading #loading-center .loader-container .wrap-loader .icon img { max-width: 50px;
}
#loading #loading-center .loader-container .loader { width: 100px; height: 100px; border-radius: 50%; animation: tf-spin 1s linear infinite;
} .tf-sticky-btn { position: fixed; width: 100%; bottom: 0%; z-index: 70; box-shadow: 4px -4px 5px rgba(0, 0, 0, 0.03); background-color: var(--White); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.tf-sticky-btn .tf-atc-product { flex: 1 0 0%; gap: 15px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.tf-sticky-btn .tf-atc-product img { max-width: 80px; max-height: 80px; object-fit: cover;
}
.tf-sticky-btn .tf-atc-btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center;
}
.tf-sticky-btn .wrap-quantity { margin-bottom: 0px;
}
.tf-sticky-btn.remove { bottom: -100%;
} /*-------------- Responsive ----------------- */
@media (min-width: 1900px) { .slider-s-project { overflow: visible; }
}
@media (min-width: 992px) and (max-width: 1439px) { .wg-shop-content .grid-layout-3 { grid-template-columns: repeat(2, 1fr); } .main-content.page-service-detail .content .benefit { gap: 15px; } .main-content.page-service-detail .content .box-icon { gap: 10px; padding: 30px; }
}
@media (min-width: 768px) and (max-width: 1439px) { .footer.style-2 .tf-accordion-content { display: flex !important; flex-direction: column; } .tf-collapse-content { display: flex !important; flex-direction: column; }
}
@media (min-width: 992px) and (max-width: 1300px) { .s-service .box-icon .caption { display: -webkit-box; -webkit-line-clamp: 1; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding-bottom: 0px; } .s-service .box-icon .caption::after { content: none; } .s-service .box-icon .icon { width: 100px; height: 100px; } .s-service .box-icon .icon i { font-size: 50px !important; } .s-our-agriculture.style-2 .counter-wrap .wg-counter { gap: 10px; } .s-our-agriculture.style-2 .counter-wrap .wg-counter .counter-item { gap: 5px; } .s-our-agriculture.style-2 .counter-wrap .wg-counter .counter-item .title { white-space: nowrap; } .s-our-agriculture.style-2 .counter-wrap .wg-counter .counter-item .counter span { font-size: 40px; }
}
@media (min-width: 992px) and (max-width: 1199px) { .main-content.page-blog-single .meta-list { gap: 15px; } .main-content.page-blog-single .meta-list li:not(:last-child)::after { right: -4px; } .grid-portfolio .box-portfolio .content .text { display: -webkit-box; -webkit-line-clamp: 4; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .grid-portfolio .box-portfolio:hover .content { bottom: 30px; } .grid-portfolio .box-portfolio:hover .title { margin-bottom: 10px; padding-bottom: 10px; } .grid-portfolio .box-portfolio:hover .text { margin-bottom: 10px; } .s-our-agriculture .content .text { margin-bottom: 20px !important; } .s-our-agriculture .content .wg-progress { margin-bottom: 10px; } .s-our-agriculture .heading-section { margin-bottom: 10px; } .box-portfolio.style-4 .content { height: 65px; } .box-portfolio.style-4 .content .title { font-size: 18px; margin-top: -60px; } .box-portfolio.style-4:hover .content .icon { margin-bottom: 15px; } .box-portfolio.style-4:hover .content .title { margin-bottom: 15px; padding-bottom: 20px; } .box-portfolio.style-4:hover .content .text { margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 576px) { .s-testimonial.style-2 .wrap .image { width: 52%; } .s-testimonial.style-2 .wrap .content-section { width: 49%; }
}
@media (max-width: 1800px) { .scroll-element, .scroll-element-2, .scroll-element-3, .scroll-element-4 { transform: translate(0, 0) !important; } .scale-1-1 { transform: scale(1); } .s-question .image img { object-fit: cover; } .s-benefit.style-2 { padding: 0px; } .s-benefit.style-2 .btn-slide-box-list { display: none; } .s-benefit.style-2 .benefit-list .box-icon { width: 100%; } .s-benefit.style-2 .benefit-list .box-icon .caption { line-height: 26px; flex-grow: 1; } .s-break-page.style-3 br { display: block; } .box-portfolio-2 .content { padding: 40px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; } .s-our-expertise .heading-section { padding-bottom: 550px; position: relative; } .s-our-expertise .heading-section .img-item.item-2 { position: absolute; bottom: -20px; left: 0; } .s-our-expertise .heading-section .image { height: unset; overflow: hidden; margin-top: 10px; position: absolute; bottom: 0; left: 0; } .s-our-expertise .heading-section .image img { min-height: 250px; object-position: bottom; object-fit: cover; width: 100%; } .s-our-expertise .s-slider { margin-top: -490px; } .s-our-expertise .s-slider .btn-slider-provide.btn-next { right: 20px !important; } .s-our-expertise .s-slider .btn-slider-provide.btn-prev { left: 20px !important; } .s-our-expertise .card-provide br { display: block; } .s-our-mission .content-section .slider-wrap { max-width: unset; width: calc(38% - 30px); } .s-our-mission .content-section .video-wrap { max-width: unset; width: 62%; } .s-our-mission .content-section .video-wrap img { height: 100%; } .s-service-2 { overflow: hidden; } .s-service-2 .content-section { padding: 47px 92px 50px 190px; } .s-blog-post .btn-s-blog-post.btn-next { right: 50px !important; } .s-blog-post .btn-s-blog-post.btn-prev { left: 50px !important; }
}
@media (max-width: 1600px) { .s-quality-of-life .img-item.item-1 { right: 0px; } .s-question .content-wrap .content { width: 55.5%; padding: 136px 15px 126px !important; } .s-question .image-wrap { width: 44.5%; } .s-banner.style-2 .image img { min-height: 450px; max-height: unset; } .main-content.page-our-commitments .video-wrap { width: 100%; } .main-content.page-our-commitments .s-other-commitment .s-img-item.item-2 { max-width: 150px; bottom: unset; left: unset; } .js-countdown .countdown__timer { gap: 60px; } .js-countdown .countdown__timer .countdown__item:not(:last-child)::after { right: -36%; } .js-countdown .countdown__timer .countdown__item .countdown__value { font-size: 50px; } .wg-coming-soon .content { max-width: unset; width: 64%; } .wg-coming-soon .image { width: 36%; } .wg-coming-soon .bot { gap: 30px; } .wg-coming-soon .bot .tf-btn-read { flex-shrink: 0; } .s-our-history .content-section { align-items: center; justify-content: space-between; gap: 30px; height: 100%; } .s-our-history .content-section .image { max-width: unset; width: 50%; height: 100%; } .s-our-history .content-section .image img { height: 100%; object-fit: cover; } .s-our-history .heading-section { width: 50%; margin: unset !important; } .s-our-history .wg-exprerience { top: -170px; } .s-testimonial-3 .btn-slide-testimonial-3 { display: none; } .s-shopping .btn-slider-shopping { display: none; } .s-shopping .content-section { width: 37%; } .s-shopping .content-wrap .s-slider { width: 63%; max-width: unset; } .s-why-choose .image-wrap { height: 100%; } .s-why-choose .image-wrap .image { height: 100%; } .s-why-choose .image-wrap .image img { height: 100%; object-fit: cover; } .s-why-choose .notice { top: 20px; left: 20px; } .s-why-choose .s-img-item.item-1 { max-width: 200px; } .s-our-mission .content-section .slider-wrap { padding: 50px 20px 40px 30px; } .s-our-agriculture.style-2 .wrap .text { margin-top: 0px !important; } .page-title-home-3 br { display: block; } .page-title-home-3 .btn-slide-home-3 { right: 20px !important; } .slide-home-3 .content { padding: 0px 15px; } .s-happy-farm .content { align-items: center; } .s-happy-farm .heading-section { padding: 40px 15px 15px !important; } .s-service-2 .content-section { max-width: unset; width: 33.333%; flex-shrink: unset; padding: 30px 15px; } .s-service-2 .slider-wrap { width: 66.667%; } .s-about-us-2 { overflow: hidden; } .s-about-us-2 .content { padding: 0px 40px !important; } .bg-page .image img { height: 720px; object-fit: cover; object-position: bottom; } .slide-home-2::before { bottom: -4px; } .slide-home-2 .image img { min-height: 820px; object-fit: cover; } .slide-home-2 .content { padding: 258px 0px 20px 0px; } .slide-home-2 .content br { display: block; } .s-benefit { margin-top: 0px; padding-top: 100px; } .s-blog-post .btn-s-blog-post { display: none; } .has-img-item .tf-container { padding-top: 0px; } .s-counter { padding: 60px 0px 65px 0px; } .s-testimonial { padding-bottom: 80px; } .s-testimonial .image { position: absolute; width: 100%; left: -75px; } .s-testimonial .image img { height: unset !important; } .s-testimonial .content-section { margin-left: auto; } .s-our-commitment .main-section { gap: 30px; } .s-our-commitment .main-section .content-section { width: 50%; } .s-our-commitment .main-section .content-section .box-icon .caption { display: -webkit-box; -webkit-line-clamp: 2; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .s-our-commitment .main-section .image-wrap { width: 70%; } .s-our-commitment .main-section .image-wrap .image { max-width: unset; width: unset; height: 100%; } .s-our-commitment .main-section .image-wrap img { object-fit: cover; height: 100%; } .page-title-home-1 .btn-slide-home-1.btn-prev { right: 70px; left: unset; top: 55%; } .slide-home-1 .content-wrap { padding: 121px 20px 100px 20px; } .slide-home-1 .content-wrap br { display: block !important; } .header .header-inner { gap: 20px; } .header .header-inner .header-left .logo-site { padding-top: 0px; padding-right: 30px; } .header .header-inner .header-left .nav-list { gap: 34px; }
}
@media (max-width: 1440px) { .blog-single .content .entry-image-2 { gap: 30px; } .blog-single .entry-video .video-wrap { width: calc(50% - 30px); } .blog-single .entry-video .video-wrap img { height: 100%; object-fit: cover; } .blog-single .entry-video .benefit-list { width: 50%; } .s-testimonial.style-2 { overflow: hidden; } .s-testimonial.style-2 .wrap { margin-right: unset; } .main-content.page-testimonial { overflow: hidden; } .s-review .wg-counter { top: 20px; left: 10px; } .s-review .img-item.item-1 { max-width: 250px; top: -110px; } .s-review .content-section { padding: 0px; display: flex; flex-direction: column; justify-content: center; height: 100%; } .wg-shop-content .card-product.style-2 { max-width: unset; } .s-relate-product .btn-slide-product { display: none; } .s-product-detail .content-inner { margin: 0px; } .tf-header-shop .header-topbar { gap: 30px; } .tf-header-shop .header-topbar .search-product { flex-shrink: unset; } .tf-header-shop .header-topbar .call-us { flex-shrink: 0; } .tf-header-shop .style-absolute .header-inner .header-right { gap: 0px; } .tf-header-shop .style-absolute .header-inner .icon-wrap { margin-left: unset; } .tf-header-shop .style-absolute .header-inner .nav-list { gap: 25px !important; } .main-content.page-service-detail .content .benefit { gap: 15px; } .main-content.page-service-detail .content .benefit .caption { line-height: 20px; } .our-event-item { gap: 30px; padding: 30px; } .our-event-item .image { max-width: unset; width: 41.6666%; } .our-event-item .image img { height: 100%; object-fit: cover; } .our-event-item .content .infor-event { gap: 5px 40px !important; padding: 15px; flex-wrap: wrap; } .our-event-item .content .infor-event li p { font-size: 14px; } .our-event-item .content .infor-event li:not(:last-child)::after { right: -27px !important; } .s-testimonial.style-2 { padding-top: 0px; padding-bottom: 100px; } .s-testimonial.style-2 .image img { bottom: -27%; left: -90px; } .s-testimonial.style-2 .image .sign { bottom: -19%; right: 169px; } .s-testimonial.style-2 .image .sign img { height: unset !important; } .s-testimonial.style-2 .content-section .bot { gap: 10px; flex-wrap: wrap; } .btn-slider-provide { display: none !important; } .s-happy-farm .image-wrap { width: 50%; } .s-our-agriculture .content-section .image-wrap { margin: unset; } .s-our-agriculture .content-section .content { padding-top: 0px; max-width: unset; margin: unset; } .s-our-agriculture .wrap { height: 100%; } .s-our-agriculture .wrap >* { height: 100%; } .wg-exprerience br { display: block; } .s-what-we-do .content-section { padding: 50px; } .s-what-we-do .content-section .video-wrap { top: -30px; } .s-what-we-do .we-do-list { gap: 30px; padding: 50px; } .clip-color-text br { display: block; } .s-about-us-2 .content-section .image { max-width: 330px; min-height: 550px; } .s-about-us-2 .content-section .image img { min-height: 550px; object-fit: cover; } .s-benefit { padding: 100px 15px 0px; } .s-benefit .benefit-list .box-icon { padding: 0px 15px; } .s-benefit .benefit-list .box-icon::after { right: 0 !important; } .tf-topbar.style-2 .topbar-inner { gap: 15px; } .tf-topbar.style-2 .topbar-right .contact-list .item { gap: 9px !important; } .tf-topbar.style-2 .topbar-right .contact-list .infor { display: none; } .box-event .content { padding: 0px 15px; } .s-banner .heading-side { margin-top: 0px; } .s-banner .heading-side .image img { max-height: 300px; } .s-banner .slider-side { margin-top: -300px; } .s-faq .s-right { position: relative; } .s-faq .s-right .img-item { right: 20px; } .s-break-page.style-2 br { display: block; } .s-about-us .main-section .content-left { width: 60%; max-width: unset; } .s-about-us .main-section .content-left .image { height: auto; max-height: unset; } .s-about-us .main-section .content-right { width: 40%; } .s-about-us .main-section .content-right .has-border { padding: 15px !important; } .s-about-us .main-section .content-right .wg-counter { max-width: unset; } .s-about-us .main-section .content-right .box-trust { height: auto; } .box-portfolio.style-4 .content { top: unset; } .box-portfolio.style-4:hover .content { top: unset; } .article-blog-item .image .video-wrap, .article-blog-item.type-2 .image .video-wrap { height: 100%; } .article-blog-item .image .video-wrap img, .article-blog-item.type-2 .image .video-wrap img { height: 100%; } .subscribe-wrap .has-border { gap: 43px; } br { display: none; } .tf-topbar .topbar-inner .topbar-left { text-align: center; max-width: 230px; flex-wrap: wrap; gap: 8px; justify-content: center; white-space: nowrap; } .tf-topbar .topbar-inner .topbar-left span::after { content: none !important; } .tf-topbar .topbar-inner .topbar-right { gap: 30px; } .tf-topbar .topbar-inner .topbar-right .contact-list { gap: 15px 30px; } .tf-topbar .topbar-inner .topbar-right .contact-list .item { gap: 5px; } .header .header-inner .header-left .nav-list { gap: 25px; } .header .header-inner .header-left .nav-list .item::before { left: -17px !important; font-size: 20px !important; } .header .header-inner .header-right { padding-right: 0px; gap: 20px; } .header .header-inner .header-right .tf-btn { gap: 20px; padding: 6px 5px 6px 28px; } .header .header-inner .header-right .icon-wrap { gap: 5px; } .header .wg-welcome { display: none !important; } .page-title .img-item img { width: 100%; height: 50px; max-width: 1920px; object-fit: cover; } .page-title .img-item.item-2 img { object-position: right; } .page-title .img-item.item-1 img { object-fit: cover; } .footer .img-item.item-1 { width: 100%; } .footer .img-item.item-1 img { height: 23px; max-width: 1920px; object-fit: cover; }
}
@media (max-width: 1300px) { .s-benefit .benefit-list { flex-wrap: wrap; gap: 20px 0px; } .s-benefit .benefit-list .box-icon { width: 50%; max-width: unset; } .s-benefit .benefit-list .box-icon .icon { margin-bottom: 10px; } .s-benefit .benefit-list .box-icon .caption { margin-bottom: 5px; } .s-benefit .benefit-list .box-icon br { display: block; } .s-benefit .benefit-list .box-icon::after { content: none !important; } .s-contact-us .contact-list { padding: 35px; } .s-testimonial .image { left: -125px; } .s-project .heading-side { padding: 115px 0px 350px; } .s-project .slider-s-project { margin-top: -300px !important; } .s-why-us .box-video { top: 10px !important; left: 10px !important; } .box-portfolio.style-4:hover .content { padding: 30px; }
}
@media (max-width: 1200px) { .tf-topbar { display: none; } .s-our-agriculture.style-3 .s-img-item.item-1 { display: none; } .tf-topbar-shop .topbar-left { display: none; } .tf-topbar-shop .topbar-right { width: 100%; } .tf-topbar-shop .topbar-right ul { justify-content: space-between; gap: 15px; } .tf-topbar-shop .topbar-right ul li { padding: 0px !important; } .tf-topbar-shop .topbar-right ul li::after { content: none !important; } .tf-topbar-shop .s-img-item.item-1 { width: 100%; } .tf-topbar-shop .s-img-item.item-1 img { width: 100%; object-fit: cover; height: 10px; } .tf-header-shop .s-img-item.item-1 { width: 100%; } .tf-header-shop .s-img-item.item-1 img { width: 100%; object-fit: cover; height: 10px; } .tf-header-shop .header-topbar .search-product { display: none; } .tf-header-shop .header-topbar .header-search { display: flex; } .tf-header-shop .header-topbar .header-right .icon-wrap { margin-left: 40px; } .tf-header-shop .mobile-button { margin-left: 20px; } .tf-header-shop .style-absolute.fixed-header { padding: 15px 0px; } .offer-list { gap: 30px; } .offer-list .list li p { line-height: 26px; } .offer-list .list li:not(:last-child) { margin-bottom: 10px; } .box-portfolio-style-2 { background-color: var(--Primary); align-items: center; } .box-portfolio-style-2 .content { padding: 20px 30px; } .box-portfolio-style-2 .image img { min-height: 350px; object-fit: cover; } .wg-pricing { padding: 20px; } .wg-pricing .best-choice { right: 10px; padding: 10px; } .s-commitment-2 .image-wrap { height: 100%; } .s-commitment-2 .image { height: 100%; } .s-commitment-2 .image img { height: 100%; object-fit: cover; } .s-commitment-2 .img-item.item-1 { left: 10px; top: 10px; } .s-video .video-wrap { height: 100%; } .s-video .video-wrap img { height: 100%; } .s-video .content-section { margin-top: unset; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; } .main-content.page-faq .content .bot { padding: 74px 0px 80px 37px; } .main-content.page-faq .content .bot .img-item.item-1 { right: 0px; } .main-content.page-our-commitments .video-wrap { min-height: 400px; } .main-content.page-our-commitments .video-wrap img { min-height: 400px; height: 100%; } .js-countdown .countdown__timer { gap: 40px; } .js-countdown .countdown__timer .countdown__item::before { bottom: -40px; } .wg-coming-soon .content { padding: 40px; } .wg-coming-soon .content .top { margin-bottom: 40px; } .wg-coming-soon .content .text { margin-bottom: 40px; } .s-shopping .content-section { width: 100%; } .s-shopping .content-section .title br:first-child { display: block; } .s-shopping .content-section .heading-section { width: 100%; max-width: unset; } .s-shopping .content-wrap { flex-wrap: wrap; } .s-shopping .content-wrap .s-slider { width: 100%; } .s-testimonial.style-2 { padding-bottom: 0px; margin-bottom: -30px; padding-top: 60px; } .s-testimonial.style-2 .content-section { padding: 0px 15px 80px; width: 100% !important; max-width: unset; } .s-testimonial.style-2 .wrap { flex-wrap: wrap-reverse; margin: unset !important; padding: unset; width: 100%; } .s-testimonial.style-2 .wrap .image { padding-top: 0px; width: 100%; left: 0; top: 0; right: 0; bottom: 0; height: unset; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .s-testimonial.style-2 .wrap .image >img { left: 0; top: 0; right: 0; bottom: 0; position: relative; max-width: unset; } .s-testimonial.style-2 .wrap .image .sign { right: unset; left: 45%; bottom: 7%; } .s-project-2 .content-section { gap: 10px 20px; flex-wrap: wrap; } .s-project-2 .s-slider .wrap { gap: 10px 20px; flex-wrap: wrap; } .box-portfolio-2 .content .sub { margin-bottom: 10px; } .box-portfolio-2 .content .title { padding-bottom: 10px; margin-bottom: 10px; } .box-portfolio-2 .content .text { margin-bottom: 20px; } .slide-home-3 .image img { min-height: 580px; height: unset; } .slide-home-3 .content-wrap { display: flex; align-items: center; height: 100%; padding: 0px; } .slide-home-3 .content-wrap .content { margin: unset; } .slide-home-3 .content-wrap .sub-title { margin-bottom: 0px; } .slide-home-3 .content-wrap .title { font-size: 70px; line-height: 80px; } .slide-home-3 .content-wrap .img-item { margin-bottom: 10px; } .slide-home-3 .content-wrap .text { margin-bottom: 20px; } .page-title-home-3 .img-item { pointer-events: none; } .page-title-home-3 .img-item.item-2 { max-height: 200px; } .page-title-home-3 .img-item.item-3 { max-width: 150px; } .s-testimonial-2 { padding-bottom: 30px; } .s-happy-farm .image-wrap { display: none; } .s-happy-farm .content-section { margin-top: -240px; } .s-happy-farm .heading-section { margin-left: unset !important; } .s-testimonial-2 .sub-title { padding-right: 60px; } .s-testimonial-2 .img-item.item-2 { right: unset; left: 90%; } .box-event.style-2 { padding-left: 0px; padding-right: 0px; height: 100%; } .s-what-we-do { padding: 100px 0px 0px; } .s-what-we-do .content-wrap { flex-wrap: wrap; padding: 0px 15px; margin-bottom: -60px; } .s-what-we-do .content-wrap .content-section { margin: 0px auto -100px; max-width: 890px; } .s-what-we-do .content-wrap .we-do-list { max-width: unset; width: calc(100% + 30px); justify-content: center; padding: 131px 50px 50px 50px; margin: 0px -15px; } .clip-color-text br { display: block; } .clip-color-text p { font-size: 100px; line-height: 100px; } .s-quality-of-life .img-item.item-3 { left: 0 !important; top: -7% !important; } .s-service-2 { flex-wrap: wrap; } .s-service-2 .content-section { width: 100%; } .s-service-2 .slider-wrap { width: 100%; padding: 0px 15px; } .s-about-us-2 .content-section { justify-content: center; padding-bottom: 70px; } .s-about-us-2 .image { position: absolute; bottom: 5%; max-width: 404px !important; } .s-about-us-2 .image.image-left { transform: translateX(-55%) rotate(-9.06deg) !important; } .s-about-us-2 .image.image-right { transform: translateX(55%) rotate(9.06deg) !important; } .slide-home-2 .image img { min-height: 720px; object-fit: cover; } .slide-home-2 .content { padding: 0px; top: 50%; transform: translateY(-35%); } .bg-page .image img { height: 620px; } .tf-topbar.style-2 .topbar-left, .tf-topbar.style-2 .topbar-right { display: none; } .tf-topbar.style-2 .topbar-inner { padding: 15px 0px; } .tf-topbar.style-2 .contact-list.mobile { display: flex; } .s-contact-us .content-section { padding: 30px; } .article-blog-item.style-2.type-3 .entry-meta { flex-wrap: nowrap !important; } .s-testimonial .image { width: 80%; } .s-testimonial .image img { height: 682px !important; } .s-testimonial .testimonial.style-4 .caption { display: -webkit-box; -webkit-line-clamp: 5; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .s-why-us .main-section .content-section { padding-top: 30px; } .s-why-us .bot { margin-top: -100px; margin-left: 20px; } .footer .footer-inner .footer-inner-wrap .footer-title { margin-bottom: 20px !important; } .footer .footer-inner .footer-inner-wrap .contact-list li { gap: 8px; } .footer .footer-inner .footer-inner-wrap .contact-list li p { line-height: 20px; } .footer .footer-inner .footer-inner-wrap .new-post-list .item { gap: 8px; } .article-blog-item, .article-blog-item.type-2 { padding: 15px; gap: 30px; } .article-blog-item .content .entry-meta { gap: 20px; padding-bottom: 15px; margin-bottom: 15px; } .article-blog-item .content .entry-meta .entry { white-space: nowrap; } .article-blog-item .content .entry-meta .entry:not(:last-child)::after { right: -10px; } .article-blog-item .content .text { margin-bottom: 30px; } .article-blog-item .content .bot .share { transform: translateX(0px); } .article-blog-item .content .bot .share .social-list { visibility: visible; opacity: 1; } .article-blog-item .content .bot .share p { margin-right: 10px !important; } .subscribe-wrap .has-border { gap: 20px; } .subscribe-wrap .has-border .notice .content-inner { max-width: 400px; } .header-wrap { padding: 0px 15px; top: 15px; } .page-title-home-2 { margin-top: 15px; padding: 0px 15px; } .header { padding: 15px 0px; } .header .logo-site { padding-right: 0px !important; } .header .main-nav { display: none; } .header .mobile-button { display: block; } .header .fixed-header { padding: 15px 0px 0px; } .header.style-2 .header-inner { padding: 15px 0px; } .header.style-2 .header-inner .header-right { gap: 15px; } .header.style-2 .header-left { padding-left: 0px !important; } .header.style-2 .header-left .logo { display: block; } .header.style-2 .main-nav { display: none; } .header.style-2 .mobile-button { display: block; } .header.style-2 .fixed-header .header-inner { padding: 0px; } .header.style-2 .fixed-header .mobile-button::after, .header.style-2 .fixed-header .mobile-button::before { background-color: var(--Primary); } .header.style-2 .fixed-header .mobile-button span { background-color: var(--Primary); } .tf-topbar .topbar-inner .topbar-right .social-list { display: none; }
}
@media (max-width: 1024px) { .tf-topbar.style-3 .topbar-left { display: none; } .tf-topbar.style-3 .topbar-right { width: 100%; justify-content: space-between; } .footer .footer-bottom { justify-content: center; gap: 10px; } .article-blog-item .content .entry-meta { flex-wrap: wrap; gap: 10px 0px; } .article-blog-item .content .entry-meta .entry { width: 50%; justify-content: flex-start; } .article-blog-item .content .entry-meta .entry:not(:last-child)::after { content: ""; }
}
@media (max-width: 991px) { .tf-sticky-btn .name-product { display: none; } .s-quality-of-life-2 .img-item.item-1 { max-width: 100px; z-index: 1; left: 20px; top: -13%; } .tf-sidebar .sidebar-item .sb-content { padding: 30px; } .blog-single .content { margin-right: unset; padding-bottom: 30px; } .blog-single .entry-image-2 .image { max-width: unset !important; } .main-customer { padding-bottom: 30px; } .s-customer-say { padding: 92px 0px 132px; } .s-review { padding-bottom: 30px; } .s-review .image-wrap { padding-bottom: 30px; max-width: unset; margin-right: unset; } .s-review .image-wrap .image img { min-height: 450px; max-height: 650px; object-fit: cover; object-position: top; } .wg-shop-content .grid-layout-3 { gap: 15px; } .wg-shop-content .card-product.style-2 { padding: 15px; } .s-relate-product { padding-top: 60px; } .s-relate-product .title { margin-bottom: 20px; } .wg-tabs.style-2 { padding: 15px; } .wg-tabs.style-2 .menu-tab { background-color: transparent; margin-top: 20px; margin-bottom: 20px; flex-wrap: wrap; } .wg-tabs.style-2 .menu-tab .item a { padding: 15px; } .thumbs-slider { padding-bottom: 30px; } .s-tab { padding-top: 0px; } .s-box-wrap .wrap { flex-wrap: wrap; gap: 15px; } .s-box-wrap .box-icon { max-width: unset; width: calc(50% - 15px); } .s-box-wrap .box-icon::after { content: none !important; } .tf-header-shop { padding: 10px 0px; } .tf-header-shop .call-us { display: none !important; } .tf-header-shop .header-topbar { padding-bottom: 0px; border: unset; } .tf-header-shop .header-topbar .wg-category { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .tf-header-shop .header-inner { display: none; } .tf-header-shop .style-absolute { padding: 20px 0px; } .tf-header-shop .style-absolute .header-inner { display: flex; } .tf-header-shop .style-absolute .header-inner .icon-wrap .icon { width: 40px; height: 40px; } .tf-header-shop .your-cart { display: none; } .tf-header-shop .icon-wrap { margin-left: 20px !important; gap: 8px; } .tf-header-shop .icon-wrap .icon { width: 40px; height: 40px; } .tf-header-shop .icon-wrap .icon i { font-size: 15px !important; } .slider-service-detail .image img { min-height: 450px; object-fit: cover; } .slider-service-detail .btn-service-detail:hover.btn-next { right: 10px; } .slider-service-detail .btn-service-detail:hover.btn-prev { left: 10px; } .main-content.page-service-detail { padding: 80px 0px; } .main-content.page-service-detail .content { max-width: unset; margin-right: unset; padding-bottom: 40px; } .main-content.page-service-detail .box-icon { max-width: unset; } .box-portfolio-style-2 { flex-wrap: wrap; } .box-portfolio-style-2 .image img { min-height: 350px; max-height: 450px; } .box-portfolio-style-2 .content { max-width: unset; padding: 30px 15px; } .box-portfolio-style-2 .content .title { margin-bottom: 10px; padding-bottom: 10px; } .box-portfolio-style-2 .content .text { margin-bottom: 20px; } .grid-layout-3.grid-portfolio { grid-template-columns: repeat(2, 1fr); } .grid-layout-3 .box-portfolio .image img { width: 100%; } .grid-layout-3 .box-portfolio .content { bottom: -126px; } .grid-layout-3 .box-portfolio:hover .content { bottom: 50px; } .grid-layout-3.item { padding-top: 15px; } .main-content.page-portfolio-details { padding-bottom: 60px; } .main-content.page-portfolio-details .content { padding-bottom: 30px; } .main-content.page-portfolio-details .content .title { line-height: 40px; } .main-content.page-portfolio-details .content .title-2 { margin-bottom: 20px; line-height: 36px; } .main-content.page-portfolio-details .content .bot { margin-right: unset; } .main-content.page-portfolio-details .s1 { margin-bottom: 30px; padding-bottom: 30px; } .main-content.page-portfolio-details .s1 .title { margin-bottom: 30px; padding-bottom: 20px; } .main-content.page-portfolio-details .s1 .text-1 { margin-bottom: 10px; } .main-content.page-portfolio-details .s2 { margin-bottom: 30px; padding-bottom: 30px; } .main-content.page-portfolio-details .s2 .text-3 { margin-bottom: 30px; } .main-content.page-portfolio-details .s3 { margin-bottom: 30px; padding-bottom: 35px; } .main-content.page-portfolio-details .s3 .title-2 { margin-bottom: 10px; } .slider-portfolio { padding-top: 0px !important; margin-top: 30px; margin-bottom: 30px !important; } .s-testimonial-2.style-2 { padding-top: 60px !important; } .s-pricing { padding: 90px 0px 60px; margin: 0px; } .s-pricing .wg-pricing { margin-bottom: 30px; } .wg-pricing .text { margin: 0px 0px 20px 0px; } .grid-layout-3 { gap: 30px; } .box-infor.style-1 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; } .box-infor.style-1 .content { flex-grow: 1; padding: 15px 0px 0px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; } .box-infor.style-1 .content .title { flex-grow: 1; } .box-infor.style-1 .image .icon { bottom: 10px; height: 80px; width: 80px; left: 10px; } .box-infor.style-1 .image .icon i { font-size: 35px; } .s-commitment-2 .image img { width: 100%; max-height: 680px; object-position: top; } .s-commitment-2 .content-section { padding-top: 30px; max-width: unset; margin-left: unset; } .wg-history .year { position: absolute; left: -95px; } .main-history { padding-left: 100px; } .main-history::after { left: 50px; } .main-history::before { left: 50px; } .main-history .line { width: 1px; } .main-history .line::after { left: -50px; } .s-mission .s-img-item.item-1 { right: 58px; } .box-farmer .image img { max-height: 450px; object-fit: cover; object-position: top; } .box-farmer.pb-30 { padding-bottom: 30px; } .box-farmer .say-hi { top: 10px; left: 10px; } .s-we-are { padding: 60px 0px; } .s-we-are .s-img-item.item-1 img { height: 15px; object-fit: cover; } .we-are-wrap { gap: 20px; padding: 0px; } .we-are-wrap .content { gap: 5px; } .s-question { padding-top: 80px; } .s-question .content-wrap { flex-wrap: wrap; } .s-question .content-wrap .content { padding: 0px 15px 30px !important; width: 100%; } .s-question .content-wrap .bot { gap: 15px; flex-wrap: wrap; } .s-question .image-wrap { width: 100% !important; } .s-question .image-wrap .image img { width: 100%; min-height: 450px; } .s-question .image-wrap .img-item.item-1 { max-width: 150px; } .s-other-event { padding-bottom: 15px; } .our-event-item { flex-wrap: wrap; gap: 0px; padding: 20px; } .our-event-item .image { width: 100%; } .our-event-item .image img { min-height: 450px; } .our-event-item .content { padding-top: 30px; } .our-event-item .content .title { margin-bottom: 15px; } .our-event-item .content .infor-event { margin-bottom: 10px; } .our-event-item .content .sub { margin-bottom: 20px; } .s-video { padding-bottom: 60px; } .s-video .video-wrap { max-width: unset; max-height: 450px; margin-bottom: 30px; } .s-video .content-section .text { margin-bottom: 20px; } .wg-award-winner .title { margin-bottom: 5px; } .s-award { padding: 60px 0px 50px; } .s-award .wrap { padding-bottom: 30px; } .s-award .img-item-award { padding: 30px; margin: unset; max-width: unset; max-height: unset; } .s-award .top { padding-bottom: 0px; } .s-award .headding-text { padding: 0px 0px 30px; } .s-award .block-quote.style-4 { padding: 30px; margin-bottom: 30px; } .s-award .block-quote.style-4 .quote { gap: 30px; } .wg-gallery { gap: 15px; } .main-content.page-contact-us .s-contact-us { padding-top: 60px; } .main-content.page-contact-us .s-contact-us .contact-list li { gap: 15px; } .main-content.page-event-detail .content { max-width: unset; margin: unset; padding-bottom: 30px; } .main-content.page-event-detail .content .title { margin-bottom: 10px; } .main-content.page-event-detail .content .title.s2 { margin-bottom: 20px; } .main-content.page-event-detail .content .text-2 { margin-bottom: 30px; } .main-content.page-event-detail .slider-event-detail { margin-bottom: 20px; } .main-content.page-event-detail .tour-infor { padding: 30px; margin-bottom: 30px; } .main-content.page-event-detail .tour-schedule .list li { gap: 15px; } .main-content.page-event-detail .tour-schedule .list li .text-wrap { gap: 0px; } .main-content.page-event-detail .tour-schedule .list li .text-wrap .name-tour { line-height: 30px; } .main-content.page-event-detail .tour-schedule .list li .image { max-width: 120px; max-height: 120px; } .main-content.page-faq { padding: 60px 0px; } .main-content.page-faq .tf-sidebar-2 { padding-bottom: 30px; } .main-content.page-faq .content { max-width: unset; margin-left: unset; } .main-content.page-our-commitments .s-quality-of-life .item-3 { display: none; } .main-content.page-our-commitments .s-other-commitment { padding-top: 125px; } .main-content.page-our-commitments .s-other-commitment .content .img-item { margin-bottom: 5px; } .main-content.page-our-commitments .s-other-commitment .content .title { margin-bottom: 10px; } .main-content.page-our-commitments .s-other-commitment .item-1 { display: none; } .main-content.page-our-commitments .s-other-commitment .other-list li:not(:last-child) { margin-bottom: 10px; } .main-content.page-our-commitments .s-other-commitment .image-wrap { margin: unset; max-width: unset; border-radius: 20px; margin-bottom: 20px; } .main-content.page-our-commitments .s-other-commitment .image-wrap img { width: 100%; object-fit: cover; object-position: center; min-height: 450px; max-height: 550px; } .wg-coming-soon { flex-wrap: wrap; align-items: start; justify-content: flex-start; } .wg-coming-soon .content { width: 100%; padding: 30px 15px; } .wg-coming-soon .content .top { margin-bottom: 10px; } .wg-coming-soon .content .title { font-size: 80px; line-height: 80px; } .wg-coming-soon .content .wg-countdown { padding-bottom: 0px; margin-bottom: 20px; } .wg-coming-soon .content .caption { margin-bottom: 10px; } .wg-coming-soon .content .text { margin-bottom: 20px; } .wg-coming-soon .image { width: 100%; max-height: unset; height: 450px; } .wg-coming-soon .image img { width: 100%; height: 100%; object-fit: cover; } .box-about-us { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; height: 100%; } .box-about-us .image { flex-shrink: 0; } .box-about-us .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; height: 100%; } .box-about-us .content .title { flex-grow: 1; } .s-our-history .content-section { flex-wrap: wrap; } .s-our-history .content-section .image { width: 100%; height: 450px; } .s-our-history .heading-section { width: 100%; } .s-our-history .wg-exprerience { right: 30px; } .s-benefit.mt--217 { margin-top: 0px; } .s-welcome-to .text-wrap { padding: unset; } .s-our-agriculture.style-2.type-2 .wrap { padding-bottom: 20px; } .s-our-agriculture.style-2.type-2 .counter-wrap { margin-bottom: 50px; } .s-our-agriculture.style-3 { padding-bottom: 90px; } .s-our-agriculture.style-3 .content { max-width: unset !important; } .s-shopping { padding: 70px 0px 70px 0px; } .s-project-2 .s-slider .wrap { margin-bottom: 30px; } .box-portfolio-2 .content { top: 20px; bottom: 20px; left: 20px; } .box-portfolio-2 .content .sub { font-size: 20px; letter-spacing: 1px; } .s-why-choose { padding-bottom: 40px; } .s-why-choose .image-wrap { max-width: unset; margin-right: unset; } .s-why-choose .image-wrap .image img { width: 100%; height: 600px !important; } .s-why-choose .content-section { max-width: unset; margin-left: unset; padding-top: 30px; } .s-our-expertise { padding-top: 80px; } .s-our-expertise .heading-section { padding-bottom: 520px; } .slider-s-our-mission .content .text { font-size: 24px !important; line-height: 32px !important; } .s-our-agriculture.style-2 .wg-counter { justify-content: flex-start; } .s-our-agriculture .s-img-item.item-2 img { height: 40px; object-position: top; } .s-our-agriculture .content-section .image-wrap::after { content: none !important; } .footer.style-2 .footer-top .footer-left { gap: 20px; } .footer.style-2 .footer-top .footer-right { margin-left: unset; } .s-contact-us.style-2.pb-80 { padding-bottom: 50px; } .s-contact-us.style-2.pt-147 { padding-top: 100px; } .s-testimonial-2 { padding-top: 55px; padding-bottom: 55px; } .s-our-agriculture .image-wrap { padding-bottom: 30px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; } .s-our-agriculture .wg-exprerience { top: 46%; left: 10%; } .s-our-agriculture .wrap { padding-bottom: 30px; } .s-quality-of-life .content-section .sub { margin-bottom: 40px; } .s-quality-of-life .content-section .slider-box-icon { margin: 0px auto 40px; } .s-quality-of-life .content-section .slider-box-icon .box-icon { max-width: 150px; width: 100%; flex-shrink: 0; } .s-quality-of-life .img-item.item-3 { max-width: 110px; } .s-quality-of-life.style-2 { z-index: 2; } .s-quality-of-life.style-2 .img-item.item-3 { max-width: 110px !important; top: -20% !important; } .s-service-2 { flex-wrap: wrap; } .s-service-2 .content-section { padding: 0px 15px 15px; } .s-service-2 .content-section .text { margin-bottom: 20px; } .s-service-2 .content-section .tf-btn { margin-bottom: 20px; } .s-about-us-2 { padding-top: 80px; } .s-about-us-2 .image.image-left { transform: translateX(-45%) rotate(-9.06deg) scale(0.9) !important; } .s-about-us-2 .image.image-right { transform: translateX(45%) rotate(9.06deg) scale(0.9) !important; } .s-about-us-2 .wg-counter.style-4 { gap: 30px; } .page-title-home-2 .btn-slide-home-2 img { max-width: 50px; } .page-title-home-2 .btn-slide-home-2.btn-next { right: 20px; } .page-title-home-2 .btn-slide-home-2.btn-prev { left: 20px; } .slide-home-2 .image img { min-height: 680px; object-fit: cover; } .bg-page .image img { height: 580px; } .s-partner { padding: 60px 0px !important; } .s-contact-us { margin-bottom: unset; } .s-contact-us .section-wrap { top: 0; } .s-contact-us .image img:not(.img-item) { width: 100%; height: 500px; object-fit: cover; } .s-contact-us .contact-list { margin-bottom: 30px; } .s-contact-us .contact-list br { display: block; } .box-event .image img { height: 550px; object-fit: cover; } .s-faq { padding-bottom: 150px; } .s-faq .content-section { max-width: unset; padding-top: 0px; margin-right: unset; padding-bottom: 30px; } .s-faq .s-right { margin-left: unset; max-width: unset; } .s-faq .s-right .image img { height: 400px; object-fit: cover; } .s-break-page.style-2 br { display: none; } .s-counter .wg-counter { flex-wrap: wrap; gap: 40px 0px; } .s-counter .wg-counter >* { width: 50%; max-width: unset; border: unset !important; padding: 0px 15px; } .s-testimonial .content-wrap { flex-wrap: wrap; } .s-testimonial .content-wrap .image { position: relative; width: 100%; margin: unset; left: 0; } .s-testimonial .content-wrap .image img { position: relative; width: 100%; height: unset !important; } .s-testimonial .content-wrap .content-section { padding-top: 50px; width: 100%; margin-left: unset; } .s-testimonial .content-wrap .content-section .img-item.item-2 { right: 4px; bottom: 10px; } .s-project .heading-side { padding: 80px 0px 250px; } .s-project .slider-s-project { margin-top: -190px !important; } .s-project .s-img-item.item-2 { pointer-events: none; } .s-our-commitment { padding-top: 120px; padding-bottom: 35px !important; } .s-our-commitment .main-section { flex-wrap: wrap-reverse; } .s-our-commitment .main-section .image-wrap { width: 100%; } .s-our-commitment .main-section .image-wrap .image img { height: 500px; } .s-our-commitment .main-section .content-section { padding-top: 0px; width: 100%; max-width: unset; } .s-our-commitment .main-section .content-section .text { margin-bottom: 20px; } .s-why-us { padding-top: 35px; } .s-why-us .main-section .content-section { padding-top: 10px; width: 50%; max-width: unset; } .s-why-us .main-section .image { width: 70%; border-radius: 20px; overflow: hidden; } .s-why-us .main-section .video-wrap img { max-width: unset; } .s-why-us .bot { margin-top: 30px; margin-left: 0px; } .s-service { padding-top: 100px; padding-bottom: 90px; } .s-service .heading-section { padding-bottom: 0px; } .s-service .box-icon { max-width: unset; margin-bottom: 30px; } .s-service .s-img-item { pointer-events: none; } .s-service .s-img-item.item-3 { width: 100%; height: 30px; bottom: -15px; } .s-service .s-img-item.item-3 img { height: 30px; width: 100%; object-fit: cover; object-position: top; } .heading-section { margin-bottom: 15px !important; } .heading-section .img-item { margin-bottom: 5px !important; } .heading-section .sub-title { margin-bottom: 0px; } .heading-section.has-text .title { margin-bottom: 0px; } .heading-section.has-text .text { margin-bottom: 15px; } .s-about-us { padding-top: 80px; padding-bottom: 35px; } .s-about-us .main-section { gap: 60px; flex-wrap: wrap; } .s-about-us .main-section .heading-section { margin-bottom: 10px !important; } .s-about-us .main-section .content-left { width: 100% !important; } .s-about-us .main-section .content-left .text-1 { margin-bottom: 5px; } .s-about-us .main-section .content-left .text-2 { margin-bottom: 15px; } .s-about-us .main-section .content-left .tf-btn { margin-bottom: 35px; } .s-about-us .content-right { width: 100% !important; } .box-portfolio.style-4 .image img { width: 100%; height: 500px; object-fit: cover; } .box-portfolio.style-4.mb-s-991 { margin-bottom: 30px; } .box-portfolio.style-5 .content { bottom: -120px; left: 30px; } .box-portfolio.style-5 .content .text { display: -webkit-box; -webkit-line-clamp: 4; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding-right: 15px; } .box-portfolio.style-5:hover .content .title { margin-bottom: 15px; padding-bottom: 15px; } .header .header-item img { height: 25px; object-fit: cover; object-position: bottom; } .page-title-home-1 .btn-slide-home-1 { right: 20px !important; } .page-title-home-1 .btn-slide-home-1.btn-next, .page-title-home-1 .btn-slide-home-1.btn-prev { transform: translateY(150px); } .page-title-home-1 .slide-home-1 .image img { height: 550px; } .page-title-home-1 .slide-home-1 .content-wrap { padding: 65px 15px; } .blog-right-sidebar-wrap { margin-right: 0px; margin-bottom: 100px; } .blog-right-sidebar-wrap .article-blog-item .image img { max-height: unset !important; } .footer { padding-top: 100px; } .footer .footer-top { margin-bottom: 40px; gap: 20px; flex-wrap: wrap; } .footer .footer-top .footer-left { width: 100%; } .footer .footer-inner { margin-bottom: 10px; } .footer .footer-inner .footer-inner-wrap { margin-bottom: 30px; } .article-blog-item { flex-wrap: wrap; } .article-blog-item .image, .article-blog-item.type-2 .image { width: 100%; max-width: unset; height: 500px; overflow: hidden; } .article-blog-item .image .video-wrap, .article-blog-item.type-2 .image .video-wrap { width: 100%; } .article-blog-item .image .video-wrap img, .article-blog-item.type-2 .image .video-wrap img { width: 100%; max-width: unset; } .article-blog-item .content, .article-blog-item.type-2 .content { padding-top: 0px; } .article-blog-item .content .entry-meta, .article-blog-item.type-2 .content .entry-meta { flex-wrap: unset !important; gap: 43px !important; } .article-blog-item .content .entry-meta .entry, .article-blog-item.type-2 .content .entry-meta .entry { width: unset; justify-content: flex-start; } .article-blog-item .content .entry-meta .entry:not(:last-child)::after, .article-blog-item.type-2 .content .entry-meta .entry:not(:last-child)::after { content: "/"; right: -23px; } .article-blog-item.style-2.type-3 .image { height: unset; } .article-blog-item.style-2.type-3 .entry-meta { gap: 20px 15px !important; flex-wrap: wrap; } .subscribe-wrap .has-border { padding: 20px; flex-wrap: wrap; } .subscribe-wrap .has-border .notice { flex-shrink: unset; } .subscribe-wrap .has-border .notice .content-inner { margin-top: 0px; max-width: unset; width: 100%; gap: 0px; justify-content: center; } .main-content { padding: 100px 0px; } .tf-topbar .topbar-inner .contact-list { gap: 10px; flex-wrap: wrap; } .tf-topbar .topbar-inner .contact-list .icon { display: none !important; }
}
@media (max-width: 850px) { .slider-s-project .box-portfolio.style-5 .content { bottom: -50px; } .slider-s-project .box-portfolio.style-5:hover .content { bottom: 40px; }
}
@media (max-width: 767px) { .page-title .rellax { top: 0; } .page-title .rellax img { min-height: 600px; } .s-break-page.style-2::after { background-attachment: unset; } .s-our-agriculture.style-3 .s-content-wrap .image-wrap { margin-left: 0px; } .s-welcome-to .box-text { padding: 30px; } .s-farm-event.s-project-2 .btn-right { justify-content: flex-start; } .s-farm-event.s-project-2 .content-section .text { margin-bottom: 10px; } .s-product-detail { padding-bottom: 60px; } .s-product-detail .tf-product-media-main { max-width: unset; width: 100%; max-height: unset; } .comment-wrap .author-wrap { gap: 15px; flex-wrap: wrap; } .blog-single .content .meta-list { gap: 5px 33px; flex-wrap: wrap; } .blog-single .content .blog-bot { gap: 30px; flex-wrap: wrap; } .blog-single .entry-image-2 { flex-wrap: wrap; } .blog-single .entry-image-2 .image { width: 100%; } .blog-single .entry-image-2 img { width: 100%; max-height: 550px; min-height: 400px; object-fit: cover; } .blog-single .entry-video { flex-wrap: wrap; } .blog-single .entry-video .video-wrap { width: 100%; max-width: unset !important; flex-shrink: unset !important; } .blog-single .entry-video .video-wrap img { width: 100%; max-width: unset; max-height: 550px; min-height: 450px; } .blog-single .entry-video .benefit-list { width: 100%; } .main-content.page-portfolio-1 .menu-tab { justify-content: flex-start; } .s-review .wg-counter { max-width: 170px; } .s-review .wg-counter .title { margin-bottom: 0px; } .s-review .wg-counter .has-border { padding: 10px 0px; } .s-review .wg-counter .icon { width: 45px; height: 45px; } .s-review .wg-counter .icon i { font-size: 15px; } .s-review .wg-counter .counter { margin-bottom: 0px; } .s-review .wg-counter .counter .sub-odo { font-size: 40px; bottom: -9px; line-height: 40px; } .s-review .wg-counter .odometer span { font-size: 40px; line-height: 40px; } .s-review .img-item.item-1 { display: none; } .tf-sidebar { padding-bottom: 30px; } .tf-shop-control { gap: 15px; flex-wrap: wrap; margin-bottom: 30px; } .tf-shop-control .tf-dropdown-sort { padding: 0px; } .tf-header-shop .wg-category { display: none; } .tf-header-shop .icon-wrap .icon:nth-child(3) { display: none; } .tf-header-shop .icon-wrap .icon:nth-child(2) { display: none; } .tf-header-shop .mobile-button { margin-left: 10px; } .main-content.page-service-detail .content .benefit { flex-wrap: wrap; justify-content: flex-start; } .main-content.page-service-detail .content .benefit .box-icon { width: calc(50% - 15px); } .grid-portfolio .box-portfolio .content { left: 20px; right: 20px; bottom: -150px; } .grid-portfolio .box-portfolio:hover .content { bottom: 20px; } .grid-portfolio .box-portfolio:hover .content .title { margin-bottom: 10px; padding-bottom: 10px; } .grid-portfolio .box-portfolio:hover .content .text { margin-bottom: 10px; } .tips { flex-wrap: wrap; } .tips .wg-tips { max-width: unset; } .slider-portfolio { padding: 0px 15px; } .slider-portfolio .gallery-item img { min-height: 400px; object-fit: cover; } .slider-portfolio .btn-portfolio.btn-next { right: 20px; } .slider-portfolio .btn-portfolio.btn-prev { left: 20px; } .grid-layout-3 { grid-template-columns: repeat(2, 1fr); } .wg-history { flex-wrap: wrap; gap: 15px; margin-bottom: 30px !important; } .wg-history .image.type-1 { justify-content: flex-start; } .wg-history.type-right { flex-wrap: wrap-reverse; } .wg-history.type-right .content { text-align: left; } .we-are-wrap { flex-wrap: wrap; justify-content: center; } .we-are-wrap .content { justify-content: center; align-items: center; text-align: center; } .we-are-wrap .text { width: 70%; } .we-are-wrap.pb-30 { padding-bottom: 30px; } .block-quote.style-4 .quote { gap: 15px !important; flex-wrap: wrap; } .wg-gallery { grid-template-areas: "aa aa bb bb " "cc cc dd dd " " ee ee ff ff " "gg gg hh hh "; } .main-content.page-faq .img-item.item-1 { display: none; } .main-content.page-gallery { padding: 60px 0px; } .main-content.page-gallery .menu-tab { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: unset; justify-content: unset; margin-bottom: 20px; } .main-content.page-gallery .gallery-item .image { height: 100%; } .main-content.page-gallery .gallery-item .image img { height: 100%; object-fit: cover; } .box-about-us { padding-bottom: 30px; } .box-about-us .content { border-radius: 0px 0px 20px 20px; } .clip-color-text p { font-size: 80px; line-height: 90px; } .s-welcome-to .box-text { margin-bottom: 30px; } .s-break-page.style-3 br { display: none; } .s-break-page.style-3 .content { padding: 0px 15px; } .s-break-page.style-3 .text { font-size: 60px; line-height: 70px; } .box-portfolio-2 .image img { min-height: 350px; object-fit: cover; } .box-portfolio-2 .content { padding: 30px; right: 20px; max-width: unset; width: calc(100% - 40px); } .box-portfolio-2 .content .title { line-height: 30px; } .box-portfolio-2 .content .text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* Giới hạn số dòng */ line-clamp: 3; /* Hỗ trợ thêm */ } .s-why-choose .content-section .benefit-list { gap: 20px !important; } .s-why-choose .content-section .benefit-list >* { width: calc(50% - 20px); } .s-why-choose .content-section .benefit-list .title { line-height: 30px !important; } .slider-project-2 { padding: 0px 15px; } .s-our-mission .content-section { flex-wrap: wrap; } .s-our-mission .content-section .slider-wrap { width: 100%; } .s-our-mission .content-section .video-wrap { width: 100%; } .s-our-mission .content-section .video-wrap img { min-height: 300px; } .s-our-agriculture.style-2 .wg-counter { gap: 10px !important; margin-bottom: 10px; } .s-our-agriculture.style-2 .wg-counter .counter-item { gap: 5px !important; } .slider-home-3 .btn-slide-home-3 { max-width: 60px; } .slider-home-3 .btn-slide-home-3.btn-next { top: 75%; } .slider-home-3 .btn-slide-home-3.btn-prev { top: 80%; } .slide-home-3 .image img { min-height: 520px; } .slide-home-3 .content-wrap .title { font-size: 50px; line-height: 60px; } .s-contact-us.style-2 .content-section { padding: 0px; } .footer.style-2 { padding-top: 70px; } .footer.style-2 .footer-inner { margin-bottom: 20px; } .footer.style-2 .footer-inner .footer-inner-wrap .footer-title-mobile { position: relative; } .footer.style-2 .footer-inner .footer-inner-wrap .footer-title-mobile::after { position: absolute; content: ""; right: 10px; top: 50%; transform: translateY(-50%); width: 12px; height: 1px; background-color: var(--White); transition: 0.25s ease-in-out; bottom: unset; left: unset; } .footer.style-2 .footer-inner .footer-inner-wrap .tf-accordion-content { display: none; } .footer.style-2 .footer-inner .footer-inner-wrap .tf-accordion-content li:not(:last-child) { margin-bottom: 15px; } .footer.style-2 .footer-top { margin-bottom: 40px; } .footer.style-2 .footer-top .footer-left { margin-bottom: 30px; } .footer .footer-inner .footer-inner-wrap { margin-bottom: 20px; } .footer .footer-inner .footer-inner-wrap .tf-collapse-content { display: none; } .footer .footer-inner .footer-inner-wrap .tf-collapse-content li:not(:last-child) { margin-bottom: 15px; } .footer .footer-inner .footer-inner-wrap .footer-title.footer-title-mobile { margin-bottom: 0px !important; padding-bottom: 10px; } .footer .footer-title-desktop { display: none !important; } .footer .footer-title-mobile { display: block !important; font-size: 20px !important; } .s-partner.style-2 { padding: 30px 0px !important; } .s-meet-farmer .heading-section { padding: 50px; } .s-happy-farm .bg-section >img { height: 260px; object-fit: cover; object-position: bottom; } .s-testimonial-2 .title { margin-bottom: 5px !important; } .s-testimonial-2 .counter-wrap { align-items: start; margin-bottom: 30px; } h1 { font-size: 80px; line-height: 80px; } .s-what-we-do .content-wrap .we-do-list { padding: 131px 15px 50px 15px; } .s-what-we-do .content-wrap .we-do-list ul { gap: 30px; } .s-quality-of-life { padding: 60px 0px 60px; } .s-quality-of-life .clip-color-text { position: relative; z-index: 5; } .s-quality-of-life br { display: none !important; } .s-quality-of-life .img-item { max-width: 150px !important; } .s-quality-of-life .img-item.item-2 { bottom: -50px; left: 0; } .s-quality-of-life .img-item.item-1 { top: -40px; } .s-about-us-2 { padding-top: 80px; } .s-about-us-2 .content-section { padding-bottom: 60px; } .s-about-us-2 .content-section .content { padding: 0px !important; } .s-about-us-2 .content-section .text-1 { margin-bottom: 10px; } .s-about-us-2 .content-section .text-2 { margin-bottom: 20px; } .s-about-us-2 .image { display: none; } .s-about-us-2 .wg-counter.style-4 { gap: 15px; } .s-about-us-2 .wg-counter .counter { margin-bottom: 10px; } .s-about-us-2 .wg-counter .title { margin-bottom: 5px; } .s-benefit { padding-top: 70px; } .s-benefit .benefit-list { padding: 45px; } .s-benefit .benefit-list .box-icon br { display: none; } .page-title-home-2 .btn-slide-home-2 { display: none; } .slide-home-2 .image img { min-height: 580px; object-fit: cover; } .slide-home-2 .content { padding: 0px 15px; } .slide-home-2 .content br { display: none; } .slide-home-2 .content .img-item { margin-bottom: 15px; } .slide-home-2 .content .text { margin-bottom: 20px; } .bg-page .image img { height: 480px; } .tf-topbar.style-2 .contact-list.mobile { justify-content: center; gap: 20px; } .tf-topbar.style-2 .contact-list.mobile li:first-child { display: none; } .s-blog-post { padding-top: 80px !important; padding-bottom: 30px !important; } .s-break-page.style-2 { height: 500px; } .s-break-page.style-2 .content { top: 50%; transform: translateY(-45%); padding: 0px; } .s-why-us .main-section { flex-wrap: wrap; } .s-why-us .main-section .image { width: 100%; } .s-why-us .main-section .image .video-wrap { width: 100%; } .s-why-us .main-section .image img { width: 100%; height: 500px; } .s-why-us .main-section .content-section { width: 100%; padding-top: 0px; } .s-why-us .main-section .content-section .heading-section { margin-bottom: 10px; } .s-why-us .main-section .content-section .img-item { margin-bottom: 0px; } .s-why-us .main-section .content-section .text { margin-bottom: 15px; } .s-why-us .bot .benefit-list li { padding: 15px 20px !important; } .page-title-home-1 .slide-home-1 .image img { height: 500px; } .page-title-home-1 .slide-home-1 br { display: none !important; } .page-title-home-1 .slide-home-1 .sub-title { margin-bottom: 0px !important; } .page-title-home-1 .slide-home-1 .img-item { margin-bottom: 10px !important; } .page-title-home-1 .slide-home-1 .text { margin-bottom: 20px !important; } .footer .footer-inner .footer-inner-wrap .footer-title { margin-bottom: 15px !important; } .subscribe-wrap .has-border .notice { gap: 20px; } .main-content { padding: 80px 0px; } .page-title .content .icon-img { margin-bottom: 50px; }
}
@media (max-width: 650px) { .s-our-expertise .s-slider .pagination-slider-provide { display: flex; justify-content: center; margin-top: 20px; } .tf-header-shop .header-topbar { gap: 15px; } .tf-header-shop .header-topbar .wg-category { display: none; } .tf-header-shop .header-topbar .icon-wrap { margin-left: unset !important; } .tf-header-shop .style-absolute .header-inner { gap: 30px; } .tf-header-shop .style-absolute .header-inner .header-right .icon-wrap { display: flex; margin-left: unset !important; } .offer-list { flex-wrap: wrap; gap: 15px !important; } .offer-list .offer-wrap { max-width: unset; } .offer-list .caption { padding-bottom: 5px; margin-bottom: 15px; } .offer-list .text-2 { margin-bottom: 15px !important; padding-bottom: 25px !important; } .grid-portfolio .box-portfolio .content { bottom: 10px !important; } .grid-portfolio .box-portfolio .text { display: none; } .grid-portfolio .box-portfolio .bot { display: none; } .s-why-choose .content-section .benefit-list { flex-wrap: wrap; margin-bottom: 20px; } .s-why-choose .content-section .benefit-list >* { width: 100%; } .s-about-us-2 .wg-counter.style-4 .counter { margin-bottom: 0px; } .s-about-us-2 .wg-counter.style-4 .counter-item .odometer span { font-size: 50px; } .s-about-us-2 .wg-counter.style-4 .counter-item .title { margin-bottom: 0px; font-size: 14px; } .article-blog-item.style-2.type-3 .entry-meta { flex-wrap: wrap !important; gap: 5px 15px !important; } .article-blog-item.style-2.type-3 .entry-meta li { width: unset; } .s-why-us .bot .benefit-list { flex-wrap: wrap; } .s-why-us .bot .benefit-list li { max-width: unset; } .s-why-us .bot .benefit-list li:not(:last-child)::after { content: ""; width: 100%; height: 1px; bottom: 0; top: unset; border-bottom: 1px dashed var(--Border-3); } .s-why-us .bot .benefit-list li .icon { margin-bottom: 5px; } .s-why-us .bot .benefit-list li .title { margin-bottom: 5px; } .block-quote .has-border, .block-quote.style-2 .has-border { padding: 20px; } .block-quote .has-border .quote, .block-quote.style-2 .has-border .quote { gap: 10px; } .article-blog-item .content .entry-meta, .article-blog-item.type-2 .content .entry-meta { flex-wrap: wrap !important; gap: 10px 0px !important; } .article-blog-item .content .entry-meta .entry, .article-blog-item.type-2 .content .entry-meta .entry { width: 40%; justify-content: flex-start; } .article-blog-item .content .entry-meta .entry:not(:last-child)::after, .article-blog-item.type-2 .content .entry-meta .entry:not(:last-child)::after { content: ""; } .header .header-inner .header-right { gap: 15px; } .header .header-inner .header-right .icon-wrap { display: none; } .header.style-3 .contact-wrap { display: none !important; } .topbar-right .social-list { padding: 10px 20px !important; gap: 15px !important; }
}
@media (max-width: 550px) { .page-blog-single .block-quote .bot { padding-left: 0px; } .page-our-service .s-provide .grid-layout-3 { gap: 40px; } .page-our-service .s-provide .box-infor .text { margin-bottom: 15px; } .page-our-events .s-banner .slider-side { margin-top: 0px; } .page-our-events .s-video .content-section { margin-top: 20px; } .s-meet-farmer .heading-section { padding: 30px 20px; } .tf-sticky-btn .content { padding: 0; } .tf-sticky-btn .white-list-wrap { display: none; } .tf-sticky-btn .wrap-quantity { gap: 15px; } .tf-topbar.style-3 .topbar-right { gap: 10px; } .tf-topbar.style-3 .topbar-right .contact-list li:nth-child(2) { display: none; } .tf-topbar.style-3 .topbar-right .icon-wrap { gap: 20px; margin-right: 10px; } .tf-topbar.style-3 .topbar-right .icon-wrap::after { height: 20px; } .tf-topbar.style-3 .topbar-right .icon-wrap .wg-bag::after { right: -15px; } .footer .footer-bottom .policy-list li::after { content: none !important; } .s-customer-say .testimonial { padding: 30px; } .s-customer-say .testimonial .author-wrap { margin-bottom: 15px; } .s-customer-say .testimonial .author-wrap .left { flex-wrap: wrap; gap: 15px; } .s-customer-say .testimonial .caption { margin-bottom: 15px; } .tf-topbar-shop .topbar-right ul { justify-content: space-around; } .tf-topbar-shop .topbar-right ul li:nth-child(1) { display: none; } .tf-topbar-shop .topbar-right ul li:nth-child(2) { display: none; } .main-content.page-service-detail .content .benefit { flex-wrap: wrap; justify-content: flex-start; } .main-content.page-service-detail .content .benefit .box-icon { width: 100%; } .box-portfolio.style-3 { max-width: unset; } .main-content.page-portfolio-details .bot { gap: 15px; } .main-content.page-portfolio-details .bot .btn-project { gap: 15px !important; } .grid-layout-3 { grid-template-columns: repeat(1, 1fr); } .grid-layout-3.grid-portfolio { grid-template-columns: repeat(1, 1fr); } .s-commitment-2 .image img { max-height: 450px; } .s-mission .wg-exprerience { width: 150px; height: 150px; } .s-mission .wg-exprerience p { line-height: 20px; } .s-mission .wg-exprerience p.year { font-size: 40px; } .s-mission .s-img-item.item-1 { top: -45px; } .we-are-wrap .text { width: 90%; } .wg-coming-soon { flex-wrap: wrap-reverse; } .wg-coming-soon .content .title { font-size: 60px; line-height: 60px; } .wg-coming-soon .content .wg-countdown { margin-bottom: 10px; } .wg-coming-soon .content .caption { font-size: 35px; line-height: 35px; } .wg-coming-soon .content .text { margin-bottom: 10px; } .wg-coming-soon .content .bot { gap: 15px; flex-wrap: wrap; } .wg-coming-soon .content .notice { line-height: 30px; } .js-countdown { padding-bottom: 40px; } .js-countdown .countdown__timer { gap: 10px; } .js-countdown .countdown__timer .countdown__item { width: 80px; } .js-countdown .countdown__timer .countdown__item .countdown__value { font-size: 40px; } .js-countdown .countdown__timer .countdown__item:not(:last-child)::after { right: -10%; } .js-countdown .countdown__timer .countdown__item::before { bottom: -20px; font-size: 16px; line-height: 20px; } .tf-btn.scale-50 { gap: 10px; padding: 6px 5px 6px 20px; } .btn-slide-home-3 { display: none; } .slide-home-3 .content-wrap .title { font-size: 10vw; line-height: 11vw; } .slide-home-3 .content-wrap br { display: none; } .s-happy-farm .heading-section .top { margin-bottom: 10px; } .s-happy-farm .heading-section .title { font-size: 35px; line-height: 40px; margin-bottom: 5px !important; } .s-happy-farm .heading-section .text { margin-bottom: 15px !important; } .s-our-agriculture .content .text { margin-bottom: 20px !important; } .s-our-agriculture .content .wg-progress { margin-bottom: 20px !important; } .s-what-we-do .content-section { padding: 30px; } .s-what-we-do .content-section .title { font-size: 35px; line-height: 40px; } .s-about-us-2 .wg-counter.style-4 { gap: 20px; flex-wrap: wrap; } .s-about-us-2 .wg-counter.style-4 .counter-item { width: 100%; } .s-benefit .benefit-list { padding: 30px; } .s-benefit .benefit-list .box-icon { width: 100%; padding: 10px 15px; } .slide-home-2 .content .title { font-size: 50px; line-height: 50px; } .slide-home-2 .content .text { font-size: 14px; line-height: 20px; } .header.style-2 .header-inner .tf-btn { display: none; } .s-contact-us .content-section { padding: 30px 15px; } .form-send-message .cols { flex-wrap: wrap; } .s-faq { padding-bottom: 80px; } .s-banner { position: relative; } .s-banner .s-img-item.item-bottom { display: none; } .s-banner .heading-side { bottom: 20%; position: absolute; top: 0; } .s-banner .heading-side .image img { height: 500px; max-height: unset; } .s-banner .slider-side { margin-top: 0px; } .tf-accordion .accordion-header { padding-bottom: 15px; } .tf-accordion .accordion-button { display: -webkit-box; -webkit-line-clamp: 1; /* Giới hạn số dòng là 4 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding: 17px 35px 0px 29px !important; } .tf-accordion .accordion-button::after { right: 21px !important; } .tf-accordion .accordion-button::before { right: 15px !important; } .wg-counter { gap: 30px 0px; } .wg-counter .sub { font-size: 17px; } .wg-counter .counter-item .icon { margin-bottom: 10px; } .wg-counter .counter-item .odometer span { font-size: 50px !important; } .wg-counter .counter { margin-bottom: 0px; } .testimonial.style-4 .left { gap: 15px; } .testimonial.style-4 .caption { margin-bottom: 10px; } .s-testimonial .content-section .heading-section .title { margin-bottom: 0px; } .s-testimonial .slider-s-testimonial .btn-s-testimonial { position: relative; width: max-content; } .s-testimonial .slider-s-testimonial .btn-s-testimonial.btn-prev { bottom: 0px; left: 0; } .s-testimonial .slider-s-testimonial .btn-s-testimonial.btn-next { bottom: -19px; left: 70px; } .slider-s-project .box-portfolio.style-5 .content { bottom: -100%; } .slider-s-project .box-portfolio.style-5 .content .bot { display: none; } .s-our-commitment .main-section .content-section .box-icon-list { gap: 20px 0px; flex-wrap: wrap; } .s-our-commitment .main-section .content-section .box-icon-list .box-icon { max-width: unset; padding: 0px 20px; } .s-our-commitment .main-section .content-section .box-icon-list li { width: 50%; } .s-our-commitment .main-section .content-section .tf-btn { padding: 5px 5px 5px 15px; gap: 10px; } .page-title-home-1 .slide-home-1 .content-wrap { padding: 35px 15px; } .page-title-home-1 .slide-home-1 .content-wrap .content .sub-title { font-size: 20px; } .page-title-home-1 .slide-home-1 .content-wrap .content .text { font-size: 14px; line-height: 20px; } .page-title-home-1 .btn-slide-home-1 img { max-width: 60px; } .block-quote .has-border .quote .icon { display: none; } .subscribe-wrap .notice .icon { display: none; } .tf-topbar .topbar-left { display: none !important; } .tf-topbar .topbar-right .contact-list { gap: 10px 30px !important; }
}
@media (max-width: 500px) { .header-right .tf-btn { display: none; }
}
@media (max-width: 450px) { .page-title .rellax img { min-height: 500px; } .tf-sticky-btn .content { justify-content: center; padding: 5px 0px; } .tf-sticky-btn .tf-atc-product { display: none; } .s-testimonial-3 .sub-title i { display: none; } .slider-home-1 .content-wrap { display: flex; flex-direction: column; justify-content: center; height: 100%; } .s-customer-say .testimonial .author-wrap .right { display: none; } .s-review .wg-counter { top: unset; bottom: 50px; } .s-box-wrap .box-icon { width: 100%; } .tf-header-shop .style-absolute .header-inner .header-right .icon-wrap { display: none; } .wg-gallery { grid-template-columns: repeat(1, 1fr); grid-template-areas: unset; } .wg-gallery .gallery-item { grid-area: unset; } .js-countdown { padding-bottom: 40px; } .js-countdown .countdown__timer { gap: 10px; } .js-countdown .countdown__timer .countdown__item { width: 60px; } .js-countdown .countdown__timer .countdown__item .countdown__value { font-size: 30px; } .js-countdown .countdown__timer .countdown__item:not(:last-child)::after { right: -10%; } .js-countdown .countdown__timer .countdown__item::before { bottom: -10px; font-size: 14px; line-height: 20px; } .s-our-expertise .card-provide .image { max-width: 200px; } .s-our-expertise .card-provide br { display: none; } .s-our-expertise .card-provide .text { white-space: wrap !important; width: unset; text-align: center; } .s-what-we-do .content-wrap .we-do-list ul { gap: 30px; flex-wrap: wrap; } .tf-topbar.style-2 .contact-list.mobile { flex-wrap: wrap-reverse; gap: 0px 15px; } .tf-topbar.style-2 .contact-list.mobile li .icon { display: none !important; } .header.style-2 .icon-wrap { display: none !important; } .heading-section .title { font-size: 40px; line-height: 50px; } .wg-counter .counter-item { width: 100%; } .s-project .heading-side { padding: 80px 0px 152px; } .s-project .slider-s-project { margin-top: -120px !important; } .s-project .slider-side .bot { margin-top: 40px; } .slider-s-project .box-portfolio.style-5 .content .title { line-height: 30px; } .slider-s-project .box-portfolio.style-5 .content:hover { bottom: 10px; } .s-about-us .box-trust { padding: 15px !important; } .s-about-us .box-trust .box-icon-list { margin-bottom: 30px !important; } .s-about-us .box-trust .box-icon-list .caption { font-size: 16px !important; line-height: 26px !important; } .s-about-us .box-trust .benefit-list { padding-bottom: 15px !important; margin-bottom: 15px !important; } .s-about-us .box-trust li:not(:last-child) { margin-bottom: 8px !important; } .s-about-us .wg-counter { padding: 15px !important; } .s-about-us .wg-counter .icon { top: 10px !important; right: 10px !important; } .s-about-us .wg-counter .counter .odometer span { font-size: 50px; } .s-about-us .wg-counter .sub-odo { font-size: 40px !important; bottom: -6px; } .box-portfolio.style-4 .content { height: 60px; } .box-portfolio.style-4 .content .title { margin-top: -63px; font-size: 18px; } .btn-slide-home-1 { display: none; } .s-filter-sorting { margin-bottom: 30px; } .block-quote .has-border .bot .meta-left { flex-wrap: wrap; gap: 0px 38px; justify-content: flex-start; } .block-quote .has-border .bot .meta-left .entry:after { content: none !important; } .block-quote .has-border .bot .entry-author { overflow: hidden; /* Ẩn phần nội dung tràn ra ngoài */ } .block-quote .has-border .bot .entry-author a { text-overflow: ellipsis; /* Thêm dấu ba chấm ở cuối */ overflow: hidden; /* Ẩn phần nội dung tràn ra ngoài */ white-space: nowrap; /* Không cho phép xuống dòng */ } h1 { font-size: 60px; line-height: 60px; } .page-title .content .sub-title { line-height: 20px; margin-bottom: 5px; } .tf-topbar .topbar-inner { flex-wrap: wrap; gap: 10px; justify-content: center; } .tf-topbar .topbar-inner .topbar-left { width: 100%; justify-content: center; position: relative; } .tf-topbar .topbar-inner .topbar-left span { width: 100%; text-align: center; } .tf-topbar .topbar-inner .topbar-right .social-list { padding: 6px 17px !important; }
}
.append-video-bar{ position: absolute; top: 20px; right: 20px; z-index: 999; background: #FFF; padding: 10px 10px 10px 15px; font-size: 40px; border-radius: 50%; line-height: 52px; text-align: center; height: 64px;
}
/*# sourceMappingURL=styles.css.map */