/* RESET CƠ BẢN */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width:100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
background: none;
border: none;
outline: none;
}
ul,
ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
:root {
--btn-border-rad: 40px;
--fs-btn: 15px;
--mg-top-el: 25px;
--hl-link-color: #fb5546;
--radius: 20px;
}
.homenest__website-design__section1 {
padding-top: 170px;
width: 100%;
height: auto;
background-image: url(' /wp-content/uploads/2025/05/bg-wrap.webp');
background-repeat: no-repeat;
background-size: cover;
}
.homenest__website-design__section1-wrapper {
padding: 0 100px;
text-align: center;
display: flex;
flex-direction: column;
}
.homenest__website-design__hero-sup {
display: flex;
background: url(' /wp-content/uploads/2025/05/text-bg.webp');
background-repeat: no-repeat;
align-items: center;
width: fit-content;
gap: 5px;
min-height: 28px;
padding: 6px 8px;
border-radius: 13px;
background-size: cover;
max-width: max-content;
justify-content: center;
margin: 0 auto;
}
.homenest__website-design__hero-sup p {
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
color: white;
display: inline;
}
.homenest__website-design__section1__title {
font-size: 5.625rem;
line-height: 1;
color: white;
margin-top: 15px;
}
.homenest__website-design__section1__wrap-btn {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 3rem;
}
.homenest__website-design__section1__des {
line-height: 1;
letter-spacing: 0;
font-size: 17px;
margin-top: var(--mg-top-el);
color: white;
}
.homenest__website-design__section1__wrap-btn--get {
line-height: 1;
letter-spacing: 0;
font-weight: 500;
text-transform: capitalize;
display: flex;
flex-direction: row;
font-size: var(--fs-btn);
padding: 17px 21px 16px;
border: 2px solid #c01be9;
color: white;
background-color: #c01be9;
border-radius: var(--btn-border-rad);
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.homenest__website-design__section1__wrap-btn--get img {
height: 1.1em;
width: auto;
display: inline-block;
}
.homenest__website-design__section1__wrap-btn--get:hover {
background-color: #fb5546;
border: 2px solid #fb5546;
transform: translateY(-2px);
}
.homenest__website-design__section1__wrap-btn--demos {
line-height: 1;
letter-spacing: 0;
font-weight: 500;
padding: 17px 21px 16px;
border: 2px solid black;
color: white;
background-color: black;
border-radius: var(--btn-border-rad);
font-size: var(--fs-btn);
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.homenest__website-design__section1__wrap-btn--demos:hover {
background-color: rgb(0, 169, 183);
border: 2px solid rgb(0, 169, 183);
transform: translateY(-2px);
}
.border-red {
border: 1px solid red;
}
.homenest__website-design__section1__grid {
margin-top: calc(var(--mg-top-el)*4);
width: 100%;
max-height: 570px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 1.563vw;
}
.homenest__website-design__section1__grid-1,
.homenest__website-design__section1__grid-2,
.homenest__website-design__section1__grid-3,
.homenest__website-design__section1__grid-4,
.homenest__website-design__section1__grid-5 {
border-radius: var(--radius);
overflow: hidden;
}
.homenest__website-design__section1__grid-1 {
grid-row: span 3 / span 3;
}
.homenest__website-design__section1__grid-2 {
grid-row: span 2 / span 2;
grid-column-start: 1;
grid-row-start: 4;
}
.homenest__website-design__section1__grid-3 {
grid-column: span 3 / span 3;
grid-row: span 5 / span 5;
grid-column-start: 2;
grid-row-start: 1;
}
.homenest__website-design__section1__grid-4 {
grid-row: span 2 / span 2;
grid-column-start: 5;
grid-row-start: 1;
}
.homenest__website-design__section1__grid-5 {
grid-row: span 3 / span 3;
grid-column-start: 5;
grid-row-start: 3;
}
.homenest__website-design__section1__grid--img {
width: 100%;
height: 100%;
}
.homenest__website-design__section1__grid--img img {
width: 100%;
height: 100%;
object-fit: fill;
}
.homenest__website-design__section1__brand {
display: flex;
justify-content: center;
margin-bottom: 80px;
}
.homenest__website-design__section1__brand p {
font-size: 21rem;
font-weight: 600;
line-height: 1;
display: inline-block;
position: relative;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image:
linear-gradient(to right, #a8fcff, #1845bb),
url(" /wp-content/uploads/2025/05/dark-exa.webp");
background-blend-mode: overlay;
display: flex;
gap: 0;
}
.homenest__website-design__section1--letter {
position: relative;
display: inline-block;
font-size: 350px;
font-weight: 600;
line-height: 1;
background-clip: text;
color: transparent;
background-image:
linear-gradient(to top, #4FF0FF, #111BA4),
url(" /wp-content/uploads/2025/05/dark-exa.webp");
background-blend-mode: overlay;
-webkit-background-clip: text;
}
.homenest__website-design__section1--popup-image {
position: absolute;
width: 170px;
height: 170px;
pointer-events: none;
opacity: 0;
transform: scale(0);
transition: opacity 0.4s ease, transform 0.4s ease;
z-index: 10;
border-radius: 10px;
}
.homenest__website-design__section1--letter:hover .homenest__website-design__section1--popup-image {
opacity: 1;
transform: scale(1);
}
.service-wrapper {
width: 100%;
overflow: hidden;
margin-top: -107px;
}
/* RESPONSIVE BREAKPOINTS */
@media (min-width: 1200px) and (max-width: 1600px){
.homenest__website-design__section4-wrapper{
padding:0 150px !important;
}
.homenest__website-design__section1--letter{
font-size:250px;
}
}
/* 992px – 1199.98px: Desktop nhỏ */
@media (min-width: 992px) and (max-width: 1199.98px) {
.homenest__website-design__section3 {
margin-top: 80px;
}
.homenest__website-design__section3-wrapper {
padding: 0 100px;
}
.homenest__website-design__section3__title span {
font-size: 55px;
}
.homenest__website-design__section3__title p {
font-size: 18px;
}
.homenest__website-design__section3--content {
padding: 0 15%;
}
.homenest__website-design__section4 {
margin-top: 80px;
}
.homenest__website-design__section4-wrapper {
padding: 0 150px !important;
}
.homenest__website-design__section4__title span {
font-size: 55px;
}
.homenest__website-design__section4__title p {
font-size: 18px;
}
.homenest__website-design__section4--video-content img:nth-child(2),
.homenest__website-design__section4--video-content img:nth-child(3) {
max-width: 450px;
}
.homenest__website-design__section4-wrapper .section4-text {
font-size: 14px;
}
.homenest__website-design__section1-wrapper {
padding: 0 50px;
}
.homenest__website-design__section2-wrapper{
padding: 0 80px !important;
}
.homenest__website-design__section1__title {
font-size: 4.5rem;
}
.homenest__website-design__section1__brand p {
font-size: 280px;
}
.homenest__website-design__section1--letter {
font-size: 188px;
}
.homenest__website-design__section11-wrapper,
.homenest__website-design__section12-wrapper,
.homenest__website-design__section13-wrapper{
padding: 130px 50px !important;
}
.homenest__website-design__section15--content,
.homenest__website-design__section7-wrapper{
padding: 0 50px !important;
}
.homenest__web-design__popular-question .container__about-us{
width: 100% !important;
}
}
/* 768px – 991.98px: Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
.homenest__website-design__section1 {
padding-top: 120px;
}
.homenest__web-design__popular-question .container__about-us {
width: 100% !important;
}
.homenest__website-design__section15--content {
padding: 0 20px;
}
.homenest__website-design__section1-wrapper {
padding: 0 40px;
}
.homenest__website-design__section1__title {
font-size: 4rem;
}
.homenest__website-design__section1__des {
font-size: 22px;
font-weight: 600;
}
.homenest__website-design__section1__grid {
max-height: 400px;
gap: 2vw;
}
.homenest__website-design__section1__brand {
margin-top: 50px;
}
.homenest__website-design__section1__brand p {
font-size: 200px;
}
.homenest__website-design__section1--letter {
font-size: 150px;
}
.homenest__website-design__section1--popup-image {
width: 120px;
height: 120px;
}
.homenest__website-design__section1__wrap-btn a {
font-weight: 600;
font-size: 18px;
}
}
/* 576px – 767.98px: Mobile lớn */
@media (min-width: 576px) and (max-width: 767.98px) {
.homenest__website-design__section1 {
padding-top: 100px;
}
.homenest__website-design__section1-wrapper {
padding: 0 30px;
padding-top: 50px;
}
.homenest__website-design__hero-sup p {
font-size: 11px;
}
.homenest__website-design__section1__title {
font-size: 2.8rem;
margin-top: 20px;
}
.homenest__website-design__section1__des {
font-size: 15px;
}
.homenest__website-design__section1__wrap-btn {
align-items: center;
gap: 1rem;
margin-top: 2rem;
}
.homenest__website-design__section1__wrap-btn--get,
.homenest__website-design__section1__wrap-btn--demos {
width: 100%;
max-width: 250px;
justify-content: center;
text-align: center;
}
.homenest__website-design__section1__grid {
max-height: 300px;
gap: 3vw;
margin-top: calc(var(--mg-top-el)*3);
}
.homenest__website-design__section1__brand {
margin-bottom: 50px;
}
.homenest__website-design__section1__brand p {
font-size: 120px;
}
.homenest__website-design__section1--letter {
font-size: 120px;
}
.homenest__website-design__section1--popup-image {
width: 80px;
height: 80px;
}
}
/* Dưới 576px: Mobile nhỏ */
@media (max-width: 575.98px) {
.homenest__website-design__section1 {
padding-top: 80px;
}
.homenest__website-design__section1-wrapper {
padding: 0 20px;
padding-top: 50px;
}
.homenest__website-design__hero-sup {
padding: 5px 6px;
min-height: 24px;
}
.homenest__website-design__hero-sup p {
font-size: 10px;
}
.homenest__website-design__section1__title {
font-size: 2.5rem;
margin-top: 15px;
line-height: 1.1;
font-size: 300;
}
.homenest__website-design__section1__des {
font-size: 17px;
margin-top: 20px;
font-weight: 600;
}
.homenest__website-design__section1__wrap-btn {
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
padding: 0 2rem;
}
.homenest__website-design__section1__wrap-btn a {
font-weight: 700;
font-size: 13px;
}
.homenest__website-design__section1__wrap-btn--get,
.homenest__website-design__section1__wrap-btn--demos {
width: 100%;
max-width: 280px;
justify-content: center;
text-align: center;
padding: 15px 18px 14px;
font-size: 14px;
}
/* Grid giữ nguyên layout nhưng thu nhỏ */
.homenest__website-design__section1__grid {
max-height: 250px;
gap: 4vw;
margin-top: calc(var(--mg-top-el)*2.5);
}
.homenest__website-design__section1__brand {
margin-top: 25px;
margin-bottom: 40px;
}
.homenest__website-design__section1__brand p {
font-size: 80px;
}
.homenest__website-design__section1--letter {
font-size: 80px;
}
.homenest__website-design__section1--popup-image {
width: 60px;
height: 60px;
}
.homenest__website-design__section1__grid-1,
.homenest__website-design__section1__grid-2,
.homenest__website-design__section1__grid-3,
.homenest__website-design__section1__grid-4,
.homenest__website-design__section1__grid-5 {
border-radius: 7px;
}
}
/* Mobile cực nhỏ dưới 400px */
@media (max-width: 399.98px) {
.homenest__website-design__section1-wrapper {
padding: 0 15px;
padding-top: 40px;
}
.homenest__website-design__section1__title {
font-size: 2rem;
}
.homenest__website-design__section1__grid {
max-height: 200px;
gap: 5vw;
}
.homenest__website-design__section1__brand p {
font-size: 80px;
}
.homenest__website-design__section1--letter {
font-size: 60px;
}
.homenest__web-design__popular-question .container__about-us,
.homenest__website-design__section13-wrapper{
padding: 50px 20px !important;
}
}
/* SECTION 2 */
.homenest__website-design__section2 {
padding-top: 90px;
width: 100%;
height: auto;
position: relative;
}
.homenest__website-design__section2-wrapper {
width: 100%;
height: auto;
padding: 0 200px;
}
.homenest__website-design__section2__video {
max-width: 279px;
margin: 0 auto;
display: block;
}
.homenest__website-design__section2__video video {
object-fit: contain;
overflow-clip-margin: content-box;
overflow: clip;
mix-blend-mode: multiply;
}
.homenest__website-design__section2__title {
text-align: center;
}
.homenest__website-design__section2__title span {
display: inline-block;
margin-top: 3rem;
font-weight: 600;
line-height: 1;
font-size: 63px;
position: relative;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, #2d0e2d 0%, #77175e 30%, #f23dd2 55%, #9d1595 70%, #38183e 100%);
animation: text-bg-animate 5s ease infinite;
}
@keyframes text-bg-animate {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
.homenest__website-design__highlight-link {
color: var(--hl-link-color);
}
.homenest__website-design__section2__title p {
font-weight: 600;
margin-top: 20px;
font-size: 20px;
}
.homenest__website-design__section2__grid {
margin-top: var(--mg-top-el);
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 30px;
max-height: 850px;
}
.homenest__website-design__section2__grid-1 {
grid-row: span 3 / span 3;
}
.homenest__website-design__section2__grid-2 {
grid-row: span 4 / span 4;
grid-column-start: 1;
grid-row-start: 4;
background-color: #f2f7fb;
}
.homenest__website-design__section2__grid-3 {
grid-row: span 2 / span 2;
grid-column-start: 1;
grid-row-start: 8;
background-image: url(' /wp-content/uploads/2025/05/item-3-bg.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homenest__website-design__section2__grid-4 {
grid-column: span 2 / span 2;
grid-row: span 6 / span 6;
grid-column-start: 2;
grid-row-start: 1;
background-image: url(' /wp-content/uploads/2025/05/item-4-bg.webp');
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.homenest__website-design__section2__grid-5 {
grid-row: span 3 / span 3;
grid-column-start: 2;
grid-row-start: 7;
background-color: #dcf5d5;
}
.homenest__website-design__section2__grid-6 {
grid-row: span 3 / span 3;
grid-column-start: 3;
grid-row-start: 7;
background-image: url(' /wp-content/uploads/2025/05/item-6-bg.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homenest__website-design__section2__grid-7 {
grid-row: span 4 / span 4;
grid-column-start: 4;
grid-row-start: 6;
background-image: url(' /wp-content/uploads/2025/05/item-9-bg.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homenest__website-design__section2__grid-8 {
grid-row: span 3 / span 3;
grid-column-start: 4;
grid-row-start: 3;
background-color: #f3efe4;
}
.homenest__website-design__section2__grid-9 {
grid-row: span 2 / span 2;
grid-column-start: 4;
grid-row-start: 1;
background-image: url(' /wp-content/uploads/2025/05/item-7-bg.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homenest__website-design__section2__grid-1,
.homenest__website-design__section2__grid-2,
.homenest__website-design__section2__grid-3,
.homenest__website-design__section2__grid-4,
.homenest__website-design__section2__grid-5,
.homenest__website-design__section2__grid-6,
.homenest__website-design__section2__grid-7,
.homenest__website-design__section2__grid-8,
.homenest__website-design__section2__grid-9 {
width: 100%;
height: 100%;
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.homenest__website-design__section2__grid-4 {
display: flex;
flex-direction: column;
justify-content: flex-end;
/* Đẩy nội dung xuống dưới */
position: relative;
padding: 30px;
z-index: 1;
}
.website-design__section2__grid-4__video {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
position: absolute;
}
.website-design__section2__grid-4__video video {
object-fit: fill;
}
.homenest__website-design__section2__wrap-card {
padding: 30px;
display: flex;
flex-direction: column;
}
.website-design__section2__grid-4__img {
position: relative;
margin-top: 1.3em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 5px;
z-index: 1;
}
.website-design__section2__grid-4__img img {
border-radius: 35px;
max-height: 35px;
max-width: 110px;
}
.website-design__section2__grid-4__video img {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -90%);
max-width: 500px;
}
.homenest__website-design__section2__grid-1 {
background-image: url(' /wp-content/uploads/2025/05/item-1-bg.webp');
}
.website-design__section2__grid-4__title {
bottom: 0;
text-align: center;
position: relative;
font-size: 45px;
z-index: 1;
margin-top: 15px;
}
.homenest__website-design__section2__wrap-card__img {
position: relative;
display: inline-block;
padding: 0 40px;
}
.homenest__website-design__section2__wrap-card__img .img-background {
width: 100%;
height: auto;
display: block;
}
.homenest__website-design__section2__wrap-card__img .img-overlay {
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%);
width: 15%;
/* nhỏ lại */
animation: rotateFlip 2s infinite linear;
z-index: 2;
pointer-events: none;
}
@keyframes rotateFlip {
0% {
transform: translateX(-50%) rotateY(0deg);
}
50% {
transform: translateX(-50%) rotateY(180deg);
}
100% {
transform: translateX(-50%) rotateY(360deg);
}
}
.homenest__website-design__section2--title-card {
margin-top: 20px;
font-size: 18px;
text-align: center;
}
.homenest__website-design__section2__wrap-card-2 {
padding: 30px;
display: flex;
flex-direction: column;
}
.homenest__website-design__section2__grid-2__img {
margin-top: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 40px;
}
.homenest__website-design__section2__grid-2__img img {
width: 80%;
}
@keyframes zoomInOutA {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
/* Zoom in */
}
}
@keyframes zoomInOutB {
0%,
100% {
transform: scale(1.2);
/* Zoom in */
}
50% {
transform: scale(1);
/* Zoom out */
}
}
.homenest__website-design__section2__grid-2__img .img-zoom-in-out-1 {
animation: zoomInOutA 4s infinite ease-in-out;
transition: transform 0.3s ease;
}
.homenest__website-design__section2__grid-2__img .img-zoom-in-out-2 {
animation: zoomInOutB 4s infinite ease-in-out;
transition: transform 0.3s ease;
}
.homenest__website-design__section2__grid-3 .wrap-card3 {
padding: 10px 30px;
}
.homenest__website-design__section2__grid-3 .wrap-card3 .wrap-card3__num-wrap {
display: flex;
gap: 10px;
justify-content: flex-start;
align-items: center;
}
.homenest__website-design__section2__grid-3 .wrap-card3 .numb {
font-size: 80px;
font-weight: 700;
color: white;
line-height: 1;
margin-bottom: 10px;
}
.homenest__website-design__section2__grid-3 .wrap-card3 .title-card-3 {
font-size: 18px;
margin-top: 20px;
}
@keyframes spinClockwise {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.rotating-plus {
width: 50px;
/* tuỳ chỉnh kích thước */
height: 50px;
animation: spinClockwise 2s linear infinite;
transform-origin: center center;
}
.homenest__website-design__section2__grid-9 .section2__grid-9__wrapper {
padding: 20px 30px;
display: flex;
gap: 10px;
width: 100%;
justify-content: center;
}
.section2__grid-9__wrapper--content {
padding-top: 15px;
padding-left: 20px;
display: flex;
align-items: center;
gap: 30px;
}
.section2__grid-9__wrapper--content-numb {
display: flex;
}
.section2__grid-9__wrapper--content-numb img {
margin-left: -20px;
height: 35px;
width: 35px;
}
.section2__grid-9__wrapper {
display: flex;
align-items: center;
}
.section2__grid-9__wrapper--content .numb {
font-size: 90px;
font-weight: 700;
color: white;
line-height: 1;
margin-bottom: 10px;
}
.section2__grid-9__wrapper--content-text {
font-size: 20px;
font-weight: 700;
color: white;
}
.homenest__website-design__section2__grid-8 .section2__grid-8__wrap {
width: 100%;
height: 100%;
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* .homenest__website-design__section2__grid-8 .section2__grid-8__wrap .section2__grid-8__wrap--img{
width: 100%;
} */
.section2__grid-8__wrap .section2__grid-8__wrap--text p {
font-size: 19px;
text-align: center;
font-weight: 600;
}
.section2__grid-8__wrap .section2__grid-8__wrap--img {
position: relative;
display: inline-block;
}
.section2__grid-8__wrap--img .badge {
position: absolute;
top: 10px;
right: 0;
background: linear-gradient(270deg, #ff8a00, #d45aff, #ff8a00);
background-size: 400% 400%;
animation: gradientMove 5s ease infinite;
color: white;
font-size: 14px;
font-weight: bold;
padding: 13px 10px;
border-radius: 50%;
z-index: 2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Animation keyframes */
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.homenest__website-design__section2__grid-6 .section2__grid-6__wrap {
width: 100%;
height: 100%;
padding: 30px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* .homenest__website-design__section2__grid-8 .section2__grid-8__wrap .section2__grid-8__wrap--img{
width: 100%;
} */
.section2__grid-6__wrap .section2__grid-6__wrap--text p {
font-size: 19px;
text-align: center;
font-weight: 600;
}
.section2__grid-6__wrap .section2__grid-6__wrap--img {
position: relative;
display: inline-block;
}
.website-design__section2__grid-5__wrap {
height: 100%;
width: 100%;
}
.website-design__section2__grid-5__wrap--content {
padding: 30px 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.website-design__section2__grid-5__wrap--content-img {
display: flex;
flex-direction: column;
gap: 5px;
height: 100px;
position: relative;
width: 200px;
/* Khung chứa cố định */
margin: 0 auto;
padding: 0 10px;
/* Padding để hình không chạm viền */
box-sizing: border-box;
}
.website-design__section2__grid-5__wrap--content-img img {
height: 45px;
/* Kích thước cố định */
width: 120px;
/* Kích thước cố định */
object-fit: cover;
border-radius: 20px;
position: relative;
}
/* Animation cho hình đầu tiên - di chuyển từ trái sang phải */
.website-design__section2__grid-5__wrap--content-img img:first-child {
animation: slideLeftToRight 4s ease-in-out infinite;
}
/* Animation cho hình thứ hai - di chuyển từ phải sang trái */
.website-design__section2__grid-5__wrap--content-img img:last-child {
animation: slideRightToLeft 4s ease-in-out infinite;
}
@keyframes slideLeftToRight {
0% {
transform: translateX(0px);
/* Bắt đầu từ vị trí trái */
}
50% {
transform: translateX(60px);
/* Di chuyển đến vị trí phải (200px - 120px - 20px padding = 60px) */
}
100% {
transform: translateX(0px);
/* Quay về vị trí trái */
}
}
@keyframes slideRightToLeft {
0% {
transform: translateX(60px);
/* Bắt đầu từ vị trí phải */
}
50% {
transform: translateX(0px);
/* Di chuyển đến vị trí trái */
}
100% {
transform: translateX(60px);
/* Quay về vị trí phải */
}
}
.website-design__section2__grid-5__wrap--content-text {
font-size: 20px;
margin-top: 50px;
text-align: center;
color: #333;
}
.website-design__section2__grid-5__wrap--content-text p {
text-align: center;
font-size: 19px;
font-weight: 700;
}
/* Hiệu ứng hover để tạm dừng animation */
.website-design__section2__grid-5__wrap--content-img:hover img {
animation-play-state: paused;
}
.website-design__section2__grid-7__wrap {
height: 100%;
width: 100%;
}
.website-design__section2__grid-7__wrap--content {
width: 100%;
height: 100%;
padding: 30px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
}
.website-design__section2__grid-7__wrap--content-img {
position: relative;
display: flex;
justify-content: center;
}
.website-design__section2__grid-7__wrap--content-img .img-top-left {
position: absolute;
top: -20px;
left: 10px;
height: 60px;
width: 60px;
animation: moveUpDownSection2 4s infinite ease-in-out;
transition: transform 0.3s ease;
}
.website-design__section2__grid-7__wrap--content-img .img-middle {
width: 70%;
}
.website-design__section2__grid-7__wrap--content-img .img-bottom-right {
height: 50px;
width: 50px;
position: absolute;
bottom: -20px;
right: 20px;
animation: zoomInOutA 4s infinite ease-in-out;
transition: transform 0.3s ease;
}
.website-design__section2__grid-7__wrap--content-text p {
font-size: 19px;
color: white;
font-weight: 700;
text-align: center;
}
/* ========================================= */
/* CSS Bảng giá Start */
/* ========================================= */
.homenest__professional_website_hn-pricing-section {
padding: 100px 128px;
background-color: #ffffff;
text-align: left;
}
.homenest__professional_website_hn-pricing-title {
font-size: 42px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
}
.homenest__professional_website_hn-pricing-title span {
color: #0b65f4;
}
.homenest__professional_website_hn-pricing-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
width: 100%;
height: auto;
align-items: stretch;
}
.homenest__professional_website_hn-card {
background: #f0f2f4;
border-radius: 8px;
border: #dddddd 1px solid;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 15px;
position: relative;
overflow: visible;
text-align: left;
max-height: max-content;
}
.homenest__professional_website_hn-card.expanded {
align-self: start;
z-index: 0; /* Optional: makes sure expanded card appears above others */
}
.homenest__professional_website_hn-pricing-cards.expanding
.homenest__professional_website_hn-card:not(.expanded) {
align-self: start;
height: auto;
}
.homenest__professional_website_hn-card__header {
color: white;
font-weight: bold;
font-size: 20px;
padding: 10px;
border-radius: 8px;
text-transform: uppercase;
display: flex;
justify-content: center; /* horizontal */
align-items: center;
margin-bottom: 5px;
position: relative;
width: calc(60% + 25px);
height: 57.5px;
left: -30px;
/* Lồi ra bên trái */
z-index: 1.5;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
}
/* Mỗi loại gói có 1 ảnh nền riêng cho header */
.homenest__professional_website_hn-card--basic
.homenest__professional_website_hn-card__header {
background-image: url("https://homenest.com.vn/wp-content/uploads/2025/03/image-5-e1740151663487.png");
box-shadow: 0px 4px 24px 0px
rgba(44.999999999999986, 181, 177.00000000000003, 0.34901960784313724);
}
.homenest__professional_website_hn-card--golden
.homenest__professional_website_hn-card__header {
background-image: url("https://homenest.com.vn/wp-content/uploads/2025/03/image-1-1-e1740152512465.png");
box-shadow: 0px 4px 24px 0px rgba(185, 162, 80, 0.34901960784313724);
}
.homenest__professional_website_hn-card--diamond
.homenest__professional_website_hn-card__header {
background-image: url("https://homenest.com.vn/wp-content/uploads/2025/03/image-2-1-e1740152586784.png");
box-shadow: 0px 4px 24px 0px
rgba(1.9999999999999996, 11.999999999999963, 106, 0.34901960784313724);
}
.homenest__professional_website_hn-card--platinum
.homenest__professional_website_hn-card__header {
background-image: url("https://homenest.com.vn/wp-content/uploads/2025/03/image-3-1-e1740152632310.png");
box-shadow: 0px 4px 24px 0px
rgba(151, 34.00000000000001, 149.0000000000001, 0.34901960784313724);
}
.homenest__professional_website_hn-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.homenest__professional_website_hn-card__features li {
position: relative;
padding-left: 30px;
margin: 10px;
font-size: 15px;
}
.homenest__professional_website_hn-card__features li::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
}
.homenest__professional_website_hn-card--platinum
.homenest__professional_website_hn-card__features
li::before {
background-image: url("data:image/svg+xml;utf8,");
}
.homenest__professional_website_hn-card--diamond
.homenest__professional_website_hn-card__features
li::before {
background-image: url("data:image/svg+xml;utf8,");
}
.homenest__professional_website_hn-card--golden
.homenest__professional_website_hn-card__features
li::before {
background-image: url("data:image/svg+xml;utf8,");
}
.homenest__professional_website_hn-card--basic
.homenest__professional_website_hn-card__features
li::before {
background-image: url('data:image/svg+xml;utf8,');
}
.homenest__professional_website_hn-card__link {
color: #f90;
text-decoration: none;
font-weight: 500;
}
.homenest__professional_website_hn-card__footer {
margin-top: auto;
border-top: 1px solid #eee;
padding-top: 15px;
display: flex;
gap: 20px;
align-items: center;
}
.homenest__professional_website_hn-card__price {
flex: 1;
font-size: 26px;
font-weight: bold;
color: #001880;
width: fit-content;
height: 32px;
position: relative;
overflow: hidden;
}
.homenest__professional_website_hn-card__price_price-text,
.homenest__professional_website_hn-card__price_hover-text {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s ease-in-out;
width: 100%;
text-align: left;
font-size: 26px;
font-weight: 700;
color: #020c6a;
opacity: 1;
}
.homenest__professional_website_hn-card__price_hover-text {
transform: translateY(100%);
}
/* On hover: animate price up and show hover text from below */
.homenest__professional_website_hn-card__price:hover
.homenest__professional_website_hn-card__price_price-text {
transform: translateY(-50px) rotate(120deg) scale(0.3);
}
.homenest__professional_website_hn-card__price:hover
.homenest__professional_website_hn-card__price_hover-text {
transform: translateY(0%);
}
.homenest__professional_website_hn-card_hidden-features {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
display: block; /* Important for the slide effect */
}
@keyframes moveGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.homenest__professional_website_hn-card__button {
background: linear-gradient(
to right,
#e64b48,
#2463ff,
#ff7a1a,
#5bb9ff,
#ff2831
);
background-size: 500% 200%;
/* Important for smooth animation */
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
animation: moveGradient 5s linear infinite;
cursor: pointer;
width: 30%;
}
.homenest__professional_website_elementor-divider-black {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
height: 0.25px;
margin: 0;
padding: 0.15px 0;
color: #909090;
}
.homenest__professional_website_elementor-divider {
box-sizing: border-box;
display: flex;
align-items: center;
/* căn icon và text theo chiều dọc nếu cần */
width: 100%;
height: 6px;
/* KHÔNG PHÙ HỢP nếu muốn chứa text — nên xóa hoặc tăng lên */
margin: 0;
padding: 2px 0;
list-style: none;
font-family: "Neue Einstellung", sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 24px;
letter-spacing: normal;
word-spacing: 0;
text-align: start;
text-transform: none;
color: rgb(33, 37, 41);
}
.homenest__professional_website_elementor-divider {
box-sizing: border-box;
display: flex;
align-items: center;
/* căn icon và text theo chiều dọc nếu cần */
width: 100%;
height: 6px;
}
.homenest__professional_website_elementor-divider-separator {
box-sizing: border-box;
display: flex;
width: 100%;
height: 2px;
border-top: 2px solid rgb(255, 255, 255);
color: rgb(33, 37, 41);
}
.homenest__professional_website_pricing-section {
padding: 40px 0;
position: relative;
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
}
.homenest__professional_website_hn-pricing-cards-wrapper {
overflow-x: auto;
scroll-behavior: smooth;
padding: 0 20px; /* Leave space for scroll buttons */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.homenest__professional_website_hn-pricing-cards-wrapper::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.homenest__professional_website_scroll-btn {
position: absolute;
top: 50%;
z-index: 1;
font-size: 2rem;
border: none;
background-color: transparent;
cursor: pointer;
}
.homenest__professional_website_scroll-btn.left {
left: 10px;
}
.homenest__professional_website_scroll-btn.right {
right: 10px;
}
@media only screen and (max-width: 1468px) {
.homenest__professional_website_hn-pricing-cards {
display: flex;
gap: 24px;
}
.homenest__professional_website_hn-card {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
}
@media only screen and (max-width: 1309px) {
.homenest__professional_website_hn-pricing-cards {
display: flex;
gap: 24px;
}
.homenest__professional_website_hn-card__price {
font-size: 22px;
}
.homenest__professional_website_hn-pricing-section {
padding: 20px;
}
}
@media only screen and (max-width: 1023px) {
.homenest__professional_website_hn-card__price {
font-size: 20px;
}
.homenest__professional_website_hn-card {
flex: 0 0 50%;
max-width: 50%;
}
}
@media only screen and (max-width: 767px) {
.homenest__professional_website_scroll-btn.left {
left: 0px;
}
.homenest__professional_website_scroll-btn.right {
right: 0px;
}
.homenest__professional_website_hn-card {
flex: 0 0 70%;
max-width: 70%;
}
}
@media only screen and (max-width: 610px) {
.homenest__professional_website_hn-card {
flex: 0 0 90%;
max-width: 90%;
}
}
@media only screen and (max-width: 520px) {
.homenest__professional_website_hn-card {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ========================================= */
/* CSS Bảng giá End */
/* ========================================= */
@keyframes moveUpDownSection2 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
.homenest__website-design__section2--canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* Dưới 576px: Mobile nhỏ */
@media (max-width: 575.98px) {
.homenest__website-design__section2-wrapper {
padding: 0 1.3rem;
}
.homenest__website-design__section2__title span {
font-size: 35px;
font-weight: 600;
}
.homenest__website-design__section2__title p {
font-size: 17px;
}
.homenest__website-design__section2__video {
width: 200px;
}
.homenest__website-design__section2__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 15px;
align-items: start;
max-height: none;
}
/* Grid-4 chiếm full width ở hàng đầu */
.homenest__website-design__section2__grid-4 {
grid-column: 1 / -1;
grid-row: 1;
order: -1;
min-height: 440px;
}
.homenest__website-design__section2__grid-1 {
grid-column: 1;
order: 1;
min-height: 180px;
display: none;
}
.homenest__website-design__section2__grid-3 {
grid-column: 1;
order: 3;
min-height: 220px;
display: none;
}
.homenest__website-design__section2__grid-6 {
grid-column: 1;
order: 5;
min-height: 160px;
display: none;
}
.homenest__website-design__section2__grid-8 {
grid-column: 1;
order: 7;
min-height: 200px;
}
.homenest__website-design__section2__grid-2 {
grid-column: 2;
order: 2;
min-height: 220px;
display: none;
}
.homenest__website-design__section2__grid-5 {
grid-column: 2;
order: 4;
min-height: 160px;
display: none;
}
.homenest__website-design__section2__grid-7 {
grid-column: 2;
order: 6;
min-height: 200px;
display: none;
}
.homenest__website-design__section2__grid-9 {
grid-column: 2;
order: 8;
min-height: 120px;
}
.homenest__website-design__section2__grid-1,
.homenest__website-design__section2__grid-2,
.homenest__website-design__section2__grid-3,
.homenest__website-design__section2__grid-5,
.homenest__website-design__section2__grid-6,
.homenest__website-design__section2__grid-7,
.homenest__website-design__section2__grid-8,
.homenest__website-design__section2__grid-9 {
grid-row: span 1;
grid-column: span 1;
}
.homenest__website-design__section2__grid-8 .section2__grid-8__wrap {
width: 100%;
height: 100%;
padding: 28px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.homenest__website-design__section2__grid-9 .section2__grid-9__wrapper {
padding: 20px 10px;
display: flex;
gap: 0px;
width: 100%;
justify-content: center;
}
.section2__grid-9__wrapper--content {
display: flex;
flex-direction: column;
gap: 10px;
}
}
/* @media (min-width: 1200px) and (max-width: 1690px) {
.section2__grid-9__wrapper--content-text p{
font-size:15px;
}
} */
/* Dưới 576px: Mobile nhỏ */
@media (max-width: 575.98px) {
.homenest__website-design__section2--canvas {
display: none;
}
}
/* 576px – 767.98px: Mobile lớn */
@media (min-width: 576px) and (max-width: 767.98px) {
.homenest__website-design__section2--canvas {
display: none;
}
.homenest__website-design__section2-wrapper {
padding: 0 1.3rem;
}
.homenest__website-design__section2__title span {
font-size: 35px;
font-weight: 600;
}
.homenest__website-design__section2__title p {
font-size: 17px;
}
.homenest__website-design__section2__video {
width: 200px;
}
.homenest__website-design__section2__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 15px;
align-items: start;
max-height: none;
}
/* Grid-4 chiếm full width ở hàng đầu */
.homenest__website-design__section2__grid-4 {
grid-column: 1 / -1;
grid-row: 1;
order: -1;
min-height: 490px;
}
.homenest__website-design__section2__grid-1 {
grid-column: 1;
order: 1;
min-height: 180px;
display: none;
}
.homenest__website-design__section2__grid-3 {
grid-column: 1;
order: 3;
min-height: 220px;
display: none;
}
.homenest__website-design__section2__grid-6 {
grid-column: 1;
order: 5;
min-height: 160px;
display: none;
}
.homenest__website-design__section2__grid-8 {
grid-column: 1;
order: 7;
min-height: 200px;
}
.homenest__website-design__section2__grid-2 {
grid-column: 2;
order: 2;
min-height: 220px;
display: none;
}
.homenest__website-design__section2__grid-5 {
grid-column: 2;
order: 4;
min-height: 160px;
display: none;
}
.homenest__website-design__section2__grid-7 {
grid-column: 2;
order: 6;
min-height: 200px;
display: none;
}
.homenest__website-design__section2__grid-9 {
grid-column: 2;
order: 8;
min-height: 120px;
}
.homenest__website-design__section2__grid-1,
.homenest__website-design__section2__grid-2,
.homenest__website-design__section2__grid-3,
.homenest__website-design__section2__grid-5,
.homenest__website-design__section2__grid-6,
.homenest__website-design__section2__grid-7,
.homenest__website-design__section2__grid-8,
.homenest__website-design__section2__grid-9 {
grid-row: span 1;
grid-column: span 1;
}
.homenest__website-design__section2__grid-8 .section2__grid-8__wrap {
width: 100%;
height: 100%;
padding: 28px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.homenest__website-design__section2__grid-9 .section2__grid-9__wrapper {
padding: 20px 10px;
display: flex;
gap: 0px;
width: 100%;
justify-content: center;
}
.section2__grid-9__wrapper--content {
display: flex;
flex-direction: column;
gap: 10px;
}
}
/* 768px – 991.98px: Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
.homenest__website-design__section2--canvas {
display: none;
}
.homenest__website-design__section2-wrapper {
padding: 0 1.3rem;
}
.homenest__website-design__section2__title span {
font-size: 35px;
font-weight: 600;
}
.homenest__website-design__section2__title p {
font-size: 17px;
}
.homenest__website-design__section2__video {
width: 200px;
}
.homenest__website-design__section2__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 15px;
align-items: start;
max-height: none;
}
/* Grid-4 chiếm full width ở hàng đầu */
.homenest__website-design__section2__grid-4 {
grid-column: 1 / -1;
grid-row: 1;
order: -1;
min-height: 540px;
}
.homenest__website-design__section2__grid-1 {
grid-column: 1;
order: 1;
min-height: 180px;
display: none;
}
.homenest__website-design__section2__grid-3 {
grid-column: 1;
order: 3;
min-height: 220px;
display: none;
}
.homenest__website-design__section2__grid-6 {
grid-column: 1;
order: 5;
min-height: 160px;
display: none;
}
.homenest__website-design__section2__grid-8 {
grid-column: 1;
order: 7;
min-height: 200px;
}
.homenest__website-design__section2__grid-2 {
grid-column: 2;
order: 2;
min-height: 220px;
display: none;
}
.homenest__website-design__section2__grid-5 {
grid-column: 2;
order: 4;
min-height: 160px;
display: none;
}
.homenest__website-design__section2__grid-7 {
grid-column: 2;
order: 6;
min-height: 200px;
display: none;
}
.homenest__website-design__section2__grid-9 {
grid-column: 2;
order: 8;
min-height: 120px;
}
.homenest__website-design__section2__grid-1,
.homenest__website-design__section2__grid-2,
.homenest__website-design__section2__grid-3,
.homenest__website-design__section2__grid-5,
.homenest__website-design__section2__grid-6,
.homenest__website-design__section2__grid-7,
.homenest__website-design__section2__grid-8,
.homenest__website-design__section2__grid-9 {
grid-row: span 1;
grid-column: span 1;
}
.homenest__website-design__section2__grid-8 .section2__grid-8__wrap {
width: 100%;
height: 100%;
padding: 28px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.homenest__website-design__section2__grid-9 .section2__grid-9__wrapper {
padding: 20px 10px;
display: flex;
gap: 0px;
width: 100%;
justify-content: center;
}
.homenest__website-design__section2__grid-9 .section2__grid-9__wrapper--content {
display: flex;
flex-direction: column;
gap: 10px;
}
.homenest__website-design__section2__grid-9 .section2__grid-9__wrapper--content-text p {
font-size: 30px;
font-weight: 700;
color: white;
}
.homenest__website-design__section2__grid-8 .section2__grid-8__wrap--text p {
font-size: 26px;
}
}
/* 992px – 1300px: Tablet */
@media (min-width: 992px) and (max-width: 1700px) {
.homenest__website-design__section2__grid {
max-height: 650px;
}
.section2__grid-9__wrapper--content {
padding-top: 0;
padding-left: 20px;
}
.section2__grid-9__wrapper--content .numb {
font-size:70px;
}
.section2__grid-9__wrapper--content-text p{
font-size: 16px;
}
section2__grid-9__wrapper--content-numb img {
margin-left: -20px;
height: 25px;
width: 25px;
}
.homenest__website-design__section2__grid-8 .section2__grid-8__wrap {
padding: 60px 26px;
}
.section2__grid-8__wrap .section2__grid-8__wrap--text p {
font-size: 16px;
text-align: center;
font-weight: 600;
}
.website-design__section2__grid-7__wrap--content-text p {
font-size: 16px;
}
.section2__grid-6__wrap .section2__grid-6__wrap--text p {
font-size: 16px;
}
.website-design__section2__grid-5__wrap--content-img {
width: 100%;
}
.website-design__section2__grid-5__wrap--content {
padding: 30px 15px;
}
.website-design__section2__grid-5__wrap--content-text {
margin-top:10px;
}
.website-design__section2__grid-5__wrap--content-text p {
font-size: 16px;
}
.homenest__website-design__section2__grid-3 .wrap-card3 .numb {
font-size: 50px;
}
.rotating-plus {
width: 40px;
height: 40px;
}
.homenest__website-design__section2__grid-3 .wrap-card3 .title-card-3 {
margin-top: 10px;
}
.homenest__website-design__section2__grid-3 .wrap-card3 .title-card-3 p{
font-size: 16px;
}
.homenest__website-design__section2--title-card {
margin-top: 10px;
font-size: 16px;
text-align: center;
}
.homenest__website-design__section2__grid-2__img {
margin-top: 10px;
}
}
/* Section 3 */
.homenest__website-design__section3 {
margin-top: 100px;
width: 100%;
position: relative;
}
.homenest__website-design__section3-wrapper {
width: 100%;
height: auto;
padding: 0 150px;
}
.homenest__website-design__section3--text-run__header {
text-align: center;
}
.homenest__website-design__section3--text-run__header .text-run {
display: flex;
position: relative;
max-width: 150px;
margin: 0 auto;
}
.homenest__website-design__section3--text-run__header .text-run .wrap-clock {
position: absolute;
}
.homenest__website-design__section3--text-run__header .text-run .wrap-clock img {
animation: rotate-clock 4s linear infinite;
transform-origin: center center;
/* điểm xoay */
display: block;
}
/* Đảm bảo wrap-clock căn giữa ảnh kim */
.homenest__website-design__section3--text-run__header .text-run .wrap-clock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* căn giữa */
width: 100%;
/* có thể điều chỉnh */
height: 100%;
}
@keyframes rotate-clock {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.homenest__website-design__section3__title {
text-align: center;
}
.homenest__website-design__section3__title span {
display: inline-block;
margin-top: 3rem;
font-weight: 600;
line-height: 1;
font-size: 63px;
position: relative;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, #050507 0%, #17446c 30%, #56aae6 55%, #0a69ad 70%, #04080d 84%, #0d0d12 100%);
animation: text-bg-animate 5s ease infinite;
}
.homenest__website-design__section3__title p {
font-weight: 600;
margin-top: 20px;
font-size: 20px;
}
.homenest__website-design__section3--content {
margin-top: 30px;
padding: 0 20%;
position: relative;
}
.homenest__website-design__section3--content img:not(:first-child) {
position: absolute;
}
.homenest__website-design__section3--content img:nth-child(2) {
bottom: -16.5%;
left: 10.5%;
box-shadow: 0 3px 26px rgba(0, 0, 0, 0.05);
max-width: 230px;
width: 24%;
border-radius: 18px;
}
.homenest__website-design__section3--content img:nth-child(4) {
top: -10.2%;
left: 17.2%;
box-shadow: 0 3px 26px rgba(0, 0, 0, 0.05);
max-width: 90px;
width: 10%;
border-radius: 18px;
}
.homenest__website-design__section3--content img:nth-child(5) {
top: -9.9%;
right: 15%;
z-index: 0;
max-width: 130px;
width: 14%;
}
.homenest__website-design__section3--content img:nth-child(3) {
right: 10%;
bottom: 10%;
max-width: 250px;
box-shadow: 0 3px 26px rgba(0, 0, 0, 0.05);
}
.homenest__website-design__section3--content img:nth-child(6) {
bottom: 26%;
left: 21.5%;
max-width: 96px;
width: 10%;
z-index: 3;
}
.homenest__website-design__section3--footer {
margin-top: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.homenest__website-design__section3--footer-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #c01be9 0%, #9b1be9 100%);
color: white;
text-decoration: none;
padding: 20px 30px;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}
.homenest__website-design__section3--footer-btn:hover {
transform: translateY(-5px);
}
.homenest__website-design__section3--footer-btn::before {
content: "";
width: 18px;
height: 18px;
background-image: url(' /wp-content/uploads/2025/05/logo_fixed_inverse.webp');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
margin-right: 8px;
}
/* RESPONSIVE BREAKPOINTS */
/* Tablet - 768px – 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
.homenest__website-design__section3 {
margin-top: 60px;
}
.homenest__website-design__section3-wrapper {
padding: 0 50px;
}
.homenest__website-design__section3--text-run__header .text-run {
max-width: 120px;
}
.homenest__website-design__section3__title span {
font-size: 45px;
margin-top: 2rem;
}
.homenest__website-design__section3__title p {
font-size: 16px;
margin-top: 15px;
}
.homenest__website-design__section3--content {
padding: 0 10%;
margin-top: 25px;
}
/* Điều chỉnh vị trí các ảnh floating */
.homenest__website-design__section3--content img:nth-child(2) {
max-width: 180px;
width: 22%;
}
.homenest__website-design__section3--content img:nth-child(3) {
max-width: 200px;
}
.homenest__website-design__section3--content img:nth-child(4) {
max-width: 70px;
width: 8%;
}
.homenest__website-design__section3--content img:nth-child(5) {
max-width: 100px;
width: 12%;
}
.homenest__website-design__section3--content img:nth-child(6) {
max-width: 76px;
width: 8%;
}
.homenest__website-design__section3--footer {
margin-top: 50px;
}
.homenest__website-design__section3--footer-btn {
padding: 18px 25px;
font-size: 15px;
}
}
/* Mobile lớn - 576px – 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
.homenest__website-design__section3 {
margin-top: 50px;
}
.homenest__website-design__section3-wrapper {
padding: 0 30px;
}
.homenest__website-design__section3--text-run__header .text-run {
max-width: 100px;
}
.homenest__website-design__section3__title span {
font-size: 36px;
margin-top: 1.5rem;
}
.homenest__website-design__section3__title p {
font-size: 16px;
margin-top: 12px;
}
.homenest__website-design__section3--content {
padding: 0 5%;
margin-top: 20px;
}
/* Ẩn một số ảnh floating để tránh lộn xộn */
.homenest__website-design__section3--content img:nth-child(4),
.homenest__website-design__section3--content img:nth-child(6) {
display: none;
}
.homenest__website-design__section3--content img:nth-child(2) {
max-width: 150px;
width: 28%;
bottom: -12%;
left: 8%;
}
.homenest__website-design__section3--content img:nth-child(3) {
max-width: 160px;
right: 8%;
bottom: 8%;
}
.homenest__website-design__section3--content img:nth-child(5) {
max-width: 80px;
width: 15%;
top: -8%;
right: 12%;
}
.homenest__website-design__section3--footer {
margin-top: 40px;
}
.homenest__website-design__section3--footer-btn {
padding: 16px 22px;
font-size: 14px;
}
.homenest__website-design__section3--footer-btn::before {
width: 16px;
height: 16px;
margin-right: 6px;
}
}
/* Mobile nhỏ - Dưới 576px */
@media (max-width: 575.98px) {
.homenest__website-design__section3 {
margin-top: 40px;
}
.homenest__website-design__section3-wrapper {
padding: 0 20px;
}
.homenest__website-design__section3--text-run__header .text-run {
max-width: 80px;
}
.homenest__website-design__section3__title span {
font-size: 30px;
margin-top: 1rem;
line-height: 1.1;
}
.homenest__website-design__section3__title p {
font-size: 14px;
margin-top: 10px;
line-height: 1.4;
}
.homenest__website-design__section3--content {
padding: 0;
margin-top: 30px;
}
/* Chỉ hiển thị ảnh chính và 2 ảnh floating */
.homenest__website-design__section3--content img:nth-child(4),
.homenest__website-design__section3--content img:nth-child(6) {
display: none;
}
.homenest__website-design__section3--content img:nth-child(2) {
max-width: 120px;
width: 35%;
bottom: -8%;
left: -2%;
border-radius: 12px;
}
.homenest__website-design__section3--content img:nth-child(5) {
top: -9.9%;
right: -3%;
z-index: 0;
max-width: 130px;
width: 14%;
}
.homenest__website-design__section3--content img:nth-child(3) {
max-width: 130px;
right: -2%;
bottom: -5%;
border-radius: 12px;
}
.homenest__website-design__section3--footer {
margin-top: 60px;
}
.homenest__website-design__section3--footer-btn {
padding: 14px 20px;
font-size: 13px;
border-radius: 40px;
}
.homenest__website-design__section3--footer-btn::before {
width: 14px;
height: 14px;
margin-right: 5px;
}
}
/*section 4*/
.homenest__website-design__section4 {
margin-top: 100px;
width: 100%;
position: relative;
}
.homenest__website-design__section4-wrapper {
width: 100%;
height: auto;
padding: 0 400px;
}
.homenest__website-design__section4__title {
text-align: center;
}
.homenest__website-design__section4__title span {
display: inline-block;
margin-top: 1rem;
font-weight: 600;
line-height: 1;
font-size: 63px;
position: relative;
background: url(' /wp-content/uploads/2025/05/text-bg-1.webp') no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
/* Safari support */
}
.homenest__website-design__section4__title p {
font-weight: 400;
margin-top: 20px;
font-size: 20px;
margin-bottom: 30px;
}
.homenest__website-design__section4--video-content {
width: 100%;
position: relative;
box-shadow: 0 4px 44px rgba(0, 0, 0, 0.06);
border-radius: 10px;
}
.homenest__website-design__section4--video-content img {
width: 100%;
display: block;
}
.homenest__website-design__section4--video-content a {
position: absolute;
top: 50%;
left: 50%;
width: 74px;
height: 74px;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
background-color: #110752;
color: #ffffff;
border: 1px solid #110752;
border-radius: 50%;
transition: 0.3s all ease;
}
.homenest__website-design__section4--video-content a::before {
content: "";
width: 20px;
height: 20px;
background-image: url(' /wp-content/uploads/2025/05/play-button-arrowhead.webp');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
.homenest__website-design__section4--video-content img:nth-child(2) {
position: absolute;
top: -35%;
right: -20%;
z-index: -1;
max-width: 550px;
}
.homenest__website-design__section4--video-content img:nth-child(3) {
position: absolute;
bottom: -35%;
left: -20%;
z-index: -1;
max-width: 550px;
}
.homenest__website-design__section4-wrapper .section4-text {
margin-top: 2.55em;
font-family: "Caveat", cursive;
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
color: #000000;
font-style: italic;
text-align: center;
}
.homenest__website-design__section4--video-content-video a:hover {
background: rgba(0, 0, 0, 0.5);
}
.play-button {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.play-button:hover {
transform: scale(1.1);
background: rgba(255, 255, 255, 1);
}
.play-button::after {
content: '';
width: 0;
height: 0;
border-left: 20px solid #333;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 5px;
}
/* Popup Overlay */
.homenest__website-design__section4__popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.homenest__website-design__section4__popup-overlay.active {
display: flex;
opacity: 1;
}
/* Popup Content */
.popup-content {
position: relative;
width: 90%;
max-width: 900px;
background: #000;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
transform: scale(0.8);
transition: transform 0.3s ease;
}
.homenest__website-design__section4__popup-overlay.active .popup-content {
transform: scale(1);
}
/* Close Button */
.homenest__website-design__section4__close-popup {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
border: 2px solid rgba(255, 255, 255, 0.2);
width: 45px;
height: 45px;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(15px);
z-index: 1001;
}
.homenest__website-design__section4__close-popup:hover {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}
.homenest__website-design__section4__close-popup:hover::before,
.homenest__website-design__section4__close-popup:hover::after {
background: #333;
}
.homenest__website-design__section4__close-popup::before,
.homenest__website-design__section4__close-popup::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background: white;
border-radius: 1px;
transition: background 0.3s ease;
}
.homenest__website-design__section4__close-popup::before {
transform: rotate(45deg);
}
.homenest__website-design__section4__close-popup::after {
transform: rotate(-45deg);
}
/* Video Frame */
.homenest__website-design__section4__popup-overlay .popup-content .video-frame {
width: 100%;
height: 500px;
border: none;
}
/* RESPONSIVE BREAKPOINTS */
@media (min-width: 1199.98px) and (max-width: 1400px) {
.homenest__website-design__section1--letter {
font-size: 250px;
}
.homenest__website-design__section2-wrapper,
.homenest__website-design__section7-wrapper {
padding: 0px 100px !important;
}
}
/* Tablet - 768px – 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
.homenest__website-design__section4 {
margin-top: 60px;
}
.homenest__website-design__section4-wrapper {
padding: 0 100px;
}
.homenest__website-design__section4__title span {
font-size: 45px;
margin-top: 0.8rem;
}
.homenest__website-design__section4__title p {
font-size: 16px;
margin-top: 15px;
margin-bottom: 25px;
}
.homenest__website-design__section4--video-content a {
width: 60px;
height: 60px;
}
.homenest__website-design__section4--video-content a::before {
width: 16px;
height: 16px;
}
.homenest__website-design__section4--video-content img:nth-child(2) {
top: -25%;
right: -15%;
max-width: 350px;
}
.homenest__website-design__section4--video-content img:nth-child(3) {
bottom: -25%;
left: -15%;
max-width: 350px;
}
.homenest__website-design__section4-wrapper .section4-text {
margin-top: 2rem;
font-size: 13px;
}
/* Popup adjustments */
.popup-content {
width: 95%;
max-width: 700px;
}
.homenest__website-design__section4__popup-overlay .popup-content .video-frame {
height: 400px;
}
}
/* Mobile lớn - 576px – 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
.homenest__website-design__section4 {
margin-top: 50px;
}
.homenest__website-design__section4-wrapper {
padding: 0 50px;
}
.homenest__website-design__section4__title span {
font-size: 36px;
margin-top: 0.5rem;
}
.homenest__website-design__section4__title p {
font-size: 16px;
margin-top: 12px;
margin-bottom: 20px;
}
.homenest__website-design__section4--video-content a {
width: 55px;
height: 55px;
}
.homenest__website-design__section4--video-content a::before {
width: 14px;
height: 14px;
}
/* Ẩn các ảnh decoration để tránh lộn xộn */
.homenest__website-design__section4--video-content img:nth-child(2),
.homenest__website-design__section4--video-content img:nth-child(3) {
display: none;
}
.homenest__website-design__section4-wrapper .section4-text {
margin-top: 1.8rem;
font-size: 13px;
}
/* Popup adjustments */
.popup-content {
width: 95%;
max-width: 500px;
border-radius: 10px;
}
.homenest__website-design__section4__popup-overlay .popup-content .video-frame {
height: 280px;
}
.homenest__website-design__section4__close-popup {
width: 40px;
height: 40px;
top: 10px;
right: 10px;
font-size: 16px;
}
.homenest__website-design__section4__close-popup::before,
.homenest__website-design__section4__close-popup::after {
width: 16px;
}
}
/* Mobile nhỏ - Dưới 576px */
@media (max-width: 575.98px) {
.homenest__website-design__section4 {
margin-top: 40px;
}
.homenest__website-design__section4-wrapper {
padding: 0 20px;
}
.homenest__website-design__section4__title span {
font-size: 30px;
margin-top: 0.5rem;
line-height: 1.1;
}
.homenest__website-design__section4__title p {
font-size: 14px;
margin-top: 5px;
margin-bottom: 30px;
line-height: 1.4;
font-weight: 600;
}
.homenest__website-design__section4--video-content {
border-radius: 8px;
}
.homenest__website-design__section4--video-content a {
width: 50px;
height: 50px;
}
.homenest__website-design__section4--video-content a::before {
width: 12px;
height: 12px;
}
/* Ẩn các ảnh decoration */
.homenest__website-design__section4--video-content img:nth-child(2),
.homenest__website-design__section4--video-content img:nth-child(3) {
display: none;
}
.homenest__website-design__section4-wrapper .section4-text {
margin-top: 1.5rem;
font-size: 12px;
line-height: 1.3;
}
/* Popup adjustments for mobile */
.homenest__website-design__section4__popup-overlay {
padding: 10px;
}
.popup-content {
width: 100%;
max-width: none;
border-radius: 8px;
}
.homenest__website-design__section4__popup-overlay .popup-content .video-frame {
height: 220px;
}
.homenest__website-design__section4__close-popup {
width: 35px;
height: 35px;
top: 8px;
right: 8px;
font-size: 14px;
}
.homenest__website-design__section4__close-popup::before,
.homenest__website-design__section4__close-popup::after {
width: 14px;
height: 1.5px;
}
}
/* Landscape orientation cho mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
.homenest__website-design__section4__popup-overlay .popup-content .video-frame {
height: 60vh;
}
.popup-content {
max-height: 90vh;
}
}
/* High-resolution screens */
@media (min-width: 1400px) {
.homenest__website-design__section5-wrapper {
padding: 0 150px;
}
.homenest__website-design__section5--title span,
.homenest__website-design__section5--title-num span {
font-size: 150px;
}
.homenest__website-design__section5--title-img {
max-width: 120px;
}
.homenest__website-design__section5--title-text h2 {
font-size: 70px;
}
.homenest__website-design__section4__title span {
font-size: 70px;
}
.homenest__website-design__section4__title p {
font-size: 22px;
}
.homenest__website-design__section4--video-content img:nth-child(2),
.homenest__website-design__section4--video-content img:nth-child(3) {
max-width: 600px;
}
}
/*section 5*/
.homenest__website-design__section5 {
margin-top: 100px;
padding-top: 100px;
width: 100%;
position: relative;
background-color: #eef5f7;
}
.homenest__website-design__section5-wrapper {
width: 100%;
height: auto;
padding: 0 100px;
}
.homenest__website-design__section5--title {
width: 100%;
display: flex;
justify-content: center;
}
.homenest__website-design__section5--title span {
font-size: 130px;
background: url(' /wp-content/uploads/2025/05/textss-bg.webp') no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.homenest__website-design__section5--title-num span {
font-size: 130px;
}
.homenest__website-design__section5--title-num-count {
display: flex;
overflow: hidden;
height: 1.5em;
font-size: 2rem;
font-weight: bold;
}
.homenest__website-design__section5--title-num-count .digit {
display: flex;
flex-direction: column;
transition: transform 1.5s ease-in-out;
}
.homenest__website-design__section5--title-img {
max-width: 100px;
}
.homenest__website-design__section5--title-img img {
width: 100%;
}
.homenest__website-design__section5--title-text h2 {
font-size: 60px;
text-align: center;
font-weight: 600;
line-height: 1;
}
/* RESPONSIVE BREAKPOINTS */
/* Desktop lớn - 1200px trở lên */
@media (min-width: 1200px) {
.homenest__website-design__section5-wrapper {
padding: 0 100px;
}
}
/* Desktop nhỏ - 992px – 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
.homenest__website-design__section5 {
margin-top: 80px;
padding-top: 80px;
}
.homenest__website-design__section8-wrapper {
padding: 0 200px !important;
}
.homenest__website-design__section15-wrapper {
padding: 130px 100px !important;
}
.homenest__website-design__section5-wrapper {
padding: 0 80px;
}
.homenest__website-design__section5--title span,
.homenest__website-design__section5--title-num span {
font-size: 110px;
}
.homenest__website-design__section5--title-img {
max-width: 90px;
}
.homenest__website-design__section5--title-text {
padding: 0 250px;
margin-top: 25px;
}
.homenest__website-design__section5--title-text h2 {
font-size: 35px;
}
}
/* Tablet - 768px – 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
.homenest__website-design__section5 {
margin-top: 60px;
padding-top: 60px;
}
.homenest__website-design__section5-wrapper {
padding: 0 50px;
}
.homenest__website-design__section5--title {
gap: 15px;
}
.homenest__website-design__section5--title span,
.homenest__website-design__section5--title-num span {
font-size: 90px;
}
.homenest__website-design__section5--title-num-count {
font-size: 1.8rem;
}
.homenest__website-design__section5--title-img {
max-width: 75px;
}
.homenest__website-design__section5--title-text {
padding: 0 150px;
margin-top: 20px;
}
.homenest__website-design__section5--title-text h2 {
font-size: 42px;
line-height: 1.1;
}
}
/* Mobile lớn - 576px – 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
.homenest__website-design__section5 {
margin-top: 50px;
padding-top: 50px;
}
.homenest__website-design__section5-wrapper {
padding: 0 30px;
}
.homenest__website-design__section5--title {
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.homenest__website-design__section5--title span,
.homenest__website-design__section5--title-num span {
font-size: 70px;
}
.homenest__website-design__section5--title-num-count {
font-size: 1.5rem;
}
.homenest__website-design__section5--title-img {
max-width: 60px;
order: 2;
}
.homenest__website-design__section5--title-num {
order: 1;
}
.homenest__website-design__section5--title-text {
padding: 0 50px;
margin-top: 18px;
}
.homenest__website-design__section5--title-text h2 {
font-size: 32px;
line-height: 1.2;
}
}
/* Mobile nhỏ - Dưới 576px */
@media (max-width: 575.98px) {
.homenest__website-design__section5 {
margin-top: 40px;
padding-top: 40px;
}
.homenest__website-design__section5-wrapper {
padding: 0 20px;
}
.homenest__website-design__section5--title {
gap: 0px;
align-items: center;
}
.homenest__website-design__section5--title span,
.homenest__website-design__section5--title-num span {
font-size: 80px;
font-weight: 700;
}
.homenest__website-design__section5--title-num-count {
font-size: 1.3rem;
justify-content: center;
}
.homenest__website-design__section5--title-img {
max-width: 50px;
margin-bottom: 60px;
}
.homenest__website-design__section5--title-text {
padding: 0 10px;
}
.homenest__website-design__section5--title-text h2 {
font-size: 26px;
line-height: 1.2;
}
}
/* Extra small screens */
@media (max-width: 375px) {
.homenest__website-design__section5--title span,
.homenest__website-design__section5--title-num span {
font-size: 50px;
}
.homenest__website-design__section5--title-num-count {
font-size: 1.1rem;
}
.homenest__website-design__section5--title-img {
max-width: 45px;
}
.homenest__website-design__section5--title-text h2 {
font-size: 22px;
}
}
/* Landscape orientation adjustments */
@media (max-width: 767.98px) and (orientation: landscape) {
.homenest__website-design__section5 {
padding-top: 30px;
}
.homenest__website-design__section5--title span,
.homenest__website-design__section5--title-num span {
font-size: 50px;
}
.homenest__website-design__section5--title-text h2 {
font-size: 24px;
}
}
.homenest__archive-project__show-project .project-archive {
width: 1450px;
margin: 0 auto;
}
/* Projects Grid */
.homenest__archive-project__show-project {
background: #eef5f7;
padding: 100px 0;
}
.homenest__archive-project__show-project .project-archive {
width: 1450px;
margin: 0 auto;
}
/* Lưới hiển thị dự án */
.homenest__archive-project__project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.homenest__archive-project__project-grid .project-item {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
height: 280px;
transition: transform 0.3s ease-in-out;
}
.homenest__archive-project__project-grid .project-item:hover {
transform: scale(1.02);
}
.homenest__archive-project__project-grid .project-item:has(.project-info) {
display: grid;
grid-template-columns: 1fr 120px;
}
.homenest__archive-project__project-grid .featured-image {
overflow: hidden;
height: 100%;
}
.homenest__archive-project__project-grid .featured-image a {
display: block;
height: 100%;
}
.homenest__archive-project__project-grid .featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(100%);
}
.homenest__archive-project__project-grid .project-info {
display: grid;
grid-template-rows: repeat(4, 1fr);
}
.homenest__archive-project__project-grid .project-info>* {
display: inline-flex;
flex-direction: column;
align-items: center;
}
.homenest__archive-project__project-grid .project-info .logo {
width: 100%;
padding: 0;
}
.homenest__archive-project__project-grid .project-info>*:not(.logo) p {
font-size: 18px;
line-height: 140%;
}
.homenest__archive-project__project-grid .project-info>*:not(.logo) p:first-of-type {
background: var(--gradientt);
background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
gap: 3px;
}
.homenest__archive-project__project-grid .project-info>*:not(.logo) p:first-of-type i.fa-solid.fa-sort-up {
display: inline-flex;
align-items: flex-end;
}
.homenest__archive-project__project-grid .project-info>*:not(.logo) p:first-of-type i.fa-solid.fa-sort-up::before {
height: 16px;
display: inline-block;
}
.homenest__archive-project__project-grid .project-info>*:not(.logo) p:last-child {
font-size: 75%;
}
.homenest__archive-project__project-grid .hn__pagination {
grid-column: 1/4;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.homenest__archive-project__project-grid .hn__pagination>* {
--size-btn: 44px;
background-color: #fff;
border-radius: 5px;
color: #000;
font-size: 17px;
position: relative;
z-index: 0;
overflow: hidden;
transition: color .5s ease;
}
.homenest__archive-project__project-grid .hn__pagination>*::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradientt);
z-index: -1;
opacity: 0;
transition: opacity .5s ease;
}
.homenest__archive-project__project-grid .hn__pagination>*:hover::before,
.homenest__archive-project__project-grid .hn__pagination>span::before {
opacity: 1 !important;
}
.homenest__archive-project__project-grid .hn__pagination>*:hover,
.homenest__archive-project__project-grid .hn__pagination>span {
color: #fff !important;
}
.homenest__archive-project__project-grid .hn__pagination>*:not(.prev, .next) {
width: var(--size-btn);
line-height: var(--size-btn);
text-align: center;
}
.homenest__archive-project__project-grid .hn__pagination> :where(.prev, .next) {
padding: 0 20px;
line-height: var(--size-btn);
}
body:where(.tax-chuyen-nganh, .tax-danh-muc-du-an) ul.hn__taxonomy_neuros-project-category {
display: none;
}
/* Danh mục dự án */
ul.hn__taxonomy_neuros-project-category {
display: flex;
gap: 16px;
margin-top: 32px;
overflow-x: scroll;
scrollbar-width: none;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item {
padding: 0;
list-style: none;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item a {
padding: 8px 16px;
border-radius: 10px;
font-size: 18px;
display: inline-block;
position: relative;
z-index: 0;
overflow: hidden;
color: #333;
transition: color .5s ease;
min-width: fit-content;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item a:hover {
color: #fff;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--gradientt);
opacity: 0;
transition: opacity .5s ease;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item a:hover::before {
opacity: 1;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item a.active {
background-image: url(' /wp-content/uploads/2025/05/textss-bg.webp');
color: white;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item::before {
content: unset;
}
/* Tìm kiếm và dropdown */
.hn__search-and-dropdown {
background-color: #fff;
border-radius: 20px;
height: 64px;
}
.hn__search-and-dropdown select.hn__dropdown {
width: 22%;
height: 100%;
padding: 0 20px;
border: 0;
font-size: 18px;
border-right: 2px solid #f0f2f4 !important;
border-radius: 20px 0 0 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url('/wp-content/uploads/2025/05/Vector.svg') right 20px center / 14px no-repeat;
}
.hn__search-and-dropdown select.hn__dropdown:focus-visible {
border: 0;
outline: 0;
}
.hn__search-and-dropdown .hn__search-project-input {
height: 100% !important;
padding: 0 24px !important;
border: 0 !important;
width: 55%;
}
.hn__search-and-dropdown .hn__search-project-input[placeholder] {
font-size: 18px;
}
.hn__search-project-submit-button {
color: #fff;
border-radius: 20px !important;
width: 23% !important;
padding: 4px !important;
overflow: hidden;
border: 0;
background-color: #fff;
}
.hn__search-project-submit-button>span {
display: block;
background: var(--gradientt);
height: 100%;
line-height: 58px !important;
border-radius: 17px;
font-size: 18px;
}
.hn__search-project-submit-button>span i {
display: none;
}
:root {
--gradientt: linear-gradient(to right, #020C6A 0%, #1A85F8 56.7%, #66E5FB 100%);
}
.text-gradient {
background: var(--gradientt);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
a {
text-decoration: none;
}
#prisma__project {
margin: 0;
padding: 24px 0 100px;
min-height: auto;
}
.homenest__archive-project__header {
min-height: 100%;
--background-transition: 0.3s;
padding-bottom: 105px;
padding-top: 72px;
margin: 0 auto;
}
p {
line-height: 150%;
font-size: 18px;
}
.font-zise-title h2 {
line-height: 1.2em;
}
.font-zise-title {
font-size: 59px;
font-weight: 600;
letter-spacing: -3px;
}
.color-title {
background-color: transparent;
background-image: var(--gradientt);
-webkit-background-clip: text;
text-decoration: none;
color: transparent;
}
.header__title {
width: 100%;
min-height: 100%;
}
.animation__container {
width: 30%;
min-height: 100%;
}
.project__header__title {
display: flex;
max-width: 1450px;
margin: 0 auto;
column-gap: 72px;
}
.homenest__archive-project__header .homenest__archive-project__header__title h2 {
line-height: 1.2em;
/* letter-spacing: -0.05em; */
}
.homenest__archive-project__header__title p {
line-height: inherit;
font-size: 18px;
font-weight: 400;
--widgets-spacing: 20px 20px;
line-height: 1.5em;
}
.header_title {
width: 50%;
min-height: 100%;
}
.statistic-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 72px 72px;
margin-top: 32px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
--background-transition: 0.3s;
}
/* .statistic-counter-number{
font-size: 60px;
font-weight: 400;
letter-spacing: 0;
} */
.widget-container {
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: column;
}
.counter-title {
font-size: 18px;
font-weight: 500;
}
.counter-number {
font-size: 70px;
font-weight: 300;
line-height: 1em;
margin-bottom: 12px;
background-image: var(--gradientt);
-webkit-background-clip: text !important;
-webkit-text-stroke: 2px transparent;
color: #fff !important;
display: flex;
gap: 5px;
}
.counter-number>span {
font-family: Anton !important;
}
.button-container>a {
background: var(--gradientt);
border-radius: 100px;
display: inline-flex;
align-items: center;
}
.button-container>a>span:not(.arrow) {
color: #fff;
padding: 14px 16px 14px 32px;
display: inline-block;
}
.button-container span.arrow {
--size: 42px;
position: relative;
right: 3px;
display: inline-block;
width: var(--size);
height: var(--size);
border-radius: 50%;
background-color: #fff;
overflow: hidden;
color: #000;
font-size: 18px;
box-shadow: 1px 1px 4px #a4a4a4 inset;
}
.button-container span.arrow>i {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(0%);
transition: transform 0s ease;
}
.button-container span.arrow>i:first-child {
transform: translateX(-100%);
}
.button-container a:hover span.arrow>i {
transform: translateX(100%);
transition: transform .5s ease;
}
.button-container a:hover span.arrow>i:first-child {
transform: translateX(0%);
}
/* Filter Bar */
.filter-bar {
border-radius: 8px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 30px;
}
.filter-bar div {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
#industrySelect {
width: 16%;
padding-right: 25px;
/* Khoảng cách để chứa biểu tượng và padding 5px */
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center;
/* Icon SVG tùy chỉnh với padding-right 5px */
background-size: 12px;
/* Kích thước biểu tượng */
appearance: none;
/* Xóa biểu tượng mặc định của trình duyệt */
-webkit-appearance: none;
-moz-appearance: none;
background-color: white;
}
input[type="text"] {
width: 62%;
}
#industrySelect,
input[type="text"] {
padding: 12px 20px;
font-size: 18px;
border-radius: 10px;
outline: none;
transition: border-color 0.3s ease;
border: none;
outline: none;
height: 56px;
padding-left: 25px
}
#industrySelect:focus,
input[type="text"]:focus {
border-color: #007bff;
}
#searchBtn {
padding: 12px 30px;
font-size: 1.1rem;
background-image: var(--gradientt);
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 20%;
}
.nav-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tab {
padding: 10px 20px;
font-size: 1rem;
background-color: #e9ecef;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.tab.active,
.tab:hover {
/* background-color: #007bff; */
color: #fff;
}
.nav-tabs>button {
font-size: 18px;
}
/* Navigation Tabs */
.nav-tabs {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.tab {
padding: 8px 15px;
border: none;
border-radius: 20px;
background-color: #eee;
cursor: pointer;
font-size: 14px;
}
.tab.active {
background-image: var(--gradientt);
color: white;
}
@media only screen and (max-width: 1600px) {
.homenest__archive-project__show-project {
padding: 100px 32px;
}
.homenest__archive-project__show-project .project-archive {
max-width: 1450px;
width: unset;
margin: 0 auto;
box-sizing: content-box;
}
.homenest__archive-project__header {
padding: 72px 32px 100px;
}
.homenest__archive-project__header .animation__container>lottie-player {
width: 100% !important;
height: fit-content !important;
}
.homenest__archive-project__header .header__title {
width: calc(100% - 450px);
}
.homenest__archive-project__header .animation__container {
width: 450px;
}
.homenest__archive-project__header .header__title>p {
margin-top: 30px;
}
.homenest__archive-project__project-grid .hn__pagination {
margin-top: 28px;
}
.homenest__archive-project__hero-section .custom-hero-quote {
font-size: 60px;
padding-right: 60px;
}
.homenest__archive-project__hero-section .custom-signature-block {
padding-right: 120px;
}
}
@media only screen and (max-width: 1351px) {
.homenest__archive-project__header {
width: 100%;
padding: 20px 32px 100px;
}
.homenest__archive-project__header .project__header__title {
column-gap: 48px;
}
.homenest__archive-project__header .header__title {
width: calc(100% - 450px);
}
.homenest__archive-project__header .font-zise-title {
font-size: 48px;
}
.homenest__archive-project__header .counter-number {
font-size: 56px;
}
.homenest__archive-project__header .counter-title {
font-size: 16px;
}
.homenest__archive-project__header .animation__container {
width: 450px;
}
.homenest__archive-project__show-project {
padding: 100px 30px;
}
.homenest__archive-project__show-project .project-archive {
width: 100%;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item a {
font-size: 17px;
}
.homenest__archive-project__hero-section .custom-hero-quote {
font-size: 52px;
padding-right: 32px;
}
}
@media only screen and (max-width: 1025px) {
.homenest__archive-project__header .animation__container {
width: 400px;
}
.homenest__archive-project__header .header__title {
width: calc(100% - 400px);
}
.homenest__archive-project__header .font-zise-title {
font-size: 40px;
}
.homenest__archive-project__header .header__title>p {
font-size: 16px;
}
.homenest__archive-project__header .counter-number {
font-size: 48px;
}
.homenest__archive-project__project-grid {
grid-template-columns: repeat(2, calc(50% - 24px / 2));
}
.homenest__archive-project__hero-section .custom-hero-quote {
font-size: 40px;
}
.homenest__archive-project__hero-section .custom-signature-block {
padding-right: 50px;
}
.homenest__archive-project__project-grid .hn__pagination {
grid-column: 1/3;
}
}
@media only screen and (max-width: 834px) {
.homenest__archive-project__header {
width: 100%;
padding: 40px 16px 0;
}
.homenest__archive-project__header .font-zise-title {
font-size: 36px;
letter-spacing: -1px;
}
.homenest__archive-project__header .counter-number {
font-size: 40px;
}
.homenest__archive-project__header .animation__container {
display: none;
}
.homenest__archive-project__header .counter-title {
font-size: 14px;
}
.homenest__archive-project__header .header__title {
padding-bottom: 72px;
width: 100%;
}
.homenest__archive-project__header .header__title>p {
font-size: 16px;
line-height: 150%;
margin-top: 32px;
}
.homenest__archive-project__header .project__header__title {
flex-direction: column;
}
.homenest__archive-project__header .statistic-section {
grid-template-columns: repeat(3, 1fr);
gap: 32px 16px;
}
.homenest__archive-project__show-project {
padding: 72px 0;
}
.hn__search-and-dropdown {
border-radius: 8px;
height: 54px;
}
.hn__search-and-dropdown select.hn__dropdown {
width: calc(50% - (50px / 2));
padding: 0px 10px;
font-size: 15px;
-moz-appearance: none;
background: url('/wp-content/uploads/2025/05/Vector.svg') right 10px center / 10px no-repeat;
}
.hn__search-and-dropdown .hn__search-project-input {
padding: 0 8px !important;
width: calc(50% - 50px / 2);
}
.hn__search-and-dropdown .hn__search-project-input[placeholder] {
font-size: 15px;
}
.hn__search-project-submit-button {
border-radius: 4px !important;
width: 60px !important;
}
.hn__search-project-submit-button>span {
display: flex;
border-radius: 4px;
font-size: 20px;
justify-content: center;
align-items: center;
}
.hn__search-project-submit-button>span i {
display: inline;
}
.hn__search-project-submit-button>span>span {
display: none;
}
.homenest__archive-project__show-project .project-archive {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
.homenest__archive-project__show-project {
overflow: hidden;
}
.homenest__archive-project__project-grid {
grid-template-columns: repeat(2, 1fr);
margin-top: 32px;
gap: 20px;
}
.homenest__archive-project__project-grid .hn__pagination>* {
--size-btn: 36px;
}
.homenest__archive-project__project-grid .project-item:has(.project-info) {
grid-template-columns: 1fr 100px;
}
.homenest__archive-project__project-grid .project-item {
height: 230px;
}
.homenest__archive-project__project-grid .project-info>*:not(.logo) p {
font-size: 16px;
}
.homenest__archive-project__project-grid ul.hn__taxonomy_neuros-project-category {
gap: 16px;
margin-top: 32px;
overflow-x: scroll;
scrollbar-width: none;
}
ul.hn__taxonomy_neuros-project-category {
gap: 12px;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item {
white-space: nowrap;
}
ul.hn__taxonomy_neuros-project-category li.hn__taxonomy-item a {
border-radius: 6px;
font-size: 16px;
}
.homenest__archive-project__banner {
height: unset;
padding: 50px 16px;
}
.homenest__archive-project__banner .title-container h2 {
font-size: 24px;
}
.homenest__archive-project__hero-section .custom-hero-container {
padding: 0 20px 0 0;
position: relative;
}
.homenest__archive-project__hero-section .custom-hero-image {
left: -90px;
min-width: 300px !important;
margin-top: -50px;
}
.homenest__archive-project__hero-section .custom-hero-content {
position: absolute;
padding-left: 100px;
bottom: 50%;
transform: translateY(50%);
}
.homenest__archive-project__hero-section .custom-hero-quote {
font-size: 40px;
padding-right: 20px;
}
.homenest__archive-project__hero-section .custom-signature {
width: 100px;
}
.homenest__archive-project__hero-section .custom-signature-block {
padding-right: 32px;
margin-top: 24px;
}
section.homenest__archive-project__marquee {
margin-top: -50px;
}
}
@media only screen and (max-width: 480px) {
.homenest__archive-project__project-grid {
grid-template-columns: repeat(1, 1fr);
}
.homenest__archive-project__project-grid .hn__pagination {
grid-column: 1/2;
}
.homenest__archive-project__header .statistic-section {
grid-template-columns: repeat(2, 1fr);
gap: 32px 16px;
}
.homenest__archive-project__hero-section .custom-hero-content {
position: absolute;
padding-left: 20px;
bottom: 0px;
transform: unset;
}
.homenest__archive-project__hero-section .custom-hero-quote {
font-size: 24px;
}
section.homenest__archive-project__marquee {
margin-top: 32px;
}
}
/* Section 7 */
.homenest__website-design__section7 {
margin-top: 100px;
width: 100%;
position: relative;
}
.homenest__website-design__section7-wrapper {
width: 100%;
height: auto;
padding: 0 300px;
}
.homenest__website-design__section7--title {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.homenest__website-design__section7--title span {
font-size: 140px;
background: url(' /wp-content/uploads/2025/05/text-bg-1.webp') no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.homenest__website-design__section7--title h2 {
font-size: 55px;
font-weight: 600;
}
.homenest__website-design__section7--cetegory {
display: flex;
width: 100%;
}
.homenest__website-design__section7--category-grid .category-item {
background-color: #e0e0e0;
border-radius: 50px;
box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;
color: #4d4d4d;
cursor: pointer;
font-size: 18px;
padding: 10px 30px;
width: fit-content;
transition: all 0.2s ease-in-out;
border: 2px solid rgb(206, 206, 206);
}
.homenest__website-design__section7--category-grid {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.homenest__website-design__section7--content {
margin-top: 120px;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 50px;
}
.homenest__website-design__section7--content-left {
grid-column: span 4 / span 4;
}
.homenest__website-design__section7--content-right {
grid-column: span 6 / span 6;
grid-column-start: 5;
}
.homenest__website-design__section7--content-left .sup {
max-width: fit-content;
margin-bottom: 1.9em;
padding: 6px 10px;
text-transform: uppercase;
color: #0a0d2a;
font-size: 13px;
line-height: 1em;
letter-spacing: 0;
font-weight: 500;
background-color: #FEFEFE;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 13.5px;
}
.homenest__website-design__section7--content-left .section7--content-left__title {
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, #2d0e2d 0%, #77175e 26%, #f23dd2 50%, #9d1595 70%, #38183e 100%);
animation: text-bg-animate 5s ease infinite;
font-size: 50px;
line-height: 1.3;
font-weight: 700;
}
/* .homenest__website-design__section7--content-left .section7--content-left__title span {
font-size: 50px;
} */
.homenest__website-design__section7--content-left .section7--content-left__title-sup {
font-size: 1rem;
line-height: 1.71;
letter-spacing: 0;
color: #5a5a67;
padding: 0;
font-weight: 400;
margin-top: 20px;
}
.homenest__website-design__section7--content-left .list-wrap {
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.homenest__website-design__section7--content-left .list-wrap ul {
width: 50%;
}
.homenest__website-design__section7--content-left .list-wrap ul li {
position: relative;
padding-left: 30px;
margin-top: 1rem;
font-weight: 600;
font-size: 17px;
}
.homenest__website-design__section7--content-left .list-wrap ul li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url(' /wp-content/uploads/2025/05/check.svg');
background-size: contain;
background-repeat: no-repeat;
}
.homenest__website-design__section7--content-right {
position: relative;
}
.homenest__website-design__section7--content-right .section7--content-right__wrap {
width: 100%;
height: 100%;
position: relative;
border-radius: 15px;
}
.section7--content-right__wrap-header {
/* position: absolute;
top: 0; */
}
.section7--content-right__wrap-body {
/* */
}
.homenest__website-design__section7--content-right .section7--content-right__wrap .content {
display: flex;
flex-direction: column;
max-width: fit-content;
border-radius: 15px;
position: relative;
overflow: hidden;
}
.section7--content-right__wrap-body {
display: grid;
grid-template-columns: 0.41fr 1fr;
background-color: #20202B;
}
.section7--content-right__wrap>img:first-of-type {
position: absolute;
z-index: 2;
bottom: -10%;
right: -15%;
width: 64%;
max-width: 260px;
border-radius: 10px;
}
.section7--content-right__wrap>img:nth-of-type(2) {
position: absolute;
z-index: 2;
top: -5%;
left: -5%;
width: 12%;
max-width: 90px;
border-radius: 10px;
}
.homenest__website-design__section7--footer {
margin-top: 200px;
border-radius: 1.6rem;
width: 100%;
height: 350px;
background-image: url(' /wp-content/uploads/2025/05/bg.webp');
background-size: cover;
}
.homenest__website-design__section7--footer-wapper {
padding: 67px 60px;
position: relative;
}
.homenest__website-design__section7--footer-wapper .section7__footer--title {
color: white;
font-size: 45px;
}
.homenest__website-design__section7--footer-wapper .section7__footer--title span {
display: block;
margin-top: -2px;
line-height: 1.2;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(207deg, #f7f981 0%, #c4f981 100%);
}
.homenest__website-design__section7--footer-wapper .content-wrap {
color: white;
display: flex;
justify-content: space-between;
margin-top: 50px;
}
.homenest__website-design__section7--footer-wapper .content-wrap .content-wrap-item .img-wrap .item-num {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
font-weight: 600;
line-height: 0;
color: white;
border-radius: 50%;
background: url(' /wp-content/uploads/2025/05/item-bg.webp') top center no-repeat;
background-size: cover;
}
.homenest__website-design__section7--footer-wapper .content-wrap .content-wrap-item .img-wrap {
position: relative;
}
.homenest__website-design__section7--footer-wapper .content-wrap .content-wrap-item .img-wrap img {
position: absolute;
top: 0;
right: 0;
}
.content-wrap-item {
display: flex;
gap: 1rem;
}
.content-wrap .content-wrap-item .item-cont .step {
display: inline-block;
padding: 4px 8px 3px;
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 13px;
}
.content-wrap .content-wrap-item .item-cont .item-title {
font-size: 28px;
line-height: 34px;
font-weight: 500;
letter-spacing: 0;
color: #ffffff;
}
.homenest__website-design__section7--footer-wapper .open-tooltip {
position: absolute;
top: 38px;
right: 22px;
transition: 0.3s all ease;
cursor: pointer;
overflow: hidden;
z-index: 1000;
/* FIX: Đảm bảo nút luôn ở trên cùng */
}
.homenest__website-design__section7--footer-wapper .open-tooltip:hover {
transform: scale(1.1);
}
.homenest__website-design__section7--footer-wapper .open-tooltip::before {
content: '+';
font-size: 32px;
font-weight: 500;
color: #000;
background-color: #ffffff;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
transition: 0.3s all ease;
}
.section7__footer--tooltip .tooltip-title {
font-size: 24px;
color: white;
white-space: nowrap;
transform: translateY(30px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.1s;
}
.section7__footer--tooltip.active .tooltip-title {
transform: translateY(0);
opacity: 1;
}
.section7__footer--tooltip .tooltip-title span {
display: block;
margin-top: -2px;
line-height: 1.2;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(207deg, #f7f981 0%, #c4f981 100%);
display: inline;
}
.section7__footer--tooltip p {
margin-top: 2.15em;
font-size: 18px;
line-height: 29px;
font-weight: 400;
color: white;
transform: translateY(30px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
}
.section7__footer--tooltip.active p {
transform: translateY(0);
opacity: 1;
}
.homenest__website-design__section7--footer-wapper .section7__footer--tooltip {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1.6rem;
padding: 60px;
/* Initial hidden state */
opacity: 0;
visibility: hidden;
transform: scale(0.95);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.section7__footer--tooltip.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.section7__footer--tooltip .btn-play-tooltip {
font-size: 13px;
line-height: 1;
letter-spacing: 0;
font-weight: 500;
display: inline-flex;
text-transform: capitalize;
padding: 17px 21px 16px;
border: 2px solid #c01be9;
color: white;
border-radius: 2rem;
position: relative;
padding-left: 40px;
margin-top: 20px;
transform: translateY(30px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.3s;
}
.section7__footer--tooltip.active .btn-play-tooltip {
transform: translateY(0);
opacity: 1;
}
.section7__footer--tooltip .btn-play-tooltip::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
left: 15px;
top: 50%;
transform: translateY(-50%);
background-image: url(' /wp-content/uploads/2025/05/play-button-arrowhead.webp');
background-size: contain;
background-repeat: no-repeat;
}
.homenest__website-design__section7--footer-main-content.hidden {
display: none;
}
.open-tooltip.active::before {
content: '+';
transform: rotate(90deg);
}
/* Responsive cho Section 7 */
/* Tablet - 1024px và nhỏ hơn */
@media (max-width: 1024px) {
.homenest__website-design__section7-wrapper {
padding: 0 50px;
}
.homenest__website-design__section8 {
display: flex;
justify-content: center;
align-items: center;
}
.homenest__website-design__section7--content-right .section7--content-right__wrap,
.homenest__website-design__section8-wrapper {
width: 90% !important;
}
.homenest__website-design__section7--footer-wapper {
padding: 63px 20px;
}
.homenest__website-design__section7--title span {
font-size: 100px;
}
.homenest__website-design__section7--title h2 {
font-size: 40px;
}
.homenest__website-design__section7--content {
grid-template-columns: 1fr;
gap: 30px;
}
.homenest__website-design__section7--content-left,
.homenest__website-design__section7--content-right {
grid-column: span 1;
grid-column-start: auto;
}
.homenest__website-design__section7--content-left .section7--content-left__title {
font-size: 40px;
}
.homenest__website-design__section7--content-left .list-wrap {
flex-direction: row;
gap: 80px;
justify-content: flex-start;
}
.section7--content-right__wrap>img:first-of-type {
width: 50%;
bottom: -5%;
right: -10%;
}
.homenest__website-design__section7--footer-wapper .section7__footer--title {
font-size: 35px;
}
.content-wrap .content-wrap-item .item-cont .item-title {
font-size: 22px;
}
}
/* Mobile Large - 768px và nhỏ hơn */
@media (max-width: 768px) {
.homenest__website-design__section7--content-left .sup {
margin-bottom: 0;
}
.homenest__website-design__section7 {
margin-top: 60px;
}
.homenest__website-design__section7-wrapper {
padding: 0 20px;
}
.homenest__website-design__section7--title span {
font-size: 80px;
}
.homenest__website-design__section7--title h2 {
font-size: 32px;
text-align: center;
}
.homenest__website-design__section7--category-grid .category-item {
font-size: 16px;
padding: 8px 20px;
}
.homenest__website-design__section7--content {
margin-top: 80px;
}
.homenest__website-design__section7--content-left .section7--content-left__title {
font-size: 32px;
text-align: left;
line-height: 1.3;
}
.homenest__website-design__section7--content-left .section7--content-left__title span br {
display: none;
}
.homenest__website-design__section7--content-left .section7--content-left__title-sup {
text-align: left;
margin-top: 10px;
}
.section7--content-right__wrap {
border-radius: 10px;
}
/* Giữ nguyên bố cục overlay, chỉ scale nhỏ lại */
.section7--content-right__wrap>img:first-of-type {
width: 50%;
max-width: 130px;
bottom: -10%;
right: -4%;
}
.section7--content-right__wrap>img:nth-of-type(2) {
width: 100%;
max-width: 60px;
top: -3%;
left: -3%;
}
.homenest__website-design__section7--footer {
margin-top: 100px;
height: auto;
min-height: 430px;
}
.homenest__website-design__section7--footer-wapper {
padding: 100px 40px;
}
.homenest__website-design__section7--footer-wapper .section7__footer--title {
font-size: 24px;
text-align: left;
}
.homenest__website-design__section7--footer-wapper .content-wrap {
margin-top: 30px;
}
.homenest__website-design__section7--footer-wapper .content-wrap>img {
display: none;
}
.content-wrap .content-wrap-item .item-cont .item-title {
font-size: 19px;
line-height: 24px;
}
.homenest__website-design__section7--footer-wapper .open-tooltip {
top: 20px;
right: 20px;
}
.section7__footer--tooltip {
padding: 40px 20px;
}
.section7__footer--tooltip .tooltip-title {
font-size: 20px;
white-space: normal;
}
.section7__footer--tooltip p {
font-size: 16px;
line-height: 24px;
}
}
/* Mobile Small - 480px và nhỏ hơn */
@media (max-width: 480px) {
.homenest__website-design__section7--content-left .list-wrap {
margin-top: 5px;
}
.homenest__website-design__section11--body {
grid-template-columns: repeat(1, 1fr) !important;
}
.homenest__website-design__section7--content-left .sup {
margin-bottom: 0;
}
.homenest__website-design__section7--content-left .section7--content-left__title span br {
display: none;
}
.homenest__website-design__section7--title span {
font-size: 60px;
}
.homenest__website-design__section7--title h2 {
font-size: 30px;
text-align: center;
}
.homenest__website-design__section7--category-grid .category-item {
font-size: 14px;
padding: 6px 15px;
}
.homenest__website-design__section7--content-left .section7--content-left__title {
font-size: 30px;
}
/* Tinh chỉnh thêm cho mobile nhỏ - vẫn giữ overlay */
.section7--content-right__wrap>img:first-of-type {
width: 50%;
max-width: 130px;
bottom: -10%;
right: -4%;
}
.section7--content-right__wrap>img:nth-of-type(2) {
width: 100%;
max-width: 45px;
top: -2%;
left: -2%;
}
.homenest__website-design__section7--footer-wapper .section7__footer--title {
font-size: 24px;
text-align: left;
}
.content-wrap-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
}
.homenest__website-design__section7--footer-wapper .content-wrap .content-wrap-item .img-wrap .item-num {
width: 45px;
height: 45px;
font-size: 22px;
}
.content-wrap .content-wrap-item .item-cont .item-title {
font-size: 13px;
line-height: 22px;
}
.section7__footer--tooltip .tooltip-title {
font-size: 18px;
}
.section7__footer--tooltip p {
font-size: 14px;
line-height: 22px;
}
.section7--content-right__wrap {
border-radius: 10px;
}
}
@media (max-width: 290px) {
.content-wrap .content-wrap-item .item-cont .item-title{
font-size:12px;
}
}
/* Mobile Extra Small - 360px và nhỏ hơn */
@media (max-width: 360px) {
.homenest__website-design__section7--content-left .list-wrap {
margin-top: 5px;
}
.homenest__website-design__section7--content-left .sup {
margin-bottom: 0;
}
.section7--content-right__wrap {
border-radius: 10px;
}
.homenest__website-design__section7-wrapper {
padding: 0 15px;
}
.homenest__website-design__section7--title span {
font-size: 50px;
}
.homenest__website-design__section7--title h2 {
font-size: 24px;
}
.homenest__website-design__section7--content-left .section7--content-left__title {
font-size: 24px;
}
.homenest__website-design__section7--footer-wapper {
padding: 30px 15px;
}
.homenest__website-design__section7--footer-wapper .section7__footer--title {
font-size: 20px;
left: 0;
}
.section7__footer--tooltip {
padding: 30px 15px;
}
.homenest__website-design__section7--footer-wapper .section7__footer--tooltip {
padding:20px;
}
.section7__footer--tooltip p {
font-size: 13px;
line-height: 22px;
}
}
@media (min-width: 480px) and (max-width: 800px) {
.homenest__website-design__section11--body {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Landscape orientation cho mobile */
@media (max-height: 500px) and (orientation: landscape) {
.homenest__website-design__section7--title span {
font-size: 50px;
}
.homenest__website-design__section7--title h2 {
font-size: 24px;
}
.homenest__website-design__section7--content {
margin-top: 40px;
}
.homenest__website-design__section7--footer {
margin-top: 60px;
}
}
/* Fix cho phần tooltip responsive */
@media (max-width: 768px) {
.section7__footer--tooltip .btn-play-tooltip {
padding: 12px 16px 12px 35px;
font-size: 12px;
}
.section7__footer--tooltip .btn-play-tooltip::before {
width: 16px;
height: 16px;
left: 12px;
}
.homenest__web-design__popular-question .container__about-us {
width: 100% !important;
}
.homenest__website-design__section7--footer-wapper .content-wrap {
gap: 30px !important;
flex-wrap: wrap;
align-items: center;
}
}
/* Section 8 */
.homenest__website-design__section8 {
margin-top: 100px;
width: 100%;
position: relative;
}
.homenest__website-design__section8-wrapper {
width: 100%;
height: auto;
padding: 0 300px;
}
.homenest__website-design__section8--logo {
position: relative;
max-width: 127px;
margin: 0 auto;
padding-top: 2%;
}
.homenest__website-design__section8--logo>img:nth-of-type(1) {
max-width: 95px;
}
.homenest__website-design__section8--logo>img:nth-of-type(2) {
position: absolute;
max-width: 42px;
top: 0;
right: 0;
animation: crescendo 2s alternate infinite ease-in;
}
.homenest__website-design__section8--title {
margin: 42px auto 0;
color: #3D1138;
font-size: 50px;
text-align: center;
}
.homenest__website-design__section8--title span {
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, #fb9a4b 0%, #dc1b6c 100%);
animation: text-bg-animate 5s ease infinite;
}
.homenest__website-design__section8--content {
position: relative;
margin-top: 50px;
}
.homenest__website-design__section8--content .box {
position: absolute;
text-align: left;
display: flex;
flex-direction: column;
align-items: start;
justify-content: space-between;
gap: 50px;
padding: 24px 20px;
border-radius: 20px;
background-color: #F3EFE4;
}
.homenest__website-design__section8--content .box h6 {
font-size: 1.2rem;
color: #3D2611;
margin-top: 2rem;
}
.homenest__website-design__section8--content .box:nth-of-type(1) {
top: -5%;
left: -10%;
gap: 8px;
max-width: 179px;
padding: 24px 19px 22px;
}
.homenest__website-design__section8--content>img:nth-of-type(1) {
position: absolute;
width: 10%;
top: 17%;
left: 10%;
}
.homenest__website-design__section8--content>img:nth-of-type(2) {
position: absolute;
max-width: 190px;
width: 16%;
bottom: -15%;
left: 0%;
border-radius: 1rem;
}
.homenest__website-design__section8--content>img:nth-of-type(3) {
max-width: 650px;
width: 80%;
margin: 0 auto;
border-radius: 0;
}
.homenest__website-design__section8--content>img:nth-of-type(4) {
position: absolute;
max-width: 136px;
width: 12%;
bottom: -23%;
right: 21%;
border-radius: 1rem;
}
.homenest__website-design__section8--content .box:nth-of-type(2) {
top: 15%;
right: 14%;
gap: 8px;
max-width: 179px;
padding: 24px 19px 22px;
background: url(' /wp-content/uploads/2025/05/item-7-bg.webp') top center no-repeat;
background-size: cover;
color: white;
font-size: 12px;
}
.homenest__website-design__section8--content .box:nth-of-type(2) h6 {
margin-top: 2rem;
font-size: 18px;
color: white;
}
.homenest__website-design__section8--content>img:nth-of-type(5) {
position: absolute;
max-width: 178px;
width: 19%;
top: -23%;
right: -5%;
border-radius: 1rem;
}
.homenest__website-design__section8--content .box:nth-of-type(3) {
bottom: -10%;
right: -10%;
max-width: 222px;
padding: 24px 24px 24px;
background: rgb(208, 244, 255);
background-size: cover;
}
.homenest__website-design__section8--btn-wrap {
display: flex;
justify-content: center;
}
.homenest__website-design__section8--footer-btn {
margin-top: 100px;
display: inline-flex;
align-items: center;
justify-content: center;
border-color: #7756FD;
background-color: #7756FD;
color: white;
padding: 16px 26px;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}
.homenest__website-design__section8--footer-btn:hover {
transform: translateY(-2px);
border-color: #ea3152;
background-color: #ea3152;
}
.homenest__website-design__section8--footer-btn::before {
content: "";
width: 18px;
height: 18px;
background-image: url(' /wp-content/uploads/2025/05/stars.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
margin-right: 8px;
}
/* Responsive CSS cho Section 8 */
/* Tablet và nhỏ hơn */
@media (max-width: 1024px) {
.homenest__website-design__section8-wrapper {
padding: 0 50px;
}
.homenest__website-design__section8--title {
font-size: 40px;
}
}
/* Mobile */
@media (max-width: 768px) {
.homenest__website-design__section8 {
margin-top: 60px;
}
.homenest__website-design__section8-wrapper {
padding: 0 20px;
}
.homenest__website-design__section8--title {
font-size: 32px;
margin: 30px auto 0;
}
.homenest__website-design__section8--content {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
/* Ẩn tất cả hình ảnh trừ hình 3-2.webp */
.homenest__website-design__section8--content>img:nth-of-type(1),
.homenest__website-design__section8--content>img:nth-of-type(2),
.homenest__website-design__section8--content>img:nth-of-type(4),
.homenest__website-design__section8--content>img:nth-of-type(5) {
display: none;
}
/* Chỉ hiển thị hình 3-2.webp và căn giữa */
.homenest__website-design__section8--content>img:nth-of-type(3) {
position: static;
max-width: 100%;
width: 100%;
margin: 0;
border-radius: 1rem;
}
/* Reset vị trí các box và sắp xếp theo chiều dọc */
.homenest__website-design__section8--content .box {
position: static;
width: 100%;
max-width: none;
margin: 0;
text-align: left;
align-items: flex-start;
gap: 20px;
padding: 24px 20px;
}
.homenest__website-design__section8--content .box:nth-of-type(1),
.homenest__website-design__section8--content .box:nth-of-type(2),
.homenest__website-design__section8--content .box:nth-of-type(3) {
max-width: 100%;
}
.homenest__website-design__section8--content .box:nth-of-type(1) h6 br,
.homenest__website-design__section8--content .box:nth-of-type(2) h6 br,
.homenest__website-design__section8--content .box:nth-of-type(3) h6 br {
display: none;
}
.homenest__website-design__section8--content .box:nth-of-type(1) {
order: 2;
}
.homenest__website-design__section8--content .box:nth-of-type(2) {
order: 3;
}
.homenest__website-design__section8--content .box:nth-of-type(2) h6 {
color: white !important;
}
.homenest__website-design__section8--content .box:nth-of-type(3) {
order: 4;
}
/* Đặt thứ tự hiển thị - hình xuất hiện đầu tiên */
.homenest__website-design__section8--content>img:nth-of-type(3) {
order: 1;
}
.homenest__website-design__section8--content .box h6 {
font-size: 18px;
margin-top: 1rem;
text-align: left;
}
.homenest__website-design__section8--footer-btn {
margin-top: 25px;
padding: 14px 24px;
font-size: 14px;
}
}
/* Mobile nhỏ */
@media (max-width: 480px) {
.homenest__website-design__section8--title {
font-size: 28px;
line-height: 1.3;
}
.homenest__website-design__section8--content {
gap: 25px;
}
.homenest__website-design__section8--content .box {
max-width: none;
padding: 20px 16px;
}
.homenest__website-design__section8--content .box h6 {
font-size: 16px;
}
}
/* Section 9 */
.homenest__website-design__section9 {
padding-top: 100px;
margin-top: 100px;
width: 100%;
position: relative;
background: #f4f1ea;
}
.homenest__website-design__section9-wrapper {
width: 100%;
height: auto;
}
.homenest__website-design__section9--title {
font-size: 55px;
text-align: center;
}
.homenest__website-design__section9--title span {
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, #050507 0%, #17446c 30%, #56aae6 55%, #0a69ad 70%, #04080d 84%, #0d0d12 100%);
animation: text-bg-animate 5s ease infinite;
}
.homenest__website-design__section9--title-decs {
max-width: 400px;
margin: 17px auto 0;
font-size: 19px;
line-height: 26px;
letter-spacing: 0;
font-weight: 500;
color: #0a0d2a;
text-align: center;
}
/* Tablet styles */
@media screen and (max-width: 1024px) {
.homenest__website-design__section9 {
padding: 80px 20px;
margin-top: 80px;
}
.homenest__website-design__section9--title {
font-size: clamp(2.2rem, 4.5vw, 3rem);
}
.homenest__website-design__section9--title-decs {
max-width: 450px;
font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}
}
/* Mobile landscape */
@media screen and (max-width: 768px) {
.homenest__website-design__section9 {
padding: 60px 15px;
margin-top: 60px;
min-height: 250px;
}
.homenest__website-design__section9--title {
font-size: clamp(2rem, 4vw, 2.5rem);
margin-bottom: 15px;
}
.homenest__website-design__section9--title-decs {
max-width: 400px;
font-size: clamp(0.9rem, 2vw, 1.05rem);
line-height: 1.5;
}
}
/* Mobile portrait */
@media screen and (max-width: 480px) {
.homenest__website-design__section9 {
padding: 50px 10px;
margin-top: 50px;
min-height: 200px;
}
.homenest__website-design__section9--title {
font-size: 26px;
margin-bottom: 12px;
}
.homenest__website-design__section9--title span {
word-break: break-word;
hyphens: auto;
}
.homenest__website-design__section9--title-decs {
font-size: 17px;
line-height: 1.6;
padding: 0 10px;
}
}
/* Extra small mobile */
@media screen and (max-width: 360px) {
.homenest__website-design__section9 {
padding: 40px 8px;
margin-top: 40px;
}
.homenest__website-design__section9--title {
font-size: clamp(1.6rem, 3vw, 2rem);
}
.homenest__website-design__section9--title-decs {
max-width: 300px;
font-size: clamp(0.8rem, 1.6vw, 0.95rem);
padding: 0 8px;
}
}
@keyframes marqueeIntigration {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(var(--width) * -1));
}
}
.homenest__web-services__intigration {
background: #f4f1ea;
padding: 70px 0 150px 0;
display: flex;
flex-direction: column;
gap: 25px;
}
.intigration-header {
display: flex;
flex-direction: column;
gap: 12px;
}
h2.intigration-title {
font-size: 36px;
font-weight: 700;
}
h2.intigration-title>span {
background-color: #3ed0ff30;
padding: 6px 12px;
}
p.intigration-header-badge {
display: flex;
gap: 10px;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.homenest__web-services__intigration .container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
}
.intigration-btn-see-video button {
border: 0;
background: transparent;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
}
.intigration-btn-see-video i {
font-size: 56px;
}
.intigration-marquee {
display: flex;
}
.intigration__st-marquee .intigration-marquee {
animation: marqueeIntigration 30s infinite linear;
}
.intigration__nd-marquee .intigration-marquee {
animation: marqueeIntigration 30s infinite linear reverse;
}
.intigration__st-marquee,
.intigration__nd-marquee {
overflow: hidden;
}
.intigration-container {
display: flex;
width: min-content;
}
.intigration-item {
min-width: 400px;
height: 250px;
margin-right: 32px;
background-image: url(' /wp-content/uploads/2025/05/elementor-placeholder-image.webp');
box-shadow: 1px 1px 5px #ccc;
border-radius: 1rem;
overflow: hidden;
}
.intigration-item img {
width: 100%;
height: 100%;
/* Thêm dòng này */
object-fit: cover;
}
/* Section 11 */
.homenest__website-design__section11 {
width: 100%;
position: relative;
background: #07060c;
}
.homenest__website-design__section11-wrapper {
width: 100%;
padding: 130px 300px;
height: auto;
position: relative;
}
.homenest__website-design__section11--header {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 4rem;
}
.homenest__website-design__section11--header .section11--header-left .sup {
max-width: fit-content;
margin-bottom: 1.9em;
padding: 6px 10px;
text-transform: uppercase;
color: #0a0d2a;
font-size: 13px;
line-height: 1em;
letter-spacing: 0;
font-weight: 500;
background-color: #FEFEFE;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 13.5px;
}
.section11--header-left .section11--header-left__title {
font-size: 50px;
color: white;
line-height: 1;
}
.section11--header-left .section11--header-left__title>span {
display: block;
position: relative;
padding-bottom: 4px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(90deg, #b9ff69 0%, #3498ff 100%);
}
.section11--header-left {}
.section11--header-right {
padding-left: 50px;
}
.homenest__website-design__section11--body {
margin-top: 4rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.section11--header-left .experience-descr {
margin-top: 1rem;
}
.section11--header-left .experience-descr p {
letter-spacing: 0;
font-size: 1rem;
line-height: 1.71;
letter-spacing: 0;
color: #8d8d96;
padding: 0;
margin: 0;
font-weight: 400;
}
.section11--header-right--list .list-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.section11--header-right--list .list-item p {
color: white;
font-size: 20px;
font-weight: 600;
}
.section11--header-right--list .list-item img {
max-width: 57px;
border-radius: 8px;
}
.section11--header-right--list .list-item:nth-of-type(1) {
margin-bottom: 3rem;
}
.section11--header-right--list .list-item:nth-of-type(2),
.section11--header-right--list .list-item:nth-of-type(3) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
color: white;
margin-top: 1rem;
}
.section11--header-right--list .list-item:nth-of-type(2) h6,
.section11--header-right--list .list-item:nth-of-type(3) h6 {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.section11--header-right--list .progress {
background-color: #2e2e36;
border-radius: 20px;
height: 10px;
width: 100%;
overflow: hidden;
}
.section11--header-right--list .progress .progress-done {
background: linear-gradient(70deg, #3498ff 0%, #b9ff69 100%);
border-radius: 20px;
height: 100%;
width: 0%;
opacity: 0;
transition: width 1s ease, opacity 1s ease;
}
.homenest__website-design__section11--box {
display: flex;
flex-basis: calc((100% - 90px) / 4);
flex-direction: column;
height: 17.6475em;
padding: 40px 30px 31px;
border-radius: 15px;
background-color: #20202b;
gap: 30px;
}
.homenest__website-design__section11--box .box-image {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 10px;
background-color: #272733;
}
.homenest__website-design__section11--box .box-image img {
max-width: 40px;
}
.homenest__website-design__section11--box .box-title {
font-size: 23px;
font-weight: 500;
letter-spacing: 0;
color: #ffffff;
padding-right: 2vw;
}
/* RESPONSIVE BREAKPOINTS */
/* Large Desktop */
@media (max-width: 1440px) {
.homenest__website-design__section11-wrapper {
padding: 100px 200px;
}
.section11--header-left .section11--header-left__title {
font-size: 45px;
}
}
/* Desktop */
@media (max-width: 1200px) {
.homenest__website-design__section11-wrapper {
padding: 80px 100px;
}
.section11--header-left .section11--header-left__title {
font-size: 40px;
}
.section11--header-right {
padding-left: 30px;
}
.homenest__website-design__section11--header {
gap: 3rem;
}
}
/* Tablet Landscape */
@media (max-width: 1024px) {
.homenest__website-design__section11-wrapper {
padding: 70px 50px;
}
.homenest__website-design__section11--body {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.section11--header-left .section11--header-left__title {
font-size: 35px;
}
.section11--header-right {
padding-left: 20px;
}
}
/* Tablet Portrait */
@media (max-width: 768px) {
.homenest__web-services__intigration {
background: #f4f1ea;
padding: 0px 0 150px 0;
display: flex;
flex-direction: column;
gap: 25px;
}
.homenest__website-design__section11-wrapper {
padding: 60px 30px;
}
.homenest__website-design__section11--header {
grid-template-columns: 1fr;
gap: 2rem;
}
.section11--header-left .section11--header-left__title {
font-size: 32px;
}
.section11--header-right {
padding-left: 0;
}
.homenest__website-design__section11--body {
margin-top: 3rem;
}
.homenest__website-design__section11--box {
flex-direction: row;
height: auto;
min-height: 100px;
padding: 30px 25px;
}
.homenest__website-design__section11--box .box-title {
font-size: 20px;
padding-right: 0;
margin-top: 1rem;
}
}
/* Mobile Large */
@media (max-width: 640px) {
.homenest__website-design__section11-wrapper {
padding: 50px 20px;
}
.section11--header-left .section11--header-left__title {
font-size: 28px;
}
.homenest__website-design__section11--body {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 2.5rem;
}
.homenest__website-design__section11--box {
padding: 25px 20px;
min-height: 180px;
}
.homenest__website-design__section11--box .box-image {
width: 70px;
height: 70px;
}
.homenest__website-design__section11--box .box-image img {
max-width: 35px;
}
.homenest__website-design__section11--box .box-title {
font-size: 18px;
}
.section11--header-right--list .list-item p {
font-size: 18px;
}
.section11--header-right--list .list-item img {
max-width: 50px;
}
}
/* Mobile Medium */
@media (max-width: 480px) {
.homenest__website-design__section11-wrapper {
padding: 40px 15px;
}
.section11--header-left .section11--header-left__title {
font-size: 27px;
}
.section11--header-left .experience-descr p {
font-size: 15px;
}
.homenest__website-design__section11--box {
padding: 20px 15px;
min-height: 100px;
}
.homenest__website-design__section11--box .box-image {
width: 60px;
height: 60px;
}
.homenest__website-design__section11--box .box-image img {
max-width: 30px;
}
.homenest__website-design__section11--box .box-title {
font-size: 16px;
line-height: 1.3;
}
.section11--header-right--list .list-item:nth-of-type(1) {
margin-bottom: 2rem;
margin-top: 2rem;
}
.section11--header-right--list .list-item p {
font-size: 18px;
}
}
/* Mobile Small */
@media (max-width: 375px) {
.homenest__website-design__section11-wrapper {
padding: 35px 12px;
}
.section11--header-left .section11--header-left__title {
font-size: 22px;
}
.homenest__website-design__section11--box {
padding: 18px 12px;
min-height: 150px;
}
.homenest__website-design__section11--box .box-title {
font-size: 15px;
}
}
/* Section 12 */
.homenest__website-design__section12 {
width: 100%;
position: relative;
background: #eef1e4;
}
.homenest__website-design__section12-wrapper {
width: 100%;
padding: 130px 300px;
height: auto;
position: relative;
}
.homenest__website-design__section12--icon {
max-width: 77px;
margin: 0px auto;
}
.homenest__website-design__section12--title {
max-width: 780px;
margin: 25px auto 0px;
font-size: 54px;
text-align: center;
}
.homenest__website-design__section12--title>span {
position: relative;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, rgb(5, 5, 7) 0%, rgb(23, 26, 108) 25%, rgb(55, 75, 255) 50%, rgb(111, 10, 173) 65%, rgb(4, 8, 13) 80%, rgb(13, 13, 18) 100%);
animation: 5s ease 0s infinite normal none running text-bg-animate;
}
.homenest__website-design__section12-wrapper .installation-gallery {
position: relative;
margin-top: 50px;
padding-bottom: 2.45%;
}
.homenest__website-design__section12-wrapper .installation-gallery img:nth-of-type(1) {
max-width: 650px;
width: 51%;
margin: 0px auto;
}
.homenest__website-design__section12-wrapper .installation-gallery img:nth-of-type(2) {
position: absolute;
top: 11.9%;
left: 3.6%;
max-width: 340px;
width: 27%;
box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 48px;
z-index: 2;
border-radius: 11px;
}
.homenest__website-design__section12-wrapper .installation-gallery img:nth-of-type(3) {
position: absolute;
top: 0px;
right: 9.4%;
max-width: 173px;
width: 14%;
box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 48px;
z-index: 2;
border-radius: 0px;
}
.homenest__website-design__section12-wrapper .installation-gallery img:nth-of-type(4) {
position: absolute;
bottom: 0%;
right: 4.15%;
max-width: 344px;
width: 27%;
z-index: 2;
}
.homenest__website-design__section12-wrapper .installation-gallery img:nth-of-type(5) {
position: absolute;
top: 33.5%;
right: 18.5%;
max-width: 56px;
width: 5%;
z-index: 2;
border-radius: 0px;
animation: 3s linear 0s infinite normal none running rotate;
}
.homenest__website-design__section12-wrapper .installation-gallery img:nth-of-type(6) {
position: absolute;
bottom: 7%;
left: 14.85%;
max-width: 71px;
width: 6%;
z-index: 2;
border-radius: 0px;
animation: 1.5s ease-in 0s infinite alternate none running crescendo;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes crescendo {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.15);
}
}
.homenest__website-design__section12-wrapper .installation-info {
max-width: 1222px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
margin-top: 60px;
gap: 43px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .img-wrap {
max-width: 260px;
margin: 0px auto;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .info-title {
max-width: 80%;
font-size: 26px;
line-height: 31px;
letter-spacing: -0.01em;
font-weight: 500;
margin: -0.55em auto 0px;
text-align: center;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .info-descr {
margin-top: 1.15em;
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
line-height: 25px;
color: #616458;
text-align: center;
}
/* RESPONSIVE STYLES */
/* Large screens (1400px+) */
@media (min-width: 1400px) {
.homenest__website-design__section12-wrapper {
padding: 130px 350px;
}
}
/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
.homenest__website-design__section12-wrapper {
padding: 100px 200px;
}
.homenest__website-design__section12--title {
font-size: 48px;
}
.homenest__website-design__section12-wrapper .installation-info {
gap: 30px;
}
}
/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
.homenest__website-design__section12-wrapper {
padding: 80px 100px;
}
.homenest__website-design__section12--title {
font-size: 42px;
max-width: 680px;
}
.homenest__website-design__section12-wrapper .installation-info {
flex-wrap: wrap;
gap: 40px;
justify-content: space-between;
}
.homenest__website-design__section12-wrapper .installation-info .info-item {
flex: 0 0 calc(50% - 20px);
max-width: calc(50% - 20px);
}
.homenest__website-design__section12-wrapper .installation-info .info-item:last-child {
flex: 0 0 100%;
max-width: 100%;
margin-top: 20px;
}
}
/* Small tablet (576px - 767px) */
@media (max-width: 767px) {
.homenest__website-design__section12-wrapper {
padding: 60px 50px;
}
.homenest__website-design__section12--icon {
max-width: 60px;
}
.homenest__website-design__section12--title {
font-size: 36px;
max-width: 100%;
margin: 20px auto 0px;
}
.homenest__website-design__section12-wrapper .installation-gallery {
margin-top: 40px;
padding-bottom: 5%;
}
.homenest__website-design__section12-wrapper .installation-info {
flex-direction: column;
gap: 50px;
margin-top: 50px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item {
flex: none;
max-width: 100%;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .info-title {
font-size: 24px;
line-height: 28px;
max-width: 100%;
}
}
/* Mobile (480px - 575px) */
@media (max-width: 575px) {
.homenest__website-design__section12-wrapper {
padding: 50px 30px;
}
.homenest__website-design__section12--title {
font-size: 30px;
}
.homenest__website-design__section12-wrapper .installation-gallery {
margin-top: 30px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .img-wrap {
max-width: 200px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .info-title {
font-size: 22px;
line-height: 26px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .info-descr {
font-size: 15px;
line-height: 22px;
}
}
/* Extra small mobile (max 479px) */
@media (max-width: 479px) {
.homenest__website-design__section12-wrapper {
padding: 40px 20px;
}
.homenest__website-design__section12--icon {
max-width: 50px;
}
.homenest__website-design__section12--title {
font-size: 26px;
margin: 15px auto 0px;
}
.homenest__website-design__section12-wrapper .installation-gallery {
margin-top: 25px;
padding-bottom: 8%;
}
.homenest__website-design__section12-wrapper .installation-info {
gap: 40px;
margin-top: 40px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .img-wrap {
max-width: 180px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .info-title {
font-size: 20px;
line-height: 24px;
}
.homenest__website-design__section12-wrapper .installation-info .info-item .info-descr {
font-size: 15px;
line-height: 20px;
}
}
/* Section 13 */
.homenest__website-design__section13 {
width: 100%;
position: relative;
background-color: #FEFEFE;
}
.homenest__website-design__section13-wrapper {
width: 100%;
padding: 130px 300px;
height: auto;
position: relative;
}
.homenest__website-design__section13--header {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 8px;
}
.section13--header-left {
position: relative;
width: 100%;
}
.section13--header .section13--header__img-wrap {
padding: 7.6% 11.3% 4.3% 2.3%;
position: relative;
}
.section13--header-left .section13--header__img-wrap img:first-of-type {
position: relative;
}
.section13--header-left .section13--header__img-wrap img:nth-of-type(2) {
z-index: 3;
right: -10%;
bottom: -10%;
width: 48%;
max-width: 340px;
border-radius: 15px;
box-shadow: 0 0 24px rgba(35, 45, 67, 0.07);
position: absolute;
}
.section13--header-left .section13--header__img-wrap img:nth-of-type(3) {
z-index: 4;
right: -3%;
top: -4%;
width: 13%;
max-width: 90px;
border-radius: 15px;
position: absolute;
}
.section13--header-left .section13--header__img-wrap img:nth-of-type(4) {
z-index: 4;
left: -3%;
top: -5%;
width: 23%;
max-width: 138px;
border-radius: 10px;
box-shadow: 0 0 24px rgba(35, 45, 67, 0.07);
position: absolute;
}
.section13--header-right {
width: 100%;
}
.section13--header-right-wrap {
padding: 50px 0px 0px 150px;
}
.section13--header-right .sup {
max-width: fit-content;
margin-bottom: 1.9em;
padding: 6px 10px;
text-transform: uppercase;
color: #0a0d2a;
font-size: 13px;
line-height: 1em;
letter-spacing: 0;
font-weight: 500;
background-color: #FEFEFE;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 13.5px;
}
.section13--header-right .section_title {
font-size: 54px;
line-height: 1;
}
.section13--header-right .section_title>span {
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, #050507 0%, #17446c 25%, #56aae6 50%, #0a69ad 65%, #04080d 80%, #0d0d12 100%);
animation: text-bg-animate 5s ease infinite;
}
.section13--header-right .desc-right {
margin-top: 2rem;
margin-bottom: 2rem;
}
.section13--header-right .desc-right p {
font-size: 1rem;
line-height: 1.71;
letter-spacing: 0;
color: #5a5a67;
padding: 0;
margin: 0;
font-weight: 400;
}
.homenest__website-design__section13--footer-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #c01be9 0%, #9b1be9 100%);
color: white;
text-decoration: none;
padding: 14px 24px;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}
.homenest__website-design__section13--footer-btn:hover {
transform: translateY(-5px);
}
.homenest__website-design__section13--variants {
margin-top: 130px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 30px;
}
.homenest__website-design__section13--variants .variant-banner:nth-of-type(1) {
background: url(' /wp-content/uploads/2025/05/banner-bg-1.webp') top center no-repeat;
background-size: cover;
}
.homenest__website-design__section13--variants .variant-banner:nth-of-type(2) {
background: url(' /wp-content/uploads/2025/05/banner-bg-2.webp') top center no-repeat;
background-size: cover;
}
.homenest__website-design__section13--variants .variant-banner {
padding-top: 3.75em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
flex-basis: calc((100% - 30px) / 2);
text-align: center;
border-radius: 20px;
overflow: hidden;
}
.homenest__website-design__section13--variants .variant-banner .banner-num {
padding: 2px 20px;
font-size: 14px;
letter-spacing: 0;
font-weight: 500;
color: #fffefe;
background: url(' /wp-content/uploads/2025/05/text-bg-2.webp') top center no-repeat;
background-size: cover;
border-radius: 13.5px;
}
.homenest__website-design__section13--variants .variant-banner .banner-title {
max-width: 75%;
margin-top: 0.48em;
line-height: 46px;
letter-spacing: 0;
font-size: 40px;
font-weight: 700;
}
.homenest__website-design__section13--variants .variant-banner .banner-descr {
margin-top: 0.75em;
max-width: 390px;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
font-weight: 400;
color: #5a5a67;
}
.homenest__website-design__section13--variants .variant-banner img {
margin-top: 1.1em;
}
.homenest__website-design__section13--variants .variant-info {
margin-top: 70px;
display: flex;
flex-direction: row;
gap: 100px;
}
.homenest__website-design__section13--variants .variant-info .info-item {
flex-basis: calc((100% - 327px) / 4);
}
.homenest__website-design__section13--variants .variant-info .info-item .image-wrap {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: #faf8f2;
border-radius: 10px;
}
.homenest__website-design__section13--variants .variant-info .info-item .image-wrap img {
max-width: 40px;
}
.homenest__website-design__section13--variants .variant-info .info-item .info-title {
margin-top: 2.9vw;
letter-spacing: 0;
color: #01040b;
font-size: 23px;
line-height: 1.23;
letter-spacing: -0.02em;
font-weight: 600;
}
.homenest__website-design__section13--variants .variant-info .info-item .info-descr {
margin-top: 0.7em;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
font-weight: 400;
color: #5a5a67;
}
/* RESPONSIVE STYLES */
/* Large screens (1400px+) */
@media (min-width: 1400px) {
.homenest__website-design__section13-wrapper {
padding: 130px 350px;
}
.section13--header-right-wrap {
padding: 50px 0px 0px 180px;
}
}
/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
.homenest__website-design__section13-wrapper {
padding: 100px 200px;
}
.section13--header-right-wrap {
padding: 40px 0px 0px 100px;
}
.section13--header-right .section_title {
font-size: 48px;
}
.homenest__website-design__section13--variants .variant-info {
gap: 60px;
}
.homenest__website-design__section13--variants .variant-info .info-item {
flex-basis: calc((100% - 180px) / 4);
}
}
/* Tablet landscape (992px - 1199px) */
@media (max-width: 1199px) {
.homenest__website-design__section13-wrapper {
padding: 80px 100px;
}
.section13--header-right-wrap {
padding: 30px 0px 0px 60px;
}
.section13--header-right .section_title {
font-size: 42px;
}
.homenest__website-design__section13--variants .variant-banner .banner-title {
font-size: 34px;
line-height: 40px;
}
.homenest__website-design__section13--variants .variant-info {
gap: 40px;
flex-wrap: wrap;
}
.homenest__website-design__section13--variants .variant-info .info-item {
flex-basis: calc((100% - 40px) / 2);
}
.homenest__website-design__section13--variants .variant-info .info-item .info-title {
margin-top: 1.5em;
font-size: 20px;
}
}
/* Tablet portrait (768px - 991px) */
@media (max-width: 991px) {
.homenest__website-design__section13-wrapper {
padding: 60px 50px;
}
.homenest__website-design__section13--header {
grid-template-columns: 1fr;
gap: 40px;
}
.section13--header-right-wrap {
padding: 0;
}
.section13--header-right .section_title {
font-size: 38px;
}
.homenest__website-design__section13--variants {
margin-top: 80px;
flex-direction: column;
gap: 30px;
}
.homenest__website-design__section13--variants .variant-banner {
flex-basis: auto;
}
.homenest__website-design__section13--variants .variant-banner .banner-title {
font-size: 30px;
line-height: 36px;
max-width: 85%;
}
.homenest__website-design__section13--variants .variant-info {
margin-top: 50px;
gap: 30px;
}
}
/* Mobile landscape (576px - 767px) */
@media (max-width: 767px) {
.homenest__website-design__section13-wrapper {
padding: 80px 30px;
}
.section13--header-right .sup {
font-size: 12px;
padding: 5px 8px;
margin-bottom: 10px;
}
.section13--header-right .section_title {
font-size: 32px;
}
.section13--header-right .desc-right {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.homenest__website-design__section13--footer-btn {
padding: 12px 20px;
font-size: 15px;
}
.homenest__website-design__section13--variants {
margin-top: 60px;
}
.homenest__website-design__section13--variants .variant-banner {
padding-top: 2.5em;
}
.homenest__website-design__section13--variants .variant-banner .banner-title {
font-size: 26px;
line-height: 32px;
max-width: 90%;
}
.homenest__website-design__section13--variants .variant-banner .banner-descr {
font-size: 16px;
line-height: 24px;
max-width: 100%;
padding: 0 20px;
}
.homenest__website-design__section13--variants .variant-info {
flex-direction: column;
gap: 40px;
}
.homenest__website-design__section13--variants .variant-info .info-item {
flex-basis: auto;
text-align: center;
}
.homenest__website-design__section13--variants .variant-info .info-item .image-wrap {
margin: 0 auto;
width: 70px;
height: 70px;
}
.homenest__website-design__section13--variants .variant-info .info-item .image-wrap img {
max-width: 35px;
}
.homenest__website-design__section13--variants .variant-info .info-item .info-title {
margin-top: 1em;
font-size: 18px;
}
.homenest__website-design__section13--variants .variant-info .info-item .info-descr {
font-size: 15px;
line-height: 24px;
}
}
/* Mobile portrait (max 575px) */
@media (max-width: 575px) {
.homenest__website-design__section13-wrapper {
margin-top: 10px;
}
.section13--header .section13--header__img-wrap {
padding: 5% 8% 3% 2%;
}
.section13--header-right .section_title {
font-size: 28px;
}
.section13--header-right .desc-right p {
font-size: 15px;
}
.homenest__website-design__section13--footer-btn {
padding: 10px 18px;
font-size: 14px;
}
.homenest__website-design__section13--variants {
margin-top: 50px;
}
.homenest__website-design__section13--variants .variant-banner {
padding-top: 2em;
}
.homenest__website-design__section13--variants .variant-banner .banner-num {
font-size: 13px;
padding: 2px 15px;
}
.homenest__website-design__section13--variants .variant-banner .banner-title {
font-size: 24px;
line-height: 28px;
}
.homenest__website-design__section13--variants .variant-banner .banner-descr {
font-size: 15px;
line-height: 22px;
padding: 0 15px;
}
.homenest__website-design__section13--variants .variant-info {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 25px 15px;
}
.homenest__website-design__section13--variants .variant-info .info-item .image-wrap {
width: 60px;
height: 60px;
}
.homenest__website-design__section13--variants .variant-info .info-item .image-wrap img {
max-width: 30px;
}
.homenest__website-design__section13--variants .variant-info .info-item .info-title {
font-size: 17px;
margin-top: 0.8em;
}
.homenest__website-design__section13--variants .variant-info .info-item .info-descr {
font-size: 15px;
line-height: 22px;
}
}
/* Section 14 */
.homenest__website-design__section14 {
width: 100%;
position: relative;
background-color: #07060C;
}
.homenest__website-design__section14 .marquee-wrapper {
padding: 50px 0;
}
.homenest__website-design__section14 .marquee-wrapper .marquee-box-one {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
}
.homenest__website-design__section14 .marquee-wrapper .marquee-content-one {
display: flex;
gap: 40px;
padding: 0 20px;
animation: scroll-one 30s linear infinite;
}
.homenest__website-design__section14 .marquee-wrapper .marquee-box-two {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
margin-top: 1.3rem;
}
.homenest__website-design__section14 .marquee-wrapper .marquee-content-two {
display: flex;
gap: 40px;
padding: 0 20px;
animation: scroll-two 30s linear infinite;
}
.homenest__web-design__marquee-text {
padding: 15px 75px 15px 20px;
margin-right: 17px;
display: flex;
align-items: center;
flex-direction: row;
gap: 11px;
background-color: #23202d;
border-radius: 70px;
white-space: nowrap;
}
.homenest__web-design__marquee-text img {
width: 50px;
height: 50px;
}
.homenest__web-design__marquee-text p {
font-size: 24px;
letter-spacing: 0;
line-height: 1em;
font-weight: 400;
color: #fffefe;
}
.homenest__web-design__marquee-text:hover {
background-color: #31393F;
}
@keyframes scroll-one {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes scroll-two {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
/* Section 15 */
.homenest__website-design__section15 {
width: 100%;
position: relative;
background-color: #FEFEFE;
}
.homenest__website-design__section15-wrapper {
width: 100%;
padding: 130px 250px;
height: auto;
position: relative;
}
.homenest__website-design__section15--head {
display: grid;
grid-template-columns: 1fr 1.35fr;
align-items: center;
}
.homenest__website-design__section15--head .item .content-wrap {
margin: 0;
padding: 0;
position: relative;
}
.homenest__website-design__section15--head .item .content-wrap .sup {
max-width: fit-content;
margin-bottom: 1.9em;
padding: 6px 10px;
text-transform: uppercase;
color: #0a0d2a;
font-size: 13px;
line-height: 1em;
letter-spacing: 0;
font-weight: 500;
background-color: #FEFEFE;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 13.5px;
}
.homenest__website-design__section15--head .item .content-wrap .section_title {
font-size: 57px;
line-height: 1;
letter-spacing: -0.01em;
margin-bottom: 0.45em;
margin-left: -3px;
}
.homenest__website-design__section15--head .item .content-wrap .desc {
font-size: 1rem;
line-height: 1.71;
letter-spacing: 0;
color: #5a5a67;
padding: 0;
margin: 0;
font-weight: 400;
}
.homenest__website-design__section15--btn-wrap {
display: flex;
justify-content: flex-start;
}
.homenest__website-design__section15--btn {
margin-top: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
border-color: #7756FD;
background-color: #7756FD;
color: white;
padding: 16px 26px;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}
.homenest__website-design__section15--btn:hover {
transform: translateY(-2px);
border-color: #ea3152;
background-color: #ea3152;
}
.homenest__website-design__section15--head .item .img-wrap {
position: relative;
padding: 3.2% 1.1% 3.8% 8%;
}
.homenest__website-design__section15--head .item .img-wrap>img:nth-of-type(1) {
position: relative;
max-width: 300px;
margin-left: auto;
z-index: 1;
}
.homenest__website-design__section15--head .item .img-wrap>img:nth-of-type(2) {
position: absolute;
z-index: 2;
bottom: -1.6%;
left: 7%;
width: 40%;
max-width: 296px;
}
.homenest__website-design__section15--head .item .img-wrap>img:nth-of-type(3) {
position: absolute;
z-index: 3;
top: -50%;
left: 1.5%;
width: 26%;
max-width: 159px;
}
.homenest__website-design__section15--content {
width: 100%;
padding: 0px 150px;
height: auto;
position: relative;
display: flex;
flex-direction: row;
gap: 29px;
}
.homenest__website-design__section15--content-left {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
flex-basis: calc(100% / 2);
}
.homenest__website-design__section15--content-left .item-1,
.homenest__website-design__section15--content-left .item-2,
.homenest__website-design__section15--content-left .item-3,
.homenest__website-design__section15--content-left .item-4 {
flex-basis: calc((100% - 20px) / 2);
padding: 20px;
border-radius: 1rem;
overflow: hidden;
}
.homenest__website-design__section15--content-left .item-1 {
background-image: url(' /wp-content/uploads/2025/05/item-bg-1.webp');
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.homenest__website-design__section15--content-left .item-1 ul {
position: relative;
}
.homenest__website-design__section15--content-left .item-1 ul li {
margin-top: 1.3rem;
background-color: white;
border-radius: 1rem;
padding: 10px 3rem;
font-size: 1rem;
word-spacing: 0;
font-weight: 600;
}
.homenest__website-design__section15--content-left .item-1 ul li::before {
content: '';
position: absolute;
left: 1rem;
background-image: url(' /wp-content/uploads/2025/05/check-2.svg');
height: 20px;
width: 20px;
background-size: contain;
}
.homenest__website-design__section15--content-left .item-1::before {
top: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, #f6eeed, rgba(246, 238, 237, 0));
}
.homenest__website-design__section15--content-left .item-1::after {
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, rgba(246, 238, 237, 0), #f6eeed);
}
.homenest__website-design__section15--content-left .item-1::before,
.homenest__website-design__section15--content-left .item-1::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 180px;
z-index: 1;
pointer-events: none;
}
.homenest__website-design__section15--content-left .item-2 {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 0;
background-color: #f8eefb;
}
.homenest__website-design__section15--content-left .item-2 .item-title {
margin-top: 4px;
font-size: 25px;
letter-spacing: 0;
line-height: 1.23;
}
.homenest__website-design__section15--content-left .item-2 .item-descr {
margin-top: 0.75em;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #5a5a67;
padding: 0;
margin: 0;
font-weight: 400;
max-width: 300px;
}
.homenest__website-design__section15--content-left .item-3 {
background-color: #e6f7f9;
}
.homenest__website-design__section15--content-left .item-3 .item-title {
margin-top: 4px;
font-size: 25px;
letter-spacing: 0;
line-height: 1.23;
}
.homenest__website-design__section15--content-left .item-3 .item-descr {
margin-top: 0.75em;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #5a5a67;
}
.homenest__website-design__section15--content-left .item-4 {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #f5f8e9;
}
.homenest__website-design__section15--content-left .item-4 .item-title {
margin-top: 0;
font-size: 33px;
line-height: 42px;
letter-spacing: 0;
}
.homenest__website-design__section15--content-left .item-4 .item-title span {
color: #9a9e8d;
}
.homenest__website-design__section15--content-left .item-4 .item-descr {
margin-top: 0.75em;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #5a5a67;
}
.homenest__website-design__section15--content-right {
padding-left: 5.8vw;
display: flex;
flex-direction: column;
justify-content: start;
flex-basis: calc(100% / 2);
gap: 33px;
flex: wrap;
}
.homenest__website-design__section15--content-right .item-wrap .sup {
max-width: fit-content;
margin-bottom: 1.9em;
padding: 6px 10px;
text-transform: uppercase;
color: #0a0d2a;
font-size: 13px;
line-height: 1em;
letter-spacing: 0;
font-weight: 500;
background-color: #FEFEFE;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 13.5px;
}
.homenest__website-design__section15--content-right .section_title {
font-size: 60px;
max-width: 550px;
line-height: 1;
}
.homenest__website-design__section15--content-right .section_title>span {
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, #2d0e2d 0%, #77175e 27%, #f23dd2 50%, #9d1595 70%, #38183e 100%);
animation: text-bg-animate 5s ease infinite;
}
.homenest__website-design__section15--content-right .item-wrap .list {
max-width: 540px;
padding: 0;
margin: 0;
list-style-type: none;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item {
list-style-type: none;
font-size: 1rem;
line-height: 1.647;
letter-spacing: 0;
font-weight: 500;
color: #0a0d2a;
margin-bottom: 2rem;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item .item-title {
font-size: 22px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item .item-descr {
margin-top: 0.65em;
font-size: 17px;
line-height: 29px;
font-weight: 400;
letter-spacing: 0;
color: #5a5a67;
}
.homenest__website-design__section15--btn-wrap-footer {
display: flex;
justify-content: flex-start;
}
.homenest__website-design__section15--footer-btn {
margin-top: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-color: #7756FD;
background-color: #7756FD;
color: white;
padding: 16px 26px;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}
.homenest__website-design__section15--footer-btn:hover {
transform: translateY(-2px);
border-color: #ea3152;
background-color: #ea3152;
}
.homenest__website-design__section15--footer-btn::before {
content: "";
width: 18px;
height: 18px;
background-image: url(' /wp-content/uploads/2025/05/logo_fixed_inverse.webp');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
margin-right: 8px;
}
.fadeInUp-Webdesign {
opacity: 0;
transform: translate3d(0, 40px, 0);
transition: all 0.5s ease;
}
.fadeInUp-Webdesign.active {
animation-name: fadeInUp-Webdesign;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease;
}
@keyframes fadeInUp-Webdesign {
0% {
opacity: 0;
transform: translate3d(0, 40px, 0);
}
60% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft-Webdesign {
opacity: 0;
transform: translate3d(-30px, 0, 0);
transition: all 0.5s ease;
}
.fadeInLeft-Webdesign.active {
animation-name: fadeInLeft-Webdesign;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease;
}
@keyframes fadeInLeft-Webdesign {
0% {
opacity: 0;
transform: translate3d(-30px, 0, 0);
}
60% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInRight-Webdesign {
opacity: 0;
transform: translate3d(30px, 0, 0);
transition: all 0.5s ease;
}
.fadeInRight-Webdesign.active {
animation-name: fadeInRight-Webdesign;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease;
}
@keyframes fadeInRight-Webdesign {
0% {
opacity: 0;
transform: translate3d(30px, 0, 0);
}
60% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* ======================= RESPONSIVE STYLES ======================= */
/* Large Desktop (≥1600px) */
@media screen and (min-width: 1600px) {
.homenest__website-design__section15-wrapper {
padding: 150px 300px;
}
.homenest__website-design__section15--content {
padding: 0px 200px;
}
.homenest__website-design__section15--head .item .content-wrap .section_title {
font-size: 64px;
}
.homenest__website-design__section15--content-right .section_title {
font-size: 68px;
}
}
/* Desktop (1200px - 1599px) */
@media screen and (max-width: 1599px) {
.homenest__website-design__section15-wrapper {
padding: 120px 200px;
}
.homenest__website-design__section15--content {
padding: 0px 120px;
}
}
/* Large Tablet (992px - 1199px) */
@media screen and (max-width: 1199px) {
.homenest__website-design__section15-wrapper {
padding: 100px 120px;
}
.homenest__website-design__section15--content {
padding: 0px 80px;
}
.homenest__website-design__section15--head .item .content-wrap .section_title {
font-size: 48px;
text-align: left;
}
.homenest__website-design__section15--content-right .section_title {
font-size: 52px;
}
.homenest__website-design__section15--content-right {
padding-left: 4vw;
}
}
/* Medium Tablet (768px - 991px) */
@media screen and (max-width: 991px) {
.homenest__website-design__section15--head .item .img-wrap{
margin-top: 100px;
}
.homenest__website-design__section15--content-right .item-wrap .sup {
margin-bottom: 10px;
}
.homenest__website-design__section15--head .item .content-wrap .sup {
margin-bottom: 10px;
}
.homenest__website-design__section15-wrapper {
padding: 80px 60px;
}
.homenest__website-design__section15--content {
padding: 0px 40px;
flex-direction: column;
gap: 40px;
}
.homenest__website-design__section15--head {
grid-template-columns: 1fr;
gap: 3rem;
}
.homenest__website-design__section15--head .item .content-wrap .section_title {
font-size: 42px;
}
.homenest__website-design__section15--content-left,
.homenest__website-design__section15--content-right {
flex-basis: 100%;
}
.homenest__website-design__section15--content-right {
padding-left: 0;
}
.homenest__website-design__section15--content-right .section_title {
font-size: 46px;
}
.homenest__website-design__section15--content-left .item-4 .item-title {
font-size: 28px;
line-height: 36px;
}
.homenest__website-design__section15--head .item .img-wrap>img:nth-of-type(3){
position: absolute;
z-index: 3;
top: -30%;
left: 1.5%;
width: 26%;
max-width: 159px;
}
}
/* Small Tablet (576px - 767px) */
@media screen and (max-width: 767px) {
.homenest__website-design__section15-wrapper {
padding: 60px 30px;
}
.homenest__website-design__section15--content {
padding: 0px 20px;
}
.homenest__website-design__section15--head .item .content-wrap .section_title {
font-size: 36px;
}
.homenest__website-design__section15--content-right .section_title {
font-size: 38px;
}
.homenest__website-design__section15--content-left {
flex-direction: column;
}
.homenest__website-design__section15--content-left .item-1,
.homenest__website-design__section15--content-left .item-2,
.homenest__website-design__section15--content-left .item-3,
.homenest__website-design__section15--content-left .item-4 {
flex-basis: 100%;
}
.homenest__website-design__section15--content-left .item-1 ul li {
font-size: 14px;
padding: 8px 2.5rem 8px 3rem;
}
.homenest__website-design__section15--content-left .item-2 .item-title,
.homenest__website-design__section15--content-left .item-3 .item-title {
font-size: 22px;
}
.homenest__website-design__section15--content-left .item-4 .item-title {
font-size: 24px;
line-height: 32px;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item .item-title {
font-size: 20px;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item .item-descr {
font-size: 16px;
line-height: 26px;
}
}
/* Mobile (≤575px) */
@media screen and (max-width: 575px) {
.homenest__website-design__section15-wrapper {
padding: 40px 20px;
}
.homenest__website-design__section15--content {
padding: 0px 10px;
}
.homenest__website-design__section15--head {
gap: 2rem;
}
.homenest__website-design__section15--head .item .content-wrap .section_title {
font-size: 28px;
margin-left: 0;
}
.homenest__website-design__section15--head .item .content-wrap .desc {
font-size: 16px;
line-height: 1.6;
}
.homenest__website-design__section15--content-right .section_title {
font-size: 32px;
max-width: 100%;
}
.homenest__website-design__section15--content-left .item-1,
.homenest__website-design__section15--content-left .item-2,
.homenest__website-design__section15--content-left .item-3,
.homenest__website-design__section15--content-left .item-4 {
padding: 15px;
}
.homenest__website-design__section15--content-left .item-1 ul li {
font-size: 13px;
padding: 6px 2rem 6px 2.5rem;
margin-top: 1rem;
}
.homenest__website-design__section15--content-left .item-1 ul li::before {
width: 16px;
height: 16px;
left: 0.7rem;
}
.homenest__website-design__section15--content-left .item-2 .item-title,
.homenest__website-design__section15--content-left .item-3 .item-title {
font-size: 20px;
}
.homenest__website-design__section15--content-left .item-2 .item-descr,
.homenest__website-design__section15--content-left .item-3 .item-descr,
.homenest__website-design__section15--content-left .item-4 .item-descr {
font-size: 14px;
line-height: 22px;
}
.homenest__website-design__section15--content-left .item-4 .item-title {
font-size: 20px;
line-height: 28px;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item {
margin-bottom: 1.5rem;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item .item-title {
font-size: 20px;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item .item-descr {
font-size: 16px;
line-height: 22px;
}
.homenest__website-design__section15--btn,
.homenest__website-design__section15--footer-btn {
padding: 14px 22px;
font-size: 14px;
}
.homenest__website-design__section15--head .item .img-wrap {
padding: 2% 0.5% 2% 4%;
margin-top:50px;
}
.homenest__website-design__section15--btn-wrap,
.homenest__website-design__section15--btn-wrap-footer {
justify-content: center;
}
.homenest__website-design__section15--head .item .img-wrap>img:nth-of-type(3) {
position: absolute;
z-index: 3;
top: -15%;
left: 1.5%;
width: 26%;
max-width: 159px;
}
}
/* Extra Small Mobile (≤375px) */
@media screen and (max-width: 375px) {
.homenest__website-design__section15-wrapper {
padding: 30px 15px;
}
.homenest__website-design__section15--head .item .content-wrap .section_title {
font-size: 24px;
}
.homenest__website-design__section15--content-right .section_title {
font-size: 28px;
}
.homenest__website-design__section15--content-left .item-1,
.homenest__website-design__section15--content-left .item-2,
.homenest__website-design__section15--content-left .item-3,
.homenest__website-design__section15--content-left .item-4 {
padding: 12px;
}
.homenest__website-design__section15--content-left .item-4 .item-title {
font-size: 18px;
line-height: 24px;
}
.homenest__website-design__section15--content-right .item-wrap .list .list-item .item-title {
font-size: 16px;
}
.homenest__website-design__section15--btn,
.homenest__website-design__section15--footer-btn {
padding: 12px 20px;
font-size: 13px;
}
}
/****************************
*** CSS POPULAR QUESTION ***
***************************/
.homenest__web-design__popular-question {
background: url("https://h3.homenest.tech/wp-content/uploads/2025/05/bg-faq-6.webp") center / cover no-repeat;
margin-top: 80px;
}
.homenest__web-design__popular-question .container__about-us {
width: 1200px;
margin: 0 auto;
/* background-color: white; */
border-radius: 10px;
padding: 70px 40px;
/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); */
}
.homenest__web-design__popular-question .header {
text-align: center;
margin-bottom: 40px;
}
.homenest__web-design__popular-question .popular-questions,
.homenest__why-choose-us .header {
color: #9333ea;
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.homenest__web-design__popular-question .popular-questions::before,
.homenest__web-design__popular-question .popular-questions::after,
.homenest__why-choose-us .header::before,
.homenest__why-choose-us .header::after {
content: "•";
font-size: 20px;
}
.homenest__web-design__popular-question h1 {
font-size: 48px;
color: #111;
margin-bottom: 30px;
}
.homenest__web-design__popular-question .divider {
height: 1px;
background-color: #bfbfbf;
margin: 20px 0;
}
.homenest__web-design__popular-question .faq-item {
margin-bottom: 20px;
}
.homenest__web-design__popular-question .question-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.homenest__web-design__popular-question .question-number {
font-size: 30px;
font-weight: 500;
color: #1A85F8;
margin-right: 20px;
width: 50px;
}
.homenest__web-design__popular-question .question-label {
font-size: 16px;
color: #1A85F8;
text-transform: uppercase;
}
.homenest__web-design__popular-question .question {
font-size: 24px;
font-weight: 600;
color: #111;
margin-bottom: 20px;
margin-left: 70px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.homenest__web-design__popular-question .answer {
font-size: 18px;
line-height: 1.6;
color: #555;
padding-left: 70px;
max-height: 500px;
/* Large enough to accommodate content */
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
opacity: 1;
transition: max-height 0.4s ease-out, opacity 0.4s ease-out 0.1s, padding 0.4s ease-out;
}
.homenest__web-design__popular-question .answer.hidden {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
.homenest__web-design__popular-question .button-container {
display: flex;
justify-content: flex-end;
padding: 16px;
/* Thêm padding để nút không sát mép */
}
.homenest__web-design__popular-question .toggle-button {
width: 40px;
height: 40px;
border-radius: 8px;
background-color: #dee0e2;
border: 1px solid #ccc;
/* Thêm viền nhẹ để tăng độ nổi bật */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
/* Giảm kích thước dấu + để cân đối hơn */
font-weight: bold;
/* Làm dấu + đậm hơn */
color: #333;
/* Tăng độ tương phản */
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
line-height: 1;
/* Đảm bảo căn giữa theo chiều dọc */
font-family: Arial, sans-serif;
/* Font đồng nhất */
}
.homenest__web-design__popular-question .toggle-button.minus {
background-color: #1A85F8;
color: white;
}
.homenest__web-design__popular-question__faq-title {
font-weight: 600;
font-size: 55px;
position: relative;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-image: linear-gradient(90deg, rgb(5, 5, 7) 0%, rgb(23, 26, 108) 25%, rgb(55, 75, 255) 50%, rgb(111, 10, 173) 65%, rgb(4, 8, 13) 80%, rgb(13, 13, 18) 100%);
animation: 5s ease 0s infinite normal none running text-bg-animate;
}
/* Dưới 576px: Mobile nhỏ */
@media (max-width: 575.98px) {
.homenest__web-design__popular-question__faq-title {
font-size: 35px;
}
.homenest__web-design__popular-question .answer {
font-size: 16px;
}
.homenest__web-design__popular-question .question {
font-size: 16px;
}
}
/* 576px – 767.98px: Mobile lớn */
@media (min-width: 576px) and (max-width: 767.98px) {}
/* 768px – 991.98px: Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {}
/* 992px – 1199.98px: Desktop nhỏ */
@media (min-width: 992px) and (max-width: 1199.98px) {}
/* 1200px trở lên: Desktop lớn */
@media (min-width: 1200px) {}
/* Bảng giá thiết kế website */
.homenest__professional_website_hn-pricing-section {
background-color: #ffffff;
text-align: left;
background: url(http://h2.homenest.tech/wp-content/uploads/2025/06/round-bg.webp) left -300px top 100px / contain no-repeat;
}