*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Rubik',sans-serif;background:linear-gradient(135deg,#FFFEF8 0%,#f5f3ed 100%);color:#2a2a2a;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
.topbar{background:linear-gradient(128deg,#6E4CBD 0%,#8B5FD9 50%,#6E4CBD 100%);padding:24px 0;box-shadow:0 4px 12px #6e4cbd26;position:relative;z-index:1000}
.topbar .centerbox{max-width:1320px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.topbar .leftzone{flex:0 0 auto}
.topbar .logobox{display:flex;align-items:center;gap:18px}
.topbar .logowrap{display:flex;align-items:center;justify-content:center;width:85px;height:85px;background:#FFFEF8;border-radius:12px;box-shadow:0 3px 8px #0000001f;transition:all .4s ease}
.topbar .logowrap:hover{transform:translateY(-2px);box-shadow:0 6px 14px #0000002e}
.topbar .logoimg{width:70px;height:70px;object-fit:contain}
.topbar .brandtext{display:flex;flex-direction:column;gap:4px}
.topbar .brandtext .companylink{font-family:'EB Garamond',serif;font-size:32px;font-weight:700;color:#FFFEF8;text-decoration:none;line-height:1.1;transition:color .4s ease}
.topbar .brandtext .companylink:hover{color:#f0ede0}
.topbar .brandtext .tagline2{font-size:14px;color:#e8e6dc;font-weight:400}
.topbar .rightzone{flex:1 1 auto;display:flex;justify-content:flex-end}
.topbar .mainnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topbar .mainnav .navitem{font-size:16px;font-weight:500;color:#FFFEF8;text-decoration:none;padding:12px 20px;border-radius:10px;transition:background-color .4s ease,color .4s ease;white-space:nowrap}
.topbar .mainnav .navitem:hover{background-color:#fffef826}
.topbar .mainnav .cta-btn{background:linear-gradient(135deg,#B50C13 0%,#d41019 100%);color:#FFFEF8;font-weight:600;box-shadow:0 4px 10px #b50c134d}
.topbar .mainnav .cta-btn:hover{background:linear-gradient(135deg,#d41019 0%,#B50C13 100%);box-shadow:0 6px 14px #b50c1366}
main{flex:1}
.footerbase{background:linear-gradient(142deg,#2a2a2a 0%,#1a1a1a 100%);padding:60px 0 30px;margin-top:80px;position:relative}
.footerbase::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6E4CBD 0%,#B50C13 100%)}
.footerbase .footcenter{max-width:1320px;margin:0 auto;padding:0 20px}
.footerbase .compcard{background:#fffef80d;border-radius:14px;padding:40px;margin-bottom:40px;box-shadow:0 6px 16px #0000004d;display:flex;flex-direction:column;gap:24px}
.footerbase .compcard .cardlogo{display:flex;justify-content:center}
.footerbase .compcard .footlogo{width:100px;height:100px;object-fit:contain}
.footerbase .compcard .carddesc{text-align:center}
.footerbase .compcard .desctext{font-size:16px;color:#d4d4d4;line-height:1.7;max-width:700px;margin:0 auto}
.footerbase .compcard .cardcontact{display:flex;flex-direction:column;gap:10px;align-items:center}
.footerbase .compcard .contactline{font-size:15px;color:silver}
.footerbase .compcard .contactline strong{color:#FFFEF8}
.footerbase .footlinks{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.footerbase .footlinks .footlink{font-size:15px;color:#b8b8b8;text-decoration:none;transition:color .4s ease}
.footerbase .footlinks .footlink:hover{color:#6E4CBD}
.footerbase .copyright3{text-align:center;border-top:1px solid #fffef81a;padding-top:20px}
.footerbase .copyright3 .copytext{font-size:14px;color:#888}
.cookiebanner{position:fixed;bottom:20px;right:20px;max-width:420px;background:#FFFEF8;border-radius:12px;padding:26px;box-shadow:0 8px 24px #00000040;z-index:10000;border-left:5px solid #6E4CBD}
.cookiebanner .bannercontent .bannerheading{font-family:'EB Garamond',serif;font-size:22px;font-weight:700;color:#2a2a2a;margin-bottom:12px}
.cookiebanner .bannercontent .bannertext{font-size:15px;color:#4a4a4a;margin-bottom:18px;line-height:1.5}
.cookiebanner .bannercontent .accordionsection{margin-bottom:20px}
.cookiebanner .bannercontent .accordionbtn{background:transparent;border:none;color:#6E4CBD;font-size:14px;font-weight:600;cursor:pointer;padding:8px 0;text-decoration:underline;transition:color .4s ease}
.cookiebanner .bannercontent .accordionbtn:hover{color:#8B5FD9}
.cookiebanner .bannercontent .accordioncontent{padding:16px 0;display:flex;flex-direction:column;gap:12px}
.cookiebanner .bannercontent .accordioncontent .checklabel{display:flex;align-items:center;gap:10px;cursor:pointer}
.cookiebanner .bannercontent .accordioncontent .checkinput{width:18px;height:18px;cursor:pointer}
.cookiebanner .bannercontent .accordioncontent .checktext{font-size:14px;color:#2a2a2a}
.cookiebanner .bannercontent .banneractions{display:flex;flex-direction:column;gap:10px}
.cookiebanner .bannercontent .actionbtn{padding:12px 20px;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .4s ease}
.cookiebanner .bannercontent .acceptbtn{background:linear-gradient(135deg,#6E4CBD 0%,#8B5FD9 100%);color:#FFFEF8}
.cookiebanner .bannercontent .acceptbtn:hover{background:linear-gradient(135deg,#8B5FD9 0%,#6E4CBD 100%);box-shadow:0 4px 12px #6e4cbd4d}
.cookiebanner .bannercontent .declinebtn{background:#e0e0e0;color:#2a2a2a}
.cookiebanner .bannercontent .declinebtn:hover{background:#cacaca}
.cookiebanner .bannercontent .savebtn{background:linear-gradient(135deg,#B50C13 0%,#d41019 100%);color:#FFFEF8}
.cookiebanner .bannercontent .savebtn:hover{background:linear-gradient(135deg,#d41019 0%,#B50C13 100%);box-shadow:0 4px 12px #b50c134d}
.cookiemini{position:fixed;bottom:20px;right:20px;z-index:9999}
.cookiemini .minibtn{background:#6E4CBD;color:#FFFEF8;border:none;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #6e4cbd4d;transition:all .4s ease}
.cookiemini .minibtn:hover{background:#8B5FD9;box-shadow:0 6px 16px #6e4cbd66}
@media (max-width: 1024px) {
.topbar .centerbox{flex-direction:column;align-items:flex-start}
.topbar .rightzone{width:100%;justify-content:flex-start}
.topbar .mainnav{width:100%;justify-content:flex-start}
}
@media (max-width: 768px) {
.topbar{padding:18px 0}
.topbar .logobox{flex-direction:column;align-items:flex-start;gap:12px}
.topbar .logowrap{width:70px;height:70px}
.topbar .logoimg{width:55px;height:55px}
.topbar .brandtext .companylink{font-size:26px}
.topbar .mainnav{flex-direction:column;align-items:stretch;gap:8px}
.topbar .mainnav .navitem{text-align:center;padding:14px 16px}
.footerbase{padding:40px 0 20px;margin-top:60px}
.footerbase .compcard{padding:30px 20px}
.footerbase .footlinks{flex-direction:column;gap:16px;align-items:center}
.cookiebanner{max-width:340px;bottom:10px;right:10px;left:10px;margin:0 auto}
}
@media (max-width: 480px) {
.topbar .brandtext .companylink{font-size:22px}
.topbar .brandtext .tagline2{font-size:13px}
.cookiebanner{padding:20px}
.cookiebanner .bannercontent .bannerheading{font-size:19px}
.cookiebanner .bannercontent .bannertext{font-size:14px}
}
.terms-text-ijn{max-width:1320px;margin:0 auto;padding:80px 20px;background:linear-gradient(135deg,#FFFEF8 0%,#f8f5ff 100%)}
.terms-text-ijn h1{font-size:48px;font-weight:700;color:#1a1a1a;margin:0 0 40px;padding-bottom:24px;border-bottom:3px solid #6E4CBD;line-height:1.2}
.terms-text-ijn h2{font-size:36px;font-weight:600;color:#2d2d2d;margin:60px 0 24px;line-height:1.3;background:linear-gradient(125deg,#6E4CBD,#B50C13);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.terms-text-ijn h3{font-size:28px;font-weight:600;color:#3d3d3d;margin:48px 0 20px;line-height:1.4}
.terms-text-ijn h4{font-size:22px;font-weight:600;color:#4d4d4d;margin:36px 0 16px;line-height:1.4}
.terms-text-ijn h5{font-size:18px;font-weight:600;color:#5d5d5d;margin:28px 0 12px;line-height:1.5}
.terms-text-ijn h6{font-size:16px;font-weight:600;color:#6d6d6d;margin:24px 0 12px;line-height:1.5;text-transform:uppercase;letter-spacing:.5px}
.terms-text-ijn p{font-size:17px;line-height:1.8;color:#333;margin:0 0 20px}
.terms-text-ijn ul{margin:0 0 24px;padding:0 0 0 28px;list-style:none}
.terms-text-ijn ul li{font-size:17px;line-height:1.8;color:#333;margin:0 0 12px;padding-left:16px;position:relative}
.terms-text-ijn ul li::before{content:'';position:absolute;left:-12px;top:12px;width:8px;height:8px;background:linear-gradient(135deg,#6E4CBD,#B50C13);border-radius:12px}
.terms-text-ijn ol{margin:0 0 24px;padding:0 0 0 28px;counter-reset:policy-counter;list-style:none}
.terms-text-ijn ol li{font-size:17px;line-height:1.8;color:#333;margin:0 0 12px;padding-left:16px;position:relative;counter-increment:policy-counter}
.terms-text-ijn ol li::before{content:counter(policy-counter) ".";position:absolute;left:-28px;font-weight:600;color:#6E4CBD}
.terms-text-ijn em,.terms-text-ijn i{font-style:italic;color:#4d4d4d}
.terms-text-ijn a{color:#6E4CBD;text-decoration:none;border-bottom:2px solid transparent;transition:all .4s ease;font-weight:500}
.terms-text-ijn a:hover{color:#B50C13;border-bottom-color:#B50C13}
.terms-text-ijn table{width:100%;margin:32px 0;border-collapse:collapse;background:#FFFEF8;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #6e4cbd14}
.terms-text-ijn thead{background:linear-gradient(125deg,#6E4CBD,#8859d4)}
.terms-text-ijn thead tr{border:none}
.terms-text-ijn thead th{padding:18px 20px;text-align:left;font-size:16px;font-weight:600;color:#FFFEF8;border:none}
.terms-text-ijn tbody{background:#FFFEF8}
.terms-text-ijn tbody tr{border-bottom:1px solid #e8e5f5;transition:all .4s ease}
.terms-text-ijn tbody tr:last-child{border-bottom:none}
.terms-text-ijn tbody tr:hover{background:linear-gradient(135deg,#f9f8ff 0%,#fff9f9 100%)}
.terms-text-ijn tbody td{padding:16px 20px;font-size:16px;line-height:1.6;color:#333;border:none}
.terms-text-ijn th{font-weight:600}
.terms-text-ijn hr{border:none;height:2px;background:linear-gradient(90deg,transparent,#6E4CBD,transparent);margin:48px 0;opacity:.3}
@media (max-width: 1024px) {
.terms-text-ijn{padding:60px 20px}
.terms-text-ijn h1{font-size:38px;margin-bottom:32px}
.terms-text-ijn h2{font-size:30px;margin-top:48px}
.terms-text-ijn h3{font-size:24px}
.terms-text-ijn table{font-size:15px}
.terms-text-ijn thead th,.terms-text-ijn tbody td{padding:14px 16px;font-size:15px}
}
@media (max-width: 768px) {
.terms-text-ijn{padding:48px 16px}
.terms-text-ijn h1{font-size:32px;margin-bottom:28px}
.terms-text-ijn h2{font-size:26px;margin-top:40px}
.terms-text-ijn h3{font-size:22px}
.terms-text-ijn h4{font-size:19px}
.terms-text-ijn p,.terms-text-ijn ul li,.terms-text-ijn ol li{font-size:16px}
.terms-text-ijn table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.terms-text-ijn thead th,.terms-text-ijn tbody td{padding:12px 14px;font-size:14px}
}
@media (max-width: 480px) {
.terms-text-ijn{padding:40px 12px}
.terms-text-ijn h1{font-size:28px;margin-bottom:24px;padding-bottom:16px}
.terms-text-ijn h2{font-size:22px;margin-top:36px}
.terms-text-ijn h3{font-size:19px}
.terms-text-ijn h4{font-size:17px}
.terms-text-ijn p,.terms-text-ijn ul li,.terms-text-ijn ol li{font-size:15px;line-height:1.7}
.terms-text-ijn ul,.terms-text-ijn ol{padding-left:20px}
.terms-text-ijn ul li{padding-left:12px}
.terms-text-ijn thead th,.terms-text-ijn tbody td{padding:10px 12px;font-size:13px}
.terms-text-ijn hr{margin:36px 0}
}
.programdetailhero{background:linear-gradient(135deg,#6E4CBD 0%,#B50C13 100%);padding:80px 20px 60px;position:relative;overflow:hidden}
.programdetailhero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#fffef81a 0%,transparent 100%);pointer-events:none}
.herocontainer{max-width:1320px;margin:0 auto;position:relative;z-index:2}
.programdetailhero .breadcrumb23{display:flex;gap:8px;margin-bottom:24px;font-size:14px;color:#fffef8cc;flex-wrap:wrap}
.programdetailhero .breadcrumb23 a{color:#FFFEF8;text-decoration:none;transition:opacity .4s}
.programdetailhero .breadcrumb23 a:hover{opacity:.7}
.programdetailhero h1{font-size:48px;color:#FFFEF8;margin:0 0 20px;font-weight:700;line-height:1.2}
.programdetailhero .metainfo7{display:flex;gap:32px;flex-wrap:wrap;color:#FFFEF8;font-size:16px}
.programdetailhero .metainfo7 .metaitem9{display:flex;align-items:center;gap:8px}
.programdetailhero .metainfo7 .metaitem9 svg{width:20px;height:20px;fill:#FFFEF8}
.contentgrid45{max-width:1320px;margin:-40px auto 0;padding:0 20px 80px;display:grid;grid-template-columns:1fr 380px;gap:60px;position:relative;z-index:3}
.maincontent88{background:#FFFEF8;padding:48px;border-radius:12px;box-shadow:0 8px 24px #6e4cbd1f}
.featuredimg2{width:100%;height:420px;object-fit:cover;border-radius:8px;margin-bottom:40px}
.maincontent88 h2{font-size:32px;color:#1a1a1a;margin:40px 0 20px;font-weight:600;position:relative;padding-left:20px}
.maincontent88 h2::before{content:'';position:absolute;left:0;top:8px;width:4px;height:24px;background:linear-gradient(180deg,#6E4CBD 0%,#B50C13 100%);border-radius:2px}
.maincontent88 p{font-size:17px;line-height:1.7;color:#333;margin-bottom:18px}
.maincontent88 ul{margin:24px 0;padding-left:24px}
.maincontent88 ul li{font-size:17px;line-height:1.7;color:#333;margin-bottom:12px;position:relative}
.maincontent88 ul li::marker{color:#6E4CBD}
.maincontent88 blockquote{background:linear-gradient(135deg,#6e4cbd14 0%,#b50c1314 100%);border-left:4px solid #6E4CBD;padding:24px 28px;margin:32px 0;font-style:italic;color:#1a1a1a;border-radius:0 8px 8px 0}
.maincontent88 details{background:#f8f8f8;border-radius:8px;margin:20px 0;overflow:hidden;border:1px solid #e5e5e5}
.maincontent88 summary{padding:20px 24px;cursor:pointer;font-weight:600;font-size:18px;color:#1a1a1a;transition:all .4s;list-style:none;position:relative;padding-right:50px}
.maincontent88 summary::-webkit-details-marker{display:none}
.maincontent88 summary::after{content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;color:#6E4CBD;transition:transform .4s}
.maincontent88 details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.maincontent88 details[open] summary{background:#6E4CBD;color:#FFFEF8}
.maincontent88 details[open] summary::after{color:#FFFEF8}
.maincontent88 details div{padding:24px}
.maincontent88 small{font-size:14px;color:#666}
.maincontent88 abbr{text-decoration:none;border-bottom:1px dotted #6E4CBD;cursor:help}
.maincontent88 cite{font-style:italic;color:#555}
.maincontent88 dl{margin:24px 0}
.maincontent88 dt{font-weight:600;color:#1a1a1a;margin-top:16px}
.maincontent88 dd{margin-left:24px;color:#333;line-height:1.6}
.maincontent88 figure{margin:32px 0}
.maincontent88 figcaption{font-size:14px;color:#666;margin-top:12px;text-align:center;font-style:italic}
.sidebar77{position:sticky;top:20px;height:fit-content}
.pricecard3{background:linear-gradient(135deg,#6E4CBD 0%,#B50C13 100%);padding:40px 32px;border-radius:12px;box-shadow:0 8px 24px #6e4cbd33;color:#FFFEF8;margin-bottom:24px}
.pricecard3 .pricelabel{font-size:14px;text-transform:uppercase;letter-spacing:1px;opacity:.9;margin-bottom:8px}
.pricecard3 .pricevalue{font-size:48px;font-weight:700;margin-bottom:24px;line-height:1}
.pricecard3 .durationinfo{font-size:16px;margin-bottom:28px;padding-top:24px;border-top:1px solid #fffef84d}
.pricecard3 .enrollbtn{display:block;width:100%;background:#FFFEF8;color:#6E4CBD;padding:16px 24px;border-radius:8px;text-align:center;text-decoration:none;font-weight:600;font-size:18px;transition:all .4s;border:2px solid #FFFEF8}
.pricecard3 .enrollbtn:hover{background:transparent;color:#FFFEF8;transform:translateY(-2px);box-shadow:0 4px 16px #fffef84d}
.infobox11{background:#FFFEF8;padding:32px;border-radius:12px;box-shadow:0 4px 16px #6e4cbd1a}
.infobox11 h3{font-size:20px;color:#1a1a1a;margin-bottom:20px;font-weight:600}
.infoitem22{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e5e5e5}
.infoitem22:last-child{border-bottom:none}
.infoitem22 svg{width:24px;height:24px;flex-shrink:0}
.infoitem22 span{font-size:15px;color:#333}
.likecount8{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid #e5e5e5;color:#B50C13;font-weight:600}
.likecount8 svg{width:20px;height:20px;fill:#B50C13}
@media (max-width: 1024px) {
.contentgrid45{grid-template-columns:1fr;gap:40px}
.sidebar77{position:static}
.programdetailhero h1{font-size:36px}
}
@media (max-width: 768px) {
.programdetailhero{padding:60px 20px 40px}
.programdetailhero h1{font-size:28px}
.maincontent88{padding:32px 24px}
.featuredimg2{height:280px}
.contentgrid45{margin-top:-20px}
.pricecard3 .pricevalue{font-size:36px}
}
@media (max-width: 480px) {
.programdetailhero .metainfo7{flex-direction:column;gap:12px}
.maincontent88 h2{font-size:24px}
.infobox11{padding:24px}
}
.titlearea{background:linear-gradient(128deg,#6E4CBD 0%,#B50C13 100%);padding:80px 20px;position:relative;overflow:hidden}
.titlearea::before{content:'';position:absolute;width:400px;height:400px;background:#fffef81a;border-radius:50%;top:-150px;right:-100px}
.titlearea::after{content:'';position:absolute;width:300px;height:300px;background:#b50c1326;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);bottom:-100px;left:50px}
.titlecont{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.titletxt h1{font-size:48px;color:#FFFEF8;margin:0 0 30px;line-height:1.2}
.titletxt .subdesc{font-size:18px;color:#fffef8e6;line-height:1.6;margin:0}
.titleimg{position:relative}
.titleimg img{width:100%;height:450px;object-fit:cover;border-radius:12px;filter:sepia(0.15) contrast(1.1);box-shadow:0 12px 40px #0000004d}
.mechblock{padding:90px 20px;background:#FFFEF8}
.mechinner{max-width:1320px;margin:0 auto}
.mechinner h2{font-size:38px;color:#6E4CBD;margin:0 0 50px;text-align:center}
.mechgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.mechcard{background:linear-gradient(145deg,#6e4cbd0d,#b50c130d);padding:35px;border-radius:14px;border:2px solid #6e4cbd26;transition:all 450ms ease}
.mechcard:hover{transform:translateY(-8px);box-shadow:0 16px 35px #6e4cbd40;border-color:#6E4CBD}
.mechcard h3{font-size:24px;color:#B50C13;margin:0 0 15px}
.mechcard p{font-size:16px;color:#333;line-height:1.6;margin:0}
.dirarea{padding:80px 20px;background:linear-gradient(245deg,#6E4CBD 0%,#B50C13 100%)}
.dirwrap{max-width:1320px;margin:0 auto}
.dirwrap h2{font-size:38px;color:#FFFEF8;margin:0 0 60px;text-align:center}
.dirtabs{display:flex;gap:15px;justify-content:center;margin-bottom:40px}
.dirtabs input[type="radio"]{display:none}
.dirtabs label{padding:14px 28px;background:#fffef826;color:#FFFEF8;border-radius:10px;cursor:pointer;transition:all 400ms ease;font-size:16px;border:2px solid transparent}
.dirtabs label:hover{background:#fffef840}
.dirtabs input:checked + label{background:#FFFEF8;color:#6E4CBD;border-color:#FFFEF8}
.dirpanel{display:none;background:#fffef8f2;padding:45px;border-radius:14px}
#dir1:checked ~ .panel1,#dir2:checked ~ .panel2,#dir3:checked ~ .panel3{display:block}
.dirpanel h4{font-size:26px;color:#B50C13;margin:0 0 20px}
.dirpanel p{font-size:16px;color:#333;line-height:1.7;margin:0 0 15px}
.dirpanel ul{list-style:none;padding:0;margin:20px 0 0}
.dirpanel li{padding:12px 0 12px 30px;position:relative;font-size:15px;color:#444}
.dirpanel li::before{content:'';position:absolute;left:0;top:18px;width:12px;height:12px;background:#6E4CBD;border-radius:50%}
.afterblock{padding:85px 20px;background:#FFFEF8}
.aftercont{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center}
.afterimg img{width:100%;height:420px;object-fit:cover;border-radius:12px;box-shadow:0 8px 30px #6e4cbd33}
.aftertxt h2{font-size:38px;color:#6E4CBD;margin:0 0 25px}
.aftertxt p{font-size:16px;color:#333;line-height:1.7;margin:0 0 20px}
.aftertxt .highlight{color:#B50C13;font-weight:600}
.toolzone{padding:80px 20px;background:linear-gradient(165deg,#6e4cbd14,#b50c1314)}
.toolbox{max-width:1320px;margin:0 auto}
.toolbox h2{font-size:38px;color:#6E4CBD;margin:0 0 50px;text-align:center}
.toolset{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.toolitem{background:#FFFEF8;padding:30px;border-radius:12px;text-align:center;border:2px solid #6e4cbd1a;transition:all 500ms ease}
.toolitem:hover{border-color:#B50C13;box-shadow:0 10px 28px #b50c1333}
.toolitem svg{width:60px;height:60px;margin-bottom:18px}
.toolitem h5{font-size:18px;color:#B50C13;margin:0 0 10px}
.toolitem p{font-size:14px;color:#555;line-height:1.5;margin:0}
.techsec{padding:90px 20px;background:#FFFEF8}
.techwrap{max-width:1320px;margin:0 auto}
.techwrap h2{font-size:38px;color:#6E4CBD;margin:0 0 60px;text-align:center}
.techmix{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:start}
.techlist{display:flex;flex-direction:column;gap:20px}
.techentry{background:linear-gradient(135deg,#6e4cbd0f,#b50c130f);padding:25px;border-radius:10px;border-left:4px solid #6E4CBD;transition:all 450ms ease}
.techentry:hover{border-left-width:8px;border-left-color:#B50C13;transform:translateX(8px)}
.techentry h4{font-size:22px;color:#B50C13;margin:0 0 12px}
.techentry p{font-size:15px;color:#444;line-height:1.6;margin:0}
.techside img{width:100%;height:500px;object-fit:cover;border-radius:12px;box-shadow:0 12px 35px #6e4cbd40}
@media (max-width: 1024px) {
.titlecont{grid-template-columns:1fr;gap:40px}
.titletxt h1{font-size:38px}
.mechgrid{grid-template-columns:repeat(2,1fr)}
.aftercont{grid-template-columns:1fr}
.toolset{grid-template-columns:repeat(2,1fr)}
.techmix{grid-template-columns:1fr}
}
@media (max-width: 768px) {
.titlearea{padding:60px 20px}
.titletxt h1{font-size:32px}
.titleimg img{height:350px}
.mechgrid{grid-template-columns:1fr}
.dirtabs{flex-direction:column}
.toolset{grid-template-columns:1fr}
.mechblock,.dirarea,.afterblock,.toolzone,.techsec{padding:60px 20px}
}
@media (max-width: 480px) {
.titletxt h1{font-size:28px}
.mechinner h2,.dirwrap h2,.aftertxt h2,.toolbox h2,.techwrap h2{font-size:30px}
.titleimg img{height:280px}
.afterimg img,.techside img{height:320px}
}
.hero-intro{background:linear-gradient(128deg,#6E4CBD 0%,#B50C13 100%);padding:92px 24px 86px;position:relative;overflow:hidden}
.hero-intro::before{content:'';position:absolute;width:420px;height:420px;background:#fffef817;border-radius:50%;top:-140px;right:-80px;animation:floatshape1 8s ease-in-out infinite}
.hero-intro::after{content:'';position:absolute;width:280px;height:280px;background:#b50c1326;border-radius:12px;bottom:-90px;left:-60px;transform:rotate(25deg);animation:floatshape2 10s ease-in-out infinite}
@keyframes floatshape1 {
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-30px,20px) scale(1.08)}
}
@keyframes floatshape2 {
0%,100%{transform:rotate(25deg) translate(0,0)}
50%{transform:rotate(30deg) translate(20px,-15px)}
}
.hero-intro .inwrap{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center;position:relative;z-index:2}
.herocontent h1{font-size:46px;line-height:1.18;color:#FFFEF8;margin:0 0 22px;font-weight:700}
.herocontent .metaphor{font-size:19px;line-height:1.54;color:#fffef8e8;margin:0}
.herovisual{position:relative}
.herovisual img{width:100%;height:auto;border-radius:14px;box-shadow:0 18px 42px #00000047;animation:gentlepulse 6s ease-in-out infinite}
@keyframes gentlepulse {
0%,100%{transform:scale(1)}
50%{transform:scale(1.03)}
}
.storyblock{padding:104px 24px;background:#FFFEF8}
.storyblock .inwrap2{max-width:1320px;margin:0 auto;display:flex;flex-direction:row;gap:84px;align-items:flex-start}
.storyleft{flex:1;position:sticky;top:40px}
.storyleft h2{font-size:38px;line-height:1.24;color:#6E4CBD;margin:0 0 18px;font-weight:700;position:relative;padding-left:26px}
.storyleft h2::before{content:'';position:absolute;left:0;top:8px;width:6px;height:60%;background:linear-gradient(180deg,#B50C13 0%,#6E4CBD 100%);border-radius:12px}
.storyleft .intro-p{font-size:17px;line-height:1.62;color:#1a1a1a;margin:0}
.storyright{flex:1.4;display:flex;flex-direction:column;gap:48px}
.storyitem{background:#fff;padding:36px 32px;border-radius:12px;box-shadow:0 4px 16px #6e4cbd14;border-left:4px solid #6E4CBD;transition:all 450ms ease}
.storyitem:hover{box-shadow:0 8px 28px #6e4cbd29;transform:translateX(6px)}
.storyitem h3{font-size:24px;line-height:1.3;color:#B50C13;margin:0 0 14px;font-weight:600}
.storyitem p{font-size:16px;line-height:1.68;color:#333;margin:0}
.valueszone{padding:96px 24px;background:linear-gradient(215deg,#6e4cbd0f 0%,#b50c130a 100%);position:relative}
.valueszone .inwrap3{max-width:1320px;margin:0 auto}
.valueszone h2{font-size:42px;line-height:1.2;color:#6E4CBD;margin:0 0 62px;text-align:center;font-weight:700}
.valgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}
.valcard{background:#fff;padding:44px 28px;border-radius:16px;text-align:center;box-shadow:0 6px 24px #6e4cbd1a;position:relative;overflow:hidden;transition:transform 500ms ease}
.valcard::before{content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,#6E4CBD 0%,#B50C13 100%)}
.valcard:hover{transform:translateY(-8px)}
.valicon{width:68px;height:68px;margin:0 auto 24px;background:linear-gradient(135deg,#6E4CBD 0%,#B50C13 100%);border-radius:50%;display:flex;align-items:center;justify-content:center}
.valicon svg{width:36px;height:36px;fill:#FFFEF8}
.valcard h4{font-size:22px;line-height:1.32;color:#1a1a1a;margin:0 0 16px;font-weight:600}
.valcard p{font-size:15px;line-height:1.64;color:#444;margin:0}
.teamarea{padding:88px 24px;background:#fff}
.teamarea .inwrap4{max-width:1320px;margin:0 auto}
.teamarea h2{font-size:40px;line-height:1.22;color:#B50C13;margin:0 0 18px;font-weight:700;text-align:center}
.teamarea .subtitle3{font-size:18px;line-height:1.56;color:#555;margin:0 0 56px;text-align:center}
.teammemb{display:flex;flex-direction:row;gap:56px;align-items:center;background:linear-gradient(110deg,#6e4cbd0a 0%,#b50c1305 100%);padding:48px 42px;border-radius:14px}
.membphoto{flex-shrink:0}
.membphoto img{width:220px;height:220px;border-radius:50%;object-fit:cover;border:6px solid #6E4CBD;box-shadow:0 8px 28px #6e4cbd33}
.membinfo{flex:1}
.membinfo h5{font-size:28px;line-height:1.28;color:#6E4CBD;margin:0 0 8px;font-weight:600}
.membinfo .role4{font-size:17px;line-height:1.48;color:#B50C13;margin:0 0 20px;font-weight:500}
.membinfo p{font-size:16px;line-height:1.72;color:#333;margin:0}
.ctazone{padding:118px 24px;background:linear-gradient(142deg,#6E4CBD 0%,#B50C13 100%);text-align:center;position:relative;overflow:hidden}
.ctazone::before{content:'';position:absolute;width:360px;height:360px;background:#fffef812;border-radius:50%;top:-120px;left:10%;animation:floatshape1 9s ease-in-out infinite}
.ctazone .inwrap5{max-width:1320px;margin:0 auto;position:relative;z-index:2}
.ctazone h2{font-size:44px;line-height:1.2;color:#FFFEF8;margin:0 0 22px;font-weight:700}
.ctazone .ctap{font-size:19px;line-height:1.58;color:#fffef8eb;margin:0 0 38px}
.ctabtn{display:inline-block;padding:18px 46px;background:#FFFEF8;color:#6E4CBD;font-size:18px;font-weight:600;border-radius:10px;text-decoration:none;box-shadow:0 6px 22px #0000002e;transition:all 480ms ease}
.ctabtn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 36px #00000042;background:#fff}
@media (max-width: 1024px) {
.hero-intro .inwrap{grid-template-columns:1fr;gap:48px}
.herocontent h1{font-size:38px}
.storyblock .inwrap2{flex-direction:column;gap:52px}
.storyleft{position:static}
.valgrid{grid-template-columns:1fr;gap:32px}
.teammemb{flex-direction:column;gap:32px;text-align:center}
}
@media (max-width: 768px) {
.hero-intro{padding:68px 20px 64px}
.herocontent h1{font-size:32px}
.herocontent .metaphor{font-size:17px}
.storyblock{padding:72px 20px}
.storyleft h2{font-size:30px}
.storyitem{padding:28px 24px}
.valueszone{padding:72px 20px}
.valueszone h2{font-size:34px;margin-bottom:42px}
.teamarea{padding:68px 20px}
.teamarea h2{font-size:32px}
.membphoto img{width:180px;height:180px}
.ctazone{padding:88px 20px}
.ctazone h2{font-size:34px}
.ctabtn{padding:16px 38px;font-size:17px}
}
@media (max-width: 480px) {
.herocontent h1{font-size:28px}
.storyleft h2{font-size:26px}
.storyitem h3{font-size:21px}
.valueszone h2{font-size:28px}
.valcard{padding:32px 20px}
.teamarea h2{font-size:28px}
.membinfo h5{font-size:24px}
.ctazone h2{font-size:28px}
}
.topbanner{background:linear-gradient(127deg,#6E4CBD 0%,#8B5FDB 50%,#B50C13 100%);padding:84px 24px 0;position:relative;overflow:hidden}
.topbanner::before{content:'';position:absolute;top:0;right:0;width:420px;height:420px;background:radial-gradient(circle,#fffef81f 0%,transparent 70%);border-radius:50%;transform:translate(30%,-30%)}
.topbanner .imgzone{max-width:1320px;margin:0 auto;position:relative}
.topbanner .imgzone img{width:100%;height:480px;object-fit:cover;border-radius:16px 16px 0 0;filter:contrast(1.05) brightness(0.96);display:block}
.topbanner .imgzone::after{content:'';position:absolute;bottom:0;left:0;right:0;height:180px;background:linear-gradient(to top,#6e4cbd4d,transparent);pointer-events:none}
.topherosection{background:#FFFEF8;padding:68px 24px 88px}
.topherosection .centercontent{max-width:920px;margin:0 auto}
.topherosection h1{font-size:52px;font-weight:700;color:#1a1a1a;margin:0 0 24px;line-height:1.15;letter-spacing:-.02em}
.topherosection .subdesc{font-size:20px;color:#4a4a4a;line-height:1.6;margin:0 0 44px}
.topherosection .btnrow{display:flex;gap:16px;flex-wrap:wrap}
.topherosection .btnrow .btn1{background:#6E4CBD;color:#FFFEF8;padding:16px 36px;border-radius:12px;text-decoration:none;font-size:17px;font-weight:600;transition:all .5s ease;display:inline-block;box-shadow:0 4px 12px #6e4cbd40}
.topherosection .btnrow .btn1:hover{background:#5a3aa0;transform:translateY(-2px);box-shadow:0 6px 16px #6e4cbd59}
.topherosection .btnrow .btn2{background:transparent;color:#6E4CBD;padding:16px 36px;border-radius:12px;text-decoration:none;font-size:17px;font-weight:600;border:2px solid #6E4CBD;transition:all .5s ease;display:inline-block}
.topherosection .btnrow .btn2:hover{background:#6E4CBD;color:#FFFEF8;border-color:#6E4CBD}
.contactdetailszone{background:linear-gradient(162deg,#f8f8f8 0%,#fff 100%);padding:88px 24px}
.contactdetailszone .wrapper23{max-width:1320px;margin:0 auto}
.contactdetailszone .grid3col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.contactdetailszone .infocard{background:#fff;padding:40px 32px;border-radius:16px;border:1px solid #e8e8e8;transition:all .5s ease;position:relative}
.contactdetailszone .infocard::before{content:'';position:absolute;top:0;left:0;width:4px;height:0;background:linear-gradient(180deg,#6E4CBD 0%,#B50C13 100%);border-radius:16px 0 0 16px;transition:height .5s ease}
.contactdetailszone .infocard:hover::before{height:100%}
.contactdetailszone .infocard:hover{box-shadow:0 8px 24px #00000014;transform:translateY(-4px)}
.contactdetailszone .infocard h3{font-size:22px;font-weight:700;color:#1a1a1a;margin:0 0 16px}
.contactdetailszone .infocard .detail{font-size:16px;color:#5a5a5a;line-height:1.7;margin:0 0 12px}
.contactdetailszone .infocard .detail:last-child{margin:0}
.contactdetailszone .infocard a{color:#6E4CBD;text-decoration:none;transition:color .4s ease}
.contactdetailszone .infocard a:hover{color:#B50C13}
.formarea{background:#FFFEF8;padding:96px 24px;position:relative}
.formarea::before{content:'';position:absolute;top:0;left:0;width:100%;height:280px;background:linear-gradient(215deg,#6e4cbd0a 0%,#b50c130a 100%);pointer-events:none}
.formarea .containerwrap{max-width:760px;margin:0 auto;position:relative;z-index:2}
.formarea h2{font-size:42px;font-weight:700;color:#1a1a1a;margin:0 0 16px;text-align:center}
.formarea .introtext{font-size:18px;color:#5a5a5a;line-height:1.6;margin:0 0 52px;text-align:center}
.formarea form{background:#fff;padding:48px 44px;border-radius:16px;box-shadow:0 4px 20px #0000000f}
.formarea .fieldgroup{margin:0 0 28px}
.formarea .fieldgroup label{display:block;font-size:16px;font-weight:600;color:#2a2a2a;margin:0 0 10px}
.formarea .fieldgroup input,.formarea .fieldgroup select,.formarea .fieldgroup textarea{width:100%;padding:16px 18px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;color:#2a2a2a;background:#fafafa;transition:all .4s ease;box-sizing:border-box}
.formarea .fieldgroup input:focus,.formarea .fieldgroup select:focus,.formarea .fieldgroup textarea:focus{outline:none;border-color:#6E4CBD;background:#fff;box-shadow:0 0 0 4px #6e4cbd1a}
.formarea .fieldgroup textarea{min-height:160px;resize:vertical;font-family:inherit}
.formarea .fieldgroup select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236E4CBD' d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.formarea .checkboxwrap{margin:0 0 32px}
.formarea .checkboxwrap input[type="checkbox"]{width:auto;margin:0 10px 0 0;vertical-align:middle;cursor:pointer;accent-color:#6E4CBD}
.formarea .checkboxwrap label{font-size:15px;color:#4a4a4a;line-height:1.6;display:inline;cursor:pointer}
.formarea .checkboxwrap a{color:#6E4CBD;text-decoration:none;transition:color .4s ease}
.formarea .checkboxwrap a:hover{color:#B50C13;text-decoration:underline}
.formarea .submitbtn{background:linear-gradient(135deg,#6E4CBD 0%,#8B5FDB 100%);color:#FFFEF8;padding:18px 48px;border:none;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;transition:all .5s ease;width:100%;box-shadow:0 6px 16px #6e4cbd4d}
.formarea .submitbtn:hover{transform:translateY(-3px);box-shadow:0 8px 24px #6e4cbd66}
.formarea .submitbtn:active{transform:translateY(0)}
.faqzone{background:linear-gradient(248deg,#f5f5f5 0%,#fafafa 100%);padding:92px 24px}
.faqzone .centerwrap{max-width:880px;margin:0 auto}
.faqzone h2{font-size:38px;font-weight:700;color:#1a1a1a;margin:0 0 48px;text-align:center}
.faqzone .faqitem{background:#fff;border-radius:14px;margin:0 0 20px;overflow:hidden;border:1px solid #e8e8e8}
.faqzone .faqitem input[type="checkbox"]{display:none}
.faqzone .faqitem label{display:block;padding:28px 32px;font-size:19px;font-weight:600;color:#2a2a2a;cursor:pointer;position:relative;transition:all .4s ease}
.faqzone .faqitem label::after{content:'+';position:absolute;right:32px;top:50%;transform:translateY(-50%);font-size:28px;color:#6E4CBD;transition:transform .4s ease;font-weight:400}
.faqzone .faqitem input[type="checkbox"]:checked + label::after{transform:translateY(-50%) rotate(45deg)}
.faqzone .faqitem input[type="checkbox"]:checked + label{background:linear-gradient(90deg,#6e4cbd0d 0%,transparent 100%)}
.faqzone .faqitem .answer{max-height:0;overflow:hidden;transition:max-height .5s ease,padding .5s ease;padding:0 32px}
.faqzone .faqitem input[type="checkbox"]:checked ~ .answer{max-height:400px;padding:0 32px 28px}
.faqzone .faqitem .answer p{font-size:16px;color:#5a5a5a;line-height:1.7;margin:0}
@media (max-width: 768px) {
.topbanner{padding:64px 20px 0}
.topbanner .imgzone img{height:320px}
.topherosection{padding:48px 20px 64px}
.topherosection h1{font-size:36px}
.topherosection .subdesc{font-size:18px}
.topherosection .btnrow{flex-direction:column}
.topherosection .btnrow .btn1,.topherosection .btnrow .btn2{text-align:center}
.contactdetailszone{padding:64px 20px}
.contactdetailszone .grid3col{grid-template-columns:1fr;gap:24px}
.formarea{padding:72px 20px}
.formarea h2{font-size:32px}
.formarea form{padding:36px 28px}
.faqzone{padding:72px 20px}
.faqzone h2{font-size:32px;margin:0 0 36px}
.faqzone .faqitem label{padding:22px 24px;font-size:17px}
.faqzone .faqitem label::after{right:24px}
.faqzone .faqitem .answer{padding:0 24px}
.faqzone .faqitem input[type="checkbox"]:checked ~ .answer{padding:0 24px 22px}
}
@media (max-width: 480px) {
.topherosection h1{font-size:30px}
.formarea .fieldgroup input,.formarea .fieldgroup select,.formarea .fieldgroup textarea{padding:14px 16px}
}
.programlisting{background:linear-gradient(135deg,#FFFEF8 0%,#f5f0ff 100%);padding:80px 20px}
.programlisting .contentwrap{max-width:1320px;margin:0 auto}
.programlisting .topintro{text-align:center;margin-bottom:60px}
.programlisting .topintro h1{font-size:42px;color:#2d2d2d;margin-bottom:16px;font-weight:700}
.programlisting .topintro .subtitle{font-size:18px;color:#555;max-width:720px;margin:0 auto;line-height:1.6}
.programlisting .cardgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:80px}
.programlisting .coursecard{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #6e4cbd14;transition:all 400ms ease;position:relative}
.programlisting .coursecard:hover{transform:translateY(-8px);box-shadow:0 12px 24px #6e4cbd29}
.programlisting .coursecard .imgbox{width:100%;height:220px;overflow:hidden;position:relative}
.programlisting .coursecard .imgbox img{width:100%;height:100%;object-fit:cover;transition:transform 500ms ease}
.programlisting .coursecard:hover .imgbox img{transform:scale(1.08)}
.programlisting .coursecard .datestamp{position:absolute;top:16px;right:16px;background:#fffef8f2;padding:6px 12px;border-radius:8px;font-size:13px;color:#6E4CBD;font-weight:600}
.programlisting .coursecard .textcontent{padding:24px}
.programlisting .coursecard h3{font-size:22px;color:#2d2d2d;margin-bottom:12px;font-weight:600;line-height:1.3}
.programlisting .coursecard .description{font-size:15px;color:#666;line-height:1.6;margin-bottom:20px}
.programlisting .coursecard .metainfo{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #eee;margin-bottom:20px}
.programlisting .coursecard .duration{font-size:14px;color:#6E4CBD;font-weight:600}
.programlisting .coursecard .likescount{font-size:14px;color:#999;display:flex;align-items:center;gap:6px}
.programlisting .coursecard .likescount::before{content:"♥";color:#B50C13;font-size:16px}
.programlisting .coursecard .pricerow{display:flex;align-items:center;justify-content:space-between}
.programlisting .coursecard .price{font-size:26px;color:#B50C13;font-weight:700}
.programlisting .coursecard .enrollbtn{background:linear-gradient(120deg,#6E4CBD 0%,#8b5fe0 100%);color:#FFFEF8;padding:12px 28px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;transition:all 400ms ease;display:inline-block}
.programlisting .coursecard .enrollbtn:hover{background:linear-gradient(120deg,#5a3ca0 0%,#6E4CBD 100%);box-shadow:0 6px 16px #6e4cbd4d}
.whychoose{background:linear-gradient(225deg,#6E4CBD 0%,#8b5fe0 100%);padding:80px 20px;color:#FFFEF8}
.whychoose .contentwrap{max-width:1320px;margin:0 auto}
.whychoose h2{font-size:36px;text-align:center;margin-bottom:50px;font-weight:700}
.whychoose .benefitgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.whychoose .benefititem{display:flex;gap:20px}
.whychoose .benefititem .iconbox{width:60px;height:60px;background:#fffef826;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.whychoose .benefititem .iconbox svg{width:32px;height:32px;fill:#FFFEF8}
.whychoose .benefititem .textpart h3{font-size:20px;margin-bottom:10px;font-weight:600}
.whychoose .benefititem .textpart p{font-size:15px;line-height:1.6;opacity:.9}
.learningpath{background:#FFFEF8;padding:80px 20px}
.learningpath .contentwrap{max-width:1320px;margin:0 auto}
.learningpath h2{font-size:36px;color:#2d2d2d;text-align:center;margin-bottom:50px;font-weight:700}
.learningpath .pathsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.learningpath .pathsteps::before{content:"";position:absolute;top:40px;left:12.5%;right:12.5%;height:3px;background:linear-gradient(90deg,#6E4CBD 0%,#B50C13 100%);z-index:1}
.learningpath .stepitem{position:relative;z-index:2;text-align:center}
.learningpath .stepitem .stepnumber{width:80px;height:80px;background:linear-gradient(135deg,#6E4CBD 0%,#8b5fe0 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:32px;font-weight:700;color:#FFFEF8;box-shadow:0 6px 20px #6e4cbd4d}
.learningpath .stepitem h4{font-size:18px;color:#2d2d2d;margin-bottom:10px;font-weight:600}
.learningpath .stepitem p{font-size:14px;color:#666;line-height:1.5}
.faqsection{background:linear-gradient(180deg,#f5f0ff 0%,#FFFEF8 100%);padding:80px 20px}
.faqsection .contentwrap{max-width:900px;margin:0 auto}
.faqsection h2{font-size:36px;color:#2d2d2d;text-align:center;margin-bottom:50px;font-weight:700}
.faqsection .faqitem{background:#fff;border-radius:10px;margin-bottom:16px;box-shadow:0 2px 8px #0000000d}
.faqsection .faqitem input[type="checkbox"]{display:none}
.faqsection .faqitem label{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;cursor:pointer;font-size:18px;font-weight:600;color:#2d2d2d;transition:color 300ms ease}
.faqsection .faqitem label::after{content:"+";font-size:28px;color:#6E4CBD;transition:transform 400ms ease}
.faqsection .faqitem input:checked + label::after{transform:rotate(45deg)}
.faqsection .faqitem label:hover{color:#6E4CBD}
.faqsection .faqitem .answer{max-height:0;overflow:hidden;transition:max-height 400ms ease}
.faqsection .faqitem input:checked ~ .answer{max-height:300px}
.faqsection .faqitem .answer p{padding:0 24px 20px;font-size:15px;color:#666;line-height:1.6}
@media (max-width: 1024px) {
.programlisting .cardgrid3{grid-template-columns:repeat(2,1fr);gap:28px}
.whychoose .benefitgrid{grid-template-columns:1fr;gap:32px}
.learningpath .pathsteps{grid-template-columns:repeat(2,1fr);gap:40px}
.learningpath .pathsteps::before{display:none}
}
@media (max-width: 768px) {
.programlisting{padding:60px 16px}
.programlisting .topintro h1{font-size:32px}
.programlisting .cardgrid3{grid-template-columns:1fr;gap:24px}
.whychoose{padding:60px 16px}
.whychoose h2{font-size:28px}
.learningpath{padding:60px 16px}
.learningpath h2{font-size:28px}
.learningpath .pathsteps{grid-template-columns:1fr;gap:32px}
.faqsection{padding:60px 16px}
.faqsection h2{font-size:28px}
}
@media (max-width: 480px) {
.programlisting .topintro h1{font-size:28px}
.programlisting .coursecard h3{font-size:20px}
.programlisting .coursecard .price{font-size:22px}
.programlisting .coursecard .enrollbtn{padding:10px 20px;font-size:14px}
.whychoose h2,.learningpath h2,.faqsection h2{font-size:24px}
}
.successwrap{min-height:85vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;background:linear-gradient(135deg,#FFFEF8 0%,#f8f4ff 100%);position:relative;overflow:hidden}
.successwrap::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,#6e4cbd14 0%,transparent 70%);animation:pulserotate 25s linear infinite}
@keyframes pulserotate {
0%{transform:rotate(0deg) scale(1)}
50%{transform:rotate(180deg) scale(1.1)}
100%{transform:rotate(360deg) scale(1)}
}
.circlecontent{position:relative;width:520px;height:520px;background:linear-gradient(145deg,#fff 0%,#FFFEF8 100%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;box-shadow:0 8px 24px #6e4cbd26 0 2px 8px #b50c1314;text-align:center;z-index:2}
.circlecontent::before{content:'';position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%;background:linear-gradient(45deg,#6E4CBD,#B50C13,#6E4CBD);z-index:-1;opacity:.5;animation:borderrotate 8s linear infinite}
@keyframes borderrotate {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.iconcheck{width:92px;height:92px;margin-bottom:28px;position:relative}
.iconcheck svg{width:100%;height:100%}
.checkpath{stroke:#6E4CBD;stroke-width:3;fill:none;stroke-dasharray:200;stroke-dashoffset:200;animation:drawcheck 1.2s ease-out forwards;animation-delay:.3s}
@keyframes drawcheck {
to{stroke-dashoffset:0}
}
.checkcircle{stroke:#B50C13;stroke-width:2.5;fill:none;opacity:0;animation:fadecircle .6s ease-out forwards}
@keyframes fadecircle {
to{opacity:1}
}
.successh1{font-size:42px;font-weight:700;color:#1a1a1a;margin:0 0 18px;line-height:1.2}
.metaphortext{font-size:17px;color:#4a4a4a;line-height:1.6;margin:0 0 32px;max-width:380px}
.detailinfo{background:#6e4cbd0f;border-radius:12px;padding:20px 28px;margin-bottom:36px;border-left:4px solid #6E4CBD}
.detailinfo p{margin:0;font-size:15px;color:#2a2a2a;line-height:1.5}
.detailinfo p strong{color:#6E4CBD;font-weight:600}
.actionbtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btnprimary2{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,#6E4CBD 0%,#5a3ba0 100%);color:#FFFEF8;text-decoration:none;border-radius:10px;font-size:16px;font-weight:600;transition:all .4s ease;box-shadow:0 4px 12px #6e4cbd4d;position:relative;overflow:hidden}
.btnprimary2::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,#fff3,transparent);transition:left .5s ease}
.btnprimary2:hover{transform:translateY(-2px);box-shadow:0 6px 18px #6e4cbd66}
.btnprimary2:hover::before{left:100%}
.btnsecondary2{display:inline-block;padding:14px 32px;background:transparent;color:#6E4CBD;text-decoration:none;border-radius:10px;font-size:16px;font-weight:600;border:2px solid #6E4CBD;transition:all .4s ease}
.btnsecondary2:hover{background:#6E4CBD;color:#FFFEF8;transform:translateY(-2px);box-shadow:0 4px 12px #6e4cbd40}
.decorshape1{position:absolute;top:15%;left:8%;width:80px;height:80px;background:linear-gradient(135deg,#6e4cbd1a 0%,#b50c131a 100%);border-radius:50%;z-index:1;animation:float1 6s ease-in-out infinite}
@keyframes float1 {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(20px,-20px) rotate(180deg)}
}
.decorshape2{position:absolute;bottom:20%;right:12%;width:60px;height:60px;background:linear-gradient(225deg,#b50c131f 0%,#6e4cbd1f 100%);border-radius:12px;z-index:1;animation:float2 7s ease-in-out infinite}
@keyframes float2 {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(-15px,25px) rotate(-180deg)}
}
.decorshape3{position:absolute;top:40%;right:5%;width:40px;height:40px;background:#6e4cbd14;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);z-index:1;animation:float3 8s ease-in-out infinite}
@keyframes float3 {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(10px,-30px) rotate(360deg)}
}
@media (max-width: 768px) {
.successwrap{padding:40px 15px;min-height:70vh}
.circlecontent{width:420px;height:420px;padding:40px 30px}
.iconcheck{width:72px;height:72px;margin-bottom:22px}
.successh1{font-size:32px;margin-bottom:14px}
.metaphortext{font-size:15px;margin-bottom:24px}
.detailinfo{padding:16px 20px;margin-bottom:28px}
.detailinfo p{font-size:14px}
.actionbtns{flex-direction:column;gap:12px;width:100%}
.btnprimary2,.btnsecondary2{width:100%;text-align:center}
.decorshape1,.decorshape2,.decorshape3{display:none}
}
@media (max-width: 480px) {
.circlecontent{width:340px;height:340px;padding:35px 25px}
.iconcheck{width:60px;height:60px;margin-bottom:18px}
.successh1{font-size:26px}
.metaphortext{font-size:14px;margin-bottom:20px}
.detailinfo{padding:14px 18px}
.btnprimary2,.btnsecondary2{padding:12px 24px;font-size:15px}
}