:root{--primary:#002b73;--primary1:#111827;--secondary:#2563eb;--highlight:#f4a300;--background:#fff;--background-secondary:#f5f5fb;--text-gray:#3a3a3a;--text-color:#000;--text-lightgray:#9ca3af;--border-color:#ddd;--box-shadow:#b9d8f8;--error:red;--green:#02cd02}html,body{background-color:var(--background-secondary);width:100%;height:100%;color:var(--text-color);margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10pt}:focus{outline:1px solid #adff2f}.app{width:100%;height:100%}.app .app-content{width:100%}.app .app-content #sec1{background:#ff0;width:100%}.app .app-content section{width:100%;min-height:450px;scroll-margin-top:100px}.app .app-footer{background:var(--primary1);width:calc(100% - 60px);min-height:150px;padding:30px}.app .app-footer .app-footer-content{color:var(--text-lightgray);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;padding:10px;display:grid}.app .app-footer .app-footer-content div{text-align:justify}.app .app-footer .app-footer-content div h2,h3{color:var(--background)}.app .app-footer .app-footer-copyright{color:var(--text-lightgray);border-top:1px solid var(--border-color);text-align:center;padding-top:10px;font-size:8pt}.app .app-content section{width:100%}.app .app-content section .slider{width:100%;height:500px;overflow:hidden}.app .app-content section .slider .slides{width:100%;height:100%;transition:transform .5s ease-in-out;display:flex}.app .app-content section .slider .slides .slide{background-size:cover;flex-shrink:0;width:100%;height:100%}.app .app-content section .slider .slides .slide.s1{background-image:url(/b001.jpg)}.app .app-content section .slider .slides .slide.s2{background-image:url(/b003.jpg)}.app .app-content section .slider .slides .slide.s3{background-image:url(/b001.jpg)}.app .app-content section .slider .slides .slide.s4{background-image:url(/b003.jpg)}.app .app-content section .slider .dots{justify-content:center;align-items:center;gap:8px;display:flex;position:relative;bottom:30px}.app .app-content section .slider .dots .dot{background:var(--text-lightgray);cursor:pointer;border-radius:50%;width:10px;height:10px;transition:background .3s,transform .3s}.app .app-content section .slider .dots .dot:hover{transform:scale(1.2)}.app .app-content section .slider .dots .dot.active{background:var(--secondary)}.app .app-content section .slider .slides .slide .overlay{color:#fff;background:#0009;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;height:100%;display:flex}.app .app-content section .slider .slides .slide .overlay h1,.app .app-content section .slider .slides .slide .overlay p{color:var(--background);opacity:0;max-width:600px;margin:5px;transform:translate(-50px)}.app .app-content section .slider .slides .slide.active .overlay h1{font-size:30pt;animation:.8s .5s forwards slideInLeft}.app .app-content section .slider .slides .slide.active .overlay p{color:var(--text-lightgray);text-align:justify;font-size:12pt;animation:.8s .7s forwards slideInLeft}.app .app-content section .aboutdiv{padding:20px}.app .app-content section .about{width:calc(100% - 40px);box-shadow:0 0 20px var(--box-shadow);background:#fff;border-radius:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;padding:20px;display:grid}app .app-content section .about .card{flex-direction:column;align-items:center;display:flex}.app .app-content section .about .card h1{color:var(--primary);margin:0 0 10px}.app .app-content section .about .card h1 span{color:var(--secondary);margin:0 0 10px}.app .app-content section .about .card label{text-align:justify;margin-bottom:15px;font-size:11pt;display:block}.app .app-content section .about .card .items{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:5px;margin-top:30px;display:grid}.app .app-content section .about .card .items div{text-align:center;width:120px;color:var(--primary);background:#f5f5f5;border-radius:10px;padding:5px}.app .app-content section .about .card .items div h1{color:var(--secondary)}.app .app-content section .about .card img{border-radius:10px;width:100%;height:100%}.app .app-content section .infodiv{background:linear-gradient(90deg, var(--secondary), var(--primary));color:var(--background);flex-direction:column;justify-content:center;align-items:center;margin-top:20px;padding:20px;display:flex}.app .app-content section .info .info-content h1,.app .app-content section .infodiv h1{text-align:center;margin:10px;font-size:18pt}.app .app-content section .info .info-content h3,.app .app-content section .infodiv h3{text-align:center;margin:10px;font-weight:400}.app .app-content section .panel{grid-template-columns:700px auto;display:grid}.app .app-content section .panel .panel-left,.app .app-content section .panel .panel-right{padding:50px}.app .app-content section .panel .panel-left{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;display:grid}.app .app-content section .panel .panel-left div{background:var(--background);width:160px;height:160px;box-shadow:0 0 20px var(--box-shadow);flex-direction:column;align-items:center;padding:10px;transition:transform .3s;display:flex}.app .app-content section .panel .panel-left div:hover{transform:translateY(-8px)}.app .app-content section .panel .panel-left div img{width:100px;height:100px}.app .app-content section .panel .panel-left div label{font-weight:600}.app .app-content section .panel .panel-left div span{color:var(--text-gray)}.app .app-content section .panel .panel-right p{color:var(--text-gray);text-align:justify}.app .app-content section .info{background-image:url(/b004.jpg);margin-top:20px}.app .app-content section .info .info-content{color:var(--background);background:#0009;flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex}@media (width<=768px){.app .app-content section{min-height:250px}.app .app-content section .slider{height:250px}.app .app-content section .slider,.slide,.overlay,.app .app-content section .slider .slides .slide .overlay{height:300px}.app .app-content section .slider .slides .slide .overlay h1,.app .app-content section .slider .slides .slide.active .overlay p{max-width:300px}.app .app-content section .slider .slides .slide.active .overlay h1{font-size:25pt}.app .app-content section .slider .slides .slide.active .overlay p{font-size:10pt}.app .app-content section .panel{flex-direction:column;display:flex}.app .app-content section .panel .panel-left{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:20px;display:grid}.app .app-content section .panel .panel-left div{width:150px;height:150px}}@keyframes slideInLeft{0%{opacity:0;transform:translate(0)}to{opacity:1;transform:translate(50px)}}.header{z-index:999;background:var(--background);width:100%;height:75px;box-shadow:0 0 5px var(--box-shadow);justify-content:space-between;align-items:center;line-height:75px;display:flex;position:sticky;top:0}.header .logo{align-items:center;gap:5px;font-size:18pt;font-weight:700;display:flex}.header .logo img{cursor:pointer;height:40px;margin-bottom:7px;margin-left:20px}.header .logo .logo-text{color:var(--primary);cursor:pointer}.header .logo .logo-text span{color:var(--secondary)}.header .menu{color:var(--secondary);align-items:center;gap:5px;display:flex}.header .menu img{height:25px;margin-left:5px;display:none}.header .menu button{border:1px solid var(--secondary);height:30px;color:var(--secondary);background:0 0;border-radius:4px;margin-right:20px}.header .menu img:hover,.header .menu button:hover{cursor:pointer;opacity:.8}.header .logo .search{border:1px solid var(--text-lightgray);border-radius:4px;grid-template-columns:auto 70px;width:400px;height:35px;margin-left:30px;display:grid;overflow:hidden}.header .logo .search input{border:none;height:100%}.header .logo .search button{background:var(--secondary);height:100%;color:var(--background);border:none}.header .logo .search button:hover{opacity:.8;cursor:pointer}@media (width<=768px){.header .logo img{height:30px;margin-left:10px}.header .logo .logo-text{font-size:14pt}.header .logo .search{width:calc(100% - 5px);height:30px;margin-left:5px;display:none}.header .menu,.header .menu img{display:flex}.header .menu button{height:25px;margin-right:10px}}.footer{background:var(--primary1);width:calc(100% - 60px);min-height:150px;padding:30px}.footer .footer-content{color:var(--text-lightgray);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;padding:10px;display:grid}.footer .footer-content div{text-align:justify}.footer .footer-content div h2,h3{color:var(--background)}.footer .footer-copyright{color:var(--text-lightgray);border-top:1px solid var(--border-color);text-align:center;padding-top:10px;font-size:8pt}.courses{width:100%;min-height:400px}.courses .courses-content{color:var(--text-color);flex-direction:column;padding:20px;display:flex}.courses .courses-content h1{color:var(--secondary);margin:0}.courses .courses-content h3{color:var(--text-gray);margin:0 0 30px;font-weight:600}.courses .courses-content .course-list{grid-template-columns:repeat(auto-fit,270px);justify-content:center;gap:30px;display:grid}.courses .courses-content .course-list .course-card{background:var(--background);width:270px;height:400px;box-shadow:0 0 20px var(--box-shadow);border-radius:10px;transition:transform .3s;overflow:hidden}.courses .courses-content .course-list .course-card:hover{box-shadow:0 0 20px var(--text-lightgray);transform:translateY(-8px)}.courses .courses-content .course-list .course-card img{width:100%;height:200px}.courses .courses-content .course-list .course-card .course-info{height:calc(100% - 260px);padding:10px}.courses .courses-content .course-list .course-card .course-info h3{margin:5px 0}.courses .courses-content .course-list .course-card .course-info p{color:var(--text-gray);grid-template-columns:100px auto;display:grid}.courses .courses-content .course-list .course-card .course-enroll{grid-template-columns:auto auto;height:40px;padding:0 10px;display:grid}.courses .courses-content .course-list .course-card .course-enroll .course-price{align-items:center;gap:10px;display:flex}.courses .courses-content .course-list .course-card .course-enroll .course-price span{color:var(--text-lightgray);text-decoration:line-through;text-decoration-thickness:1px}.courses .courses-content .course-list .course-card .course-enroll h3{margin:0;font-size:13pt;font-weight:700}.courses .courses-content .course-list .course-card .course-enroll button{background:var(--green);width:80px;height:30px;color:var(--background);border:none;border-radius:4px;justify-self:end}.courses .courses-content .course-list .course-card .course-enroll button:hover{cursor:pointer;opacity:.6}.login{z-index:1000;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.login .login-panel{background:var(--background);border:none;border-radius:10px;grid-template-columns:calc(50% - 20px) auto;width:800px;height:450px;display:grid;position:relative;overflow:hidden}.login .login-panel .close{margin:0;font-size:16pt;position:absolute;top:0;right:10px}.login .login-panel .close:hover{cursor:pointer;opacity:.6}.login .login-panel .login-panel-left{background:var(--secondary);color:var(--background);justify-content:center;align-items:center;padding:10px;display:flex}.login .login-panel .login-panel-left div{flex-direction:column;align-items:center;display:flex}.login .login-panel .login-panel-left div img{height:75px}.login .login-panel .login-panel-left div p{text-align:center}.login .login-panel .login-panel-left div .bottom-quote{color:gold;font-size:8pt}.login .login-panel .login-panel-right{padding:20px}.login .login-panel .login-panel-right div{flex-direction:column;display:flex}.login .login-panel .login-panel-right div h2{color:var(--secondary)}.login .login-panel .login-panel-right div .grid{grid-template-columns:auto 40%;gap:10px;display:grid}.login .login-panel .login-panel-right div label{margin-top:10px}.login .login-panel .login-panel-right div input{border:1px solid var(--text-lightgray);border-radius:4px;height:30px}.login .login-panel .login-panel-right div .forgot-password{text-align:right;margin-top:5px}.login .login-panel .login-panel-right div p span,.login .login-panel .login-panel-right div .forgot-password span{color:var(--secondary)}.login .login-panel .login-panel-right div p span:hover,.login .login-panel .login-panel-right div .forgot-password span:hover{opacity:.7;cursor:pointer}.login .login-panel .login-panel-right div button{background:var(--green);height:35px;color:var(--background);border:none;border-radius:4px;margin-top:15px}.login .login-panel .login-panel-right div button:hover{cursor:pointer;opacity:.8}@media (width<=768px){.login .login-panel{flex-direction:column;width:90%;min-height:85%;display:flex;overflow:auto}.login .login-panel .login-panel-right{order:1}.login .login-panel .login-panel-left{order:2}.login .login-panel .login-panel-right div .grid{grid-template-columns:auto 40%;gap:5px}}.enroll{width:100%;height:100%}.enroll .enroll-content{width:100%;min-height:450px}.enroll .enroll-content #enroll-sec1{width:100%;min-height:100px;color:var(--background);background-image:url(/b004.jpg)}.enroll .enroll-content #enroll-sec1 .course-title{background:#0009;height:100%;padding:20px 30px}.enroll .enroll-content #enroll-sec1 .course-title h2{margin:0}.enroll .enroll-content #enroll-sec1 .course-title .enroll-sec1-ele{align-items:center;gap:30px;display:flex}.enroll .enroll-content #enroll-sec1 .course-title .enroll-sec1-ele div{align-items:center;gap:5px;display:flex}.enroll .enroll-content #enroll-sec1 .course-title .enroll-sec1-ele div span{color:var(--highlight);font-size:20pt;font-weight:700}.enroll .enroll-content #enroll-sec1 .course-title .enroll-sec1-ele div img{height:20px}.enroll .enroll-content #enroll-sec2{width:100%;min-height:450px;color:var(--text-color);align-items:flex-start;display:flex}.enroll .enroll-content #enroll-sec2 h2{margin:0}.enroll .enroll-content #enroll-sec2 .course-info{border-radius:10px;flex:1;width:100%;min-height:400px}.enroll .enroll-content #enroll-sec2 .course-info .course-module,.enroll .enroll-content #enroll-sec2 .course-info .course-instructor,.enroll .enroll-content #enroll-sec2 .course-info .course-reviews,.enroll .enroll-content #enroll-sec2 .course-info .course-overview{background:var(--background);text-align:justify;border-radius:10px;width:calc(100% - 100px);min-height:60px;margin:20px 30px;padding:20px}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul{margin:0;padding:0;list-style:none}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li{background:var(--background-secondary);border-radius:5px;margin:10px 3px;padding:10px;font-weight:600}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li label{font-weight:600}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li label:hover,.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li:hover{cursor:pointer}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li div{background:var(--background);margin-top:10px;display:none}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li div.active{display:flex}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li div ul{margin:0;padding:0;list-style-type:square;list-style-position:inside}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li div ul li{background:0 0;margin:5px;padding:3px;font-weight:400}.enroll .enroll-content #enroll-sec2 .course-info .course-instructor .instructor{align-items:center;gap:30px;margin-top:10px;display:flex}.enroll .enroll-content #enroll-sec2 .course-info .course-instructor .instructor img{height:75px}.enroll .enroll-content #enroll-sec2 .course-info .course-instructor .instructor .inst-info{flex-direction:column;gap:5px;display:flex}.enroll .enroll-content #enroll-sec2 .course-info .course-reviews .reviews{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;display:grid}.enroll .enroll-content #enroll-sec2 .course-info .course-reviews .reviews p{border:1px solid var(--border-color);border-radius:5px;flex-direction:column;padding:15px;display:flex}.enroll .enroll-content #enroll-sec2 .course-info .course-reviews .reviews p span{color:var(--highlight);font-size:14pt}.enroll .enroll-content #enroll-sec2 .enrollment{background:var(--background);border-radius:10px;width:300px;min-height:350px;margin:20px;position:sticky;top:100px;overflow:hidden}.enroll .enroll-content #enroll-sec2 .enrollment img{width:100%;height:175px}.enroll .enroll-content #enroll-sec2 .enrollment .info{flex-direction:column;padding:10px;display:flex}.enroll .enroll-content #enroll-sec2 .enrollment .info h1{color:var(--green);margin:5px}.enroll .enroll-content #enroll-sec2 .enrollment .info label{color:var(--text-lightgray);margin:5px;font-size:12pt;text-decoration:line-through}.enroll .enroll-content #enroll-sec2 .enrollment .info button{background:var(--secondary);height:40px;color:var(--background);border:none;border-radius:4px;margin:10px 0}.enroll .enroll-content #enroll-sec2 .enrollment .info button:hover{cursor:pointer;opacity:.8}.enroll .enroll-content #enroll-sec2 .enrollment .info button:focus{outline:none}.enroll .enroll-content #enroll-sec2 .enrollment .info p{grid-template-columns:auto auto;margin:5px;display:grid}@media (width<=768px){.enroll .enroll-content #enroll-sec2{flex-direction:column;align-items:center}.enroll .enroll-content #enroll-sec2 .enrollment{width:calc(100% - 60px)}.enroll .enroll-content #enroll-sec2 .course-info .course-reviews .reviews{gap:3px}.enroll .enroll-content #enroll-sec2 .course-info .course-module ul li{margin:5px 0;padding:5px}}