* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
}
.header {
text-align: center;
margin-bottom: 2rem;
}
.header h1 {
color: #00b3e3;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 2.2rem;
}
.header p {
color: #666;
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto;
}
.features-highlight {
background-color: #f0f9ff;
border: 1px solid #d0e8ff;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
text-align: center;
}
.features-highlight h2 {
color: #00b3e3;
margin-bottom: 1rem;
}
.highlights-flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-top: 1rem;
}
.highlight-item {
background-color: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
flex: 1;
min-width: 200px;
max-width: 250px;
display: flex;
flex-direction: column;
height: 140px; }
.highlight-item h3 {
color: #333;
font-size: 1.1rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.highlight-item h3 i {
color: #00b3e3;
margin-right: 0.5rem;
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.highlight-item p {
color: #666;
font-size: 0.9rem;
flex-grow: 1;
}
.billing-toggle {
display: flex;
justify-content: center;
margin-bottom: 2rem;
gap: 0.5rem;
background-color: #f0f0f0;
border-radius: 10px;
padding: 0.5rem;
width: fit-content;
margin: 0 auto 2rem;
}
.toggle-btn {
background-color: transparent;
color: #666;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
}
.toggle-btn.active {
background-color: #00b3e3;
color: white;
}
.savings-tag {
background-color: #2ecc71;
color: white;
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
border-radius: 20px;
margin-left: 0.5rem;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 3rem;
}
.pricing-card {
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
padding: 1.5rem;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.3s;
height: 100%; }
.pricing-card:hover {
transform: translateY(-5px);
}
.pricing-card.highlight {
border: 2px solid #00b3e3;
box-shadow: 0 0 25px rgba(0, 179, 227, 0.2);
}
.best-value {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background-color: #00b3e3;
color: white;
font-size: 0.8rem;
padding: 0.3rem 1rem;
border-radius: 20px;
font-weight: 500;
white-space: nowrap;
}
.plan-for {
color: #666;
font-size: 0.9rem;
margin-bottom: 0.5rem;
text-align: center;
}
.pricing-card h2 {
color: #333;
margin-bottom: 0.5rem;
text-align: center;
font-weight: 600;
font-size: 1.5rem;
min-height: 36px; }
.price {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #eee;
min-height: 100px; display: flex;
flex-direction: column;
justify-content: center;
}
.price .amount {
font-size: 2.2rem;
font-weight: 700;
color: #333;
}
.price .period {
color: #666;
font-size: 1rem;
}
.main-features {
margin-bottom: 1.5rem;
min-height: 170px; }
.main-features h3 {
font-size: 1rem;
color: #333;
margin-bottom: 0.8rem;
font-weight: 600;
}
.feature {
display: flex;
align-items: flex-start;
margin-bottom: 0.8rem;
font-size: 0.9rem;
}
.feature i {
color: #00b3e3;
margin-right: 0.5rem;
min-width: 20px;
text-align: center;
}
.feature.highlight {
font-weight: 500;
}
.feature.highlight i {
color: #2ecc71;
}
.limits {
margin-bottom: 1.5rem;
background-color: #f8f9fa;
padding: 1rem;
border-radius: 8px;
min-height: 150px; }
.limits h3 {
font-size: 1rem;
color: #333;
margin-bottom: 0.5rem;
font-weight: 600;
}
.limit-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.limit-item .value {
font-weight: 500;
}
.select-btn {
background-color: #00b3e3;
color: white !important;
border: none;
padding: 1rem;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
width: 100%;
font-size: 1rem;
transition: background-color 0.3s;
margin-top: auto;
text-decoration: none;
text-align: center;
display: block;
}
.select-btn:hover {
background-color: #0099c4;
}
.faq-section {
margin-top: 4rem;
}
.faq-section h2 {
text-align: center;
margin-bottom: 2rem;
color: #333;
font-size: 1.8rem;
}
.faq-item {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.faq-item h3 {
color: #333;
margin-bottom: 0.8rem;
font-size: 1.1rem;
}
.faq-item p {
color: #666;
font-size: 0.95rem;
} .seats-tag {
display: inline-block;
background-color: #f0f9ff;
color: #0099c4;
font-size: 0.9rem;
padding: 0.3rem 0.8rem;
border-radius: 20px;
margin: 0.5rem auto;
font-weight: 500;
text-align: center;
border: 1px solid #d0e8ff;
}
@media (max-width: 768px) {
.pricing-cards {
grid-template-columns: 1fr;
}
.billing-toggle {
flex-direction: column;
width: 80%;
}
.highlight-item h3 {
font-size: 1.1rem;
}
.main-features, .limits {
min-height: auto;
}
}