html{margin:0;padding:0}ul{padding:0;margin:0}li{list-style-type:none;padding:0;margin:0}a{color:#000;text-decoration:unset;transition:.2s}a:hover{color:#8737ff}header{display:flex;justify-content:space-between;padding-top:60px;align-items:center}header a{font-size:24px;text-transform:uppercase}header a.active{font-weight:bold}header ul{display:flex}header ul a{padding-left:22px;padding-right:22px}.login-bar{display:flex}.login-bar .column{display:flex;flex-direction:column;margin-right:13px}.login-bar img{aspect-ratio:default;height:36px;width:36px}.login-bar a{font-size:14px;font-weight:400;text-transform:unset}.login-bar a:nth-of-type(1){font-weight:bold}.login-bar .line{width:100%;height:1px;background-color:#e1cdff;content:""}.sections{background-image:url("/images/imagebg.jpg")}.modules,.sections{background-position:center;background-size:cover}.btn-primary{background-color:#8737ff;border-radius:8px;color:#fff;padding:13px 20px;position:relative;transition:.3s;font-size:24px;font-weight:400;min-width:192px;display:flex;width:fit-content;justify-content:center;margin-left:auto;margin-right:auto}.btn-primary:hover{color:#fff;background-color:#9957fb}.text-center{text-align:center}p{font-weight:400}.sections_cont{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding:80px;min-height:720px;align-items:center;color:#fff}.sections_cont p{font-size:24px}.sections_cont img{max-width:60px;width:100%}h1{font-size:40px;font-weight:400}h2{font-size:40px}.container{max-width:1380px;padding-left:40px;padding-right:40px;margin-left:auto;margin-right:auto}.main-section{text-align:center;padding-bottom:120px;padding-top:120px}.main-section h1{margin-top:0;margin-bottom:60px}.be-ready{display:grid;grid-template-columns:1fr 1fr;padding-top:120px;padding-bottom:120px}.be-ready img{width:100%;max-width:634px}.be-ready p{font-size:24px;margin-bottom:37px}.info{background-color:#8737ff}.info .container{grid-template-columns:1fr 1fr 1fr;gap:40px;display:grid;padding-top:60px;padding-bottom:60px;row-gap:10px;color:#fff}.info .info-box{display:flex;gap:20px}.info .info-box img{aspect-ratio:square;height:96px;width:96px}.info .info-box p{margin:0}.info .info-box p:first-of-type{font-size:40px;font-weight:bold}.info .info-box p:first-of-type span{position:relative;top:-2px}.info .info-box p:first-of-type span:nth-child(2){top:-4px}.info .info-box p:first-of-type span:nth-child(2){top:-3px}.info .info-box p:nth-of-type(2){font-size:24px;font-weight:regular}.modules{background-image:url("/images/modules.png");padding-top:120px;padding-bottom:120px;text-align:center;color:#fff}.modules h2{margin-bottom:60px}footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding-top:74px;padding-bottom:74px}footer div:not(.socials){display:flex;flex-direction:column;gap:16px}footer div:not(.socials) a{font-size:20px;font-weight:400}footer div:not(.socials) h3{font-size:24px;font-weight:bold;margin-bottom:11px;margin-top:0}footer .socials{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:20px;width:fit-content}footer .socials img{width:40px;height:40px}footer .socials a{background-color:#8737ff;width:50px;height:50px;padding:10px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;border-radius:50%}footer .socials a img{width:80%;height:80%}footer .socials a:first-of-type{background-color:rgba(0,0,0,0)}footer .socials a:first-of-type img{width:50px;height:50px}.copy{display:flex;flex-wrap:wrap;gap:20px;align-items:center;text-align:center;justify-content:center}.copy p{font-weight:bold;font-size:16px;color:#5a5a5a}.copy a{font-weight:400;font-size:16px;color:#5a5a5a}.copy a:hover{color:#9957fb}button{border:unset}.tab{border-radius:8px;background-color:#fff;color:#313174;display:flex;align-items:center;gap:11px;height:54px;width:192px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:24px;font-weight:400;transition:.2s;cursor:pointer;background-color:#f6f7fa;box-shadow:0 2px 4px #313174}.tab:hover{opacity:.9}.tab img{height:32px}.tab.active{background-color:#313174;color:#fff;box-shadow:unset}.page{background-color:#f6f7fa}.lessons{margin-top:65px}.lessons .less-buttons{display:flex;width:100%;justify-content:center;align-items:center;flex-direction:row;gap:24px;position:relative;transform:translateY(-50%);padding-bottom:0}.diff{display:flex;gap:6px}.diff img{width:32px !important}.card-container{display:flex;flex-wrap:wrap;gap:80px;padding-bottom:80px}.card{background-color:#fff;box-shadow:0 0 4px #313174;border-radius:8px;height:431px;width:300px}.card>*:not(img){padding-left:20px;padding-right:20px}.card h2{font-size:24px;margin-top:0;margin-bottom:7px}.card p{margin:0}.card .diff{margin-top:17px}.card img{width:100%;height:auto;max-height:200px}.card .progress{margin-top:18px}.progress{max-width:246px;width:100%;text-align:center}.progress p{margin-top:5px;font-size:14px;color:#000}.progress .progress-bar{width:100%;height:4px;background-color:#fff;border-radius:5px;overflow:hidden;position:relative}.progress .progress-bar span{display:block;height:100%;background-color:#313174;border-radius:5px;transition:width .3s ease}.course-back{display:flex;align-items:center;gap:17px}.course-back img{height:18px;width:9px}.course-detail .menu{background-color:#f6f7fa;padding-left:35px;padding-right:35px;box-sizing:border-box;padding-top:98px;max-width:411px;width:100%;height:100vh;overflow-y:scroll}.lessons-list{display:flex;flex-direction:column;gap:22px;font-size:20px;font-weight:200;margin-top:40px;margin-bottom:40px}.lessons-list .flex{display:grid;grid-template-columns:1fr 30px}.lessons-list a.active{font-weight:500}.alig-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.course-name{margin-top:90px;margin-bottom:23px;font-size:24px;font-weight:bold}.circle-status{background-color:rgba(0,0,0,0);border-radius:50%;display:flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:pointer;border:1px solid #313174}.circle-status img{width:10px;height:auto;display:none}.circle-status.active{background-color:#313174}.circle-status.active img{display:block}.course-detail{display:grid;grid-template-columns:411px 1fr;gap:66px;padding-right:54px}.course-content{padding-top:61px}.course-content .course-login{display:flex;justify-content:flex-end}.course-content h1{font-size:48px;font-weight:bold;margin:0;margin-bottom:20px}.back{display:flex;align-items:center;gap:22px;background-color:#f6f7fa;width:fit-content;padding:7px 14px;font-size:20px;border-radius:8px;font-weight:400;margin-bottom:20px}.next{display:flex;align-items:center;gap:22px;background-color:#6cd07b;color:#fff;width:fit-content;padding:7px 14px;font-weight:bold;font-size:20px;border-radius:8px;transition:.2s;font-weight:400;margin-top:40px}.next img{transition:.2s}.next:hover{color:#000}.next:hover img{filter:invert(1)}@media(max-width: 767px){header{flex-direction:column;text-align:center;padding-top:30px;gap:20px}header img{max-width:120px}header a{font-size:18px}header ul{flex-wrap:wrap;justify-content:center;gap:10px}header ul a{padding:8px 12px;font-size:16px}.login-bar{gap:10px}.login-bar .column{margin-right:0;text-align:center}.login-bar img{height:30px}.login-bar a{font-size:12px}.container{padding-left:20px;padding-right:20px}.main-section{padding-bottom:60px;padding-top:60px}.main-section h1{font-size:28px;margin-bottom:30px;line-height:1.2}.btn-primary{font-size:18px;padding:12px 18px;min-width:140px}.sections_cont{grid-template-columns:1fr;gap:30px;padding:40px 20px;min-height:auto}.sections_cont p{font-size:18px}.sections_cont img{max-width:50px}h1{font-size:28px}h2{font-size:24px}.be-ready{grid-template-columns:1fr;padding-top:60px;padding-bottom:60px;gap:30px}.be-ready p{font-size:18px;margin-bottom:20px}.info .container{grid-template-columns:1fr;gap:30px;padding-top:40px;padding-bottom:40px}.info .info-box{flex-direction:column;text-align:center;gap:15px;text-align:center}.info .info-box img{height:60px;width:60px;margin-left:auto;margin-right:auto}.info .info-box p:first-of-type{font-size:28px}.info .info-box p:nth-of-type(2){font-size:18px}.modules{padding-top:60px;padding-bottom:60px}.modules h2{margin-bottom:30px}footer{grid-template-columns:1fr;gap:30px;padding-top:40px;padding-bottom:40px}footer div:not(.socials) a{font-size:16px}footer div:not(.socials) h3{font-size:20px}footer .socials{grid-template-columns:repeat(3, 1fr);gap:10px;justify-items:center}footer .socials img{width:30px;height:30px}.copy{flex-direction:column;gap:10px;padding:20px}.copy p,.copy a{font-size:14px}.tab{height:50px;width:160px;font-size:18px;gap:8px}.tab img{height:24px}.lessons{margin-top:120px}.lessons .less-buttons{flex-direction:column;gap:15px}.diff{gap:4px}.diff img{width:24px !important}.card-container{gap:30px;padding-bottom:40px;justify-content:center}.card{width:280px;height:auto}.card>*:not(img){padding-left:15px;padding-right:15px}.card h2{font-size:20px}.card .diff{margin-top:15px}.card img{max-height:180px}.card .progress{margin-top:15px}.progress p{font-size:12px}.course-detail{grid-template-columns:1fr;gap:20px;padding-right:0}.course-detail .menu{padding:20px;padding-top:40px;max-width:100%;height:auto;overflow-y:visible}.course-back{gap:12px}.course-back img{height:16px;width:8px}.lessons-list{gap:15px;font-size:16px;margin-top:30px;margin-bottom:30px}.lessons-list .flex{gap:10px}.course-name{margin-top:40px;margin-bottom:20px;font-size:20px}.circle-status{width:18px;height:18px}.circle-status img{width:8px}.course-content{padding-top:30px;padding:30px}.course-content h1{font-size:32px;margin-bottom:15px}.back{gap:15px;padding:6px 12px;font-size:16px;margin-bottom:15px}.next{gap:15px;padding:6px 12px;font-size:16px;margin-top:30px}}@media(min-width: 768px)and (max-width: 1023px){header{padding-top:40px}header img{max-width:150px}header a{font-size:20px}header ul a{padding:10px 15px;font-size:18px}.login-bar img{height:35px}.login-bar a{font-size:13px}.container{max-width:750px;padding-left:30px;padding-right:30px}.main-section{padding-bottom:80px;padding-top:80px}.main-section h1{font-size:32px;margin-bottom:40px}.btn-primary{font-size:20px;padding:12px 18px;min-width:160px}.sections_cont{grid-template-columns:1fr 1fr;gap:35px;padding:60px 40px}.sections_cont p{font-size:20px}.sections_cont img{max-width:55px}h1{font-size:32px}h2{font-size:32px}.be-ready{grid-template-columns:1fr 1fr;padding-top:80px;padding-bottom:80px}.be-ready img{width:100%;max-width:634px}.be-ready p{font-size:20px;margin-bottom:30px}.info .container{grid-template-columns:1fr 1fr;gap:35px;padding-top:50px;padding-bottom:50px}.info .info-box{gap:18px}.info .info-box img{height:80px;width:80px}.info .info-box p:first-of-type{font-size:32px}.info .info-box p:nth-of-type(2){font-size:20px}.modules{padding-top:80px;padding-bottom:80px}.modules h2{margin-bottom:40px}footer{grid-template-columns:1fr 1fr;gap:25px;padding-top:50px;padding-bottom:50px}footer div:not(.socials) a{font-size:18px}footer div:not(.socials) h3{font-size:22px}footer .socials{grid-template-columns:repeat(4, 1fr)}footer .socials img{width:35px;height:35px}.copy{gap:15px}.copy p,.copy a{font-size:15px}.tab{height:52px;width:180px;font-size:20px;gap:10px}.tab img{height:28px}.lessons{margin-top:50px}.lessons .less-buttons{flex-direction:row;gap:20px}.diff{gap:5px}.diff img{width:28px !important}.card-container{gap:50px;padding-bottom:60px}.card{width:300px;height:431px}.card h2{font-size:22px}.card .diff{margin-top:16px}.card img{max-height:190px}.card .progress{margin-top:17px}.progress p{font-size:13px}.course-detail{grid-template-columns:300px 1fr;gap:40px;padding-right:30px}.course-detail .menu{padding-left:25px;padding-right:25px;padding-top:60px;max-width:300px;height:100vh;overflow-y:scroll}.course-back{gap:15px}.course-back img{height:17px;width:8px}.lessons-list{gap:20px;font-size:18px;margin-top:35px;margin-bottom:35px}.course-name{margin-top:60px;margin-bottom:22px;font-size:22px}.circle-status{width:19px;height:19px}.circle-status img{width:9px}.course-content{padding-top:45px}.course-content h1{font-size:40px;margin-bottom:18px}.back{gap:18px;padding:7px 13px;font-size:18px;margin-bottom:18px}.next{gap:18px;padding:7px 13px;font-size:18px;margin-top:35px}}@media(min-width: 1200px){.container{max-width:1380px}.sections_cont{grid-template-columns:1fr 1fr 1fr}.info .container{grid-template-columns:1fr 1fr 1fr}footer{grid-template-columns:1fr 1fr 1fr}.course-detail{grid-template-columns:411px 1fr}}
/* Paginace styly */
.pagination-container {
margin-top: 40px;
text-align: center;
padding: 20px 0;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
background-color: #fff;
border-radius: 8px;
padding: 10px 15px;
box-shadow: 0 1px 4px rgba(49, 49, 116, 0.08);
}
.pagination li {
display: inline-block;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 6px;
color: #313174;
text-decoration: none;
background-color: #f6f7fa;
border: 1px solid transparent;
font-weight: 500;
font-size: 14px;
min-width: 36px;
height: 36px;
transition: all 0.3s ease;
box-shadow: 0 1px 2px rgba(49, 49, 116, 0.08);
}
.pagination a:hover {
background-color: #8737ff;
color: #fff;
border-color: #8737ff;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(135, 55, 255, 0.25);
}
.pagination li.active span {
background-color: #313174;
color: #fff;
border-color: #313174;
box-shadow: 0 2px 6px rgba(49, 49, 116, 0.25);
}
.pagination li.disabled span {
color: #999;
background-color: #f5f5f5;
border-color: #e0e0e0;
cursor: not-allowed;
opacity: 0.6;
}
.pagination li.disabled span:hover {
transform: none;
box-shadow: 0 1px 2px rgba(49, 49, 116, 0.08);
}
/* Styly pro navigační tlačítka */
.pagination a[rel="prev"],
.pagination a[rel="next"] {
font-weight: 600;
padding: 6px 12px;
}
.pagination a[rel="prev"]:before {
content: "← ";
margin-right: 4px;
}
.pagination a[rel="next"]:after {
content: " →";
margin-left: 4px;
}
/* Responsive design */
@media (max-width: 767px) {
.pagination-container {
margin-top: 30px;
padding: 15px 0;
}
.pagination {
gap: 6px;
padding: 8px 12px;
flex-wrap: wrap;
}
.pagination a,
.pagination span {
padding: 5px 8px;
font-size: 13px;
min-width: 32px;
height: 32px;
}
.pagination a[rel="prev"],
.pagination a[rel="next"] {
padding: 5px 10px;
}
}
@media (max-width: 480px) {
.pagination {
gap: 4px;
padding: 6px 10px;
}
.pagination a,
.pagination span {
padding: 4px 6px;
font-size: 12px;
min-width: 28px;
height: 28px;
}
}