118 lines
1.9 KiB
CSS
118 lines
1.9 KiB
CSS
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #0A192F;
|
|
background-image: linear-gradient(180deg, #0A192F, #172A45);
|
|
color: #E6F1FF;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: rgba(10, 25, 47, 0.85);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero {
|
|
min-height: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-weight: 700;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.25rem;
|
|
color: #a8b2d1;
|
|
}
|
|
|
|
.btn-gold {
|
|
background-color: #FFC107;
|
|
border-color: #FFC107;
|
|
color: #0A192F;
|
|
font-weight: 600;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-gold:hover {
|
|
background-color: #ffd24d;
|
|
border-color: #ffd24d;
|
|
color: #0A192F;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
|
|
}
|
|
|
|
.section-title {
|
|
font-weight: 700;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.plan-card {
|
|
background-color: #172A45;
|
|
border: 1px solid #294065;
|
|
border-radius: 0.5rem;
|
|
padding: 2rem;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.plan-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
border-color: #FFC107;
|
|
}
|
|
|
|
.plan-card .plan-name {
|
|
font-weight: 600;
|
|
font-size: 1.5rem;
|
|
color: #FFC107;
|
|
}
|
|
|
|
.plan-card .plan-price {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.plan-card .plan-description {
|
|
color: #a8b2d1;
|
|
}
|
|
|
|
.plan-card .list-group-item {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #E6F1FF;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plan-card .btn {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #0A192F;
|
|
padding: 2rem 0;
|
|
margin-top: 5rem;
|
|
border-top: 1px solid #294065;
|
|
}
|
|
|
|
.footer a {
|
|
color: #a8b2d1;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: #FFC107;
|
|
}
|
|
|
|
.bi {
|
|
vertical-align: -0.125em;
|
|
fill: currentColor;
|
|
}
|