* {
margin:0;
padding:0;
box-sizing:border-box;
}
:root {
--primary-color:#0077b6;
--secondary-color:#00b4d8;
--accent-color:#90e0ef;
--dark-color:#03045e;
--light-color:#caf0f8;
--text-primary:#1a202c;
--text-secondary:#2d3748;
--bg-light:#f7fafc;
--bg-card:#ffffff;
--shadow-sm:0 2px 4px rgba(0,0,0,0.05);
--shadow-md:0 4px 6px rgba(0,0,0,0.07);
--shadow-lg:0 10px 15px rgba(0,0,0,0.1);
--shadow-xl:0 20px 25px rgba(0,0,0,0.1);
--gradient-primary:linear-gradient(135deg,var(--primary-color),var(--dark-color));
--gradient-secondary:linear-gradient(135deg,var(--secondary-color),var(--primary-color));
}
body {
font-family:'Urbanist',sans-serif;
line-height:1.6;
background-color:var(--bg-light);
color:var(--text-primary);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-display:swap;
}
.container {
width:90%;
max-width:1200px;
margin:auto;
padding:0 20px;
}
.container-sm {
width:90%;
max-width:800px;
margin:auto;
padding:0 20px;
}
header {
background:var(--primary-color);
color:white;
position:fixed;
left:0;
width:100%;
z-index:1000;
border-bottom:1px solid rgba(255,255,255,0.1);
padding:15px 0;
box-shadow:0 2px 20px rgba(0,0,0,0.3);
transition:all 0.3s ease;
}
.header-inner {
display:flex;
justify-content:space-between;
align-items:center;
}
.logo img {
vertical-align:middle;
height:36px;
width:64px;
transition:transform 0.3s ease;
object-fit:contain;
}
.logo:hover img {
transform:scale(1.05);
}
nav ul {
list-style:none;
display:flex;
gap:30px;
}
nav ul li a {
color:white;
text-decoration:none;
font-weight:600;
transition:opacity 0.3s ease;
}
nav ul li a:hover {
opacity:0.8;
}
nav a {
text-decoration:none;
color:white;
margin:0 15px;
font-weight:600;
position:relative;
padding:5px 0;
transition:color 0.3s ease;
}
nav a::after {
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:var(--gradient-secondary);
transition:width 0.3s ease;
}
nav a:hover {
color:var(--secondary-color);
}
nav a:hover::after {
width:100%;
}
.hero {
background:linear-gradient(rgba(10,35,66,0.7),rgba(0,0,0,0.8)),
url('images/banner.webp') no-repeat center center/cover;
min-height:100vh;
color:white;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:80px 20px 40px;
position:relative;
overflow:hidden;
will-change:transform;
transform:translateZ(0);
}
@supports not (background-image:url('images/banner.webp')) {
.hero {
background-image:linear-gradient(rgba(10,35,66,0.7),rgba(0,0,0,0.8)),
url('images/banner.png');
}
}
.hero-content {
z-index:1;
animation:fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(30px);
}
to {
opacity:1;
transform:translateY(0);
}
}
.hero-content h2 {
font-size:clamp(2.5rem,5vw,4rem);
margin-bottom:20px;
font-weight:700;
text-shadow:2px 2px 4px rgba(0,0,0,0.3);
background:linear-gradient(135deg,#ffffff,var(--secondary-color));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero-content p {
font-size:clamp(1.1rem,2vw,1.5rem);
margin-bottom:40px;
opacity:0.9;
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.btn {
background:var(--gradient-secondary);
color:white;
padding:15px 30px;
text-decoration:none;
border-radius:50px;
font-weight:600;
transition:all 0.3s ease;
display:inline-block;
position:relative;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,119,182,0.3);
}
.btn::before {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
transition:left 0.5s;
}
.btn:hover {
background:var(--gradient-primary);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(0,119,182,0.4);
}
.btn:hover::before {
left:100%;
}
.section {
padding:100px 0;
position:relative;
}
.section-title {
font-size:clamp(2rem,4vw,2.8rem);
margin-bottom:15px;
text-align:center;
font-weight:700;
color:var(--primary-color);
position:relative;
display:inline-block;
width:100%;
letter-spacing:-0.5px;
}
.section-title::after {
content:'';
position:absolute;
bottom:-12px;
left:50%;
transform:translateX(-50%);
width:80px;
height:4px;
background:var(--gradient-primary);
border-radius:2px;
}
.section-text {
max-width:700px;
margin:0 auto 40px;
text-align:center;
font-size:1.1rem;
line-height:1.8;
color:var(--text-secondary);
font-weight:400;
}
.bg-light {
background:linear-gradient(135deg,#f8fafc,#e2e8f0);
}
.grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
margin-top:40px;
}
.card {
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
transition:all 0.3s ease;
position:relative;
overflow:hidden;
text-align:center;
will-change:transform;
transform:translateZ(0);
}
.card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:var(--gradient-secondary);
transform:scaleX(0);
transition:transform 0.3s ease;
}
.card:hover {
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}
.card:hover::before {
transform:scaleX(1);
}
.card-icon {
width:60px;
height:60px;
margin:0 auto 20px;
background:var(--gradient-secondary);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:white;
transition:all 0.3s ease;
box-shadow:var(--shadow-md);
}
.card-icon i {
font-size:24px;
color:white;
transition:transform 0.3s ease;
}
.card:hover .card-icon {
transform:scale(1.1) rotate(5deg);
}
.card:hover .card-icon i {
transform:scale(1.1) rotate(5deg);
}
.card h3 {
margin-bottom:15px;
color:var(--primary-color);
font-size:1.4rem;
font-weight:600;
line-height:1.3;
}
.card p {
color:var(--text-secondary);
line-height:1.7;
font-size:1rem;
font-weight:400;
}
.contact-info {
list-style:none;
text-align:center;
margin-top:40px;
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.contact-info li {
margin-bottom:20px;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
gap:15px;
padding:15px;
background:rgba(0,119,182,0.08);
border-radius:10px;
transition:all 0.3s ease;
color:var(--text-primary);
}
.contact-info li:hover {
background:rgba(0,119,182,0.12);
transform:translateY(-2px);
}
.contact-info i {
font-size:20px;
color:var(--primary-color);
margin-right:12px;
opacity:0.8;
transition:all 0.3s ease;
}
.contact-info li:hover i {
opacity:1;
transform:scale(1.1);
}
.contact-info a {
color:var(--primary-color);
text-decoration:none;
font-weight:600;
transition:color 0.3s ease;
}
.contact-info a:hover {
color:var(--dark-color);
text-decoration:underline;
}
footer {
background:var(--gradient-primary);
color:white;
text-align:center;
padding:40px 20px;
font-size:14px;
position:relative;
overflow:hidden;
}
footer::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,transparent,var(--secondary-color),transparent);
animation:shimmer 3s infinite;
}
footer .container {
position:relative;
z-index:1;
}
footer p {
margin-bottom:10px;
opacity:0.9;
}
.footer-links {
display:flex;
justify-content:center;
gap:30px;
margin-top:20px;
}
.footer-links a {
color:rgba(255,255,255,0.8);
text-decoration:none;
transition:color 0.3s ease;
font-size:13px;
}
.footer-links a:hover {
color:var(--secondary-color);
}
.menu-toggle {
display:none;
flex-direction:column;
justify-content:center;
gap:6px;
width:30px;
height:30px;
background:none;
border:none;
cursor:pointer;
z-index:1001;
}
.menu-toggle span {
display:block;
height:3px;
width:100%;
background:white;
border-radius:3px;
transition:all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
transform:rotate(45deg) translate(5px,5px);
}
.menu-toggle.active span:nth-child(2) {
opacity:0;
}
.menu-toggle.active span:nth-child(3) {
transform:rotate(-45deg) translate(5px,-5px);
}
@media (max-width:768px) {
header {
position:sticky;
padding:12px 0;
}
.menu-toggle {
display:flex;
position:fixed;
right:15px;
top:15px;
z-index:1002;
}
nav {
display:none;
position:fixed;
top:0;
left:0;
background:var(--primary-color);
width:100%;
height:100vh;
padding:80px 20px 20px;
z-index:1001;
}
nav.active {
display:flex;
align-items:center;
justify-content:center;
}
nav ul {
flex-direction:column;
align-items:center;
gap:20px;
width:100%;
max-width:400px;
}
nav ul li a {
display:block;
padding:15px 30px;
color:white;
text-align:center;
width:100%;
font-size:18px;
border-radius:50px;
background:rgba(255,255,255,0.1);
transition:all 0.3s ease;
}
nav ul li a:hover {
background:rgba(255,255,255,0.2);
transform:none;
}
nav ul li a::after {
display:none;
}
.header-inner {
position:relative;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
.logo {
z-index:1003;
}
.logo img {
height:36px;
width:auto;
}
.menu-toggle span {
background:white;
height:3px;
width:25px;
border-radius:2px;
transition:0.3s;
}
.menu-toggle.active span:nth-child(1) {
transform:rotate(45deg) translate(8px,8px);
}
.menu-toggle.active span:nth-child(2) {
opacity:0;
}
.menu-toggle.active span:nth-child(3) {
transform:rotate(-45deg) translate(5px,-5px);
}
.hero {
padding:60px 15px 40px;
min-height:100vh;
}
.hero-content h2 {
font-size:clamp(2rem,8vw,3rem);
margin-bottom:15px;
}
.hero-content p {
font-size:clamp(1rem,4vw,1.3rem);
margin-bottom:30px;
}
.btn {
padding:12px 25px;
font-size:16px;
}
.section {
padding:60px 0;
}
.section-title {
font-size:clamp(1.8rem,5vw,2.2rem);
margin-bottom:15px;
}
.section-title::after {
width:60px;
height:3px;
}
.section-text {
font-size:1rem;
margin:0 auto 30px;
padding:0 15px;
}
.grid {
grid-template-columns:1fr;
gap:20px;
margin-top:30px;
}
.card {
padding:25px 20px;
}
.card-icon {
width:50px;
height:50px;
}
.card-icon i {
font-size:20px;
}
.card h3 {
font-size:1.2rem;
}
.contact-info {
padding:0 15px;
}
.contact-info li {
flex-direction:column;
text-align:center;
gap:10px;
padding:15px;
}
.contact-info i {
margin-right:0;
font-size:24px;
}
footer {
padding:30px 15px;
}
.footer-links {
flex-direction:column;
gap:15px;
margin-top:15px;
}
}
@media (min-width:769px) and (max-width:1024px) {
.container {
width:95%;
padding:0 15px;
}
header {
padding:15px 0;
}
.logo img {
height:40px;
width:auto;
}
nav a {
margin:0 12px;
font-size:15px;
}
.hero {
padding:70px 15px 50px;
}
.hero-content h2 {
font-size:clamp(2.2rem,4vw,3.5rem);
}
.hero-content p {
font-size:clamp(1.1rem,2.5vw,1.4rem);
}
.section {
padding:80px 0;
}
.section-title {
font-size:clamp(2rem,3vw,2.5rem);
}
.grid {
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}
.card {
padding:25px;
}
.contact-info li {
font-size:16px;
padding:12px;
}
}
@media (max-width:480px) {
.hero-content h2 {
font-size:clamp(1.8rem,6vw,2.5rem);
}
.section-title {
font-size:clamp(1.6rem,4.5vw,2rem);
}
.card h3 {
font-size:1.1rem;
}
.card p {
font-size:0.95rem;
}
.contact-info li {
font-size:15px;
}
}