body { margin: 0; font-family: Arial, sans-serif; background-color: #f9f9f9; color: #333; overflow-x: hidden; }
header { position: fixed; top: 0; left: 0; width: 100%; background: linear-gradient(135deg, #212140, #181830); color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000; transition: all 0.3s ease; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
header h1 { font-size: 1.5rem; margin: 0; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
nav a { color: #82CFFD; text-decoration: none; transition: color 0.3s ease; }
nav a:hover { color: #FFB74D; text-decoration: underline; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 100px 20px 20px; max-width: 1440px; margin: auto; }
.card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.card img { width: 100%; height: auto; object-fit: cover; }
.card-content { padding: 20px; }
.button { background-color: #FFB74D; color: white; padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; transition: transform 0.2s ease; font-size: 1rem; display: inline-block; margin-top: 10px; }
.button:hover { transform: scale(1.1); }
.parallax { background: linear-gradient(to bottom, #212140, #82CFFD); height: 400px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; display: flex; justify-content: center; align-items: center; color: white; text-align: center; }
.flip-card { perspective: 1000px; width: 100%; height: 100%; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; backface-visibility: hidden; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.flip-card-front { background: #212140; color: white; }
.flip-card-back { background: #FFB74D; color: black; transform: rotateY(180deg); }
.loader { border: 8px solid #f3f3f3; border-top: 8px solid #82CFFD; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; display: none; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media (max-width: 768px) { header { flex-direction: column; gap: 10px; } nav ul { flex-direction: column; gap: 10px; } .parallax { height: 300px; } }