:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--text-color: #1f2937;
--light-bg: #f3f4f6;
--white: #ffffff;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--text-color);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
} .main-header {
position: sticky;
top: 0;
background: var(--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
z-index: 1000;
height: auto; }
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
margin-right: 4rem;
}
.logo img,
.custom-logo {
height: 100px;
width: auto;
max-width: none;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
margin-right: 4rem;
}
.nav-links li {
margin: 0;
padding: 0;
}
.nav-links li {
white-space: nowrap;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: var(--transition);
padding: 0.5rem 0;
}
.nav-links a:hover {
color: var(--primary-color);
}
.social-icons {
display: flex;
gap: 1rem;
}
.social-icons a {
color: var(--text-color);
font-size: 1.2rem;
transition: var(--transition);
}
.social-icons a:hover {
color: var(--primary-color);
}
.mobile-header-title {
display: none;
}
.mobile-menu {
display: none;
cursor: pointer;
font-size: 1.5rem;
z-index: 1001;
}
.scroll-top {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--primary-color);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease;
font-size: 20px;
z-index: 1000;
}
.scroll-top.show {
opacity: 1;
}
.scroll-top:hover {
background: var(--secondary-color);
}
.nav-links.active {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} .custom-logo-link {
display: block;
}
.menu-menu-glowne-container {
margin: 0;
padding: 0;
} .hero {
background-image: 
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url(https://startai-kursy.pl/wp-content/uploads/2025/03/grafikahero-1.png);
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
position: relative;
z-index: 1;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 2;
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.cta-button {
display: inline-block;
padding: 1rem 2rem;
background: var(--primary-color);
color: var(--white);
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: var(--transition);
}
.cta-button:hover {
background: var(--secondary-color);
transform: translateY(-2px);
} .mission {
padding: 5rem 0;
background: var(--light-bg);
}
.mission-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.mission-text h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.mission-image img {
width: 100%;
border-radius: 10px;
} .testimonials {
padding: 5rem 0;
}
.testimonials h2 {
text-align: center;
margin-bottom: 3rem;
} .testimonials .swiper {
padding-bottom: 4rem; } .testimonials .swiper-slide {
display: flex; height: auto; } .testimonial-card {
background: var(--white, #ffffff);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center; display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
width: 100%;
height: 100%;
} .testimonials .swiper-button-prev,
.testimonials .swiper-button-next {
color: var(--primary, #333333);
width: 48px;
height: 48px;
}
.testimonials .swiper-button-prev::after,
.testimonials .swiper-button-next::after {
font-size: 32px; } .testimonials .swiper-pagination-bullet {
background: var(--primary, #333333);
opacity: 0.35;
}
.testimonials .swiper-pagination-bullet-active {
opacity: 1;
} @media (max-width: 1023px) {
.testimonials .swiper {
padding-bottom: 3rem;
}
}
@media (max-width: 767px) {
.testimonials {
padding: 3rem 0;
}
.testimonials h2 {
margin-bottom: 2rem;
}
} .star-rating {
display: flex;
justify-content: center;
margin-top: 15px;
}
.star-rating svg {
width: 24px;
height: 24px;
fill: #ffc107; margin: 0 2px;
} .prompts {
padding: 5rem 0;
background: var(--light-bg);
text-align: center;
}
.prompts h2 {
text-align: center;
margin-bottom: 3rem;
}
.prompts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.prompt-card {
background: var(--white);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
transition: var(--transition);
}
.prompt-card:hover {
transform: translateY(-5px);
}
.prompt-card i {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.cta-button-main {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #2563eb;
color: white;
padding: 15px 30px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
font-weight: 600;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
transition: background-color 0.3s ease;
}
.cta-button-main i {
font-size: 20px;
}
.cta-button-main:hover {
background: var(--secondary-color);
} body.home .newsletter {
padding: 5rem 0;
background: var(--primary-color);
color: var(--white);
}
body.home .newsletter .newsletter-content {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
body.home .newsletter .newsletter-content h2 {
margin-bottom: 1rem;
}
body.home .newsletter .newsletter-content p {
font-size: 1.1rem;
margin-bottom: 1rem;
}
body.home .newsletter form.newsletter-form {
display: flex !important;
flex-direction: row !important;
gap: 1rem !important;
margin-top: 2rem !important;
justify-content: center !important;
margin-bottom: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
border: none !important;
}
body.home .newsletter form.newsletter-form input[type="email"] {
width: 30% !important;
flex: 1 !important;
padding: 1rem !important;
border: none !important;
border-radius: 5px !important;
font-size: 1rem !important;
margin: 0 !important;
background: var(--white) !important;
}
body.home .newsletter .submit-button-home {
padding: 1rem 2rem;
background: var(--secondary-color);
color: var(--white);
border: none;
border-radius: 5px;
cursor: pointer;
transition: var(--transition);
font-size: 1rem;
white-space: nowrap;
margin: 0;
width: auto;
min-width: auto;
display: inline-block;
text-transform: none;
box-shadow: none;
text-decoration: none;
}
body.home .newsletter .submit-button-home:hover {
background: var(--text-color) !important;
transform: none !important;
}
@media (max-width: 768px) {
body.home .newsletter form.newsletter-form {
flex-direction: column !important;
align-items: stretch !important;
}
body.home .newsletter form.newsletter-form input[type="email"] {
width: 100% !important;
}
body.home .newsletter .newsletter-content h2 {
font-size: 2rem;
}
} @media screen and (max-width: 768px) {
.hero-content h1 {
font-size: 2.2rem;
}
.logo img,
.custom-logo {
height: 60px;
}
.hero {
padding-top: 80px;
}
.nav-container {
position: relative;
}
.logo {
flex: 0 0 auto;
margin-right: 0rem;
}
.mobile-header-title {
display: block;
flex: 1;
text-align: center;
font-weight: 600;
font-size: 1.2rem;
color: var(--text-color);
margin: 0 1rem;
}
.mobile-menu {
display: block;
flex: 0 0 auto;
margin-left: 1rem;
position: relative;
z-index: 1001;
}
.mobile-menu.active i {
transform: rotate(90deg);
}
.nav-links {
display: none;
position: absolute;
top: 100%;
right: 0;
width: 250px;
background: var(--white);
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
flex-direction: column;
align-items: center;
gap: 1rem;
border-radius: 0 0 4px 4px;
margin-right: 0;
}
.nav-links li {
width: 100%;
text-align: center;
}
.nav-links a {
display: block;
padding: 0.8rem;
white-space: nowrap;
}
.nav-links a:hover {
background: var(--light-bg);
border-radius: 4px;
}
}
@media screen and (min-width: 769px) {
.nav-links {
display: flex !important;
}
} footer {
background: var(--text-color);
color: var(--white);
padding: 4rem 0 2rem;
} html, body {
height: 100%;
margin: 0;
padding: 0;
} body {
display: flex;
flex-direction: column;
min-height: 100vh; } main {
flex: 1;
}
.footer-content {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 2rem; justify-items: center; align-items: start; text-align: left; margin-bottom: 2rem; }
.footer-section h3 {
margin-bottom: 1rem;
}
.footer-social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.footer-social-icons a {
color: var(--white);
font-size: 1.5rem;
transition: var(--transition);
}
.footer-social-icons a:hover {
color: var(--primary-color);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
} @media (max-width: 768px) {
.nav-links, .social-icons {
display: none;
}
.mobile-menu {
display: block;
}
.hero h1 {
font-size: 2.5rem;
}
.mission-content {
grid-template-columns: 1fr;
}
.newsletter-form {
flex-direction: column;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.footer-social-icons {
justify-content: center;
}
}.course-hero {
background-size: cover;
background-position: center;
background-color: #1a1a1a;
min-height: 60vh;
display: flex;
align-items: center;
text-align: center;
color: var(--white);
position: relative;
z-index: 1;
}
.course-hero-content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 2;
}
.course-hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.subtitle {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.price-tag {
margin: 2rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.price {
font-size: 2.5rem;
font-weight: 700;
} .course-intro {
padding: 5rem 0;
background: var(--white);
}
.intro-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.intro-text h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--text-color);
}
.intro-text p {
margin-bottom: 1rem;
font-size: 1.1rem;
line-height: 1.8;
}
.intro-image img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} .benefits {
padding: 5rem 0;
background: var(--light-bg);
}
.benefits h2 {
text-align: center;
margin-bottom: 3rem;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.benefit-card {
background: var(--white);
padding: 2rem;
border-radius: 10px;
text-align: center;
transition: var(--transition);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.benefit-card:hover {
transform: translateY(-5px);
}
.benefit-card i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
@media (max-width: 1024px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.course-hero {
padding-top: 100px;
}
.course-hero h1 {
font-size: 2.8rem;
}
}
@media (max-width: 768px) {
.benefits-grid {
grid-template-columns: 1fr;
}
.course-hero {
padding-top: 80px;
min-height: 50vh;
}
.course-hero h1 {
font-size: 2.2rem;
}
.subtitle {
font-size: 1.2rem;
}
} .target-audience {
padding: 5rem 0;
background: var(--white);
}
.target-audience h2 {
text-align: center;
margin-bottom: 3rem;
}
.audience-list {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.audience-item {
display: flex;
align-items: flex-start;
gap: 2rem;
padding: 2rem;
background: var(--light-bg);
border-radius: 15px;
transition: transform 0.3s ease;
}
.audience-item:hover {
transform: translateX(10px);
}
.audience-icon {
background: var(--primary-color);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.audience-icon i {
color: var(--white);
font-size: 1.5rem;
}
.audience-content {
flex: 1;
}
.audience-content p {
margin: 0;
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-color);
}
.target-audience .cta-button {
display: block;
width: fit-content;
margin: 3rem auto 0;
}
@media (max-width: 768px) {
.audience-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
padding: 1.5rem;
}
.audience-item:hover {
transform: translateY(-5px);
}
} .course-details {
padding: 5rem 0;
background: var(--white);
position: relative;
}
.course-details-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
}
.header-content {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
.course-details h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--text-color);
}
.header-description {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-color);
opacity: 0.9;
}
.course-details-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.details-main-content {
display: flex;
flex-direction: column;
gap: 3.5rem;
margin-top: 9rem;
}
.details-side-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.detail-box {
background: var(--white);
padding: 2rem;
border-radius: 20px;
position: relative;
transition: transform 0.3s ease;
border: 2px solid var(--light-bg);
}
.detail-box:hover {
transform: translateY(-5px);
border-color: var(--primary-color);
}
.detail-number {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 3rem;
font-weight: 700;
color: var(--primary-color);
opacity: 0.1;
transition: opacity 0.3s ease;
}
.detail-box:hover .detail-number {
opacity: 0.2;
}
.detail-box i {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 1rem;
display: block;
}
.detail-box h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-color);
}
.detail-box p {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-color);
opacity: 0.9;
}
.video-materials, .prompt-list {
background: linear-gradient(135deg, var(--white) 0%, var(--light-bg) 100%);
}
@media (max-width: 1024px) {
.course-details-grid {
grid-template-columns: 1fr;
}
.details-main-content, .details-side-content {
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.course-details h2 {
font-size: 2rem;
}
.header-description {
font-size: 1.1rem;
}
.detail-box {
padding: 1.5rem;
}
.detail-number {
font-size: 2.5rem;
}
} .sample-lessons {
padding: 5rem 0;
background: var(--white);
}
.sample-lessons h2 {
text-align: center;
margin-bottom: 3rem;
}
.modules-container {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.module-item {
background: var(--white);
border: 2px solid var(--light-bg);
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
}
.module-item:hover {
border-color: var(--primary-color);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.module-header {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: var(--white);
transition: background-color 0.3s ease;
}
.module-header:hover {
background: var(--light-bg);
}
.module-title {
display: flex;
align-items: center;
gap: 1rem;
}
.module-number {
font-size: 1rem;
font-weight: 600;
color: var(--primary-color);
padding: 0.5rem 1rem;
background: rgba(var(--primary-color-rgb), 0.1);
border-radius: 20px;
}
.module-title h3 {
font-size: 1.2rem;
margin: 0;
color: var(--text-color);
}
.module-toggle i {
font-size: 1.2rem;
color: var(--text-color);
transition: transform 0.3s ease;
}
.module-content {
display: none;
padding: 0 1.5rem;
background: var(--light-bg);
}
.module-item.active .module-content {
display: block;
padding: 1.5rem;
}
.module-item.active .module-toggle i {
transform: rotate(180deg);
}
.lesson-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lesson-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--white);
border-radius: 10px;
transition: transform 0.3s ease;
}
.lesson-item:hover {
transform: translateX(10px);
}
.lesson-number {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-color);
opacity: 0.6;
min-width: 30px;
}
.lesson-item p {
margin: 0;
font-size: 1.1rem;
color: var(--text-color);
}
.sample-lessons .cta-button {
display: block;
width: fit-content;
margin: 3rem auto 0;
}
@media (max-width: 768px) {
.module-title {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.module-number {
font-size: 0.9rem;
}
.module-title h3 {
font-size: 1.1rem;
}
.lesson-item {
padding: 0.8rem;
}
.lesson-item p {
font-size: 1rem;
}
} .faq {
padding: 5rem 0;
background: var(--light-bg);
}
.faq h2 {
text-align: center;
margin-bottom: 3rem;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--white);
border-radius: 10px;
margin-bottom: 1rem;
overflow: hidden;
}
.faq-question {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: var(--transition);
}
.faq-question:hover {
background: rgba(0, 0, 0, 0.02);
}
.faq-question h3 {
margin: 0;
font-size: 1.1rem;
}
.faq-question i {
transition: transform 0.3s ease;
}
.faq-answer {
display: none;
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-item.active .faq-answer {
display: block;
padding: 1.5rem;
max-height: none;
} @media (max-width: 768px) {
.course-hero h1 {
font-size: 2.5rem;
}
.intro-content {
grid-template-columns: 1fr;
}
.price-tag {
padding: 0.8rem 1.5rem;
}
.price {
font-size: 1.5rem;
}
}.contact-hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://startai-kursy.pl/wp-content/uploads/2025/01/contactshero.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #1a1a1a;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
}
.contact-hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.contact-hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero-subtitle {
font-size: 1.5rem;
opacity: 0.9;
} .contact-form-section {
padding: 5rem 0;
background: var(--white);
}
.contact-content {
max-width: 800px;
margin: 0 auto;
}
.form-intro {
text-align: center;
margin-bottom: 3rem;
}
.form-intro h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
} .contact-form {
background: var(--light-bg);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} .wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-textarea {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s ease;
} .wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-textarea:focus {
border-color: var(--primary-color);
outline: none;
} .wpcf7-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
} .wpcf7-form-control.wpcf7-textarea {
resize: vertical;
height: 150px;
} .wpcf7-acceptance {
display: flex;
align-items: flex-start;
gap: 1rem;
} .wpcf7-acceptance input[type="checkbox"] {
width: auto;
margin-top: 0.25rem;
} .wpcf7-acceptance label {
font-size: 0.9rem;
margin-bottom: 0;
} .wpcf7-form input[type="submit"] {
background: var(--white);
color: var(--primary-color);
padding: 1rem 2rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1rem;
transition: var(--transition);
width: 100%;
} .wpcf7-form input[type="submit"]:hover {
background: var(--light-bg);
transform: translateY(-2px);
} .wpcf7-response-output {
margin-top: 1rem;
padding: 1rem;
border-radius: 5px;
font-size: 1rem;
}
.wpcf7-not-valid-tip {
color: red;
font-size: 0.9rem;
margin-top: 0.5rem;
} .wpcf7-response-output {
display: none;
} .contact-newsletter {
padding: 5rem 0;
background: var(--primary-color);
color: var(--white);
}
.newsletter-content2 {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.newsletter-content2 h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.newsletter-content2 p {
margin-bottom: 2rem;
}
.newsletter-form2 {
display: flex;
gap: 1rem;
max-width: 550px;
margin: 0 auto;
}
.newsletter-form2 .form-group2 {
flex: 1;
}
.newsletter-form2 .submit-button {
width: auto;
white-space: nowrap;
}
.newsletter-form2 input {
width: 100%;
padding: 1rem;
border: none;
border-radius: 5px;
font-size: 1rem;
}
.submit-button {
background: var(--primary-color);
color: var(--white);
padding: 1rem 2rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1rem;
transition: var(--transition);
}
.submit-button2 {
background: var(--white);
color: var(--primary-color);
padding: 1rem 2rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1rem;
transition: var(--transition);
}
.submit-button:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
.submit-button2:hover {
background: var(--light-bg);
transform: translateY(-2px);
} .social-media-section {
padding: 5rem 0;
background: var(--light-bg);
text-align: center;
}
.social-media-section h2 {
margin-bottom: 3rem;
}
.social-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.social-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background: var(--white);
border-radius: 10px;
text-decoration: none;
color: var(--text-color);
transition: var(--transition);
}
.social-item:hover {
transform: translateY(-5px);
}
.social-item i {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.social-item.facebook i { color: #1877f2; }
.social-item.instagram i { color: #e4405f; }
.social-item.linkedin i { color: #0077b5; }
.social-item.twitter i { color: #1da1f2; } @media (max-width: 768px) {
.contact-hero h1 {
font-size: 3rem;
}
.newsletter-form {
flex-direction: column;
}
.social-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.contact-form {
padding: 1.5rem;
}
}.newsletter-hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://startai-kursy.pl/wp-content/uploads/2025/01/newshero.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #1a1a1a;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
}
.newsletter-hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.newsletter-hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero-subtitle {
font-size: 1.5rem;
opacity: 0.9;
} .newsletter-intro {
padding: 5rem 0;
background: var(--white);
}
.intro-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.intro-text h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: var(--text-color);
}
.benefits-list {
list-style: none;
padding: 0;
}
.benefits-list li {
margin-bottom: 1rem;
display: flex;
align-items: center;
font-size: 1.1rem;
}
.benefits-list i {
color: var(--primary-color);
margin-right: 1rem;
}
.intro-image-news img {
width: 100%;
border-radius: 10px;
} .newsletter-signup {
background: var(--light-bg);
padding: 5rem 0;
}
.signup-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.signup-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text-color);
}
.signup-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
color: var(--text-color);
}
.newsletter-form {
margin: 2rem auto;
width: 100%;
max-width: 800px;
padding: 0 1rem;
}
.form-row {
display: flex;
gap: 2rem;
margin-bottom: 1.5rem;
width: 100%;
}
.form-group {
display: flex;
flex-direction: space-between;
}
.form-group.name-field {
flex: 0 0 200px;
}
.form-group.email-field {
flex: 1 1 auto;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 0.8rem 1rem;
border: 2px solid #e1e1e1;
border-radius: 12px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus {
border-color: var(--primary-color);
outline: none;
}
.submit-button-news {
display: block;
margin: 0 auto;
background: var(--primary-color);
color: var(--white);
padding: 1rem 3rem;
border: none;
border-radius: 8px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-button:hover {
background: var(--primary-dark);
transform: translateY(-2px);
} .newsletter-cta {
padding: 5rem 0;
background: var(--primary-color);
color: var(--white);
text-align: center;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 1rem;
} .course-signup {
text-align: center;
padding: 4rem 0;
background: var(--primary-color);
color: var(--white);
}
.course-signup h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.course-signup p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.course-signup .cta-button {
display: inline-block;
padding: 1rem 3rem;
background: var(--white);
color: var(--primary-color);
text-decoration: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
}
.course-signup .cta-button:hover {
background: var(--light-bg);
transform: translateY(-2px);
} @media (max-width: 768px) {
.newsletter-hero h1 {
font-size: 3rem;
}
.intro-content {
grid-template-columns: 1fr;
}
.benefits-list li {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.form-row {
flex-direction: column;
gap: 1rem;
}
.form-group.name-field {
flex: 1;
}
.signup-content h2 {
font-size: 2rem;
}
.signup-content p {
font-size: 1.1rem;
}
.submit-button {
width: 100%;
}
}.prompts-hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://startai-kursy.pl/wp-content/uploads/2025/01/promptshero.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #1a1a1a;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
}
.prompts-hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.prompts-hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero-subtitle {
font-size: 1.5rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
} .prompts-intro {
padding: 5rem 0;
background: var(--white);
}
.intro-content-prompts {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.intro-content-prompts h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: var(--text-color);
}
.intro-content-prompts p {
font-size: 1.2rem;
line-height: 1.6;
} .prompts-categories {
padding: 5rem 0;
background: var(--light-bg);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.category-card {
background: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
z-index: 1;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.category-card.expanded {
background: var(--light-bg);
}
.card-header {
background: var(--primary-color);
color: var(--white);
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
z-index: 2;
}
.category-card.expanded .card-header {
background: var(--secondary-color);
}
.card-header i {
font-size: 3rem;
margin-bottom: 1rem;
}
.card-header h3 {
font-size: 1.5rem;
margin: 0;
}
.card-content {
padding: 2rem;
display: none;
background: var(--white);
transition: all 0.3s ease;
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 1;
}
.card-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
.card-content p {
margin-bottom: 1rem;
font-weight: 500;
}
.card-content ul {
list-style: none;
padding: 0;
}
.card-content li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.card-content li:before {
content: "•";
color: var(--primary-color);
position: absolute;
left: 0;
} .categories-list {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
}
.category-item {
margin-bottom: 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
background: var(--white);
}
.category-header {
display: flex;
align-items: center;
padding: 1.5rem;
background: var(--white);
cursor: pointer;
position: relative;
}
.category-header:hover {
background: var(--light-bg);
}
.category-header i {
font-size: 1.5rem;
margin-right: 1rem;
color: var(--primary-color);
}
.category-header h3 {
margin: 0;
flex-grow: 1;
font-size: 1.2rem;
color: var(--text-color);
}
.expand-icon {
font-size: 1.5rem;
color: var(--primary-color);
transition: transform 0.3s ease;
}
.category-item.expanded .expand-icon {
transform: rotate(45deg);
}
.category-content {
display: none;
padding: 0 1.5rem 1.5rem;
border-top: 1px solid var(--border-color);
background: var(--white);
}
.category-content h4 {
color: var(--primary-color);
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.category-content p {
margin-bottom: 1rem;
line-height: 1.6;
}
.category-content ul {
list-style-type: none;
padding-left: 0;
}
.category-content li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.category-content li:before {
content: "•";
color: var(--primary-color);
position: absolute;
left: 0;
}
.category-content strong {
color: var(--primary-color);
}
.download-button {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #2563eb;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
margin-top: 20px;
transition: background-color 0.3s ease;
}
.download-button:hover {
background-color: #1d4ed8;
}
.download-button i {
font-size: 18px;
} .prompts-education {
padding: 5rem 0;
background: var(--white);
}
.education-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.education-text h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
.education-text p {
font-size: 1.2rem;
line-height: 1.6;
}
.education-image img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} .prompts-cta {
padding: 5rem 0;
background: var(--primary-color);
color: var(--white);
text-align: center;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.prompts-cta .cta-button {
display: inline-block;
padding: 1rem 2rem;
background: var(--white);
color: var(--primary-color);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.prompts-cta .cta-button:hover {
background: var(--light-bg);
transform: translateY(-2px);
} .prompts-download {
padding: 5rem 0;
background: var(--light-bg);
} .prompts-download .wpcf7 {
max-width: 500px;
margin: 0 auto;
background: var(--white);
padding: 2.5rem 2rem;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
} .prompts-download .wpcf7-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
} .prompts-download input[type="email"],
.prompts-download select {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
} .prompts-download input[type="email"]:focus,
.prompts-download select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
outline: none;
} .prompts-download label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
text-align: left;
font-size: 1rem;
color: #333;
} .prompts-download .wpcf7-acceptance {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.9rem;
text-align: left;
color: #333;
} .prompts-download .wpcf7-acceptance a {
color: var(--primary-color);
text-decoration: underline;
} .prompts-download input[type="submit"] {
background: var(--primary-color);
color: var(--white);
padding: 1rem 2rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1rem;
transition: background 0.3s ease, transform 0.2s ease;
} .prompts-download input[type="submit"]:hover {
background: var(--secondary-color);
transform: translateY(-2px);
} .prompts-download .wpcf7-response-output {
margin-top: 1rem;
padding: 1rem;
border-radius: 5px;
background-color: #f0f0f0;
color: #333;
border-left: 4px solid var(--primary-color);
}
.download-content {
max-width: 700px;
margin: 0 auto 2rem;
text-align: center;
}
.download-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.download-content p {
margin-bottom: 2rem;
color: #555;
} @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 768px) {
.prompts-hero h1 {
font-size: 3rem;
}
.education-content {
grid-template-columns: 1fr;
}
.download-form {
flex-direction: column;
}
.categories-grid {
grid-template-columns: 1fr;
}
.categories-list {
padding: 1rem;
}
.category-header {
padding: 1rem;
}
.category-content {
padding: 0 1rem 1rem;
}
}.pbl-container{display:flex;justify-content:center;flex-direction:column}.pbl-container .payu-list-banks{list-style-type:none;display:flex;flex-wrap:wrap;margin:0;padding:0;justify-content:center}.pbl-container .payu-list-banks li{padding:5px 3px 0}.pbl-container .payu-list-banks li.payu-inactive{opacity:.5;filter:grayscale(1)}.pbl-container .payu-list-banks li:not(.payu-inactive) label{cursor:pointer}.pbl-container .payu-list-banks li:not(.payu-inactive) label:hover{background:#ddd;border-color:#aaa}.pbl-container .payu-list-banks li label{padding:10px;display:flex;border:1px solid #bbb;transition:all 250ms;width:86px;justify-content:center;align-items:center}.pbl-container .payu-list-banks li label.active{background:#ddd;border-color:#aaa}.pbl-container .payu-list-banks li label img{width:auto;height:31px;object-fit:contain;margin:0 !important;padding:0}.pbl-container .payu-list-banks li label input{display:none}.pbl-container .pbl-error{padding-top:.5em;padding-bottom:.5em;margin-top:.5em;margin-bottom:.5em;display:none}.pbl-container .pbl-error:before{top:.5em}.payu-accept-conditions{margin-top:15px}.payu-accept-conditions .payu-conditions-description{font-size:12px;line-height:120%;margin-top:8px;text-align:justify}.payu-accept-conditions .payu-conditions-description>div{margin:5px 0}.payu-accept-conditions .payu-conditions-description a{text-decoration:underline}.payu-accept-conditions .payu-conditions-description .payu-read-more{text-decoration:underline;cursor:pointer}.payu-accept-conditions .payu-conditions-description .payu-more-hidden{display:none}#payu-card-container{max-width:350px;margin:10px auto 10px;text-align:left;box-sizing:border-box;border:1px solid #bbb;padding:5px;border-radius:5px;background-color:#ddd;color:#333}#payu-card-container .payu-sf-validation-error,#payu-card-container .payu-sf-technical-error{display:none;color:#b21b0f;font-size:13px}#payu-card-container .payu-card-form{background-color:#fff;padding:5px;border-radius:4px;border:1px solid rgba(0,0,0,0)}#payu-card-container .payu-secure-form-invalid:not(.payu-secure-form-focus){border-color:#b21b0f}#payu-card-container label{padding-bottom:2px;font-size:15px}.card-details{clear:both;overflow:auto;margin-top:10px}.card-details .expiration{width:47%;float:left;margin-right:5%}.card-details .cvv{width:47%;float:left}#tokenizeButton{border:none;background:#438f29;padding:8px 15px;cursor:pointer;color:#fff;display:table;margin:10px auto 0}.response-success{color:#438f29}.response-error{color:#900}.autonomy-payu-button{display:flex;align-items:center;text-decoration:none;margin:10px 0}.autonomy-payu-button img{margin-left:10px;width:50px;height:auto}label[for*=payment_method_payu] img{border-radius:0}.payu-block-method{gap:10px}.payu-block-method-logo{margin-left:5px}.payu-block-installments-label{display:flex;justify-content:space-between;width:100%}.payu-block-installments-label>div{align-items:center;display:flex}.payu-block-list-banks{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px}.payu-block-list-banks>.payu-bank{align-items:center;background-color:#fff;border:1px solid #ccc;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:all 250ms;width:82px}.payu-block-list-banks>.payu-bank.disabled{cursor:not-allowed;filter:grayscale(1);opacity:.5}.payu-block-list-banks>.payu-bank:not(.disabled):hover{background:#eee;border-color:#13100d}.payu-block-list-banks>.payu-bank.active{background:#eee;border-color:#13100d}.payu-block-list-banks>.payu-bank>img{border-radius:0;height:28px;object-fit:contain;width:auto}.block-payu-card{display:flex;flex-wrap:wrap;gap:0 10px;margin:10px 0;padding:10px}.block-payu-card .payu-sf-validation-error{color:#b21b0f;font-size:13px}.block-payu-card>.block-payu-card-number{flex:1 0 100%}.block-payu-card>.block-payu-card-date,.block-payu-card .block-payu-card-cvv{flex:1 0 calc(50% - 10px)}.block-payu-card .payu-card-form{background-color:#fff;border:1px solid #999;border-radius:5px;padding:8px 6px}.block-payu-card .payu-card-form.payu-secure-form-focus{border-color:#666;box-shadow:0 0 0 1px #666}.block-payu-card .payu-card-form.payu-secure-form-invalid:not(.payu-secure-form-focus){border-color:#cc1818}#installment-mini-block{margin:inherit;padding-right:16px;text-align:right}