@import "https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap";
*,::before,::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Lora',serif;line-height:1.6;color:#2c3e50;background:linear-gradient(135deg,#fefefe 0%,#f8f9fa 100%);min-height:100vh;display:flex;flex-direction:column}
.topheader{background:linear-gradient(145deg,#D54638 0%,#a83529 100%);padding:28px 0;border-bottom:3px solid #00243b1a}
.topheader .headcontainer{max-width:1320px;margin:0 auto;padding:0 20px;text-align:center}
.topheader .companyname{font-size:42px;font-weight:700;color:#fff;letter-spacing:1px;text-shadow:2px 4px 12px #00000026;margin-bottom:8px}
.topheader .taglinewrap{font-size:16px;color:#FDF159;font-weight:400;letter-spacing:.5px}
.bottomheader{background:linear-gradient(180deg,#00243B 0%,#003556 100%);padding:18px 0;box-shadow:0 4px 16px #00000014}
.bottomheader .headcontainer{max-width:1320px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.bottomheader .logowrap{flex-shrink:0}
.bottomheader .logowrap img{height:85px;width:85px;display:block;border-radius:12px;background:#fffffff2;padding:8px;box-shadow:0 6px 20px #fdf15933}
.bottomheader .navcontainer{flex-grow:1;display:flex;justify-content:flex-end}
.bottomheader .navlinks{display:flex;gap:12px;list-style:none;align-items:center;flex-wrap:wrap}
.bottomheader .navlinks a{color:#fff;text-decoration:none;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:400;background:#fdf15914;transition:all .3s ease;border:1px solid #fdf15926}
.bottomheader .navlinks a:hover{background:#fdf1592e;box-shadow:0 4px 16px #fdf15940;border-color:#fdf15959}
main{flex:1}
.footerwrap{background:linear-gradient(165deg,#00243B 0%,#001a2d 100%);color:#e8eef3;padding:48px 0 32px;margin-top:80px;border-top:4px solid #D54638}
.footerwrap .footcontainer{max-width:1320px;margin:0 auto;padding:0 20px}
.footerwrap .footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footerwrap .aboutsection h3{color:#FDF159;font-size:22px;margin-bottom:16px;font-weight:700}
.footerwrap .aboutsection p{line-height:1.8;color:#c5d3e0;margin-bottom:20px}
.footerwrap .contactdetails{display:flex;flex-direction:column;gap:12px}
.footerwrap .contactdetails .contactitem{display:flex;align-items:flex-start;gap:10px;color:#c5d3e0}
.footerwrap .contactdetails .contactitem i{color:#D54638;margin-top:4px;font-size:18px}
.footerwrap .linksection h3{color:#FDF159;font-size:20px;margin-bottom:18px;font-weight:700}
.footerwrap .linksection ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footerwrap .linksection ul a{color:#c5d3e0;text-decoration:none;transition:all .3s ease;display:inline-block;padding:4px 0}
.footerwrap .linksection ul a:hover{color:#FDF159;padding-left:6px}
.footerwrap .copyrightbar{text-align:center;padding-top:32px;border-top:1px solid #fdf15926;color:#8da3b5;font-size:14px}
.cookiepopup{position:fixed;bottom:24px;right:24px;background:#fff;border-radius:16px;box-shadow:0 12px 40px #00243b40;max-width:420px;padding:28px;z-index:10000;border:2px solid #00243B;display:none}
.cookiepopup.showing{display:block;animation:foldunfold .5s ease}
@keyframes foldunfold {
0%{transform:scale(0.7) rotateX(-15deg);opacity:0}
100%{transform:scale(1) rotateX(0deg);opacity:1}
}
.cookiepopup .tabheaders{display:flex;gap:8px;margin-bottom:20px;border-bottom:2px solid #f0f0f0}
.cookiepopup .tabheaders button{background:none;border:none;padding:10px 18px;cursor:pointer;font-family:'Lora',serif;font-size:14px;color:#5a6c7d;border-bottom:3px solid transparent;transition:all .3s ease}
.cookiepopup .tabheaders button.activetab{color:#D54638;border-bottom-color:#D54638;font-weight:700}
.cookiepopup .tabcontent{display:none}
.cookiepopup .tabcontent.activetab{display:block}
.cookiepopup h3{color:#00243B;font-size:20px;margin-bottom:12px;font-weight:700}
.cookiepopup p{color:#4a5568;font-size:14px;line-height:1.6;margin-bottom:16px}
.cookiepopup .detailedinfo{font-size:13px;line-height:1.7;color:#5a6c7d}
.cookiepopup .detailedinfo strong{color:#00243B;display:block;margin-top:12px;margin-bottom:4px}
.cookiepopup .buttonswrap{display:flex;gap:10px;margin-top:20px}
.cookiepopup .buttonswrap button{flex:1;padding:12px 20px;border:none;border-radius:50px;font-family:'Lora',serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease}
.cookiepopup .acceptbt{background:linear-gradient(135deg,#D54638 0%,#a83529 100%);color:#fff}
.cookiepopup .acceptbt:hover{box-shadow:0 6px 20px #d5463859;transform:translateY(-2px)}
.cookiepopup .declinebt{background:#e8eef3;color:#00243B}
.cookiepopup .declinebt:hover{background:#d1dce6}
@media (max-width: 992px) {
.topheader .companyname{font-size:34px}
.bottomheader .headcontainer{flex-direction:column;gap:20px;text-align:center}
.bottomheader .navcontainer{justify-content:center}
.bottomheader .navlinks{justify-content:center}
.footerwrap .footgrid{grid-template-columns:1fr;gap:32px}
}
@media (max-width: 768px) {
.topheader .companyname{font-size:28px}
.topheader .taglinewrap{font-size:14px}
.bottomheader .navlinks{flex-direction:column;width:100%}
.bottomheader .navlinks a{width:100%;text-align:center}
.cookiepopup{right:12px;left:12px;bottom:12px;max-width:none}
.cookiepopup .buttonswrap{flex-direction:column}
}
.policy-box{max-width:1320px;margin:0 auto;padding:80px 20px;background:linear-gradient(to bottom,#fff,#f8f9fa)}
.policy-box p{font-size:16px;line-height:1.8;color:#00243B;margin-bottom:24px;text-align:justify}
.policy-box p:last-child{margin-bottom:0}
.policy-box ul,.policy-box ol{margin:24px 0;padding-left:40px;color:#00243B}
.policy-box ul{list-style-type:disc}
.policy-box ol{list-style-type:decimal}
.policy-box li{font-size:16px;line-height:1.8;margin-bottom:12px;padding-left:8px}
.policy-box li:last-child{margin-bottom:0}
.policy-box ul ul,.policy-box ol ol,.policy-box ul ol,.policy-box ol ul{margin-top:12px;margin-bottom:12px}
.policy-box strong,.policy-box b{font-weight:700;color:#D54638}
.policy-box em,.policy-box i{font-style:italic;color:#00243B}
.policy-box a{color:#D54638;text-decoration:none;border-bottom:1px solid #d546384d;transition:all .3s ease}
.policy-box a:hover{color:#00243B;border-bottom-color:#00243B;opacity:.85;box-shadow:0 2px 8px #d5463826}
.policy-box a:focus{outline:2px solid #D54638;outline-offset:2px;border-radius:2px}
.policy-box hr{border:none;height:2px;background:linear-gradient(to right,#d546381a,#00243b4d,#d546381a);margin:48px 0;border-radius:2px}
.policy-box div{margin-bottom:32px}
.policy-box div:last-child{margin-bottom:0}
@media (max-width: 768px) {
.policy-box{padding:48px 16px}
.policy-box p,.policy-box li{font-size:15px;line-height:1.7;text-align:left}
.policy-box ul,.policy-box ol{padding-left:28px}
.policy-box hr{margin:32px 0}
}
@media (max-width: 480px) {
.policy-box{padding:32px 12px}
.policy-box p,.policy-box li{font-size:14px;line-height:1.6}
.policy-box ul,.policy-box ol{padding-left:24px;margin:20px 0}
.policy-box li{margin-bottom:10px}
.policy-box hr{margin:24px 0}
}
.aboutpg{max-width:1320px;margin:0 auto;padding:0 20px}
.herowrapper{position:relative;padding:120px 0 80px;overflow:hidden}
.herowrapper::before{content:'';position:absolute;top:-50%;left:-10%;width:40%;height:200%;background:radial-gradient(ellipse,#d5463814,transparent 70%);z-index:1}
.herowrapper::after{content:'';position:absolute;bottom:-30%;right:-5%;width:35%;height:150%;background:radial-gradient(circle,#00243b0f,transparent 65%);z-index:1}
.herocontainer{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:920px;margin:0 auto}
.herotitle{font-size:3.2rem;font-weight:700;color:#00243B;margin:0 0 24px;line-height:1.15;letter-spacing:-.02em}
.herotitle::before{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,#D54638,#FDF159);margin:0 auto 32px;border-radius:8px}
.herobreak{display:block;margin-top:12px}
.heroimg{width:100%;max-width:680px;height:420px;margin:48px 0 0;border-radius:12px;object-fit:cover;box-shadow:0 16px 48px #00243b1f;filter:blur(0);transition:filter .4s ease}
.heroimg:hover{filter:blur(1px)}
.herodecor{position:absolute;width:8px;height:8px;background:#FDF159;border-radius:50%;opacity:.4}
.herodecor:nth-child(1){top:15%;left:8%;animation:pulse1 3s infinite}
.herodecor:nth-child(2){top:25%;right:12%;animation:pulse2 3.5s infinite}
.herodecor:nth-child(3){bottom:20%;left:15%;animation:pulse1 4s infinite}
.herodecor:nth-child(4){bottom:35%;right:18%;animation:pulse2 3.2s infinite}
@keyframes pulse1 {
0%,100%{transform:scale(1);opacity:.4}
50%{transform:scale(1.5);opacity:.7}
}
@keyframes pulse2 {
0%,100%{transform:scale(1);opacity:.3}
50%{transform:scale(1.8);opacity:.6}
}
.storycontainer{padding:100px 0;background:linear-gradient(165deg,#FAFAFA 0%,#F5F5F5 100%)}
.storyinner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.storytxt{padding:20px 0}
.storytitle{font-size:2.6rem;font-weight:700;color:#00243B;margin:0 0 28px;line-height:1.2}
.storytitle::after{content:'';display:block;width:80px;height:3px;background:#D54638;margin-top:16px;border-radius:8px}
.storypara{font-size:1.05rem;color:#3a3a3a;line-height:1.7;margin:0 0 20px}
.storypara:last-child{margin-bottom:0}
.storyimgwrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.storyimg{width:100%;height:280px;object-fit:cover;border-radius:10px;box-shadow:0 8px 24px #00243b1a;transition:transform .3s ease,box-shadow .3s ease}
.storyimg:hover{transform:translateY(-4px);box-shadow:0 12px 32px #00243b26}
.storyimgwrap::before{content:'';position:absolute;top:-10px;right:-10px;width:120px;height:120px;background:radial-gradient(circle,#fdf1594d,transparent);border-radius:50%;z-index:-1}
.teamwrapper{padding:100px 0;background:#FFF}
.teamheader{text-align:center;margin-bottom:70px}
.teamtitle{font-size:2.8rem;font-weight:700;color:#00243B;margin:0 0 20px;position:relative;display:inline-block}
.teamtitle::before{content:'';position:absolute;top:-12px;left:-20px;width:40px;height:40px;border:3px solid #D54638;border-radius:50%;opacity:.3}
.teamdesc{font-size:1.1rem;color:#555;line-height:1.6;max-width:680px;margin:0 auto}
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.teammember{background:#FAFAFA;padding:36px 28px;border-radius:12px;border-left:4px solid transparent;transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.teammember:hover{border-color:#D54638;transform:translateX(6px);box-shadow:0 12px 28px #d546381f}
.membername{font-size:1.4rem;font-weight:700;color:#00243B;margin:0 0 8px}
.memberrole{font-size:.95rem;font-weight:600;color:#D54638;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}
.memberdesc{font-size:1rem;color:#4a4a4a;line-height:1.65;margin:0}
.valuessection{padding:100px 0;background:linear-gradient(135deg,#00243b08 0%,#d5463805 100%);position:relative}
.valuessection::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,#00243b0a 1px,transparent 1px);background-size:40px 40px;opacity:.3;z-index:1}
.valuesinner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.valueshead{text-align:center;margin-bottom:60px}
.valuestitle{font-size:2.7rem;font-weight:700;color:#00243B;margin:0 0 18px}
.valuestitle::after{content:'';display:inline-block;width:50px;height:3px;background:#FDF159;margin-left:16px;vertical-align:middle;border-radius:8px}
.valuesintro{font-size:1.08rem;color:#555;line-height:1.7;max-width:720px;margin:0}
.valueslist{display:flex;flex-direction:column;gap:32px;max-width:900px;width:100%}
.valueitem{display:flex;gap:28px;padding:32px;background:#FFF;border-radius:12px;box-shadow:0 6px 20px #00243b14;transition:box-shadow .3s ease,transform .3s ease}
.valueitem:hover{box-shadow:0 10px 32px #00243b24;transform:translateY(-3px)}
.valueicon{flex-shrink:0;width:56px;height:56px;background:linear-gradient(135deg,#D54638,#00243B);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:1.6rem;font-weight:700}
.valuecontent{flex-grow:1}
.valueheading{font-size:1.5rem;font-weight:700;color:#00243B;margin:0 0 12px}
.valuetext{font-size:1.02rem;color:#4a4a4a;line-height:1.7;margin:0}
.galleryband{padding:80px 0;background:#F9F9F9}
.galleryflow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.galleryitem{width:100%;height:320px;object-fit:cover;border-radius:10px;box-shadow:0 8px 22px #00243b1a;transition:transform .3s ease,box-shadow .3s ease}
.galleryitem:hover{transform:scale(1.03);box-shadow:0 12px 32px #00243b29}
@media(max-width:1024px) {
.herotitle{font-size:2.6rem}
.heroimg{height:340px}
.storyinner{grid-template-columns:1fr;gap:50px}
.storyimgwrap{max-width:600px;margin:0 auto}
.teamgrid{grid-template-columns:repeat(2,1fr);gap:32px}
.galleryflow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px) {
.herowrapper{padding:80px 0 60px}
.herotitle{font-size:2.2rem;margin-bottom:20px}
.heroimg{height:280px;margin-top:36px}
.storycontainer{padding:70px 0}
.storytitle{font-size:2.2rem}
.storypara{font-size:1rem}
.storyimgwrap{grid-template-columns:1fr;max-width:100%}
.storyimg{height:240px}
.teamwrapper{padding:70px 0}
.teamtitle{font-size:2.3rem}
.teamgrid{grid-template-columns:1fr;gap:28px}
.valuessection{padding:70px 0}
.valuestitle{font-size:2.3rem}
.valueslist{gap:24px}
.valueitem{flex-direction:column;gap:20px;padding:28px 24px}
.valueicon{width:48px;height:48px;font-size:1.4rem}
.galleryband{padding:60px 0}
.galleryflow{grid-template-columns:1fr;gap:20px}
.galleryitem{height:260px}
}
@media(max-width:480px) {
.aboutpg{padding:0 16px}
.herotitle{font-size:1.9rem}
.herobreak{margin-top:8px}
.heroimg{height:220px}
.storytitle{font-size:1.9rem}
.teamtitle{font-size:2rem}
.valuestitle{font-size:2rem}
.valueheading{font-size:1.3rem}
}
.titlehero{max-width:1320px;margin:60px auto;padding:0 20px;display:flex;align-items:center;gap:80px}
.titlehero .txtwrap{flex:1}
.titlehero .headline{font-size:3.2rem;line-height:1.2;color:#00243B;font-weight:700;margin:0}
.titlehero .headline::before{content:'';display:block;width:60px;height:5px;background:linear-gradient(90deg,#D54638,#FDF159);margin-bottom:24px;border-radius:8px}
.titlehero .imgcontainer{flex:1;position:relative}
.titlehero .imgcontainer::before{content:'';position:absolute;top:-20px;left:-20px;right:20px;bottom:20px;background:linear-gradient(135deg,#d5463826,#fdf15926);border-radius:16px;z-index:1}
.titlehero .imgshape{position:relative;clip-path:polygon(0 0,100% 0,100% 85%,85% 100%,0 100%);border-radius:16px;overflow:hidden;z-index:2}
.titlehero .imgshape img{width:100%;height:480px;object-fit:cover;display:block}
.titlehero .imgshape::after{content:'';position:absolute;bottom:0;left:0;right:0;height:140px;background:linear-gradient(to top,#00243bb3,transparent);z-index:3}
.workshopcontent{max-width:1320px;margin:100px auto;padding:0 20px}
.workshopcontent .layoutgrid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.workshopcontent .infosection{background:linear-gradient(145deg,#fff,#f8f9fa);padding:50px;border-radius:16px;box-shadow:0 8px 24px #00243b14}
.workshopcontent .infosection .sectiontitle{font-size:2rem;color:#D54638;font-weight:600;margin:0 0 28px;position:relative;padding-left:24px}
.workshopcontent .infosection .sectiontitle::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:70%;background:linear-gradient(180deg,#D54638,#FDF159);border-radius:8px}
.workshopcontent .infosection .textblock{font-size:1.05rem;line-height:1.7;color:#333;margin:0 0 20px}
.workshopcontent .infosection .textblock:last-child{margin-bottom:0}
.workshopcontent .structuregrid{display:grid;grid-template-columns:1fr;gap:24px}
.workshopcontent .phasecard{background:#fff;padding:32px;border-radius:12px;border-left:4px solid #D54638;box-shadow:0 4px 16px #00243b0f;transition:all .3s ease}
.workshopcontent .phasecard:hover{transform:translateX(8px);box-shadow:0 8px 24px #d5463826;border-left-width:6px}
.workshopcontent .phasecard .phasetitle{font-size:1.4rem;color:#00243B;font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:12px}
.workshopcontent .phasecard .phasenumber{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,#D54638,#FDF159);color:#00243B;font-weight:700;border-radius:50%;font-size:1rem}
.workshopcontent .phasecard .phasedesc{font-size:1rem;line-height:1.6;color:#555;margin:0}
.workshopcontent .phasecard .skilllist{list-style:none;padding:0;margin:16px 0 0}
.workshopcontent .phasecard .skilllist li{padding:8px 0 8px 28px;position:relative;font-size:.95rem;color:#444}
.workshopcontent .phasecard .skilllist li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;background:#FDF159;border-radius:4px;border:2px solid #D54638}
.workshopcontent .visualblock{position:relative;background:linear-gradient(135deg,#00243b0d,#d546380d);padding:40px;border-radius:16px;overflow:hidden}
.workshopcontent .visualblock::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,#fdf1594d,transparent);border-radius:50%}
.workshopcontent .visualblock .imgwrapper{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 12px 32px #00243b1f}
.workshopcontent .visualblock .imgwrapper img{width:100%;height:400px;object-fit:cover;display:block}
.workshopcontent .featureset{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.workshopcontent .featurebox{background:#fff;padding:24px;border-radius:10px;box-shadow:0 4px 12px #00243b14;transition:all .3s ease}
.workshopcontent .featurebox:hover{transform:translateY(-4px);box-shadow:0 8px 20px #d546381f}
.workshopcontent .featurebox .featureicon{width:44px;height:44px;background:linear-gradient(135deg,#D54638,#FDF159);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.workshopcontent .featurebox .featureicon svg{width:24px;height:24px;fill:#00243B}
.workshopcontent .featurebox .featurename{font-size:1.1rem;color:#00243B;font-weight:600;margin:0 0 8px}
.workshopcontent .featurebox .featuretext{font-size:.9rem;color:#666;margin:0;line-height:1.5}
@media (max-width: 968px) {
.titlehero{flex-direction:column;gap:50px;margin:40px auto}
.titlehero .headline{font-size:2.4rem}
.titlehero .imgshape img{height:340px}
.workshopcontent{margin:60px auto}
.workshopcontent .layoutgrid{grid-template-columns:1fr;gap:40px}
.workshopcontent .featureset{grid-template-columns:1fr}
}
@media (max-width: 640px) {
.titlehero{margin:30px auto}
.titlehero .headline{font-size:1.9rem}
.titlehero .imgshape img{height:280px}
.workshopcontent{margin:40px auto}
.workshopcontent .infosection{padding:30px 24px}
.workshopcontent .infosection .sectiontitle{font-size:1.6rem}
.workshopcontent .phasecard{padding:24px 20px}
.workshopcontent .phasecard .phasetitle{font-size:1.2rem}
.workshopcontent .visualblock{padding:24px 20px}
.workshopcontent .visualblock .imgwrapper img{height:280px}
.workshopcontent .featurebox{padding:20px}
}
.maintop{background:linear-gradient(135deg,#FDF159 0%,#fdf1591a 100%);padding:80px 20px;position:relative;overflow:hidden}
.maintop::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,#d5463826 0%,transparent 70%);animation:floatbubble 20s infinite ease-in-out}
@keyframes floatbubble {
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-50px,50px) scale(1.1)}
}
.herocontainer{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:60px;position:relative;z-index:2}
.heroleft{flex:0 0 40%}
.heroleft img{width:100%;height:auto;border-radius:12px;box-shadow:0 12px 40px #00243b33;filter:contrast(1.1) saturate(1.2)}
.heroright{flex:1}
.maintitle{font-size:3.2rem;font-weight:700;color:#00243B;margin:0 0 20px;line-height:1.2}
.mainsubtitle{font-size:1.3rem;color:#00243B;margin:0 0 35px;line-height:1.6;opacity:.85}
.cta{display:inline-block;background:linear-gradient(135deg,#D54638 0%,#00243B 100%);color:#fff;padding:16px 40px;border-radius:10px;font-size:1.1rem;font-weight:600;text-decoration:none;box-shadow:0 8px 24px #d546384d;transition:all .3s ease}
.cta:hover{transform:translateY(-3px);box-shadow:0 12px 32px #d5463866;opacity:.95}
.supportarea{padding:90px 20px;background:#fff}
.wrapcontainer{max-width:1320px;margin:0 auto}
.sectionheader{text-align:center;margin-bottom:70px}
.sectionheader h2{font-size:2.6rem;color:#00243B;margin:0 0 18px;font-weight:700}
.sectionheader p{font-size:1.15rem;color:#00243B;opacity:.7;max-width:680px;margin:0 auto;line-height:1.7}
.supportgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
.supcard{background:linear-gradient(135deg,#fdf15914 0%,#d546380d 100%);padding:40px 32px;border-radius:14px;box-shadow:0 6px 20px #00243b14;transition:all .3s ease;position:relative;overflow:hidden}
.supcard::before{content:'';position:absolute;top:0;left:0;width:4px;height:0;background:linear-gradient(180deg,#D54638 0%,#FDF159 100%);transition:height .3s ease}
.supcard:hover::before{height:100%}
.supcard:hover{transform:translateY(-8px);box-shadow:0 16px 40px #00243b26}
.supcard .iconoir{font-size:2.8rem;color:#D54638;margin-bottom:24px;display:block}
.supcard h3{font-size:1.5rem;color:#00243B;margin:0 0 16px;font-weight:600}
.supcard p{font-size:1rem;color:#00243B;opacity:.75;line-height:1.7;margin:0}
.afterzone{padding:90px 20px;background:linear-gradient(180deg,#00243b08 0%,#fdf1590f 100%)}
.splitlayout{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:70px}
.leftcontent{flex:1}
.leftcontent h2{font-size:2.4rem;color:#00243B;margin:0 0 24px;font-weight:700;line-height:1.3}
.leftcontent p{font-size:1.05rem;color:#00243B;opacity:.75;line-height:1.8;margin:0 0 18px}
.rightvisual{flex:0 0 45%}
.rightvisual img{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 36px #00243b26}
.featuredetails{display:flex;flex-direction:column;gap:22px;margin-top:30px}
.featurerow{display:flex;align-items:flex-start;gap:18px}
.featurerow .iconoir{font-size:1.8rem;color:#D54638;flex-shrink:0;margin-top:2px}
.featurerow div{flex:1}
.featurerow h4{font-size:1.2rem;color:#00243B;margin:0 0 8px;font-weight:600}
.featurerow p{font-size:.95rem;color:#00243B;opacity:.7;margin:0;line-height:1.6}
.techsection{padding:90px 20px;background:#fff}
.techcontent{max-width:1320px;margin:0 auto}
.techheader{text-align:center;margin-bottom:65px}
.techheader h2{font-size:2.5rem;color:#00243B;margin:0 0 20px;font-weight:700}
.techheader p{font-size:1.1rem;color:#00243B;opacity:.72;max-width:720px;margin:0 auto;line-height:1.7}
.techlayout{display:flex;gap:50px;align-items:flex-start}
.techimage{flex:0 0 48%}
.techimage img{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 36px #00243b1f}
.techlist{flex:1}
.techitem{background:linear-gradient(135deg,#d546380a 0%,#fdf1590f 100%);padding:28px 30px;border-radius:12px;margin-bottom:24px;box-shadow:0 4px 16px #00243b0f;transition:all .3s ease;border-left:3px solid transparent}
.techitem:hover{border-left-color:#D54638;transform:translateX(6px);box-shadow:0 8px 24px #00243b1f}
.techitem h3{font-size:1.4rem;color:#00243B;margin:0 0 14px;font-weight:600;display:flex;align-items:center;gap:12px}
.techitem h3::before{content:'';display:inline-block;width:8px;height:8px;background:#D54638;border-radius:50%}
.techitem p{font-size:1rem;color:#00243B;opacity:.75;line-height:1.7;margin:0}
@media (max-width: 1024px) {
.herocontainer{flex-direction:column;gap:40px}
.heroleft{flex:0 0 auto;width:100%;max-width:500px}
.maintitle{font-size:2.6rem}
.supportgrid{grid-template-columns:repeat(2,1fr);gap:28px}
.splitlayout{flex-direction:column;gap:50px}
.rightvisual{flex:0 0 auto;width:100%}
.techlayout{flex-direction:column;gap:40px}
.techimage{flex:0 0 auto;width:100%}
}
@media (max-width: 768px) {
.maintop{padding:60px 20px}
.maintitle{font-size:2.2rem}
.mainsubtitle{font-size:1.1rem}
.supportgrid{grid-template-columns:1fr;gap:24px}
.supportarea,.afterzone,.techsection{padding:60px 20px}
.sectionheader h2,.techheader h2{font-size:2rem}
.leftcontent h2{font-size:1.9rem}
}
@media (max-width: 480px) {
.maintitle{font-size:1.8rem}
.cta{padding:14px 32px;font-size:1rem}
.supcard{padding:32px 24px}
.sectionheader h2,.techheader h2{font-size:1.7rem}
}
.hdrwrap{position:relative;overflow:hidden;padding:90px 20px 110px;background:linear-gradient(165deg,#FDF159 0%,#fff 45%)}
.hdrwrap::before{content:'';position:absolute;top:-120px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,#d5463826,transparent 70%);filter:blur(60px);animation:floatblob 8s ease-in-out infinite}
.hdrwrap::after{content:'';position:absolute;bottom:-90px;left:-110px;width:380px;height:380px;background:radial-gradient(circle,#00243b1f,transparent 70%);filter:blur(55px);animation:floatblob 10s ease-in-out infinite reverse}
@keyframes floatblob {
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(30px,-25px) scale(1.08)}
}
.hdrcontent{max-width:1320px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:center}
.hdrtxt h1{font-size:3.2rem;line-height:1.15;color:#00243B;margin:0 0 24px;font-weight:700}
.hdrtxt p{font-size:1.15rem;line-height:1.7;color:#00243B;margin:0;opacity:.88}
.hdrimgcut{position:relative;width:380px;height:420px;clip-path:polygon(15% 0%,100% 0%,85% 100%,0% 100%);overflow:hidden;box-shadow:0 18px 48px #00243b2e;animation:imgfloat 6s ease-in-out infinite}
@keyframes imgfloat {
0%,100%{transform:translateY(0)}
50%{transform:translateY(-15px)}
}
.hdrimgcut img{width:100%;height:100%;object-fit:cover;object-position:center}
.contactsec{padding:80px 20px;background:#fff}
.contactgrid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:480px 1fr;gap:70px;align-items:start}
.contactinfo h2{font-size:2.4rem;color:#00243B;margin:0 0 16px;font-weight:700}
.contactinfo > p{font-size:1.05rem;line-height:1.7;color:#00243B;margin:0 0 45px;opacity:.82}
.infoblk{margin-bottom:38px}
.infoblk h4{font-size:.95rem;text-transform:uppercase;letter-spacing:1.2px;color:#D54638;margin:0 0 10px;font-weight:600}
.infoblk p{font-size:1.08rem;line-height:1.65;color:#00243B;margin:0}
.infoblk a{color:#D54638;text-decoration:none;transition:opacity .3s ease}
.infoblk a:hover{opacity:.75}
.frmbox{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);padding:50px;border-radius:12px;box-shadow:0 8px 32px #00243b1a}
.frmbox h3{font-size:1.9rem;color:#00243B;margin:0 0 32px;font-weight:600}
.stepfrm{display:flex;flex-direction:column;gap:0}
.frmstep{padding:28px 0;border-bottom:1px solid #00243b1f}
.frmstep:last-of-type{border-bottom:none}
.frmstep label{display:block;font-size:.92rem;font-weight:600;color:#00243B;margin-bottom:12px;text-transform:uppercase;letter-spacing:.8px}
.frmstep input[type="text"],.frmstep input[type="email"],.frmstep select{width:100%;padding:14px 18px;border:2px solid #00243b26;border-radius:8px;font-size:1.02rem;color:#00243B;background:#fff;transition:all .3s ease;box-sizing:border-box}
.frmstep input[type="text"]:focus,.frmstep input[type="email"]:focus,.frmstep select:focus{outline:none;border-color:#D54638;box-shadow:0 0 0 3px #d546381a}
.frmstep select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300243B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:45px;cursor:pointer}
.privacychk{display:flex;align-items:flex-start;gap:12px;margin:28px 0 0;padding:22px 0 0;border-top:1px solid #00243b1f}
.privacychk input[type="checkbox"]{margin-top:4px;width:20px;height:20px;cursor:pointer;flex-shrink:0}
.privacychk label{font-size:.95rem;color:#00243B;line-height:1.6;margin:0;text-transform:none;letter-spacing:normal;font-weight:400}
.privacychk a{color:#D54638;text-decoration:underline}
.privacychk a:hover{opacity:.75}
.submitwrap{margin-top:32px}
.submitbtn{display:inline-block;padding:16px 52px;background:linear-gradient(135deg,#D54638 0%,#b83b2e 100%);color:#fff;font-size:1.08rem;font-weight:600;text-decoration:none;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 24px #d546384d}
.submitbtn:hover{transform:translateY(-2px);box-shadow:0 10px 32px #d5463866}
.addinfosec{padding:90px 20px;background:linear-gradient(180deg,#00243B 0%,#003354 100%)}
.addinfocontainer{max-width:1320px;margin:0 auto}
.addinfocontainer h2{font-size:2.6rem;color:#FDF159;text-align:center;margin:0 0 60px;font-weight:700}
.hoursbox{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.hourcard{background:#ffffff14;padding:35px;border-radius:12px;border:1px solid #fdf15926;transition:all .4s ease;position:relative;overflow:hidden}
.hourcard::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#D54638,#FDF159);transform:scaleY(0);transition:transform .4s ease}
.hourcard:hover{background:#ffffff1f;border-color:#fdf1594d;transform:translateY(-4px)}
.hourcard:hover::before{transform:scaleY(1)}
.hourcard h4{font-size:1.3rem;color:#FDF159;margin:0 0 18px;font-weight:600}
.hourcard p{font-size:1.05rem;line-height:1.7;color:#ffffffd9;margin:0}
@media (max-width: 1024px) {
.hdrcontent{grid-template-columns:1fr;gap:50px}
.hdrimgcut{width:100%;max-width:420px;margin:0 auto}
.contactgrid{grid-template-columns:1fr;gap:50px}
.hoursbox{grid-template-columns:1fr;gap:30px}
}
@media (max-width: 768px) {
.hdrwrap{padding:60px 20px 80px}
.hdrtxt h1{font-size:2.4rem}
.hdrtxt p{font-size:1.05rem}
.hdrimgcut{height:360px}
.contactsec{padding:60px 20px}
.contactinfo h2{font-size:2rem}
.frmbox{padding:35px 25px}
.frmbox h3{font-size:1.6rem}
.addinfosec{padding:70px 20px}
.addinfocontainer h2{font-size:2.1rem;margin-bottom:45px}
}
@media (max-width: 480px) {
.hdrtxt h1{font-size:2rem}
.contactinfo h2{font-size:1.75rem}
.frmbox h3{font-size:1.4rem}
.submitbtn{width:100%;text-align:center}
.addinfocontainer h2{font-size:1.85rem}
.hourcard{padding:28px 22px}
}
*{box-sizing:border-box}
.successwrapper{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;background:linear-gradient(135deg,#FDF159 0%,#fff 100%);position:relative;overflow:hidden}
.successwrapper::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,#d5463814 0%,transparent 70%);animation:floatshape 20s ease-in-out infinite}
@keyframes floatshape {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(30px,30px) rotate(180deg)}
}
.contentbox{max-width:680px;width:100%;background:#fff;padding:60px 50px;border-radius:12px;box-shadow:0 16px 48px #00243b1f;position:relative;z-index:1;text-align:center}
.iconholder{width:120px;height:120px;margin:0 auto 32px;background:linear-gradient(135deg,#D54638 0%,#00243B 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:pulsering 2s ease-in-out infinite}
.iconholder::after{content:'';position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border:2px solid #d546384d;border-radius:50%;animation:ringexpand 2s ease-in-out infinite}
@keyframes pulsering {
0%,100%{transform:scale(1)}
50%{transform:scale(1.05)}
}
@keyframes ringexpand {
0%{transform:scale(1);opacity:1}
100%{transform:scale(1.2);opacity:0}
}
.iconholder i{font-size:56px;color:#FDF159}
.messagehead{font-size:42px;font-weight:700;color:#00243B;margin:0 0 20px;line-height:1.2}
.messagehead::after{content:'';display:block;width:80px;height:4px;background:linear-gradient(90deg,#D54638 0%,#FDF159 100%);margin:20px auto 0;border-radius:2px}
.messagedesc{font-size:18px;line-height:1.7;color:#4a5568;margin:0 0 32px}
.detailsblock{background:linear-gradient(135deg,#00243b08 0%,#fdf1590f 100%);padding:28px 32px;border-radius:10px;margin:0 0 36px;border-left:4px solid #D54638}
.detailrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #00243b14}
.detailrow:last-child{border-bottom:none;padding-bottom:0}
.detaillabel{font-size:15px;color:#718096;font-weight:500}
.detailvalue{font-size:16px;color:#00243B;font-weight:600}
.nextsteparea{margin:0 0 28px}
.nextsteptitle{font-size:20px;font-weight:600;color:#00243B;margin:0 0 16px}
.steplist{text-align:left;max-width:480px;margin:0 auto}
.stepitem{display:flex;align-items:flex-start;margin:0 0 14px;padding:16px;background:#fdf1591a;border-radius:8px;transition:all .3s ease}
.stepitem:hover{background:#fdf15933;transform:translateX(4px)}
.stepnum{min-width:32px;height:32px;background:linear-gradient(135deg,#D54638 0%,#00243B 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-right:14px}
.steptxt{font-size:15px;line-height:1.6;color:#4a5568;flex:1}
.actionbuttonarea{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.primarybtn{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;background:linear-gradient(135deg,#D54638 0%,#00243B 100%);color:#fff;font-size:16px;font-weight:600;border-radius:10px;text-decoration:none;transition:all .3s ease;box-shadow:0 8px 20px #d5463840}
.primarybtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px #d5463859;color:#fff;opacity:.95}
.secondarybtn{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;background:#fff;color:#00243B;font-size:16px;font-weight:600;border:2px solid #00243B;border-radius:10px;text-decoration:none;transition:all .3s ease}
.secondarybtn:hover{background:#00243B;color:#fff;transform:translateY(-2px)}
.contactinfo{margin-top:36px;padding-top:28px;border-top:2px solid #00243b14}
.contacttitle{font-size:16px;color:#718096;margin:0 0 12px}
.contactlinks{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.contactitem{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#D54638;text-decoration:none;transition:all .3s ease}
.contactitem:hover{color:#00243B;transform:scale(1.05)}
.contactitem i{font-size:18px}
@media (max-width: 768px) {
.contentbox{padding:40px 28px}
.messagehead{font-size:32px}
.iconholder{width:100px;height:100px}
.iconholder i{font-size:48px}
.detailsblock{padding:20px 24px}
.detailrow{flex-direction:column;align-items:flex-start;gap:6px}
.actionbuttonarea{flex-direction:column}
.primarybtn,.secondarybtn{width:100%;justify-content:center}
.steplist{max-width:100%}
}
@media (max-width: 480px) {
.successwrapper{padding:40px 16px}
.messagehead{font-size:28px}
.messagedesc{font-size:16px}
.contactlinks{flex-direction:column;gap:12px}
}