@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Quattrocento);

/* CSS Document */
/*-----IMAGE SLIDER----*/
@keyframes fade{
from{
opacity:0.4;
}
to{
opacity:1;
}
}

.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}

.centered h1
{
font-size: 6rem;
}
#slider{
margin:0 auto;
width:100%;
overflow:hidden;
}

.slides{
overflow:hidden;
animation-name:fade;
animation-duration:3s;
display:none;
}

#dot{
margin:0 auto;
text-align:center;
}
.dot{
display:inline-block;
border-radius:50%;
background:#d3d3d3;
padding:8px;
margin:10px 5px;
}

.actived{
background:black;
}

@media (max-width:567px){
#slider{
width:100%;
}
.centered {
display:none;
}
.centered h1
{
font-size: 2rem;
}
}

#heading{
display:block;
text-align:center;
font-size:2em;
margin:10px 0px;

}
/*-----ABOUT----*/
.side {
position: absolute;
width: 50vw;
top: 0;
bottom: 0;
z-index: 10;
}
.side.left {
left: 0;
}
.side.left:hover ~ .wrapper .front {
transform: matrix3d(0.94, 0, 0.34, -0.0002, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1) translateX(-10px);
}
.side.left:hover ~ .wrapper .back {
transform: matrix3d(0.94, 0, 0.34, -0.00025, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1) translateX(30px);
}
.side.right {
right: 0;
}
.side.right:hover ~ .wrapper .front {
transform: matrix3d(0.94, 0, 0.34, 0.0002, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1) translateX(30px);
}
.side.right:hover ~ .wrapper .back {
transform: matrix3d(0.94, 0, 0.34, 0.0005, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1.1) translateX(-100px);
}

.wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.image {
perspective: 200px;
transition: all 0.2s ease;
background-image: url(/img/img/Package-2.png);
height: 300px;
width: 500px;
background-size: cover;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.8);
border-radius: 25px;
}

.front {
margin-right: 50px;
z-index: 1;
}

.back {
margin-left: 70px;
margin-top: -150px;
background-position: bottom;
border-radius: 25px;
}

.image img
{
width: 500px;
height:500px;
border-radius:25px;
}
@media (max-width:567px){
.wrapper 
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.image img
{
width: 90%;
left:-20px;
height: 100%;
border-radius:25px;
}
.back
{
margin-left: 70px;
margin-top: -290px;
background-position: bottom;
border-radius: 25px;
}
}
/*-----BEST LOGISTIC SERVICE----*/
.acontainer {
position: relative;
width: 1160px;
display: flex;
justify-content: center;
flex-wrap: wrap;
transform-style: preserve-3d;
perspective: 500px;
margin: auto;
}
.acontainer .abox {
position: relative;
width: 275px;
height: 275px;
background: #000;
transition: 0.5s;
transform-style: preserve-3d;
overflow: hidden;
margin-right: 5px;
margin-top: 45px;
border-radius: 25px;
}
.acontainer:hover .abox {
transform: rotateY(25deg);
}
.acontainer .abox:hover ~ .abox {
transform: rotateY(-25deg);
}
.acontainer .abox:hover {
transform: rotateY(0deg) scale(1.25);
z-index: 1;
box-shadow: 0 25px 40px rgba(0,0,0,0.5);
}
.acontainer .abox .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.acontainer .abox .imgBx:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg,#f00,#000);
z-index: 1;
opacity: 0;
transition: 0.5s;
mix-blend-mode: multiply;
}
.acontainer .abox:hover .imgBx:before {
opacity: 1;
}
.acontainer .abox .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.acontainer .abox .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
padding: 20px;
align-items: flex-end;
box-sizing: border-box;
}
.acontainer .abox .content h2 {
color: #fff;
transition: 0.5s;
text-transform: uppercase;
margin-bottom: 5px;
font-size: 20px;
transform: translateY(200px);
transition-delay: 0.3s;
}
.acontainer .abox:hover .content h2 {
transform: translateY(0px);
}
.acontainer .abox .content p {
color: #fff;
transition: 0.5s;
font-size: 14px;
transform: translateY(200px);
transition-delay: 0.4s;
}
.acontainer .abox:hover .content p {
transform: translateY(0px);
}

@media (max-width:567px){
.acontainer
{
	width:70%;
display: table-row;
justify-content: center;
align-items: center;
}

.acontainer .abox {
width: 70%;
left: 50px;
background: inherit;
}
}

/*--PROCESS---*/
.pro {
--s: 15px;  /* size of the frame */
--b: 2px;   /* border thickness */
--w: 600px; /* width of the image */
--c: #7B3B3B;

width: var(--w);
aspect-ratio: 1;
object-fit: cover;
padding: calc(2*var(--s));
--_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),var(--c) 0;
background:
linear-gradient(      var(--_g)) 50%/100% var(--_i,100%) no-repeat,
linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
outline: calc(var(--w)/2) solid #0009;
outline-offset: calc(var(--w)/-2 - 2*var(--s));
transition: .4s;
cursor: pointer;
}
.pro:hover {
outline: var(--b) solid var(--c);
outline-offset: calc(var(--s)/-2);
--_i: calc(100% - 2*var(--s));
}

section{
min-height: 100vh;
justify-content: center;
align-items: center;
}
section:nth-child(1){
color: #e0ffff;
}
section:nth-child(2){
color: #42455a;
background: #e0ffff;
} 
section:nth-child(3){
color: #e0ffff;
}
section:nth-child(4){
color: #42455a;
background: #e0ffff;
}

.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: 2s all ease;
}

.reveal.active{
transform: translateY(0);
opacity: 1;
}
@media (max-width: 900px){
section h1{
font-size: 2rem;
text-align: center;
}
section .text-container{
flex-direction: column;
}
}

@media (max-width:567px){
.pro {
--w: 80%; /* width of the image */
width: var(--w);
outline: calc(var(--w)/2) solid #0009;
outline-offset: calc(var(--w)/-2 - 2*var(--s));
}
.acontainer ptext
{
display:inline-block;
}
section img{
	width:100%;
	margin-top: 20px;
}
.reveal{
	width: 95%;
	
}
br {
    display: none;
  }
}
/*----Gallery----*/
.marquee {
/*   overflow: hidden; */
}

.marquee-content {
display: flex;
animation: scrolling 10s linear infinite;
}

.marquee-item {
flex: 0 0 16vw;
margin: 0 1vw;
/*   flex: 0 0 20vw; */
/*   margin: 0 2vw; */
}

.marquee-item img {
display: block;
width: 100%;
/*   padding: 0 20px; */
}

@keyframes scrolling {
0% { transform: translateX(0); }
100% { transform: translatex(-144vw); }
}
/*-------TESTIMONIAL-----*/
@media (max-width:900px){
.testimonial
{
	margin-top: -5rem;
}
/*-------SERVICE PAGE----*/
.w {
width:calc(150vmin * 2/3);
height:100vmin;
position:relative;
overflow:hidden;
}

.p {
background:center/cover no-repeat url(../img/img/service.jpg);
width:100%;
height:100%;
position:absolute;
}

.a {
background-size:100% 100%;
filter:hue-rotate(72deg);
}

.b {
background-size:105% 105%;
filter:hue-rotate(144deg);
}

.c {
background-size:110% 110%;
filter:hue-rotate(216deg);
}

.d {
background-size:115% 115%;
filter:hue-rotate(288deg);
}


@keyframes a { 
from {
clip-path:inset(0 80% 80% 0);
}
25% {
clip-path:inset(0 20% 80% 0);
}
50% {
clip-path:inset(0 20% 20% 0);
}
75% {
clip-path:inset(0 80% 20% 0);
}
to { 
filter:hue-rotate(144deg)contrast(1.5);
clip-path:inset(0 80% 80% 0);
} 
}

@keyframes b { 
from {
clip-path:inset(0 0 80% 20%);
}
25% {
clip-path:inset(0 0 80% 80%);
}
50% {
clip-path:inset(0 0 20% 80%);
}
75% {
clip-path:inset(0 0 20% 20%);
}
to { 
filter:hue-rotate(216deg)contrast(1.5); 
clip-path:inset(0 0 80% 20%);
} 
}

@keyframes c { 
from {
clip-path:inset(20% 80% 0 0);
}
25% {
clip-path:inset(20% 20% 0 0);
}
50% {
clip-path:inset(80% 20% 0 0);
}
75% {
clip-path:inset(80% 80% 0 0);
}
to { 
clip-path:inset(20% 80% 0 0);
filter:hue-rotate(288deg)contrast(1.5);
} 
}

@keyframes d { 
from {
clip-path:inset(20% 0 0 20%);
}
25% {
clip-path:inset(20% 0 0 80%);
}
50% {
clip-path:inset(80% 0 0 80%);
}
75% {
clip-path:inset(80% 0 0 20%);
}
to { 
clip-path:inset(20% 0 0 20%);
filter:hue-rotate(72deg)contrast(1.5);
} 
}

.a {animation:a 3s infinite;}
.b {animation:b 3s infinite;}
.c {animation:c 3s infinite;}
.d {animation:d 3s infinite;}