/*****

-- Project was created in:
---- 2020 year
-- Project name:
---- Portfolio Naumov Dmitri

*****/

/***======================= QUICK-SEARCH =======================***/

/***===========================================================***/

/**********************************************
- 0.FONTS
-----
-- 0.1.font-family: 'DrukWideBold';
-- 0.2.font-family: 'DrukWideMedium';
-- 0.3.font-family: 'Montserrat-Regular';

--------------------------------
- 1.GENERAL STYLE
-----
-- 1.1.general
-- 1.2.general
-- 1.3.general
-- 1.4.general

--------------------------------
- 2.POPUP-SETTINGS
------
-- 2.0.preloader
-- 2.1.nav-popup
-- 2.2.qr-popup
-- 2.3.popup-work
-- 2.4.serv-popup
-- 2.5.form-popup

--------------------------------
- 3.PAGE-SETTINGS
------
-- 3.1.nav
-- 3.2.header
-- 3.3.section-work
-- 3.4.section-about
-- 3.5.section-secrvices
-- 3.6.section-contact
-- 3.7.footer

--------------------------------
4.MEDIA-SETTINGS
-----
-- 4.0.media(min-width:1400px)
-- 4.1.media(max-width:1140px)
-- 4.2.media(max-width:1055px)
-- 4.3.media(max-width:900px)
-- 4.4.media(max-width:800px)
-- 4.5.media(max-width:700px)
-- 4.6.media(max-width:600px)
-- 4.7.media(max-width:500px)
-- 4.8.media(max-width:400px)
-- 4.9.media(max-width:350px)

--------------------------------

**********************************************/

/***======================= 1.GENERAL-STYLE =======================***/

/***==============================================================***/

/* 1.1.general *************************/

/**************************************/

:root {
    --font-druk-wide-bold: 'DrukWideBold', sans-serif;
    --font-druk-wide-medium: 'DrukWideMedium', sans-serif;
    --font-montserrat: 'Montserrat-Regular', sans-serif;
    --color-font-grey: #5c5c5c;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #fff;
    cursor: crosshair;
}

html.active,
body.active {
    overflow: hidden
}

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/*** data-aos plagin ***/

[data-aos="anim_title"] {
    opacity: 0;
    transform: translateY(-100%);
}

[data-aos="anim_title"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="anim_work"] {
    opacity: 0;
    transform: translateX(100%);
}

[data-aos="anim_work"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

html.active,
body.active {
    overflow: hidden;
}

body {
    position: relative;
    font-family: var(--font-druk-wide-bold);
}

body:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(../img/noise.png);
    content: "";
    height: 300%;
    left: -50%;
    opacity: .26;
    position: fixed;
    top: -100%;
    width: 300%;
    pointer-events: none;
    z-index: 9999;
}

@keyframes grain {
    0%,
    to {
        transform: translate(0)
    }
    10% {
        transform: translate(-5%, -10%)
    }
    20% {
        transform: translate(-15%, 5%)
    }
    30% {
        transform: translate(7%, -25%)
    }
    40% {
        transform: translate(-5%, 25%)
    }
    50% {
        transform: translate(-15%, 10%)
    }
    60% {
        transform: translate(15%)
    }
    70% {
        transform: translateY(15%)
    }
    80% {
        transform: translate(3%, 35%)
    }
    90% {
        transform: translate(-10%, 10%)
    }
}

/*** cursor-hover ***/

.cursor {
    display: none;
    mix-blend-mode: difference;
    z-index: 999;
}

@media (any-pointer: fine) {
    .cursor {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        pointer-events: none;
        opacity: 0;
    }
    .cursor__inner {
        fill: none;
        stroke: rgb(201, 201, 201);
        stroke-width: 1px;
    }
}

/* 1.2.general *************************/

/**************************************/

.flex {
    display: flex;
}

.flex__wrapp {
    flex-wrap: wrap;
}

._bg-color_general {
    background-color: #0c0c0c;
}

._text-align_right {
    text-align: right;
}

._padd_top-bott60 {
    padding: 60px 0;
}

._padd_top-bott80 {
    padding: 80px 0;
}

._padd_left105 {
    padding-left: 105px;
}

._padd_right105 {
    padding-right: 105px;
}

._gradient {
    background: rgb(191, 64, 191);
    background: -moz-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: -webkit-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b00ae", endColorstr="#5d07d3", GradientType=1);
}

._link {
    position: relative;
    text-decoration: none;
}

._link:before {
    position: absolute;
    content: '';
    width: 0;
    height: 1px;
    bottom: -3px;
    right: 0;
    pointer-events: none;
    background: rgb(191, 64, 191);
    background: -moz-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214)100%);
    background: -webkit-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b00ae", endColorstr="#5d07d3", GradientType=1);
    transition: .8s cubic-bezier(.9, 0, .1, 1);
    -webkit-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -moz-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -ms-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -o-transition: .8s cubic-bezier(.9, 0, .1, 1);
    z-index: 2;
}

._link:hover::before {
    width: 100%;
    left: 0;
}

/* 1.3.general *************************/

/**************************************/

.wrapp {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 1;
}

.wrapp-content {
    width: 100%;
    height: auto;
    padding-left: 60px;
}

.content {
    max-width: 1140px;
    width: 100%;
    height: auto;
    padding-right: 60px;
    margin-left: auto;
}

.bg_anim-gsap {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: #1f1f1f; */
    background: #0a0a0a;
    z-index: 1;
}

/*** title and split plagin ***/

.title {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 18px;
    margin-bottom: 110px;
    border-bottom: 2px solid #141414;
}

.title .title__num {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 42px;
    -webkit-text-stroke: 1px white; /* Viền chữ màu đen */
    -webkit-text-fill-color: black;  /* Bên trong chữ màu trắng */
    font-style: italic;
}

.title h2 {
    margin: 0;
    font-size: 90px;
    text-align: right;
    line-height: .9;
    overflow: hidden;
}

.title h2 .word {
    display: inline-block;
}

.title h2 .char:hover {
    opacity: .3;
}

.title__h2-span {
    display: inline-block;
}

nav,
header,
section,
footer {
    position: relative;
    z-index: 3;
}

a {
    color: #fff
}

/* 1.4.general *************************/

/**************************************/

.up {
    position: fixed;
    display: none;
    padding-right: 20px;
    right: 60px;
    bottom: 120px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 4;
}

.up span {
    font-size: 16px;
}

.up img {
    position: absolute;
    display: block;
    width: auto;
    height: 15px;
    right: 0;
    top: -5px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

/***======================= 2.POPUP-SETTINGS =======================***/

/***===============================================================***/

/* 2.1.nav-popup *******************/

/**********************************/

/*general*/

/* hover-reveal */

.menu {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
}

.hover-reveal {
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 280px;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform, filter;
}

.hover-reveal__inner {
    overflow: hidden;
    transform-origin: 30% 50%;
}

.hover-reveal__inner,
.hover-reveal__img {
    width: 100%;
    height: 100%;
    position: relative;
}

.hover-reveal__img {
    transform-origin: 70% 50%;
}

.hover-reveal__img {
    background-size: cover;
    background-position: 50% 50%;
}

/* scroll */

/*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */

/* html.has-scroll-smooth.active {
	overflow: hidden;
}

.has-scroll-smooth.active body {
	overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
	min-height: 100vh;
} */

/*
.c-scrollbar {
	position: absolute;
	right: 0;
	top: 0;
	width: 11px;
	height: 100vh;
	transform-origin: center right;
	transition: transform 0.3s, opacity 0.3s;
	opacity: 0;
}
.c-scrollbar:hover {
	transform: scaleX(1.45);
}
.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
	opacity: 1;
}

.c-scrollbar_thumb {
	position: absolute;
	top: 0;
	right: 0;
	background-color: black;
	opacity: 0.5;
	width: 7px;
	border-radius: 10px;
	margin: 2px;
	cursor: -webkit-grab;
	cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
	cursor: -webkit-grabbing;
	cursor: grabbing;
} */

/*other*/

.nav__popup {
    position: fixed;
    width: 100%;
    height: 100%;
    /* padding: 110px 150px 60px 0; */
    top: 0;
    left: 0;
    background: #1f1f1f;
    transform: translateX(-100%);
    z-index: 9;
}

.nav__popup-anim-bg {
    transform: translateX(-100%);
}

.nav__popup-wrapp {
    position: relative;
    /* display: flex;
	align-items: center; */
    width: 100%;
    height: 100%;
    padding: 160px 150px 60px 0;
    overflow: auto;
    z-index: 2;
}

.nav__popup-menu {
    width: 100%;
    height: auto;
    /* padding: 160px 150px 60px 0; */
    /* overflow: auto; */
}

.nav__popup-item {
    margin-bottom: 40px;
    list-style: none;
    text-align: right;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.nav__popup-link {
    display: block;
    position: relative;
    padding-right: 70px;
    font-size: 64px;
    text-decoration: none;
    text-transform: uppercase;
}

.nav__popup-name {
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    mix-blend-mode: difference;
    z-index: 2;
}

.nav__popup-link:hover .nav__popup-name {
    color: #fff;
}

.nav__popup-link:hover {
    color: #0a0a0a;
    -webkit-text-stroke: transparent;
}

.nav__popup-link:after {
    position: absolute;
    content: '';
    width: 50px;
    height: 2px;
    top: 50%;
    right: 0;
    opacity: 0;
    background: #0a0a0a;
    background: #fff;
    transform: translate(-10px, 50%);
    -webkit-transform: translate(-10px, 50%);
    -moz-transform: translate(-10px, 50%);
    -ms-transform: translate(-10px, 50%);
    -o-transform: translate(-10px, 50%);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    z-index: 2;
}

.nav__popup-link:hover::after {
    opacity: 1;
    transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -o-transform: translate(0, 50%);
}

.nav__popup-num {
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    font-size: 30px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-style: italic;
    z-index: 2;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transform: translate(-5px, -50%);
    -webkit-transform: translate(-5px, -50%);
    -moz-transform: translate(-5px, -50%);
    -ms-transform: translate(-5px, -50%);
    -o-transform: translate(-5px, -50%);
}

.nav__popup-link:hover .nav__popup-num {
    opacity: 1;
    color: #0a0a0a;
    color: #fff;
    transform: translate(5px, -50%);
    -webkit-transform: translate(5px, -50%);
    -moz-transform: translate(5px, -50%);
    -ms-transform: translate(5px, -50%);
    -o-transform: translate(5px, -50%);
}

/* 2.2.qr-popup *******************/

/*********************************/

/* .qr__popup{
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	background: #0a0a0a;
	background: #1f1f1f;
	transition: all .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
	transform: translateY(-60%);
	-webkit-transform: translateY(-60%);
	-moz-transform: translateY(-60%);
	-ms-transform: translateY(-60%);
	-o-transform: translateY(-60%);
	z-index: 0;
} */

.qr__popup {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #1f1f1f;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    z-index: 10;
}

.qr__popup-wrapp {
    position: relative;
    z-index: 2;
}

.qr__popup-anim-bg {
    transform: translateY(-100%);
}

/* .qr__popup.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	z-index: 10;
} */

.qr__popup h2 {
    width: 100%;
    text-align: center;
    font-size: 50px;
    color: transparent;
    opacity: 0;
    transform: translateY(-20%);
    -webkit-text-stroke: 1px #fff;
}

.qr__img {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(-20%);
}

.qr__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2.3.popup-work *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
    
}

.popup-work.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work::before, 
.popup-work::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work::before {
    background-image: repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/mountains-8672214.jpg);
    transform: scale(1.2);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work::after {
    background-image: url('../img/Background/after.png');
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close,
.popup-work__mobile-info{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info{
	display: none;
	left: 20px;
}
.popup-work__mobile-info img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading.active p{
	letter-spacing: 25px;
}

.popup-work__wrapp{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item:nth-child(2){
	padding: 60px;
}
.popup-work__item:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item.active:nth-child(1),
.popup-work__item.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img{
	overflow: hidden;
}
.popup-work__img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item .popup-work__desc{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title{
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 60%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}
.img {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    border-radius: 15px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}
.popup-work__desc p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc p:last-child{
	padding-bottom: 0;
}
.work_site a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site a:hover{
	color: rgb(218, 218, 218)
}
/********THE END************/

.text-container {
    font-family:Arial, Helvetica, sans-serif;
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 18px;
}

.poem {
    justify-content: center;
    margin-top: -50px;
    margin-left: 400px;
    text-align: center;
    line-height: 1.5;
    white-space: pre-line;
    padding: 20px;
    border-radius: 15px;
    max-width: 600px;
}
.text-box {
    text-align:initial; /* Căn giữa nội dung chữ */
    max-height: 720px; /* Chiều cao ban đầu */
    overflow: hidden;
    line-height: 1.5;
    transition: max-height 0.5s ease-in-out;
    background: rgba(0, 0, 0, 0.603);
    padding: 10px;
    border-radius: 10px;
    position: relative;
}


/* 2.3.popup-work1 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work1 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work1.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work1::before, 
.popup-work1::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work1::before {
    background-image:repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/island-8672220.jpg); 
    transform: scale(1.2);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work1::after {
    background-image: url('../img/Background/after.png');
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work1.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work1.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close1,
.popup-work__mobile-info1{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info1{
	display: none;
	left: 20px;
}
.popup-work__mobile-info1 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading1{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.work__link .popup-work__desc1 {
    display: none;
}

.popup-work__loading1 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading1.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp1{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item1{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item1:nth-child(2){
	padding: 60px;
}
.popup-work__item1:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item1:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item1.active:nth-child(1),
.popup-work__item1.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img1{
	overflow: hidden;
}
.popup-work__img1 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item1 .popup-work__desc1{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title1{
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title1 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc1 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc1 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc1 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc1 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}
.img1 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img1 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    border-radius: 15px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img1:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img1:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}
.popup-work__desc1 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc1 p:last-child{
	padding-bottom: 0;
}
.work_site1 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site1 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work2 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work2 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work2.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work2::before, 
.popup-work2::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work2::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/alessandro-paviolo-art-environment-mentorship-aztec-1920-.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work2::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work2.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work2.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close2,
.popup-work__mobile-info2{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info2{
	display: none;
	left: 20px;
}
.popup-work__mobile-info2 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading2{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading2 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading2.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp2{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item2{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item2:nth-child(2){
	padding: 60px;
}
.popup-work__item2:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item2:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item2.active:nth-child(1),
.popup-work__item2.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img2{
	overflow: hidden;
}
.popup-work__img2 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item2 .popup-work__desc2{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title2{
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title2 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc2 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc2 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc2 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc2 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}
.img2 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img2 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    border-radius: 15px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img2:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}
.work__link .popup-work__desc2 {
    display: none;
}
.img2:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}
.popup-work__desc2 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc2 p:last-child{
	padding-bottom: 0;
}
.work_site2 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site2 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */



/* 2.3.popup-work3 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work3 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work3.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work3::before, 
.popup-work3::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work3::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/anastasia-kirillova-screen7.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work3::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work3.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work3.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close3,
.popup-work__mobile-info3{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info3{
	display: none;
	left: 20px;
}
.popup-work__mobile-info3 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading3{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading3 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading3.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp3{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item3{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item3:nth-child(2){
	padding: 60px;
}
.popup-work__item3:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item3:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item3.active:nth-child(1),
.popup-work__item3.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img3{
	overflow: hidden;
}
.popup-work__img3 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item3 .popup-work__desc3{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title3{
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title3 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc3 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc3 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc3 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc3 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc3 {
    display: none;
}

.img3 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img3 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    border-radius: 15px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img3:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img3:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc3 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc3 p:last-child{
	padding-bottom: 0;
}
.work_site3 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site3 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work5 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work5 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work5.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work5::before, 
.popup-work5::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work5::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/ast-ralf-ast-ralf-0730.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work5::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work5.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work5.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close5,
.popup-work__mobile-info5{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info5{
	display: none;
	left: 20px;
}
.popup-work__mobile-info5 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading5{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading5 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading5.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp5{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item5{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item5:nth-child(2){
	padding: 60px;
}
.popup-work__item5:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item5:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item5.active:nth-child(1),
.popup-work__item5.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img5{
	overflow: hidden;
}
.popup-work__img5 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item3 .popup-work__desc5{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title5{
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title5 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc5 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc5 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc5 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc5 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc5 {
    display: none;
}

.img5 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img5 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img5::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    border-radius: 15px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img5:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img5:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc5 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc5 p:last-child{
	padding-bottom: 0;
}
.work_site5 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site5 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work6 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work6 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work6.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work6::before, 
.popup-work6::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work6::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/xuesong-liu-liuxuesong0108-the-tk900-a-highly-detailed-canine-terminator-ro-6aaa16.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work6::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work6.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work6.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close6,
.popup-work__mobile-info6{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info6{
	display: none;
	left: 20px;
}
.popup-work__mobile-info6 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading6{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading6 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading6.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp6{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item6{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item6:nth-child(2){
	padding: 60px;
}
.popup-work__item6:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item6:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item6.active:nth-child(1),
.popup-work__item6.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img6{
	overflow: hidden;
}
.popup-work__img6 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item6 .popup-work__desc6{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title6 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title6 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc6 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc6 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc6 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc6 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc6 {
    display: none;
}

.img6 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img6 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img6::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    border-radius: 15px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img6:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img6:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc6 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc6 p:last-child{
	padding-bottom: 0;
}
.work_site6 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site6 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work7 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work7 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work7.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work7::before, 
.popup-work7::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work7::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/file.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work7::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work7.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work7.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close7,
.popup-work__mobile-info7{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info7{
	display: none;
	left: 20px;
}
.popup-work__mobile-info7 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading7{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading7 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading7.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp7{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item7{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item7:nth-child(2){
	padding: 60px;
}
.popup-work__item7:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item7:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item7.active:nth-child(1),
.popup-work__item7.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img7{
	overflow: hidden;
}
.popup-work__img7 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item7 .popup-work__desc7{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title7 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title7 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc7 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc7 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc7 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc7 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc7 {
    display: none;
}

.img7 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img7 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img7::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 78%;
    margin-left: 85px;
    margin-top: -25px;
    align-items: center;
    justify-content: center;
    height: 110%;
    background-color: rgba(0, 0, 0, 0.747);
    border-radius: 1000px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}


.img7:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img7:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}


.img77 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img77 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img77::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 68%;
    margin-left: 145px;
    margin-top: -25px;
    align-items: center;
    justify-content: center;
    height: 110%;
    background-color: rgba(0, 0, 0, 0.747);
    border-radius: 1000px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}


.img77:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img77:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.img777 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img777 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img777::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-left: 10px;
    margin-top: 30px;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 1000px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}


.img777:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img777:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc7 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc7 p:last-child{
	padding-bottom: 0;
}
.work_site7 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site7 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work8 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work8 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work8.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work8::before, 
.popup-work8::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work8::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/francis-tneh-pitch-pack-cyberpunk-downtown-final.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work8::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work8.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work8.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close8,
.popup-work__mobile-info8{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info8{
	display: none;
	left: 20px;
}
.popup-work__mobile-info8 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading8{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading8 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading8.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp8{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item8{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item8:nth-child(2){
	padding: 60px;
}
.popup-work__item8:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item8:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item8.active:nth-child(1),
.popup-work__item8.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img8{
	overflow: hidden;
}
.popup-work__img8 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item8 .popup-work__desc8{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title8 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title8 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc8 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc8 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc8 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc8 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc8 {
    display: none;
}

.img8 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img8 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img8::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 78%;
    margin-left: 85px;
    margin-top: -25px;
    align-items: center;
    justify-content: center;
    height: 110%;
    background-color: rgba(0, 0, 0, 0.747);
    border-radius: 1000px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img8:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img8:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc8 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc8 p:last-child{
	padding-bottom: 0;
}
.work_site8 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site8 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work9 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work9 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work9.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work9::before, 
.popup-work9::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work9::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/3d-environment-design-x-post.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work9::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work9.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work9.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close9,
.popup-work__mobile-info9{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info9{
	display: none;
	left: 20px;
}
.popup-work__mobile-info9 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading9{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading9 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading9.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp9{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item9{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item9:nth-child(2){
	padding: 60px;
}
.popup-work__item9:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item9:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item9.active:nth-child(1),
.popup-work__item9.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img9{
	overflow: hidden;
}
.popup-work__img9 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item9 .popup-work__desc9{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title9 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title9 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc9 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc9 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc9 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc9 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc9 {
    display: none;
}

.img9 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img9 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img9::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.747);
    border-radius: 10px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img9:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img9:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc9 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc9 p:last-child{
	padding-bottom: 0;
}
.work_site9 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site9 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work10 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work10 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work10.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work10::before, 
.popup-work10::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work10::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/856AEB17-C8DE-4034-AF70-903894AADEB0.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work10::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work10.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work10.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close10,
.popup-work__mobile-info10{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info10{
	display: none;
	left: 20px;
}
.popup-work__mobile-info10 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading10{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading10 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading10.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp10{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item10{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item10:nth-child(2){
	padding: 60px;
}
.popup-work__item10:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item10:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item10.active:nth-child(1),
.popup-work__item10.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img10{
	overflow: hidden;
}
.popup-work__img10 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item10 .popup-work__desc10{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title10 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title10 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc10 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc10 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc10 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc10 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc10 {
    display: none;
}

.img10 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img10 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img10::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 78%;
    margin-left: 85px;
    margin-top: -25px;
    align-items: center;
    justify-content: center;
    height: 110%;
    background-color: rgba(0, 0, 0, 0.747);
    border-radius: 1000px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img10:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img10:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc10 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc10 p:last-child{
	padding-bottom: 0;
}
.work_site10 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site10 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work11 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work11 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work11.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work11::before, 
.popup-work11::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work11::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/Cam1_1-3.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work11::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work11.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work11.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close11,
.popup-work__mobile-info11{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info11{
	display: none;
	left: 20px;
}
.popup-work__mobile-info11 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading11{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading11 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading11.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp11{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item11{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item11:nth-child(2){
	padding: 60px;
}
.popup-work__item11:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item11:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item11.active:nth-child(1),
.popup-work__item11.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img11{
	overflow: hidden;
}
.popup-work__img11 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item11 .popup-work__desc11{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title11 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title11 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc11 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc11 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc11 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc11 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc11 {
    display: none;
}

.img11 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img11 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img11::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img11:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img11:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc11 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc11 p:last-child{
	padding-bottom: 0;
}
.work_site11 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site11 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work12 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work12 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work12.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work12::before, 
.popup-work12::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work12::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/rashieq-sasman-snow-concept.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work12::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work12.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work12.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close12,
.popup-work__mobile-info12{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info12{
	display: none;
	left: 20px;
}
.popup-work__mobile-info12 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading12{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading12 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading12.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp12{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item12{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item12:nth-child(2){
	padding: 60px;
}
.popup-work__item12:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item12:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item12.active:nth-child(1),
.popup-work__item12.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img12{
	overflow: hidden;
}
.popup-work__img12 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item12 .popup-work__desc12{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title12 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title12 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc12 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc12 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc12 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc12 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc12 {
    display: none;
}

.img12 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img12 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img12::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img12:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img12:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc12 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc12 p:last-child{
	padding-bottom: 0;
}
.work_site12 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site12 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work13 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work13 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work13.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work13::before, 
.popup-work13::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work13::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/widen_2440x0.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work13::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work13.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work13.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close13,
.popup-work__mobile-info13{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info13{
	display: none;
	left: 20px;
}
.popup-work__mobile-info13 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading13{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading13 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading13.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp13{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item13{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item13:nth-child(2){
	padding: 60px;
}
.popup-work__item13:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item13:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item13.active:nth-child(1),
.popup-work__item13.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img13{
	overflow: hidden;
}
.popup-work__img13 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item13 .popup-work__desc13{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title13 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title13 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc13 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc13 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc13 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc13 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc13 {
    display: none;
}

.img13 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img13 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img13::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img13:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img13:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc13 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc13 p:last-child{
	padding-bottom: 0;
}
.work_site13 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site13 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */



/* 2.3.popup-work14 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work14 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work14.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work14::before, 
.popup-work14::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work14::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/43or60pfm8551.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work14::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work14.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work14.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close14,
.popup-work__mobile-info14{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info14{
	display: none;
	left: 20px;
}
.popup-work__mobile-info14 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading14{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading14 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading14.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp14{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item14{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item14:nth-child(2){
	padding: 60px;
}
.popup-work__item14:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item14:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item14.active:nth-child(1),
.popup-work__item14.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img14{
	overflow: hidden;
}
.popup-work__img14 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item14 .popup-work__desc14{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title14 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title14 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc14 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc14 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc14 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc14 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc14 {
    display: none;
}

.img14 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img14 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img14::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img14:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img14:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc14 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc14 p:last-child{
	padding-bottom: 0;
}
.work_site14 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site14 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */



/* 2.3.popup-work15 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work15 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work15.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work15::before, 
.popup-work15::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work15::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/bg.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work15::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work15.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work15.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close15,
.popup-work__mobile-info15{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info15{
	display: none;
	left: 20px;
}
.popup-work__mobile-info15 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading15{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading15 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading15.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp15{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item15{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item15:nth-child(2){
	padding: 60px;
}
.popup-work__item15:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item15:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item15.active:nth-child(1),
.popup-work__item15.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img15{
	overflow: hidden;
}
.popup-work__img15 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item15 .popup-work__desc15{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title15 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title15 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc15 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc15 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc15 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc15 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc15 {
    display: none;
}

.img15 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img15 img {
    display: block;
    height: auto;
    border-radius: 15px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img15::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img15:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img15:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc15 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc15 p:last-child{
	padding-bottom: 0;
}
.work_site15 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site15 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.3.popup-work16 *******************/
/***********************************/
/* ================= POPUP WORK ================= */
.popup-work16 {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(50%);
    transition: .350s cubic-bezier(0, 0, 0, 0.99);
    z-index: 10;
}

.popup-work16.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ================= BACKGROUND ANIMATION ================= */
.popup-work16::before, 
.popup-work16::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Hình nền chính */
.popup-work16::before {
    background-image:  repeating-linear-gradient(
        to right, transparent 0 150px, #0001 150px 151px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 150px, #0001 150px 151px
    ),
    linear-gradient(to right, #2420207c, #2420207c),
    url(../img/Background/PQ_alien_planet_concept_exploration_B_2400px.jpg);
    transform: scale(1.5);
    opacity: 0;
}

/* Hình nền hiệu ứng */
.popup-work16::after {
    transform: scale(2.5);
    opacity: 0;
}

/* Khi popup mở -> chạy hiệu ứng */
.popup-work16.active::before {
    animation: bgZoomIn 4s ease-in-out forwards;
}

.popup-work16.active::after {
    animation: bgZoomOut 4s ease-in-out forwards;
}

/* ================= KEYFRAMES ================= */
@keyframes bgZoomIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgZoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 1;
    }
}
.popup-work__close16,
.popup-work__mobile-info16{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	transition: .3s;
	z-index: 3 !important;
}
.popup-work__mobile-info16{
	display: none;
	left: 20px;
}
.popup-work__mobile-info16 img{
	display: block;
	width: 100%;
	height: 100%;
}
.popup-work__loading16{
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup-work__loading16 p{
	font-size: 25px;
	color: #fff;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 1s;
}
.popup-work__loading16.active p{
	letter-spacing: 25px;
}
.popup-work__wrapp16{
	display: flex;
    overflow-y: auto; /* Cho phép cuộn */
	width: 100%;
	height: 100%;
}
.popup-work__item16{
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow-y: auto;
	transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-webkit-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-moz-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-ms-transition: .350s cubic-bezier(0, 0, 0, 0.99);
	-o-transition: .350s cubic-bezier(0, 0, 0, 0.99);
}
.popup-work__item16:nth-child(2){
	padding: 60px;
}
.popup-work__item16:nth-child(1){
	transform: translateY(-50%);
}
.popup-work__item16:nth-child(2){
	transform: translateY(50%);
}
.popup-work__item16.active:nth-child(1),
.popup-work__item16.active:nth-child(2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: .5s;
}
.popup-work__img16{
	overflow: hidden;
}
.popup-work__img16 img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__item16 .popup-work__desc16{
	display: none;
	width: 100%;
	height: auto;
}
.popup-work__title16 {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    text-align: center; /* Căn giữa nội dung chữ */
    
}
.popup-work__title16 h2{
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #fff;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 90%; /* Giới hạn độ dài của dòng chữ */
    word-wrap: break-word; /* Cho phép chữ xuống dòng khi quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt khác */
}

.popup-work__desc16 {
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
    text-align: center; /* Căn giữa nội dung chữ */
}

.popup-work__desc16 p{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc16 h2{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.popup-work__desc16 h3{
    padding-bottom: 20px;
	font-size: 1.3vw;
	line-height: 1.5;
	color: transparent;
    -webkit-text-stroke: 1px #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Giới hạn chiều rộng */
    width: 100%;
}

.work__link .popup-work__desc16 {
    display: none;
}

.img16 {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    display: inline-block; /* Giúp phần tử chỉ lớn đúng bằng kích thước ảnh */
}

.img16 img {
    display: block;
    height: auto;
    border-radius: 16px; /* Đảm bảo bo góc khớp với lớp phủ */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.img16::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px; /* Đảm bảo bo góc phù hợp */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Đặt phía dưới ảnh */
}

.img16:hover::before {
    opacity: 1; /* Khi hover, lớp phủ xuất hiện */
}

.img16:hover img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

.popup-work__desc16 p span{
	-webkit-text-stroke: 1px transparent;
    line-height: 1;
}
.popup-work__desc16 p:last-child{
	padding-bottom: 0;
}
.work_site16 a{
	position: relative;
	color: #fff;
	/* text-decoration: none; */
	transition: .3s;
}
.work_site16 a:hover{
	color: rgb(218, 218, 218)
}
/* THE END */


/* 2.4.serv-popup *******************/

/***********************************/

.serv__popup {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 90px 0;
    top: 0;
    left: 0;
    background: #1f1f1f;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    z-index: 10;
}

.serv__popup-anim-bg {
    transform: translateY(100%);
}

.close__popup {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 40px;
    right: 60px;
    cursor: crosshair;
    z-index: 3;
}

.close__popup span {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.close__popup:hover span:nth-child(1) {
    transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) rotate(-45deg);
}

.close__popup:hover span:nth-child(2) {
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
}

.close__popup span:nth-child(2) {
    transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) rotate(-45deg);
}

.serv__popup-wrapp {
    width: 100%;
    height: auto;
}

.serv__popup-wrapp h2 {
    margin-bottom: 30px;
    font-size: 40px;
}

.serv_title-anim {
    opacity: 0;
    transform: translateY(20%);
}

.serv__title {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.serv__name {
    position: relative;
}

.serv_line {
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    transition: .8s cubic-bezier(.9, 0, .1, 1);
    -webkit-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -moz-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -ms-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -o-transition: .8s cubic-bezier(.9, 0, .1, 1);
}

.serv_line.active {
    width: 40%;
    transition-delay: 1.2s;
}

.serv__popup-wrapp .form__message {
    height: 110px;
    padding-top: 24px;
}

.gsap_form-anim {
    opacity: 0;
    transform: translateY(10%);
}

/* 2.5.form-popup *******************/

/***********************************/

.form__popup {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background: #0a0a0a;
    transition: all .350s cubic-bezier(0, 0, 0, 0.99);
    -webkit-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
    -moz-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
    -o-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
    -ms-transition: all .350s cubic-bezier(0, 0, 0, 0.99);
    transform: translateY(-60%);
    -webkit-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    -o-transform: translateY(-60%);
    z-index: 10;
}

.form__popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

.form__success {
    font-size: 54px;
}

.form__success span {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}

/***======================= 3.PAGE-SETTINGS =======================***/

/***==============================================================***/

/* 3.1.nav *************************/

/**********************************/

.nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 60px;
    padding-bottom: 0;
    top: 0;
    left: 0;
    z-index: 10;
}

.nav:before,
.nav:after {
    display: none;
}

.logo {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
}

.nav__menu,
.nav__menu-close {
    position: relative;
    width: 50px;
    height: 20px;
    cursor: crosshair;
    overflow: hidden;
}

.nav__menu-close {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 60px;
    right: 60px;
}

.nav__menu span,
.nav__menu-close span {
    position: absolute;
    height: 1px;
    right: 0;
    background: #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.nav__menu span:before,
.nav__menu-close span:before {
    position: absolute;
    content: '';
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    background: rgb(191, 64, 191);
    background: -moz-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: -webkit-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b00ae", endColorstr="#5d07d3", GradientType=1);
    transition: .8s cubic-bezier(.9, 0, .1, 1);
    -webkit-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -moz-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -ms-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -o-transition: .8s cubic-bezier(.9, 0, .1, 1);
}

.nav__menu:hover span:before,
.nav__menu-close:hover span:before {
    width: 100%;
}

.nav__menu:hover span:nth-child(2):before {
    transition-delay: .1s;
}

.nav__menu:hover span:nth-child(3):before {
    transition-delay: .2s;
}

.nav__menu span:nth-child(1) {
    width: 100%;
    top: 0;
}

.nav__menu span:nth-child(2) {
    width: 50%;
    top: 50%;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}

.nav__menu span:nth-child(3) {
    width: 70%;
    bottom: 1px;
}

.nav__menu-close span {
    width: 100%;
    right: 0;
    top: 50%;
}

.nav__menu-close span:nth-child(1) {
    transform: translateY(-100%) rotate(45deg);
    -webkit-transform: translateY(-100%) rotate(45deg);
    -moz-transform: translateY(-100%) rotate(45deg);
    -ms-transform: translateY(-100%) rotate(45deg);
    -o-transform: translateY(-100%) rotate(45deg);
}

.nav__menu-close span:nth-child(2) {
    transform: translateY(-100%) rotate(-45deg);
    -webkit-transform: translateY(-100%) rotate(-45deg);
    -moz-transform: translateY(-100%) rotate(-45deg);
    -ms-transform: translateY(-100%) rotate(-45deg);
    -o-transform: translateY(-100%) rotate(-45deg);
}

/* 3.2.header *************************/

/*************************************/

.header {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 650px;
    height: 100vh;
    padding: 40px 0;
    overflow: hidden;
}

#background {
    display: flex;
    align-items: center;
    width: 96%;
    min-height: 650px;
    height: 93vh;
    margin-left: 35px;
    overflow: hidden;
	border-radius: 20px;
}

#background1 {
    margin-top: 80px;
    margin-left: -140px;
    margin-bottom: -20px;
    align-items: center;
    width: 110%;
    height: 30vh;
	overflow: hidden;
	border-radius: 20px;
}

#background2 {
    align-items: center;
    align-content: center;
    margin-left: -140px;
    width: 110%;
    height: 100%;
    overflow: hidden;
	border-radius: 20px;
}


#backgroundQR {
    align-items: center;
    width: 100%;
    height: 100vh;
	overflow: hidden;
	border-radius: 20px;
    z-index: 11;
}

.header__wrapp {
    position: relative;
}

.fon {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    right: 18%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

@keyframes swing {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(15deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

.fon__wrapp {
    width: 150%;
    height: 150%;
    animation: swing 5s infinite ease-in-out;
}

.fon__wrapp img {
    display: block;
    width: 100%;
    height: 100%;
}



.fon__wrapp1 {
    margin-right: 10px;
    width: 180%;
    height: 180%;
    animation: swing 5s infinite ease-in-out;
}

.fon__wrapp1 img {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

.header__title {
    margin: 0;
    font-size: 50px;
    line-height: 0.9;
}

.header__title span {
    position: relative;
    z-index: 2;
}

.title__img {
    position: absolute;
    will-change: transform;
    transition: 0.2s ease-out;
    max-width: 180px;
    z-index: 1;
}

.title__img {
    top: 37%;
    left: 45%;
}

.header__title1 {
    margin: 0;
    font-size: 50px;
    line-height: 0.9;
}

.header__title .header__sp {
    display: block;
    overflow: hidden;
}

.header__title1 .header__sp {
    display: block;
    overflow: hidden;
}

.header__title .header__sp:nth-child(1) .header_blink,
.header__title .header__sp:nth-child(3) .header_blink {
    color: transparent;
    text-decoration: none;
    font-size: 130px;
    -webkit-text-stroke: 1px #fff;
}

.header__title1 .header__sp:nth-child(1) .header_blink,
.header__title1 .header__sp:nth-child(3) .header_blink {
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 1px #fff;
}

.header__title .header__sp .header_blink {
    display: inline-block;
}

.header__title1 .header__sp .header_blink {
    display: inline-block;
}

.header__title .header__sp .header_blink:hover {
    opacity: .3;
    transition: .03s;
}

.header__title1 .header__sp .header_blink:hover {
    opacity: .3;
    transition: .03s;
}

.header__blog-link {
    position: absolute;
    padding-right: 76px;
    top: 0;
    right: 0;
    font-size: 35px;
    line-height: .9;
    text-transform: uppercase;
    transform-origin: left top;
    transform: translateX(100%) rotate(90deg);
    -webkit-transform: translateX(100%) rotate(90deg);
    -moz-transform: translateX(100%) rotate(90deg);
    -ms-transform: translateX(100%) rotate(90deg);
    -o-transform: translateX(100%) rotate(90deg);
}

.link-arrow {
    position: absolute;
    width: auto;
    height: 26px;
    right: 0;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 2;
}

.header__social,
.header__qr {
    position: absolute;
    bottom: 60px;
}

.header__social {
    left: 60px;
    font-size: 0;
}

.header__qr {
    right: 60px;
    font-size: 16px;
    cursor: crosshair;
}

.header__social-item {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}

.header__social-item:last-child {
    margin-right: 0;
}

.header__social-link {
    position: relative;
    font-size: 16px;
    z-index: 2;
}

.header__scroll {
    position: absolute;
    width: 30px;
    height: auto;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    cursor: pointer;
    animation: scroll 5s infinite linear;
    -webkit-animation: scroll 5s infinite linear;
}

.header__scroll img {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes scroll {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
    100% {
        opacity: 1;
    }
}

/* 3.3.section-work *******************/

/*************************************/

.work__wrapp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 190px;
    padding-right: 60px;
    overflow: hidden;
}

.work__link-wrapp {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.work__link {
    position: relative;
    max-width: 450px;
    width: 100%;
    height: 500px;
    /* padding-left: 55px; */
    margin-bottom: 160px;
    overflow: hidden;
}

.work__anim {
    height: 100%;
    padding-left: 55px;
}

.work__link .popup-work__desc {
    display: none;
}

.work__link:nth-child(odd) {
    transform: translateY(-189px);
    -webkit-transform: translateY(-189px);
    -moz-transform: translateY(-189px);
    -ms-transform: translateY(-189px);
    -o-transform: translateY(-189px);
}

.work__num {
    position: absolute;
    top: 5px;
    left: -6px;
    font-size: 45px;
    font-style: italic;
    color: #141414;
    text-transform: uppercase;
    transform: rotate(-90deg);
    transform-origin: left top 0;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    -moz-transform: rotate(-90deg) translateX(-100%);
    -ms-transform: rotate(-90deg) translateX(-100%);
    -o-transform: rotate(-90deg) translateX(-100%);
    transition: color .8s;
}

.work__link-wrapp:hover~.work__num {
    color: #fff;
}

.work__link-elem {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.work__link-elem img {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hover-image, .hover-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out; /* Chuyển đổi chậm dần */
    border-radius: 15px;
}

/* Ẩn video ban đầu */
.hover-video {
    opacity: 0;
    pointer-events: none;
}

.work__link-elem:hover .hover-image{
    opacity: 0;
}
.work__link-elem:hover .hover-video {
    opacity: 1;
}


.work__link-elem1 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem1 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem1 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem2 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem2 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem2 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem3 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem3 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem3 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem4 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem4 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem4 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem5 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem5 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem5 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem6 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.work__link-elem6 img {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hover-image6, .hover-video6 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out; /* Chuyển đổi chậm dần */
    border-radius: 15px;
}

/* Ẩn video ban đầu */
.hover-video6 {
    opacity: 0;
    pointer-events: none;
}

.work__link-elem6:hover .hover-image6{
    opacity: 0;
}
.work__link-elem6:hover .hover-video6 {
    opacity: 1;
}


.work__link-elem7 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem7 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem7 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}


.work__link-elem8 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.work__link-elem8 img {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hover-image8, .hover-video8 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out; /* Chuyển đổi chậm dần */
    border-radius: 15px;
}

/* Ẩn video ban đầu */
.hover-video8 {
    opacity: 0;
    pointer-events: none;
}

.work__link-elem8:hover .hover-image8{
    opacity: 0;
}
.work__link-elem8:hover .hover-video8{
    opacity: 1;
}



.work__link-elem9 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem9 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem9 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem10 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.work__link-elem10 img {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hover-image10, .hover-video10 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out; /* Chuyển đổi chậm dần */
    border-radius: 15px;
}

/* Ẩn video ban đầu */
.hover-video10 {
    opacity: 0;
    pointer-events: none;
}

.work__link-elem10:hover .hover-image10{
    opacity: 0;
}
.work__link-elem10:hover .hover-video10 {
    opacity: 1;
}

.work__link-elem11 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem11 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem11 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem12 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.work__link-elem12 img {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hover-image12, .hover-video12 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out; /* Chuyển đổi chậm dần */
    border-radius: 15px;
}

/* Ẩn video ban đầu */
.hover-video12 {
    opacity: 0;
    pointer-events: none;
}

.work__link-elem12:hover .hover-image12{
    opacity: 0;
}
.work__link-elem12:hover .hover-video12 {
    opacity: 1;
}

.work__link-elem13 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem13 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem13 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem14 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.work__link-elem14 img {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hover-image14, .hover-video14 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out; /* Chuyển đổi chậm dần */
    border-radius: 15px;
}

/* Ẩn video ban đầu */
.hover-video14 {
    opacity: 0;
    pointer-events: none;
}

.work__link-elem14:hover .hover-image14{
    opacity: 0;
}
.work__link-elem14:hover .hover-video14{
    opacity: 1;
}


.work__link-elem15 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.work__link-elem15 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Ảnh thứ hai - Ban đầu bị ẩn dưới và mờ */
.work__link-elem15 img:nth-child(2) {
    transform: translateY(100%);
    opacity: 0;
}

.work__link-elem16 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.work__link-elem16 img {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hover-image16, .hover-video16 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out; /* Chuyển đổi chậm dần */
    border-radius: 15px;
}

/* Ẩn video ban đầu */
.hover-video16 {
    opacity: 0;
    pointer-events: none;
}

.work__link-elem16:hover .hover-image16{
    opacity: 0;
}
.work__link-elem16:hover .hover-video16{
    opacity: 1;
}



.work__name {
    position: absolute;
    pointer-events: none;
    bottom: 15px;
    left: 0;
    opacity: 0;
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 1px #fff;
    font-size: 33px;
    transform: translateX(55px);
    -webkit-transform: translateX(55px);
    -moz-transform: translateX(55px);
    -ms-transform: translateX(55px);
    -o-transform: translateX(55px);
    transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -moz-transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -ms-transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -o-transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -webkit-transition: .85s cubic-bezier(0, 0, 0, 0.99);
}

.work__link-wrapp:hover .work__name {
    opacity: 1;
    transform: translateX(15px);
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);
}

.work__logo {
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    left: 25px;
    opacity: 0;
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 1px #fff;
    font-size: 33px;
    transform: translateX(55px);
    -webkit-transform: translateX(55px);
    -moz-transform: translateX(55px);
    -ms-transform: translateX(55px);
    -o-transform: translateX(55px);
    transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -moz-transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -ms-transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -o-transition: .85s cubic-bezier(0, 0, 0, 0.99);
    -webkit-transition: .85s cubic-bezier(0, 0, 0, 0.99);
}

.move4{
    left: 10px;
}

.move{
    left: 85px;
}

.move1{
    left: 145px;
}

.move2{
    left: 205px;
}

.move3{
    left: 265px;
}

.move4{
    left: 10px;
}

.move5{
    bottom: 140px;
}

.move6{
    left: 85px;
    bottom: 140px;
}

.move7{
    left: 145px;
    bottom: 140px;
}

.move8{
    left: 10px;
    bottom: 140px;
}

.move9{

    bottom: 65px;
}

.move10{
    left: 85px;
    bottom: 65px;
}

.move11{
    left: 145px;
    bottom: 65px;
}

.move12{
    left: 205px;
    bottom: 65px;
}

.move13{
    left: 10px;
    bottom: 65px;
}


.work__link-wrapp:hover .work__logo {
    opacity: 1;
    transform: translateX(15px);
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);
}

.work__link-wrapp:hover .work__name {
    opacity: 1;
    transform: translateX(15px);
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);
}





.circular-text {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 1;
    top: 42%;
    right: -20%;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: .6s;
}

.circular_svg {
    font-size: 15.7px;
    letter-spacing: 10px;
    fill: rgb(197, 197, 197);
    transition: .6s;
}

.work__link-wrapp:hover .circular_svg {
    fill: #fff;
}

.work__view-all {
    display: block;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}

.work__view-all span {
    font-size: 30px;
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 1px #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.work__view-all span:nth-child(2) {
    color: #fff;
    -webkit-text-stroke: transparent;
}

.work__view-all:hover span:nth-child(2) {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.work__view-all:hover span:nth-child(1),
.work__view-all:hover span:nth-child(3) {
    color: #fff;
    -webkit-text-stroke: transparent;
}

/* 3.4.section-about ****************/

/***********************************/

.galaxyCanvas {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.about__wrapp {
    display: flex;
}

.about__img {
    position: relative;
    width: 42%;
    height: 450px;
    overflow: hidden;
}

.about__img img {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.about__txt {
    position: relative;
    width: 58%;
    height: auto;
    padding: 50px 0 0 50px;
}

.about__fon {
    position: absolute;
    font-size: 210px;
    top: -15px;
    right: 20px;
    color: #141414;
    font-style: italic;
    line-height: .9;
    text-transform: uppercase;
    z-index: 1;
}

.about__h3,
.about__descript {
    position: relative;
    z-index: 2;
}

.about__h3 {
    margin-bottom: 50px;
    font-family: var(--font-druk-wide-medium);
    font-size: 68px;
    line-height: .8;
    transform: translateX(-45%);
    -webkit-transform: translateX(-45%);
    -moz-transform: translateX(-45%);
    -ms-transform: translateX(-45%);
    -o-transform: translateX(-45%);
}

.about__descript {
    margin-bottom: 25px;
    /* font-family: 'Montserrat-Regular'; */
    font-family: var(--font-druk-wide-medium);
    color: var(--color-font-grey);
    font-size: 14px;
    /* line-height: 24px; */
    line-height: 1.7;
    letter-spacing: 0.5px;
}

.about__descript:last-child {
    margin-bottom: 0;
}

.about__title-h2 {
    margin-bottom: 80px;
    font-size: 90px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    text-align: right;
    transition: .3s;
}

.about__title-h2 .about__title-span {
    position: relative;
    display: block;
}

.about__title-span span {
    position: relative;
    display: inline-block;
    padding-left: 90px;
    line-height: .7;
    color: #fff;
    -webkit-text-stroke: transparent;
    z-index: 2;
    transition: .3s;
}

.about__title-h2:hover {
    color: #fff;
    -webkit-text-stroke: 1px transparent;
}

.about__title-h2:hover .about__title-span span {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.about__stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.about__stack-item {
    display: flex;
    justify-content: space-between;
    width: 42%;
    height: auto;
    padding-top: 60px;
    margin-bottom: 160px;
    border-top: 1px solid #fff;
}

.about__stack-item:nth-child(5),
.about__stack-item:nth-child(6) {
    margin-bottom: 0;
}

.about__stack-img {
    max-width: 100px;
    width: 100%;
    height: auto;
    margin-right: 30px;
}

.about__stack-img img {
    display: block;
    width: 100%;
    height: auto;
}

.about__stack-txt {
    max-width: 280px;
    width: 100%;
    height: auto;
}

.about__stack-title,
.about__stack-num {
    display: block;
    font-size: 20px;
}

.about__stack-title {
    padding: 10px 0;
}

.about__stack-num {
    color: #141414;
    font-style: italic;
}

.about__stack-descript {
    /* font-family: 'Montserrat-Regular'; */
    font-family: var(--font-druk-wide-medium);
    color: #5c5c5c;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    /* line-height: 21px; */
}

.steps__wrapp,
.steps__item {
    width: 100%;
    height: auto;
}

.steps__wrapp {
    border-top: 2px solid #141414;
}

.steps__item {
    position: relative;
    padding: 15px 0;
    cursor: crosshair;
}

.steps__item:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #141414;
    z-index: 1;
}

.steps__border {
    position: absolute;
    width: 0;
    height: 2px;
    right: 0;
    bottom: 0;
    z-index: 2;
    transition: .8s cubic-bezier(.9, 0, .1, 1);
    -webkit-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -moz-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -ms-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -o-transition: .8s cubic-bezier(.9, 0, .1, 1);
}

.steps__item:hover .steps__border {
    width: 100%;
    left: 0;
}

.steps__head {
    position: relative;
    width: 100%;
    padding-right: 25px;
}

.steps_open {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    cursor: pointer;
}

.steps_open:before,
.steps_open:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #fff;
    left: 0;
    top: 9px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.steps_open:after {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

.steps__head h3 {
    position: relative;
    padding-left: 100px;
    margin: 0;
    font-size: 35px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .3s;
}

.steps__head.active h3 {
    color: #fff;
}

.steps__num {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 15px;
    font-style: italic;
    -webkit-text-stroke: transparent;
}

.steps__head.active .steps_open::after {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}

.steps__descript {
    display: none;
    width: 100%;
    height: auto;
    padding-left: 100px;
}

.steps__item:first-child .steps__descript {
    display: block;
}

.steps__descript-wrapp {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.steps__descript-txt {
    width: 50%;
    height: auto;
}

.steps__descript-txt p {
    /* font-family: 'Montserrat-Regular'; */
    font-family: var(--font-druk-wide-medium);
    font-size: 15px;
    /* line-height: 24px; */
    line-height: 1.7;
    color: #5c5c5c;
    letter-spacing: 0.5px;
}

.steps__descript-img {
    width: 200px;
    height: 200px;
    margin-right: 130px;
}

.steps__descript-img img {
    display: block;
    width: auto;
    height: 100%;
    animation: rotate2 50s infinite linear;
    -webkit-animation: rotate2 50s infinite linear;
}

@keyframes rotate2 {
    from {
        transform: rotate(100deg);
        -webkit-transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -ms-transform: rotate(100deg);
        -o-transform: rotate(100deg);
    }
    to {
        transform: rotate(460deg);
        -webkit-transform: rotate(460deg);
        -moz-transform: rotate(460deg);
        -ms-transform: rotate(460deg);
        -o-transform: rotate(460deg);
    }
}

/* 3.5.section-secrvices ****************/

/***************************************/

.serv__wrapp-popup {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 2;
}

.services__item {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    border-bottom: 2px solid #141414;
    cursor: pointer;
}

.services__price {
    position: relative;
    width: 30%;
    height: auto;
    align-self: flex-end;
    z-index: 3;
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
}

.services__price-wrapp {
    display: inline-block;
}

.services__info,
.services__date,
.services__name,
.services__order,
.services__order:before {
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
}

.services__order {
    margin-top: 8px;
}

.services__info {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
}

.services_another {
    text-transform: uppercase;
    font-size: 25px;
}

.services__date {
    margin: 0 30px;
    font-size: 25px;
}

.services__order {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    font-size: 12px;
    text-align: right;
    text-transform: uppercase;
}

.services__order:before {
    position: absolute;
    content: '';
    width: 80px;
    height: 2px;
    bottom: -3px;
    right: 0;
    background: #fff;
}

.services__name {
    position: relative;
    width: 55%;
    height: auto;
    text-align: right;
    z-index: 3;
}

.services__name:after {
    position: absolute;
    content: '';
    width: 0;
    height: 2px;
    top: 10px;
    right: 0;
    background: #0a0a0a;
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
}

.services__name h3 {
    position: relative;
    padding-right: 110px;
    font-size: 35px;
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 1px #fff;
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
}

.services__num {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    font-style: italic;
    color: #141414;
    -webkit-text-stroke: transparent;
}

.services__hover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.services__bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    background: #fff;
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
}

.services__item:hover .services__name h3 {
    color: #0a0a0a;
    -webkit-text-stroke: 1px transparent;
}

.services__item:hover .services__name:after {
    width: 60px;
    transition-delay: .2s;
}

.services__item:hover .services__name h3 {
    transform: translateX(-80px);
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    -o-transform: translateX(-80px);
}

.services__item:hover .services__price,
.services__item:hover .services__info,
.services__item:hover .services__date,
.services__item:hover .services__order {
    color: #0a0a0a;
}

.services__item:hover .services__order:before {
    width: 125px;
    background: #0a0a0a;
}

.services__item:hover .services__bg {
    opacity: 1;
    transform: scaleY(1);
}

/* 3.6.section-contact ******************/

/***************************************/

.form__contact {
    width: 100%;
}

.form_style {
    font-size: 18px;
    color: #fff;
    border: none;
    background: none;
    outline: none;
}

.form__enter {
    width: 100%;
    height: auto;
    margin-left: auto;
}

.form__label {
    position: relative;
    display: block;
    margin-bottom: 15px;
}

.form__input {
    width: 100%;
    height: 60px;
    color: #fff;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.input-placeholder {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 15px;
    bottom: 0;
    font-size: 18px;
    color: #fff;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.form__input::placeholder {
    visibility: hidden;
}

.form__input:placeholder-shown ~ .input-placeholder {
    visibility: hidden;
}

.form__input:placeholder-shown:focus~.input-placeholder,
.form__input:not(:placeholder-shown)~.input-placeholder {
    font-size: 13px;
    transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -moz-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    -o-transform: translateY(-35%);
    animation: anim-text .2s infinite linear;
    -webkit-animation: anim-text .2s infinite linear;
}

.form__message:placeholder-shown:focus~.input-placeholder,
.form__message:not(:placeholder-shown)~.input-placeholder {
    transform: translateY(-12%);
    -webkit-transform: translateY(-12%);
    -moz-transform: translateY(-12%);
    -ms-transform: translateY(-12%);
    -o-transform: translateY(-12%);
    animation: anim-text .2s infinite linear;
    -webkit-animation: anim-text .2s infinite linear;
}

@keyframes anim-text {
    from {
        background: rgb(191, 64, 191);
        background: -moz-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
        background: -webkit-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
        background: linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b00ae", endColorstr="#5d07d3", GradientType=1);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
    to {
        background: rgb(191, 64, 191);
        background: -moz-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
        background: -webkit-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
        background: linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b00ae", endColorstr="#5d07d3", GradientType=1);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
}

.form__message {
    height: 150px;
    padding-top: 17px;
    resize: none;
}

.input_line {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 0;
    background: #141414;
}

.input_line:before {
    position: absolute;
    content: '';
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    background: rgb(191, 64, 191);
    background: -moz-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: -webkit-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b00ae", endColorstr="#5d07d3", GradientType=1);
    transition: .8s cubic-bezier(.9, 0, .1, 1);
    -webkit-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -moz-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -ms-transition: .8s cubic-bezier(.9, 0, .1, 1);
    -o-transition: .8s cubic-bezier(.9, 0, .1, 1);
}

.input_line.active:before {
    width: 100%;
    left: 0;
}

.form__submit {
    position: relative;
    display: block;
    width: 50%;
    height: auto;
    padding: 20px 0;
    margin-left: auto;
    text-transform: uppercase;
    cursor: crosshair;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.form__submit:hover {
    letter-spacing: 5px;
}

.form__submit:before,
.form__submit:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    right: 0;
    bottom: 0;
    background: #141414;
    z-index: 1;
}

.form__submit:after {
    width: 0;
    background: rgb(191, 64, 191);
    background: -moz-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: -webkit-linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    background: linear-gradient(90deg, rgb(218, 112, 214) 0%, rgb(218, 112, 214) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b00ae", endColorstr="#5d07d3", GradientType=1);
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
    z-index: 2;
}

.form__submit:hover::after {
    width: 100%;
    left: 0;
}

.contact__email {
    padding-left:115px ;
    width: 80%;
    padding-top: 45px;
}


.contact__email-title,
.contact__email-link {
    display: inline-block;
    font-family: 'DrukWideMedium';
    font-size: 50px;
}

.contact__email-title {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.contact__email-title span {
    display: block;
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 1px #fff;
}

.contact__email-link {
    text-decoration: none;
}

.contact__email-link span {
    display: inline-block;
}

/* 3.7.footer ******************/

/******************************/

.footer {
    width: 100%;
    height: auto;
    border-top: 1px solid #141414;
    padding: 20px 0;
}

.footer .logo {
    margin-right: 60px;
}

.footer__block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__block-wrapp {
    display: flex;
    align-items: center;
}

.footer__social {
    display: inline-block;
    font-size: 0;
}

.footer__item {
    display: inline-block;
    margin-right: 20px;
}

.footer__link {
    font-family: 'DrukWideMedium';
    font-size: 16px;
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 1px #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.footer__link:hover {
    color: #fff;
    -webkit-text-stroke: 1px transparent;
}

.footer__blog {
    position: relative;
    padding-right: 36px;
    font-family: 'DrukWideMedium';
    font-size: 16px;
    text-decoration: none;
}

.footer__blog img {
    position: absolute;
    display: block;
    width: auto;
    height: 13px;
    top: 50%;
    right: 0;
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 2;
}

.footer__copyright {
    padding-top: 10px;
    font-family: 'DrukWideMedium';
}

.footer__copyright span {
    color: #6d035b;
}

/* hover move img **************/

/******************************/

/* .move_img-cursor{
	position: relative;
} */

.move-img {
    position: absolute;
    pointer-events: none;
    width: 100px;
    height: 200px;
    /* transform: translate(-50%,-50%) scaleX(0); */
    transform: translate(-50%, -50%) scale(2, 1);
    /* transform: translate(-50%,-50%) scale(0,1); */
    opacity: 0;
    background-color: green;
    /* filter: hue-rotate(270deg); */
    /* filter: contrast(600%); */
    filter: blur(15px) contrast(700%);
    /* transition: transform .4s cubic-bezier(0, 0.61, 0.52, 0.93), opacity .4s cubic-bezier(0, 0.61, 0.52, 0.93); */
    transition: transform .4s cubic-bezier(0, 0.61, 0.52, 0.93), opacity .4s cubic-bezier(0, 0.61, 0.52, 0.93), filter .4s cubic-bezier(0, 0.61, 0.52, 0.93);
    z-index: 1;
}

.move_img-cursor:hover .move-img {
    opacity: 1;
    filter: blur(0) contrast(100%);
    transform: translate(-50%, -50%) scale(1, 1);
}

._move_ind {
    position: relative;
    mix-blend-mode: difference;
    z-index: 2;
}

.header__title .move_img-cursor {
    position: relative;
    /* z-index: -1; */
}

.header__title1 .move_img-cursor {
    position: relative;
    /* z-index: -1; */
}

.header__title .move-img {
    /* width: 350px;
	height: 400px; */
    width: 500px;
    height: 350px;
}

.header__title1 .move-img {
    /* width: 350px;
	height: 400px; */
    width: 500px;
    height: 350px;
}

.contact__email-link .move-img {
    width: 200px;
    height: 250px;
}

.footer__item.move_img-cursor {
    position: relative;
}

/***======================= 4.MEDIA-SETTINGS =======================***/

/***===============================================================***/

/* 4.0.media(min-width:1400px) *********************/

/**************************************************/

@media(min-width:1400px) {
    .work__link {
        max-width: 40%;
        height: 40vw;
    }
    .content {
        max-width: 100%;
        padding-left: 6vw;
    }
    .logo {
        font-size: 2.07vw;
    }
    .fon {
        width: 21vw;
        height: auto;
    }
    .header__title,
    .title h2,
    .about__title-h2 {
        font-size: 6vw;
    }
    .header__title1{
        font-size: 3vw;
    }
    .header__title {
        line-height: 1.2;
    }
    .header__title1 {
        line-height: 1.5;
    }
    .header__social-link,
    .header__qr,
    .footer__link,
    .footer__blog,
    .footer__copyright span,
    .up span,
    .about__descript,
    .steps__descript-txt p,
    .about__stack-descript,
    .form_style,
    .input-placeholder {
        font-size: 1.3vw;
    }
    .nav__menu {
        width: 4vw;
        height: 1.25vw;
    }
    .nav__menu-close {
        width: 3vw;
        height: 3vw;
    }
    .header__blog-link {
        padding-right: 7vw;
    }
    .link-arrow {
        height: 2.4vw;
    }
    .work__view-all span {
        font-size: 3vw;
    }
    .about__descript,
    .steps__descript-txt p,
    .about__stack-descript {
        line-height: 1.3;
    }
    .about__img {
        height: 39vw;
    }
    .about__stack-img {
        max-width: 7vw;
    }
    .about__h3 {
        font-size: 4.5vw;
        transform: translateX(-26%);
        -webkit-transform: translateX(-26%);
        -moz-transform: translateX(-26%);
        -ms-transform: translateX(-26%);
        -o-transform: translateX(-26%);
    }
    .about__stack-txt {
        max-width: 63%;
    }
    .about__stack-title,
    .about__stack-num {
        font-size: 2vw;
    }
    .nav__popup-link {
        font-size: 5vw;
    }
    .up {
        right: 0;
    }
    .header__blog-link,
    .steps__head h3,
    .services__name h3 {
        font-size: 2.8vw;
    }
    .contact__email-title,
    .contact__email-link,
    .qr__popup h2,
    .popup-work__title h2 {
        font-size: 3vw;
        
    }
    .popup-work__desc p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc1 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc1 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc1 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc2 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc2 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc2 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc3 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc3 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc3 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    

    .popup-work__desc5 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc5 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc5 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc6 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc6 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc6 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc7 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc7 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc7 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc8 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc8 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc8 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }
    
    .popup-work__desc9 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc9 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc9 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc10 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc10 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc10 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc11 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc11 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc11 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc12 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc12 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc12 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }


    .popup-work__desc13 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc13 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc13 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .popup-work__desc14 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc14 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc14 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

 

    .popup-work__desc15 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc15 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc15 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    

    .popup-work__desc16 p {
        font-size: 1.3vw;
        padding-bottom: 25px;
    }
    .popup-work__desc16 h2 {
        font-size: 2vw;
        padding-bottom: 25px;
    }

    .popup-work__desc16 h3 {
        font-size: 1.8vw;
        padding-bottom: 25px;
    }

    .serv__popup-wrapp h2 {
        margin-bottom: 5vw;
        font-size: 3.3vw;
    }
    .services__info,
    .services__order {
        font-size: 1.1vw;
    }
    .services__date,
    .services_another {
        font-size: 1.8vw;
    }
    .services__order:before {
        width: 130px;
    }
    .services__item:hover .services__order:before {
        width: 160px;
    }
}

/* 4.1.media(max-width:1140px) *********************/

/**************************************************/

@media(max-width: 1140px) {
    /*** section .work ***/
    .work__wrapp {
        padding-right: 0;
    }
    .work__view-all span {
        font-size: 5.5vw;
    }
    /*** section services ***/
    .services__price {
        width: 306px;
    }
    .services__info,
    .services__order {
        font-size: 10px;
    }
    .services__date,
    .services_another {
        font-size: 20px;
    }
    .services__name {
        width: 57%;
    }
    .services__num {
        font-size: 15px;
    }
    .services__name h3 {
        padding-right: 70px;
        font-size: 25px;
    }
    .services__item:hover .services__name h3 {
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        -o-transform: translateX(-30px);
    }
    .services__name:after {
        top: 16px;
    }
    .services__item:hover .services__name:after {
        width: 80px;
    }
    /*** other ***/
    .serv__popup,
    .serv__popup-anim-bg,
    .qr__popup,
    .qr__popup-anim-bg {
        transform: translateY(0) translateX(100%);
    }
}

/* 4.2.media(max-width:1055px) *********************/

/**************************************************/

@media(max-width: 1055px) {
    /*** general ***/
    .title h2,
    .about__title-h2 {
        font-size: 8vw;
    }
    .title .title__num {
        font-size: 4vw;
    }
    .move-img {
        display: none;
    }
    /*** header **/
    .header__title {
        font-size: 8vw;
    }

    .header__title.letter_one {
        font-size: 8vw;
    }
    .header__blog-link {
        font-size: 3.4vw;
    }
    .header__scroll {
        left: 66%;
    }
    /*** section work ***/
    .work__link {
        max-width: 47%;
        margin-bottom: 100px;
    }
    /*** section about/stack ***/
    .about__stack-item {
        width: 45%;
    }
    /*** section contact ***/
    .contact__email-title,
    .contact__email-link {
        font-size: 4.5vw;
    }
}

/* 4.3.media(max-width:900px) *********************/

/*************************************************/

@media(max-width: 900px) {
    /*** general ***/
    .nav__popup-wrapp {
        padding-right: 50px;
    }
    /*** qr-popup ***/
    .qr__popup h2 {
        font-size: 5.3vw;
    }
    /*** popup-work ***/
    .popup-work__item:nth-child(2) {
        padding: 60px 40px;
    }
    .popup-work__desc p {
        font-size: 2.6vw;
    }
    /*** section about/steps ***/
    .steps__descript-txt {
        width: 58%;
    }
    .steps__descript-img {
        margin-right: 30px;
    }
}

/* 4.4.media(max-width:800px) *********************/

/*************************************************/

@media(max-width: 800px) {
    /*** general ***/
    ._padd_top-bott80 {
        padding: 60px 0;
    }
    .nav__popup-link {
        font-size: 7.5vw;
    }
    .header__social-item {
        width: 42px;
        overflow: hidden;
    }
    .header__scroll {
        left: 50%;
    }
    /*** work-popup ***/
    .popup-work__item:nth-child(2) {
        padding: 60px 30px;
    }
    /*** serv__popup ***/
    .serv__popup-wrapp h2 {
        font-size: 4.5vw;
    }
    /*** header ***/
    .fon {
        width: 250px;
        height: 250px;
        right: -35px;
    }
    .header__blog-link {
        position: relative;
        display: inline-block;
        padding-right: 76px;
        margin-top: 20px;
        font-size: 4.5vw;
        line-height: .9;
        text-transform: uppercase;
        transform: translateX(0) rotate(0);
        -webkit-transform: translateX(0) rotate(0);
        -moz-transform: translateX(0) rotate(0);
        -ms-transform: translateX(0) rotate(0);
        -o-transform: translateX(0) rotate(0);
    }
    /*** section work ***/
    .work__link {
        height: 440px;
    }
    .work__view-all span {
        font-size: 5vw;
    }
    .work__anim {
        padding-left: 0;
    }
    .work__num {
        color: #fff;
        z-index: 2;
    }
    /*** section about ***/
    .about__img {
        height: auto;
    }
    /*** section about/stack ***/
    .about__stack-item {
        width: 100%;
        margin-bottom: 90px;
    }
    .about__stack-item:nth-child(5) {
        margin-bottom: 90px;
    }
    .about__stack-txt {
        max-width: 420px;
    }
    /*** section services ***/
    .services__info,
    .services__order {
        font-size: 9px;
    }
    .services__date,
    .services_another {
        font-size: 16px;
    }
    .services__name h3 {
        font-size: 23px;
    }
}

/* 4.5.media(max-width:700px) *********************/

/*************************************************/

@media(max-width: 700px) {
    /*** general ***/
    ._padd_top-bott80 {
        padding: 40px 0;
    }
    .content {
        padding-right: 30px;
    }
    .nav {
        padding: 30px 30px 0 30px;
    }
    .nav__menu-close {
        top: 30px;
        right: 30px;
    }
    .nav__popup-link {
        font-size: 6vw;
    }
    /*** qr-popup ***/
    .close__popup {
        top: 30px;
        right: 30px;
    }
    .qr__img {
        width: 200px;
        height: 200px;
    }
    /*** header ***/
    .header__social,
    .header__qr,
    .header__scroll {
        bottom: 30px;
    }
    .header__social {
        left: 30px;
    }
    .header__qr {
        right: 30px;
    }
    /*** section about ***/
    .about__wrapp {
        flex-wrap: wrap;
    }
    .about__img,
    .about__txt {
        width: 100%;
    }
    .about__img {
        height: 280px;
    }
    .about__txt {
        padding-left: 0;
    }
    .about__h3 {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
    /*** section about/steps ***/
    .steps__descript-txt {
        width: 58%;
    }
    .steps__num {
        font-size: 10px;
    }
    .steps__descript,
    .steps__head h3 {
        padding-left: 70px;
    }
    .steps__head h3 {
        font-size: 30px;
    }
    .steps__descript-txt p {
        font-size: 16px;
        line-height: 22px;
    }
    .steps__descript-img {
        width: 150px;
        height: 150px;
        margin-right: 0;
    }
    /*** section services ***/
    .services__item {
        flex-wrap: wrap;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .services__price {
        order: 1;
        width: auto;
        margin-left: auto;
        padding-right: 70px;
        text-align: right;
    }
    .services__name {
        width: 80%;
        margin-left: auto;
        margin-bottom: 15px;
        order: 0;
    }
    .services__info {
        font-size: 9px;
    }
    .services__order {
        display: none;
    }
    .services__date,
    .services_another {
        font-size: 16px;
    }
    .services__name h3 {
        font-size: 23px;
    }
}

/* 4.6.media(max-width:600px) *********************/

/*************************************************/

@media(max-width: 600px) {
    /*** general ***/
    .nav__popup-link {
        padding-right: 50px;
    }
    .nav__popup-num {
        font-size: 1.4vw;
    }
    .up {
        right: 20px;
        bottom: 155px;
    }
    /*** header ***/
    .header__blog-link {
        font-size: 5.7vw;
    }
    /*** work-popup ***/
    .popup-work__item:nth-child(1) {
        position: absolute;
        width: 100%;
        z-index: 1;
    }
    .popup-work__item:nth-child(2) {
        position: relative;
        width: 100%;
        padding-top: 110px;
        background-color: rgb(10 10 10 / 94%);
        z-index: 2;
    }
    .popup-work__title h2 {
        font-size: 8vw;
    }
    .popup-work__desc p {
        font-size: 4vw;
    }
    /*** serv__popup ***/
    .serv__popup {
        padding-top: 110px;
    }
    /*** form__popup ***/
    .form__success {
        font-size: 8.5vw;
        line-height: .8;
    }
    /*** section work ***/
    .work__wrapp {
        padding-top: 0;
    }
    .work__link {
        max-width: 80%;
        height: 500px;
    }
    .work__link:nth-child(odd) {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
    .work__name,
    .work__name:hover {
        opacity: 1;
        transform: translateX(15px);
        -webkit-transform: translateX(15px);
        -moz-transform: translateX(15px);
        -ms-transform: translateX(15px);
        -o-transform: translateX(15px);
    }
    /*** section about ***/
    .about__title-h2 {
        margin-bottom: 40px;
    }
    .about__txt {
        padding: 0;
    }
    .about__h3 {
        margin-bottom: 0;
        font-size: 10vw;
        transform: translateY(-35px);
        -webkit-transform: translateY(-35px);
        -moz-transform: translateY(-35px);
        -ms-transform: translateY(-35px);
        -o-transform: translateY(-35px);
    }
    /*** footer ***/
    .footer__block {
        align-items: flex-start;
    }
    .footer__block-wrapp {
        flex-wrap: wrap;
    }
    .logo {
        display: block;
        width: 100%;
    }
    .footer__item {
        margin-top: 5px;
    }
}

/* 4.7.media(max-width:500px) *********************/

/*************************************************/

@media(max-width: 500px) {
    /*** general ***/
    .header {
        min-height: 500px;
        height: 500px;
    }
    .wrapp-content {
        padding-left: 30px;
    }
    .logo {
        font-size: 25px;
    }
    .nav__menu {
        height: 16px;
    }
    .nav__popup-wrapp {
        padding-right: 25px;
    }
    .nav__popup-link {
        padding-right: 38px;
    }
    .nav__popup-item {
        margin-bottom: 25px;
    }
    .nav__popup-item:last-child {
        margin-bottom: none;
    }
    .title {
        margin-bottom: 70px;
    }
    .title h2 {
        font-size: 12.5vw;
    }
    .title .title__num {
        display: none;
    }
    .up {
        right: 35px;
    }
    /*** header ***/
    .header__blog-link {
        font-size: 6.7vw;
    }
    /*** serv__popup ***/
    .serv__popup-wrapp h2 {
        font-size: 6.5vw;
    }
    /*** header ***/
    .fon {
        width: 360px;
        height: 360px;
        right: -217px;
    }
    .header__title {
        font-size: 8.8vw;
    }
    .header__social-item {
        margin-right: 15px;
    }
    .header__scroll {
        bottom: 90px;
    }
    /*** section work ***/
    .work__anim {
        padding-left: 66px;
    }
    .work__link {
        max-width: 100%;
        margin-bottom: 60px;
    }
    .work__link:last-child {
        margin-bottom: 50px;
    }
    /*** section about ***/
    .about__title-h2 {
        font-size: 9.5vw;
    }
    /*** section about/steps ***/
    .steps__descript-wrapp {
        position: relative;
        overflow: hidden;
    }
    .steps__descript-txt {
        position: relative;
        width: 100%;
        z-index: 2;
    }
    .steps__descript-img {
        position: absolute;
        top: 20px;
        right: 0;
        opacity: .3;
        z-index: 1;
    }
    /*** section services ***/
    .services__name {
        width: 100%;
    }
    .services__name h3 {
        font-size: 20px;
    }
    /*** section contact ***/
    .form__submit {
        width: 100%;
    }
}

/* 4.8.media(max-width:400px) *********************/

/*************************************************/

@media(max-width: 400px) {
    /*** general ***/
    .up {
        right: 2%;
    }
    /*** header ***/
    .header__blog-link {
        font-size: 7.7vw;
    }
    /*** section .work ***/
    .work__link {
        height: 400px;
    }
    .work__anim {
        padding-left: 0;
    }
    .work__num {
        font-size: 35px;
    }
    /*** popup-work ***/
    .popup-work__item:nth-child(2) {
        padding: 60px 30px;
    }
    .popup-work__title h2 {
        font-size: 10vw;
    }
    .popup-work__desc p {
        font-size: 5.5vw;
    }
    /*** section about/stack ***/
    .about__stack-title,
    .about__stack-num {
        font-size: 18px;
    }
    /*** section about/steps ***/
    .steps__head h3 {
        font-size: 23px;
    }
    .steps__num {
        display: none;
    }
    .steps__descript,
    .steps__head h3 {
        padding-left: 0;
    }
    /*** section services ***/
    .services__name:after {
        display: none;
    }
    .services__name h3,
    .services__price {
        padding-right: 10px;
    }
    .services__num {
        display: none;
    }
    .services__item:hover .services__name h3 {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
}

/* 4.9.media(max-width:350px) *********************/

/*************************************************/

@media(max-width: 350px) {
    /*** general ***/
    .content {
        padding-right: 20px;
    }
    .wrapp-content {
        padding-left: 20px;
    }
    .nav {
        padding: 20px 20px 0 20px;
    }
    .nav__menu-close {
        top: 20px;
        right: 20px;
    }
    .nav__popup-link {
        padding-right: 28px;
        font-size: 7.3vw;
    }
    /*** qr-popup ***/
    .close__popup {
        top: 20px;
        right: 20px;
    }
    /*** header ***/
    .header__social,
    .header__qr {
        bottom: 20px;
    }
    .header__social {
        left: 20px;
    }
    .header__qr {
        right: 20px;
    }
    /*** section services ***/
    .services__order {
        font-size: 7px;
    }
    .services__date,
    .services_another {
        font-size: 13px;
    }
    .services__date {
        margin: 0 15px;
    }
    /*** section contact ***/
    .contact__email-title,
    .contact__email-link {
        font-size: 5.3vw;
    }
    .contact__email-title {
        margin-bottom: 5px;
    }
}