html { background: linear-gradient(to right, #e0f2ff, #f0faff); }
body { margin: 0; font-family: 'Questrial', sans-serif; background: linear-gradient(to right, #e0f2ff, #f0faff); padding-top: 60px; overflow: hidden; }
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; padding: 15px 30px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.071); backdrop-filter: blur(20px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); z-index: 9999; }
.site-header .container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
.logo { font-size: 24px; color: #2c3e50; margin: 0; }
.logo-link { text-decoration: none; color: inherit; cursor: pointer; }
.menu { display: flex; align-items: center; }
.menu a { position: relative; display: inline-block; margin-left: 25px; text-decoration: none; color: #000000; font-weight: 600; padding: 5px 0; transition: color 0.3s ease; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); }
.menu a:hover { color: #3b82f6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0px 15px; }
#hero { height: calc(100vh - 70px - 60px); min-height: 40px; display: flex; align-items: center; padding: 0; overflow: hidden; box-sizing: border-box; margin-bottom: 18px; }
#hero .row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; }
#hero .col-lg-6 { flex: 1 1 50%; max-width: 50%; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.hero-content { text-align: left; padding-top: 20px; padding-bottom: 20px; }
.hero-content h1 { font-size: clamp(32px, 3.5vw, 44px); line-height: 1.2; margin-bottom: 12px; color: #2c3e50; font-weight: 700; }
.hero-content .highlight { color: #3b82f6; }
.hero-content p { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.5; color: #555; margin-bottom: 20px; max-width: 500px; }
.hero-actions { display: flex; justify-content: flex-start; margin-top: 5px; }
.btn-primary { display: inline-block; background-color: #3b82f6; color: #fff; padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); letter-spacing: 0.1px; font-size: 15px; }
.btn-primary:hover { background-color: #2563eb; transform: translateY(-1px); box-shadow: 0 6px 15px rgba(59, 130, 246, 0.35); }
.hero-image { text-align: center; display: flex; justify-content: center; align-items: center; height: 80%; }
.hero-image img { max-width: 75%; -webkit-user-drag: none; height: auto; display: block; animation: gentle-breathe 4s ease-in-out infinite alternate; }
@keyframes gentle-breathe { 0% { transform: translateY(0); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
.footer { background-color: rgba(103, 145, 224, 0.071); color: #000; padding: 10px 0; font-size: 0.9em; text-align: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.footer .footer-content-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.footer .footer-section { flex: 1 1 30%; text-align: left; }
.footer .footer-contact p { margin-bottom: 0; display: flex; align-items: center; margin-top: -1px; color: #000; }
.footer .footer-contact a { color: #000; text-decoration: none; transition: color 0.3s ease; margin-left: 5px; }
.footer .footer-contact a:hover { color: #3b82f6; }
.footer .footer-contact i { margin-right: 5px; color: #000; vertical-align: middle; }
.footer .footer-social .social-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; justify-content: flex-start; }
.footer .footer-social .social-links li a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.1); color: #000; font-size: 1.1em; transition: background-color 0.3s ease, color 0.3s ease; }
.footer .footer-social .social-links li a:hover { background-color: #3b82f6; color: #fff; }
.footer .footer-copyright p { margin-top: 0; margin-bottom: 0; color: #000; }
@media (max-width: 992px) { body { overflow: auto; } html { background: linear-gradient(to right, #e0f2ff, #f0faff); } .site-header { padding: 15px 20px; } .site-header .menu a { font-size: 16px; margin-left: 20px; } .container { padding: 0 10px; } #hero { flex-direction: column; height: auto; min-height: auto; padding-top: 40px; padding-bottom: 40px; margin-bottom: 0; } #hero .row { flex-direction: column; } #hero .col-lg-6 { flex: 1 1 100%; max-width: 100%; padding: 0 20px; height: auto; } .hero-content { text-align: center; padding-top: 0; padding-bottom: 30px; } .hero-content h1 { font-size: clamp(30px, 7vw, 42px); line-height: 1.3; } .hero-content p { font-size: clamp(16px, 4vw, 19px); line-height: 1.6; max-width: 90%; margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .btn-primary { padding: 12px 30px; font-size: 16px; } .hero-image { height: auto; padding-top: 30px; } .hero-image img { max-width: 70%; } }
@media (max-width: 768px) { .site-header { padding: 10px 15px; } .logo { font-size: 22px; } .menu a { font-size: 15px; margin-left: 15px; } .hero-content h1 { font-size: clamp(26px, 6.5vw, 36px); margin-bottom: 10px; } .hero-content p { font-size: clamp(15px, 3.8vw, 18px); margin-bottom: 20px; } .btn-primary { padding: 10px 25px; font-size: 15px; } .hero-image img { max-width: 75%; } .footer .footer-content-wrapper { flex-direction: column; align-items: center; gap: 20px; } .footer .footer-section { flex: 1 1 100%; max-width: 250px; text-align: center; } .footer .footer-social .social-links { justify-content: center; } }
@media (max-width: 576px) { .site-header { padding: 10px; } .menu a { font-size: 14px; margin-left: 10px; } .hero-content h1 { font-size: clamp(24px, 6vw, 32px); } .hero-content p { font-size: clamp(14px, 3.5vw, 17px); } .btn-primary { padding: 8px 20px; font-size: 14px; } .hero-image img { max-width: 85%; } }