@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--bg-color: #f5f7f9;
--text-color: #333333; --primary-color: #6b7780;
--highlight-color: #1a89d0;
--border-color: #e5e9ec;
--hover-color: #0b4f7b;
--dark: #111;
--white: #fff;
--top-nav: #2d3538;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Poppins', Georgia, 'Times New Roman', Times, serif;
font-weight: 400;
font-style: normal;
overflow-x: hidden;
width: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1,
h2 {
text-align: center;
font-weight: 500;
font-style: normal;
}
.top_nav {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--top-nav);
margin: 1pt;
}
.logo {
font-weight: 900;
font-style: normal;
font-size: 50px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.slogan {
font-weight: 100;
font-style: italic;
padding-left: 20px;
font-size: 20px;
}
.menu ul {
list-style: none;
display: flex;
gap: 30px;
padding: 5px;
font-weight: 300;
font-style: normal;
}
.hero {
position: relative;
height: 100vh;
background: (var(--bg-color), 0.5);
overflow: hidden;
}
.hero .container {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero h1 {
font-size: 3.5rem;
max-width: 700px;
margin-bottom: 30px;
line-height: 1.2;
color: var(--text-color);
}
.hero-content {
max-width: 700px;
position: relative;
z-index: 2;
}
.main-title {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 30px;
color: var(--primary-color);
}
.cta-button {
display: inline-block;
text-align: center;
padding: 15px 40px;
background: var(--highlight-color);
color: var(--white);
border: none;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s ease;
max-width: fit-content;
}
.cta-button:hover {
background: #0b4f7b;
}
.primary-btn {
display: inline-block;
padding: 15px 30px;
background: var(--highlight-color);
color: var(--light);
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
}
.primary-btn:hover {
background: var(--hover-color);
} .services {
padding: 100px 0;
background: var(--white);
overflow: hidden;
}
.services .container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.service-card {
background: var(--white);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.service-card p {
margin-bottom: 20px;
color: #666;
}
.service-btn {
padding: 10px 20px;
background: transparent;
border: 2px solid var(--highlight-color);
color: var(--primary-color);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.service-btn:hover {
background: var(--hover-color);
color: var(--white);
}  @media (max-width: 768px) {
.hero {
padding: 80px 0 120px;
}
.main-title {
font-size: 2.5rem;
}
.service-cards {
grid-template-columns: 1fr;
}
}  .shape-divider {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: var(--border-color);
transform: skewY(-5deg);
transform-origin: bottom right;
}
.shape-1 {
position: absolute;
width: 400px;
height: 400px;
background: var(--primary-color);
opacity: 0.1;
border-radius: 50px;
transform: rotate(45deg);
top: -100px;
right: -100px;
}
.shape-2 {
position: absolute;
width: 300px;
height: 300px;
background: var(--primary-color);
opacity: 0.05;
border-radius: 30px;
transform: rotate(-15deg);
bottom: -50px;
left: -50px;
}
.hero::before {
content: '';
position: absolute;
top: 50px;
right: -100px;
width: 300px;
height: 300px;
background: green;
opacity: 0.1;
border-radius: 50%;
}
.hero::after {
content: '';
position: absolute;
bottom: 100px;
left: -50px;
width: 200px;
height: 200px;
background: red;
opacity: 0.1;
border-radius: 50%;
}