:root {
--primary-color: #FA8B62;/*#FF6B35;*/
--secondary-color: #2D88FF;
--dark-text:#333;
--light-text:#6C757D;
--light-bg:#F8F9FA;
--bs-nav-link-font-size:16px
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');


body {
font-family: 'Open Sans', sans-serif;
color:var(--dark-text)
}

.btn-primary {
background-color:var(--primary-color);
border-color:var(--primary-color)
}

.btn-primary:hover {
background-color:#e55a29;
border-color:#e55a29
}

.btn-secondary {
background-color:var(--secondary-color);
border-color:var(--secondary-color)
}

.btn-outline-primary {
color:var(--primary-color);
border-color:var(--primary-color)
}

.btn-outline-primary:hover {
background-color:var(--primary-color);
border-color:var(--primary-color)
}

.text-primary {
color:var(--primary-color)!important
}

.navbar {
box-shadow:0 2px 10px #0000001a;
padding:15px 0
}

.hero-section {
padding:50px 0
}

.category-icon {
font-size:24px;
margin-bottom:10px;
color:var(--primary-color)
}

.category-card {
text-align:center;
padding:20px;
border-radius:10px;
background-color:#fff;
box-shadow:0 5px 15px #0000000d;
transition:transform .3s;
margin-bottom:20px
}

.category-card:hover {
transform:translateY(-5px)
}

.app-screenshot {
box-shadow:0 10px 30px #0000001a;
border-radius:20px;
overflow:hidden
}

.benefits-map {
background-color:#FFF5F0;
border-radius:15px;
padding:30px;
position:relative
}

.benefit-item {
background-color:#fff;
border-radius:10px;
padding:15px;
box-shadow:0 5px 15px #0000000d;
margin-bottom:20px
}

.struggle-section {
background-color:#F8F9FA;
padding:60px 0
}

.challenge-card {
background-color:#fff;
border-radius:10px;
padding:20px;
box-shadow:0 5px 15px #0000000d;
height:100%
}

.faq-item {
border:1px solid #e9ecef;
border-radius:10px;
margin-bottom:15px;
overflow:hidden
}

.faq-header {
padding:15px 20px;
background-color:#fff;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center
}

.faq-body {
padding:15px 20px;
border-top:1px solid #e9ecef
}

.video-thumbnail {
border-radius:10px;
overflow:hidden;
position:relative
}

.play-button {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:60px;
height:60px;
background-color:#ff6b35cc;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:24px
}

footer {
background-color:var(--secondary-color);
color:#fff;
padding:40px 0 20px
}

.btn-app {
display:inline-flex;
align-items:center;
background-color:#000;
color:#fff;
border-radius:8px;
padding:8px 16px;
margin-right:10px;
text-decoration:none
}

.btn-app:hover {
background-color:#333;
color:#fff
}

.app-icon {
font-size:24px;
margin-right:8px
}

.chat-bubble {
background-color:#f0f2f5;
border-radius:18px;
padding:15px 20px;
margin-bottom:10px;
display:inline-block;
max-width:80%
}

.customer-struggle,.business-struggle {
position:relative
}

.avatar {
width:40px;
height:40px;
border-radius:50%;
background-color:#ddd;
display:flex;
align-items:center;
justify-content:center;
position:absolute
}

.gradient-bg {
	/*background: linear-gradient(90deg, #ff7e5f, #5f92ff);*/
	background:linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.gradient-btn {
background:linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border:none;
color:#fff;
font-size:16px;
padding:12px 24px;
border-radius:30px;
cursor:pointer;
transition:.3s;
text-align:center;
box-shadow:0 4px 6px #0000001a
}

.gradient-btn:hover {
opacity:.9
}

.gradient-outline-btn {
background:transparent;
border:2px solid;
border-image-source:linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-image-slice:1;
color:transparent;
font-size:16px;
padding:12px 24px;
border-radius:30px;
cursor:pointer;
transition:.3s;
text-transform:capitalize;
display:inline-block;
text-align:center;
background-clip:text;
-webkit-background-clip:text;
background-image:linear-gradient(90deg, var(--primary-color), var(--secondary-color))
}

.gradient-outline-btn:hover {
opacity:.8
}

.bg-light {
--bs-bg-opacity:1;
background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
z-index:0;
position:relative
}

.blob-container img,svg {
vertical-align:middle;
width:25px
}

.image-shadow img {
object-fit:contain;
-webkit-filter:drop-shadow(5px 5px 5px #0000001a) drop-shadow(5px 5px 5px #0000001a);
filter:drop-shadow(5px 5px 5px #0000001a) drop-shadow(5px 5px 5px #0000001a)
}

.app-link img {
width:180px
}

.features-container {
width:50%;
padding:40px
}

.feature-item {
display:flex;
align-items:center;
padding:20px;
margin-bottom:20px;
border-radius:10px;
cursor:pointer;
transition:all .3s ease
}

.customer .feature-item.active {
border:1px solid var(--primary-color);
background-color:#fff8f6
}

.business .feature-item.active {
border:1px solid var(--secondary-color);
background-color:#0d6efd0f
}

.feature-icon {
display:flex;
align-items:center;
justify-content:center;
margin-right:20px;
flex-shrink:0
}

.feature-icon svg {
width:40px;
height:40px;
fill:#fff
}

.feature-text h3 {
font-size:20px;
margin-bottom:5px;
color:#333
}

.feature-text p {
font-size:14px;
color:#666;
line-height:1.5;
margin-bottom:0
}

.cta-button {
display:block;
width:fit-content;
text-align:center;
padding:15px;
background-color:var(--primary-color);
color:#fff;
border:none;
border-radius:5px;
font-size:18px;
cursor:pointer;
transition:background-color .3s ease;
margin-top:20px;
text-decoration:none;
font-weight:700
}

.cta-button:hover {
background-color:#e86c4d
}

.cta-button2 {
display:block;
width:fit-content;
text-align:center;
padding:15px;
background-color:var(--secondary-color);
color:#fff;
border:none;
border-radius:5px;
font-size:18px;
cursor:pointer;
transition:background-color .3s ease;
margin-top:20px;
text-decoration:none;
font-weight:700
}

.cta-button2:hover {
background-color:#e86c4d
}

.image-container {
width:50%;
position:relative;
overflow:hidden
}

.slider {
display:flex;
transition:transform .5s ease;
height:100%
}

.slide {
min-width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
height:100%
}

.slide img {
max-width:100%;
max-height:100%;
object-fit:contain;
-webkit-filter:drop-shadow(5px 5px 5px #0000001a) drop-shadow(5px 5px 5px #0000001a);
filter:drop-shadow(5px 5px 5px #0000001a) drop-shadow(5px 5px 5px #0000001a)
}

.slide {
min-width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
height:100%;
opacity:0;
transition:opacity .5s ease
}

.slide.active-slide {
opacity:1
}

.slider {
display:flex;
transition:transform .7s ease;
height:100%
}

.main-title {
text-align:center;
font-weight:700;
font-size:2.5rem;
margin:30px 0;
color:#333
}

.struggle-card {
border-radius:15px;
box-shadow:0 4px 15px #0000001a;
overflow:hidden;
background-color:#fff;
margin:0 70px
}

.struggle-title {
font-size:1.5rem;
font-weight:600;
padding:20px;
color:#444
}

.struggle-title .icon {
color:#fff;
background-color:#ff6b6b;
padding:5px;
border-radius:50%;
margin-right:10px;
width:30px;
height:30px;
display:inline-flex;
align-items:center;
justify-content:center
}

.struggle-list {
padding:0 20px
}

.struggle-list li {
margin-bottom:10px;
color:#666;
display:flex;
align-items:flex-start
}

.struggle-list .bullet {
color:#aaa;
margin-right:10px;
font-size:.8rem
}

.card-img-top {
height:250px;
object-fit:cover
}

.icon-bubble {
position:absolute;
width:60px;
height:60px;
background-color:#ffe0d4;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
z-index:-1;
position:absolute;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
animation-name:float;
animation-duration:8s;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-direction:alternate
}

.bubble-1 {
top:15%;
left:3%;
animation-delay:0s
}

.bubble-2 {
bottom:15%;
left:10%;
animation-delay:1s;
animation-duration:9s
}

.bubble-3 {
top:10%;
right:5%;
animation-delay:2s;
animation-duration:10s
}

.bubble-4 {
bottom:5%;
left:3%;
animation-delay:3s;
animation-duration:7s
}

.bubble-5 {
bottom:45%;
right:45%;
animation-delay:4s;
animation-duration:8.5s
}

.bubble-6 {
top:21%;
left:45%;
animation-delay:5s;
animation-duration:6s
}

.bubble-7 {
bottom:0;
right:0;
animation-delay:3s;
animation-duration:4s
}

.bubble-8 {
bottom:15%;
right:45%;
animation-delay:4s;
animation-duration:5.5s
}

@keyframes float {
0% {
transform:translate(0,0) rotate(0deg)
}

25% {
transform:translate(15px,-15px) rotate(5deg)
}

50% {
transform:translate(0,-30px) rotate(0deg)
}

75% {
transform:translate(-15px,-15px) rotate(-5deg)
}

100% {
transform:translate(0,0) rotate(0deg)
}
}

.container {
position:relative
}

.benefits-container {
display:flex;
min-height:100vh;
width:100%
}

.content-left {
width:40%;
padding:80px 40px;
display:flex;
flex-direction:column;
justify-content:center
}

.content-right {
width:60%;
background-image:url(../img/shape/bg-vector.svg);
background-size:cover;
background-position:center;
position:relative
}

.benefit-cards {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
padding:40px;
width:100%;
height:100%;
align-content:center
}

.card {
background-color:#fff;
border-radius:15px;
padding:25px;
box-shadow:0 4px 15px #0000001a
}

.card-icon {
width:50px;
height:50px;
background-color:#FF7F50;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:15px
}

h1 {
font-size:36px;
margin-bottom:25px;
color:#1a1a1a
}

p {
font-size:16px;
line-height:1.6;
color:#666;
margin-bottom:30px
}

.challenge-card p {
font-size:16px;
line-height:1.6;
color:#666;
margin-bottom:10px
}

.card h3 {
margin-bottom:10px;
font-size:18px
}

.card p {
font-size:14px;
margin-bottom:0
}

.card {
text-align:center;
background:#fff;
padding:20px;
border-radius:12px;
box-shadow:0 4px 10px #0000001a
}

.blob-container {
position:relative;
width:50px;
height:50px;
background:url(../img/shape/vector.svg) no-repeat center;
background-size:contain;
display:flex;
justify-content:center;
align-items:center;
margin:0 auto
}

#business-features .blob-container {
position:relative;
width:50px;
height:50px;
background:url(../img/shape/blue-vector.svg) no-repeat center;
background-size:contain;
display:flex;
justify-content:center;
align-items:center;
margin:0 auto
}

.icon {
font-size:24px;
color:#fff
}

.logo_container {
width:100%;
overflow:hidden;
position:relative
}

.logo_items {
display:flex;
width:max-content;
animation:scroll 30s linear infinite
}

.logo_items img {
height:35px;
margin:10px 35px;
object-fit:contain
}

@keyframes scroll {
0% {
transform:translateX(0)
}

100% {
transform:translateX(-100%)
}
}

.logo_container:hover .logo_items {
animation-play-state:paused;
animation-play-state:paused
}

@media (max-width: 768px) {
.logo_items img {
height:30px;
margin:0 15px
}
}

.swiper {
width:100%
}

.swiper-slide {
background-position:center;
background-size:cover;
width:300px;
height:500px;
border-radius:8px;
overflow:hidden;
box-shadow:0 15px 30px #0000004d;
transition:transform .3s;
opacity:.7;
cursor:pointer
}

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

.swiper-slide-active {
transform:scale(1.05);
opacity:1;
z-index:2
}

.swiper-pagination {
position:relative;
margin-top:20px
}

.swiper-button-next,.swiper-button-prev {
color:#333;
background-color:#fffc;
width:40px;
height:40px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center
}

.swiper-button-next:after,.swiper-button-prev:after {
font-size:18px;
font-weight:700
}

.youtube-container {
position:relative;
width:100%;
height:100%;
overflow:hidden
}

iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none
}

h1 {
text-align:center;
margin-bottom:30px;
color:#333
}

.you-layout {
width:100%;
height:100%;
background:#ff00000a;
z-index:10;
position:absolute
}

.swiper-slide-active .you-layout {
z-index:-10
}

.ticker-tape {
color:#fff;
overflow:hidden;
white-space:nowrap;
position:relative
}

.ticker-content {
display:inline-block;
animation:ticker 30s linear infinite;
padding-left:100%
}

@keyframes ticker {
0% {
transform:translateX(0)
}

100% {
transform:translateX(-100%)
}
}

.btn.btn-social {
margin-right:5px;
width:37px;
height:37px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
border:1px solid #ffffff1a;
border-radius:40px;
transition:.3s;
box-shadow:5px 5px 5px #0000001a
}

.btn.btn-social:hover {
color:var(--primary-color);
background:#fff3
}

.go-top {
position:fixed;
bottom:5%;
right:3%;
padding:10px 15px;
display:none;
cursor:pointer;
-webkit-font-smoothing:antialiased;
border-radius:50px;
background-color:#e5e8f073;
color:#6a6e7c;
z-index:10
}

.go-top:after {
font-family:FontAwesome;
content:"\f106"
}

.go-top:hover {
color:#ff7f50;
background:#ff7f5038
}

@media (max-width: 768px) {
.container {
flex-direction:column
}

.navbar .container {
flex-direction:row
}

.features-container,.image-container {
width:100%
}

.image-container {
order:-1;
height:350px
}

.card-img-top {
height:200px
}

.main-title {
font-size:2rem;
margin:20px 0
}

.struggle-card {
margin-bottom:30px
}

.icon-bubble {
width:50px;
height:50px
}
}

@media (max-width: 992px) {
.benefit-cards {
grid-template-columns:repeat(2,1fr)
}

.benefits-container {
flex-direction:column
}

.content-left,.content-right {
width:100%
}

.content-right {
width:100%;
background-image:url(../img/shape/bg-vector.svg);
background-size:cover;
background-position:center;
position:relative;
right:0
}

.benefit-cards {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
padding:15px;
width:100%;
height:100%;
align-content:center
}

.struggle-card {
border-radius:10px;
margin:0 20px
}
}

@media only screen and (max-width: 767px) {
.gradient-btn {
margin-bottom:15px
}

.navbar {
padding:5px 0
}

.app-link img {
width:120px
}

.swiper-slide {
width:200px;
height:400px
}

.content-left {
width:100%;
padding:40px 15px;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center
}

.card {
text-align:center;
background:#fff;
padding:10px;
border-radius:6px;
box-shadow:0 4px 10px #0000001a
}

.card h3 {
margin-bottom:10px;
font-size:15px
}

.card p {
font-size:12px;
margin-bottom:0
}

.benefit-cards {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
padding:15px;
width:100%;
height:100%;
align-content:center
}

.benefits-container . {
width:100%;
margin-right:auto;
margin-left:auto
}

.benefits-section .container {
padding:0;
margin-right:auto;
margin-left:auto
}

.cta-button,.cta-button2 {
margin:auto
}

.align-items-center {
align-items:center!important;
text-align:center
}

.align-items-center .d-flex {
display:flex!important;
justify-content:center
}

.slide {
padding:10px
}

.features-container {
width:100%;
padding:15px
}

.feature-item {
display:flex;
align-items:center;
padding:10px;
margin-bottom:10px;
border-radius:10px;
cursor:pointer;
transition:all .3s ease
}

.feature-text h3 {
font-size:15px;
margin-bottom:5px;
color:#333
}

.feature-text p {
font-size:12px;
color:#666;
line-height:1.5;
margin-bottom:0
}

.struggle-card {
border-radius:10px;
margin:0;
width:100%
}

.card-img-top {
height:180px
}

.struggle-title .icon {
padding:0;
margin-right:10px;
width:20px;
height:20px;
font-size:13px
}

.struggle-title {
font-size:16px;
font-weight:500;
padding:10px
}

.struggle-list li {
margin-bottom:10px;
align-items:flex-start;
font-size:12px
}

.challenge-card {
border-radius:10px;
padding:15px
}

.challenge-card h5 {
font-size:16px
}

.challenge-card p {
font-size:14px;
color:#666;
margin-bottom:0
}

.faq-item h5 {
font-size:16px
}

.faq-item p {
font-size:14px;
color:#666;
margin-bottom:0
}

footer .d-flex {
display:flex!important;
flex-direction:row;
justify-content:center
}
}