*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Rubik',sans-serif;font-weight:400;font-size:16px;line-height:1.6;color:#1a1a1a;background-color:#fff}
.topbar{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);box-shadow:0 2px 12px #00000014;position:relative;z-index:100}
.topbarwrapper{max-width:1400px;margin:0 auto;padding:0 20px}
.brandrow{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid #26228a1a}
.logocontainer{flex-shrink:0}
.logowrap{display:block}
.logoimage{height:90px;width:90px;object-fit:contain;background:#fff;padding:8px;border-radius:8px;box-shadow:0 2px 8px #0000000f}
.trustbox{display:flex;align-items:center}
.trustlabel{display:flex;align-items:center;gap:8px;background:#fff;padding:10px 20px;border-radius:6px;box-shadow:0 2px 8px #0000000f}
.trustlabel .mdi{font-size:20px;color:#26228A}
.trusttext{font-size:14px;font-weight:500;color:#333}
.mainnavigation{display:flex;justify-content:center;gap:40px;padding:20px 0}
.mainnavigation .navlink{color:#333;text-decoration:none;font-weight:500;font-size:15px;padding:8px 4px;position:relative;transition:color 180ms}
.mainnavigation .navlink:hover{color:#26228A}
.mainnavigation .navlink::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#31CEA0;transition:width 200ms}
.mainnavigation .navlink:hover::after{width:100%}
.bottomsection{background:linear-gradient(180deg,#f8f9fa 0%,#e9ecef 100%);padding:60px 0 30px;margin-top:80px}
.footercontainer{max-width:1400px;margin:0 auto;padding:0 20px}
.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:50px;margin-bottom:50px}
.companyblock .footerlogo{margin-bottom:20px}
.footerlogoimage{height:70px;width:70px;object-fit:contain;background:#fff;padding:6px;border-radius:6px;box-shadow:0 2px 8px #0000000f}
.companydesc{font-size:14px;line-height:1.7;color:#4a4a4a;margin-bottom:20px}
.missionstatement{background:#fff;padding:20px;border-radius:6px;border-left:3px solid #31CEA0;box-shadow:0 2px 8px #0000000a}
.missiontext{font-size:13px;line-height:1.7;color:#4a4a4a;font-weight:300}
.footerheading{font-size:16px;font-weight:700;color:#26228A;margin-bottom:20px}
.footerlist{list-style:none}
.footerlist li{margin-bottom:12px}
.footerlink{color:#4a4a4a;text-decoration:none;font-size:14px;transition:color 180ms;display:inline-block}
.footerlink:hover{color:#26228A}
.contactlist{list-style:none}
.contactitem{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px;font-size:14px;color:#4a4a4a}
.contactitem .mdi{font-size:18px;color:#26228A;margin-top:2px;flex-shrink:0}
.contactlink{color:#4a4a4a;text-decoration:none;transition:color 180ms}
.contactlink:hover{color:#26228A}
.copyrightrow{padding-top:30px;border-top:1px solid #26228a1a;text-align:center}
.copyrighttext{font-size:13px;color:#6a6a6a}
.cookiepopup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;z-index:9999;align-items:center;justify-content:center;padding:20px}
.cookiepopup[data-consent="showing"] .cookiecontent{animation:slideInFromBottom 300ms ease-out forwards}
.cookiepopup[data-consent="hiding"] .cookiecontent{animation:slideOutToBottom 300ms ease-in forwards}
@keyframes slideInFromBottom {
from{transform:translateY(100%);opacity:0}
to{transform:translateY(0);opacity:1}
}
@keyframes slideOutToBottom {
from{transform:translateY(0);opacity:1}
to{transform:translateY(100%);opacity:0}
}
.cookiecontent{background:#fff;padding:40px;border-radius:8px;max-width:800px;width:100%;box-shadow:0 16px 48px #0003}
.cookiemessage{font-size:15px;line-height:1.6;color:#333;margin-bottom:25px}
.cookieactions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cookiebutton{background:none;border:none;font-family:'Rubik',sans-serif;font-size:15px;font-weight:500;cursor:pointer;padding:10px 0;text-decoration:underline;transition:color 180ms}
.acceptaction{color:#26228A}
.acceptaction:hover{color:#1a1a60}
.declineaction{color:#6a6a6a}
.declineaction:hover{color:#333}
.policylink{color:#31CEA0;font-size:14px;text-decoration:underline;transition:color 180ms}
.policylink:hover{color:#28a882}
@media (max-width: 1024px) {
.footergrid{grid-template-columns:1fr 1fr;gap:40px}
.mainnavigation{gap:25px}
}
@media (max-width: 768px) {
.brandrow{flex-direction:column;gap:15px;align-items:flex-start}
.trustbox{width:100%}
.trustlabel{width:100%;justify-content:center}
.mainnavigation{flex-wrap:wrap;gap:15px;padding:15px 0}
.mainnavigation .navlink{font-size:14px}
.footergrid{grid-template-columns:1fr;gap:35px}
.cookiecontent{padding:30px 20px}
.cookieactions{flex-direction:column;align-items:flex-start;gap:15px}
}
@media (max-width: 480px) {
.logoimage{height:70px;width:70px}
.trusttext{font-size:13px}
.mainnavigation{flex-direction:column;gap:10px}
.mainnavigation .navlink{padding:8px 0}
}
.terms-section{max-width:1400px;margin:0 auto;padding:60px 20px;background:#fff}
.terms-section p{font-size:16px;line-height:1.75;color:#2a2a2a;margin:0 0 20px;max-width:800px}
.terms-section p + p{margin-top:16px}
.terms-section strong,.terms-section b{font-weight:600;color:#1a1a1a}
.terms-section ul,.terms-section ol{margin:0 0 24px;padding-left:28px;max-width:800px}
.terms-section ul{list-style-type:disc}
.terms-section ol{list-style-type:decimal}
.terms-section li{font-size:16px;line-height:1.75;color:#2a2a2a;margin-bottom:10px;padding-left:8px}
.terms-section li:last-child{margin-bottom:0}
.terms-section ul ul,.terms-section ol ol,.terms-section ul ol,.terms-section ol ul{margin-top:10px;margin-bottom:10px}
.terms-section a{color:#26228A;text-decoration:none;border-bottom:1px solid #26228a4d;transition:all .2s}
.terms-section a:hover{color:#1a1860;border-bottom-color:#26228A}
.terms-section a:focus{outline:2px solid #26228A;outline-offset:2px}
.terms-section div{margin-bottom:32px}
.terms-section div:last-child{margin-bottom:0}
@media (max-width: 768px) {
.terms-section{padding:40px 16px}
.terms-section p,.terms-section li{font-size:15px;line-height:1.7}
.terms-section ul,.terms-section ol{padding-left:24px}
}
@media (max-width: 480px) {
.terms-section{padding:32px 12px}
.terms-section p,.terms-section li{font-size:14px}
.terms-section ul,.terms-section ol{padding-left:20px}
}
.projectdetailpage{background:#fff;color:#1a1a1a}
.projectdetailpage .topinfo{max-width:1400px;margin:0 auto;padding:3rem 1.5rem 2rem}
.projectdetailpage .topinfo .metarow{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;margin-bottom:1.5rem}
.projectdetailpage .topinfo .metarow .tagitem{background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);color:#fff;padding:.5rem 1.25rem;border-radius:6px;font-size:.875rem;font-weight:500}
.projectdetailpage .topinfo .metarow .userformat{background:#E5FCE7;color:#26228A;padding:.5rem 1.25rem;border-radius:6px;font-size:.875rem;font-weight:500}
.projectdetailpage .topinfo .metarow .readinfo{display:flex;align-items:center;gap:.5rem;color:#666;font-size:.875rem}
.projectdetailpage .topinfo .metarow .viewinfo{display:flex;align-items:center;gap:.5rem;color:#666;font-size:.875rem}
.projectdetailpage .topinfo .metarow .likeinfo{display:flex;align-items:center;gap:.5rem;color:#666;font-size:.875rem}
.projectdetailpage .topinfo .titlezone h1{font-size:2.5rem;line-height:1.2;color:#26228A;margin:0 0 1rem}
.projectdetailpage .herovisual{max-width:1400px;margin:0 auto 3rem;padding:0 1.5rem}
.projectdetailpage .herovisual .imagewrap{position:relative;width:100%;overflow:hidden;border-radius:10px;box-shadow:0 16px 32px #00000014}
.projectdetailpage .herovisual .imagewrap img{width:100%;height:auto;display:block}
.projectdetailpage .contentarea{max-width:1400px;margin:0 auto;padding:0 1.5rem 4rem;display:grid;grid-template-columns:1fr 360px;gap:3rem}
.projectdetailpage .contentarea .maincontent{min-width:0}
.projectdetailpage .contentarea .maincontent .programblock{background:#fff;padding:2.5rem;border-radius:8px;border:2px solid #E5FCE7;margin-bottom:2.5rem}
.projectdetailpage .contentarea .maincontent .programblock h2{font-size:1.75rem;color:#26228A;margin:0 0 1.5rem;position:relative;padding-left:1.5rem}
.projectdetailpage .contentarea .maincontent .programblock h2::before{content:'';position:absolute;left:0;top:.25rem;width:6px;height:2rem;background:linear-gradient(180deg,#26228A 0%,#31CEA0 100%);border-radius:3px}
.projectdetailpage .contentarea .maincontent .programblock p{font-size:1rem;line-height:1.7;color:#333;margin:0 0 1rem}
.projectdetailpage .contentarea .maincontent .programblock h3{font-size:1.25rem;color:#26228A;margin:1.5rem 0 .75rem}
.projectdetailpage .contentarea .maincontent .programblock ol,.projectdetailpage .contentarea .maincontent .programblock ul{margin:0 0 1rem 1.5rem;padding:0}
.projectdetailpage .contentarea .maincontent .programblock li{font-size:1rem;line-height:1.7;color:#333;margin-bottom:.5rem}
.projectdetailpage .contentarea .maincontent .programblock em{color:#31CEA0;font-style:normal;font-weight:500}
.projectdetailpage .contentarea .maincontent .programblock small{font-size:.875rem;color:#666}
.projectdetailpage .contentarea .maincontent .descriptionblock{background:#fff;padding:2.5rem;border-radius:8px;box-shadow:0 8px 24px #26228a0f}
.projectdetailpage .contentarea .maincontent .descriptionblock h2{font-size:1.75rem;color:#26228A;margin:0 0 1.5rem}
.projectdetailpage .contentarea .maincontent .descriptionblock p{font-size:1rem;line-height:1.7;color:#333;margin:0 0 1rem}
.projectdetailpage .contentarea .maincontent .descriptionblock blockquote{border-left:4px solid #31CEA0;padding:1rem 1.5rem;margin:1.5rem 0;background:#E5FCE7;border-radius:0 6px 6px 0}
.projectdetailpage .contentarea .maincontent .descriptionblock blockquote p{margin:0;color:#26228A;font-style:italic}
.projectdetailpage .contentarea .maincontent .descriptionblock cite{display:block;margin-top:.5rem;font-size:.875rem;color:#666}
.projectdetailpage .contentarea .maincontent .descriptionblock figure{margin:1.5rem 0;padding:0}
.projectdetailpage .contentarea .maincontent .descriptionblock figcaption{font-size:.875rem;color:#666;margin-top:.5rem;text-align:center}
.projectdetailpage .contentarea .sidebar{position:relative}
.projectdetailpage .contentarea .sidebar .pricebox{background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);padding:2rem;border-radius:8px;color:#fff;position:sticky;top:2rem;box-shadow:0 12px 28px #26228a26}
.projectdetailpage .contentarea .sidebar .pricebox .pricelabel{font-size:.875rem;opacity:.9;margin-bottom:.5rem}
.projectdetailpage .contentarea .sidebar .pricebox .pricevalue{font-size:2.5rem;font-weight:700;margin-bottom:.25rem}
.projectdetailpage .contentarea .sidebar .pricebox .priceterms{font-size:.875rem;opacity:.85;margin-bottom:1.5rem;line-height:1.5}
.projectdetailpage .contentarea .sidebar .pricebox .infolist{margin:1.5rem 0}
.projectdetailpage .contentarea .sidebar .pricebox .infolist .infoitem{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:.9375rem}
.projectdetailpage .contentarea .sidebar .pricebox .infolist .infoitem .mdi{font-size:1.25rem}
.projectdetailpage .contentarea .sidebar .pricebox .seatsalert{background:#ffffff26;padding:.75rem 1rem;border-radius:6px;margin:1.5rem 0;font-size:.875rem;display:flex;align-items:center;gap:.5rem}
.projectdetailpage .contentarea .sidebar .pricebox .seatsalert .mdi{font-size:1.125rem}
.projectdetailpage .contentarea .sidebar .pricebox .enrollbutton{display:block;width:100%;background:#fff;color:#26228A;padding:1rem 1.5rem;border-radius:6px;text-align:center;font-weight:600;font-size:1rem;text-decoration:none;transition:all 200ms;border:none;cursor:pointer;box-shadow:0 4px 12px #0000001a}
.projectdetailpage .contentarea .sidebar .pricebox .enrollbutton:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}
.accesstoggle{position:fixed;bottom:2rem;right:2rem;z-index:1000}
.accesstoggle input{display:none}
.accesstoggle label{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:#26228A;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 8px 16px #26228a4d;transition:all 200ms}
.accesstoggle label:hover{transform:scale(1.1);box-shadow:0 12px 24px #26228a66}
.accesstoggle label .mdi{font-size:1.75rem}
.accesstoggle input:checked ~ label{background:#31CEA0}
body.lowvision{background:#000;color:#ff0}
body.lowvision .projectdetailpage{background:#000;color:#ff0}
body.lowvision .projectdetailpage .topinfo .metarow .tagitem,body.lowvision .projectdetailpage .topinfo .metarow .userformat{background:#ff0;color:#000}
body.lowvision .projectdetailpage .topinfo .titlezone h1,body.lowvision .projectdetailpage .contentarea .maincontent .programblock h2,body.lowvision .projectdetailpage .contentarea .maincontent .programblock h3,body.lowvision .projectdetailpage .contentarea .maincontent .descriptionblock h2{color:#ff0}
body.lowvision .projectdetailpage .contentarea .maincontent .programblock,body.lowvision .projectdetailpage .contentarea .maincontent .descriptionblock{background:#1a1a1a;border-color:#ff0}
body.lowvision .projectdetailpage .contentarea .maincontent .programblock p,body.lowvision .projectdetailpage .contentarea .maincontent .programblock li,body.lowvision .projectdetailpage .contentarea .maincontent .descriptionblock p{color:#ff0}
body.lowvision .projectdetailpage .contentarea .sidebar .pricebox{background:#1a1a1a;border:2px solid #ff0}
body.lowvision .projectdetailpage .contentarea .sidebar .pricebox .enrollbutton{background:#ff0;color:#000}
body.lowvision .accesstoggle label{background:#ff0;color:#000}
@media (max-width: 992px) {
.projectdetailpage .contentarea{grid-template-columns:1fr;gap:2rem}
.projectdetailpage .contentarea .sidebar .pricebox{position:static}
.projectdetailpage .topinfo .titlezone h1{font-size:2rem}
}
@media (max-width: 768px) {
.projectdetailpage .topinfo,.projectdetailpage .herovisual,.projectdetailpage .contentarea{padding-left:1rem;padding-right:1rem}
.projectdetailpage .topinfo .titlezone h1{font-size:1.75rem}
.projectdetailpage .contentarea .maincontent .programblock,.projectdetailpage .contentarea .maincontent .descriptionblock{padding:1.5rem}
.projectdetailpage .contentarea .sidebar .pricebox{padding:1.5rem}
.projectdetailpage .contentarea .sidebar .pricebox .pricevalue{font-size:2rem}
.accesstoggle{bottom:1rem;right:1rem}
.accesstoggle label{width:48px;height:48px}
}
.articlecontainer{max-width:1400px;margin:0 auto;padding:0 20px}
.articletopbar{background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);padding:80px 20px 60px;margin-bottom:50px}
.articletopbar .articlecontainer{max-width:900px}
.articletopbar h1{color:#fff;font-size:42px;line-height:1.2;margin:0 0 25px;font-weight:700}
.articleinfoline{display:flex;flex-wrap:wrap;gap:30px;align-items:center;color:#fffffff2;font-size:15px}
.articleinfoline .infoitem{display:flex;align-items:center;gap:8px}
.articleinfoline .infoitem .mdi{font-size:20px;opacity:.9}
.articlemainwrap{max-width:900px;margin:0 auto 80px;padding:0 20px}
.articleheaderimg{width:100%;height:auto;display:block;margin-bottom:50px;box-shadow:0 12px 32px #00000014}
.articletoolsbar{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#f8f9fa;margin-bottom:40px;flex-wrap:wrap;gap:20px}
.statsgroup{display:flex;gap:35px;align-items:center}
.statbox{display:flex;align-items:center;gap:10px;font-size:15px;color:#495057}
.statbox .mdi{font-size:22px;color:#26228A}
.statbox strong{color:#212529;font-weight:600}
.printbutton{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:#26228A;color:#fff;border:none;cursor:pointer;font-size:15px;font-weight:500;transition:all 180ms ease}
.printbutton:hover{background:#1f1c6e;box-shadow:0 6px 16px #26228a40;transform:translateY(-2px)}
.printbutton .mdi{font-size:20px}
.articlecontent h2{font-size:32px;line-height:1.3;color:#212529;margin:50px 0 20px;font-weight:700;position:relative;padding-left:20px}
.articlecontent h2::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#26228A 0%,#31CEA0 100%)}
.articlecontent h3{font-size:24px;line-height:1.4;color:#343a40;margin:35px 0 15px;font-weight:600}
.articlecontent p{font-size:17px;line-height:1.8;color:#495057;margin:0 0 22px}
.articlecontent em{font-style:italic;color:#26228A}
.articlecontent table{width:100%;border-collapse:collapse;margin:35px 0;box-shadow:0 4px 16px #0000000f}
.articlecontent table tr{border-bottom:1px solid #dee2e6}
.articlecontent table tr:last-child{border-bottom:none}
.articlecontent table td{padding:18px 20px;font-size:16px;color:#495057;vertical-align:top}
.articlecontent table td:first-child{font-weight:600;color:#212529;background:#f8f9fa;width:35%}
.articlecontent figure{margin:45px 0;text-align:center}
.articlecontent figure img{max-width:100%;height:auto;box-shadow:0 8px 24px #0000001a}
.articlecontent figcaption{margin-top:15px;font-size:14px;color:#6c757d;font-style:italic}
.authorbox{background:linear-gradient(135deg,#E5FCE7 0%,#fff 100%);padding:35px 40px;margin:60px 0 40px;display:flex;align-items:center;gap:20px;box-shadow:0 4px 16px #0000000a}
.authorbox::before{content:'\F4FF';font-family:'Material Design Icons';font-size:48px;color:#31CEA0;flex-shrink:0}
.authordetails h4{font-size:18px;color:#212529;margin:0 0 8px;font-weight:600}
.authordetails p{font-size:15px;color:#495057;margin:0}
.ctablock{background:#26228A;padding:60px 40px;text-align:center;margin:70px 0 0}
.ctablock h3{color:#fff;font-size:28px;margin:0 0 15px;font-weight:700}
.ctablock p{color:#ffffffe6;font-size:16px;margin:0 0 30px;max-width:600px;margin-left:auto;margin-right:auto}
.ctabutton{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:#31CEA0;color:#212529;text-decoration:none;font-size:16px;font-weight:600;transition:all 180ms ease}
.ctabutton:hover{background:#2ab88d;transform:translateY(-2px);box-shadow:0 8px 20px #31cea04d}
.ctabutton .mdi{font-size:22px}
@media (max-width: 768px) {
.articletopbar{padding:50px 20px 40px}
.articletopbar h1{font-size:32px}
.articleinfoline{gap:20px}
.articlemainwrap{margin-bottom:60px}
.articletoolsbar{padding:20px;flex-direction:column;align-items:flex-start}
.statsgroup{gap:25px;flex-wrap:wrap}
.articlecontent h2{font-size:26px;margin:35px 0 15px}
.articlecontent h3{font-size:20px}
.articlecontent p{font-size:16px}
.articlecontent table td{display:block;width:100%;padding:12px 15px}
.articlecontent table td:first-child{background:#26228A;color:#fff;font-weight:600}
.authorbox{padding:25px 20px;flex-direction:column;text-align:center}
.ctablock{padding:40px 20px}
.ctablock h3{font-size:24px}
}
@media (max-width: 480px) {
.articletopbar h1{font-size:26px}
.articleinfoline{flex-direction:column;align-items:flex-start;gap:12px}
.statsgroup{flex-direction:column;align-items:flex-start;gap:15px}
.printbutton{width:100%;justify-content:center}
.articlecontent h2{font-size:22px}
}
.pagetop{background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);padding:80px 20px 60px;text-align:center;position:relative}
.pagetop::after{content:'';position:absolute;bottom:-30px;left:0;right:0;height:60px;background:#fff;clip-path:polygon(0 50%,100% 0,100% 100%,0% 100%)}
.pagetop h1{color:#fff;font-size:42px;margin:0 0 12px;font-weight:700}
.pagetop .subtitle{color:#E5FCE7;font-size:18px;margin:0;max-width:680px;margin-left:auto;margin-right:auto}
.widthcontrol{max-width:1400px;margin:0 auto;padding:0 20px}
.projectsgrid{padding:80px 0}
.gridlayout{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px;margin-bottom:60px}
.projectcard{background:#fff;border-radius:8px;box-shadow:0 4px 16px #26228a14;overflow:hidden;transition:all 200ms;position:relative;display:flex;flex-direction:column}
.projectcard:hover{box-shadow:0 12px 28px #26228a29;transform:translateY(-4px)}
.projectcard .imageholder{position:relative;overflow:hidden;height:220px;background:linear-gradient(135deg,#E5FCE7 0%,#31CEA0 100%)}
.projectcard .imageholder img{width:100%;height:100%;object-fit:cover;transition:transform 220ms}
.projectcard:hover .imageholder img{transform:scale(1.05)}
.projectcard .tagbox{position:absolute;top:16px;left:16px;display:flex;gap:8px;flex-wrap:wrap}
.projectcard .categorylabel{background:#fffffff2;color:#26228A;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;box-shadow:0 2px 8px #0000001a}
.projectcard .userlabel{background:#26228A;color:#fff;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600}
.projectcard .contentarea{padding:24px;flex-grow:1;display:flex;flex-direction:column}
.projectcard .cardtitle{font-size:22px;color:#26228A;margin:0 0 12px;font-weight:700;line-height:1.3}
.projectcard .carddescription{font-size:15px;color:#4a4a4a;line-height:1.6;margin:0 0 20px;flex-grow:1}
.projectcard .metarow{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;font-size:14px;color:#666}
.projectcard .metaitem{display:flex;align-items:center;gap:6px}
.projectcard .metaitem i{color:#31CEA0;font-size:16px}
.projectcard .statsrow{display:flex;align-items:center;gap:20px;padding-top:16px;border-top:1px solid #e8e8e8;font-size:14px;color:#666}
.projectcard .statitem{display:flex;align-items:center;gap:6px}
.projectcard .statitem i{color:#26228A;font-size:16px}
.projectcard .pricebox{background:linear-gradient(135deg,#E5FCE7 0%,#31CEA0 30%);padding:18px 24px;display:flex;justify-content:space-between;align-items:center}
.projectcard .priceamount{font-size:28px;color:#26228A;font-weight:700;margin:0}
.projectcard .pricedetail{font-size:13px;color:#26228A;margin:4px 0 0}
.projectcard .actionbutton{background:#26228A;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;transition:all 180ms;position:relative;z-index:10}
.projectcard .actionbutton:hover{background:#1a1860;transform:translateY(-2px);box-shadow:0 6px 16px #26228a4d}
.infoblock{background:linear-gradient(to right,#E5FCE7 0%,#fff 100%);padding:60px 20px;margin-bottom:80px;border-radius:8px}
.infoblock .widthcontrol{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.infoblock .textside h2{font-size:36px;color:#26228A;margin:0 0 20px;font-weight:700}
.infoblock .textside p{font-size:16px;color:#4a4a4a;line-height:1.7;margin:0 0 16px}
.infoblock .visualside{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.infoblock .statbox{background:#fff;padding:28px;border-radius:8px;text-align:center;box-shadow:0 4px 12px #26228a14}
.infoblock .statbox .number{font-size:42px;color:#31CEA0;font-weight:700;margin:0 0 8px;display:block}
.infoblock .statbox .label{font-size:15px;color:#666;margin:0}
.processection{padding:80px 20px;background:#fafafa}
.processection h2{text-align:center;font-size:38px;color:#26228A;margin:0 0 50px;font-weight:700}
.stepsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;max-width:1400px;margin:0 auto}
.stepcard{background:#fff;padding:32px;border-radius:8px;border-left:4px solid #31CEA0;box-shadow:0 2px 12px #0000000f;position:relative}
.stepcard::before{content:'';position:absolute;top:32px;left:-14px;width:24px;height:24px;background:#31CEA0;border-radius:50%;border:4px solid #fff}
.stepcard .stepnumber{display:inline-block;background:#26228A;color:#fff;width:36px;height:36px;border-radius:50%;text-align:center;line-height:36px;font-weight:700;margin-bottom:16px;font-size:18px}
.stepcard h3{font-size:20px;color:#26228A;margin:0 0 12px;font-weight:700}
.stepcard p{font-size:15px;color:#4a4a4a;line-height:1.6;margin:0}
.featuressection{padding:80px 20px;background:#fff}
.featuressection h2{text-align:center;font-size:38px;color:#26228A;margin:0 0 16px;font-weight:700}
.featuressection .intro{text-align:center;font-size:17px;color:#666;margin:0 auto 50px;max-width:720px;line-height:1.6}
.featureswrap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1400px;margin:0 auto}
.featurebox{background:#fafafa;padding:36px 28px;border-radius:8px;text-align:center;transition:all 200ms;border:2px solid transparent}
.featurebox:hover{background:#fff;border-color:#31CEA0;box-shadow:0 8px 20px #31cea026}
.featurebox .iconholder{width:64px;height:64px;background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.featurebox .iconholder i{color:#fff;font-size:32px}
.featurebox h3{font-size:19px;color:#26228A;margin:0 0 12px;font-weight:700}
.featurebox p{font-size:15px;color:#4a4a4a;line-height:1.6;margin:0}
@media (max-width: 1024px) {
.infoblock .widthcontrol{grid-template-columns:1fr;gap:40px}
.featureswrap{grid-template-columns:repeat(2,1fr)}
.gridlayout{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
}
@media (max-width: 768px) {
.pagetop{padding:60px 20px 50px}
.pagetop h1{font-size:32px}
.pagetop .subtitle{font-size:16px}
.featureswrap{grid-template-columns:1fr}
.stepsgrid{grid-template-columns:1fr}
.gridlayout{grid-template-columns:1fr}
.infoblock .visualside{grid-template-columns:1fr}
.infoblock h2{font-size:28px}
.processection h2,.featuressection h2{font-size:28px}
}
.titlehero{background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);position:relative;overflow:hidden}
.titlehero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");animation:grainmove 8s steps(10) infinite;pointer-events:none}
@keyframes grainmove {
0%,100%{transform:translate(0,0)}
10%{transform:translate(-5%,-10%)}
20%{transform:translate(-15%,5%)}
30%{transform:translate(7%,-25%)}
40%{transform:translate(-5%,25%)}
50%{transform:translate(-15%,10%)}
60%{transform:translate(15%,0%)}
70%{transform:translate(0%,15%)}
80%{transform:translate(3%,35%)}
90%{transform:translate(-10%,10%)}
}
.titlehero::after{content:'';position:absolute;top:20%;left:10%;width:300px;height:2px;background:#ffffff4d;transform:rotate(-45deg);animation:linedraw 2s ease-out forwards}
@keyframes linedraw {
from{width:0}
to{width:300px}
}
.titleherocontent{max-width:1400px;margin:0 auto;padding:80px 24px;position:relative;z-index:2;display:flex;flex-direction:column;gap:28px}
.titleheroprimary{font-size:48px;font-weight:700;color:#fff;line-height:1.2;margin:0}
.titleherosub{font-size:20px;color:#E5FCE7;line-height:1.6;max-width:700px;margin:0}
.titleheroactions{display:flex;gap:16px;flex-wrap:wrap}
.titleherobtn{padding:14px 32px;font-size:16px;font-weight:600;border-radius:8px;text-decoration:none;transition:all 200ms;display:inline-block}
.titleherobtnprimary{background:#fff;color:#26228A}
.titleherobtnprimary:hover{background:#E5FCE7;transform:translateY(-2px);box-shadow:0 8px 16px #00000026}
.titleherobtnsecondary{background:transparent;color:#fff;border:2px solid #fff}
.titleherobtnsecondary:hover{background:#ffffff1a;transform:translateY(-2px)}
.titleherovisual{max-width:1400px;margin:0 auto;padding:0 24px 60px;position:relative;z-index:2}
.titleherovisual img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 20px 40px #0003;position:relative}
.titleherovisual::after{content:'';position:absolute;bottom:60px;left:24px;right:24px;height:120px;background:linear-gradient(to top,#26228a99,transparent);border-radius:0 0 12px 12px;pointer-events:none}
.relevancewrapper{padding:100px 24px;background:#fff}
.relevancecontent{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.relevancehead{font-size:36px;font-weight:700;color:#26228A;margin:0 0 24px;line-height:1.3}
.relevancepara{font-size:17px;color:#2c2c2c;line-height:1.7;margin:0 0 20px}
.relevancestats{display:flex;flex-direction:column;gap:32px}
.statitem{background:linear-gradient(135deg,#f8f8f8 0%,#fff 100%);padding:28px;border-left:4px solid #31CEA0;border-radius:8px;box-shadow:0 4px 12px #0000000d}
.statnum{font-size:44px;font-weight:700;color:#26228A;margin:0 0 8px}
.statlabel{font-size:16px;color:#555;line-height:1.5}
.guaranteezone{background:#E5FCE7;padding:100px 24px}
.guaranteelayout{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:48px}
.guaranteetitle{font-size:38px;font-weight:700;color:#26228A;margin:0 0 20px;line-height:1.3}
.guaranteedesc{font-size:18px;color:#2c2c2c;line-height:1.7;margin:0 0 16px}
.guaranteecards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.guaranteecard{background:#fff;padding:32px;border-radius:10px;box-shadow:0 6px 18px #00000014;transition:transform 200ms}
.guaranteecard:hover{transform:translateY(-4px);box-shadow:0 12px 28px #0000001f}
.guaranteecardicon{font-size:48px;color:#31CEA0;margin-bottom:16px}
.guaranteecardtitle{font-size:20px;font-weight:600;color:#26228A;margin:0 0 12px}
.guaranteecardtext{font-size:16px;color:#555;line-height:1.6;margin:0}
.transparencyblock{background:#fff;padding:100px 24px}
.transparencyinner{max-width:1400px;margin:0 auto}
.transparencyheading{font-size:40px;font-weight:700;color:#26228A;text-align:center;margin:0 0 60px}
.transparencysteps{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.stepbox{position:relative;padding:32px;background:linear-gradient(135deg,#f9f9f9 0%,#fff 100%);border-radius:8px;border:1px solid #e0e0e0;transition:all 200ms}
.stepbox:hover{border-color:#31CEA0;box-shadow:0 8px 20px #31cea01a}
.stepnumber{font-size:28px;font-weight:700;color:#31CEA0;margin-bottom:16px}
.steptitle{font-size:22px;font-weight:600;color:#26228A;margin:0 0 12px}
.steptext{font-size:16px;color:#555;line-height:1.7;margin:0}
.supportarea{background:#f5f5f5;padding:100px 24px}
.supportcontainer{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.supportimage img{width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px #0000001a}
.supportheader{font-size:36px;font-weight:700;color:#26228A;margin:0 0 20px;line-height:1.3}
.supportparagraph{font-size:17px;color:#2c2c2c;line-height:1.7;margin:0 0 20px}
.supportmethods{display:flex;flex-direction:column;gap:20px;margin-top:32px}
.methoditem{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #0000000f}
.methodicon{font-size:32px;color:#31CEA0}
.methodname{font-size:18px;font-weight:600;color:#26228A;margin:0 0 4px}
.methoddetail{font-size:15px;color:#666;margin:0}
.partnershipssection{background:#fff;padding:100px 24px}
.partnershipscontainer{max-width:1400px;margin:0 auto}
.partnershipsheading{font-size:38px;font-weight:700;color:#26228A;text-align:center;margin:0 0 20px}
.partnershipslead{font-size:18px;color:#555;text-align:center;line-height:1.7;max-width:800px;margin:0 auto 60px}
.partnershipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.partnercard{background:linear-gradient(135deg,#f8f8f8 0%,#fff 100%);padding:36px;border-radius:10px;border:1px solid #e5e5e5;transition:all 200ms;text-align:center}
.partnercard:hover{transform:translateY(-6px);box-shadow:0 12px 32px #26228a1a;border-color:#26228A}
.partnericonbox{font-size:56px;color:#31CEA0;margin-bottom:20px}
.partnercardheading{font-size:20px;font-weight:600;color:#26228A;margin:0 0 12px}
.partnercardtext{font-size:16px;color:#555;line-height:1.6;margin:0}
.accessibilityzone{background:#E5FCE7;padding:100px 24px}
.accessibilitylayout{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.accessibilityhead{font-size:38px;font-weight:700;color:#26228A;margin:0 0 20px;line-height:1.3}
.accessibilitypara{font-size:17px;color:#2c2c2c;line-height:1.7;margin:0 0 20px}
.accesslistwrap{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.accesslistitem{display:flex;align-items:flex-start;gap:12px}
.accesscheck{font-size:24px;color:#31CEA0;flex-shrink:0}
.accesslisttext{font-size:16px;color:#2c2c2c;line-height:1.6}
.accessibilityvisual img{width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px #0000001a}
.testimonialsection{background:#fff;padding:100px 24px}
.testimonialcontent{max-width:900px;margin:0 auto}
.testimonialheading{font-size:36px;font-weight:700;color:#26228A;text-align:center;margin:0 0 48px}
.testimonialcard{background:#f9f9f9;padding:40px;border-radius:10px;border-left:4px solid #31CEA0;box-shadow:0 6px 18px #00000014}
.testimonialprofile{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.testimonialphoto{width:64px;height:64px;border-radius:50%;object-fit:cover}
.testimonialname{font-size:18px;font-weight:600;color:#26228A;margin-bottom:4px}
.testimonialrole{font-size:15px;color:#666}
.testimonialquote{font-size:17px;color:#2c2c2c;line-height:1.7;margin:0 0 20px;font-style:italic}
.testimonialrating{display:flex;gap:4px}
.ratingstar{font-size:20px;color:#31CEA0}
.finalcta{background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);padding:100px 24px}
.finalctabox{max-width:900px;margin:0 auto;text-align:center}
.finalctatitle{font-size:40px;font-weight:700;color:#fff;margin:0 0 20px;line-height:1.3}
.finalctadesc{font-size:18px;color:#E5FCE7;line-height:1.7;margin:0 0 40px}
.finalctabuttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.finalctabtn{padding:16px 36px;font-size:17px;font-weight:600;border-radius:8px;text-decoration:none;transition:all 200ms;display:inline-block}
.finalctabtnsolid{background:#fff;color:#26228A}
.finalctabtnsolid:hover{background:#E5FCE7;transform:translateY(-2px);box-shadow:0 8px 20px #0003}
.finalctabtnoutline{background:transparent;color:#fff;border:2px solid #fff}
.finalctabtnoutline:hover{background:#ffffff26;transform:translateY(-2px)}
@media (max-width: 1024px) {
.relevancecontent{grid-template-columns:1fr}
.transparencysteps{grid-template-columns:1fr}
.supportcontainer{grid-template-columns:1fr}
.partnershipgrid{grid-template-columns:1fr}
.accessibilitylayout{grid-template-columns:1fr}
.guaranteecards{grid-template-columns:1fr}
}
@media (max-width: 768px) {
.titleheroprimary{font-size:36px}
.titleherosub{font-size:18px}
.relevancehead,.guaranteetitle,.supportheader,.accessibilityhead{font-size:28px}
.transparencyheading,.partnershipsheading,.testimonialheading,.finalctatitle{font-size:30px}
.titleheroactions{flex-direction:column}
.titleherobtn{width:100%;text-align:center}
}
.herotitlesection{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:80px 20px}
.herotitlesection .backgroundparticles{position:absolute;inset:0;overflow:hidden;z-index:1}
.herotitlesection .particle{position:absolute;background:#26228a14;border-radius:50%;animation:floatparticle 20s infinite ease-in-out}
.herotitlesection .particle:nth-child(1){width:120px;height:120px;top:10%;left:15%;animation-delay:0s}
.herotitlesection .particle:nth-child(2){width:80px;height:80px;top:60%;left:75%;animation-delay:3s}
.herotitlesection .particle:nth-child(3){width:100px;height:100px;top:35%;left:85%;animation-delay:6s}
.herotitlesection .particle:nth-child(4){width:60px;height:60px;top:75%;left:20%;animation-delay:9s}
.herotitlesection .morphingblob{position:absolute;width:400px;height:400px;background:linear-gradient(135deg,#31cea026,#26228a1a);border-radius:45% 55% 60% 40% / 50% 45% 55% 50%;animation:blobmorph 15s infinite ease-in-out;top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(40px);z-index:1}
@keyframes floatparticle {
0%,100%{transform:translate(0,0) scale(1)}
25%{transform:translate(30px,-30px) scale(1.1)}
50%{transform:translate(-20px,40px) scale(0.9)}
75%{transform:translate(40px,20px) scale(1.05)}
}
@keyframes blobmorph {
0%,100%{border-radius:45% 55% 60% 40% / 50% 45% 55% 50%;transform:translate(-50%,-50%) rotate(0deg)}
25%{border-radius:60% 40% 45% 55% / 55% 50% 50% 45%;transform:translate(-50%,-50%) rotate(90deg)}
50%{border-radius:40% 60% 55% 45% / 45% 55% 45% 55%;transform:translate(-50%,-50%) rotate(180deg)}
75%{border-radius:55% 45% 50% 50% / 60% 40% 60% 40%;transform:translate(-50%,-50%) rotate(270deg)}
}
.herotitlesection .titlecontent{position:relative;z-index:2;max-width:900px;width:100%;text-align:center}
.herotitlesection .splitheading{font-size:56px;font-weight:700;color:#26228A;margin:0 0 20px;line-height:1.2;overflow:hidden}
.herotitlesection .headingpart1,.herotitlesection .headingpart2{display:inline-block;animation:slideinfromleft 1s ease-out forwards;opacity:0}
.herotitlesection .headingpart2{animation:slideinfromright 1s ease-out forwards;animation-delay:.2s}
@keyframes slideinfromleft {
from{transform:translateX(-100px);opacity:0}
to{transform:translateX(0);opacity:1}
}
@keyframes slideinfromright {
from{transform:translateX(100px);opacity:0}
to{transform:translateX(0);opacity:1}
}
.herotitlesection .subtitletext{font-size:20px;color:#495057;line-height:1.6;max-width:700px;margin:0 auto}
.storyblock{padding:100px 20px;background:#fff}
.storyblock .contentwrapper{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.storyblock .textside{padding-right:20px}
.storyblock .sectionlabel{display:inline-block;padding:8px 18px;background:linear-gradient(135deg,#E5FCE7,#31CEA0);color:#1a1a1a;font-size:14px;font-weight:600;border-radius:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.5px}
.storyblock .maintitle{font-size:42px;font-weight:700;color:#1a1a1a;margin:0 0 28px;line-height:1.3;position:relative}
.storyblock .maintitle::before{content:'';position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:5px;height:80%;background:linear-gradient(180deg,#26228A,#31CEA0);border-radius:10px}
.storyblock .descriptiontext{font-size:17px;line-height:1.8;color:#495057;margin:0 0 20px}
.storyblock .imageside{position:relative}
.storyblock .featuredimage{width:100%;height:500px;object-fit:cover;border-radius:8px;position:relative;box-shadow:0 12px 40px #0000001f}
.storyblock .imageoverlay{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,#26228ab3,transparent);border-radius:0 0 8px 8px;pointer-events:none}
.valuesection{padding:90px 20px;background:linear-gradient(135deg,#26228A 0%,#1a1a5f 100%);position:relative;overflow:hidden}
.valuesection::before{content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,#31cea026,transparent);border-radius:50%;animation:pulseglowslow 8s infinite ease-in-out}
@keyframes pulseglowslow {
0%,100%{transform:scale(1);opacity:.6}
50%{transform:scale(1.2);opacity:.3}
}
.valuesection .contentbox{max-width:1400px;margin:0 auto;position:relative;z-index:2}
.valuesection .headingrow{text-align:center;margin-bottom:70px}
.valuesection .sectiontitle{font-size:46px;font-weight:700;color:#fff;margin:0 0 18px;line-height:1.2}
.valuesection .sectionsubtitle{font-size:19px;color:#E5FCE7;line-height:1.6;max-width:700px;margin:0 auto}
.valuesection .cardsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px}
.valuesection .valuecard{background:#fffffff2;padding:40px 32px;border-radius:8px;box-shadow:0 8px 24px #00000026;transition:all .2s ease;position:relative}
.valuesection .valuecard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#31CEA0,#26228A);border-radius:8px 8px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.valuesection .valuecard:hover::before{transform:scaleX(1)}
.valuesection .valuecard:hover{transform:translateY(-8px);box-shadow:0 16px 48px #0003}
.valuesection .cardicon{width:60px;height:60px;background:linear-gradient(135deg,#E5FCE7,#31CEA0);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.valuesection .cardicon .mdi{font-size:32px;color:#26228A}
.valuesection .cardtitle{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 16px;line-height:1.3}
.valuesection .carddescription{font-size:16px;line-height:1.7;color:#495057;margin:0}
.teamarea{padding:100px 20px;background:#f8f9fa}
.teamarea .innercontainer{max-width:1400px;margin:0 auto}
.teamarea .headersection{text-align:center;margin-bottom:60px}
.teamarea .toptitle{font-size:48px;font-weight:700;color:#26228A;margin:0 0 20px;line-height:1.2;position:relative;display:inline-block}
.teamarea .toptitle::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:120px;height:4px;background:linear-gradient(90deg,#31CEA0,#26228A);border-radius:10px}
.teamarea .introline{font-size:18px;color:#495057;line-height:1.7;max-width:800px;margin:0 auto}
.teamarea .membersgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:50px}
.teamarea .personcard{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #00000014;transition:all .2s ease;border:2px solid transparent}
.teamarea .personcard:hover{border-color:#31CEA0;box-shadow:0 16px 40px #00000026;transform:translateY(-6px)}
.teamarea .photowrapper{width:100%;height:320px;overflow:hidden;position:relative}
.teamarea .personphoto{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.teamarea .personcard:hover .personphoto{transform:scale(1.08)}
.teamarea .infoarea{padding:28px 24px}
.teamarea .personname{font-size:22px;font-weight:700;color:#1a1a1a;margin:0 0 8px;line-height:1.3}
.teamarea .personrole{font-size:15px;color:#31CEA0;font-weight:600;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}
.teamarea .personbio{font-size:15px;line-height:1.7;color:#495057;margin:0}
@media (max-width: 1024px) {
.herotitlesection .splitheading{font-size:42px}
.storyblock .contentwrapper{grid-template-columns:1fr;gap:40px}
.storyblock .textside{padding-right:0}
.storyblock .maintitle{font-size:36px}
.storyblock .maintitle::before{left:0;top:-15px;width:60px;height:4px;transform:none}
.valuesection .sectiontitle{font-size:38px}
.teamarea .toptitle{font-size:38px}
}
@media (max-width: 768px) {
.herotitlesection{min-height:360px;padding:60px 20px}
.herotitlesection .splitheading{font-size:32px}
.herotitlesection .subtitletext{font-size:17px}
.herotitlesection .morphingblob{width:280px;height:280px}
.storyblock{padding:60px 20px}
.storyblock .maintitle{font-size:28px}
.storyblock .featuredimage{height:360px}
.valuesection{padding:60px 20px}
.valuesection .headingrow{margin-bottom:50px}
.valuesection .sectiontitle{font-size:32px}
.valuesection .cardsgrid{grid-template-columns:1fr;gap:30px}
.teamarea{padding:60px 20px}
.teamarea .toptitle{font-size:32px}
.teamarea .membersgrid{grid-template-columns:1fr;gap:35px}
}
.herosection{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%)}
.herosection::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#26228a66 0%,#31cea04d 50%,#26228a66 100%);animation:wavemotion 8s ease-in-out infinite}
@keyframes wavemotion {
0%,100%{transform:translateX(0) scaleX(1)}
50%{transform:translateX(-3%) scaleX(1.05)}
}
.herosection .textcontainer{position:relative;z-index:2;text-align:center;max-width:900px;padding:40px 20px}
.herosection .maintitle{font-size:3.2rem;font-weight:700;color:#fff;margin:0 0 24px;line-height:1.2;text-shadow:0 4px 12px #0003}
.herosection .subtitle{font-size:1.3rem;color:#E5FCE7;margin:0;line-height:1.6;font-weight:400}
.contactsectionwrap{max-width:1400px;margin:0 auto;padding:80px 20px}
.contactgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start}
.infoside{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);padding:48px 40px;border-radius:8px;box-shadow:0 8px 24px #0000000f}
.infoside .sectionheading{font-size:2rem;font-weight:700;color:#26228A;margin:0 0 32px;line-height:1.3}
.contactitem{display:flex;align-items:start;margin-bottom:28px;gap:16px}
.contactitem:last-child{margin-bottom:0}
.contactitem .iconwrap{width:44px;height:44px;background:linear-gradient(135deg,#31CEA0 0%,#26228A 100%);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px #31cea04d}
.contactitem .iconwrap .mdi{color:#fff;font-size:22px}
.contactitem .textpart{flex:1}
.contactitem .label{font-size:.9rem;color:#6c757d;margin:0 0 6px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.contactitem .value{font-size:1.1rem;color:#212529;margin:0;line-height:1.5}
.contactitem .value a{color:#26228A;text-decoration:none;transition:color 180ms}
.contactitem .value a:hover{color:#31CEA0}
.formside{background:#fff;padding:52px 48px;border-radius:8px;border:1px solid #e9ecef;box-shadow:0 12px 32px #00000014}
.formside .formtitle{font-size:1.8rem;font-weight:700;color:#212529;margin:0 0 12px;line-height:1.3}
.formside .formdescription{font-size:1.05rem;color:#6c757d;margin:0 0 36px;line-height:1.6}
.contactform .formrow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.contactform .inputgroup{margin-bottom:20px}
.contactform .inputlabel{display:block;font-size:.95rem;font-weight:600;color:#495057;margin-bottom:8px}
.contactform .inputfield{width:100%;padding:14px 16px;font-size:1rem;color:#212529;background:#f8f9fa;border:2px solid #dee2e6;border-radius:6px;transition:all 200ms;box-shadow:inset 0 1px 3px #0000000a}
.contactform .inputfield:focus{outline:none;background:#fff;border-color:#31CEA0;box-shadow:0 0 0 3px #31cea01a inset 0 1px 3px #0000000a}
.contactform .textareafield{width:100%;padding:14px 16px;font-size:1rem;color:#212529;background:#f8f9fa;border:2px solid #dee2e6;border-radius:6px;min-height:140px;resize:vertical;transition:all 200ms;box-shadow:inset 0 1px 3px #0000000a;font-family:inherit}
.contactform .textareafield:focus{outline:none;background:#fff;border-color:#31CEA0;box-shadow:0 0 0 3px #31cea01a inset 0 1px 3px #0000000a}
.contactform .selectfield{width:100%;padding:14px 16px;font-size:1rem;color:#212529;background:#f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23495057' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 16px center;background-size:12px;border:2px solid #dee2e6;border-radius:6px;appearance:none;cursor:pointer;transition:all 200ms;box-shadow:inset 0 1px 3px #0000000a}
.contactform .selectfield:focus{outline:none;background-color:#fff;border-color:#31CEA0;box-shadow:0 0 0 3px #31cea01a inset 0 1px 3px #0000000a}
.contactform .checkboxwrapper{margin:28px 0}
.contactform .checkboxinput{position:absolute;opacity:0;pointer-events:none}
.contactform .checkboxlabel{display:flex;align-items:start;gap:12px;cursor:pointer;font-size:.95rem;color:#495057;line-height:1.5}
.contactform .checkboxlabel::before{content:'';width:20px;height:20px;flex-shrink:0;margin-top:2px;border:2px solid #dee2e6;border-radius:4px;background:#f8f9fa;transition:all 180ms;box-shadow:inset 0 1px 2px #0000000a}
.contactform .checkboxinput:checked + .checkboxlabel::before{background:#31CEA0;border-color:#31CEA0;box-shadow:0 2px 8px #31cea04d}
.contactform .checkboxinput:checked + .checkboxlabel::after{content:'';position:absolute;left:6px;top:8px;width:8px;height:14px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.contactform .checkboxlabel a{color:#26228A;text-decoration:underline;transition:color 180ms}
.contactform .checkboxlabel a:hover{color:#31CEA0}
.contactform .submitbutton{width:100%;padding:16px 32px;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);border:none;border-radius:6px;cursor:pointer;transition:all 200ms;box-shadow:0 4px 16px #26228a4d;text-transform:uppercase;letter-spacing:.5px}
.contactform .submitbutton:hover{transform:translateY(-2px);box-shadow:0 8px 24px #26228a66}
.contactform .submitbutton:active{transform:translateY(0)}
@media (max-width: 992px) {
.contactgrid{grid-template-columns:1fr;gap:40px}
.herosection .maintitle{font-size:2.4rem}
.herosection .subtitle{font-size:1.1rem}
}
@media (max-width: 768px) {
.contactform .formrow{grid-template-columns:1fr;gap:0}
.formside{padding:36px 28px}
.infoside{padding:36px 28px}
.herosection .maintitle{font-size:2rem}
.herosection .subtitle{font-size:1rem}
.contactsectionwrap{padding:60px 20px}
}
@media (max-width: 480px) {
.herosection{min-height:400px}
.formside{padding:28px 20px}
.infoside{padding:28px 20px}
}
.programtitlearea{max-width:1400px;margin:0 auto;padding:80px 20px;display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:center;position:relative;overflow:hidden}
.programtitlearea::before{content:'';position:absolute;width:400px;height:400px;background:linear-gradient(135deg,#E5FCE7 0%,transparent 70%);border-radius:50%;top:-100px;right:-150px;opacity:.4;animation:floatshape 8s ease-in-out infinite}
@keyframes floatshape {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(-30px,20px) rotate(10deg)}
}
.programtitlearea .maintextbox{position:relative;z-index:2}
.programtitlearea .maintextbox h1{font-size:3.2rem;line-height:1.1;color:#26228A;margin:0 0 24px;font-weight:700;display:flex;align-items:baseline;gap:16px}
.programtitlearea .livecounter{font-size:2.8rem;color:#31CEA0;font-weight:800;position:relative}
.programtitlearea .livecounter::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:3px;background:linear-gradient(90deg,#31CEA0,transparent)}
.programtitlearea .descriptiontext{font-size:1.1rem;line-height:1.7;color:#2d2d2d;margin:0 0 32px}
.programtitlearea .quickstatbox{display:flex;gap:32px;margin-top:28px}
.programtitlearea .quickstatbox .statitem{display:flex;flex-direction:column}
.programtitlearea .quickstatbox .statitem .statvalue{font-size:2rem;font-weight:700;color:#26228A;margin:0 0 4px}
.programtitlearea .quickstatbox .statitem .statlabel{font-size:.9rem;color:#666;text-transform:uppercase;letter-spacing:.5px}
.programtitlearea .imagewrapper{position:relative;height:420px;border-radius:8px;overflow:hidden;box-shadow:0 12px 32px #0000001f}
.programtitlearea .imagewrapper img{width:100%;height:100%;object-fit:cover}
.programtitlearea .imagewrapper::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#26228a99 0%,transparent 60%)}
.learningpathsection{background:linear-gradient(180deg,#f8f9fc 0%,#fff 100%);padding:100px 20px}
.learningpathsection .contentcontainer{max-width:1400px;margin:0 auto}
.learningpathsection .sectionheader{text-align:center;margin-bottom:64px}
.learningpathsection .sectionheader h2{font-size:2.6rem;color:#26228A;margin:0 0 16px;font-weight:700}
.learningpathsection .sectionheader p{font-size:1.15rem;color:#555;line-height:1.6;max-width:700px;margin:0 auto}
.learningpathsection .pathgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.learningpathsection .pathcard{background:#fff;border-radius:8px;padding:36px 28px;box-shadow:0 4px 16px #0000000f;border-top:4px solid #31CEA0;transition:transform 200ms,box-shadow 200ms;position:relative}
.learningpathsection .pathcard:hover{transform:translateY(-6px);box-shadow:0 12px 28px #0000001f}
.learningpathsection .pathcard .cardicon{width:56px;height:56px;background:linear-gradient(135deg,#31CEA0,#26228A);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.learningpathsection .pathcard .cardicon i{color:#fff;font-size:1.6rem}
.learningpathsection .pathcard h3{font-size:1.5rem;color:#26228A;margin:0 0 12px;font-weight:600}
.learningpathsection .pathcard p{font-size:1rem;line-height:1.6;color:#4a4a4a;margin:0 0 20px}
.learningpathsection .pathcard .durationlabel{display:inline-block;background:#E5FCE7;color:#26228A;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:600}
.curriculumbreakdown{padding:90px 20px;background:#fff}
.curriculumbreakdown .contentbox{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:420px 1fr;gap:70px;align-items:start}
.curriculumbreakdown .sideinfo{position:sticky;top:40px}
.curriculumbreakdown .sideinfo h2{font-size:2.4rem;color:#26228A;margin:0 0 20px;font-weight:700;position:relative;padding-bottom:16px}
.curriculumbreakdown .sideinfo h2::after{content:'';position:absolute;bottom:0;left:0;width:80px;height:4px;background:#31CEA0}
.curriculumbreakdown .sideinfo p{font-size:1.05rem;line-height:1.7;color:#3d3d3d;margin:0 0 28px}
.curriculumbreakdown .sideinfo .imageinsert{width:100%;height:280px;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #0000001a}
.curriculumbreakdown .sideinfo .imageinsert img{width:100%;height:100%;object-fit:cover}
.curriculumbreakdown .modulelist{display:flex;flex-direction:column;gap:20px}
.curriculumbreakdown .moduleitem{background:#f9fafb;border-radius:8px;border-left:5px solid #31CEA0;overflow:hidden}
.curriculumbreakdown .moduleitem input[type="radio"]{display:none}
.curriculumbreakdown .moduleitem label{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;cursor:pointer;transition:background 180ms}
.curriculumbreakdown .moduleitem label:hover{background:#f0f2f5}
.curriculumbreakdown .moduleitem .moduletitle{display:flex;flex-direction:column;gap:6px}
.curriculumbreakdown .moduleitem .moduletitle h4{font-size:1.3rem;color:#26228A;margin:0;font-weight:600}
.curriculumbreakdown .moduleitem .moduletitle .weekinfo{font-size:.9rem;color:#777}
.curriculumbreakdown .moduleitem label i{font-size:1.4rem;color:#31CEA0;transition:transform 180ms}
.curriculumbreakdown .moduleitem input:checked + label i{transform:rotate(180deg)}
.curriculumbreakdown .moduleitem .modulecontent{max-height:0;overflow:hidden;transition:max-height 200ms}
.curriculumbreakdown .moduleitem input:checked ~ .modulecontent{max-height:500px}
.curriculumbreakdown .moduleitem .modulecontent .contentinner{padding:0 28px 28px}
.curriculumbreakdown .moduleitem .modulecontent p{font-size:1rem;line-height:1.7;color:#4a4a4a;margin:0 0 16px}
.curriculumbreakdown .moduleitem .modulecontent ul{margin:0;padding:0 0 0 20px;list-style:none}
.curriculumbreakdown .moduleitem .modulecontent ul li{position:relative;padding-left:24px;margin-bottom:10px;font-size:.95rem;color:#555;line-height:1.6}
.curriculumbreakdown .moduleitem .modulecontent ul li::before{content:'→';position:absolute;left:0;color:#31CEA0;font-weight:700}
.enrollmentcta{background:#26228A;padding:100px 20px;position:relative;overflow:hidden}
.enrollmentcta::before{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,#31cea033 0%,transparent 70%);top:-200px;left:-150px}
.enrollmentcta .enrollbox{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 480px;gap:60px;align-items:center;position:relative;z-index:2}
.enrollmentcta .textcontent h2{font-size:2.8rem;color:#fff;margin:0 0 20px;font-weight:700;line-height:1.2}
.enrollmentcta .textcontent p{font-size:1.15rem;line-height:1.7;color:#E5FCE7;margin:0 0 36px}
.enrollmentcta .textcontent .benefitlist{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:40px}
.enrollmentcta .textcontent .benefitlist .benefititem{display:flex;align-items:center;gap:12px}
.enrollmentcta .textcontent .benefitlist .benefititem i{color:#31CEA0;font-size:1.3rem}
.enrollmentcta .textcontent .benefitlist .benefititem span{color:#fff;font-size:1rem;font-weight:500}
.enrollmentcta .formwrapper{background:#fff;padding:40px 36px;border-radius:8px;box-shadow:0 16px 48px #0000004d}
.enrollmentcta .formwrapper h3{font-size:1.6rem;color:#26228A;margin:0 0 24px;font-weight:600}
.enrollmentcta .formwrapper form{display:flex;flex-direction:column;gap:20px}
.enrollmentcta .formwrapper .inputgroup{display:flex;flex-direction:column;gap:8px}
.enrollmentcta .formwrapper .inputgroup label{font-size:.9rem;color:#333;font-weight:600}
.enrollmentcta .formwrapper .inputgroup input,.enrollmentcta .formwrapper .inputgroup select{padding:14px 16px;border:2px solid #e0e0e0;border-radius:6px;font-size:1rem;transition:border 180ms}
.enrollmentcta .formwrapper .inputgroup input:focus,.enrollmentcta .formwrapper .inputgroup select:focus{outline:none;border-color:#31CEA0}
.enrollmentcta .formwrapper .submitbtn{background:linear-gradient(135deg,#31CEA0,#26228A);color:#fff;padding:16px 32px;border:none;border-radius:6px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform 150ms,box-shadow 150ms;margin-top:12px}
.enrollmentcta .formwrapper .submitbtn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #31cea066}
@media (max-width: 1024px) {
.programtitlearea{grid-template-columns:1fr;gap:40px}
.programtitlearea .imagewrapper{height:320px}
.learningpathsection .pathgrid{grid-template-columns:repeat(2,1fr)}
.curriculumbreakdown .contentbox{grid-template-columns:1fr;gap:50px}
.curriculumbreakdown .sideinfo{position:static}
.enrollmentcta .enrollbox{grid-template-columns:1fr;gap:50px}
}
@media (max-width: 640px) {
.programtitlearea .maintextbox h1{font-size:2.2rem;flex-direction:column;align-items:flex-start;gap:8px}
.programtitlearea .livecounter{font-size:2rem}
.programtitlearea .quickstatbox{flex-direction:column;gap:20px}
.learningpathsection .pathgrid{grid-template-columns:1fr}
.learningpathsection .sectionheader h2{font-size:2rem}
.enrollmentcta .textcontent h2{font-size:2rem}
.enrollmentcta .textcontent .benefitlist{grid-template-columns:1fr}
}
.blogpage{max-width:1400px;margin:0 auto;padding:0 20px}
.blogtoparea{padding:80px 0 60px;text-align:center;background:linear-gradient(135deg,#E5FCE7 0%,#fff 100%);border-radius:0 0 8px 8px;margin-bottom:60px}
.blogtoparea h1{font-size:48px;font-weight:700;color:#26228A;margin:0 0 16px;letter-spacing:-.5px}
.blogtoparea .subtext{font-size:18px;color:#555;max-width:640px;margin:0 auto;line-height:1.6}
.articlegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:32px;margin-bottom:80px}
.articlecard{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 16px #26228a14;transition:all 220ms ease;display:flex;flex-direction:column}
.articlecard:hover{transform:translateY(-6px);box-shadow:0 12px 32px #26228a24}
.articlecard .imagebox{width:100%;height:240px;overflow:hidden;background:#f5f5f5}
.articlecard .imagebox img{width:100%;height:100%;object-fit:cover;transition:transform 280ms ease}
.articlecard:hover .imagebox img{transform:scale(1.05)}
.articlecard .contentbox{padding:24px;flex-grow:1;display:flex;flex-direction:column}
.articlecard .authordate{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:14px;color:#666}
.articlecard .authordate .authorname{font-weight:600;color:#26228A}
.articlecard .authordate .dot{width:4px;height:4px;background:#31CEA0;border-radius:50%}
.articlecard h2{font-size:22px;font-weight:700;color:#222;margin:0 0 12px;line-height:1.3}
.articlecard .shorttext{font-size:15px;color:#555;line-height:1.6;margin-bottom:20px;flex-grow:1}
.articlecard .metainfo{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #e8e8e8}
.articlecard .statgroup{display:flex;gap:16px}
.articlecard .statitem{display:flex;align-items:center;gap:6px;font-size:14px;color:#777}
.articlecard .statitem .mdi{font-size:18px;color:#31CEA0}
.articlecard .readlink{font-size:14px;font-weight:600;color:#26228A;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap 180ms ease}
.articlecard .readlink:hover{gap:10px}
.articlecard .readlink .mdi{font-size:16px}
.insightssection{background:#26228A;color:#fff;padding:80px 40px;border-radius:8px;margin-bottom:80px;position:relative;overflow:hidden}
.insightssection::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,#31cea026 0%,transparent 70%);border-radius:50%}
.insightssection .contentwrap{max-width:900px;margin:0 auto;position:relative;z-index:2}
.insightssection h2{font-size:36px;font-weight:700;margin:0 0 24px;color:#fff}
.insightssection .descriptiontext{font-size:17px;line-height:1.7;color:#E5FCE7;margin-bottom:32px}
.insightssection .featurelist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.insightssection .featureitem{display:flex;gap:14px;align-items:flex-start}
.insightssection .featureitem .iconwrap{width:44px;height:44px;background:#31cea033;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.insightssection .featureitem .iconwrap .mdi{font-size:24px;color:#31CEA0}
.insightssection .featureitem .textpart h3{font-size:18px;font-weight:600;margin:0 0 6px;color:#fff}
.insightssection .featureitem .textpart p{font-size:14px;line-height:1.5;color:#E5FCE7;margin:0}
.subscribebox{background:linear-gradient(135deg,#E5FCE7 0%,#fff 50%,#E5FCE7 100%);padding:60px 40px;border-radius:8px;text-align:center;margin-bottom:80px;box-shadow:0 8px 24px #26228a0f}
.subscribebox h2{font-size:32px;font-weight:700;color:#26228A;margin:0 0 12px}
.subscribebox .subscribetext{font-size:16px;color:#555;margin:0 0 32px;max-width:560px;margin-left:auto;margin-right:auto}
.subscribebox .formgroup{display:flex;gap:12px;max-width:500px;margin:0 auto}
.subscribebox .emailinput{flex:1;padding:14px 20px;border:2px solid #26228A;border-radius:6px;font-size:15px;outline:none;transition:box-shadow 180ms ease}
.subscribebox .emailinput:focus{box-shadow:0 0 0 3px #26228a1f}
.subscribebox .submitbutton{padding:14px 32px;background:#26228A;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all 200ms ease;box-shadow:0 4px 12px #26228a33;z-index:10;position:relative}
.subscribebox .submitbutton:hover{background:#1e1b6d;box-shadow:0 6px 20px #26228a4d;transform:translateY(-2px)}
.topicsarea{margin-bottom:80px}
.topicsarea h2{font-size:32px;font-weight:700;color:#26228A;margin:0 0 40px;text-align:center;position:relative;display:inline-block;left:50%;transform:translateX(-50%)}
.topicsarea h2::after{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(90deg,#31CEA0 0%,#26228A 100%);border-radius:2px}
.topicgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.topiccard{background:#fff;padding:28px 24px;border:2px solid #E5FCE7;border-radius:8px;text-align:center;transition:all 200ms ease;cursor:pointer}
.topiccard:hover{border-color:#31CEA0;background:#E5FCE7;transform:translateY(-4px)}
.topiccard .mdi{font-size:36px;color:#26228A;margin-bottom:12px;display:block}
.topiccard .topicname{font-size:16px;font-weight:600;color:#222;margin:0 0 6px}
.topiccard .articlecount{font-size:13px;color:#777}
@media (max-width: 768px) {
.blogtoparea h1{font-size:36px}
.blogtoparea{padding:50px 20px 40px}
.articlegrid{grid-template-columns:1fr;gap:24px}
.insightssection{padding:50px 24px}
.insightssection h2{font-size:28px}
.subscribebox .formgroup{flex-direction:column}
.topicgrid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (max-width: 480px) {
.blogtoparea h1{font-size:28px}
.topicgrid{grid-template-columns:1fr}
}
.successwrap{max-width:1400px;margin:0 auto;padding:0}
.confirmationhero{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:520px;background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);position:relative;overflow:hidden}
.confirmationhero::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#26228A 0%,#31CEA0 100%)}
.herotextzone{padding:80px 60px 80px 80px;display:flex;flex-direction:column;justify-content:center;max-width:650px}
.confirmtitle{font-size:52px;font-weight:700;line-height:1.2;color:#1a1a1a;margin:0 0 24px;position:relative;display:inline-block}
.confirmtitle::after{content:'';position:absolute;bottom:-8px;left:0;width:0;height:3px;background:#31CEA0;animation:drawline 1.2s ease-out forwards;animation-delay:.3s}
@keyframes drawline {
to{width:180px}
}
.confirmicon{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;background:linear-gradient(135deg,#31CEA0 0%,#26228A 100%);border-radius:50%;margin-bottom:28px}
.confirmicon .mdi{font-size:36px;color:#fff}
.confirmtext{font-size:18px;line-height:1.6;color:#4a4a4a;margin:0 0 16px}
.confirmnexttext{font-size:16px;line-height:1.7;color:#666;margin:0 0 36px}
.actionbuttonrow{display:flex;gap:16px;flex-wrap:wrap}
.primaryreturn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:#26228A;color:#fff;text-decoration:none;font-size:16px;font-weight:600;border-radius:8px;transition:all .2s;box-shadow:0 4px 12px #26228a33}
.primaryreturn:hover{background:#1a1a66;box-shadow:0 6px 20px #26228a4d;transform:translateY(-2px)}
.primaryreturn .mdi{font-size:20px}
.secondarylink{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:transparent;color:#26228A;text-decoration:none;font-size:16px;font-weight:600;border:2px solid #26228A;border-radius:8px;transition:all .2s}
.secondarylink:hover{background:#26228A;color:#fff;transform:translateY(-2px)}
.secondarylink .mdi{font-size:20px}
.heroimagezone{position:relative;overflow:visible}
.herovisual{position:absolute;right:-120px;top:50%;transform:translateY(-50%);width:600px;height:480px;background:linear-gradient(135deg,#26228a14 0%,#31cea014 100%);border-radius:24px 0 0 24px;display:flex;align-items:center;justify-content:center}
.visualpattern{width:80%;height:80%;background-image:linear-gradient(45deg,#26228a0f 25%,transparent 25%),linear-gradient(-45deg,#26228a0f 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#31cea00f 75%),linear-gradient(-45deg,transparent 75%,#31cea00f 75%);background-size:60px 60px;background-position:0 0,0 30px,30px -30px,-30px 0;border-radius:16px;position:relative}
.visualpattern::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;background:linear-gradient(135deg,#26228A 0%,#31CEA0 100%);border-radius:50%;opacity:.12}
.detailsblock{background:#E5FCE7;padding:72px 0}
.detailsinner{max-width:1140px;margin:0 auto;padding:0 40px}
.detailsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.infocard{background:#fff;padding:36px 28px;border-radius:10px;box-shadow:0 8px 24px #0000000f;transition:all .22s;border-top:4px solid transparent}
.infocard:nth-child(1){border-top-color:#26228A}
.infocard:nth-child(2){border-top-color:#31CEA0}
.infocard:nth-child(3){border-top-color:#26228A}
.infocard:hover{transform:translateY(-6px);box-shadow:0 16px 32px #0000001a}
.cardicon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:linear-gradient(135deg,#26228a1a 0%,#31cea01a 100%);border-radius:10px;margin-bottom:20px}
.cardicon .mdi{font-size:28px;color:#26228A}
.cardheading{font-size:21px;font-weight:700;color:#1a1a1a;margin:0 0 12px;line-height:1.3}
.carddescription{font-size:15px;line-height:1.7;color:#666;margin:0}
@media (max-width: 1024px) {
.confirmationhero{grid-template-columns:1fr;min-height:auto}
.herotextzone{padding:60px 40px;max-width:100%}
.confirmtitle{font-size:42px}
.heroimagezone{display:none}
.detailsgrid{grid-template-columns:1fr;gap:24px}
.detailsblock{padding:56px 0}
}
@media (max-width: 640px) {
.herotextzone{padding:48px 24px}
.confirmtitle{font-size:36px}
.confirmicon{width:58px;height:58px}
.confirmicon .mdi{font-size:30px}
.confirmtext{font-size:16px}
.confirmnexttext{font-size:15px}
.actionbuttonrow{flex-direction:column}
.primaryreturn,.secondarylink{width:100%;justify-content:center}
.detailsinner{padding:0 24px}
.infocard{padding:28px 24px}
}