@import "https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@latest/700.css";
*{margin:0;padding:0;box-sizing:border-box}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:700}
figure,blockquote{margin:0}
body{font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:#FFF;color:#1a1a1a;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
.mainwrapper{max-width:1024px;margin:0 auto;padding:0 20px;width:100%}
header{background:#FFF;border-bottom:1px solid #E4F0F1;padding:24px 0}
.headertop{display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:90px}
.logobox{flex-shrink:0}
.logobox a{display:block;line-height:0}
.logobox img{height:85px;width:85px;object-fit:contain;display:block}
.navmainbox{flex-grow:1;display:flex;justify-content:flex-end}
.navmain{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.navmain a{color:#1a1a1a;text-decoration:none;padding:10px 16px;font-size:15px;transition:all .2s ease-in;border-radius:6px}
.navmain a:hover{background:#E4F0F1;color:#003E58}
main{flex:1}
footer{background:#fafafa;border-top:1px solid #E4F0F1;padding:48px 0 32px;margin-top:80px}
.footercontent{display:flex;flex-direction:column;align-items:center;gap:32px}
.footernav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.footernav a{color:#1a1a1a;text-decoration:none;font-size:14px;transition:color .2s ease-in}
.footernav a:hover{color:#FE7DB8}
.footerinfo{text-align:center}
.footercompany{font-size:14px;color:#666;margin-bottom:8px}
.footercopyright{font-size:13px;color:#999}
.cookiepanel{position:fixed;bottom:24px;left:24px;background:#FFF;border-radius:8px;box-shadow:0 8px 24px #003e5826;padding:24px;max-width:420px;z-index:9999;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .25s ease-in,transform .25s ease-in}
.cookiepanel.is-visible{opacity:1;transform:translateY(0);pointer-events:all}
.cookiepanel h3{font-size:18px;margin-bottom:12px;color:#003E58}
.cookiepanel p{font-size:14px;color:#666;margin-bottom:16px;line-height:1.5}
.cookieoptions{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.cookieoption{display:flex;align-items:center;gap:10px}
.cookieoption input[type="radio"]{width:18px;height:18px;cursor:pointer;accent-color:#FE7DB8}
.cookieoption label{font-size:14px;color:#333;cursor:pointer}
.cookieactions{display:flex;gap:10px}
.cookieactions button{flex:1;padding:12px 20px;border:none;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease-in;font-family:inherit}
.cookieactions .btnaccept{background:#FE7DB8;color:#FFF;box-shadow:0 4px 12px #fe7db84d}
.cookieactions .btnaccept:hover{background:#ff5fa8;transform:translateY(-1px);box-shadow:0 6px 16px #fe7db866}
.cookieactions .btndecline{background:#E4F0F1;color:#003E58}
.cookieactions .btndecline:hover{background:#d0e5e7}
.cookiemanage{position:fixed;bottom:24px;left:24px;background:#003E58;color:#FFF;width:48px;height:48px;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #003e584d;transition:all .2s ease-in;z-index:9998}
.cookiemanage:hover{background:#005a7f;transform:scale(1.05)}
.cookiemanage.is-active{display:flex}
.cookiemanage i{font-size:24px}
@media (max-width: 768px) {
.headertop{flex-direction:column;gap:20px;min-height:auto}
.navmainbox{width:100%;justify-content:center}
.navmain{justify-content:center}
.navmain a{font-size:14px;padding:8px 12px}
.cookiepanel{left:16px;right:16px;max-width:none;bottom:16px}
.cookiemanage{left:16px;bottom:16px}
.footernav{flex-direction:column;align-items:center;gap:12px}
}
.legal-area{max-width:1024px;margin:0 auto;padding:60px 24px 80px;background:#fff}
.legal-area h1{font-size:42px;font-weight:700;line-height:1.2;color:#003E58;margin:0 0 16px;letter-spacing:-.02em}
.legal-area h2{font-size:32px;font-weight:700;line-height:1.3;color:#003E58;margin:48px 0 20px;letter-spacing:-.01em}
.legal-area h3{font-size:24px;font-weight:600;line-height:1.4;color:#003E58;margin:36px 0 16px}
.legal-area h4{font-size:20px;font-weight:600;line-height:1.4;color:#003E58;margin:28px 0 14px}
.legal-area h5{font-size:18px;font-weight:600;line-height:1.5;color:#003E58;margin:24px 0 12px}
.legal-area h6{font-size:16px;font-weight:600;line-height:1.5;color:#003E58;margin:20px 0 10px}
.legal-area p{font-size:16px;line-height:1.75;color:#1a1a1a;margin:0 0 20px}
.legal-area ul{margin:0 0 24px;padding:0 0 0 28px;list-style-type:none}
.legal-area ul li{font-size:16px;line-height:1.75;color:#1a1a1a;margin:0 0 12px;padding-left:12px;position:relative}
.legal-area ul li::before{content:'';position:absolute;left:-16px;top:11px;width:6px;height:6px;background:#FE7DB8;border-radius:50%}
.legal-area ol{margin:0 0 24px;padding:0 0 0 28px;list-style-type:decimal;list-style-position:outside}
.legal-area ol li{font-size:16px;line-height:1.75;color:#1a1a1a;margin:0 0 12px;padding-left:8px}
.legal-area ol li::marker{color:#FE7DB8;font-weight:600}
.legal-area em,.legal-area i{font-style:italic;color:#2a2a2a}
.legal-area a{color:#FE7DB8;text-decoration:none;border-bottom:1px solid #fe7db84d;transition:all 180ms ease-in;cursor:pointer}
.legal-area a:hover{color:#003E58;border-bottom-color:#003E58}
.legal-area a:active{color:#FE7DB8;border-bottom-color:#FE7DB8}
.legal-area table{width:100%;border-collapse:collapse;margin:32px 0;background:#fff;box-shadow:0 2px 8px #003e5814}
.legal-area thead{background:#E4F0F1}
.legal-area thead tr{border-bottom:2px solid #003E58}
.legal-area tbody tr{border-bottom:1px solid #E4F0F1}
.legal-area tbody tr:last-child{border-bottom:none}
.legal-area tbody tr:hover{background:#e4f0f14d}
.legal-area th{font-size:15px;font-weight:600;line-height:1.5;color:#003E58;text-align:left;padding:16px 20px}
.legal-area td{font-size:15px;line-height:1.6;color:#1a1a1a;padding:14px 20px}
.legal-area hr{border:none;height:2px;background:linear-gradient(to right,#FE7DB8,#E4F0F1);margin:40px 0}
@media (max-width: 768px) {
.legal-area{padding:40px 20px 60px}
.legal-area h1{font-size:32px;margin-bottom:14px}
.legal-area h2{font-size:26px;margin:36px 0 16px}
.legal-area h3{font-size:22px;margin:28px 0 14px}
.legal-area h4{font-size:19px;margin:24px 0 12px}
.legal-area h5{font-size:17px;margin:20px 0 10px}
.legal-area h6{font-size:15px;margin:18px 0 10px}
.legal-area p{font-size:15px;margin-bottom:18px}
.legal-area ul li,.legal-area ol li{font-size:15px}
.legal-area table{font-size:14px;margin:24px 0;display:block;overflow-x:auto}
.legal-area th,.legal-area td{font-size:14px;padding:12px 14px}
.legal-area hr{margin:32px 0}
}
@media (max-width: 480px) {
.legal-area{padding:32px 16px 48px}
.legal-area h1{font-size:28px}
.legal-area h2{font-size:23px}
.legal-area h3{font-size:20px}
.legal-area ul,.legal-area ol{padding-left:24px}
.legal-area th,.legal-area td{padding:10px 12px}
}
.qarseluddetailhero{background:linear-gradient(135deg,#E4F0F1 0%,#fff 100%);padding:80px 20px 60px;position:relative;overflow:hidden}
.qarseluddetailhero::before{content:'';position:absolute;top:0;right:0;width:400px;height:400px;background:radial-gradient(circle,#fe7db81a 0%,transparent 70%);border-radius:50%}
.detailcontainerwrap{max-width:1024px;margin:0 auto;position:relative}
.detailherotop{display:flex;gap:50px;align-items:flex-start;margin-bottom:40px}
.detailherocontent{flex:1}
.detailherocontent h1{font-size:42px;color:#003E58;margin:0 0 20px;line-height:1.2}
.detailmeta{display:flex;gap:30px;flex-wrap:wrap;margin:25px 0}
.detailmetatag{display:flex;align-items:center;gap:8px;padding:10px 18px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #003e5814}
.detailmetatag i{color:#FE7DB8;font-size:20px}
.detailmetatag span{font-size:15px;color:#003E58;font-weight:500}
.detailheroimg{width:420px;flex-shrink:0}
.detailheroimg img{width:100%;height:320px;object-fit:cover;border-radius:10px;box-shadow:0 8px 24px #003e5826}
.detailpricebox{background:linear-gradient(135deg,#FE7DB8 0%,#ff91c7 100%);padding:30px;border-radius:10px;color:#fff;box-shadow:0 6px 20px #fe7db84d;margin-top:30px}
.detailpricebox h3{font-size:18px;margin:0 0 10px;opacity:.95}
.detailpricevalue{font-size:48px;font-weight:700;margin:0 0 20px}
.detailcopylink{background:#fff;color:#FE7DB8;border:none;padding:14px 28px;font-size:16px;font-weight:600;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform .2s ease-in,box-shadow .2s ease-in}
.detailcopylink:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}
.detailcopylink i{font-size:18px}
.detailsectionprogram{background:#fff;padding:70px 20px}
.detailsectionprogram h2{font-size:36px;color:#003E58;margin:0 0 40px;position:relative;padding-left:20px}
.detailsectionprogram h2::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:40px;background:linear-gradient(180deg,#FE7DB8 0%,#003E58 100%);border-radius:3px}
.detailprogramcontent{background:#E4F0F1;padding:40px;border-radius:10px;border-left:5px solid #FE7DB8}
.detailprogramcontent p{font-size:16px;line-height:1.7;color:#003E58;margin:0 0 20px}
.detailprogramcontent h2{font-size:24px;color:#003E58;margin:30px 0 15px;padding-left:0}
.detailprogramcontent h2::before{display:none}
.detailprogramcontent ul{margin:20px 0;padding-left:25px}
.detailprogramcontent li{font-size:16px;line-height:1.8;color:#003E58;margin-bottom:12px;position:relative}
.detailprogramcontent li::marker{color:#FE7DB8}
.detailprogramcontent strong{color:#003E58;font-weight:600}
.detailprogramcontent em{font-style:italic;color:#003E58}
.detailprogramcontent dl{margin:20px 0}
.detailprogramcontent dt{font-size:18px;font-weight:600;color:#003E58;margin-top:20px;margin-bottom:8px}
.detailprogramcontent dd{font-size:16px;line-height:1.7;color:#003E58;margin-left:20px;margin-bottom:15px}
.detailprogramcontent blockquote{border-left:4px solid #FE7DB8;padding-left:20px;margin:25px 0;font-style:italic;color:#003E58}
.detailprogramcontent details{margin:20px 0;background:#fff;padding:20px;border-radius:8px}
.detailprogramcontent summary{font-weight:600;color:#003E58;cursor:pointer;font-size:17px}
.detailsectiondesc{background:linear-gradient(180deg,#fff 0%,#E4F0F1 100%);padding:70px 20px}
.detailsectiondesc h2{font-size:36px;color:#003E58;margin:0 0 35px;text-align:center}
.detaildesccontent{max-width:820px;margin:0 auto;background:#fff;padding:50px;border-radius:10px;box-shadow:0 4px 16px #003e581a}
.detaildesccontent p{font-size:17px;line-height:1.8;color:#003E58;margin:0 0 20px}
.detaildesccontent h2{font-size:26px;color:#003E58;margin:35px 0 18px;text-align:left}
.detaildesccontent ul{margin:20px 0;padding-left:25px}
.detaildesccontent li{font-size:17px;line-height:1.8;color:#003E58;margin-bottom:12px}
.detaildesccontent li::marker{color:#FE7DB8}
.detaildesccontent strong{color:#003E58;font-weight:600}
.detaildesccontent abbr{text-decoration:none;border-bottom:2px dotted #FE7DB8;cursor:help}
.detaildesccontent dl{margin:25px 0}
.detaildesccontent dt{font-size:18px;font-weight:600;color:#003E58;margin-top:20px;margin-bottom:8px}
.detaildesccontent dd{font-size:17px;line-height:1.8;color:#003E58;margin-left:20px;margin-bottom:15px}
.detaildesccontent blockquote{border-left:5px solid #FE7DB8;padding-left:25px;margin:30px 0;font-style:italic;color:#003E58;font-size:18px}
.detailctasection{background:#003E58;padding:60px 20px}
.detailctacontent{text-align:center}
.detailctacontent h2{font-size:32px;color:#fff;margin:0 0 15px}
.detailctacontent p{font-size:18px;color:#E4F0F1;margin:0 0 35px}
.detailctabtn{background:#FE7DB8;color:#fff;text-decoration:none;padding:16px 40px;font-size:18px;font-weight:600;border-radius:8px;display:inline-flex;align-items:center;gap:12px;transition:transform .2s ease-in,box-shadow .2s ease-in;cursor:pointer}
.detailctabtn:hover{transform:scale(1.05);box-shadow:0 8px 24px #fe7db866}
.detailctabtn i{font-size:20px}
@media (max-width: 768px) {
.detailherotop{flex-direction:column;gap:30px}
.detailheroimg{width:100%}
.detailheroimg img{height:250px}
.qarseluddetailhero{padding:50px 20px 40px}
.detailherocontent h1{font-size:32px}
.detailmeta{gap:15px}
.detailpricebox{padding:25px}
.detailpricevalue{font-size:38px}
.detailsectionprogram h2,.detailsectiondesc h2{font-size:28px}
.detailprogramcontent{padding:25px}
.detaildesccontent{padding:30px 25px}
.detailctacontent h2{font-size:26px}
.detailctacontent p{font-size:16px}
}
.qarselud-hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;margin-bottom:80px}
.qarselud-hero .hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.qarselud-hero .hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(0.3) contrast(1.1);mix-blend-mode:multiply}
.qarselud-hero .hero-bg::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#fe7db8d9 0%,#003e58e6 100%);z-index:2}
.qarselud-hero .abstract-shape1{position:absolute;width:280px;height:280px;background:#e4f0f126;border-radius:50%;top:-80px;right:10%;z-index:3;animation:floatShape1 8s ease-in-out infinite}
.qarselud-hero .abstract-shape2{position:absolute;width:180px;height:180px;background:#fe7db833;bottom:-40px;left:8%;z-index:3;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);animation:floatShape2 6s ease-in-out infinite}
@keyframes floatShape1 {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(20px,-30px) rotate(180deg)}
}
@keyframes floatShape2 {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(-25px,20px) rotate(90deg)}
}
.qarselud-hero .hero-content-wrapper{position:relative;z-index:4;max-width:1024px;margin:0 auto;padding:0 24px;width:100%}
.qarselud-hero h1.maintitle{font-size:52px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:18px}
.qarselud-hero h1.maintitle .highlight-word{position:relative;display:inline-block}
.qarselud-hero h1.maintitle .highlight-word::after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:8px;background:#e4f0f199;z-index:-1}
.qarselud-hero .hero-subtitle{font-size:19px;color:#fffffff2;line-height:1.6;max-width:640px}
.solutions-wrapper{max-width:1024px;margin:0 auto 90px;padding:0 24px}
.solutions-wrapper h2.section-h{font-size:38px;font-weight:700;color:#003E58;margin-bottom:16px;position:relative;padding-left:28px}
.solutions-wrapper h2.section-h::before{content:'';position:absolute;left:0;top:8px;width:6px;height:28px;background:linear-gradient(180deg,#FE7DB8 0%,#003E58 100%)}
.solutions-wrapper .section-intro{font-size:17px;line-height:1.7;color:#2a2a2a;margin-bottom:48px;max-width:720px}
.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.solution-card{background:#fff;border:2px solid #E4F0F1;padding:32px 26px;transition:all 250ms ease-in;position:relative}
.solution-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px #fe7db82e;border-color:#FE7DB8}
.solution-card .card-icon{width:56px;height:56px;background:linear-gradient(135deg,#FE7DB8 0%,#003E58 100%);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.solution-card .card-icon i{font-size:28px;color:#fff}
.solution-card h3{font-size:22px;font-weight:600;color:#003E58;margin-bottom:12px}
.solution-card p{font-size:15px;line-height:1.6;color:#444}
.connections-section{background:linear-gradient(135deg,#E4F0F1 0%,#fff 100%);padding:70px 24px;margin-bottom:90px}
.connections-inner{max-width:1024px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.connections-text h2{font-size:36px;font-weight:700;color:#003E58;margin-bottom:20px}
.connections-text p{font-size:16px;line-height:1.7;color:#333;margin-bottom:16px}
.connections-visual{position:relative}
.connections-visual img{width:100%;height:380px;object-fit:cover;box-shadow:0 8px 20px #003e5826}
.connections-visual::before{content:'';position:absolute;top:-16px;left:-16px;width:100%;height:100%;border:3px solid #FE7DB8;z-index:-1}
.resources-wrapper{max-width:1024px;margin:0 auto 90px;padding:0 24px}
.resources-wrapper h2{font-size:38px;font-weight:700;color:#003E58;margin-bottom:14px;text-align:center}
.resources-wrapper .intro-text{font-size:17px;line-height:1.7;color:#2a2a2a;text-align:center;margin-bottom:52px;max-width:680px;margin-left:auto;margin-right:auto}
.resource-tabs-container{display:flex;flex-direction:column}
.resource-tabs-container input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.tabs-nav{display:flex;gap:12px;margin-bottom:36px;justify-content:center}
.tabs-nav label{padding:14px 28px;background:#fff;border:2px solid #E4F0F1;color:#003E58;font-size:16px;font-weight:600;cursor:pointer;transition:all 200ms ease-in}
.tabs-nav label:hover{border-color:#FE7DB8;background:#fe7db80d}
.resource-tabs-container input[type="radio"]:checked + label{background:#FE7DB8;color:#fff;border-color:#FE7DB8}
.tab-panels{position:relative}
.tab-panel{display:none;animation:fadeIn 400ms ease-in}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
.resource-tabs-container input[type="radio"]:nth-of-type(1):checked ~ .tab-panels .tab-panel:nth-of-type(1),.resource-tabs-container input[type="radio"]:nth-of-type(2):checked ~ .tab-panels .tab-panel:nth-of-type(2),.resource-tabs-container input[type="radio"]:nth-of-type(3):checked ~ .tab-panels .tab-panel:nth-of-type(3){display:block}
.tab-panel-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.tab-panel-text h3{font-size:28px;font-weight:600;color:#003E58;margin-bottom:16px}
.tab-panel-text p{font-size:16px;line-height:1.7;color:#333;margin-bottom:14px}
.tab-panel-text ul{list-style:none;padding:0;margin:0}
.tab-panel-text ul li{font-size:15px;color:#444;padding-left:28px;margin-bottom:10px;position:relative}
.tab-panel-text ul li::before{content:'';position:absolute;left:0;top:8px;width:12px;height:12px;background:#FE7DB8;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.tab-panel-image img{width:100%;height:320px;object-fit:cover;box-shadow:0 6px 18px #003e581f}
.experience-section{background:#003E58;padding:70px 24px;margin-bottom:90px;position:relative;overflow:hidden}
.experience-section::before{content:'';position:absolute;top:0;right:0;width:400px;height:400px;background:radial-gradient(circle,#fe7db826 0%,transparent 70%);pointer-events:none}
.experience-inner{max-width:1024px;margin:0 auto}
.experience-inner h2{font-size:38px;font-weight:700;color:#fff;margin-bottom:44px;text-align:center}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.testimonial-card{background:#e4f0f11a;border:2px solid #e4f0f133;padding:28px;transition:all 200ms ease-in}
.testimonial-card:hover{background:#e4f0f126;border-color:#fe7db866}
.testimonial-card .quote-text{font-size:16px;line-height:1.7;color:#E4F0F1;margin-bottom:20px;font-style:italic}
.testimonial-card .author-info{display:flex;align-items:center;gap:14px}
.testimonial-card .author-info .author-avatar{width:48px;height:48px;background:linear-gradient(135deg,#FE7DB8 0%,#E4F0F1 100%);display:flex;align-items:center;justify-content:center;font-weight:700;color:#003E58;font-size:20px}
.testimonial-card .author-details h4{font-size:17px;font-weight:600;color:#fff;margin-bottom:4px}
.testimonial-card .author-details p{font-size:14px;color:#e4f0f1cc}
.learning-path-wrapper{max-width:1024px;margin:0 auto 90px;padding:0 24px}
.learning-path-wrapper h2{font-size:38px;font-weight:700;color:#003E58;margin-bottom:14px}
.learning-path-wrapper .section-description{font-size:17px;line-height:1.7;color:#2a2a2a;margin-bottom:48px}
.path-timeline{position:relative;padding-left:60px}
.path-timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#FE7DB8 0%,#003E58 100%)}
.path-step{position:relative;margin-bottom:40px;padding:24px;background:#fff;border:2px solid #E4F0F1;transition:all 200ms ease-in}
.path-step:hover{border-color:#FE7DB8;box-shadow:0 6px 16px #fe7db826}
.path-step::before{content:'';position:absolute;left:-54px;top:26px;width:20px;height:20px;background:#FE7DB8;border:4px solid #fff;box-shadow:0 0 0 2px #FE7DB8;z-index:2}
.path-step h3{font-size:24px;font-weight:600;color:#003E58;margin-bottom:10px}
.path-step p{font-size:15px;line-height:1.6;color:#444}
.interaction-formats-section{background:linear-gradient(135deg,#fff 0%,#E4F0F1 100%);padding:70px 24px;margin-bottom:90px}
.interaction-inner{max-width:1024px;margin:0 auto}
.interaction-inner h2{font-size:38px;font-weight:700;color:#003E58;margin-bottom:16px;text-align:center}
.interaction-inner .subtitle{font-size:17px;line-height:1.7;color:#2a2a2a;text-align:center;margin-bottom:52px;max-width:720px;margin-left:auto;margin-right:auto}
.formats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.format-item{background:#fff;border:2px solid #E4F0F1;padding:28px 20px;text-align:center;transition:all 200ms ease-in}
.format-item:hover{transform:scale(1.05);border-color:#FE7DB8;box-shadow:0 8px 20px #fe7db833}
.format-item .format-icon{width:64px;height:64px;background:linear-gradient(135deg,#FE7DB8 0%,#003E58 100%);margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.format-item .format-icon i{font-size:32px;color:#fff}
.format-item h3{font-size:18px;font-weight:600;color:#003E58;margin-bottom:10px}
.format-item p{font-size:14px;line-height:1.5;color:#555}
.cta-final-wrapper{max-width:1024px;margin:0 auto 90px;padding:0 24px}
.cta-final-box{background:linear-gradient(135deg,#003E58 0%,#FE7DB8 100%);padding:60px 48px;text-align:center;position:relative;overflow:hidden}
.cta-final-box::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:#e4f0f11a;border-radius:50%}
.cta-final-box h2{font-size:36px;font-weight:700;color:#fff;margin-bottom:16px;position:relative;z-index:2}
.cta-final-box p{font-size:18px;line-height:1.6;color:#fffffff2;margin-bottom:32px;position:relative;z-index:2}
.cta-final-box .cta-button{display:inline-block;padding:16px 40px;background:#fff;color:#003E58;font-size:17px;font-weight:600;text-decoration:none;transition:all 200ms ease-in;position:relative;z-index:2}
.cta-final-box .cta-button:hover{background:#E4F0F1;transform:translateY(-3px);box-shadow:0 8px 16px #0003}
@media (max-width: 768px) {
.qarselud-hero{min-height:400px}
.qarselud-hero h1.maintitle{font-size:36px}
.qarselud-hero .hero-subtitle{font-size:16px}
.solutions-grid{grid-template-columns:1fr;gap:24px}
.connections-inner{grid-template-columns:1fr;gap:32px}
.connections-visual img{height:280px}
.tabs-nav{flex-direction:column}
.tab-panel-content{grid-template-columns:1fr}
.testimonial-grid{grid-template-columns:1fr}
.formats-grid{grid-template-columns:repeat(2,1fr)}
.cta-final-box{padding:40px 24px}
.cta-final-box h2{font-size:28px}
}
.aboutpage-hero{position:relative;min-height:460px;overflow:hidden;display:flex;align-items:center;background:linear-gradient(135deg,#E4F0F1 0%,#E4F0F1 45%,#FE7DB8 45%,#FE7DB8 100%);margin-bottom:80px}
.aboutpage-hero .contentwrap8{max-width:1024px;width:100%;margin:0 auto;padding:60px 20px;position:relative;z-index:2}
.aboutpage-hero .titlesection9 h1{font-size:52px;line-height:1.1;color:#003E58;margin:0 0 20px;animation:fadeinup-text .8s ease-out forwards;opacity:0}
.aboutpage-hero .subtextline{font-size:20px;line-height:1.5;color:#003E58;max-width:580px;animation:fadeinup-text 1s ease-out .2s forwards;opacity:0}
.aboutpage-hero .decorlayer3{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 70% 30%,#fe7db826,transparent 60%);animation:slowpulse-opacity 6s ease-in-out infinite;z-index:1}
.aboutpage-hero .heroimage-wrapper{position:absolute;right:80px;top:50%;transform:translateY(-50%);width:380px;height:380px;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #003e5833;z-index:3}
.aboutpage-hero .heroimage-wrapper img{width:100%;height:100%;object-fit:cover;animation:blurtosharp 1.2s ease-out forwards}
@keyframes fadeinup-text {
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes slowpulse-opacity {
0%,100%{opacity:.3}
50%{opacity:.7}
}
@keyframes blurtosharp {
0%{filter:blur(12px);opacity:.5}
100%{filter:blur(0);opacity:1}
}
.approachsection11{padding:0 20px 80px}
.approachsection11 .limitcontainer{max-width:1024px;margin:0 auto}
.approachsection11 .sectionhead12{margin-bottom:60px}
.approachsection11 .sectionhead12 h2{font-size:38px;line-height:1.2;color:#003E58;margin:0 0 16px;position:relative;display:inline-block}
.approachsection11 .sectionhead12 h2::after{content:'';position:absolute;bottom:-8px;left:0;width:60px;height:4px;background:linear-gradient(90deg,#FE7DB8,#003E58)}
.approachsection11 .methodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.approachsection11 .methodcard{background:#fff;padding:36px 28px;border-radius:8px;border:2px solid #E4F0F1;transition:all .2s ease-in;position:relative}
.approachsection11 .methodcard:hover{transform:translateY(-4px);box-shadow:0 12px 28px #fe7db826;border-color:#FE7DB8}
.approachsection11 .methodcard .cardicon{width:56px;height:56px;background:linear-gradient(135deg,#FE7DB8,#E4F0F1);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.approachsection11 .methodcard .cardicon i{font-size:28px;color:#003E58}
.approachsection11 .methodcard h3{font-size:22px;line-height:1.3;color:#003E58;margin:0 0 12px}
.approachsection11 .methodcard p{font-size:16px;line-height:1.6;color:#003E58;margin:0}
.valuessection14{padding:80px 20px;background:linear-gradient(180deg,#fff 0%,#E4F0F1 100%);position:relative}
.valuessection14::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FE7DB8,#003E58,#FE7DB8)}
.valuessection14 .limitcontainer{max-width:1024px;margin:0 auto}
.valuessection14 .splitlayout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.valuessection14 .imageside{position:relative}
.valuessection14 .imageside img{width:100%;height:460px;object-fit:cover;border-radius:8px;box-shadow:0 8px 32px #003e5833}
.valuessection14 .contentside h2{font-size:36px;line-height:1.2;color:#003E58;margin:0 0 24px}
.valuessection14 .principlelist{display:flex;flex-direction:column;gap:24px}
.valuessection14 .principleitem{display:flex;gap:16px;align-items:flex-start}
.valuessection14 .principleitem .itembadge{min-width:42px;height:42px;background:#FE7DB8;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:600}
.valuessection14 .principleitem .itemcontent h3{font-size:20px;line-height:1.3;color:#003E58;margin:0 0 8px}
.valuessection14 .principleitem .itemcontent p{font-size:16px;line-height:1.6;color:#003E58;margin:0}
.expertsection15{padding:80px 20px}
.expertsection15 .limitcontainer{max-width:1024px;margin:0 auto}
.expertsection15 .sectionintro{text-align:center;margin-bottom:60px}
.expertsection15 .sectionintro h2{font-size:40px;line-height:1.2;color:#003E58;margin:0 0 16px}
.expertsection15 .sectionintro p{font-size:18px;line-height:1.6;color:#003E58;max-width:720px;margin:0 auto}
.expertsection15 .experttrack{display:flex;gap:40px;align-items:center}
.expertsection15 .trackimage{flex:1;position:relative}
.expertsection15 .trackimage img{width:100%;height:520px;object-fit:cover;border-radius:8px;box-shadow:0 12px 40px #fe7db833}
.expertsection15 .trackcontent{flex:1}
.expertsection15 .trackcontent .statsrow{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:32px}
.expertsection15 .statbox{background:#fff;padding:24px;border-radius:8px;border-left:4px solid #FE7DB8;box-shadow:0 4px 16px #003e5814}
.expertsection15 .statbox .statvalue{font-size:32px;font-weight:700;color:#FE7DB8;margin:0 0 8px;display:block}
.expertsection15 .statbox .statlabel{font-size:16px;line-height:1.4;color:#003E58;margin:0}
.expertsection15 .trackcontent .contenttext{font-size:17px;line-height:1.7;color:#003E58;margin:0 0 24px}
.expertsection15 .trackcontent .actionlink18{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,#FE7DB8,#003E58);color:#fff;text-decoration:none;border-radius:6px;font-size:16px;font-weight:500;transition:all .2s ease-in;box-shadow:0 4px 12px #fe7db84d}
.expertsection15 .trackcontent .actionlink18:hover{transform:scale(1.05);box-shadow:0 6px 20px #fe7db866}
.expertsection15 .trackcontent .actionlink18 i{font-size:20px}
@media (max-width: 768px) {
.aboutpage-hero{min-height:auto;background:#E4F0F1}
.aboutpage-hero .heroimage-wrapper{position:static;transform:none;width:100%;height:280px;margin-top:30px}
.aboutpage-hero .titlesection9 h1{font-size:36px}
.aboutpage-hero .subtextline{font-size:18px}
.approachsection11 .methodgrid{grid-template-columns:1fr;gap:20px}
.valuessection14 .splitlayout{grid-template-columns:1fr;gap:40px}
.valuessection14 .imageside img{height:320px}
.expertsection15 .experttrack{flex-direction:column;gap:30px}
.expertsection15 .trackimage img{height:360px}
.expertsection15 .trackcontent .statsrow{grid-template-columns:1fr}
}
@media (min-width: 769px) and (max-width: 1024px) {
.aboutpage-hero .heroimage-wrapper{width:320px;height:320px;right:40px}
.aboutpage-hero .titlesection9 h1{font-size:44px}
.approachsection11 .methodgrid{grid-template-columns:repeat(2,1fr)}
.valuessection14 .splitlayout{gap:40px}
}
.qarselud-contact-page .contact-intro-section{background:linear-gradient(135deg,#E4F0F1 0%,#fff 100%);padding:80px 20px;position:relative;overflow:hidden}
.qarselud-contact-page .contact-intro-section::before{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,#fe7db826 0%,transparent 70%);border-radius:50%;top:-100px;right:-100px;filter:blur(60px);animation:blobmove1 8s ease-in-out infinite}
.qarselud-contact-page .contact-intro-section::after{content:'';position:absolute;width:350px;height:350px;background:radial-gradient(circle,#003e581f 0%,transparent 70%);border-radius:50%;bottom:-80px;left:-80px;filter:blur(70px);animation:blobmove2 10s ease-in-out infinite}
@keyframes blobmove1 {
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-30px,30px) scale(1.1)}
}
@keyframes blobmove2 {
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(40px,-40px) scale(1.15)}
}
.qarselud-contact-page .intro-wrapper{max-width:1024px;margin:0 auto;position:relative;z-index:2}
.qarselud-contact-page .intro-title{font-size:52px;font-weight:700;color:#003E58;margin:0 0 32px;line-height:1.2}
.qarselud-contact-page .intro-link-box{display:inline-block}
.qarselud-contact-page .intro-action-link{display:inline-flex;align-items:center;gap:10px;color:#FE7DB8;text-decoration:none;font-size:18px;font-weight:600;transition:all .2s ease-in}
.qarselud-contact-page .intro-action-link:hover{gap:16px;color:#003E58}
.qarselud-contact-page .intro-action-link .mdi{font-size:22px}
.qarselud-contact-page .contact-methods-block{background:#fff;padding:90px 20px}
.qarselud-contact-page .methods-container{max-width:1024px;margin:0 auto}
.qarselud-contact-page .methods-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.qarselud-contact-page .method-card{background:linear-gradient(145deg,#E4F0F1 0%,#fff 100%);padding:36px 28px;border-left:4px solid #FE7DB8;transition:all .22s ease-in}
.qarselud-contact-page .method-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #fe7db82e}
.qarselud-contact-page .method-icon{font-size:42px;color:#003E58;margin-bottom:18px}
.qarselud-contact-page .method-label{font-size:14px;text-transform:uppercase;letter-spacing:1.2px;color:#FE7DB8;font-weight:600;margin:0 0 10px}
.qarselud-contact-page .method-value{font-size:20px;color:#003E58;font-weight:600;margin:0;word-break:break-word}
.qarselud-contact-page .method-value a{color:#003E58;text-decoration:none;transition:color .18s ease-in}
.qarselud-contact-page .method-value a:hover{color:#FE7DB8}
.qarselud-contact-page .form-section{background:linear-gradient(180deg,#fff 0%,#E4F0F1 100%);padding:90px 20px 110px}
.qarselud-contact-page .form-container{max-width:720px;margin:0 auto}
.qarselud-contact-page .form-header-text{font-size:38px;font-weight:700;color:#003E58;margin:0 0 48px;text-align:center}
.qarselud-contact-page .contact-form-layout{background:#fff;padding:48px 42px;box-shadow:0 4px 16px #003e5814}
.qarselud-contact-page .form-row{margin-bottom:28px}
.qarselud-contact-page .form-label{display:block;font-size:14px;font-weight:600;color:#003E58;margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px}
.qarselud-contact-page .form-input{width:100%;padding:14px 16px;border:2px solid #E4F0F1;font-size:16px;color:#003E58;background:#fff;transition:all .2s ease-in;box-sizing:border-box}
.qarselud-contact-page .form-input:focus{outline:none;border-color:#FE7DB8;box-shadow:0 0 0 3px #fe7db81a}
.qarselud-contact-page .form-input::placeholder{color:#a0a0a0}
.qarselud-contact-page .time-preference-wrapper{margin-bottom:28px}
.qarselud-contact-page .time-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.qarselud-contact-page .time-radio-input{display:none}
.qarselud-contact-page .time-radio-label{display:block;padding:14px 12px;text-align:center;background:#E4F0F1;color:#003E58;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease-in;border:2px solid transparent}
.qarselud-contact-page .time-radio-label:hover{background:#FE7DB8;color:#fff}
.qarselud-contact-page .time-radio-input:checked + .time-radio-label{background:#003E58;color:#fff;border-color:#FE7DB8}
.qarselud-contact-page .privacy-row{margin-bottom:32px;display:flex;align-items:flex-start;gap:12px}
.qarselud-contact-page .privacy-checkbox{margin-top:4px;width:18px;height:18px;cursor:pointer;accent-color:#FE7DB8}
.qarselud-contact-page .privacy-text{font-size:14px;color:#003E58;line-height:1.6}
.qarselud-contact-page .privacy-text a{color:#FE7DB8;text-decoration:none;font-weight:600;transition:color .18s ease-in}
.qarselud-contact-page .privacy-text a:hover{color:#003E58}
.qarselud-contact-page .submit-button{width:100%;padding:16px 32px;background:linear-gradient(135deg,#FE7DB8 0%,#003E58 100%);color:#fff;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;border:none;cursor:pointer;transition:all .22s ease-in;position:relative;z-index:1}
.qarselud-contact-page .submit-button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #fe7db859}
.qarselud-contact-page .submit-button:active{transform:translateY(0)}
@media (max-width: 768px) {
.qarselud-contact-page .contact-intro-section{padding:60px 20px}
.qarselud-contact-page .intro-title{font-size:36px;margin-bottom:24px}
.qarselud-contact-page .contact-methods-block{padding:60px 20px}
.qarselud-contact-page .methods-grid{grid-template-columns:1fr;gap:24px}
.qarselud-contact-page .form-section{padding:60px 20px 80px}
.qarselud-contact-page .form-header-text{font-size:30px;margin-bottom:32px}
.qarselud-contact-page .contact-form-layout{padding:32px 24px}
.qarselud-contact-page .time-options{grid-template-columns:1fr}
}
@media (min-width: 769px) and (max-width: 1024px) {
.qarselud-contact-page .intro-title{font-size:44px}
.qarselud-contact-page .methods-grid{grid-template-columns:repeat(2,1fr)}
}
.learningprogramwrapper{max-width:1024px;margin:0 auto;padding:0 20px}
.programherobanner{background:linear-gradient(135deg,#E4F0F1 0%,#fff 100%);padding:80px 20px 60px;margin-bottom:60px;position:relative;overflow:hidden}
.programherobanner::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,#fe7db81a 0%,transparent 70%);border-radius:50%}
.herocontent{max-width:1024px;margin:0 auto;position:relative;z-index:1}
.herocontent h1{font-size:42px;color:#003E58;margin:0 0 20px;font-weight:700}
.herocontent .herodescription{font-size:18px;color:#333;line-height:1.6;max-width:650px}
.programgridarea{padding:0 0 80px}
.programgridarea .sectionlabel{font-size:32px;color:#003E58;margin:0 0 50px;text-align:center;font-weight:700}
.coursesgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;margin-bottom:80px}
.coursecarditem{background:#fff;border:2px solid #E4F0F1;position:relative;overflow:hidden;transition:all .2s ease-in;cursor:pointer}
.coursecarditem:hover{transform:translateY(-4px);box-shadow:0 8px 24px #fe7db826;border-color:#FE7DB8}
.coursecarditem .cardimage{width:100%;height:200px;overflow:hidden;background:#E4F0F1}
.coursecarditem .cardimage img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-in}
.coursecarditem:hover .cardimage img{transform:scale(1.05)}
.coursecarditem .cardbody{padding:24px}
.coursecarditem .usertag{display:inline-block;background:#FE7DB8;color:#fff;padding:4px 12px;font-size:12px;font-weight:600;text-transform:uppercase;margin-bottom:12px;letter-spacing:.5px}
.coursecarditem .coursetitle{font-size:22px;color:#003E58;margin:0 0 12px;font-weight:700;line-height:1.3}
.coursecarditem .coursedesc{font-size:15px;color:#555;line-height:1.5;margin:0 0 20px}
.coursecarditem .cardfooter{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #E4F0F1}
.coursecarditem .pricetag{font-size:24px;color:#003E58;font-weight:700}
.coursecarditem .courselink{background:#003E58;color:#fff;padding:10px 24px;text-decoration:none;font-weight:600;font-size:14px;transition:all .15s ease-in;display:inline-flex;align-items:center;gap:6px;position:relative;z-index:2}
.coursecarditem .courselink:hover{background:#FE7DB8;box-shadow:0 4px 12px #fe7db84d}
.benefitsblock{background:linear-gradient(to right,#fff 0%,#E4F0F1 100%);padding:60px 20px;margin-bottom:80px}
.benefitsblock .benefitswrapper{max-width:1024px;margin:0 auto}
.benefitsblock h2{font-size:36px;color:#003E58;margin:0 0 40px;text-align:center;font-weight:700}
.benefitsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.benefititem{background:#fff;padding:28px;border-left:4px solid #FE7DB8;transition:all .2s ease-in}
.benefititem:hover{transform:translateX(4px);box-shadow:0 6px 16px #003e581a}
.benefititem .benefiticon{font-size:32px;color:#FE7DB8;margin-bottom:12px}
.benefititem h3{font-size:20px;color:#003E58;margin:0 0 10px;font-weight:700}
.benefititem p{font-size:15px;color:#555;line-height:1.5;margin:0}
.comparisonblock{padding:0 20px 80px}
.comparisonblock .comparisonwrapper{max-width:1024px;margin:0 auto}
.comparisonblock h2{font-size:36px;color:#003E58;margin:0 0 40px;text-align:center;font-weight:700}
.comparisoncontainer{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:#fff;border:2px solid #E4F0F1;overflow:hidden}
.comparisonside{padding:40px}
.comparisonside.leftside{background:#E4F0F1;border-right:2px solid #fff}
.comparisonside h3{font-size:24px;color:#003E58;margin:0 0 24px;font-weight:700;display:flex;align-items:center;gap:10px}
.comparisonside h3::before{content:'';width:4px;height:24px;background:#FE7DB8}
.comparisonlist{list-style:none;padding:0;margin:0}
.comparisonlist li{font-size:16px;color:#333;padding:12px 0;border-bottom:1px solid #003e581a;display:flex;align-items:flex-start;gap:12px;line-height:1.5}
.comparisonlist li:last-child{border-bottom:none}
.comparisonlist li::before{content:'→';color:#FE7DB8;font-weight:700;flex-shrink:0}
.processarea{background:#003E58;padding:60px 20px;position:relative;overflow:hidden}
.processarea::after{content:'';position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,#fe7db826 0%,transparent 60%);border-radius:50%}
.processarea .processwrapper{max-width:1024px;margin:0 auto;position:relative;z-index:1}
.processarea h2{font-size:36px;color:#fff;margin:0 0 50px;text-align:center;font-weight:700}
.stepsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.stepitem{background:#e4f0f11a;padding:30px 24px;border:2px solid #fe7db84d;position:relative;transition:all .2s ease-in}
.stepitem:hover{background:#fe7db81a;border-color:#FE7DB8}
.stepitem .stepnumber{position:absolute;top:-16px;left:24px;background:#FE7DB8;color:#fff;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.stepitem h3{font-size:20px;color:#fff;margin:0 0 12px;font-weight:700}
.stepitem p{font-size:15px;color:#E4F0F1;line-height:1.5;margin:0}
@media (max-width: 768px) {
.programherobanner{padding:50px 20px 40px}
.herocontent h1{font-size:32px}
.herocontent .herodescription{font-size:16px}
.coursesgrid{grid-template-columns:1fr;gap:24px}
.benefitsgrid{grid-template-columns:1fr}
.comparisoncontainer{grid-template-columns:1fr}
.comparisonside.leftside{border-right:none;border-bottom:2px solid #fff}
.stepsgrid{grid-template-columns:1fr}
.programgridarea .sectionlabel{font-size:28px}
.benefitsblock h2,.comparisonblock h2,.processarea h2{font-size:28px}
}
@media (max-width: 480px) {
.herocontent h1{font-size:28px}
.coursecarditem .coursetitle{font-size:20px}
.coursecarditem .cardfooter{flex-direction:column;align-items:flex-start;gap:12px}
}
.qarselud-faq-page .faq-title-section{position:relative;overflow:hidden;background:#fff;padding:80px 20px 60px;margin-bottom:0}
.qarselud-faq-page .faq-title-container{max-width:1024px;margin:0 auto;position:relative;z-index:2}
.qarselud-faq-page .faq-title-image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.qarselud-faq-page .faq-title-image-wrapper img{width:100%;height:100%;object-fit:cover;clip-path:circle(0% at 50% 50%);animation:imageReveal 1.8s ease-out .3s forwards}
@keyframes imageReveal {
to{clip-path:circle(100% at 50% 50%)}
}
.qarselud-faq-page .faq-overlay-animated{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#fe7db8e0 0%,#003e58eb 100%);animation:overlayShift 8s ease-in-out infinite alternate;z-index:1}
@keyframes overlayShift {
0%{background:linear-gradient(135deg,#fe7db8e0 0%,#003e58eb 100%)}
100%{background:linear-gradient(225deg,#003e58e6 0%,#fe7db8db 100%)}
}
.qarselud-faq-page .faq-pulse-decoration{position:absolute;top:50%;left:50%;width:300px;height:300px;margin-left:-150px;margin-top:-150px;border:2px solid #e4f0f166;border-radius:50%;animation:pulseExpand 3s ease-out infinite;z-index:1}
@keyframes pulseExpand {
0%{transform:scale(0.5);opacity:.8}
100%{transform:scale(2.5);opacity:0}
}
.qarselud-faq-page .faq-main-heading{font-size:52px;font-weight:700;line-height:1.15;color:#fff;margin:0;position:relative;z-index:2}
.qarselud-faq-page .faq-main-heading br{display:block}
.qarselud-faq-page .faq-questions-wrapper{background:#fff;padding:70px 20px}
.qarselud-faq-page .faq-questions-inner{max-width:1024px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.qarselud-faq-page .faq-category-block{background:linear-gradient(145deg,#E4F0F1 0%,#fff 100%);padding:36px 32px;border-radius:8px;box-shadow:0 4px 12px #003e5814}
.qarselud-faq-page .faq-category-title{font-size:26px;font-weight:600;color:#003E58;margin:0 0 28px;padding-bottom:16px;border-bottom:3px solid #FE7DB8}
.qarselud-faq-page .faq-item-toggle{display:none}
.qarselud-faq-page .faq-item-wrapper{margin-bottom:18px;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px #003e580f;transition:all .2s ease-in}
.qarselud-faq-page .faq-item-wrapper:hover{box-shadow:0 6px 14px #fe7db826;transform:translateY(-2px)}
.qarselud-faq-page .faq-question-label{display:block;padding:20px 24px;font-size:17px;font-weight:600;color:#003E58;cursor:pointer;position:relative;transition:color .2s ease-in}
.qarselud-faq-page .faq-question-label::after{content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:28px;color:#FE7DB8;transition:transform .2s ease-in}
.qarselud-faq-page .faq-item-toggle:checked + .faq-question-label{color:#FE7DB8}
.qarselud-faq-page .faq-item-toggle:checked + .faq-question-label::after{transform:translateY(-50%) rotate(45deg)}
.qarselud-faq-page .faq-answer-content{max-height:0;overflow:hidden;transition:max-height .3s ease-in}
.qarselud-faq-page .faq-item-toggle:checked ~ .faq-answer-content{max-height:500px}
.qarselud-faq-page .faq-answer-text{padding:0 24px 20px;font-size:15px;line-height:1.65;color:#2a2a2a}
.qarselud-faq-page .faq-contact-section{background:linear-gradient(180deg,#003E58 0%,#00536f 100%);padding:80px 20px}
.qarselud-faq-page .faq-contact-container{max-width:1024px;margin:0 auto;display:flex;flex-direction:row;align-items:center;gap:60px}
.qarselud-faq-page .faq-contact-text-block{flex:1}
.qarselud-faq-page .faq-contact-heading{font-size:38px;font-weight:700;color:#fff;margin:0 0 20px;line-height:1.2}
.qarselud-faq-page .faq-contact-description{font-size:16px;line-height:1.7;color:#E4F0F1;margin:0 0 32px}
.qarselud-faq-page .faq-contact-info-list{list-style:none;padding:0;margin:0}
.qarselud-faq-page .faq-contact-info-item{display:flex;align-items:center;gap:16px;margin-bottom:18px;font-size:15px;color:#fff}
.qarselud-faq-page .faq-contact-info-item .mdi{font-size:24px;color:#FE7DB8}
.qarselud-faq-page .faq-contact-form-block{flex:1;background:#fff;padding:40px 36px;border-radius:10px;box-shadow:0 8px 24px #00000026}
.qarselud-faq-page .faq-form-title{font-size:24px;font-weight:600;color:#003E58;margin:0 0 24px}
.qarselud-faq-page .faq-form-group{margin-bottom:20px}
.qarselud-faq-page .faq-form-label{display:block;font-size:14px;font-weight:600;color:#003E58;margin-bottom:8px}
.qarselud-faq-page .faq-form-input,.qarselud-faq-page .faq-form-textarea{width:100%;padding:14px 16px;font-size:15px;border:2px solid #E4F0F1;border-radius:6px;transition:border-color .2s ease-in;background:#fff;color:#2a2a2a}
.qarselud-faq-page .faq-form-input:focus,.qarselud-faq-page .faq-form-textarea:focus{outline:none;border-color:#FE7DB8}
.qarselud-faq-page .faq-form-textarea{resize:vertical;min-height:120px}
.qarselud-faq-page .faq-form-submit{width:100%;padding:16px 32px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,#FE7DB8 0%,#003E58 100%);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease-in;box-shadow:0 4px 12px #fe7db84d;z-index:10;position:relative}
.qarselud-faq-page .faq-form-submit:hover{transform:scale(1.03);box-shadow:0 6px 16px #fe7db866}
.qarselud-faq-page .faq-form-submit:active{transform:scale(0.98)}
@media (max-width: 768px) {
.qarselud-faq-page .faq-title-section{padding:60px 20px 40px}
.qarselud-faq-page .faq-main-heading{font-size:36px}
.qarselud-faq-page .faq-questions-inner{grid-template-columns:1fr;gap:30px}
.qarselud-faq-page .faq-contact-container{flex-direction:column;gap:40px}
.qarselud-faq-page .faq-contact-heading{font-size:30px}
.qarselud-faq-page .faq-category-block{padding:28px 24px}
.qarselud-faq-page .faq-question-label{font-size:16px;padding:18px 20px;padding-right:50px}
.qarselud-faq-page .faq-question-label::after{right:20px}
}
.qarseludSuccessContainer{max-width:1024px;margin:0 auto;padding:0 20px}
.successMainWrapper{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:60px 0}
.confirmationBlockInner{display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:start;position:relative;background:linear-gradient(135deg,#E4F0F1 0%,#fff 100%);padding:56px;box-shadow:0 8px 24px #003e5814}
.statusImageSection{position:relative;z-index:2}
.statusVisualElement{width:180px;height:240px;background:linear-gradient(180deg,#FE7DB8 0%,#003E58 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;animation:gentleFloat 6s ease-in-out infinite}
@keyframes gentleFloat {
0%,100%{transform:translateY(0px)}
50%{transform:translateY(-12px)}
}
.statusVisualElement::before{content:'';position:absolute;width:140%;height:140%;background:radial-gradient(circle,#fff3 0%,transparent 70%);animation:pulseGlow 3s ease-in-out infinite}
@keyframes pulseGlow {
0%,100%{opacity:.3;transform:scale(1)}
50%{opacity:.6;transform:scale(1.1)}
}
.statusCheckmark{width:80px;height:80px;position:relative;z-index:2}
.statusCheckmark svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px #003e584d)}
.statusCheckmark svg path{stroke-dasharray:200;stroke-dashoffset:200;animation:drawCheck 1.2s ease-out forwards}
@keyframes drawCheck {
to{stroke-dashoffset:0}
}
.messageContentArea{position:relative;z-index:2}
.messageContentArea::before{content:'✓';position:absolute;font-size:280px;color:#003e5808;top:-80px;right:-40px;font-weight:700;line-height:1;z-index:1;pointer-events:none}
.successMainHeading{font-size:42px;font-weight:700;color:#003E58;margin:0 0 24px;line-height:1.2;position:relative;z-index:2}
.successMainHeading .headingLineOne{display:block}
.successMainHeading .headingLineTwo{display:block;color:#FE7DB8;margin-top:8px}
.confirmationTextBlock{font-size:17px;line-height:1.7;color:#2d3748;margin:0 0 32px;position:relative;z-index:2}
.confirmationTextBlock .textEmphasis{color:#003E58;font-weight:600}
.actionButtonsRow{display:flex;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
.primaryActionBtn{background:linear-gradient(135deg,#FE7DB8 0%,#003E58 100%);color:#fff;padding:16px 36px;text-decoration:none;font-size:16px;font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:all 200ms ease-in;box-shadow:0 6px 16px #fe7db84d;cursor:pointer;border:none}
.primaryActionBtn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 24px #fe7db866}
.primaryActionBtn:active{transform:translateY(-1px)}
.secondaryActionBtn{background:#fff;color:#003E58;padding:16px 36px;text-decoration:none;font-size:16px;font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:all 200ms ease-in;border:2px solid #003E58;cursor:pointer}
.secondaryActionBtn:hover{background:#003E58;color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #003e5833}
.secondaryActionBtn:active{transform:translateY(0)}
.btnIconArrow{width:18px;height:18px;transition:transform 200ms ease-in}
.primaryActionBtn:hover .btnIconArrow,.secondaryActionBtn:hover .btnIconArrow{transform:translateX(4px)}
@media (max-width: 968px) {
.confirmationBlockInner{grid-template-columns:140px 1fr;gap:32px;padding:40px}
.statusVisualElement{width:140px;height:200px}
.statusCheckmark{width:64px;height:64px}
.successMainHeading{font-size:36px}
.messageContentArea::before{font-size:220px;top:-60px;right:-20px}
}
@media (max-width: 768px) {
.confirmationBlockInner{grid-template-columns:1fr;gap:40px;padding:32px 24px}
.statusImageSection{display:flex;justify-content:center}
.statusVisualElement{width:160px;height:160px}
.statusCheckmark{width:72px;height:72px}
.successMainHeading{font-size:32px;text-align:center}
.confirmationTextBlock{font-size:16px;text-align:center}
.messageContentArea::before{font-size:180px;top:-40px;right:50%;transform:translateX(50%)}
.actionButtonsRow{justify-content:center}
.primaryActionBtn,.secondaryActionBtn{width:100%;justify-content:center}
}
@media (max-width: 480px) {
.successMainWrapper{padding:40px 0}
.confirmationBlockInner{padding:24px 16px}
.successMainHeading{font-size:28px}
.confirmationTextBlock{font-size:15px}
.primaryActionBtn,.secondaryActionBtn{padding:14px 28px;font-size:15px}
}