* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
scroll-behavior: smooth;
transition: 0.3s ease-in-out;
letter-spacing: 0.5px;
line-height: 1.3195;
font-family: "Poppins", sans-serif ;
}
body,
html {
overflow-x: hidden;
background: linear-gradient(90deg, #F6FCFF -16.43%, #D6FDFF 119.69%);
}
/* Banner css starts here */
.banner__container__row {
margin-bottom: 3rem;
position: relative;
top: 0;
overflow: hidden;
}
.banner__container__row>img:last-child {
position: absolute;
bottom: -70px;
height: 140px;
left: 0;
width: 200%;
/* make it wide enough for a smooth loop */
animation: moveZigzag 15s linear infinite;
}
@keyframes moveZigzag {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
/* move half of the width */
}
}
.banner__container__row {
/* background-image: url('../images/7c510874d50972a700b014ff3d0fa0875dcf153d.jpg'); */
height: 812px;
background-position: 50% 100%;
@media screen and (min-width: 1700px) {
background-repeat: no-repeat;
}
/* background-repeat: no-repeat; */
}
.banner__container__row {
position: relative !important;
width: 100%;
height: 100%;
/* Full viewport height */
overflow: hidden;
}
.banner__container__row video {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Ensures the video fills the container */
/* z-index: -1; */
/* Keeps it in the background if you add text on top */
}
/* Banner css ends here */
/* Navbar css starts here */
header {
position: fixed;
top: 0px;
width: 100%;
z-index: 9999;
left: 0;
right: 0;
max-width: 1280px;
margin: auto;
@media screen and (max-width: 1280px) {
padding: 0px 10px;
}
}
.navbar-brand>img {
width: 80px;
}
#navbarSupportedContent>form>a>img {
width: 132px;
margin: 0px 10px;
@media screen and (max-width: 598px) {
width: 100px;
margin-top: 10px;
}
@media screen and (max-width: 320px) {
width: 90px;
}
}
.nav-link {
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
font-weight: 300 !important;
}
.nav-link.active {
color: rgba(255, 255, 255, 1);
font-weight: 700 !important;
}
.navbar-nav {
gap: 20px;
}
header.hide {
transform: translateY(-150%);
}
.navbar {
border-radius: 50px;
}
header.scrolled>.navbar {
background: conic-gradient(from 0deg, #ffb628, #f6fcff, #ffd76b, #ffb628);
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
background: url('data:image/svg+xml,');
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
height: 80px;
border-radius: 50px;
padding: 0px 20px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
header.scrolled>.navbar>.container-fluid>a>img {
width: 65px;
}
header.scrolled {
top: 20px;
}
header.scrolled>.navbar>.container-fluid>div>form>a>img {
margin: -10px 10px 0px 10px;
}
header.scrolled>.navbar>.container-fluid>div>ul>li>a {
color: white !important;
}
@media screen and (max-width: 992px) {
.navbar-collapse {
position: relative;
/* background: conic-gradient(from 0deg, #ffb628, #f6fcff, #ffd76b, #ffb628); */
background: url('data:image/svg+xml,');
padding: 20px 15px;
border-radius: 12px;
/* animation: rotateGradient 8s linear infinite; */
}
@keyframes rotateGradient {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.navbar-toggler {
box-shadow: none !important;
border: none !important;
}
.navbar-toggler>span>i {
color: white;
}
}
@media screen and (max-width: 598px) {
.navbar-collapse {
margin-top: 1rem;
}
}
/* Navbar css ends here */
/* Traveinstein css starts here */
.traveinstein__container__row {
padding: 20px 20px 40px 20px;
max-width: 1440px;
margin: auto;
}
.traveinstein__container__row>h2 {
color: rgba(0, 0, 0, 1);
font-size: 74px;
text-align: center;
font-weight: 400;
position: relative;
z-index: 2;
@media screen and (max-width: 598px) {
font-size: 36px;
}
}
.traveinstein__container__row>h2>span {
color: rgba(255, 182, 40, 1);
font-weight: 700;
}
.traveinstein__container__row>p {
color: rgba(0, 0, 0, 1);
font-size: 18px;
text-align: center;
font-weight: 400;
}
.traveinstein__grid__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 30px;
@media screen and (max-width: 992px) {
display: flex;
flex-direction: column-reverse;
}
}
.traveinstein__grid__row>div {
height: auto;
}
.traveinstein__grid__row>div>h2 {
color: rgba(0, 0, 0, 1);
font-weight: 400;
font-size: 54px;
margin-bottom: 20px;
@media screen and (max-width: 598px) {
font-size: 38px;
}
}
.traveinstein__grid__row>div>h2>span {
color: rgba(255, 182, 40, 1);
font-weight: 700;
}
.traveinstein__grid__row>div>div>img {
width: 100%;
mix-blend-mode: darken;
}
.traveinstein__grid__row>div>p {
color: rgba(0, 0, 0, 1);
font-size: 18px;
font-weight: 400;
}
.traveinstein__grid__row>div>img {
margin-top: 5rem;
margin-bottom: 5rem;
margin-left: -150px;
position: relative;
/* animation: fly 4s ease-in-out infinite; */
/* animation: bouncePlane 2s ease-in-out infinite; */
animation: zigzag 5s ease-in-out infinite;
@media screen and (max-width: 992px) {
margin-top: -2rem;
margin-bottom: 1rem;
}
@media screen and (max-width: 598px) {
width: 145px;
}
}
/* @keyframes fly {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(20px, -10px) rotate(-10deg);
}
50% {
transform: translate(40px, 0) rotate(5deg);
}
75% {
transform: translate(20px, 10px) rotate(-5deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
} */
@keyframes zigzag {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(20px, -15px);
}
40% {
transform: translate(40px, 5px);
}
60% {
transform: translate(60px, -10px);
}
80% {
transform: translate(80px, 10px);
}
100% {
transform: translate(0, 0);
}
}
@media screen and (max-width: 1080px) {
.traveinstein__grid__row>div:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
/* Traveinstein css ends here */
/* Discover the Power css starts here */
.dicover_the_power__row {
background-color: rgba(255, 182, 40, 1);
padding: 40px 20px;
}
.dicover_the_power__row>h3 {
color: rgba(0, 0, 0, 1);
font-size: 54px;
font-weight: 400;
text-align: center;
@media screen and (max-width: 598px) {
font-size: 36px;
}
}
.dicover_the_power__row>h3>span {
font-weight: 700;
color: white;
}
.dicover_the_power__row>p {
color: rgba(0, 0, 0, 1);
font-weight: 500;
font-size: 18px;
text-align: center;
}
.discover__grid__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1280px;
margin: 55px auto;
@media screen and (max-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 598px) {
grid-template-columns: repeat(1, 1fr);
}
}
.discover__grid__row>div {
background-color: rgba(255, 255, 255, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 35px;
padding: 40px 20px;
text-align: center;
transition: all 0.4s ease-in-out;
position: relative;
cursor: pointer;
animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
@keyframes mover {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
.discover__grid__row>div:hover {
transform: translateY(-8px) scale(1.03);
/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
}
.discover__grid__row>div:hover h4,
.discover__grid__row>div:hover img {
transform: skew(0deg, 0deg);
}
.discover__grid__row>div>img {
width: 295px;
animation: floatIcon 3s ease-in-out infinite;
@media screen and (max-width: 1080px) {
width: 200px;
}
}
@keyframes floatIcon {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
/* Up movement */
}
100% {
transform: translateY(0);
}
}
/* 1️⃣ Smooth bounce animation */
.icon-bounce {
animation: bounceIcon 3s ease-in-out infinite;
}
@keyframes bounceIcon {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px) scale(1.05);
}
}
/* 2️⃣ Slow rotation with slight scale */
.icon-rotate {
animation: rotateIcon 6s linear infinite;
}
@keyframes rotateIcon {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.1);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* 3️⃣ Pulse + glow effect */
.icon-pulse {
animation: pulseIcon 2.5s ease-in-out infinite;
filter: drop-shadow(0 0 5px rgba(0, 150, 255, 0.5));
}
@keyframes pulseIcon {
0%,
100% {
transform: scale(1);
filter: drop-shadow(0 0 5px rgba(0, 150, 255, 0.5));
}
50% {
transform: scale(1.15);
filter: drop-shadow(0 0 15px rgba(0, 150, 255, 0.8));
}
}
.icon-wave {
animation: waveMotion 4s ease-in-out infinite;
}
@keyframes waveMotion {
0% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-8px) rotate(-5deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
75% {
transform: translateY(8px) rotate(5deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
/* 2️⃣ Tilt with Gentle Shake */
.icon-tilt {
animation: tiltShake 3s ease-in-out infinite !important;
}
@keyframes tiltShake {
0%,
100% {
transform: rotate(0deg);
}
20% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
60% {
transform: rotate(4deg);
}
80% {
transform: rotate(-4deg);
}
}
/* 3️⃣ Orbit + Scale Pulse */
.icon-orbit {
position: relative !important;
animation: orbitPulse 5s ease-in-out infinite !important;
}
@keyframes orbitPulse {
0% {
transform: rotate(0deg) translateX(0) scale(1);
}
25% {
transform: rotate(10deg) translateX(4px) scale(1.05);
}
50% {
transform: rotate(0deg) translateX(0) scale(1);
}
75% {
transform: rotate(-10deg) translateX(-4px) scale(1.05);
}
100% {
transform: rotate(0deg) translateX(0) scale(1);
}
}
.discover__grid__row>div>h4 {
margin-top: 20px;
color: rgba(0, 0, 0, 1);
font-size: 22px;
font-weight: 400;
height: 60px;
@media screen and (max-width: 992px) {
height: 80px;
}
}
/* Discover the power css ends here */
/* How it works css starts here */
.works__component__row {
padding: 0px 20px;
@media screen and (max-width: 598px) {
padding: 40px 10px;
}
}
.works__component__row>h4 {
font-size: 54px;
font-weight: 400;
color: rgba(0, 0, 0, 1);
text-align: center;
margin-top: 13rem;
@media screen and (max-width: 598px) {
font-size: 36px;
margin-top: 6rem;
}
}
.works__component__row>h4>span {
font-weight: 700;
color: rgba(255, 182, 40, 1);
}
.works__component__row {
position: relative;
/* overflow: hidden; */
/* min-height: 120px; */
}
.slide-image {
position: absolute;
top: -190px;
left: -150px;
opacity: 0;
transition: left 0.8s ease-out, opacity 0.8s ease-out;
@media screen and (max-width: 598px) {
width: 320px;
top: 0;
}
}
.slide-image.active {
left: 0;
opacity: 1;
}
/* Keyframes for slide animation */
@keyframes slideInLeft {
0% {
left: -100%;
opacity: 0;
transform: scale(0.95);
}
70% {
left: 10%;
opacity: 1;
transform: scale(1.02);
}
100% {
left: 0;
opacity: 1;
transform: scale(1);
}
}
.work__center__img__row {
max-width: 600px;
margin: auto;
}
.work__center__img__row {
position: relative;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.leftTop__side__row {
top: 100px;
left: -230px;
@media screen and (max-width: 1080px) {
left: -180px;
}
@media screen and (max-width: 992px) {
left: -50px;
}
@media screen and (max-width: 640px) {
left: initial;
top: initial;
}
}
.works__component__row>img:last-child {
position: absolute;
right: 0;
bottom: 0;
@media screen and (max-width: 992px) {
bottom: -100px;
}
@media screen and (max-width: 598px) {
bottom: -145px;
}
}
.common__cards__works>h3 {
color: rgba(0, 0, 0, 1);
font-weight: 600;
font-size: 30px;
margin-bottom: 10px;
@media screen and (max-width: 598px) {
font-size: 22px;
}
}
.common__cards__works>p {
font-size: 16px;
font-weight: 400;
@media screen and (max-width: 598px) {
font-size: 14px;
}
}
.leftBottom__side__row {
bottom: 0px;
left: -230px;
@media screen and (max-width: 1080px) {
left: -180px;
}
@media screen and (max-width: 992px) {
left: -50px;
}
@media screen and (max-width: 640px) {
left: initial;
bottom: initial;
}
}
.rightTop__side__row {
top: 100px;
right: -230px;
@media screen and (max-width: 1080px) {
right: -180px;
}
@media screen and (max-width: 992px) {
right: -50px;
top: 10px;
}
@media screen and (max-width: 640px) {
right: initial;
top: initial;
}
}
.rightBottom__side__row {
bottom: 0px;
right: -230px;
@media screen and (max-width: 1080px) {
right: -180px;
}
@media screen and (max-width: 992px) {
right: -50px;
bottom: -30px;
}
@media screen and (max-width: 640px) {
right: initial;
bottom: initial;
}
}
.common__cards__works {
position: absolute;
background-color: white;
border-radius: 30px;
padding: 20px 20px;
text-align: center;
max-width: 287px;
animation: float 4s ease-in-out infinite;
z-index: 2;
margin-top: 20px;
@media screen and (max-width: 640px) {
position: initial;
}
}
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
50% {
transform: translateY(-10px) rotate(-1deg);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}
100% {
transform: translateY(0px) rotate(1deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
}
.works__container__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
@media screen and (max-width: 640px) {
gap: 15px;
position: absolute;
top: 0;
grid-template-columns: repeat(2, 1fr);
margin-top: 0px;
}
@media screen and (max-width: 598px) {
grid-template-columns: repeat(1, 1fr);
}
}
/* How it works css ends here */
/* AI System checklist css starts here */
.AI__checklist__syst__row {
padding: 0px 20px 40px 0px;
margin-top: -8rem;
position: relative;
top: 0;
@media screen and (max-width: 598px) {
margin-top: 0;
padding: 0px 0px 40px 0px;
}
}
.AI__checklist__syst__row>img {
position: absolute;
top: -100px;
left: -80px;
animation: zigzag 5s ease-in-out infinite;
}
.AI__checklist__syst__row>h4 {
font-size: 54px;
font-weight: 400;
color: rgba(0, 0, 0, 1);
text-align: center;
margin-top: 13rem;
@media screen and (max-width: 598px) {
font-size: 36px;
}
}
.AI__checklist__syst__row>h4>span {
font-weight: 700;
color: rgba(255, 182, 40, 1);
}
.AI__checklist__grid__row {
display: grid;
grid-template-columns: 1.5fr 2fr;
gap: 40px;
@media screen and (min-width: 1700px) {
max-width: 1440px;
margin: auto;
}
@media screen and (max-width: 992px) {
display: flex;
flex-direction: column-reverse;
}
}
.AI__checklist__grid__row>div:nth-child(1) {
padding-left: 5rem;
padding-right: 5rem;
@media screen and (max-width: 1080px) {
padding: 0 1rem 0 1rem;
}
}
.AI__checklist__grid__row>div:nth-child(2) {
position: relative;
}
.AI__checklist__grid__row>div:nth-child(2)>img {
mix-blend-mode: darken;
width: 130%;
position: absolute;
right: -150px;
top: -151px;
margin-left: 20px;
@media screen and (max-width: 1080px) {
top: 0;
}
@media screen and (max-width: 714px) {
position: initial;
width: 100%;
}
}
@media screen and (max-width: 714px) {
.AI_Voice__guide__row {
margin-top: 0rem !important;
}
}
.blue__row__content,
.yellow__row__content {
background-color: rgba(74, 152, 247, 1);
padding: 40px 25px;
border-radius: 40px;
max-width: 500px;
margin: 30px auto 20px auto;
position: relative;
overflow: hidden;
@media screen and (max-width: 598px) {
margin: 0 auto 20px auto;
}
}
.blue__row__content>img:nth-child(1),
.yellow__row__content>img:nth-child(1) {
position: absolute;
top: -58px;
height: 80px;
left: 0;
/* animation: moveZigzag 15s linear infinite; */
animation: moveZigzagFloat 15s linear infinite !important;
}
.blue__row__content>img:last-child,
.yellow__row__content>img:last-child {
position: absolute;
bottom: -40px;
height: 80px;
left: 0;
/* animation: moveZigzag 15s linear infinite; */
animation: moveZigzagFloat 15s linear infinite !important;
}
@keyframes moveZigzagFloat {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(-12.5%) translateY(-10px);
}
50% {
transform: translateX(-25%) translateY(0);
}
75% {
transform: translateX(-37.5%) translateY(10px);
}
100% {
transform: translateX(-50%) translateY(0);
}
}
.yellow__row__content {
background-color: rgba(255, 182, 40, 1);
}
.blue__row__content>p,
.yellow__row__content {
color: white;
text-align: center;
font-weight: 600;
font-size: 18px;
}
.yellow__row__content>p,
.yellow__row__content>ul>li {
color: #1b1b1b !important;
}
.blue__row__content>ul,
.yellow__row__content>ul {
padding-left: 1rem;
margin-top: 30px;
}
.blue__row__content>ul>li,
.yellow__row__content>ul>li {
color: white;
margin-bottom: 20px;
font-weight: 300;
font-size: 16px;
text-align: left;
}
.yellow__row__content>h4 {
color: rgba(0, 0, 0, 1) !important;
font-weight: 500;
font-size: 24px;
}
@media screen and (max-width: 992px) {
.main__colorful__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: -20px;
position: relative;
z-index: 2;
}
}
@media screen and (max-width: 598px) {
.main__colorful__row {
grid-template-columns: repeat(1, 1fr);
gap: 0px;
}
}
/* AI System checklist css ends here */
/* AI Voice Guide css starts here */
.AI_Voice__guide__row {
padding: 150px 0px 60px 0px;
position: relative;
top: 0;
padding-right: 250px;
@media screen and (min-width: 1700px) {
max-width: 1440px;
margin: auto;
}
@media screen and (max-width: 992px) {
margin-top: 15rem;
}
@media screen and (max-width: 714px) {
padding-right: 100px;
}
@media screen and (max-width: 598px) {
padding-right: 20px !important;
/* padding-right: 20px !important; */
}
}
.AI_Voice__guide__row>img:nth-child(1) {
position: absolute;
right: 0;
}
.AI_Voice__guide__row>img:nth-child(1) {
position: absolute;
right: 0;
animation: balloonBob 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes balloonBob {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-20px) scale(1.02);
}
}
.AI_Voice__guide__row>img:last-child {
position: absolute;
top: -60px;
left: 30px;
}
.right__AI__voice>img:last-child {
position: absolute;
right: 0;
bottom: -170px;
}
.AI__voice__grid__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
background-color: white;
border-radius: 0px 50px 50px 0px;
margin-top: -5rem;
/* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
/* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
margin-bottom: 6rem;
position: relative;
z-index: 2;
@media screen and (min-width: 1700px) {
max-width: 1280px;
margin-right: auto;
}
@media screen and (max-width: 1080px) {
grid-template-columns: repeat(1, 1fr);
}
@media screen and (max-width: 714px) {
margin-bottom: 0rem;
}
}
.AI__voice__grid__row>.ai__voice__gui_2 {
padding: 40px 40px 40px 20px;
@media screen and (max-width: 598px) {
padding: 40px 20px 40px 20px;
}
}
.AI__voice__grid__row>div>img {
width: 100%;
}
.AI__voice__grid__row>.ai__voice__gui_2>h3 {
font-size: 54px;
font-weight: 400;
color: rgba(0, 0, 0, 1);
@media screen and (max-width: 598px) {
font-size: 26px;
}
}
.AI__voice__grid__row>.ai__voice__gui_2>h3>span {
font-weight: 700;
color: rgba(255, 182, 40, 1);
}
.AI__voice__grid__row>.ai__voice__gui_2>p:nth-child(2),
.AI__voice__grid__row>.ai__voice__gui_2>p:nth-child(3) {
margin-bottom: 0 !important;
font-weight: 600;
font-size: 18px;
color: rgba(0, 0, 0, 1);
}
.AI__voice__grid__row>.ai__voice__gui_2>p:last-child {
font-weight: 600;
color: rgba(0, 0, 0, 1);
font-size: 18px;
}
.AI__voice__grid__row>.ai__voice__gui_2>ul {
padding-left: 1rem;
margin-top: 20px;
}
.AI__voice__grid__row>.ai__voice__gui_2>ul>li {
margin: 10px 0px;
font-size: 18px;
color: rgba(77, 77, 77, 1);
font-weight: 400;
}
.right__AI__voice {
margin-top: -6rem;
padding-right: initial !important;
padding-left: 250px !important;
@media screen and (max-width: 714px) {
padding-left: 100px !important;
}
@media screen and (max-width: 598px) {
padding-left: 20px !important;
/* padding-right: 20px !important; */
}
}
.up__row {
margin-top: -6rem;
}
.up__row>img:nth-child(1) {
position: absolute;
left: 0;
top: -100px;
}
.up__row>img:nth-child(1) {
position: absolute;
right: 0;
animation: balloonBob 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.right__AI__voice>.AI__voice__grid__row {
border-radius: 50px 0px 0px 50px !important;
}
.right__AI__voice>.AI__voice__grid__row>.ai__voice__gui_2 {
padding: 40px 20px 40px 40px !important;
@media screen and (max-width: 598px) {
padding: 40px 20px 40px 20px !important;
}
}
@media screen and (min-width: 1700px) {
.right__AI__voice {
max-width: 1280px;
margin-left: auto;
}
}
@media screen and (max-width: 1080px) {
.right__AI__voice>div {
display: flex !important;
flex-direction: column-reverse !important;
}
}
/* AI Voice Guide css ends here */
/* Explore Discovery css starts here */
.explore__discovery__row {
background-image: url('../images/41c0a8fb59ea41fcc5aa2366a730f53ac32c33e0 (1).webp');
height: 100vh;
background-size: cover;
background-position: left;
position: relative;
top: 0;
margin-bottom: 50px;
display: flex;
@media screen and (max-width: 1440px) {
background-position: 25%;
}
@media screen and (max-width: 1125px) {
background-position: 30%;
}
@media screen and (max-width: 1080px) {
background-position: 10%;
padding: 0px 20px;
border-radius: 12px;
margin-bottom: 0px;
}
@media screen and (max-width: 992px) {
background-position: 20%;
}
}
.explore__discovery__row>img:nth-child(1) {
position: absolute;
top: -100px;
height: 140px;
left: 0;
width: 200%;
animation: moveZigzag 15s linear infinite;
}
.explore__discovery__row>img:last-child {
position: absolute;
bottom: -75px;
height: 140px;
left: 0;
width: 200%;
animation: moveZigzag 15s linear infinite;
}
.explore__discovery__grid__row {
display: grid;
grid-template-columns: 750px 1fr;
gap: 20px;
max-width: 1440px;
margin-left: auto;
/* border: 1px solid white; */
@media screen and (min-width: 3000px) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1000px;
right: 0;
margin: auto;
}
@media screen and (max-width: 1282px) {
grid-template-columns: 650px 1fr;
}
@media screen and (max-width: 1125px) {
grid-template-columns: 520px 1fr;
}
@media screen and (max-width: 1080px) {
grid-template-columns: repeat(1, 1fr) !important;
}
}
.explore__discovery__grid__row>div {
padding: 0px 100px 0px 40px;
@media screen and (max-width: 1368px) {
padding: 0px 40px 0px 40px;
}
}
.explore__discovery__grid__row>div:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@media screen and (max-width: 598px) {
padding: 0px 10px;
}
@media screen and (max-width: 598px) {
background-color: white;
z-index: 222;
padding: 0px 15px;
border-radius: 12px;
}
}
.explore__discovery__grid__row>div:nth-child(2)>h3 {
color: white;
font-size: 54px;
font-weight: 400;
@media screen and (max-width: 598px) {
font-size: 32px;
margin-bottom: 0;
}
@media screen and (max-width: 598px) {
color: #1b1b1b;
}
}
.explore__discovery__grid__row>div:nth-child(2)>h3>span {
font-weight: 700;
}
.explore__discovery__grid__row>div:nth-child(2)>div {
background-color: rgba(255, 255, 255, 1);
padding: 40px 30px;
border-radius: 40px;
margin: 20px 0px;
@media screen and (max-width: 598px) {
padding: 5px 20px;
}
}
.explore__discovery__grid__row>div:nth-child(2)>div>p {
text-align: center;
font-weight: 600;
font-size: 18px;
color: rgba(0, 0, 0, 1);
}
.explore__discovery__grid__row>div:nth-child(2)>div>ul {
margin-top: 10px;
}
.explore__discovery__grid__row>div:nth-child(2)>div>ul>li {
margin: 10px 0px;
font-size: 16px;
font-weight: 400;
}
/* Explore Discovery css ends here */
/* Footer css starts here */
.download__row {
background: url('../images/Rectangle 7842.png'), url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
display: flex;
align-items: center;
margin-bottom: 100px;
position: relative;
margin-top: 100px;
@media screen and (max-width: 992px) {
margin-bottom: 0px;
margin-top: -50px;
}
@media screen and (max-width: 598px) {
/* margin-bottom: 350px; */
margin-top: 50px;
}
@media screen and (max-width: 598px) {
background-position: 60% !important;
}
}
.download_app>h3 {
font-size: 54px;
font-weight: 400;
color: rgba(0, 0, 0, 1);
@media screen and (max-width: 598px) {
font-size: 36px;
}
}
.download_app>div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-top: 30px;
gap: 20px;
/* @media screen and (max-width: 598px) {
flex-direction: column;
} */
}
.download_app>div img {
width: 200px;
@media screen and (max-width: 598px) {
width: 130px;
}
}
.download_app>p {
font-size: 18px;
font-weight: 400;
}
.download_app>h3>span {
font-weight: 700 !important;
}
.mobile__skeleton__row {
animation: floatBounce 2s cubic-bezier(.68, -0.55, .27, 1.55) infinite alternate;
}
@keyframes floatBounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20px);
}
}
.mobile__skeleton__row img {
width: 100%;
max-width: 400px;
@media screen and (max-width: 1080px) {
max-width: 330px;
}
@media screen and (max-width: 598px) {
max-width: 150px;
}
}
.download_row_container {
max-width: 1280px;
margin: auto;
}
.download_row_container h3 {
color: #000000;
font-size: 54px;
font-weight: 400;
margin-bottom: 20px;
margin-top: -140px;
@media screen and (max-width: 598px) {
font-size: 36px;
>br {
display: none;
}
}
}
.download__row p {
color: #000000;
font-size: 18px;
font-weight: 500;
margin-bottom: 0;
}
.download__row h3 .app_now {
font-weight: 300;
color: #fff;
}
.row_container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 200px;
align-items: center;
top: 40%;
transform: translate(-50%, -50%);
width: 100%;
left: 50%;
max-width: 1280px;
position: absolute;
z-index: 99;
margin-top: 100px;
@media screen and (max-width: 1080px) {
display: flex !important;
flex-direction: column-reverse;
top: 50%;
}
@media screen and (max-width: 992px) {
padding: 0px 20px;
}
}
.image_location {
position: relative;
}
.location_find {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
z-index: -1;
animation: move-plane 5s infinite linear;
@media screen and (max-width: 1080px) {
right: -150px;
}
}
@keyframes move-plane {
0% {
top: 50%;
}
50% {
top: 40%;
}
100% {
top: 50%;
}
}
.balloon {
position: fixed;
top: -150px;
left: 15%;
transform: scale(0.5);
animation: balloonFloat 12s linear infinite;
z-index: 1000;
/* above content */
}
.slick-slider {
position: relative;
z-index: 2222;
}
@media screen and (max-width: 1080px) {
.download__row {
background-position: 55%;
background-size: cover;
}
}
@media screen and (max-width: 992px) {
.download__row {
background-position: 80%;
background-size: cover;
}
}
/* Smooth float from top (35px) to bottom (100%) */
@keyframes balloonFloat {
0% {
top: -150px;
left: 15%;
transform: scale(0.5) rotate(0deg);
}
10% {
left: 16%;
transform: scale(0.51) rotate(-2deg);
}
25% {
left: 14%;
transform: scale(0.52) rotate(1deg);
}
40% {
left: 17%;
transform: scale(0.51) rotate(-1deg);
}
55% {
left: 13%;
transform: scale(0.52) rotate(2deg);
}
70% {
left: 16%;
transform: scale(0.51) rotate(-1deg);
}
85% {
left: 15%;
transform: scale(0.5) rotate(1deg);
}
100% {
top: 120vh;
/* goes offscreen bottom */
left: 15%;
transform: scale(0.5) rotate(0deg);
}
}
.balloon img {
width: 100%;
}
.bottom__mobileX {
display: none;
}
@media screen and (max-width: 992px) {
.bottom__mobileX {
background-color: #ffb628;
/* height: 180px; */
padding-bottom: 400px;
margin-top: -10px;
display: block;
}
}
@media screen and (max-width: 992px) {
.location_find>img {
width: 650px;
}
}
.copyright__container {
background-color: rgba(0, 0, 0, 1);
padding: 10px 40px;
z-index: 2222;
position: relative;
}
.copyright__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
@media screen and (max-width: 640px) {
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
}
.copyright__row>div:nth-child(1) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 20px;
@media screen and (max-width: 640px) {
justify-content: center;
}
}
.copyright__row>div:nth-child(2) {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
@media screen and (max-width: 640px) {
justify-content: center;
align-items: center;
}
}
.d-none-mobl {
display: none;
}
.copyright__row>div>p,
.copyright__row>div>div>p {
margin-bottom: 0rem;
color: white;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
font-size: 14px;
@media screen and (max-width: 714px) {
font-size: 12px;
}
@media screen and (max-width: 598px) {
font-size: 9px;
}
}
.copyright__row>div>a,
.copyright__row>div>div>a {
margin-bottom: 0rem;
color: white;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
font-size: 14px;
cursor: pointer;
@media screen and (max-width: 714px) {
font-size: 12px;
}
@media screen and (max-width: 598px) {
font-size: 9px;
}
}
@media screen and (max-width: 1080px) {
.d-none-large {
display: none;
}
.d-none-mobl {
display: block;
position: relative;
z-index: 22;
}
.d-none-mobl {
color: #1b1b1b;
text-align: center;
margin-bottom: 20px;
font-size: 54px;
font-weight: 400;
@media screen and (max-width: 598px) {
font-size: 32px;
margin-bottom: 0;
}
}
.d-none-mobl>span {
font-weight: 700;
color: rgba(255, 182, 40, 1);
}
}
/* Footer css ends here */
.wavy-text {
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
/* Normal letters */
.wavy-text .char {
display: inline-block;
transform: translateY(100%);
opacity: 0;
color: #1b1b1b;
font-weight: 400;
}
/* Highlight letters */
.wavy-text .highlight,
.wavy-text .highlights {
display: inline-block;
transform: translateY(100%);
opacity: 0;
}
.wavy-text .highlight {
color: rgba(255, 182, 40, 1);
}
.wavy-text .highlights {
color: white;
}
/* Animate on scroll */
.wavy-text.active .char,
.wavy-text.active .highlight,
.wavy-text.active .highlights {
animation: waveUp 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
/* smoother ease */
}
/* Keyframes */
@keyframes waveUp {
0% {
transform: translateY(100%) rotate(8deg);
opacity: 0;
}
30% {
transform: translateY(-10%) rotate(-2deg);
opacity: 0.6;
}
60% {
transform: translateY(5%) rotate(1deg);
opacity: 0.9;
}
100% {
transform: translateY(0%) rotate(0deg);
opacity: 1;
}
}
/* Sequential delays for smoother wave */
.wavy-text.active .char:nth-child(1) {
animation-delay: 0s;
}
.wavy-text.active .char:nth-child(2) {
animation-delay: 0.03s;
}
.wavy-text.active .char:nth-child(3) {
animation-delay: 0.06s;
}
.wavy-text.active .char:nth-child(4) {
animation-delay: 0.09s;
}
.wavy-text.active .char:nth-child(5) {
animation-delay: 0.12s;
}
.wavy-text.active .char:nth-child(6) {
animation-delay: 0.15s;
}
.wavy-text.active .char:nth-child(7) {
animation-delay: 0.18s;
}
.wavy-text.active .char:nth-child(8) {
animation-delay: 0.21s;
}
.wavy-text.active .char:nth-child(9) {
animation-delay: 0.24s;
}
.wavy-text.active .char:nth-child(10) {
animation-delay: 0.27s;
}
/* Highlights start after normal letters */
.wavy-text.active .highlight,
.wavy-text.active .highlights {
animation-delay: 0.3s;
}
/* App Screenshot css starts here */
.app__screenshots__row {
padding: 40px 0px 0px 0px;
}
.app__screenshots__row>div>div>h3 {
color: rgba(0, 0, 0, 1);
font-size: 54px;
font-weight: 400;
text-align: center;
@media screen and (max-width: 598px) {
font-size: 32px;
}
}
.screenshot__heading__row {
max-width: 1240px;
margin: 0 auto 50px auto;
padding: 0px 20px;
gap: 15px;
}
.app__screenshots__row>div>div>h3>span {
font-weight: 700;
}
.screenshot__heading__row>div:nth-child(1)>div,
.screenshot__heading__row>div:nth-child(3)>div {
/* background-color: white; */
box-shadow: 0px 0px 92.8px 0px rgba(242, 242, 242, 1) inset;
width: 52px;
height: 52px;
cursor: pointer;
border: 5px solid white;
border-radius: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 5.8px 5.8px rgba(153, 153, 153, 1) inset;
box-shadow: 0px 0px 5.8px 5.8px rgba(255, 255, 255, 0.15) inset;
box-shadow: -5.8px -5.8px 5.8px -2.9px rgba(255, 255, 255, 0.75) inset;
box-shadow: 5.8px 5.8px 5.8px -2.9px rgba(255, 255, 255, 0.75) inset;
box-shadow: -3px -3px 1px -17.4px rgba(255, 255, 255, 0.8) inset;
box-shadow: 3px 3px 1px -17.4px rgba(255, 255, 255, 0.75) inset;
box-shadow: 0px 5.8px 46.4px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 11.6px 0px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(69.59932708740234px);
@media screen and (max-width: 598px) {
width: 26px;
height: 26px;
}
}
.screenshot__heading__row>div:nth-child(1)>div>img,
.screenshot__heading__row>div:nth-child(3)>div>img {
width: 22px;
@media screen and (max-width: 598px) {
width: 16px;
}
}
.carousel .item {
transition: transform 0.5s ease, opacity 0.5s ease;
border-radius: 20px;
overflow: hidden;
/* opacity: 0.5; */
filter: grayscale(1);
transform: scale(0.85);
}
.carousel .item.slick-center {
/* opacity: 1; */
filter: grayscale(0);
transform: scale(1.001);
}
.carousel .item img {
width: 100%;
display: block;
border-radius: 20px;
}
.screenshot__heading__row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
/* Ziz zag css starts here */
.journey .row {
align-items: center;
padding-bottom: 0px;
@media screen and (max-width: 992px) {
padding: 40px 0px 0px 0px;
}
}
.Discover img {
width: 100%;
mix-blend-mode: darken;
}
.element_discover {
max-width: 500px;
margin: auto;
}
.element_discover h3 {
margin-bottom: 20px;
color: rgba(0, 0, 0, 1);
font-size: 48px;
font-weight: 400;
@media screen and (max-width: 598px) {
font-size: 34px;
}
}
.element_discover span {
vertical-align: middle;
}
.element_discover h3 .Feed {
color: #FFB628;
font-weight: 700;
}
.global p {
font-weight: 500;
font-size: 18px;
color: #000000;
margin-bottom: 0;
}
.global {
text-align: center;
}
.social_global {
margin-bottom: 20px;
}
.social_discover {
background-color: rgba(255, 255, 255, 1);
padding: 40px 30px;
border-radius: 40px;
margin: 20px 0px;
position: relative;
z-index: 22;
}
.social_discover ul li {
font-weight: 400;
font-size: 16px;
padding-bottom: 10px;
color: #4D4D4D;
}
@media screen and (max-width: 1080px) {
.element_discover {
max-width: 100%;
margin: auto;
padding: 0px 10px;
}
}
@media screen and (max-width: 992px) {
.journey .col-md-5 {
order: 2;
width: 100% !important;
}
.journey>.row {
flex-direction: column;
}
}
@media screen and (max-width: 1080px) {
.Travelers {
padding: 20px 0px 30px 0px;
}
}
.Travelers {
position: relative;
}
.passport_img img {
width: 100%;
max-width: 150px;
}
.passport_img {
position: absolute;
right: -10px;
top: 48%;
transform: translateY(-48%);
animation: 1.5s ease 0s infinite beat;
}
@keyframes beat {
0%,
50%,
100% {
transform: scale(1, 1) translateY(-48%);
}
30%,
80% {
transform: scale(0.92, 0.95) translateY(-48%);
}
}
.airplane {
position: absolute;
left: -10px;
top: 48%;
transform: translateY(-48%);
animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@keyframes bounce {
0% {
transform: translateX(0px) translateY(-48%);
}
50% {
transform: translateX(-15px) translateY(-48%);
}
100% {
transform: translateX(0px) translateY(-48%);
}
}
.airplane img {
width: 100%;
}
@media screen and (max-width: 1399.99px) {
.passport_img {
top: 40%;
transform: translateY(-40%);
}
}
@media screen and (max-width: 768px) {
.airplane {
top: 55%;
transform: translateY(-55%);
}
}
@media screen and (max-width: 640px) {
.passport_img {
right: -40px;
}
.passport_img img {
width: 100px;
}
.airplane {
top: 48%;
transform: translateY(-48%);
}
}
@media screen and (max-width: 598px) {
.airplane {
top: 51%;
}
.airplane>img {
width: 150px;
}
.up__row>img:nth-child(1) {
top: 7px;
width: 40px;
left: 0;
}
}
@media screen and (max-width: 598px) {
.passport_img {
right: 0px;
top: 52%;
}
.passport_img>img {
width: 50px;
}
}
/* Ziz zag css ends here */
/* Why Choose us css starts here */
.choose__traveinstein__row {
background-color: white;
padding: 40px 20px;
position: relative;
margin-bottom: 5rem;
margin-top: 5rem;
@media screen and (max-width: 1080px) {
margin-top: -4rem;
}
}
.choose__traveinstein__row>img:nth-child(1) {
position: absolute;
top: -70px;
left: 0;
height: 100px;
width: 200%;
transform: rotate(180deg);
animation: moveZigzag 15s linear infinite;
}
.choose__traveinstein__row>img:last-child {
transform: rotate(180deg);
position: absolute;
bottom: -50px;
height: 100px;
left: 0;
width: 200%;
animation: moveZigzag 15s linear infinite;
}
.choose__traveinstein__grid__row>div>h3 {
color: rgba(0, 0, 0, 1);
font-size: 54px;
font-weight: 400;
justify-content: flex-start;
margin-bottom: 15px;
@media screen and (max-width: 598px) {
font-size: 36px;
}
}
.choose__traveinstein__grid__row>div>h3>span {
font-weight: 700;
}
.choose__traveinstein__grid__row>div>ul>li {
margin: 20px 0px;
font-size: 16px;
font-weight: 400;
color: rgba(77, 77, 77, 1);
}
.choose__traveinstein__grid__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 1300px;
margin: auto;
@media screen and (max-width: 640px) {
display: flex;
flex-direction: column-reverse;
}
}
.choose__traveinstein__grid__row>div {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.choose__traveinstein__grid__row>div>img {
width: 135%;
margin-left: -7rem;
@media screen and (max-width: 992px) {
width: 100%;
margin-left: 0rem;
}
}
/* Why Choose us css ends here */
/* Join the Community css starts here */
.Traveinstein {
margin: 100px 0px;
position: relative;
}
.Community {
background-color: #fff;
margin-right: 50px;
clip-path: polygon(0 1%, 94% 0, 100% 100%, 0% 100%);
border-bottom-right-radius: 20px;
border-top-right-radius: 120px;
@media screen and (max-width: 992px) {
border-top-right-radius: 80px;
}
}
.men_travel img {
width: 100%;
}
.Community .row {
align-items: center;
}
.airplane_travel {
position: relative;
width: 100%;
/* full width to allow smooth flight */
height: auto;
/* adjust as needed */
overflow: visible;
/* allow plane to go offscreen */
top: -70px;
}
.airplane_travel img {
width: 400px;
/* plane size */
position: absolute;
top: 50%;
/* vertically center */
transform: translateY(-50%);
z-index: 9;
animation: flyRightToLeft 8s linear infinite;
/* slower for smooth flight */
}
@keyframes flyRightToLeft {
0% {
transform: translateX(100vw) translateY(-50%);
/* start offscreen right */
}
100% {
transform: translateX(-450px) translateY(-50%);
/* fly offscreen left */
}
}
/* Optional 3D floating effect if needed */
@keyframes fly3D {
0% {
transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
}
25% {
transform: translate3d(50px, -20px, 30px) rotateY(15deg) rotateX(-5deg);
}
50% {
transform: translate3d(100px, 10px, -20px) rotateY(-10deg) rotateX(5deg);
}
75% {
transform: translate3d(50px, 20px, 30px) rotateY(20deg) rotateX(-10deg);
}
100% {
transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
}
}
.para_element ul li {
color: #4D4D4D;
font-size: 16px;
padding-bottom: 8px;
font-weight: 400;
}
.para_element span {
vertical-align: middle;
}
.join {
font-weight: 600;
color: #FFB628;
}
.text_elements h3 {
font-size: 54px;
color: #000000;
font-weight: 300;
margin-bottom: 30px;
}
.para_element p {
color: #000000;
font-size: 18px;
font-weight: 600;
}
.para_element ol,
ul {
padding-left: 20px;
}
.listing {
display: flex;
align-items: center;
margin-top: 20px;
}
.icon img {
width: 36px;
}
.icon {
margin-right: 8px;
}
.listing p {
color: #000000;
font-size: 16px;
font-weight: 600;
margin-bottom: 0;
}
@media screen and (max-width: 1199.99px) {
.Community {
padding: 40px 0px;
}
}
@media screen and (max-width: 992px) {
.Community .col-md-2 {
display: none;
}
.text_elements h3 {
font-size: 48px;
}
}
@media screen and (max-width: 992px) {
.Community .col-md-4 {
width: 50% !important;
}
}
@media screen and (max-width: 766.99px) {
.Community .col-md-4 {
margin: auto;
width: 100% !important;
padding: 20px 40px;
}
}
@media screen and (max-width: 568px) {
.text_elements h3 {
font-size: 36px;
}
}
/* Join the community css ends here */
.carousel-container {
position: relative;
top: 0;
overflow: hidden;
}
@media screen and (min-width: 1700px) {
.app__screenshots__row {
max-width: 1440px;
margin: auto;
}
}
.carousel-container>img:nth-child(1) {
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4499;
top: 0px;
width: 24.78rem !important;
height: 808px;
overflow: hidden;
@media screen and (min-width: 1700px) {
width: 24rem !important;
height: 785px;
}
@media screen and (max-width: 1460px) {
width: 348px !important;
height: 710px;
}
@media screen and (max-width: 1281px) {
height: 708px !important;
}
@media screen and (max-width: 1080px) {
width: 340px !important;
}
}
.carousel>div>div>.item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.carousel>div>div>.item>img {
width: 22.3rem !important;
height: 809px !important;
object-fit: contain !important;
margin-top: 0rem !important;
@media screen and (min-width: 1700px) {
width: 24rem !important;
height: 760px !important;
margin-top: 1rem !important;
}
@media screen and (max-width: 1460px) {
width: 312px !important;
padding-right: 0px !important;
object-fit: contain !important;
margin-top: -48px !important;
}
@media screen and (max-width: 1281px) {
height: 1000px !important;
margin-top: -145px !important;
}
}
.dicover_the_power__row {
background-color: #FFB628;
/* base background color */
height: auto;
margin: 60px 0 80px 0;
padding: 100px 20px;
position: relative;
border-radius: 70px;
transform: skew(5deg, 5deg);
overflow: hidden;
/* ensure pseudo-element stays inside */
@media screen and (max-width: 598px) {
transform: skew(2deg, 2deg);
border-radius: 40px !important;
padding: 100px 30px;
}
}
.dicover_the_power__row::before {
content: "";
position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 0;
background: url('../images/adc9469a2c6be0572000201386921c72781b69a3.webp') no-repeat center center;
background-size: cover;
opacity: 0.1;
z-index: 0;
/* Animation */
animation: bgAnimate 20s linear infinite;
}
.discover__grid__row,
.dicover_the_power__row>h3,
.dicover_the_power__row>p {
transform: skew(-5deg, -5deg);
@media screen and (max-width: 598px) {
transform: skew(-2deg, -2deg);
border-radius: 40px !important;
}
}
@keyframes bgAnimate {
0% {
transform: scale(1) translate(0, 0);
}
50% {
transform: scale(1.1) translate(10px, 10px);
}
100% {
transform: scale(1) translate(0, 0);
}
}
.dicover_the_power__row * {
position: relative;
z-index: 1;
/* ensures text/content stays above image */
}
@media screen and (max-width: 598px) {
.carousel-container>img:nth-child(1) {
height: 425px !important;
width: 200px !important;
}
.carousel>div>div>.item>img {
height: 427px !important;
margin-top: 0px !important;
width: 188px !important;
}
.choose__traveinstein__row {
margin-top: 4rem;
}
}
@media screen and (max-width: 320px) {
.carousel-container>img:nth-child(1) {
height: 343px !important;
width: 150px !important;
}
.carousel>div>div>.item>img {
height: 345px !important;
width: 150px !important;
}
.choose__traveinstein__row {
margin-top: 4rem;
}
}
.arrow_X {
position: absolute !important;
bottom: -100% !important;
left: initial !important;
right: 100px !important;
top: initial !important;
@media screen and (max-width: 714px) {
bottom: -118% !important;
}
}
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300');
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-family: 'Arima Madurai', cursive;
color: black;
font-size: 4rem;
letter-spacing: -3px;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
position: relative;
z-index: 3;
}
.AI__voice__grid__row {
position: relative;
/* makes birds positioned relative to this */
overflow: hidden;
z-index: 2;
/* hides birds once they fly out */
}
canvas {
/* z-index: 1; */
position: absolute;
top: 0;
left: 0%;
bottom: 0;
}
@keyframes anim {
from {
transform: translateX(200%);
}
to {
transform: translateX(-200%);
}
}
@keyframes anime {
from {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
.c1.one,
.c2.one {
top: -260px;
left: 0px;
}
.c1.two,
.c2.two {
top: -200px;
left: 100px;
}
.c1.three,
.c2.three {
top: -240px;
right: 100px;
}
.c1.four,
.c22.four {
top: -180px;
right: 0px;
}
.c2 .one {
top: -209px;
}
@media (max-width: 1023px) {
.c2.one {
left: -80px;
}
.c2.two {
left: -120px;
}
.c2.three {
right: 220px;
}
.c2.four {
right: 220px;
}
}
.c1 {
animation: anime 1000s linear infinite forwards;
}
.c2 {
transform: translateX(200%);
animation: anim 1000s linear infinite forwards;
}
.snow__fall__row {
position: relative;
/* overflow: hidden; */
}
/* make sure section is relative */
.Travelers {
position: relative;
overflow: hidden;
}
.hearts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
/* individual heart */
.hearts::before,
.hearts::after {
content: "❤";
position: absolute;
font-size: 20px;
color: rgba(255, 0, 100, 0.6);
animation: floatHearts 6s linear infinite;
}
.hearts::after {
left: 60%;
font-size: 28px;
animation-delay: 3s;
color: rgba(255, 100, 150, 0.5);
}
@keyframes floatHearts {
0% {
transform: translateY(100%) scale(0.6);
opacity: 0;
}
30% {
opacity: 1;
}
100% {
transform: translateY(-120%) scale(1.2);
opacity: 0;
}
}
.AI_Voice__guide__row {
position: relative;
overflow: hidden;
}
.bubbles-container {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.bubbles-container span {
position: absolute;
bottom: -50px;
/* start from below */
width: 15px;
height: 15px;
background: #FFB628;
border-radius: 10px;
animation: bubbleUp 6s linear infinite;
}
@keyframes bubbleUp {
0% {
transform: translateY(0) scale(0.6);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-120vh) scale(1.2);
opacity: 0;
}
}
.Traveinstein .Community {
position: relative;
overflow: hidden;
/* keep bubbles inside */
}
.bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* clickable elements not blocked */
overflow: hidden;
z-index: 0;
}
.bubbles span {
position: absolute;
bottom: -50px;
background: #FFB628;
/* bubble color */
border-radius: 10px;
animation: bubbleUp 8s linear infinite;
}
@keyframes bubbleUp {
0% {
transform: translateY(0) scale(0.6);
opacity: 1;
}
100% {
transform: translateY(-100vh) scale(1.2);
opacity: 0;
}
}
.choose__traveinstein__grid__row {
position: relative;
overflow: hidden;
/* keep bubbles inside */
}
.map-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.map-bubbles .bubble {
position: absolute;
width: 15px;
height: 15px;
background: red;
border-radius: 50%;
box-shadow: 0 0 10px red;
animation: pulse 3s infinite ease-in-out;
opacity: 0.8;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.6;
}
50% {
transform: scale(1.5);
opacity: 0.3;
}
100% {
transform: scale(0.9);
opacity: 0.6;
}
}
.rain-section {
position: relative;
overflow: hidden;
}
.rain-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* don't block clicks */
z-index: 1;
}
.rain-overlay span {
position: absolute;
width: 2px;
height: 15px;
background: rgba(173, 216, 230, 0.6);
/* light blue raindrop */
border-radius: 50%;
animation: rainFall linear infinite;
}
@keyframes rainFall {
0% {
transform: translateY(-20px);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}
.flower-flow-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 99;
}
.flower {
position: absolute;
bottom: -50px;
width: 50px;
height: 50px;
background-image: url('../images/Group\ 21440.png');
/* Replace with your flower image path */
background-size: contain;
background-repeat: no-repeat;
opacity: 1;
animation: floatUp 8s infinite ease-in;
}
/* Randomize position and delay */
.flower:nth-child(1) {
left: 10%;
animation-delay: 0s;
}
.flower:nth-child(2) {
left: 30%;
animation-delay: 2s;
}
.flower:nth-child(3) {
left: 50%;
animation-delay: 4s;
}
.flower:nth-child(4) {
left: 70%;
animation-delay: 1s;
}
.flower:nth-child(5) {
left: 90%;
animation-delay: 3s;
}
@keyframes floatUp {
0% {
transform: translateY(0) scale(0.8) rotate(0deg);
opacity: 1;
}
50% {
transform: translateY(-200px) scale(1) rotate(180deg);
opacity: 1;
}
100% {
transform: translateY(-400px) scale(0.8) rotate(360deg);
opacity: 1;
}
}
.new_flow {
position: relative;
}
.carousel-container>.slick-slider>.slick-list>.slick-track>.slick-center>img {
border-radius: 40px !important;
}
.work__center__img__row>img {
mix-blend-mode: darken;
}
@media screen and (max-width: 1080px) {
.Visual_grid .intro_visual {
background-color: rgba(255, 255, 255, 0.8) !important;
padding: 20px 20px !important;
backdrop-filter: blur(20px);
}
.Visual_grid div:nth-child(2) {
background-color: transparent;
}
}
@media screen and (max-width: 598px) {
.Visual_grid .intro_visual {
background-color: rgba(255, 255, 255, 0.2) !important;
padding: 40px 20px !important;
backdrop-filter: blur(14px);
}
.Visual_grid div:nth-child(2) {
max-width: 300px !important;
}
}
@media screen and (max-width: 598px) {
.blue__row__content>ul>li, .yellow__row__content>ul>li{
margin-bottom: 10px;
}
.bottom__mobileX{
padding-bottom: 150px;
}
.discover__grid__row>div>h4{
font-size: 18px;
margin-top: 0px;
}
.discover__grid__row>div{
padding: 20px 30px 10px 30px;
}
}
@media screen and (max-width: 360px) {
.bottom__mobileX{
padding-bottom: 230px;
}
}