*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
font-size:16px;
}
body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
line-height:1.6;
color:#1a1a1a;
background-color:#ffffff;
overflow-x:hidden;
}
.loading-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
display:flex;
align-items:center;
justify-content:center;
z-index:10000;
transition:opacity 0.5s ease,visibility 0.5s ease;
}
.loading-screen.hidden{
opacity:0;
visibility:hidden;
}
.loading-content{
text-align:center;
color:white;
}
.loading-logo{
font-size:4rem;
margin-bottom:1rem;
animation:pulse 2s infinite;
}
.loading-text{
font-size:1.5rem;
font-weight:600;
margin-bottom:2rem;
letter-spacing:2px;
}
.loading-spinner{
width:50px;
height:50px;
border:3px solid rgba(255,255,255,0.3);
border-top:3px solid white;
border-radius:50%;
margin:0 auto;
animation:spin 1s linear infinite;
}
@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.1);}
}
@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.container{
width:100%;
margin:0 auto;
padding:0 15px;
max-width:320px;
}
@media (min-width:480px){
.container{
max-width:480px;
padding:0 20px;
}
}
@media (min-width:768px){
.container{
max-width:768px;
padding:0 25px;
}
}
@media (min-width:1024px){
.container{
max-width:1024px;
padding:0 30px;
}
}
@media (min-width:1200px){
.container{
max-width:1200px;
padding:0 20px;
}
}
@media (min-width:1440px){
.container{
max-width:1440px;
}
}
@media (min-width:1920px){
.container{
max-width:1800px;
}
}
.navbar{
position:fixed;
top:0;
left:0;
right:0;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(0,0,0,0.1);
z-index:1000;
transition:all 0.3s ease;
}
body.menu-open{
overflow:hidden;
}
.navbar.scrolled{
background:rgba(255,255,255,0.98);
box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.nav-container{
width:100%;
margin:0 auto;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
height:60px;
max-width:100%;
}
@media (max-width:480px){
.nav-container{
padding:0 15px;
height:55px;
}
}
@media (min-width:481px) and (max-width:768px){
.nav-container{
padding:0 20px;
height:60px;
}
}
@media (min-width:769px) and (max-width:1024px){
.nav-container{
padding:0 25px;
height:70px;
max-width:1024px;
}
}
@media (min-width:1025px) and (max-width:1366px){
.nav-container{
padding:0 30px;
height:75px;
max-width:1366px;
}
}
@media (min-width:1367px){
.nav-container{
padding:0 40px;
height:80px;
max-width:1800px;
}
}
.nav-brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:#1a1a1a;
}
.brand-icon{
width:35px;
height:35px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1rem;
overflow:hidden;
}
.brand-icon img{
width:100%;
height:100%;
object-fit:contain;
border-radius:6px;
}
.brand-letter{
font-size:1.4rem;
font-weight:800;
color:white;
text-shadow:0 1px 2px rgba(0,0,0,0.2);
letter-spacing:-1px;
}
.brand-text{
display:flex;
flex-direction:column;
}
.brand-name{
font-size:1.3rem;
font-weight:800;
line-height:1;
color:#2c3e50;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-shadow:0 2px 4px rgba(0,0,0,0.1);
letter-spacing:-0.5px;
transition:all 0.3s ease;
}
.brand-name:hover{
transform:translateY(-1px);
filter:brightness(1.1);
}
.brand-subtitle{
font-size:0.75rem;
font-weight:600;
color:#667eea;
letter-spacing:2px;
text-transform:uppercase;
margin-top:2px;
position:relative;
transition:all 0.3s ease;
}
.brand-subtitle::after{
content:'';
position:absolute;
bottom:-2px;
left:0;
width:0;
height:2px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
transition:width 0.3s ease;
}
.nav-brand:hover .brand-subtitle::after{
width:100%;
}
.nav-menu{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:rgba(255,255,255,0.98);
backdrop-filter:blur(20px);
flex-direction:column;
justify-content:center;
align-items:center;
padding:2rem 0;
z-index:999;
list-style:none;
margin:0;
transition:all 0.3s ease;
overflow-y:auto;
transform:translateX(-100%);
opacity:0;
}
.nav-menu.active{
display:flex;
transform:translateX(0);
opacity:1;
}
@media (max-width:480px){
.nav-menu{
padding:1.5rem 0;
}
}
@media (min-width:481px) and (max-width:768px){
.nav-menu{
padding:2rem 0;
}
}
@media (min-width:769px) and (max-width:1024px){
.nav-menu{
position:static;
display:flex;
flex-direction:row;
height:auto;
width:auto;
background:rgba(255,255,255,0.1);
border-radius:25px;
border:1px solid rgba(255,255,255,0.2);
padding:4px;
gap:0.2rem;
overflow:visible;
transform:translateX(0);
opacity:1;
}
}
@media (min-width:1025px) and (max-width:1366px){
.nav-menu{
position:static;
display:flex;
flex-direction:row;
height:auto;
width:auto;
background:rgba(255,255,255,0.1);
border-radius:25px;
border:1px solid rgba(255,255,255,0.2);
padding:5px;
gap:0.4rem;
overflow:visible;
transform:translateX(0);
opacity:1;
}
}
@media (min-width:1367px){
.nav-menu{
position:static;
display:flex;
flex-direction:row;
height:auto;
width:auto;
background:rgba(255,255,255,0.1);
border-radius:25px;
border:1px solid rgba(255,255,255,0.2);
padding:6px;
gap:0.6rem;
overflow:visible;
transform:translateX(0);
opacity:1;
}
}
.nav-link{
text-decoration:none;
color:#4a5568;
font-weight:500;
font-size:1.1rem;
padding:15px 20px;
border-radius:8px;
transition:all 0.3s ease;
position:relative;
background:rgba(255,255,255,0.9);
border:1px solid rgba(102,126,234,0.2);
backdrop-filter:blur(10px);
box-shadow:0 2px 8px rgba(0,0,0,0.05);
white-space:nowrap;
display:block;
width:80%;
text-align:center;
margin:0.8rem 0;
}
.nav-link:hover{
color:white;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-color:transparent;
box-shadow:0 4px 15px rgba(102,126,234,0.3);
transform:translateY(-1px);
}
.nav-link.active{
color:white;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-color:transparent;
box-shadow:0 4px 15px rgba(102,126,234,0.4);
}
@media (max-width:480px){
.nav-link{
font-size:1.2rem;
padding:18px 25px;
margin:1rem 0;
width:85%;
}
}
@media (min-width:481px) and (max-width:768px){
.nav-link{
font-size:1.1rem;
padding:16px 22px;
margin:0.9rem 0;
width:80%;
}
}
@media (min-width:769px) and (max-width:1024px){
.nav-link{
font-size:0.75rem;
padding:5px 8px;
border-radius:20px;
background:rgba(255,255,255,0.8);
display:inline-block;
width:auto;
text-align:center;
margin:0;
}
}
@media (min-width:1025px) and (max-width:1366px){
.nav-link{
font-size:0.8rem;
padding:6px 12px;
border-radius:20px;
background:rgba(255,255,255,0.8);
display:inline-block;
width:auto;
text-align:center;
margin:0;
}
}
@media (min-width:1367px){
.nav-link{
font-size:0.9rem;
padding:8px 16px;
border-radius:20px;
background:rgba(255,255,255,0.8);
display:inline-block;
width:auto;
text-align:center;
margin:0;
}
}
.nav-actions{
display:flex;
align-items:center;
gap:0.5rem;
}
.nav-phone{
display:none;
}
@media (max-width:480px){
.nav-actions{
display:none;
}
}
@media (min-width:481px) and (max-width:768px){
.nav-actions{
gap:0.3rem;
}
.nav-actions .btn{
padding:6px 10px;
font-size:0.7rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.nav-phone{
display:flex;
align-items:center;
gap:6px;
text-decoration:none;
color:#4a5568;
font-weight:500;
font-size:0.75rem;
padding:5px 8px;
border-radius:8px;
transition:all 0.3s ease;
}
.nav-phone:hover{
color:#667eea;
background:rgba(102,126,234,0.1);
}
.nav-actions .btn{
padding:6px 12px;
font-size:0.75rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.nav-phone{
display:flex;
align-items:center;
gap:6px;
text-decoration:none;
color:#4a5568;
font-weight:500;
font-size:0.8rem;
padding:6px 10px;
border-radius:8px;
transition:all 0.3s ease;
}
.nav-phone:hover{
color:#667eea;
background:rgba(102,126,234,0.1);
}
.nav-actions .btn{
padding:8px 16px;
font-size:0.8rem;
}
}
@media (min-width:1367px){
.nav-phone{
display:flex;
align-items:center;
gap:6px;
text-decoration:none;
color:#4a5568;
font-weight:500;
font-size:0.85rem;
padding:8px 12px;
border-radius:8px;
transition:all 0.3s ease;
}
.nav-phone:hover{
color:#667eea;
background:rgba(102,126,234,0.1);
}
.nav-actions .btn{
padding:10px 20px;
font-size:0.9rem;
}
}
.hamburger{
display:flex;
flex-direction:column;
cursor:pointer;
gap:4px;
padding:8px;
border-radius:4px;
transition:all 0.3s ease;
}
.hamburger:hover{
background:rgba(102,126,234,0.1);
}
.hamburger span{
width:25px;
height:3px;
background:#4a5568;
border-radius:2px;
transition:all 0.3s ease;
}
.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(6px,6px);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}
@media (min-width:769px){
.hamburger{
display:none;
}
}
.btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:10px 20px;
border:none;
border-radius:12px;
font-weight:600;
font-size:0.85rem;
text-decoration:none;
cursor:pointer;
transition:all 0.3s ease;
position:relative;
overflow:hidden;
}
@media (min-width:768px){
.btn{
gap:7px;
padding:11px 22px;
font-size:0.9rem;
}
}
@media (min-width:1024px){
.btn{
gap:8px;
padding:12px 24px;
font-size:0.95rem;
}
}
.btn-primary{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:white;
box-shadow:0 4px 15px rgba(102,126,234,0.4);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(102,126,234,0.6);
}
.btn-outline{
background:transparent;
color:#667eea;
border:2px solid #667eea;
}
.btn-outline:hover{
background:#667eea;
color:white;
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(102,126,234,0.3);
}
.btn-sm{
padding:4px 8px;
font-size:0.75rem;
min-width:auto;
border-radius:4px;
}
.btn-large{
padding:16px 32px;
font-size:1.1rem;
}
.hero{
min-height:100vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
}
.hero-background{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.hero-particles{
position:absolute;
width:100%;
height:100%;
background-image:
radial-gradient(circle at 20% 80%,rgba(102,126,234,0.1) 0%,transparent 50%),
radial-gradient(circle at 80% 20%,rgba(118,75,162,0.1) 0%,transparent 50%),
radial-gradient(circle at 40% 40%,rgba(102,126,234,0.05) 0%,transparent 50%);
animation:float 20s ease-in-out infinite;
}
.hero-gradient{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(135deg,rgba(102,126,234,0.05) 0%,rgba(118,75,162,0.05) 100%);
}
@keyframes float{
0%,100%{transform:translateY(0px) rotate(0deg);}
33%{transform:translateY(-30px) rotate(1deg);}
66%{transform:translateY(-20px) rotate(-1deg);}
}
.hero-container{
width:100%;
max-width:100%;
margin:0 auto;
padding:15px;
display:flex;
flex-direction:column;
gap:1.5rem;
align-items:center;
position:relative;
z-index:2;
text-align:center;
min-height:calc(100vh - 55px);
justify-content:center;
}
.hero-content{
animation:slideInLeft 1s ease-out;
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
order:1;
}
.hero-visual{
order:2;
width:100%;
}
@media (max-width:480px){
.hero-container{
padding:15px;
gap:1.5rem;
min-height:calc(100vh - 55px);
}
.hero-content{
order:1;
}
.hero-visual{
order:2;
}
}
@media (min-width:481px) and (max-width:768px){
.hero-container{
padding:20px;
gap:2rem;
min-height:calc(100vh - 60px);
}
.hero-content{
order:1;
}
.hero-visual{
order:2;
}
}
@media (min-width:769px) and (max-width:1024px){
.hero-container{
padding:25px;
display:grid;
grid-template-columns:1fr 1fr;
text-align:left;
align-items:center;
gap:2rem;
min-height:calc(100vh - 70px);
}
.hero-content{
align-items:flex-start;
order:unset;
}
.hero-visual{
order:unset;
}
}
@media (min-width:1025px) and (max-width:1366px){
.hero-container{
padding:30px;
display:grid;
grid-template-columns:1.2fr 1fr;
text-align:left;
align-items:center;
gap:2.5rem;
min-height:calc(100vh - 75px);
}
.hero-content{
align-items:flex-start;
order:unset;
}
.hero-visual{
order:unset;
}
}
@media (min-width:1367px){
.hero-container{
max-width:1800px;
padding:40px;
display:grid;
grid-template-columns:1.3fr 1fr;
text-align:left;
align-items:center;
gap:3rem;
min-height:calc(100vh - 80px);
justify-content:center;
}
.hero-content{
align-items:flex-start;
order:unset;
}
.hero-visual{
order:unset;
}
}
.hero-badge{
display:inline-flex;
align-items:center;
gap:6px;
background:rgba(102,126,234,0.1);
color:#667eea;
padding:6px 12px;
border-radius:50px;
font-size:0.75rem;
font-weight:600;
margin-bottom:1rem;
border:1px solid rgba(102,126,234,0.2);
}
.hero-title{
font-size:1.8rem;
font-weight:800;
line-height:1.2;
margin-bottom:1rem;
display:flex;
flex-direction:column;
color:#667eea;
}
.hero-title-main{
font-size:2rem;
font-weight:700;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
margin-bottom:0.5rem;
line-height:1.2;
display:block;
}
.hero-title-sub{
font-size:1.1rem;
font-weight:400;
color:#718096;
display:block;
margin-bottom:1rem;
line-height:1.3;
}
@media (max-width:480px){
.hero-badge{
padding:6px 12px;
font-size:0.7rem;
gap:5px;
margin-bottom:1rem;
}
.hero-title{
font-size:1.6rem;
margin-bottom:1rem;
}
.hero-title-main{
font-size:1.8rem;
}
.hero-title-sub{
font-size:1rem;
margin-bottom:1rem;
}
}
@media (min-width:481px) and (max-width:768px){
.hero-badge{
padding:7px 13px;
font-size:0.75rem;
gap:6px;
margin-bottom:1.1rem;
}
.hero-title{
font-size:2rem;
margin-bottom:1.1rem;
}
.hero-title-main{
font-size:2.3rem;
}
.hero-title-sub{
font-size:1.2rem;
margin-bottom:1.1rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.hero-badge{
padding:8px 15px;
font-size:0.8rem;
gap:7px;
margin-bottom:1.3rem;
}
.hero-title{
font-size:2.3rem;
margin-bottom:1.2rem;
}
.hero-title-main{
font-size:2.7rem;
}
.hero-title-sub{
font-size:1.4rem;
margin-bottom:1.3rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.hero-badge{
padding:8px 16px;
font-size:0.85rem;
gap:8px;
margin-bottom:1.4rem;
}
.hero-title{
font-size:2.6rem;
margin-bottom:1.2rem;
}
.hero-title-main{
font-size:3rem;
}
.hero-title-sub{
font-size:1.5rem;
margin-bottom:1.4rem;
}
}
@media (min-width:1367px){
.hero-badge{
padding:10px 18px;
font-size:0.9rem;
gap:9px;
margin-bottom:1.5rem;
}
.hero-title{
font-size:2.8rem;
line-height:1.1;
margin-bottom:1.3rem;
}
.hero-title-main{
font-size:3.5rem;
}
.hero-title-sub{
font-size:1.8rem;
margin-bottom:1.5rem;
}
}
.hero-title-highlight{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero-description{
font-size:0.95rem;
color:#4a5568;
line-height:1.5;
margin-bottom:1.5rem;
max-width:100%;
text-align:center;
}
.services-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:0.8rem;
margin-bottom:1.5rem;
}
@media (max-width:480px){
.hero-description{
font-size:0.9rem;
margin-bottom:1.3rem;
line-height:1.4;
}
.services-grid{
grid-template-columns:1fr;
gap:0.7rem;
margin-bottom:1.3rem;
}
}
@media (min-width:481px) and (max-width:768px){
.hero-description{
font-size:0.95rem;
margin-bottom:1.5rem;
line-height:1.5;
}
.services-grid{
grid-template-columns:repeat(2,1fr);
gap:0.8rem;
margin-bottom:1.5rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.hero-description{
font-size:1rem;
line-height:1.6;
margin-bottom:1.8rem;
text-align:left;
max-width:450px;
}
.services-grid{
grid-template-columns:repeat(2,1fr);
gap:0.9rem;
margin-bottom:1.8rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.hero-description{
font-size:1.05rem;
line-height:1.6;
margin-bottom:1.9rem;
text-align:left;
max-width:480px;
}
.services-grid{
grid-template-columns:repeat(3,1fr);
gap:1rem;
margin-bottom:1.9rem;
}
}
@media (min-width:1367px){
.hero-description{
font-size:1.1rem;
line-height:1.6;
margin-bottom:2rem;
text-align:left;
max-width:500px;
}
.services-grid{
grid-template-columns:repeat(3,1fr);
gap:1rem;
margin-bottom:2rem;
}
}
.service-item{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.3rem;
padding:0.8rem;
background:rgba(102,126,234,0.1);
border-radius:8px;
border:1px solid rgba(102,126,234,0.2);
transition:all 0.3s ease;
cursor:pointer;
color:#4a5568;
font-weight:500;
min-height:70px;
text-align:center;
font-size:0.8rem;
}
.service-item:hover{
background:rgba(102,126,234,0.2);
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(102,126,234,0.3);
}
.service-item i{
font-size:1.2rem;
color:#667eea;
margin-bottom:0.3rem;
}
@media (max-width:480px){
.service-item{
gap:0.3rem;
padding:0.7rem;
min-height:65px;
font-size:0.75rem;
}
.service-item i{
font-size:1.1rem;
margin-bottom:0.2rem;
}
}
@media (min-width:481px) and (max-width:768px){
.service-item{
gap:0.35rem;
padding:0.8rem;
min-height:70px;
font-size:0.8rem;
}
.service-item i{
font-size:1.2rem;
margin-bottom:0.3rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.service-item{
gap:0.4rem;
padding:0.9rem;
border-radius:9px;
min-height:75px;
font-size:0.85rem;
}
.service-item i{
font-size:1.3rem;
margin-bottom:0.4rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-item{
gap:0.45rem;
padding:0.95rem;
border-radius:10px;
min-height:78px;
font-size:0.9rem;
}
.service-item i{
font-size:1.4rem;
margin-bottom:0.45rem;
}
}
@media (min-width:1367px){
.service-item{
gap:0.5rem;
padding:1rem;
border-radius:10px;
min-height:80px;
font-size:1rem;
}
.service-item i{
font-size:1.5rem;
margin-bottom:0.5rem;
}
}
.service-item span{
font-size:0.9rem;
line-height:1.2;
font-weight:500;
text-transform:capitalize;
text-align:center;
}
.hero-features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1rem;
margin-bottom:2.5rem;
}
.hero-feature{
display:flex;
align-items:center;
gap:0.75rem;
padding:1rem 1.5rem;
background:rgba(102,126,234,0.1);
border-radius:12px;
backdrop-filter:blur(10px);
border:1px solid rgba(102,126,234,0.2);
transition:all 0.3s ease;
cursor:pointer;
color:#4a5568;
font-weight:500;
}
.hero-feature:hover{
background:rgba(102,126,234,0.2);
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(102,126,234,0.3);
}
.hero-feature i{
color:#667eea;
font-size:1.25rem;
min-width:20px;
}
.hero-feature span{
font-size:0.9rem;
line-height:1.3;
}
.hero-buttons{
display:flex;
gap:0.8rem;
justify-content:center;
margin-bottom:2rem;
flex-direction:column;
align-items:center;
}
.btn-primary,.btn-secondary{
padding:0.7rem 1.2rem;
border-radius:25px;
text-decoration:none;
font-weight:600;
font-size:0.85rem;
transition:all 0.3s ease;
display:inline-block;
text-align:center;
min-width:160px;
width:100%;
max-width:220px;
}
@media (max-width:480px){
.hero-buttons{
gap:0.7rem;
margin-bottom:1.5rem;
flex-direction:column;
}
.btn-primary,.btn-secondary{
padding:0.6rem 1rem;
font-size:0.8rem;
min-width:140px;
max-width:200px;
}
}
@media (min-width:481px) and (max-width:768px){
.hero-buttons{
gap:0.8rem;
margin-bottom:2rem;
flex-direction:row;
flex-wrap:wrap;
}
.btn-primary,.btn-secondary{
padding:0.7rem 1.3rem;
font-size:0.85rem;
min-width:150px;
width:auto;
}
}
@media (min-width:769px) and (max-width:1024px){
.hero-buttons{
justify-content:flex-start;
gap:0.9rem;
margin-bottom:2.5rem;
}
.btn-primary,.btn-secondary{
padding:0.8rem 1.6rem;
border-radius:40px;
font-size:0.9rem;
min-width:160px;
}
}
@media (min-width:1025px) and (max-width:1366px){
.hero-buttons{
justify-content:flex-start;
gap:1rem;
margin-bottom:2.8rem;
}
.btn-primary,.btn-secondary{
padding:0.85rem 1.7rem;
border-radius:45px;
font-size:0.95rem;
min-width:170px;
}
}
@media (min-width:1367px){
.hero-buttons{
justify-content:flex-start;
gap:1.2rem;
margin-bottom:3rem;
}
.btn-primary,.btn-secondary{
padding:0.9rem 1.8rem;
border-radius:50px;
font-size:1rem;
min-width:180px;
}
}
.btn-primary{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:white;
box-shadow:0 4px 15px rgba(102,126,234,0.4);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(102,126,234,0.6);
}
.btn-secondary{
background:rgba(255,255,255,0.1);
color:#4a5568;
border:2px solid rgba(102,126,234,0.3);
backdrop-filter:blur(10px);
}
.btn-secondary:hover{
background:rgba(102,126,234,0.1);
border-color:#667eea;
transform:translateY(-2px);
}
.hero-visual{
position:relative;
animation:slideInRight 1s ease-out;
width:100%;
max-width:300px;
margin:0 auto;
}
.hero-image-container{
position:relative;
width:100%;
height:250px;
max-width:300px;
}
@media (max-width:480px){
.hero-visual{
max-width:280px;
order:2;
}
.hero-image-container{
height:220px;
max-width:280px;
}
}
@media (min-width:481px) and (max-width:768px){
.hero-visual{
max-width:320px;
order:2;
}
.hero-image-container{
height:250px;
max-width:320px;
}
}
@media (min-width:769px) and (max-width:1024px){
.hero-visual{
max-width:380px;
}
.hero-image-container{
height:320px;
max-width:380px;
}
}
@media (min-width:1025px) and (max-width:1366px){
.hero-visual{
max-width:450px;
}
.hero-image-container{
height:400px;
max-width:450px;
}
}
@media (min-width:1367px){
.hero-visual{
max-width:none;
}
.hero-image-container{
width:538px;
height:523px;
max-width:none;
}
}
.hero-slider{
width:100%;
height:100%;
position:relative;
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}
@media (max-width:480px){
.hero-slider{
border-radius:8px;
box-shadow:0 4px 15px rgba(0,0,0,0.12);
}
}
@media (min-width:481px) and (max-width:768px){
.hero-slider{
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.14);
}
}
@media (min-width:769px) and (max-width:1024px){
.hero-slider{
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.16);
}
}
@media (min-width:1025px) and (max-width:1366px){
.hero-slider{
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
}
@media (min-width:1367px){
.hero-slider{
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
}
}
.slider-wrapper{
width:100%;
height:100%;
position:relative;
}
.slide{
position:absolute;
top:10px;
left:10px;
width:calc(100% - 20px);
height:calc(100% - 20px);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transition:opacity 0.8s ease-in-out;
border-radius:15px;
border:5px solid;
border-image:linear-gradient(45deg,#667eea,#764ba2,#f093fb,#f5576c) 1;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}
.slide.active{
opacity:1;
}
.slide::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,rgba(102,126,234,0.1) 0%,rgba(118,75,162,0.1) 100%);
border-radius:20px;
}
.slider-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.9);
border:none;
width:35px;
height:35px;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
color:#333;
transition:all 0.3s ease;
z-index:10;
box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.slider-btn:hover{
background:white;
transform:translateY(-50%) scale(1.05);
box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
.prev-btn{
left:10px;
}
.next-btn{
right:10px;
}
@media (max-width:480px){
.slider-btn{
width:30px;
height:30px;
font-size:12px;
}
.prev-btn{
left:8px;
}
.next-btn{
right:8px;
}
}
@media (min-width:481px) and (max-width:768px){
.slider-btn{
width:35px;
height:35px;
font-size:14px;
}
.prev-btn{
left:12px;
}
.next-btn{
right:12px;
}
}
@media (min-width:769px) and (max-width:1024px){
.slider-btn{
width:40px;
height:40px;
font-size:15px;
box-shadow:0 2px 10px rgba(0,0,0,0.16);
}
.slider-btn:hover{
transform:translateY(-50%) scale(1.06);
box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
.prev-btn{
left:15px;
}
.next-btn{
right:15px;
}
}
@media (min-width:1025px) and (max-width:1366px){
.slider-btn{
width:45px;
height:45px;
font-size:16px;
box-shadow:0 3px 12px rgba(0,0,0,0.18);
}
.slider-btn:hover{
transform:translateY(-50%) scale(1.08);
box-shadow:0 5px 18px rgba(0,0,0,0.28);
}
.prev-btn{
left:18px;
}
.next-btn{
right:18px;
}
}
@media (min-width:1367px){
.slider-btn{
width:50px;
height:50px;
font-size:18px;
box-shadow:0 4px 15px rgba(0,0,0,0.2);
}
.slider-btn:hover{
transform:translateY(-50%) scale(1.1);
box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.prev-btn{
left:20px;
}
.next-btn{
right:20px;
}
}
.slider-dots{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:8px;
z-index:10;
}
.dot{
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,0.5);
cursor:pointer;
transition:all 0.3s ease;
border:2px solid transparent;
}
.dot.active{
background:white;
transform:scale(1.15);
border-color:rgba(102,126,234,0.5);
}
.dot:hover{
background:rgba(255,255,255,0.8);
transform:scale(1.08);
}
@media (max-width:480px){
.slider-dots{
bottom:12px;
gap:6px;
}
.dot{
width:8px;
height:8px;
}
.dot.active{
transform:scale(1.12);
}
.dot:hover{
transform:scale(1.05);
}
}
@media (min-width:481px) and (max-width:768px){
.slider-dots{
bottom:15px;
gap:7px;
}
.dot{
width:9px;
height:9px;
}
.dot.active{
transform:scale(1.15);
}
.dot:hover{
transform:scale(1.07);
}
}
@media (min-width:769px) and (max-width:1024px){
.slider-dots{
bottom:18px;
gap:8px;
}
.dot{
width:10px;
height:10px;
}
.dot.active{
transform:scale(1.16);
}
.dot:hover{
transform:scale(1.08);
}
}
@media (min-width:1025px) and (max-width:1366px){
.slider-dots{
bottom:20px;
gap:9px;
}
.dot{
width:11px;
height:11px;
}
.dot.active{
transform:scale(1.18);
}
.dot:hover{
transform:scale(1.09);
}
}
@media (min-width:1367px){
.slider-dots{
bottom:22px;
gap:10px;
}
.dot{
width:12px;
height:12px;
}
.dot.active{
transform:scale(1.2);
}
.dot:hover{
transform:scale(1.1);
}
}
.hero-stats-floating{
display:none;
}
@media (max-width:768px){
.hero-stats-floating{
display:none;
}
}
@media (min-width:769px) and (max-width:1024px){
.hero-stats-floating{
position:absolute;
right:0.8rem;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:0.8rem;
z-index:3;
}
}
@media (min-width:1025px) and (max-width:1366px){
.hero-stats-floating{
position:absolute;
right:1.2rem;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:1rem;
z-index:3;
}
}
@media (min-width:1367px){
.hero-stats-floating{
position:absolute;
right:2rem;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:1.5rem;
z-index:3;
}
}
.floating-stat{
background:rgba(255,255,255,0.95);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.2);
border-radius:12px;
padding:1rem;
display:flex;
align-items:center;
gap:0.75rem;
box-shadow:0 4px 16px rgba(0,0,0,0.1);
transition:all 0.3s ease;
animation:float 6s ease-in-out infinite;
}
@media (min-width:769px) and (max-width:1024px){
.floating-stat{
border-radius:10px;
padding:0.8rem;
gap:0.6rem;
box-shadow:0 4px 16px rgba(0,0,0,0.08);
}
}
@media (min-width:1025px) and (max-width:1366px){
.floating-stat{
border-radius:14px;
padding:1.1rem;
gap:0.8rem;
box-shadow:0 6px 24px rgba(0,0,0,0.1);
backdrop-filter:blur(8px);
}
}
@media (min-width:1367px){
.floating-stat{
border-radius:16px;
padding:1.5rem;
gap:1rem;
box-shadow:0 8px 32px rgba(0,0,0,0.1);
backdrop-filter:blur(10px);
}
}
.floating-stat:hover{
transform:translateY(-5px);
box-shadow:0 12px 40px rgba(0,0,0,0.15);
}
.floating-stat .stat-icon{
width:40px;
height:40px;
background:linear-gradient(135deg,#667eea,#764ba2);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1rem;
}
@media (min-width:768px){
.floating-stat .stat-icon{
width:45px;
height:45px;
border-radius:11px;
font-size:1.1rem;
}
}
@media (min-width:1024px){
.floating-stat .stat-icon{
width:50px;
height:50px;
border-radius:12px;
font-size:1.2rem;
}
}
.floating-stat .stat-content{
display:flex;
flex-direction:column;
}
.floating-stat .stat-number{
font-size:1.5rem;
font-weight:700;
color:#1a1a1a;
line-height:1;
}
.floating-stat .stat-label{
font-size:0.8rem;
color:#4a5568;
font-weight:500;
}
@media (min-width:768px){
.floating-stat .stat-number{
font-size:1.65rem;
}
.floating-stat .stat-label{
font-size:0.85rem;
}
}
@media (min-width:1024px){
.floating-stat .stat-number{
font-size:1.8rem;
}
.floating-stat .stat-label{
font-size:0.9rem;
}
}
.floating-stat{
position:absolute;
background:white;
border-radius:16px;
padding:1rem 1.5rem;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
display:flex;
align-items:center;
gap:12px;
animation:floatStat 3s ease-in-out infinite;
}
.floating-stat:nth-child(1){
top:20%;
right:-20px;
animation-delay:0s;
}
.floating-stat:nth-child(2){
bottom:30%;
left:-20px;
animation-delay:1s;
}
.floating-stat:nth-child(3){
top:60%;
right:-30px;
animation-delay:2s;
}
@keyframes floatStat{
0%,100%{transform:translateY(0px);}
50%{transform:translateY(-10px);}
}
.stat-icon{
width:40px;
height:40px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1rem;
}
.stat-content{
display:flex;
flex-direction:column;
}
.stat-number{
font-size:1.5rem;
font-weight:700;
color:#1a1a1a;
line-height:1;
}
.stat-label{
font-size:0.8rem;
color:#4a5568;
font-weight:500;
}
.hero-scroll-indicator{
position:absolute;
bottom:2rem;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
color:#4a5568;
font-size:0.85rem;
animation:bounce 2s infinite;
}
.scroll-mouse{
width:24px;
height:40px;
border:2px solid #4a5568;
border-radius:12px;
position:relative;
}
.scroll-wheel{
width:4px;
height:8px;
background:#4a5568;
border-radius:2px;
position:absolute;
top:8px;
left:50%;
transform:translateX(-50%);
animation:scrollWheel 2s infinite;
}
@keyframes bounce{
0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);}
40%{transform:translateX(-50%) translateY(-10px);}
60%{transform:translateX(-50%) translateY(-5px);}
}
@keyframes scrollWheel{
0%{opacity:1;top:8px;}
100%{opacity:0;top:20px;}
}
@keyframes slideInLeft{
from{
opacity:0;
transform:translateX(-50px);
}
to{
opacity:1;
transform:translateX(0);
}
}
@keyframes slideInRight{
from{
opacity:0;
transform:translateX(50px);
}
to{
opacity:1;
transform:translateX(0);
}
}
section{
padding:2rem 0;
}
@media (max-width:480px){
section{
padding:1.5rem 0;
}
}
@media (min-width:481px) and (max-width:768px){
section{
padding:2.5rem 0;
}
}
@media (min-width:769px) and (max-width:1024px){
section{
padding:3.5rem 0;
}
}
@media (min-width:1025px) and (max-width:1366px){
section{
padding:4rem 0;
}
}
@media (min-width:1367px){
section{
padding:5rem 0;
}
}
.section-header{
text-align:center;
margin-bottom:1.5rem;
}
@media (max-width:480px){
.section-header{
margin-bottom:1.2rem;
}
}
@media (min-width:481px) and (max-width:768px){
.section-header{
margin-bottom:2rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.section-header{
margin-bottom:2.5rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.section-header{
margin-bottom:3rem;
}
}
@media (min-width:1367px){
.section-header{
margin-bottom:4rem;
}
}
.section-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(102,126,234,0.1);
color:#667eea;
padding:8px 16px;
border-radius:50px;
font-size:0.85rem;
font-weight:600;
margin-bottom:1rem;
border:1px solid rgba(102,126,234,0.2);
}
.section-title{
font-size:1.8rem;
font-weight:700;
color:#1a1a1a;
margin-bottom:1rem;
line-height:1.2;
}
@media (max-width:480px){
.section-title{
font-size:1.6rem;
}
}
@media (min-width:481px) and (max-width:768px){
.section-title{
font-size:1.9rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.section-title{
font-size:2.1rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.section-title{
font-size:2.3rem;
}
}
@media (min-width:1367px){
.section-title{
font-size:2.5rem;
}
}
.section-description{
font-size:0.95rem;
color:#4a5568;
max-width:100%;
margin:0 auto;
line-height:1.6;
padding:0 1rem;
}
@media (max-width:480px){
.section-description{
font-size:0.9rem;
max-width:100%;
padding:0 0.5rem;
}
}
@media (min-width:481px) and (max-width:768px){
.section-description{
font-size:0.95rem;
max-width:450px;
padding:0;
}
}
@media (min-width:769px) and (max-width:1024px){
.section-description{
font-size:1rem;
max-width:500px;
}
}
@media (min-width:1025px) and (max-width:1366px){
.section-description{
font-size:1.05rem;
max-width:550px;
}
}
@media (min-width:1367px){
.section-description{
font-size:1.1rem;
max-width:600px;
}
}
.services{
background:#f8fafc;
}
.services-grid{
display:grid;
grid-template-columns:1fr;
gap:1.5rem;
max-height:none;
overflow:visible;
}
@media (max-width:480px){
.services-grid{
grid-template-columns:1fr;
gap:1rem;
}
}
@media (min-width:481px) and (max-width:768px){
.services-grid{
grid-template-columns:1fr;
gap:1.3rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.services-grid{
grid-template-columns:repeat(2,1fr);
gap:1.5rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.services-grid{
grid-template-columns:repeat(2,1fr);
gap:1.8rem;
}
}
@media (min-width:1367px){
.services-grid{
grid-template-columns:repeat(3,1fr);
gap:2rem;
}
}
.service-card{
background:white;
border-radius:16px;
padding:1.5rem;
box-shadow:0 2px 12px rgba(0,0,0,0.08);
transition:all 0.3s ease;
position:relative;
overflow:hidden;
}
@media (max-width:480px){
.service-card{
border-radius:12px;
padding:1.2rem;
box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
}
@media (min-width:481px) and (max-width:768px){
.service-card{
border-radius:14px;
padding:1.4rem;
box-shadow:0 2px 10px rgba(0,0,0,0.07);
}
}
@media (min-width:769px) and (max-width:1024px){
.service-card{
border-radius:16px;
padding:1.6rem;
box-shadow:0 3px 14px rgba(0,0,0,0.08);
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-card{
border-radius:18px;
padding:1.8rem;
box-shadow:0 3px 16px rgba(0,0,0,0.08);
}
}
@media (min-width:1367px){
.service-card{
border-radius:20px;
padding:2rem;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
}
.service-image{
width:100%;
height:160px;
margin-bottom:1rem;
border-radius:10px;
overflow:hidden;
position:relative;
}
@media (max-width:480px){
.service-image{
height:140px;
margin-bottom:0.8rem;
border-radius:8px;
}
}
@media (min-width:481px) and (max-width:768px){
.service-image{
height:150px;
margin-bottom:1rem;
border-radius:9px;
}
}
@media (min-width:769px) and (max-width:1024px){
.service-image{
height:170px;
margin-bottom:1.2rem;
border-radius:10px;
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-image{
height:180px;
margin-bottom:1.3rem;
border-radius:11px;
}
}
@media (min-width:1367px){
.service-image{
height:200px;
margin-bottom:1.5rem;
border-radius:12px;
}
}
.service-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.service-card:hover .service-image img{
transform:scale(1.05);
}
.service-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
transform:scaleX(0);
transition:transform 0.3s ease;
}
.service-card:hover::before{
transform:scaleX(1);
}
.service-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.service-card.featured{
border:2px solid #667eea;
transform:scale(1.05);
}
.service-card.featured::before{
transform:scaleX(1);
}
.service-icon{
width:50px;
height:50px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1.25rem;
margin-bottom:1rem;
}
@media (max-width:480px){
.service-icon{
width:45px;
height:45px;
border-radius:10px;
font-size:1.1rem;
margin-bottom:0.8rem;
}
}
@media (min-width:481px) and (max-width:768px){
.service-icon{
width:50px;
height:50px;
border-radius:12px;
font-size:1.25rem;
margin-bottom:1rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.service-icon{
width:55px;
height:55px;
border-radius:14px;
font-size:1.375rem;
margin-bottom:1.2rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-icon{
width:58px;
height:58px;
border-radius:15px;
font-size:1.4rem;
margin-bottom:1.3rem;
}
}
@media (min-width:1367px){
.service-icon{
width:60px;
height:60px;
border-radius:16px;
font-size:1.5rem;
margin-bottom:1.5rem;
}
}
.service-title{
font-size:1.25rem;
font-weight:600;
color:#1a1a1a;
margin-bottom:0.75rem;
}
@media (max-width:480px){
.service-title{
font-size:1.1rem;
margin-bottom:0.6rem;
}
}
@media (min-width:481px) and (max-width:768px){
.service-title{
font-size:1.2rem;
margin-bottom:0.7rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.service-title{
font-size:1.3rem;
margin-bottom:0.8rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-title{
font-size:1.4rem;
margin-bottom:0.9rem;
}
}
@media (min-width:1367px){
.service-title{
font-size:1.5rem;
margin-bottom:1rem;
}
}
.service-description{
color:#4a5568;
line-height:1.6;
margin-bottom:1rem;
font-size:0.9rem;
}
@media (max-width:480px){
.service-description{
margin-bottom:0.8rem;
font-size:0.85rem;
line-height:1.5;
}
}
@media (min-width:481px) and (max-width:768px){
.service-description{
margin-bottom:0.9rem;
font-size:0.9rem;
line-height:1.55;
}
}
@media (min-width:769px) and (max-width:1024px){
.service-description{
margin-bottom:1.1rem;
font-size:0.95rem;
line-height:1.6;
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-description{
margin-bottom:1.3rem;
font-size:0.98rem;
line-height:1.6;
}
}
@media (min-width:1367px){
.service-description{
margin-bottom:1.5rem;
font-size:1rem;
line-height:1.6;
}
}
.service-features{
list-style:none;
margin-bottom:1rem;
}
@media (max-width:480px){
.service-features{
margin-bottom:0.8rem;
}
}
@media (min-width:481px) and (max-width:768px){
.service-features{
margin-bottom:0.9rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.service-features{
margin-bottom:1.1rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-features{
margin-bottom:1.3rem;
}
}
@media (min-width:1367px){
.service-features{
margin-bottom:1.5rem;
}
}
.service-features li{
display:flex;
align-items:center;
gap:6px;
color:#4a5568;
margin-bottom:6px;
font-size:0.85rem;
}
@media (max-width:480px){
.service-features li{
gap:5px;
margin-bottom:5px;
font-size:0.8rem;
}
}
@media (min-width:481px) and (max-width:768px){
.service-features li{
gap:6px;
margin-bottom:6px;
font-size:0.85rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.service-features li{
gap:7px;
margin-bottom:7px;
font-size:0.875rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.service-features li{
gap:7.5px;
margin-bottom:7.5px;
font-size:0.885rem;
}
}
@media (min-width:1367px){
.service-features li{
gap:8px;
margin-bottom:8px;
font-size:0.9rem;
}
}
.service-features i{
color:#10b981;
font-size:0.8rem;
}
.stats{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:white;
position:relative;
overflow:hidden;
}
.stats-background{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.stats-pattern{
position:absolute;
width:100%;
height:100%;
background-image:
radial-gradient(circle at 25% 25%,rgba(255,255,255,0.1) 0%,transparent 50%),
radial-gradient(circle at 75% 75%,rgba(255,255,255,0.1) 0%,transparent 50%);
animation:float 15s ease-in-out infinite;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1.5rem;
position:relative;
z-index:2;
}
@media (max-width:480px){
.stats-grid{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:1.2rem;
}
}
@media (min-width:481px) and (max-width:768px){
.stats-grid{
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1.4rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.stats-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1.6rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.stats-grid{
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:1.8rem;
}
}
@media (min-width:1367px){
.stats-grid{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
}
}
.stat-item{
text-align:center;
padding:1.5rem 0.75rem;
}
@media (max-width:480px){
.stat-item{
padding:1.2rem 0.6rem;
}
}
@media (min-width:481px) and (max-width:768px){
.stat-item{
padding:1.4rem 0.7rem;
}
}
@media (min-width:769px) and (max-width:1024px){
.stat-item{
padding:1.6rem 0.8rem;
}
}
@media (min-width:1025px) and (max-width:1366px){
.stat-item{
padding:1.8rem 0.9rem;
}
}
@media (min-width:1367px){
.stat-item{
padding:2rem 1rem;
}
}
.stat-item .stat-icon{
width:60px;
height:60px;
background:rgba(255,255,255,0.2);
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1.5rem;
margin:0 auto 1rem;
backdrop-filter:blur(8px);
}
@media (max-width:480px){
.stat-item .stat-icon{
width:50px;
height:50px;
border-radius:12px;
font-size:1.25rem;
margin:0 auto 0.8rem;
backdrop-filter:blur(6px);
}
}
@media (min-width:481px) and (max-width:768px){
.stat-item .stat-icon{
width:55px;
height:55px;
border-radius:14px;
font-size:1.375rem;
margin:0 auto 0.9rem;
backdrop-filter:blur(7px);
}
}
@media (min-width:769px) and (max-width:1024px){
.stat-item .stat-icon{
width:65px;
height:65px;
border-radius:16px;
font-size:1.6rem;
margin:0 auto 1.1rem;
backdrop-filter:blur(8px);
}
}
@media (min-width:1025px) and (max-width:1366px){
.stat-item .stat-icon{
width:70px;
height:70px;
border-radius:18px;
font-size:1.75rem;
margin:0 auto 1.25rem;
backdrop-filter:blur(9px);
}
}
@media (min-width:1367px){
.stat-item .stat-icon{
width:80px;
height:80px;
border-radius:20px;
font-size:2rem;
margin:0 auto 1.5rem;
backdrop-filter:blur(10px);
}
}
.stat-item .stat-number{
font-size:2.25rem;
font-weight:800;
color:white;
display:block;
margin-bottom:0.375rem;
}
@media (min-width:480px){
.stat-item .stat-number{
font-size:2.625rem;
margin-bottom:0.4375rem;
}
}
@media (min-width:768px){
.stat-item .stat-number{
font-size:3rem;
margin-bottom:0.5rem;
}
}
.stat-item .stat-label{
font-size:1.1rem;
font-weight:600;
color:rgba(255,255,255,0.9);
display:block;
margin-bottom:0.5rem;
}
.stat-item .stat-description{
font-size:0.9rem;
color:rgba(255,255,255,0.7);
}
.about{
background:white;
}
.about-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:center;
}
.about-text{
order:1;
}
.about-description{
font-size:1.1rem;
color:#4a5568;
line-height:1.7;
margin-bottom:2rem;
}
.about-features{
display:flex;
flex-direction:column;
gap:1.5rem;
margin-bottom:2rem;
}
.about-feature{
display:flex;
gap:1rem;
align-items:flex-start;
}
.feature-icon{
width:50px;
height:50px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1.2rem;
flex-shrink:0;
}
.feature-content h4{
font-size:1.1rem;
font-weight:600;
color:#1a1a1a;
margin-bottom:0.5rem;
}
.feature-content p{
color:#4a5568;
line-height:1.5;
}
.about-actions{
display:flex;
gap:1rem;
flex-wrap:wrap;
}
.about-visual{
order:2;
position:relative;
}
.about-image{
position:relative;
width:100%;
height:400px;
border-radius:20px;
overflow:hidden;
}
.image-placeholder{
width:100%;
height:100%;
background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
display:flex;
align-items:center;
justify-content:center;
font-size:4rem;
color:#667eea;
}
.about-badges{
position:absolute;
top:-20px;
right:-20px;
display:flex;
flex-direction:column;
gap:1rem;
}
.badge-item{
background:white;
padding:1rem 1.5rem;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
display:flex;
align-items:center;
gap:8px;
font-weight:600;
color:#1a1a1a;
}
.badge-item i{
color:#667eea;
font-size:1.2rem;
}
.corporate-hero{
min-height:60vh;
display:flex;
align-items:center;
position:relative;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
overflow:hidden;
}
.corporate-hero .hero-background{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.corporate-hero .hero-container{
position:relative;
z-index:2;
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 2rem;
}
.corporate-hero .hero-content{
text-align:center;
color:white;
}
.corporate-hero .hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
padding:0.5rem 1rem;
border-radius:50px;
font-size:0.9rem;
font-weight:500;
margin-bottom:1.5rem;
border:1px solid rgba(255,255,255,0.2);
}
.corporate-hero .hero-title-main{
display:block;
font-size:3.5rem;
font-weight:800;
margin-bottom:0.5rem;
background:linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.corporate-hero .hero-title-sub{
display:block;
font-size:1.5rem;
font-weight:400;
opacity:0.9;
margin-bottom:1.5rem;
}
.corporate-hero .hero-description{
font-size:1.2rem;
line-height:1.6;
opacity:0.9;
max-width:600px;
margin:0 auto;
}
.corporate-cards{
padding:6rem 0;
background:#f8fafc;
}
.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:2rem;
max-width:1200px;
margin:0 auto;
padding:0 2rem;
}
.corporate-card{
background:white;
border-radius:20px;
padding:2.5rem;
box-shadow:0 10px 40px rgba(0,0,0,0.1);
transition:all 0.3s ease;
border:1px solid rgba(102,126,234,0.1);
position:relative;
overflow:hidden;
}
.corporate-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}
.corporate-card:hover{
transform:translateY(-5px);
box-shadow:0 20px 60px rgba(0,0,0,0.15);
}
.card-header{
display:flex;
align-items:center;
gap:1rem;
margin-bottom:1.5rem;
}
.card-icon{
width:60px;
height:60px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1.5rem;
flex-shrink:0;
}
.card-title{
font-size:1.5rem;
font-weight:700;
color:#1a1a1a;
margin:0;
letter-spacing:-0.02em;
}
.card-content{
color:#4a5568;
line-height:1.7;
}
.card-content p{
margin-bottom:1rem;
font-size:1rem;
}
.card-content p:last-child{
margin-bottom:0;
}
@media (max-width:768px){
.corporate-hero .hero-title-main{
font-size:2.5rem;
}
.corporate-hero .hero-title-sub{
font-size:1.2rem;
}
.corporate-hero .hero-description{
font-size:1rem;
}
.cards-grid{
grid-template-columns:1fr;
gap:1.5rem;
padding:0 1rem;
}
.corporate-card{
padding:2rem;
}
.card-header{
flex-direction:column;
text-align:center;
gap:1rem;
}
.card-icon{
width:50px;
height:50px;
font-size:1.2rem;
}
.card-title{
font-size:1.3rem;
}
}
.contact-hero{
background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);
color:white;
padding:80px 0 60px;
text-align:center;
}
.contact-hero h1{
font-size:3rem;
margin-bottom:1rem;
font-weight:700;
}
.contact-hero p{
font-size:1.2rem;
opacity:0.9;
}
.contact-info{
padding:80px 0;
background-color:#f8f9fa;
}
.contact-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
margin-top:3rem;
}
.contact-card{
background:white;
padding:2.5rem;
border-radius:15px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.contact-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.contact-icon{
width:80px;
height:80px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 1.5rem;
}
.contact-icon i{
font-size:2rem;
color:white;
}
.contact-card h3{
font-size:1.5rem;
margin-bottom:1rem;
color:#333;
}
.contact-card p{
color:#666;
line-height:1.6;
}
.contact-card a{
color:#667eea;
text-decoration:none;
transition:color 0.3s ease;
}
.contact-card a:hover{
color:#764ba2;
}
.contact-form-section{
padding:80px 0;
background:white;
}
.form-container{
display:grid;
grid-template-columns:2fr 1fr;
gap:4rem;
align-items:start;
}
.form-content h2{
font-size:2.5rem;
margin-bottom:1rem;
color:#333;
}
.form-content p{
color:#666;
margin-bottom:2rem;
font-size:1.1rem;
}
.contact-form{
display:flex;
flex-direction:column;
gap:1.5rem;
}
.form-group{
position:relative;
}
.form-group input,
.form-group textarea{
width:100%;
padding:1rem 1.5rem;
border:2px solid #e1e5e9;
border-radius:10px;
font-size:1rem;
transition:border-color 0.3s ease,box-shadow 0.3s ease;
background-color:#f8f9fa;
}
.form-group input:focus,
.form-group textarea:focus{
outline:none;
border-color:#667eea;
box-shadow:0 0 0 3px rgba(102,126,234,0.1);
background-color:white;
}
.form-group textarea{
resize:vertical;
min-height:120px;
}
.submit-btn{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:white;
border:none;
padding:1rem 2rem;
border-radius:10px;
font-size:1.1rem;
font-weight:600;
cursor:pointer;
transition:transform 0.3s ease,box-shadow 0.3s ease;
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
}
.submit-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(102,126,234,0.3);
}
.contact-info-sidebar{
background:#f8f9fa;
padding:2.5rem;
border-radius:15px;
height:fit-content;
}
.contact-info-sidebar h3{
font-size:1.5rem;
margin-bottom:2rem;
color:#333;
}
.info-item{
display:flex;
align-items:flex-start;
gap:1rem;
margin-bottom:2rem;
}
.info-item:last-child{
margin-bottom:0;
}
.info-item i{
font-size:1.5rem;
color:#667eea;
margin-top:0.25rem;
}
.info-item h4{
font-size:1.1rem;
margin-bottom:0.5rem;
color:#333;
}
.info-item p{
color:#666;
line-height:1.5;
margin:0;
}
@media (max-width:768px){
.contact-hero{
padding:100px 0 60px;
}
.contact-hero h1{
font-size:2rem;
}
.contact-info,
.contact-form-section{
padding:60px 0;
}
.contact-grid{
grid-template-columns:1fr;
gap:1.5rem;
}
.form-container{
grid-template-columns:1fr;
gap:2rem;
}
.contact-card{
padding:2rem;
}
.form-content h2{
font-size:2rem;
}
}
.contact{
background:#f8fafc;
}
.contact-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
}
.contact-info{
display:flex;
flex-direction:column;
gap:2rem;
}
.contact-item{
display:flex;
gap:1rem;
align-items:flex-start;
}
.contact-icon{
width:50px;
height:50px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:1.2rem;
flex-shrink:0;
}
.contact-details h4{
font-size:1.1rem;
font-weight:600;
color:#1a1a1a;
margin-bottom:0.5rem;
}
.contact-details p{
color:#4a5568;
line-height:1.5;
}
.contact-details a{
color:#667eea;
text-decoration:none;
transition:color 0.3s ease;
}
.contact-details a:hover{
color:#764ba2;
}
.contact-form{
background:white;
padding:2rem;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.form-group{
margin-bottom:1.5rem;
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
}
.form-group label{
display:block;
font-weight:600;
color:#1a1a1a;
margin-bottom:0.5rem;
font-size:0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:12px 16px;
border:2px solid #e2e8f0;
border-radius:12px;
font-size:1rem;
transition:all 0.3s ease;
background:white;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
outline:none;
border-color:#667eea;
box-shadow:0 0 0 3px rgba(102,126,234,0.1);
}
.form-group textarea{
resize:vertical;
min-height:120px;
}
.footer{
background:#1a1a1a;
color:white;
}
.footer-main{
padding:4rem 0 2rem;
}
.footer-content{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:3rem;
}
.footer-brand{
display:flex;
align-items:center;
gap:12px;
margin-bottom:1.5rem;
}
.footer-brand .brand-icon{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}
.footer-brand .brand-name{
color:white;
}
.footer-brand .brand-subtitle{
color:#667eea;
}
.footer-description{
color:#a0a0a0;
line-height:1.6;
margin-bottom:2rem;
max-width:300px;
}
.footer-social{
display:flex;
gap:1rem;
}
.social-link{
width:40px;
height:40px;
background:rgba(255,255,255,0.1);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-decoration:none;
transition:all 0.3s ease;
}
.social-link:hover{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
transform:translateY(-2px);
}
.footer-title{
font-size:1.1rem;
font-weight:600;
color:white;
margin-bottom:1.5rem;
}
.footer-links{
list-style:none;
display:flex;
flex-direction:column;
gap:0.75rem;
}
.footer-links a{
color:#a0a0a0;
text-decoration:none;
transition:color 0.3s ease;
font-size:0.9rem;
}
.footer-links a:hover{
color:#667eea;
}
.footer-contact{
display:flex;
flex-direction:column;
gap:1rem;
}
.footer-contact .contact-item{
display:flex;
align-items:flex-start;
gap:8px;
font-size:0.9rem;
}
.footer-contact .contact-item i{
color:#667eea;
margin-top:2px;
width:16px;
}
.footer-contact .contact-item a{
color:#a0a0a0;
text-decoration:none;
transition:color 0.3s ease;
}
.footer-contact .contact-item a:hover{
color:#667eea;
}
.footer-bottom{
border-top:1px solid #333;
padding:2rem 0;
}
.footer-bottom-content{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:1rem;
}
.copyright{
color:#a0a0a0;
font-size:0.9rem;
}
.footer-bottom-links{
display:flex;
gap:2rem;
}
.footer-bottom-links a{
color:#a0a0a0;
text-decoration:none;
font-size:0.9rem;
transition:color 0.3s ease;
}
.footer-bottom-links a:hover{
color:#667eea;
}
.back-to-top{
position:fixed;
bottom:2rem;
right:2rem;
width:50px;
height:50px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:white;
border:none;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
box-shadow:0 4px 20px rgba(102,126,234,0.4);
transition:all 0.3s ease;
opacity:0;
visibility:hidden;
z-index:1000;
}
.back-to-top.visible{
opacity:1;
visibility:visible;
}
.back-to-top:hover{
transform:translateY(-3px);
box-shadow:0 8px 30px rgba(102,126,234,0.6);
}
@media (max-width:1024px){
.hero-container{
grid-template-columns:1fr;
gap:3rem;
text-align:center;
}
.hero-visual{
order:-1;
}
.about-content{
grid-template-columns:1fr;
gap:3rem;
}
.contact-content{
grid-template-columns:1fr;
gap:3rem;
}
.footer-content{
grid-template-columns:1fr 1fr;
gap:2rem;
}
}
@media (max-width:768px){
.nav-actions{
display:none;
}
.hamburger{
display:flex;
}
.nav-menu{
position:fixed;
top:80px;
left:-100%;
width:100%;
height:calc(100vh - 80px);
background:rgba(255,255,255,0.98);
backdrop-filter:blur(10px);
flex-direction:column;
justify-content:flex-start;
align-items:center;
padding:2rem 0;
transition:left 0.3s ease;
z-index:999;
}
.nav-menu.active{
left:0;
}
.nav-menu .nav-link{
font-size:1.2rem;
margin:1rem 0;
padding:1rem 2rem;
width:100%;
text-align:center;
border-bottom:1px solid rgba(0,0,0,0.1);
}
.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(7px,-6px);
}
body.menu-open{
overflow:hidden;
}
.hero-title{
font-size:2.2rem;
line-height:1.2;
margin-bottom:1rem;
}
.hero-subtitle{
font-size:1rem;
margin-bottom:1.5rem;
}
.hero-slider{
border-radius:15px;
height:300px;
}
.slider-btn{
width:40px;
height:40px;
font-size:14px;
}
.prev-btn{
left:10px;
}
.next-btn{
right:10px;
}
.slider-dots{
bottom:15px;
gap:8px;
}
.dot{
width:10px;
height:10px;
}
.hero-stats-floating{
position:static;
display:flex;
flex-direction:row;
justify-content:space-between;
gap:1rem;
margin-top:2rem;
right:auto;
top:auto;
transform:none;
}
.floating-stat{
flex:1;
padding:1rem;
font-size:0.9rem;
}
.floating-stat .stat-number{
font-size:1.5rem;
}
.hero-buttons{
justify-content:center;
}
.services-grid{
grid-template-columns:1fr;
}
.stats-grid{
grid-template-columns:repeat(2,1fr);
}
.form-row{
grid-template-columns:1fr;
}
.footer-content{
grid-template-columns:1fr;
text-align:center;
}
.footer-bottom-content{
flex-direction:column;
text-align:center;
}
}
@media (max-width:480px){
.container{
padding:0 10px;
max-width:100%;
}
.hero-title{
font-size:1.8rem;
line-height:1.1;
}
.hero-subtitle{
font-size:0.9rem;
}
.section-title{
font-size:1.8rem;
margin-bottom:1rem;
}
.hero-slider{
height:250px;
border-radius:10px;
}
.slider-btn{
width:35px;
height:35px;
font-size:12px;
}
.prev-btn{
left:5px;
}
.next-btn{
right:5px;
}
.slider-dots{
bottom:10px;
gap:6px;
}
.dot{
width:8px;
height:8px;
}
.stats-grid{
grid-template-columns:1fr;
gap:1rem;
}
.floating-stat{
position:static;
margin-bottom:1rem;
padding:0.8rem;
font-size:0.8rem;
}
.floating-stat .stat-number{
font-size:1.3rem;
}
.hero-stats-floating{
position:static;
display:flex;
flex-direction:column;
gap:0.8rem;
margin-top:1.5rem;
}
.hero-buttons{
flex-direction:column;
gap:1rem;
align-items:stretch;
}
.btn{
padding:0.8rem 1.5rem;
font-size:0.9rem;
width:100%;
}
.services-grid .service-card{
padding:1.5rem;
}
.service-card h3{
font-size:1.2rem;
}
.service-card p{
font-size:0.9rem;
}
}
.fade-in{
animation:fadeIn 1s ease-out;
}
.slide-up{
animation:slideUp 1s ease-out;
}
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
@keyframes slideUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.mb-1{margin-bottom:0.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:1.5rem;}
.mb-4{margin-bottom:2rem;}
.mt-1{margin-top:0.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.5rem;}
.mt-4{margin-top:2rem;}
.p-1{padding:0.5rem;}
.p-2{padding:1rem;}
.p-3{padding:1.5rem;}
.p-4{padding:2rem;}
.d-none{display:none;}
.d-block{display:block;}
.d-flex{display:flex;}
.d-grid{display:grid;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.align-center{align-items:center;}
.w-full{width:100%;}
.h-full{height:100%;}
.rounded{border-radius:8px;}
.rounded-lg{border-radius:12px;}
.rounded-xl{border-radius:16px;}
.rounded-2xl{border-radius:20px;}
.shadow{box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.shadow-lg{box-shadow:0 10px 25px rgba(0,0,0,0.15);}
.shadow-xl{box-shadow:0 20px 40px rgba(0,0,0,0.2);}
.transition{transition:all 0.3s ease;}
.transition-fast{transition:all 0.15s ease;}
.transition-slow{transition:all 0.5s ease;}
.business-card{
max-width:350px;
height:220px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:15px;
padding:20px;
color:white;
position:relative;
overflow:hidden;
box-shadow:0 15px 35px rgba(102,126,234,0.3);
transition:all 0.3s ease;
}
.business-card:hover{
transform:translateY(-10px) rotateX(5deg);
box-shadow:0 25px 50px rgba(102,126,234,0.4);
}
.business-card::before{
content:'';
position:absolute;
top:-50%;
right:-50%;
width:100%;
height:100%;
background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);
transform:rotate(45deg);
}
.business-card .service-image{
position:absolute;
top:15px;
right:15px;
width:50px;
height:50px;
border-radius:10px;
overflow:hidden;
opacity:0.8;
}
.business-card .service-image img{
width:100%;
height:100%;
object-fit:cover;
}
.business-card .service-badge{
position:absolute;
top:15px;
left:15px;
background:rgba(255,255,255,0.2);
color:white;
padding:4px 12px;
border-radius:20px;
font-size:0.75rem;
font-weight:600;
backdrop-filter:blur(10px);
}
.business-card .service-icon{
position:absolute;
bottom:15px;
right:15px;
font-size:2rem;
opacity:0.3;
}
.business-card .service-content{
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
padding-right:70px;
}
.business-card .service-title{
font-size:1.2rem;
font-weight:700;
margin-bottom:8px;
line-height:1.2;
}
.business-card .service-description{
font-size:0.85rem;
opacity:0.9;
margin-bottom:15px;
line-height:1.3;
}
.business-card .service-contact{
margin-top:auto;
}
.business-card .contact-info{
display:flex;
align-items:center;
font-size:0.75rem;
margin-bottom:5px;
opacity:0.8;
}
.business-card .contact-info i{
margin-right:8px;
width:12px;
}
@media (max-width:768px){
.business-card{
max-width:100%;
height:180px;
margin-bottom:20px;
}
.business-card .service-title{
font-size:1rem;
}
.business-card .service-description{
font-size:0.8rem;
}
.business-card .contact-info{
font-size:0.7rem;
}
}
.references-section{
padding:6rem 0;
background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
}
.references-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:2rem;
margin:4rem 0;
}
.reference-item{
background:white;
border-radius:16px;
padding:2rem;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
transition:all 0.3s ease;
border:1px solid rgba(99,102,241,0.1);
}
.reference-item:hover{
transform:translateY(-8px);
box-shadow:0 12px 40px rgba(99,102,241,0.15);
border-color:rgba(99,102,241,0.3);
}
.reference-logo{
display:flex;
align-items:center;
justify-content:center;
height:120px;
overflow:hidden;
border-radius:12px;
background:#f8fafc;
}
.reference-logo img{
max-width:100%;
max-height:100%;
object-fit:contain;
transition:transform 0.3s ease;
filter:grayscale(20%);
}
.reference-item:hover .reference-logo img{
transform:scale(1.05);
filter:grayscale(0%);
}
.references-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:2rem;
margin-top:4rem;
padding:3rem 0;
border-top:1px solid rgba(99,102,241,0.1);
}
.stat-item{
text-align:center;
padding:2rem;
background:white;
border-radius:16px;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
transition:transform 0.3s ease;
}
.stat-item:hover{
transform:translateY(-4px);
}
.stat-number{
font-size:3rem;
font-weight:800;
color:#6366f1;
margin-bottom:0.5rem;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.stat-label{
font-size:1.1rem;
color:#64748b;
font-weight:500;
}
.page-header{
padding:8rem 0 4rem;
background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
color:white;
text-align:center;
position:relative;
overflow:hidden;
}
.page-header::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
opacity:0.3;
}
.page-header-content{
position:relative;
z-index:2;
}
.page-title{
font-size:3.5rem;
font-weight:800;
margin-bottom:1rem;
text-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.page-subtitle{
font-size:1.3rem;
opacity:0.9;
margin-bottom:2rem;
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.breadcrumb{
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
font-size:1rem;
opacity:0.8;
}
.breadcrumb a{
color:white;
text-decoration:none;
transition:opacity 0.3s ease;
}
.breadcrumb a:hover{
opacity:1;
text-decoration:underline;
}
.breadcrumb span{
opacity:0.6;
}
.cta-section{
padding:6rem 0;
background:linear-gradient(135deg,#1e293b 0%,#334155 100%);
color:white;
text-align:center;
}
.cta-content h2{
font-size:2.5rem;
font-weight:700;
margin-bottom:1rem;
color:white;
}
.cta-content p{
font-size:1.2rem;
opacity:0.9;
margin-bottom:2rem;
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.cta-buttons{
display:flex;
gap:1rem;
justify-content:center;
flex-wrap:wrap;
}
@media (max-width:1024px){
.references-grid{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:1.5rem;
}
.reference-item{
padding:1.5rem;
}
.reference-logo{
height:100px;
}
}
@media (max-width:768px){
.page-title{
font-size:2.5rem;
}
.page-subtitle{
font-size:1.1rem;
}
.references-grid{
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:1rem;
}
.reference-item{
padding:1rem;
}
.reference-logo{
height:80px;
}
.references-stats{
grid-template-columns:repeat(2,1fr);
gap:1rem;
}
.stat-item{
padding:1.5rem;
}
.stat-number{
font-size:2rem;
}
.cta-content h2{
font-size:2rem;
}
.cta-buttons{
flex-direction:column;
align-items:center;
}
.cta-buttons .btn{
width:100%;
max-width:300px;
}
}
@media (max-width:480px){
.references-grid{
grid-template-columns:repeat(2,1fr);
}
.references-stats{
grid-template-columns:1fr;
}
.page-header{
padding:6rem 0 3rem;
}
}