/* Import font Montserrat në të faqes: */ /* */ .hero-banner { display: flex; height: 100vh; width: 100%; font-family: 'Montserrat', sans-serif; color: white; overflow: hidden; } .hero-text { flex: 1; background: linear-gradient(135deg, #00b8c6 0%, #007f8a 100%); padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; animation: fadeInUp 1s ease forwards; animation-delay: 0.3s; } .hero-text h1 { font-weight: 600; font-size: 3rem; margin-bottom: 20px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .hero-text p { font-weight: 400; font-size: 1.2rem; line-height: 1.5; margin-bottom: 30px; } .hero-list { list-style: none; padding-left: 0; margin-bottom: 40px; } .hero-list li { margin-bottom: 12px; font-weight: 500; font-size: 1.15rem; position: relative; padding-left: 25px; } /* Butoni CTA */ .btn-primary { width: fit-content; background-color: #4169E1; color: #fff; padding: 16px 40px; border: none; border-radius: 30px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: background-color 0.3s ease; user-select: none; align-self: flex-start; } .btn-primary:hover { background-color: #0087bd; } .hero-image { flex: 1; overflow: hidden; position: relative; } .hero-image img { width: 100%; height: 100vh; object-fit: cover; object-position: center left; /* foto shkon më pak në të djathtë, pak në majtë */ transition: transform 0.5s ease; } .hero-image img:hover { transform: scale(1.05); } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .bewerber-benefits { background: radial-gradient(circle at top right, #e0f7f9, #f9fcfd); padding: 80px 20px; position: relative; overflow: hidden; font-family: 'Outfit', sans-serif; } .benefits-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 50px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } .benefits-text { flex: 1; min-width: 280px; } .benefits-text h2 { font-size: 2.5rem; color: #00b8c6; margin-bottom: 20px; } .benefits-text p { font-size: 1.2rem; color: #333; line-height: 1.6; } .benefits-card { flex: 1; background-color: #ffffff; box-shadow: 0 10px 30px rgba(0, 184, 198, 0.15); border-radius: 16px; padding: 40px; min-width: 300px; transition: transform 0.3s ease; } .benefits-card h3 { font-size: 1.6rem; margin-bottom: 25px; color: #1b365d; } .benefits-card ul { list-style: none; padding: 0; margin: 0; } .benefits-card li { font-size: 1.1rem; color: #007f8a; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; } .benefits-card i { font-size: 20px; color: #00b8c6; background-color: #e0f5f6; padding: 10px; border-radius: 50%; } .steps-section-bewerber { background-color: #f9fcfd; padding: 80px 20px; font-family: 'Outfit', sans-serif; text-align: center; } .steps-container-bewerber { max-width: 1100px; margin: 0 auto; } .steps-container-bewerber h2 { font-size: 32px; color: #00b8c6; margin-bottom: 50px; } .steps-wrapper-bewerber { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; } .step-box-bewerber { background: white; border-radius: 12px; padding: 30px; width: 300px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; } .step-box-bewerber:hover { transform: translateY(-6px); } .step-icon { width: 60px; height: 60px; margin: 0 auto 20px; background-color: #00b8c6; color: white; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; } .step-box-bewerber h3 { font-size: 20px; margin-bottom: 15px; color: #1b365d; } .step-box-bewerber p { font-size: 16px; color: #444; line-height: 1.6; } .bewerbung-split-section { background-color: #f9fcfd; padding: 80px 20px; font-family: 'Outfit', sans-serif; } .bewerbung-container { max-width: 1100px; margin: 0 auto; display: flex; gap: 120px; /* nga 60px në 100px për më shumë hapësirë */ background-color: white; padding: 40px; border-radius: 16px; box-shadow: 0 12px 35px rgba(0, 184, 198, 0.1); flex-wrap: wrap; } .bewerbung-left { flex: 1; display: flex; flex-direction: column; justify-content: center; } .bewerbung-left h2 { font-size: 28px; color: #00b8c6; margin-bottom: 20px; } .bewerbung-left p { font-size: 17px; color: #333; margin-bottom: 20px; line-height: 1.6; } .bewerbung-benefits { list-style: none; padding-left: 0; } .bewerbung-benefits li { font-size: 16px; color: #007f8a; margin-bottom: 10px; } .bewerbung-right { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; } .bewerbung-steps { list-style: none; padding: 0; margin: 0; font-size: 16px; color: #007f8a; font-weight: 500; } .bewerbung-steps li { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .btn-learn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background-color: #007BFF; color: white; font-weight: bold; text-decoration: none; border-radius: 6px; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 6px 15px rgba(0, 123, 255, 0.25); } .btn-learn::after { content: "→"; transition: transform 0.3s ease; } .btn-learn:hover { background-color: #0056b3; transform: translateY(-2px); } .btn-learn:hover::after { transform: translateX(6px); } /* Responsiv për mobile * /* Responsivitet */ @media (max-width: 768px) { .steps-wrapper-bewerber { flex-direction: column; align-items: center; } } /* Responsive për mobil */ @media (max-width: 768px) { .benefits-wrapper { flex-direction: column; align-items: center; text-align: left; } .benefits-card { width: 100%; } } /* Responsivitet për mobile */ @media (max-width: 768px) { .hero-banner { flex-direction: column; height: auto; } .hero-text, .hero-image { flex: none; height: auto; padding: 40px 30px; } .hero-text h1 { font-size: 2.2rem; } .hero-text p, .hero-list li { font-size: 1rem; } .hero-image img { height: 250px; } }