/* =================================================================== NOVA STELLAR TRAINING — main.css =================================================================== */ :root{ --navy:#14213D; --navy-dark:#0E1830; --green:#1B7A4D; --green-light:#7CB342; --gold:#C9A227; --white:#FFFFFF; --offwhite:#F6F8FA; --gray:#5A6472; --border:#E3E7EC; --radius:14px; --shadow:0 10px 30px rgba(20,33,61,0.08); --container:1240px; /* NEW */ --btn-hover-bg:var(--navy); --btn-hover-text:#fff; } *{box-sizing:border-box;} body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#222;line-height:1.6;background:var(--white);} img{max-width:100%;display:block;} a{color:var(--green);text-decoration:none;} h1,h2,h3,h4{font-family:'Inter',sans-serif;color:var(--navy);line-height:1.2;margin:0 0 .5em;} ul{margin:0;padding:0;list-style:none;} .nst-container{max-width:var(--container);margin:0 auto;padding:0 24px;} .nst-section{padding:70px 0;} .nst-section-title{font-size:2rem;text-align:left;} .nst-section-sub{color:var(--gray);max-width:640px;} .nst-btn{display:inline-block;padding:13px 26px;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease;} .nst-btn:hover{ background:var(--navy); color:#fff !important; border-color:var(--navy); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); } .nst-btn-primary{background:var(--green);color:#fff;} .nst-btn-gold{background:var(--gold);color:var(--navy);} .nst-btn-light{background:#fff;color:var(--navy);} .nst-btn-outline{background:transparent;border-color:var(--navy);color:var(--navy);} .nst-btn-outline-light{background:transparent;border-color:#fff;color:#fff;} .nst-btn-sm{padding:9px 18px;font-size:.85rem;} .nst-btn-full{display:block;text-align:center;width:100%;margin-top:10px;} /* ===================== STICKY HEADER (all devices) ===================== */ .nst-site-header{position:sticky;top:0;z-index:1000;width:100%;box-shadow:0 2px 10px rgba(0,0,0,.06);} .nst-topbar{background:var(--navy-dark);color:#fff;overflow:hidden;height:34px;display:flex;align-items:center;} .nst-marquee{width:100%;overflow:hidden;} .nst-marquee-track{display:flex;width:max-content;animation:nst-scroll 28s linear infinite;} .nst-marquee-track span{padding:0 40px;font-size:.78rem;letter-spacing:.03em;white-space:nowrap;} @keyframes nst-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .nst-navbar{background:#fff;} .nst-navbar-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;position:relative;} /*.nst-logo{display:flex;align-items:center;} .nst-logo-fallback{font-weight:800;color:var(--navy);font-size:1.2rem;}*/ .nst-logo{ display:flex; align-items:center; height:78px; } .nst-header-logo{ display:block; max-height:60px; width:auto; } .nst-primary-nav{flex:1;display:flex;justify-content:center;} .nst-menu{display:flex;gap:28px;} .nst-menu li a{color:var(--navy);font-weight:600;font-size:.95rem;} .nst-menu li a:hover{color:var(--green);} .nst-nav-actions{display:flex;align-items:center;gap:10px;} .nst-icon-btn{background:none;border:none;cursor:pointer;color:var(--navy);display:flex;align-items:center;justify-content:center;padding:6px;border-radius:50%;} .nst-icon-btn:hover{background:var(--offwhite);} .nst-btn-book{white-space:nowrap;} .nst-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:none;cursor:pointer;} .nst-hamburger span{ display:block; height:2.5px; width:100%; background:#1565C0; border-radius:2px; transition:.25s; }/* ========================================================= MOBILE HAMBURGER ========================================================= */ @media (max-width: 921px) { #nst-hamburger { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 32px; padding: 0; margin: 0; background: transparent !important; border: none !important; color: #1565C0 !important; cursor: pointer; } #nst-hamburger span { display: block !important; width: 100%; height: 2.5px; background: #1565C0 !important; border-radius: 2px; } } .nst-hamburger.is-active span:nth-child(1){transform:translateY(7.5px) rotate(45deg);} .nst-hamburger.is-active span:nth-child(2){opacity:0;} .nst-hamburger.is-active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);} .nst-search-bar{position:absolute;top:100%;left:0;right:0;background:#fff;padding:14px 24px;box-shadow:0 8px 16px rgba(0,0,0,.08);} .nst-search-bar form{display:flex;max-width:var(--container);margin:0 auto;gap:8px;} .nst-search-bar input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:8px;} .nst-search-bar button{padding:10px 20px;background:var(--green);color:#fff;border:none;border-radius:8px;cursor:pointer;} .nst-mobile-overlay{position:fixed;inset:0;background:var(--navy);z-index:1100;display:flex;flex-direction:column;justify-content:center;padding:40px 30px;transform:translateX(100%);transition:transform .35s ease;} .nst-mobile-overlay.is-open{transform:translateX(0);} .nst-mobile-menu{display:flex;flex-direction:column;gap:22px;} /*.nst-mobile-menu li a{color:#fff;font-size:1.4rem;font-weight:700;font-family:Georgia,serif;}*/ .nst-mobile-cta{margin-top:40px;display:flex;flex-direction:column;gap:12px;} @media (max-width: 921px) { .nst-mobile-menu li a { color: #ffffff; font-size: 1.4rem; font-weight: 600; font-family: "Poppins", sans-serif; } } /* ========================================================= MOBILE MENU CLOSE BUTTON ========================================================= */ @media (max-width: 921px) { .nst-mobile-close { position: absolute; top: 24px; right: 24px; width: 46px; height: 46px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1200; } .nst-mobile-close span { position: absolute; display: block; width: 28px; height: 3px; background: #1565C0 !important; border-radius: 3px; } .nst-mobile-close span:first-child { transform: rotate(45deg); } .nst-mobile-close span:last-child { transform: rotate(-45deg); } }/* ========================================================= MOBILE HAMBURGER — BLUE ========================================================= */ @media (max-width: 921px) { #nst-hamburger { color: #1565C0 !important; } #nst-hamburger svg { color: #1565C0 !important; stroke: #1565C0 !important; } #nst-hamburger svg path, #nst-hamburger svg line, #nst-hamburger svg polyline { stroke: #1565C0 !important; } #nst-hamburger span { background-color: #1565C0 !important; } } /* ===================== HERO ===================== */ .nst-hero{position:relative;background:linear-gradient(120deg,#7CB342,#3E8E41,#1B5E20);background-size:200% 200%;animation:nst-gradient 14s ease infinite;overflow:hidden;padding:60px 0;} @keyframes nst-gradient{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}} .nst-hero-inner{display:grid;grid-template-columns:380px 1fr;gap:50px;align-items:center;position:relative;z-index:2;} .nst-finder-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;} .nst-finder-title{background:var(--green);color:#fff;margin:0;padding:16px 20px;font-size:1.1rem;} .nst-finder-body{padding:20px;display:flex;flex-direction:column;gap:6px;} .nst-finder-body label{font-weight:600;font-size:.85rem;color:var(--navy);margin-top:8px;} .nst-finder-body select,.nst-finder-body input{padding:11px;border:1px solid var(--border);border-radius:8px;font-size:.95rem;} .nst-find-btn{margin-top:14px;width:100%;text-align:center;} .nst-hero-content{color:#fff;} .nst-eyebrow{display:block;font-size:.8rem;font-weight:700;letter-spacing:.08em;margin-bottom:10px;opacity:.9;} .nst-hero-content h1{color:#fff;font-size:2.6rem;} .nst-hero-content p{font-size:1.1rem;max-width:480px;opacity:.95;} .nst-hero-buttons{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap;} .nst-hero-blob{position:absolute;right:-100px;top:-100px;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.08);z-index:1;} /* ===================== TRUST BAR ===================== */ .nst-trustbar{padding:30px 0;background:var(--offwhite);} .nst-trust-heading{text-align:center;color:var(--gray);font-weight:600;margin-bottom:16px;} .nst-trust-logos{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;font-weight:700;color:var(--navy);opacity:.85;} /* ===================== CARDS ===================== */ .nst-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:36px;} .nst-card-grid-4col{grid-template-columns:repeat(4,1fr);} .nst-card-grid-3col{grid-template-columns:repeat(3,1fr);} .nst-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;} .nst-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(20,33,61,.12);} .nst-card-flat{box-shadow:none;} /* ========================================================= COURSE CARD IMAGE 16:9 image area — preserves the complete artwork ========================================================= */ .nst-card-img{ width:100%; aspect-ratio:16 / 9; height:auto; overflow:hidden; position:relative; background:#eaf4ef; border-radius:18px 18px 0 0; } .nst-card-img img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:#eef7f3; } /* Placeholder */ .nst-card-img-placeholder{ background: linear-gradient( 135deg, #e5f2ec, #d7ebe2 ); } /* ========================================================= CARD ========================================================= */ .nst-card{ overflow:hidden; } .nst-card-body{ position:relative; z-index:2; } .nst-card-body h3{font-size:1.15rem;margin-bottom:8px;} .nst-card-body p{color:var(--gray);font-size:.92rem;margin-bottom:14px;} .nst-card-meta{font-size:.8rem;color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:.02em;} /* ===================== FEATURES BAR ===================== */ .nst-features-bar{background:#EAF1FB;padding:34px 0;} .nst-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .nst-feature{display:flex;align-items:center;gap:12px;font-size:.92rem;} .nst-feature-icon{font-size:1.6rem;} /* ===================== CATEGORY TABS ===================== */ .nst-category-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;} .nst-tab{padding:10px 20px;border-radius:999px;background:var(--offwhite);color:var(--navy);font-weight:600;font-size:.88rem;} .nst-tab-active,.nst-tab:hover{background:var(--navy);color:#fff;} /* ===================== WHY CHOOSE US ===================== */ .nst-why-section{ background:var(--offwhite); } .nst-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); /* 4 per row */ gap:24px; margin-top:30px; text-align:center; } .nst-why-item{ background:#fff; border-radius:var(--radius); padding:28px 18px; box-shadow:var(--shadow); transition:all .3s ease; border:1px solid #eef2f6; } .nst-why-item:hover{ transform:translateY(-6px); box-shadow:0 14px 35px rgba(0,0,0,.12); } .nst-why-icon{ font-size:2.2rem; display:flex; align-items:center; justify-content:center; width:70px; height:70px; margin:0 auto 16px; border-radius:50%; background:#f2f7ff; } .nst-why-item p{ font-weight:600; font-size:.95rem; color:var(--navy); margin:0; line-height:1.5; } /* Tablet */ @media (max-width:992px){ .nst-why-grid{ grid-template-columns:repeat(2,1fr); } } /* Mobile */ @media (max-width:576px){ .nst-why-grid{ grid-template-columns:1fr; } .nst-why-item{ padding:24px 16px; } .nst-why-icon{ width:60px; height:60px; font-size:1.9rem; } } /* ===================== TESTIMONIALS ===================== */ .nst-testimonial-carousel{overflow:hidden;margin-top:30px;position:relative;} .nst-testimonial-track{display:flex;transition:transform .4s ease;} .nst-testimonial-slide{flex:0 0 100%;max-width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;text-align:center;box-shadow:var(--shadow);} .nst-stars{color:var(--gold);font-size:1.1rem;margin-bottom:10px;} .nst-quote{font-style:italic;color:var(--navy);font-size:1.05rem;max-width:600px;margin:0 auto 14px;} .nst-carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;} .nst-carousel-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--border);cursor:pointer;padding:0;} .nst-carousel-dots button.is-active{background:var(--green);} /* ===================== BLOG + CORPORATE ===================== */ .nst-corporate-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:start;} .nst-blog-card{padding:14px 0;border-bottom:1px solid var(--border);} .nst-blog-card h4{margin-bottom:4px;font-size:1rem;} .nst-blog-card p{color:var(--gray);font-size:.88rem;margin:4px 0;} .nst-readmore{font-weight:600;font-size:.85rem;} .nst-corporate-content{background:var(--navy);color:#fff;padding:40px;border-radius:var(--radius);} .nst-corporate-content h2{color:#fff;} .nst-checklist li{padding:6px 0;padding-left:26px;position:relative;} .nst-checklist li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:800;} /* ===================== CTA BANNER ===================== */ .nst-cta-banner{background:var(--navy);padding:50px 0;text-align:center;} .nst-cta-inner h2{color:#fff;font-size:1.7rem;} .nst-gold{color:var(--gold);} /* ===================== FOOTER ===================== */ .nst-site-footer{background:var(--navy-dark);color:#cfd6e4;padding:50px 0 0;} .nst-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px;} .nst-footer-brand p{font-size:.88rem;color:#aab4c6;} .nst-footer-col summary{font-weight:700;color:#fff;cursor:default;margin-bottom:14px;font-size:1rem;list-style:none;} .nst-footer-col summary::-webkit-details-marker{display:none;} .nst-footer-col ul li{padding:5px 0;} .nst-footer-col a{color:#cfd6e4;font-size:.9rem;} .nst-footer-col a:hover{color:var(--gold);} .nst-contact-list li{padding:5px 0;font-size:.9rem;} .nst-social{display:flex;gap:10px;margin-top:14px;} .nst-social a{border:1px solid #3a4560;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:.75rem;} .nst-footer-bottom{border-top:1px solid #283250;padding:18px 0;margin-top:10px;} .nst-footer-bottom-inner{display:flex;justify-content:space-between;font-size:.8rem;flex-wrap:wrap;gap:8px;} .nst-footer-bottom a{color:#cfd6e4;} /* ===================== SCROLL TO TOP ===================== */ .nst-scroll-top{position:fixed;bottom:24px;left:24px;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.2);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;z-index:999;} .nst-scroll-top.is-visible{opacity:1;transform:translateY(0);} .nst-scroll-top:hover{background:var(--green);} /* ===================== CHATBOT WIDGET ===================== */ /* ===================== CHATBOT WIDGET ===================== */ .nst-chatbot-root{ position:fixed; bottom:24px; right:24px; z-index:999999; font-family:inherit; } /* IMPORTANT - allows JS hidden attribute to work */ .nst-chatbot-panel[hidden]{ display:none !important; } /* Floating Button */ .nst-chatbot-toggle{ position:absolute; right:0; bottom:0; width:60px; height:60px; border:none; border-radius:50%; background:var(--green); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.22); transition:transform .2s ease; z-index:1002; } .nst-chatbot-toggle:hover{ transform:scale(1.08); } /* Chat Window */ .nst-chatbot-panel{ position:absolute; right:0; bottom:76px; width:340px; max-height:480px; background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; z-index:1001; } /* Header */ .nst-chatbot-header{ background:var(--navy); color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; } .nst-chatbot-title{ font-weight:700; } .nst-chatbot-header button{ background:none; border:none; color:#fff; font-size:24px; cursor:pointer; } /* Messages */ .nst-chatbot-messages{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; min-height:220px; max-height:320px; } .nst-msg{ padding:10px 14px; border-radius:14px; font-size:.88rem; line-height:1.4; max-width:85%; } .nst-msg-bot{ background:var(--offwhite); color:#222; align-self:flex-start; border-bottom-left-radius:4px; } .nst-msg-user{ background:var(--green); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; } .nst-msg-typing{ opacity:.6; font-style:italic; } /* Input */ .nst-chatbot-form{ display:flex; border-top:1px solid var(--border); } .nst-chatbot-form input{ flex:1; border:none; padding:14px; font-size:.9rem; } .nst-chatbot-form input:focus{ outline:none; } .nst-chatbot-form button{ width:54px; border:none; background:var(--green); color:#fff; cursor:pointer; font-size:1.1rem; } /* Mobile */ @media (max-width:480px){ .nst-chatbot-root{ right:16px; bottom:16px; } .nst-chatbot-panel{ width:calc(100vw - 32px); max-width:360px; } } .nst-course-location{ margin:0 0 22px; color:#fff; font-size:16px; line-height:1.6; max-width:650px; } .nst-course-location strong{ display:block; margin-bottom:4px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.75); } /* ===================== FORMS ===================== */ .nst-contact-form{display:flex;flex-direction:column;gap:14px;} .nst-form-row label { display: block; font-weight: 600; font-size: .80rem; line-height: 1.4; margin-bottom: 10px; color: var(--navy); } .nst-form-row input, .nst-form-row select, .nst-form-row textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; line-height: 1.4; font-family: inherit; box-sizing: border-box; } .nst-form-row select { min-height: 46px; padding: 10px 12px; } .nst-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .nst-hp-field{position:absolute;left:-9999px;opacity:0;} .nst-form-status{font-weight:600;} .nst-contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;} .nst-contact-info-card{background:var(--offwhite);border-radius:var(--radius);padding:30px;} .nst-contact-info-card p a{color:var(--navy);font-weight:600;} .nst-motto{margin-top:20px;font-style:italic;color:var(--green);font-weight:600;} /* ===================== SINGLE COURSE ===================== */ .nst-page-hero{background:var(--offwhite);padding:50px 0;} .nst-course-hero{background:linear-gradient(135deg,var(--navy),#1d2f55);padding:60px 0;color:#fff;} .nst-course-hero h1{color:#fff;} .nst-course-hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;} .nst-course-meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 10px; font-size:.9rem; } .nst-pill{background:var(--gold);color:var(--navy);padding:4px 12px;border-radius:999px;font-weight:700;font-size:.78rem;} .nst-course-hero-img{height:260px;border-radius:var(--radius);background-size:cover;background-position:center;} .nst-course-detail-grid{display:grid;grid-template-columns:1fr 320px;gap:50px;} .nst-syllabus-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;} .nst-syllabus-list li{padding:6px 0;padding-left:22px;position:relative;border-bottom:1px dashed var(--border);font-size:.92rem;} .nst-syllabus-list li::before{content:"•";position:absolute;left:0;color:var(--green);font-weight:800;} .nst-course-sidebar{background:var(--offwhite);border-radius:var(--radius);padding:26px;position:sticky;top:110px;} .nst-course-sidebar dl{margin:0 0 18px;} .nst-course-sidebar dt{font-size:.78rem;text-transform:uppercase;color:var(--gray);margin-top:12px;} .nst-course-sidebar dd{margin:2px 0 0;font-weight:700;color:var(--navy);} .nst-prose p{margin:0 0 1em;} .nst-policy-content h2{margin-top:1.6em;} /* ===================== SCROLL REVEAL ANIMATIONS ===================== */ .nst-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;} .nst-reveal-left{transform:translateX(-40px);} .nst-reveal-right{transform:translateX(40px);} .nst-reveal.nst-revealed{opacity:1;transform:translateY(0) translateX(0);} @media (prefers-reduced-motion: reduce){ .nst-reveal{transition:none;opacity:1;transform:none;} .nst-marquee-track,.nst-hero{animation:none;} } /* =================================================================== RESPONSIVE — MOBILE =================================================================== */ /* TABLET */ @media (max-width: 900px){ .nst-primary-nav{display:none;} .nst-hamburger{display:flex;} .nst-btn-book{display:none;} .nst-hero-inner{grid-template-columns:1fr;} .nst-finder-card{order:2;} .nst-hero-content{order:1;} /* Keep 4 course cards on desktop/tablet */ .nst-card-grid, .nst-card-grid-4col, .nst-card-grid-3col{ grid-template-columns:repeat(4,1fr); } .nst-features-grid{grid-template-columns:1fr 1fr;} .nst-why-grid{grid-template-columns:repeat(3,1fr);} .nst-corporate-grid, .nst-contact-grid, .nst-course-detail-grid, .nst-course-hero-inner{ grid-template-columns:1fr; } .nst-footer-grid{grid-template-columns:1fr;} .nst-course-sidebar{position:static;} } /* MOBILE */ @media (max-width: 767px){ .nst-card-grid, .nst-card-grid-4col, .nst-card-grid-3col{ grid-template-columns:1fr 1fr; } } /* SMALL MOBILE */ @media (max-width: 640px){ .nst-navbar-inner{height:64px;} .nst-hero{padding:30px 0;} .nst-hero-content h1{font-size:1.9rem;} .nst-card-grid, .nst-card-grid-4col, .nst-card-grid-3col{ grid-template-columns:1fr; } .nst-features-grid{grid-template-columns:1fr 1fr;} .nst-why-grid{grid-template-columns:1fr 1fr;} .nst-form-grid{grid-template-columns:1fr;} .nst-section{padding:46px 0;} .nst-chatbot-panel{width:88vw;right:0;} .nst-trust-logos{gap:18px;font-size:.85rem;} .nst-syllabus-list{grid-template-columns:1fr;} .nst-corporate-content{padding:26px;} .nst-scroll-top{left:16px;bottom:16px;width:42px;height:42px;} .nst-chatbot-root{right:16px;bottom:16px;} } /* FIX: Four course cards on one desktop row */ @media (min-width: 901px) { .nst-card-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 26px; width: 100%; } .nst-card { min-width: 0 !important; width: 100% !important; box-sizing: border-box; } .nst-card-body { min-width: 0 !important; } } /*===================================================== COURSE CATEGORY CARDS ======================================================*/ .nst-category-section{ padding:80px 0; } .nst-category-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:45px; } /*========================= RESPONSIVE =========================*/ @media(max-width:1200px){ .nst-category-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:992px){ .nst-category-grid{ grid-template-columns:repeat(2,1fr); gap:25px; } } @media(max-width:768px){ .nst-category-section{ padding:60px 0; } .nst-category-grid{ grid-template-columns:1fr; gap:20px; } .nst-category-image{ height:220px; } .nst-category-content{ padding:20px; } .nst-category-content h3{ font-size:20px; } .nst-category-btn{ padding:14px; font-size:15px; } } /*========================= COURSE CATGEGORY HOME PAGE =========================*/ /*==================================================== NOVA STELLAR - COURSE EXPLORER ====================================================*/ /*==================================================== PART 1 COURSE EXPLORER ====================================================*/ .nst-course-explorer{ padding:80px 0; background:#fff; } .nst-course-banner{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:70px; padding:65px; border-radius:30px; overflow:hidden; background:linear-gradient(135deg,#FCFEFF 0%,#EEF7FF 100%); border:1px solid #E6EEF8; box-shadow:0 20px 60px rgba(15,35,70,.08); } /* Decorative Shapes */ .nst-course-banner::before{ content:""; position:absolute; width:430px; height:430px; border-radius:50%; background:rgba(33,100,214,.05); top:-180px; right:-180px; } .nst-course-banner::after{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(35,168,106,.05); left:-100px; bottom:-100px; } /*==================================================== LEFT CONTENT ====================================================*/ .nst-banner-content{ position:relative; z-index:5; } .nst-banner-tag{ display:inline-flex; align-items:center; gap:12px; padding:10px 22px; background:#fff; border-radius:60px; color:#2164D6; font-size:13px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; box-shadow:0 12px 28px rgba(0,0,0,.08); margin-bottom:28px; } .nst-banner-tag i{ width:38px; height:38px; border-radius:50%; background:#2164D6; color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; } .nst-banner-content h2{ margin:0 0 22px; font-size:52px; font-weight:800; line-height:1.15; color:#102A43; } .nst-banner-content h2 span{ color:#2164D6; } .nst-banner-content p{ margin:0 0 35px; max-width:620px; font-size:18px; line-height:1.8; color:#667085; } /*==================================================== BUTTON ====================================================*/ .nst-view-course-btn{ display:inline-flex; align-items:center; gap:14px; padding:18px 34px; background:#23A86A; color:#fff; text-decoration:none; border-radius:60px; font-size:16px; font-weight:600; transition:.35s; box-shadow:0 16px 36px rgba(35,168,106,.25); } .nst-view-course-btn:hover{ background:#198754; color:#fff; transform:translateY(-4px); box-shadow:0 22px 44px rgba(35,168,106,.30); } .nst-view-course-btn i:last-child{ transition:.35s; } .nst-view-course-btn:hover i:last-child{ transform:translateX(6px); } /*==================================================== PART 2 RIGHT IMAGE ====================================================*/ .nst-banner-image{ position:relative; display:flex; justify-content:center; align-items:center; min-height:540px; z-index:2; } /* Main Circle */ .nst-bg-circle{ position:absolute; width:430px; height:430px; border-radius:50%; background:#EDF5FF; z-index:1; } /* Dashed Ring */ .nst-bg-circle::before{ content:""; position:absolute; inset:-18px; border:2px dashed #BCD7FF; border-radius:50%; } /* Dot Pattern */ .nst-bg-circle::after{ content:""; position:absolute; width:120px; height:120px; top:35px; right:-35px; background-image:radial-gradient(#9FC7FF 2px,transparent 2px); background-size:14px 14px; opacity:.7; } /* Laptop */ .nst-banner-image img{ position:relative; width:100%; max-width:560px; display:block; z-index:5; filter:drop-shadow(0 30px 45px rgba(0,0,0,.18)); } /*==================================================== FLOATING ICONS ====================================================*/ .nst-floating{ position:absolute; width:96px; height:96px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:#fff; box-shadow:0 20px 40px rgba(0,0,0,.10); z-index:10; } .nst-floating i{ font-size:42px; } /* Certificate */ /* Gallery */ .nst-icon-one{ left:10px; top:80px; background:#FFFFFF; color:#2164D6; animation:floatOne 5s ease-in-out infinite; } /* Contact */ .nst-icon-two{ right:18px; top:20px; background:#2164D6; color:#FFFFFF; animation:floatTwo 6s ease-in-out infinite; } /* Values */ .nst-icon-three{ right:0; bottom:55px; background:#C9A227; color:#FFFFFF; animation:floatThree 5.5s ease-in-out infinite; } /*==================================================== PLUS SYMBOLS ====================================================*/ .nst-banner-image::before{ content:"+"; position:absolute; left:85px; top:180px; color:#8DBBFF; font-size:30px; font-weight:700; z-index:3; } .nst-banner-image::after{ content:"+"; position:absolute; right:70px; bottom:150px; color:#8DBBFF; font-size:26px; font-weight:700; z-index:3; } /*==================================================== FLOAT ANIMATION ====================================================*/ @keyframes floatOne{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } } @keyframes floatTwo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(12px); } } @keyframes floatThree{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } } /*==================================================== PART 3 COURSE CATEGORY CARDS ====================================================*/ .nst-course-category-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:50px; } /*==================================================== CARD ====================================================*/ .nst-category-card{ position:relative; display:flex; align-items:center; gap:18px; padding:22px; background:#fff; border:1px solid #E7EDF5; border-radius:22px; text-decoration:none; transition:.35s ease; overflow:hidden; box-shadow:0 12px 28px rgba(15,35,70,.06); } .nst-category-card:hover{ transform:translateY(-8px); border-color:#D7E7FB; box-shadow:0 24px 50px rgba(15,35,70,.12); } .nst-category-card::before{ content:""; position:absolute; top:0; left:0; width:5px; height:100%; background:#2164D6; transform:scaleY(0); transition:.35s; } .nst-category-card:hover::before{ transform:scaleY(1); } /*==================================================== ICON BOX ====================================================*/ .nst-category-icon{ width:74px; height:74px; border-radius:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .nst-category-icon i{ font-size:34px; } /*==================================================== ICON COLORS ====================================================*/ .nst-category-icon.green{ background:#EAF8EF; color:#1B8C53; } .nst-category-icon.red{ background:#FFEAE5; color:#F15B42; } .nst-category-icon.blue{ background:#EAF2FF; color:#2164D6; } .nst-category-icon.purple{ background:#F2ECFF; color:#7758FF; } /*==================================================== CONTENT ====================================================*/ .nst-category-content{ flex:1; } .nst-category-content h4{ margin:0; color:#102A43; font-size:15px; line-height:1.35; font-weight:700; } .nst-category-content small{ display:block; margin-top:5px; color:#6B7280; font-size:13px; line-height:1.5; } /*==================================================== ARROW ====================================================*/ .nst-category-arrow{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#F4F7FB; color:#102A43; transition:.35s; flex-shrink:0; } .nst-category-arrow i{ font-size:15px; } .nst-category-card:hover .nst-category-arrow{ background:#2164D6; color:#fff; transform:translateX(5px); } /*==================================================== HOVER EFFECTS ====================================================*/ .nst-category-card:hover .nst-category-icon{ transform:scale(1.08); transition:.35s; } .nst-category-card:hover h4{ color:#2164D6; } /*==================================================== PART 4 RESPONSIVE ====================================================*/ @media (max-width:1400px){ .nst-course-banner{ gap:50px; padding:55px; } .nst-banner-content h2{ font-size:46px; } .nst-banner-image img{ max-width:500px; } } /*==================================================== TABLET ====================================================*/ @media (max-width:1200px){ .nst-course-banner{ grid-template-columns:1fr; gap:60px; text-align:center; } .nst-banner-content{ margin:auto; } .nst-banner-content p{ margin-left:auto; margin-right:auto; } .nst-banner-image{ min-height:480px; } .nst-course-category-list{ grid-template-columns:repeat(2,1fr); } } /*==================================================== MOBILE ====================================================*/ @media (max-width:768px){ .nst-course-explorer{ padding:60px 0; } .nst-course-banner{ padding:35px 25px; border-radius:24px; gap:40px; } .nst-banner-tag{ font-size:12px; padding:8px 18px; } .nst-banner-content h2{ font-size:34px; line-height:1.25; } .nst-banner-content p{ font-size:16px; line-height:1.7; } .nst-view-course-btn{ width:100%; justify-content:center; padding:16px 25px; } .nst-banner-image{ min-height:360px; } .nst-bg-circle{ width:300px; height:300px; } .nst-banner-image img{ max-width:330px; } .nst-floating{ width:70px; height:70px; } .nst-floating i{ font-size:28px; } .nst-icon-one{ top:45px; left:0; } .nst-icon-two{ top:0; right:5px; } .nst-icon-three{ bottom:20px; right:0; } .nst-course-category-list{ grid-template-columns:1fr; gap:18px; margin-top:35px; } .nst-category-card{ padding:18px; } .nst-category-icon{ width:60px; height:60px; } .nst-category-icon i{ font-size:28px; } .nst-category-content h4{ font-size:18px; } } /*==================================================== SMALL MOBILE ====================================================*/ @media (max-width:480px){ .nst-banner-content h2{ font-size:30px; } .nst-banner-image{ min-height:300px; } .nst-bg-circle{ width:250px; height:250px; } .nst-banner-image img{ max-width:270px; } .nst-floating{ width:60px; height:60px; } .nst-floating i{ font-size:24px; } .nst-banner-image::before, .nst-banner-image::after{ display:none; } } /*====================================== HERO SECTION ======================================*/ /*==================================================== MENTAL HEALTH HERO ====================================================*/ .mh-hero{ position:relative; overflow:visible; min-height:480px; padding-top:20px; } /*==================================================== BACKGROUND ====================================================*/ .mh-bg{ position:absolute; inset:0; height:100%; background:#EAF3FF; z-index:0; } /*==================================================== CONTAINER ====================================================*/ .mh-wrap{ position:relative; z-index:2; width:100%; max-width:1440px; margin:0 auto; padding:0 20px; } /*==================================================== GRID ====================================================*/ .mh-grid{ display:grid; grid-template-columns: minmax(420px,520px) minmax(520px,1fr); gap:40px; align-items:flex-start; min-height:480px; } /*==================================================== LEFT COLUMN ====================================================*/ .mh-left{ display:flex; flex-direction:column; justify-content:center; min-height:480px; } /*==================================================== TAGLINE ====================================================*/ .mh-tagline{ display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#2F7CF4; } .mh-tagline strong{ color:#22B455; } /*==================================================== TITLE ====================================================*/ .mh-title{ margin:0; font-size:40px; line-height:1.08; font-weight:800; letter-spacing:-1.5px; color:#123B71; } .mh-title span{ display:block; color:#22B455; } .mh-title span:last-child{ color:#2F7CF4; } /*==================================================== DESCRIPTION ====================================================*/ .mh-description{ margin:18px 0 28px; max-width:520px; font-size:15px; line-height:1.8; color:#5C6D84; } /*==================================================== BUTTONS ====================================================*/ .mh-actions{ display:flex; gap:16px; flex-wrap:wrap; } .mh-btn-primary, .mh-btn-secondary{ display:inline-flex; justify-content:center; align-items:center; height:54px; padding:0 30px; border-radius:14px; font-size:15px; font-weight:700; text-decoration:none; transition:.3s; } .mh-btn-primary{ color:#fff; background:linear-gradient( 135deg, #22B455, #2F7CF4 ); } .mh-btn-primary:hover{ transform:translateY(-2px); } .mh-btn-secondary{ background:#fff; border:2px solid #2F7CF4; color:#2F7CF4; } .mh-btn-secondary:hover{ background:#2F7CF4; color:#fff; } /*==================================================== RIGHT COLUMN ====================================================*/ .mh-right{ position:relative; display:flex; justify-content:flex-end; align-items:flex-start; min-height:480px; } .mh-right img{ display:block; width:100%; max-width:720px; height:auto; margin:0; filter:drop-shadow(0 30px 60px rgba(18,60,120,.12)); transition:.35s; } .mh-right:hover img{ transform:scale(1.02); } /*==================================================== SUPPORT CARD ====================================================*/ .mh-support-card{ position:absolute; left:25px; top:60px; /* Adjust this value */ bottom:auto; width:340px; background:#fff; border-radius:22px; padding:22px; display:flex; align-items:center; gap:18px; box-shadow: 0 25px 60px rgba(0,0,0,.10); z-index:20; } .mh-support-card::before{ content:""; position:absolute; left:0; top:0; width:6px; height:100%; border-radius:22px 0 0 22px; background:linear-gradient( 180deg, #22B455, #2F7CF4 ); } .mh-support-icon{ width:68px; height:68px; border-radius:50%; background:#EEF8F2; display:flex; justify-content:center; align-items:center; flex-shrink:0; font-size:28px; } .mh-support-content{ flex:1; } .mh-support-content h4{ margin:0; font-size:18px; font-weight:700; color:#163C71; } .mh-support-content p{ margin:8px 0 0; font-size:15px; line-height:1.6; color:#6A7789; } /*==================================================== SEARCH BOX ====================================================*/ .mh-search{ position:relative; margin-top:-38px; background:#fff; border-radius:22px; padding:22px; display:grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr 220px; gap:18px; z-index:50; box-shadow: 0 20px 50px rgba(0,0,0,.08); } /*==================================================== FIELDS ====================================================*/ .mh-field{ display:flex; flex-direction:column; } .mh-field label{ margin-bottom:8px; font-size:13px; font-weight:700; color:#24406D; } .mh-field input, .mh-field select{ width:100%; height:54px; padding:0 18px; border:1px solid #DCE4EF; border-radius:12px; background:#fff; outline:none; font-size:15px; color:#23395D; transition:.3s; } .mh-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; } .mh-field input:focus, .mh-field select:focus{ border-color:#2F7CF4; box-shadow:0 0 0 4px rgba(47,124,244,.10); } /*==================================================== SEARCH BUTTON ====================================================*/ .mh-submit{ display:flex; align-items:flex-end; } #mh-search-btn{ width:100%; height:54px; border:none; border-radius:12px; background:linear-gradient( 135deg, #22B455, #2F7CF4 ); color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:.3s; } #mh-search-btn:hover{ transform:translateY(-2px); } /*==================================================== GENERAL TRANSITIONS ====================================================*/ .mh-btn-primary, .mh-btn-secondary, #mh-search-btn, .mh-field input, .mh-field select, .mh-support-card, .mh-right img{ transition:all .30s ease; } /*==================================================== BUTTON HOVERS ====================================================*/ .mh-btn-primary:hover{ box-shadow:0 12px 30px rgba(34,180,85,.25); } .mh-btn-secondary:hover{ box-shadow:0 12px 30px rgba(47,124,244,.20); } #mh-search-btn:hover{ box-shadow:0 16px 35px rgba(47,124,244,.25); } /*==================================================== INPUTS ====================================================*/ .mh-field input:hover, .mh-field select:hover{ border-color:#2F7CF4; } .mh-field input::placeholder{ color:#9AA7B8; } /*==================================================== SEARCH BOX ====================================================*/ .mh-search{ border:1px solid rgba(224,232,242,.9); } .mh-search::after{ content:""; position:absolute; left:50%; bottom:-25px; transform:translateX(-50%); width:88%; height:35px; background:rgba(47,124,244,.08); filter:blur(28px); z-index:-1; } /*==================================================== SUPPORT CARD ====================================================*/ /*==================================================== IMAGE ====================================================*/ .mh-right img{ border-radius:0; } /*==================================================== FADE ANIMATION ====================================================*/ @keyframes mhFadeUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } } .mh-left>*{ animation:mhFadeUp .7s ease both; } .mh-left>*:nth-child(2){ animation-delay:.10s; } .mh-left>*:nth-child(3){ animation-delay:.20s; } .mh-left>*:nth-child(4){ animation-delay:.30s; } /*==================================================== IMAGE ENTRY ====================================================*/ @keyframes mhFadeRight{ from{ opacity:0; transform:translateX(60px); } to{ opacity:1; transform:none; } } .mh-right{ animation:mhFadeRight .8s ease; } /*==================================================== REMOVE UNWANTED EFFECTS ====================================================*/ /* No floating image */ /* No floating support card */ /* No background glow */ /* No radial gradients */ /* No decorative circles */ /* No glassmorphism */ /* No duplicate hover rules */ /* No duplicate animation rules */ /*==================================================== 1400px ====================================================*/ @media (max-width:1400px){ .mh-wrap{ max-width:1200px; } .mh-grid{ grid-template-columns: minmax(400px,470px) minmax(450px,1fr); gap:35px; } .mh-title{ font-size:35px; } .mh-right img{ max-width:650px; } .mh-search{ grid-template-columns: 1.3fr 1fr 1fr 1fr 190px; } } /*==================================================== 1200px ====================================================*/ @media (max-width:1200px){ .mh-hero{ min-height:auto; padding-bottom:70px; } .mh-grid{ grid-template-columns:1fr; gap:40px; min-height:auto; text-align:center; } .mh-left{ min-height:auto; max-width:800px; margin:auto; align-items:center; } .mh-description{ max-width:700px; } .mh-actions{ justify-content:center; } .mh-right{ justify-content:center; min-height:auto; } .mh-right img{ max-width:620px; } .mh-support-card{ left:50%; bottom:20px; transform:translateX(-50%); } .mh-search{ margin-top:40px; grid-template-columns:repeat(2,1fr); } .mh-submit{ grid-column:span 2; } } /*==================================================== 992px ====================================================*/ @media (max-width:992px){ .mh-wrap{ padding:0 18px; } .mh-title{ font-size:40px; line-height:1.15; } .mh-description{ font-size:16px; } .mh-right img{ max-width:520px; } .mh-support-card{ left:50%; bottom:20px; transform:translateX(-50%); } .mh-search{ grid-template-columns:1fr; margin-top:30px; padding:22px; gap:16px; } .mh-submit{ grid-column:auto; } } /*==================================================== 768px ====================================================*/ @media (max-width:768px){ .mh-hero{ padding-bottom:55px; } .mh-grid{ gap:25px; } .mh-title{ font-size:34px; } .mh-tagline{ font-size:12px; } .mh-description{ font-size:15px; line-height:1.7; } .mh-actions{ width:100%; flex-direction:column; gap:14px; } .mh-btn-primary, .mh-btn-secondary{ width:100%; max-width:320px; } .mh-right img{ max-width:100%; } .mh-search{ padding:20px; } } /*==================================================== 576px ====================================================*/ @media (max-width:576px){ .mh-wrap{ padding:0 15px; } .mh-title{ font-size:30px; letter-spacing:-0.5px; } .mh-description{ font-size:14px; } .mh-search{ padding:16px; border-radius:18px; } .mh-field label{ font-size:12px; } .mh-field input, .mh-field select{ height:50px; padding:0 14px; font-size:14px; } #mh-search-btn{ height:50px; font-size:15px; } .mh-support-card{ padding:18px; gap:14px; } .mh-support-icon{ width:56px; height:56px; font-size:24px; } .mh-support-content h4{ font-size:17px; } .mh-support-content p{ font-size:13px; line-height:1.5; } } /*==================================================== TRUST ROW ====================================================*/ .mh-trust-row{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; margin-top:35px; } .mh-trust-item{ display:flex; flex-direction:column; } .mh-trust-item strong{ font-size:32px; font-weight:800; line-height:1; color:#123B71; } .mh-trust-item span{ margin-top:6px; font-size:14px; color:#6B7A90; } /*==================================================== TOOLBAR (OPTIONAL) ====================================================*/ .mh-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:0; background:#fff; border-radius:20px; padding:6px; box-shadow:0 12px 35px rgba(0,0,0,.08); } .mh-toolbar-item{ flex:1; display:flex; align-items:center; gap:16px; padding:18px 22px; position:relative; } .mh-toolbar-item:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:50px; background:#E5ECF4; } .mh-toolbar-icon{ width:52px; height:52px; border-radius:50%; background:#EEF5FF; display:flex; justify-content:center; align-items:center; flex-shrink:0; } .mh-toolbar-icon i{ color:#2F7CF4; font-size:20px; } .mh-toolbar-content{ flex:1; padding-top:15px; } .mh-toolbar-content label{ display:block; margin-bottom:5px; font-size:12px; font-weight:700; color:#74849B; } .mh-toolbar-content input, .mh-toolbar-content select{ width:100%; border:none; outline:none; background:none; font-size:12px; font-weight:600; color:#163C71; } .mh-toolbar-button{ width:200px; height:58px; border:none; border-radius:14px; background:linear-gradient( 135deg, #22B455, #2F7CF4 ); color:#fff; font-size:16px; font-weight:700; cursor:pointer; } /*==================================================== OPTIONAL DECORATIVE CIRCLES (Delete if not used) ====================================================*/ .mh-circle-one, .mh-circle-two{ display:none; } /*==================================================== OPTIONAL SCROLL INDICATOR (Delete if not used) ====================================================*/ .mh-scroll{ display:none; } /*==================================================== MOBILE FORM FIX (Add at the very end of CSS) ====================================================*/ @media (max-width:768px){ .mh-search{ display:flex !important; flex-direction:column !important; gap:16px !important; width:100% !important; margin-top:25px !important; padding:18px !important; border-radius:18px; } .mh-field{ width:100% !important; min-width:0; } .mh-field input, .mh-field select{ width:100% !important; box-sizing:border-box; height:52px; } .mh-submit{ width:100% !important; } #mh-search-btn{ width:100% !important; height:52px; } }/*==================================================== TABLET ====================================================*/ @media (max-width:992px){ .mh-toolbar{ display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:15px; } .mh-toolbar-item{ width:100%; padding:25px; border:1px solid #E5ECF4; border-radius:14px; } .mh-toolbar-item::after{ display:none; } .mh-toolbar-button{ width:100%; grid-column:1 / -1; height:56px; } } /*==================================================== MOBILE FIX ====================================================*/ /*==================================================== MOBILE FIX ====================================================*/ @media (max-width:768px){ .mh-grid{ grid-template-columns:1fr; gap:20px; } .mh-left{ text-align:center; align-items:center; } /* IMAGE */ .mh-right{ display:block; min-height:auto; text-align:center; } .mh-right img{ display:block; width:100%; max-width:320px; margin:0 auto; } /* FLOATING CARD */ /* .mh-support-card{ position:relative; left:auto; right:auto; bottom:auto; transform:none; width:100%; max-width:320px; margin:18px auto 0; padding:16px; gap:14px; }*/ .mh-support-icon{ width:50px; height:50px; font-size:22px; } .mh-support-content h4{ font-size:18px; } .mh-support-content p{ font-size:13px; line-height:1.5; } /* TOOLBAR */ .mh-toolbar{ display:flex; flex-direction:column; padding:15px; gap:12px; } .mh-toolbar-item{ width:100%; padding:12px; border:1px solid #E5ECF4; border-radius:12px; } .mh-toolbar-item::after{ display:none; } .mh-toolbar-icon{ width:42px; height:42px; } .mh-toolbar-content label{ font-size:12px; margin-bottom:4px; } .mh-toolbar-content input, .mh-toolbar-content select{ height:42px; font-size:14px; } .mh-toolbar-button{ width:100%; height:46px; font-size:15px; border-radius:12px; } } @media (max-width:768px){ .mh-actions{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; } .mh-btn-primary, .mh-btn-secondary{ display:flex; justify-content:center; align-items:center; width:100%; max-width:300px; margin:0 auto; text-align:center; } } .mh-support-content{ display:flex; align-items:center; gap:18px; } .mh-support-icon{ width:72px; height:72px; border-radius:50%; background:#EAF7F0; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .mh-support-icon i{ font-size:34px; color:#16A34A; } .mh-support-text h4{ margin:0; font-size:20px; line-height:1.15; font-weight:700; color:#173F7A; } .nst-syllabus-list{ margin:20px 0 45px; padding-left:22px; } .nst-syllabus-list + h2{ margin-top:55px; } .nst-course-eyfs-wrap{ margin:50px 0 20px; } .nst-course-divider{ width:100%; height:1px; background:#E5E7EB; margin-bottom:24px; } .nst-course-eyfs-title{ margin:0 0 10px; font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#6B7280; } .nst-course-eyfs{ margin:0; font-size:20px; line-height:1.7; font-weight:700; font-style:italic; color:#1565C0; } /* ========================================== FLOATING FEATURE ICONS ========================================== */ /*======================================== HERO FLOATING BADGES ========================================*/ /*========================================= ICON & TEXT COLOURS =========================================*/ /*==================================================== ABOUT PAGE PART 1 Hero + Founder ====================================================*/ /*========================================= HERO =========================================*/ .nst-about-hero{ position:relative; overflow:hidden; padding:90px 0; background: linear-gradient(135deg,#0F2344 0%,#173F7A 55%,#1E5CB3 100%); } .nst-about-hero::before{ content:""; position:absolute; width:650px; height:650px; border-radius:50%; background:rgba(255,255,255,.05); right:-220px; top:-180px; } .nst-about-hero::after{ content:""; position:absolute; width:350px; height:350px; border-radius:50%; background:rgba(201,162,39,.08); left:-120px; bottom:-120px; } .nst-about-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; position:relative; z-index:2; } .nst-about-tag{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:50px; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:700; letter-spacing:1px; margin-bottom:28px; } .nst-about-left h1{ margin:0; font-size:58px; line-height:1.08; font-weight:800; color:#fff; } .nst-about-left h1 span{ color:#C9A227; } .nst-about-left p{ margin:28px 0; font-size:18px; line-height:1.9; color:rgba(255,255,255,.88); max-width:620px; } .nst-about-buttons{ display:flex; gap:18px; margin-top:35px; } .nst-about-stats{ display:flex; gap:50px; margin-top:55px; } .nst-about-stats strong{ display:block; font-size:34px; color:#fff; font-weight:800; } .nst-about-stats span{ display:block; margin-top:8px; color:#C9D3E6; font-size:14px; } /*========================================= IMAGE =========================================*/ .nst-founder-image-wrap{ position:relative; display:flex; justify-content:center; } .nst-founder-image-wrap img{ width:100%; max-width:540px; border-radius:30px; display:block; box-shadow: 0 30px 70px rgba(0,0,0,.30); } /*========================================= FLOATING CARDS =========================================*/ .nst-floating-card{ position:absolute; display:flex; align-items:center; gap:14px; padding:18px 22px; background:#fff; border-radius:18px; box-shadow: 0 18px 40px rgba(0,0,0,.15); } .nst-floating-card.one{ left:-25px; top:60px; } .nst-floating-card.two{ right:-20px; bottom:55px; } .nst-floating-card i{ width:58px; height:58px; border-radius:50%; background:#EEF7F1; display:flex; justify-content:center; align-items:center; color:#1B7A4D; font-size:24px; } .nst-floating-card strong{ display:block; color:#173F7A; font-size:17px; } .nst-floating-card span{ display:block; margin-top:3px; color:#64748B; font-size:14px; } /*========================================= FOUNDER =========================================*/ .nst-founder-section{ padding:100px 0; background:#fff; } .nst-founder-grid{ display:grid; grid-template-columns:420px 1fr; gap:80px; align-items:center; } .nst-founder-photo img{ width:100%; border-radius:28px; box-shadow: 0 30px 70px rgba(0,0,0,.12); } .nst-small-title{ display:inline-block; margin-bottom:15px; color:#1B7A4D; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; } .nst-founder-content h2{ margin:0; font-size:48px; color:#173F7A; } .nst-founder-content h4{ margin:12px 0 28px; font-size:20px; color:#C9A227; font-weight:600; } .nst-founder-content p{ margin-bottom:22px; font-size:17px; line-height:1.9; color:#667085; } .nst-founder-content blockquote{ margin-top:40px; padding:30px; border-left:5px solid #1B7A4D; background:#F8FBFD; border-radius:18px; font-size:22px; font-style:italic; line-height:1.7; color:#173F7A; font-weight:600; } /*==================================================== ABOUT PAGE PART 2 Mission • Vision • Excellence ====================================================*/ /*========================================= SECTION HEADING =========================================*/ .nst-section-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .nst-section-heading h2{ margin:0 0 20px; font-size:48px; line-height:1.15; font-weight:800; color:#173F7A; } .nst-section-heading p{ font-size:18px; line-height:1.8; color:#667085; } /*========================================= VISION MISSION =========================================*/ .nst-vm-section{ padding:110px 0; background:#F8FBFD; position:relative; overflow:hidden; } .nst-vm-section::before{ content:""; position:absolute; width:550px; height:550px; border-radius:50%; background:rgba(27,122,77,.05); top:-250px; left:-180px; } .nst-vm-section::after{ content:""; position:absolute; width:450px; height:450px; border-radius:50%; background:rgba(201,162,39,.05); right:-180px; bottom:-220px; } .nst-vm-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:40px; } .nst-vm-card{ background:#fff; padding:45px; border-radius:28px; border:1px solid #E8EDF5; transition:.35s; box-shadow:0 18px 45px rgba(15,35,70,.06); } .nst-vm-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px rgba(15,35,70,.12); } .nst-vm-icon{ width:78px; height:78px; border-radius:22px; display:flex; align-items:center; justify-content:center; margin-bottom:30px; background:#EEF4FF; color:#2164D6; } .nst-vm-icon.green{ background:#EEF8F2; color:#1B7A4D; } .nst-vm-icon i{ font-size:34px; } .nst-vm-card h3{ margin:0 0 18px; font-size:30px; color:#173F7A; } .nst-vm-card p{ margin:0; color:#667085; font-size:17px; line-height:1.9; } /*========================================= TRAINING EXCELLENCE =========================================*/ .nst-excellence{ padding:110px 0; background:linear-gradient( 135deg, #173F7A, #0F2344 ); overflow:hidden; position:relative; } .nst-excellence::before{ content:""; position:absolute; width:600px; height:600px; border-radius:50%; background:rgba(255,255,255,.04); right:-250px; top:-220px; } .nst-excellence-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 520px; gap:70px; align-items:center; } .nst-excellence-left h2{ color:#fff; margin:0 0 25px; font-size:52px; line-height:1.15; } .nst-excellence-left p{ color:rgba(255,255,255,.88); font-size:18px; line-height:1.9; } .nst-excellence .nst-small-title{ color:#C9A227; } /*========================================= FEATURE GRID =========================================*/ .nst-excellence-right{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .nst-feature-box{ background:rgba(255,255,255,.10); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.15); border-radius:22px; padding:28px; text-align:center; transition:.35s; } .nst-feature-box:hover{ transform:translateY(-8px); background:#fff; } .nst-feature-box i{ width:72px; height:72px; border-radius:50%; background:#fff; color:#1B7A4D; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:28px; } .nst-feature-box:hover i{ background:#173F7A; color:#fff; } .nst-feature-box span{ display:block; font-size:18px; font-weight:700; color:#fff; } .nst-feature-box:hover span{ color:#173F7A; } /*==================================================== ABOUT PAGE PART 3 VALUES + WHY CHOOSE NOVA ====================================================*/ /*========================================= VALUES SECTION =========================================*/ .nst-values-section{ padding:110px 0; background:#fff; position:relative; } .nst-values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } /*========================================= VALUE CARD =========================================*/ .nst-value-card{ position:relative; background:#fff; padding:38px 30px; border-radius:26px; border:1px solid #E6EDF5; transition:.35s; overflow:hidden; box-shadow:0 12px 35px rgba(15,35,70,.06); } .nst-value-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient( 90deg, #1B7A4D, #2164D6, #C9A227 ); transform:scaleX(0); transition:.35s; } .nst-value-card:hover{ transform:translateY(-10px); box-shadow:0 28px 60px rgba(15,35,70,.12); } .nst-value-card:hover::before{ transform:scaleX(1); } /*========================================= ICON =========================================*/ .nst-value-icon{ width:78px; height:78px; border-radius:22px; display:flex; justify-content:center; align-items:center; margin-bottom:24px; } .nst-value-icon i{ font-size:34px; } /*========================================= ICON COLOURS =========================================*/ .green{ background:#EEF8F2; color:#1B7A4D; } .blue{ background:#EEF4FF; color:#2164D6; } .gold{ background:#FFF8E4; color:#C9A227; } .purple{ background:#F4EEFF; color:#7A3EF2; } .red{ background:#FFF0EC; color:#F15B42; } .teal{ background:#E9FBFB; color:#009688; } .navy{ background:#EEF3FF; color:#173F7A; } /*========================================= TEXT =========================================*/ .nst-value-card h3{ margin:0 0 14px; font-size:23px; color:#173F7A; } .nst-value-card p{ margin:0; color:#667085; line-height:1.8; font-size:16px; } /*========================================= WHY CHOOSE =========================================*/ .nst-about-choose{ padding:120px 0; background:#F8FBFD; } .nst-choose-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; } /*========================================= CARD =========================================*/ .nst-choose-card{ background:#fff; border-radius:28px; padding:45px; text-align:center; border:1px solid #E7EDF5; transition:.35s; box-shadow:0 15px 40px rgba(15,35,70,.06); } .nst-choose-card:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(15,35,70,.14); } /*========================================= ICON =========================================*/ .nst-choose-card i{ width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 28px; background:linear-gradient( 135deg, #1B7A4D, #2164D6 ); color:#fff; font-size:34px; transition:.35s; } .nst-choose-card:hover i{ transform:rotate(8deg) scale(1.08); } /*========================================= TEXT =========================================*/ .nst-choose-card h3{ margin:0 0 16px; color:#173F7A; font-size:26px; } .nst-choose-card p{ margin:0; color:#667085; line-height:1.8; font-size:16px; }/*==================================================== ABOUT PAGE PART 4 CTA + RESPONSIVE ====================================================*/ /*========================================= CALL TO ACTION =========================================*/ .nst-about-cta{ padding:120px 0; background: linear-gradient( 135deg, #173F7A, #0F2344 ); position:relative; overflow:hidden; } .nst-about-cta::before{ content:""; position:absolute; width:700px; height:700px; border-radius:50%; background:rgba(255,255,255,.04); top:-320px; right:-260px; } .nst-about-cta-inner{ position:relative; z-index:2; max-width:900px; margin:auto; text-align:center; } .nst-about-cta .nst-small-title{ color:#C9A227; } .nst-about-cta h2{ margin:0 0 25px; font-size:58px; line-height:1.1; color:#fff; } .nst-about-cta p{ max-width:760px; margin:0 auto 45px; color:rgba(255,255,255,.88); font-size:19px; line-height:1.9; } .nst-about-cta-buttons{ display:flex; justify-content:center; gap:20px; } .nst-btn-outline-light{ border:2px solid #fff; color:#fff; background:transparent; } .nst-btn-outline-light:hover{ background:#fff; color:#173F7A; } /*========================================= GLOBAL HOVER =========================================*/ .nst-value-card, .nst-vm-card, .nst-choose-card, .nst-feature-box, .nst-floating-card{ transition:all .35s ease; } /*========================================= IMAGE EFFECT =========================================*/ .nst-founder-photo img, .nst-founder-image-wrap img{ transition:.45s; } .nst-founder-photo:hover img, .nst-founder-image-wrap:hover img{ transform:scale(1.03); } /*========================================= RESPONSIVE =========================================*/ @media(max-width:1400px){ .nst-about-left h1{ font-size:52px; } .nst-excellence-inner{ grid-template-columns:1fr 470px; } } /*==========================*/ @media(max-width:1200px){ .nst-about-hero-grid, .nst-founder-grid, .nst-excellence-inner{ grid-template-columns:1fr; } .nst-about-left{ text-align:center; } .nst-about-left p{ margin-left:auto; margin-right:auto; } .nst-about-buttons, .nst-about-stats{ justify-content:center; } .nst-about-right{ margin-top:60px; } .nst-vm-grid{ grid-template-columns:1fr; } .nst-values-grid{ grid-template-columns:repeat(2,1fr); } .nst-choose-grid{ grid-template-columns:repeat(2,1fr); } } /*==========================*/ @media(max-width:768px){ .nst-about-hero{ padding:70px 0; } .nst-about-left h1{ font-size:38px; } .nst-about-left p{ font-size:16px; } .nst-about-buttons{ flex-direction:column; align-items:center; } .nst-about-buttons a{ width:100%; max-width:320px; } .nst-about-stats{ flex-direction:column; gap:25px; text-align:center; } .nst-section-heading h2{ font-size:34px; } .nst-founder-content h2{ font-size:34px; } .nst-founder-content h4{ font-size:18px; } .nst-founder-content blockquote{ font-size:19px; padding:24px; } .nst-excellence-left h2{ font-size:36px; } .nst-excellence-right{ grid-template-columns:1fr; } .nst-values-grid{ grid-template-columns:1fr; } .nst-choose-grid{ grid-template-columns:1fr; } .nst-about-cta h2{ font-size:38px; } .nst-about-cta-buttons{ flex-direction:column; align-items:center; } .nst-about-cta-buttons a{ width:100%; max-width:320px; } } /*==========================*/ @media(max-width:576px){ .nst-floating-card{ display:none; } .nst-about-tag{ font-size:11px; padding:8px 16px; } .nst-about-left h1{ font-size:32px; } .nst-about-left p{ font-size:15px; line-height:1.8; } .nst-vm-card{ padding:30px; } .nst-value-card{ padding:30px; } .nst-choose-card{ padding:35px 25px; } .nst-about-cta{ padding:90px 0; } .nst-about-cta h2{ font-size:32px; } .nst-about-cta p{ font-size:16px; } } /*====================================================== ABOUT HERO ======================================================*/ .nst-about-hero{ position:relative; overflow:hidden; padding:90px 0; background: radial-gradient(circle at 85% 15%,rgba(39,124,255,.08),transparent 35%), radial-gradient(circle at 10% 90%,rgba(62,193,115,.08),transparent 35%), #ffffff; } .nst-about-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:90px; } /*========================================= LEFT SIDE =========================================*/ .nst-about-left{ position:relative; z-index:5; } .nst-about-tag{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:100px; background:#EEF5FF; color:#1E5DB8; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:30px; } .nst-about-left h1{ font-size:58px; line-height:1.08; font-weight:800; color:#07214B; margin:0 0 28px; } .nst-about-left h1 span{ color:#2E80ED; } .nst-about-left p{ font-size:18px; line-height:1.9; color:#5F6C82; max-width:620px; margin-bottom:40px; } /*========================================= BUTTONS =========================================*/ .nst-about-buttons{ display:flex; gap:18px; margin-bottom:55px; } /*========================================= STATS =========================================*/ .nst-about-stats{ display:flex; gap:28px; flex-wrap:wrap; } .nst-about-stats>div{ min-width:160px; padding:24px; border-radius:22px; background:#fff; box-shadow: 0 20px 50px rgba(16,45,82,.08); transition:.35s; } .nst-about-stats>div:hover{ transform:translateY(-8px); } .nst-about-stats strong{ display:block; font-size:34px; color:#08224F; font-weight:800; } .nst-about-stats span{ display:block; margin-top:6px; color:#74839A; font-size:15px; } /*========================================= RIGHT SIDE =========================================*/ .nst-about-right{ display:flex; justify-content:center; align-items:center; position:relative; } .nst-about-circle{ position:relative; width:560px; height:560px; } /*========================================= BACKGROUND GLOW =========================================*/ .nst-circle-glow{ position:absolute; left:50%; top:50%; width:330px; height:330px; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient(circle, rgba(46,128,237,.22), rgba(46,128,237,0)); filter:blur(45px); } /*========================================= CENTRE LOGO =========================================*/ .nst-logo-circle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:240px; height:240px; border-radius:50%; background:#fff; display:flex; justify-content:center; align-items:center; z-index:20; box-shadow: 0 30px 70px rgba(0,0,0,.12); } .nst-logo-circle img{ width:150px; height:auto; } /*========================================= OUTER RING =========================================*/ .nst-circle-ring{ position:absolute; inset:40px; border-radius:50%; border:2px dashed rgba(46,128,237,.18); } .nst-about-circle{ position:relative; width:600px; height:600px; margin:auto; } /* Outer Ring */ .nst-circle-ring{ position:absolute; width:520px; height:520px; left:40px; top:40px; border-radius:50%; border:3px dashed rgba(255,255,255,.15); animation:spin 25s linear infinite; } /* Logo */ .nst-logo-circle{ position:absolute; width:220px; height:220px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:#fff; display:flex; justify-content:center; align-items:center; z-index:20; box-shadow:0 30px 80px rgba(0,0,0,.18); } .nst-logo-circle img{ width:150px; } /* Cards */ .nst-feature-card{ position:absolute; width:170px; padding:22px; border-radius:22px; background:rgba(255,255,255,.08); backdrop-filter:blur(20px); color:#fff; text-align:center; box-shadow:0 20px 40px rgba(0,0,0,.18); } /* Positions */ .firstaid{ top:10px; left:40px; } .mental{ top:10px; right:40px; } .safety{ bottom:20px; left:20px; } .aet{ bottom:20px; right:20px; } /* Icon */ .nst-feature-icon{ width:60px; height:60px; border-radius:50%; background:#2D80ED; display:flex; justify-content:center; align-items:center; margin:0 auto 15px; font-size:28px; } .nst-feature-card h4{ margin:0; font-size:18px; } .nst-feature-card p{ margin-top:6px; font-size:14px; opacity:.85; } @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @media (max-width: 767px) { .mh-support-card { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: 100%; margin-top: 15px; box-sizing: border-box; } .mh-support-content { position: relative !important; width: 100%; box-sizing: border-box; } } /* ========================================================= WHY WE EXIST — NEW INDEPENDENT SECTION Unique prefix: nsv-exist- ========================================================= */ .nsv-exist-section { position: relative; width: 100%; padding: 90px 20px; overflow: hidden; background: linear-gradient( 135deg, #f7fbf9 0%, #ffffff 50%, #f1f8f4 100% ); box-sizing: border-box; } /* Decorative background circles */ .nsv-exist-section::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(34, 180, 85, 0.07); top: -130px; left: -100px; } .nsv-exist-section::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(34, 180, 85, 0.06); right: -80px; bottom: -100px; } /* Container */ .nsv-exist-container { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; } /* Main content */ .nsv-exist-content { max-width: 900px; margin: 0 auto; text-align: center; } /* Small title */ .nsv-exist-kicker { display: inline-flex; align-items: center; justify-content: center; padding: 7px 17px; border-radius: 50px; background: rgba(34, 180, 85, 0.10); color: #22b455; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } /* Decorative line */ .nsv-exist-line { width: 48px; height: 3px; margin: 16px auto 22px; border-radius: 10px; background: #22b455; } /* Heading */ .nsv-exist-title { margin: 0 auto; max-width: 850px; color: #14213d; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; } .nsv-exist-title span { color: #22b455; } /* Description */ .nsv-exist-description { max-width: 760px; margin: 24px auto 0; color: #626b78; font-size: 17px; line-height: 1.75; } /* Highlight cards */ .nsv-exist-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 800px; margin: 42px auto 0; } /* Individual highlight */ .nsv-exist-highlight { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: rgba(255, 255, 255, 0.90); border: 1px solid rgba(34, 180, 85, 0.13); border-radius: 14px; text-align: left; box-shadow: 0 8px 25px rgba(20, 33, 61, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .nsv-exist-highlight:hover { transform: translateY(-5px); border-color: rgba(34, 180, 85, 0.35); box-shadow: 0 14px 30px rgba(20, 33, 61, 0.10); } /* Icons */ .nsv-exist-icon { width: 46px; height: 46px; min-width: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e9f8ef; color: #22b455; font-size: 19px; } /* Highlight text */ .nsv-exist-highlight strong, .nsv-exist-highlight span { display: block; } .nsv-exist-highlight strong { color: #14213d; font-size: 15px; line-height: 1.3; } .nsv-exist-highlight span { margin-top: 2px; color: #737b86; font-size: 13px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px) { .nsv-exist-section { padding: 70px 20px; } .nsv-exist-title { font-size: 38px; } .nsv-exist-description { font-size: 16px; } .nsv-exist-highlights { grid-template-columns: 1fr; max-width: 500px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .nsv-exist-section { padding: 55px 18px; } .nsv-exist-title { font-size: 30px; line-height: 1.18; } .nsv-exist-description { margin-top: 20px; font-size: 15px; line-height: 1.65; } .nsv-exist-highlights { margin-top: 30px; gap: 12px; } .nsv-exist-highlight { padding: 15px; } } /* ========================================================= GOOGLE REVIEWS SECTION ========================================================= */ .nst-google-reviews-section { width: 100%; padding: 70px 0; background: #f8faf9; } /* Google Reviews Header */ .nst-google-reviews-header { display: flex; justify-content: center; margin-bottom: 36px; } /* Clickable Google Review Box */ .nst-google-reviews-link { display: inline-flex; align-items: center; gap: 18px; padding: 14px 24px; background: #ffffff; border: 1px solid #e5e9e7; border-radius: 14px; box-shadow: 0 8px 25px rgba(20, 33, 61, 0.07); text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .nst-google-reviews-link:hover { transform: translateY(-4px); border-color: #d6ded9; box-shadow: 0 14px 32px rgba(20, 33, 61, 0.11); } /* Google Logo */ .nst-google-review-logo { display: block; width: 105px; height: 55px; object-fit: contain; flex-shrink: 0; } /* Heading Text */ .nst-google-reviews-heading-text { display: flex; flex-direction: column; gap: 4px; } .nst-google-reviews-title { display: block; color: var(--navy); font-size: 21px; font-weight: 700; line-height: 1.25; } .nst-google-reviews-subtitle { display: block; color: #6b7280; font-size: 13px; line-height: 1.4; } /* ========================================================= EXISTING TESTIMONIAL CAROUSEL ========================================================= */ .nst-google-reviews-section .nst-testimonial-carousel { width: 100%; } .nst-google-reviews-section .nst-testimonial-slide { background: #ffffff; border: 1px solid #e6ebe8; border-radius: 14px; box-shadow: 0 8px 25px rgba(20, 33, 61, 0.06); } /* Stars */ .nst-google-reviews-section .nst-stars { color: #fbbc04; font-size: 18px; letter-spacing: 2px; margin-bottom: 14px; } /* Review text */ .nst-google-reviews-section .nst-quote { color: #4b5563; font-size: 15px; line-height: 1.7; } /* Reviewer */ .nst-google-reviews-section .nst-testimonial-slide strong { display: block; margin-top: 18px; color: var(--navy); font-size: 15px; } .nst-google-reviews-section .nst-testimonial-slide span { display: block; margin-top: 4px; color: #7a828c; font-size: 13px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .nst-google-reviews-section { padding: 60px 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 640px) { .nst-google-reviews-section { padding: 50px 0; } .nst-google-reviews-header { margin-bottom: 26px; } .nst-google-reviews-link { gap: 12px; padding: 11px 15px; max-width: 100%; } .nst-google-review-logo { width: 82px; height: 45px; } .nst-google-reviews-title { font-size: 17px; } .nst-google-reviews-subtitle { font-size: 11px; } }/* ========================================================= GOOGLE REVIEWS — RESTORE CAROUSEL SCROLL ========================================================= */ .nst-google-reviews-section .nst-testimonial-carousel { position: relative; width: 100%; overflow: hidden; } .nst-google-reviews-section .nst-testimonial-track { display: flex; width: 100%; transition: transform 0.45s ease; will-change: transform; } .nst-google-reviews-section .nst-testimonial-slide { flex: 0 0 100%; width: 100%; box-sizing: border-box; } /* ========================================================= WHY WE EXIST — FULL WIDTH STATEMENT Unique prefix: nsv-existence- ========================================================= */ .nsv-existence-section { position: relative; width: 100%; padding: 100px 30px; overflow: hidden; background: #f7faf8; box-sizing: border-box; } /* Subtle decorative circle */ .nsv-existence-section::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(23, 139, 74, 0.045); top: -230px; right: -100px; pointer-events: none; } /* Container */ .nsv-existence-container { position: relative; z-index: 2; width: 100%; max-width: 1350px; margin: 0 auto; } /* ========================================================= TOP LABEL ========================================================= */ .nsv-existence-top { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; } .nsv-existence-label { display: inline-block; color: #178b4a; font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; } .nsv-existence-line { width: 55px; height: 2px; background: #178b4a; border-radius: 10px; } /* ========================================================= LARGE HEADING ========================================================= */ .nsv-existence-heading { width: 100%; } .nsv-existence-heading h2 { max-width: 1200px; margin: 0; color: #14213d; font-size: clamp(42px, 5.2vw, 76px); line-height: 1.04; font-weight: 800; letter-spacing: -0.045em; } /* ========================================================= BOTTOM AREA ========================================================= */ .nsv-existence-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 80px; align-items: end; margin-top: 45px; padding-top: 35px; border-top: 1px solid #dfe7e2; } /* Description */ .nsv-existence-description { max-width: 720px; } .nsv-existence-description p { margin: 0; color: #68727d; font-size: 17px; line-height: 1.8; } /* ========================================================= ICONS ========================================================= */ .nsv-existence-icons { display: flex; justify-content: flex-end; gap: 35px; } .nsv-existence-icon-item { display: flex; align-items: center; gap: 10px; } .nsv-existence-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e5f5eb; color: #178b4a; font-size: 16px; flex-shrink: 0; } .nsv-existence-icon-item span { color: #14213d; font-size: 14px; font-weight: 700; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .nsv-existence-section { padding: 75px 25px; } .nsv-existence-heading h2 { font-size: clamp(38px, 6vw, 58px); } .nsv-existence-bottom { grid-template-columns: 1fr; gap: 30px; margin-top: 35px; } .nsv-existence-icons { justify-content: flex-start; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .nsv-existence-section { padding: 55px 20px; } .nsv-existence-top { gap: 12px; margin-bottom: 20px; } .nsv-existence-label { font-size: 10px; } .nsv-existence-line { width: 35px; } .nsv-existence-heading h2 { font-size: 34px; line-height: 1.12; letter-spacing: -0.03em; } .nsv-existence-bottom { margin-top: 28px; padding-top: 25px; } .nsv-existence-description p { font-size: 15px; line-height: 1.7; } .nsv-existence-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .nsv-existence-icon-item { flex-direction: column; justify-content: center; gap: 7px; text-align: center; } .nsv-existence-icon-item span { font-size: 12px; } } /* ============================================================ NOVA STELLAR — VALUE HERO Completely isolated class namespace ============================================================ */ .nsv-value-hero { width: 100%; padding: 35px 20px; box-sizing: border-box; background: #edf5f1; overflow: hidden; } .nsv-value-hero-wrap { position: relative; width: 100%; max-width: 1440px; min-height: 800px; margin: 0 auto; padding: 78px 70px 65px; box-sizing: border-box; overflow: hidden; border-radius: 28px; background: radial-gradient( circle at 76% 20%, rgba(255,255,255,.96) 0, rgba(255,255,255,.55) 25%, transparent 48% ), linear-gradient( 135deg, #f9fcfa 0%, #f3f9f6 55%, #eef7f2 100% ); box-shadow: 0 25px 60px rgba(21,55,42,.08); } /* ============================================================ BACKGROUND DECORATION ============================================================ */ .nsv-value-orbit { position: absolute; border: 1px solid rgba(35,150,104,.12); border-radius: 50%; pointer-events: none; } .nsv-value-orbit-one { width: 430px; height: 430px; top: -230px; right: 180px; } .nsv-value-orbit-two { width: 300px; height: 300px; bottom: -170px; right: 390px; } .nsv-value-dots { position: absolute; width: 70px; height: 70px; opacity: .5; background-image: radial-gradient( #75c7a1 1.7px, transparent 1.7px ); background-size: 11px 11px; pointer-events: none; } .nsv-value-dots-top { top: 120px; right: 30px; } .nsv-value-dots-bottom { bottom: 30px; left: 510px; } .nsv-value-circle { position: absolute; border-radius: 50%; pointer-events: none; } .nsv-value-circle-bottom { width: 230px; height: 230px; left: -130px; bottom: -145px; background: rgba(77,184,133,.13); } /* ============================================================ MAIN GRID ============================================================ */ .nsv-value-hero-grid { position: relative; z-index: 5; display: grid; grid-template-columns: 48% 52%; width: 100%; height: 100%; } /* ============================================================ LEFT ============================================================ */ .nsv-value-hero-left { position: relative; z-index: 5; padding-right: 35px; } .nsv-value-kicker { display: flex; align-items: center; gap: 18px; color: #15904e; font-size: 16px; font-weight: 700; letter-spacing: .02em; } .nsv-value-kicker i { display: block; width: 55px; height: 2px; background: #15904e; } .nsv-value-title { margin: 42px 0 0; color: #14213d; font-size: clamp(45px,4.6vw,70px); line-height: 1.06; font-weight: 800; letter-spacing: -.045em; } .nsv-value-title span { color: #15904e; } .nsv-value-title-line { width: 45px; height: 3px; margin-top: 28px; background: #15904e; } .nsv-value-description { max-width: 620px; margin: 26px 0 0; color: #253956; font-size: 17px; line-height: 1.78; } /* ============================================================ BUTTONS ============================================================ */ .nsv-value-buttons { display: flex; align-items: center; gap: 24px; margin-top: 34px; } .nsv-value-btn { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 61px; padding: 0 30px; box-sizing: border-box; border-radius: 9px; font-size: 16px; font-weight: 700; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .nsv-value-btn-primary { color: #fff !important; background: #15904e; box-shadow: 0 10px 25px rgba(21,144,78,.20); } .nsv-value-btn-primary:hover { color: #fff !important; background: #11753f; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(21,144,78,.25); } .nsv-value-btn-primary i { font-size: 17px; } .nsv-value-btn-secondary { min-width: 165px; color: #15904e !important; background: transparent; border: 1.5px solid #15904e; } .nsv-value-btn-secondary:hover { color: #15904e !important; background: rgba(21,144,78,.05); transform: translateY(-3px); } /* ============================================================ VALUE PILLARS ============================================================ */ .nsv-value-pillars { display: flex; align-items: center; margin-top: 42px; } .nsv-value-pillar { display: flex; flex-direction: column; align-items: center; min-width: 115px; color: #14213d; } .nsv-value-pillar-icon { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 50%; color: #15904e; background: linear-gradient( 145deg, #ffffff, #eef8f2 ); border: 1px solid rgba(21,144,78,.12); box-shadow: 0 8px 22px rgba(21,144,78,.08); font-size: 28px; } .nsv-value-pillar strong { font-size: 20px; font-weight: 700; } .nsv-value-pillar-divider { width: 1px; height: 52px; margin: 0 22px; background: #ccdcd3; } /* ============================================================ RIGHT VISUAL ============================================================ */ .nsv-value-hero-right { position: relative; min-height: 680px; } /* ============================================================ INSTRUCTOR IMAGE ============================================================ */ .nsv-value-instructor { position: absolute; top: 25px; right: 65px; width: 360px; height: 430px; overflow: hidden; border-radius: 27px; background: #dfeae4; box-shadow: 0 20px 40px rgba(20,40,32,.12); z-index: 2; } .nsv-value-instructor img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ============================================================ GREEN 124K CARD ============================================================ */ .nsv-value-stat-card { position: absolute; top: 50px; left: 25px; width: 240px; min-height: 270px; padding: 27px 30px; box-sizing: border-box; border-radius: 22px; color: #fff; background: linear-gradient( 145deg, #43ad79, #2b9b65 ); box-shadow: 0 18px 35px rgba(32,130,84,.18); z-index: 5; } .nsv-value-avatar-row { display: flex; align-items: center; margin-bottom: 25px; } .nsv-value-avatar { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-right: -9px; border: 3px solid #54b987; border-radius: 50%; background: #f0f8f4; color: #178c51; font-size: 18px; } .nsv-value-stat-card > strong { display: block; font-size: 43px; line-height: 1; font-weight: 800; } .nsv-value-stat-card p { margin: 14px 0 0; color: #fff; font-size: 16px; line-height: 1.4; } /* ============================================================ WATCH VIDEO ============================================================ */ .nsv-value-watch { position: absolute; top: 260px; left: -10px; width: 118px; height: 118px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #14213d; text-decoration: none; z-index: 12; box-shadow: 0 12px 30px rgba(20,33,61,.18); } /* SVG is used for the circular lettering. This keeps the text genuinely curved. */ .nsv-value-watch-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-88deg); pointer-events: none; } .nsv-value-watch-circle-text { fill: #fff; font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 2.5px; } .nsv-value-watch-play { position: relative; z-index: 3; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #43ad79; font-size: 17px; } /* ============================================================ PRACTICAL LEARNING ============================================================ */ .nsv-value-practical { position: absolute; top: 365px; left: 25px; width: 240px; height: 115px; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box; border-radius: 22px; background: #fff; box-shadow: 0 15px 35px rgba(20,50,35,.08); z-index: 4; } .nsv-value-practical-text { color: #15904e; font-size: 16px; line-height: 1.45; font-weight: 600; } .nsv-value-practical-icon { margin-left: auto; color: #b9d9c8; font-size: 48px; } .nsv-value-practical-check { position: absolute; right: 14px; bottom: 12px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #15904e; font-size: 12px; } /* ============================================================ DARK STAT CARDS ============================================================ */ .nsv-value-mini-card { position: absolute; right: -10px; width: 135px; min-height: 94px; padding: 14px 17px; box-sizing: border-box; border-radius: 18px; color: #fff; background: #14213d; box-shadow: 0 14px 28px rgba(20,33,61,.18); z-index: 8; } .nsv-value-success-card { top: 205px; } .nsv-value-courses-card { top: 320px; } .nsv-value-learners-card { top: 435px; } .nsv-value-mini-heading { display: flex; align-items: flex-start; gap: 9px; } .nsv-value-mini-heading i { margin-top: 2px; color: #43ad79; font-size: 15px; } .nsv-value-mini-heading span { color: #fff; font-size: 11px; line-height: 1.15; } .nsv-value-mini-heading small { font-size: 9px; color: #fff; } .nsv-value-mini-card > strong { display: block; margin-top: 7px; color: #53c886; font-size: 30px; line-height: 1; } /* ============================================================ TEAM IMAGE ============================================================ */ /* Wider than previous version. It now stretches almost completely across the lower-right visual area like the reference. */ .nsv-value-team { position: absolute; right: -5px; bottom: 0; width: 600px; height: 265px; overflow: hidden; border-radius: 24px; background: #dfe9e4; box-shadow: 0 20px 40px rgba(20,40,32,.10); z-index: 3; } .nsv-value-team img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ============================================================ LARGE DESKTOP ============================================================ */ @media (max-width: 1250px) { .nsv-value-hero-wrap { padding-left: 50px; padding-right: 40px; } .nsv-value-title { font-size: 52px; } .nsv-value-instructor { right: 45px; width: 330px; } .nsv-value-team { right: 0; width: 540px; } .nsv-value-stat-card { left: 0; } .nsv-value-practical { left: 0; } } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1050px) { .nsv-value-hero { padding: 20px; } .nsv-value-hero-wrap { padding: 55px 40px; } .nsv-value-hero-grid { grid-template-columns: 1fr; } .nsv-value-hero-left { padding-right: 0; max-width: 760px; margin: 0 auto; } .nsv-value-title { font-size: clamp(44px,7vw,64px); } .nsv-value-description { max-width: 700px; } .nsv-value-hero-right { margin-top: 60px; min-height: 690px; max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; } .nsv-value-instructor { right: 80px; } .nsv-value-team { right: 0; width: 650px; } .nsv-value-mini-card { right: 0; } } /* ============================================================ MOBILE ============================================================ */ /* ============================================================ MOBILE REDESIGN Desktop remains completely untouched ============================================================ */ @media (max-width: 650px) { /* --------------------------------------------------------- MAIN SECTION --------------------------------------------------------- */ .nsv-value-hero { padding: 10px; overflow: hidden; } .nsv-value-hero-wrap { width: 100%; min-height: auto; padding: 40px 20px 30px; border-radius: 20px; overflow: hidden; } /* --------------------------------------------------------- LEFT CONTENT --------------------------------------------------------- */ .nsv-value-hero-grid { display: block; } .nsv-value-hero-left { width: 100%; padding: 0; } .nsv-value-kicker { gap: 10px; font-size: 10px; line-height: 1.3; } .nsv-value-kicker i { width: 30px; height: 2px; } .nsv-value-title { margin-top: 24px; font-size: 36px; line-height: 1.08; letter-spacing: -.035em; } .nsv-value-title-line { width: 35px; height: 2px; margin-top: 22px; } .nsv-value-description { width: 100%; max-width: none; margin-top: 20px; font-size: 15px; line-height: 1.7; } /* --------------------------------------------------------- BUTTONS --------------------------------------------------------- */ .nsv-value-buttons { display: flex; width: 100%; gap: 10px; margin-top: 25px; } .nsv-value-btn { min-height: 50px; padding: 0 15px; font-size: 13px; border-radius: 8px; } .nsv-value-btn-primary { flex: 1; gap: 10px; } .nsv-value-btn-secondary { flex: 1; min-width: 0; } /* --------------------------------------------------------- SAFER / STRONGER / CONFIDENT --------------------------------------------------------- */ .nsv-value-pillars { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 32px; } .nsv-value-pillar { min-width: 0; flex: 1; } .nsv-value-pillar-icon { width: 52px; height: 52px; margin-bottom: 8px; font-size: 19px; } .nsv-value-pillar strong { font-size: 13px; } .nsv-value-pillar-divider { width: 1px; height: 42px; flex: 0 0 1px; margin: 0 5px; } /* ========================================================= RIGHT VISUAL AREA IMPORTANT: We give this area MUCH more height so the absolute positioned elements have room to breathe. ========================================================= */ .nsv-value-hero-right { position: relative; width: 100%; height: 625px; min-height: 625px; margin-top: 45px; } /* --------------------------------------------------------- INSTRUCTOR IMAGE --------------------------------------------------------- */ .nsv-value-instructor { top: 10px; right: 5px; width: 62%; height: 285px; border-radius: 20px; z-index: 2; } .nsv-value-instructor img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------- 124K CARD --------------------------------------------------------- */ .nsv-value-stat-card { top: 30px; left: 0; width: 165px; min-height: 190px; padding: 17px 18px; border-radius: 18px; z-index: 7; } .nsv-value-avatar-row { margin-bottom: 14px; } .nsv-value-avatar { width: 34px; height: 34px; font-size: 11px; border-width: 2px; } .nsv-value-stat-card > strong { font-size: 29px; } .nsv-value-stat-card p { margin-top: 10px; font-size: 11px; line-height: 1.4; } /* --------------------------------------------------------- WATCH VIDEO --------------------------------------------------------- */ .nsv-value-watch { top: 220px; left: 36%; width: 78px; height: 78px; z-index: 15; } .nsv-value-watch-play { width: 35px; height: 35px; font-size: 11px; } .nsv-value-watch-circle-text { font-size: 7px; letter-spacing: 2px; } /* --------------------------------------------------------- PRACTICAL LEARNING --------------------------------------------------------- */ .nsv-value-practical { top: 305px; left: 0; width: 165px; height: 82px; padding: 0 15px; border-radius: 17px; z-index: 9; } .nsv-value-practical-text { font-size: 12px; line-height: 1.35; } .nsv-value-practical-icon { font-size: 32px; } .nsv-value-practical-check { right: 9px; bottom: 8px; width: 22px; height: 22px; font-size: 9px; } /* --------------------------------------------------------- RIGHT-SIDE STAT CARDS --------------------------------------------------------- */ .nsv-value-mini-card { right: 0; width: 105px; min-height: 70px; padding: 10px 11px; border-radius: 14px; z-index: 12; } .nsv-value-success-card { top: 210px; } .nsv-value-courses-card { top: 295px; } .nsv-value-learners-card { top: 380px; } .nsv-value-mini-heading { gap: 5px; } .nsv-value-mini-heading i { font-size: 10px; } .nsv-value-mini-heading span { font-size: 8px; line-height: 1.15; } .nsv-value-mini-heading small { font-size: 7px; } .nsv-value-mini-card > strong { margin-top: 5px; font-size: 22px; } /* --------------------------------------------------------- TEAM IMAGE Full width across the bottom. --------------------------------------------------------- */ .nsv-value-team { left: 0; right: 0; bottom: 0; width: 100%; height: 150px; border-radius: 17px; z-index: 4; } .nsv-value-team img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* --------------------------------------------------------- DECORATIVE ELEMENTS --------------------------------------------------------- */ .nsv-value-dots-top { top: 70px; right: 5px; width: 45px; height: 45px; } .nsv-value-dots-bottom { bottom: 20px; left: 40%; width: 45px; height: 45px; } .nsv-value-orbit-one { width: 260px; height: 260px; top: -140px; right: -100px; } .nsv-value-orbit-two { width: 200px; height: 200px; bottom: -100px; right: 20px; } } /* ============================================================ VERY SMALL PHONES ============================================================ */ @media (max-width: 400px) { .nsv-value-hero-wrap { padding-left: 17px; padding-right: 17px; } .nsv-value-title { font-size: 32px; } .nsv-value-description { font-size: 14px; } .nsv-value-btn { font-size: 12px; padding-left: 12px; padding-right: 12px; } .nsv-value-hero-right { height: 590px; min-height: 590px; } .nsv-value-instructor { width: 61%; height: 260px; } .nsv-value-stat-card { width: 150px; min-height: 175px; padding: 14px; } .nsv-value-stat-card > strong { font-size: 26px; } .nsv-value-stat-card p { font-size: 10px; } .nsv-value-watch { top: 205px; width: 70px; height: 70px; } .nsv-value-practical { top: 285px; width: 150px; height: 75px; } .nsv-value-success-card { top: 200px; } .nsv-value-courses-card { top: 280px; } .nsv-value-learners-card { top: 360px; } .nsv-value-mini-card { width: 96px; min-height: 66px; } .nsv-value-mini-card > strong { font-size: 20px; } .nsv-value-team { height: 135px; } } /* ========================================================= TRUST LOGOS V2 ========================================================= */ .nst-trustbar-v2 { width: 100%; background: #ffffff; padding: 32px 0; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; } /* Heading */ .nst-trust-heading-v2 { margin: 0 0 24px; text-align: center; font-size: 15px; line-height: 1.5; font-weight: 600; color: #162b50; } /* Logo row */ .nst-trust-logos-v2 { display: flex; align-items: center; justify-content: center; gap: 70px; width: 100%; } /* Individual logo box */ .nst-trust-logo-v2 { display: flex; align-items: center; justify-content: center; width: 180px; height: 75px; background: #ffffff; border-radius: 10px; transition: transform .25s ease, box-shadow .25s ease; } /* Logo */ .nst-trust-logo-v2 img { display: block; max-width: 160px; max-height: 65px; width: auto; height: auto; object-fit: contain; } /* Subtle hover */ .nst-trust-logo-v2:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(20, 43, 80, .08); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .nst-trustbar-v2 { padding: 28px 20px; } .nst-trust-logos-v2 { gap: 35px; } .nst-trust-logo-v2 { width: 160px; height: 70px; } .nst-trust-logo-v2 img { max-width: 145px; max-height: 60px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 640px) { .nst-trustbar-v2 { padding: 25px 16px; } .nst-trust-heading-v2 { max-width: 340px; margin: 0 auto 22px; font-size: 13px; line-height: 1.5; } .nst-trust-logos-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: center; } .nst-trust-logo-v2 { width: 100%; height: 65px; border-radius: 8px; } .nst-trust-logo-v2 img { max-width: 100%; max-height: 52px; padding: 4px; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 400px) { .nst-trust-logos-v2 { gap: 7px; } .nst-trust-logo-v2 { height: 58px; } .nst-trust-logo-v2 img { max-height: 46px; } } /* ============================================================ NOVA STELLAR COURSES LANDING PAGE Completely isolated namespace: NSC ============================================================ */ /* ========================================================= NOVA STELLAR — COURSES LANDING PAGE Completely isolated NSC classes ========================================================= */ .nsc-courses-page { background: #f6faf8; color: #14213d; overflow: hidden; } /* ========================================================= CONTAINER ========================================================= */ .nsc-courses-container { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* ========================================================= HERO ========================================================= */ .nsc-courses-hero { position: relative; padding: 82px 0 86px; background: radial-gradient( circle at 85% 20%, rgba(38, 157, 96, .13), transparent 320px ), radial-gradient( circle at 10% 100%, rgba(35, 116, 180, .07), transparent 300px ), linear-gradient( 135deg, #ffffff 0%, #f3faf6 100% ); overflow: hidden; } .nsc-courses-hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -220px; top: -240px; border: 1px solid rgba(22, 134, 83, .10); border-radius: 50%; } .nsc-courses-hero::after { content: ""; position: absolute; width: 260px; height: 260px; left: -160px; bottom: -180px; border: 1px solid rgba(22, 134, 83, .08); border-radius: 50%; } .nsc-courses-hero-content { position: relative; z-index: 2; max-width: 850px; margin: 0 auto; text-align: center; animation: nscHeroReveal .75s ease both; } /* ========================================================= HERO EYEBROW ========================================================= */ .nsc-courses-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 19px; color: #168653; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .15em; } .nsc-courses-eyebrow::before, .nsc-courses-eyebrow::after { content: ""; width: 28px; height: 2px; background: #168653; } /* ========================================================= HERO TITLE ========================================================= */ .nsc-courses-hero h1 { margin: 0; color: #14213d; font-size: clamp(46px, 6vw, 76px); line-height: 1.03; letter-spacing: -.045em; font-weight: 800; } .nsc-courses-hero h1 span { color: #168653; } .nsc-courses-hero p { max-width: 680px; margin: 24px auto 0; color: #607087; font-size: 17px; line-height: 1.75; } /* ========================================================= CATEGORY SECTION ========================================================= */ .nsc-course-category-section { padding: 76px 0 90px; background: #f6faf8; } /* ========================================================= SECTION INTRO ========================================================= */ .nsc-course-category-intro { max-width: 680px; margin: 0 auto 48px; text-align: center; } .nsc-course-category-intro > span { display: inline-block; margin-bottom: 12px; color: #168653; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .13em; } .nsc-course-category-intro h2 { margin: 0 0 13px; color: #14213d; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.03em; } .nsc-course-category-intro p { margin: 0; color: #68788d; font-size: 15px; line-height: 1.7; } /* ========================================================= CATEGORY GRID ========================================================= */ .nsc-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } /* ========================================================= CATEGORY CARD ========================================================= */ .nsc-category-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #ffffff; border: 1px solid #e0ebe5; border-radius: 22px; overflow: hidden; text-decoration: none !important; box-shadow: 0 10px 30px rgba(22, 48, 39, .06); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; animation: nscCardReveal .7s ease both; } .nsc-category-card:nth-child(1) { animation-delay: .08s; } .nsc-category-card:nth-child(2) { animation-delay: .16s; } .nsc-category-card:nth-child(3) { animation-delay: .24s; } .nsc-category-card:nth-child(4) { animation-delay: .32s; } .nsc-category-card:hover { transform: translateY(-8px); border-color: #b8ddca; box-shadow: 0 24px 55px rgba(22, 48, 39, .13); } /* ========================================================= CARD IMAGE ========================================================= */ .nsc-category-card-image { position: relative; width: 100%; height: 275px; overflow: hidden; background: #dfece5; } .nsc-category-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2, .8, .2, 1); } .nsc-category-card:hover .nsc-category-card-image img { transform: scale(1.07); } /* ========================================================= IMAGE OVERLAY ========================================================= */ .nsc-category-image-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(8, 30, 22, 0) 35%, rgba(8, 30, 22, .48) 100% ); pointer-events: none; } /* ========================================================= CARD NUMBER ========================================================= */ .nsc-category-number { position: absolute; top: 20px; right: 22px; color: rgba(255,255,255,.92); font-size: 14px; line-height: 1; font-weight: 800; letter-spacing: .08em; text-shadow: 0 2px 8px rgba(0,0,0,.25); } /* ========================================================= FLOATING ICON ========================================================= */ .nsc-category-icon { position: absolute; left: 28px; bottom: -28px; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: linear-gradient( 135deg, #168653, #35a970 ); border: 4px solid #ffffff; border-radius: 17px; font-size: 24px; box-shadow: 0 10px 24px rgba(18, 92, 57, .24); z-index: 3; transition: transform .35s ease, box-shadow .35s ease; } .nsc-category-card:hover .nsc-category-icon { transform: translateY(-5px) rotate(-3deg); box-shadow: 0 15px 30px rgba(18, 92, 57, .30); } /* ========================================================= CARD CONTENT ========================================================= */ .nsc-category-card-content { position: relative; display: flex; flex-direction: column; flex: 1; padding: 48px 30px 30px; } .nsc-category-label { display: block; margin-bottom: 9px; color: #168653; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; } .nsc-category-card-content h2 { margin: 0 0 14px; color: #14213d; font-size: 27px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; } .nsc-category-card-content p { max-width: 570px; margin: 0 0 25px; color: #607087; font-size: 14px; line-height: 1.7; } /* ========================================================= CARD LINK ========================================================= */ .nsc-category-link { display: inline-flex; align-items: center; gap: 11px; margin-top: auto; color: #168653; font-size: 13px; line-height: 1.2; font-weight: 800; text-decoration: none !important; } .nsc-category-link i { transition: transform .25s ease; } .nsc-category-card:hover .nsc-category-link i { transform: translateX(6px); } /* ========================================================= HELP CTA ========================================================= */ .nsc-course-help { padding: 0 0 80px; background: #f6faf8; } .nsc-course-help-inner { display: flex; align-items: center; gap: 22px; padding: 28px 32px; background: linear-gradient( 105deg, #eaf7f0, #f8fcfa ); border: 1px solid #d4e9dd; border-radius: 20px; box-shadow: 0 10px 30px rgba(20, 60, 40, .05); } .nsc-course-help-icon { width: 60px; height: 60px; flex: 0 0 60px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #168653; border-radius: 50%; font-size: 22px; box-shadow: 0 10px 24px rgba(22, 134, 83, .18); } .nsc-course-help-text { flex: 1; } .nsc-course-help-text > span { display: block; margin-bottom: 5px; color: #168653; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .11em; } .nsc-course-help-text h2 { margin: 0 0 4px; color: #14213d; font-size: 22px; line-height: 1.25; font-weight: 800; } .nsc-course-help-text p { margin: 0; color: #607087; font-size: 13px; line-height: 1.5; } .nsc-course-help-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-width: 145px; height: 48px; padding: 0 20px; box-sizing: border-box; color: #ffffff !important; background: #168653; border-radius: 8px; font-size: 13px; font-weight: 800; text-decoration: none !important; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } .nsc-course-help-button i { transition: transform .25s ease; } .nsc-course-help-button:hover { color: #ffffff !important; background: #116c43; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22, 134, 83, .20); } .nsc-course-help-button:hover i { transform: translateX(5px); } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes nscHeroReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes nscCardReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .nsc-courses-hero { padding: 70px 0 70px; } .nsc-category-grid { gap: 22px; } .nsc-category-card-image { height: 230px; } .nsc-category-card-content { padding: 45px 25px 26px; } .nsc-category-card-content h2 { font-size: 23px; } .nsc-course-help-inner { padding: 25px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .nsc-courses-container { padding-left: 17px; padding-right: 17px; } .nsc-courses-hero { padding: 58px 0 55px; } .nsc-courses-eyebrow { font-size: 10px; gap: 8px; } .nsc-courses-eyebrow::before, .nsc-courses-eyebrow::after { width: 18px; } .nsc-courses-hero h1 { font-size: 42px; } .nsc-courses-hero p { margin-top: 19px; font-size: 14px; line-height: 1.65; } .nsc-course-category-section { padding: 52px 0 65px; } .nsc-course-category-intro { margin-bottom: 32px; } .nsc-course-category-intro h2 { font-size: 29px; } .nsc-course-category-intro p { font-size: 14px; } .nsc-category-grid { grid-template-columns: 1fr; gap: 20px; } .nsc-category-card { border-radius: 18px; } .nsc-category-card-image { height: 225px; } .nsc-category-icon { left: 22px; width: 58px; height: 58px; border-radius: 15px; font-size: 22px; } .nsc-category-card-content { padding: 43px 23px 25px; } .nsc-category-card-content h2 { font-size: 23px; } .nsc-category-card-content p { font-size: 13px; line-height: 1.65; } .nsc-course-help { padding-bottom: 55px; } .nsc-course-help-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; } .nsc-course-help-icon { width: 52px; height: 52px; flex-basis: 52px; font-size: 19px; } .nsc-course-help-text h2 { font-size: 20px; } .nsc-course-help-text p { font-size: 13px; } .nsc-course-help-button { width: 100%; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 400px) { .nsc-courses-hero h1 { font-size: 36px; } .nsc-category-card-image { height: 200px; } .nsc-category-card-content { padding-left: 20px; padding-right: 20px; } } /* ========================================================= NOVA STELLAR COURSE CATEGORY / LISTING PAGES Shared by: /first-aid/ /mental-health/ /fire-safety/ /aet/ ========================================================= */ /* ========================================================= PAGE BASE ========================================================= */ .nsc-course-list-page { background: #f6faf8; color: #14213d; overflow: hidden; } /* ========================================================= CONTAINER ========================================================= */ .nsc-course-list-page .nsc-courses-container { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* ========================================================= HERO ========================================================= */ .nsc-course-list-hero { position: relative; padding: 55px 0 75px; background: radial-gradient( circle at 85% 20%, rgba(38, 157, 96, .13), transparent 310px ), radial-gradient( circle at 8% 90%, rgba(35, 116, 180, .06), transparent 280px ), linear-gradient( 135deg, #ffffff 0%, #f1faf5 100% ); overflow: hidden; } .nsc-course-list-hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -220px; top: -240px; border: 1px solid rgba(22, 134, 83, .10); border-radius: 50%; pointer-events: none; } .nsc-course-list-hero::after { content: ""; position: absolute; width: 220px; height: 220px; left: -150px; bottom: -150px; border: 1px solid rgba(22, 134, 83, .08); border-radius: 50%; pointer-events: none; } .nsc-course-list-hero-content { position: relative; z-index: 2; max-width: 800px; animation: nscCourseHeroIn .7s ease both; } /* ========================================================= BACK TO COURSES ========================================================= */ .nsc-back-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 36px; color: #168653 !important; font-size: 13px; font-weight: 800; text-decoration: none !important; transition: gap .25s ease, color .25s ease; } .nsc-back-link:hover { color: #116c43 !important; gap: 13px; } .nsc-back-link i { font-size: 11px; } /* ========================================================= HERO EYEBROW ========================================================= */ .nsc-course-list-eyebrow { display: block; margin-bottom: 14px; color: #168653; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .14em; } /* ========================================================= HERO TITLE ========================================================= */ .nsc-course-list-hero h1 { margin: 0; color: #14213d; font-size: clamp(42px, 5vw, 66px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; } .nsc-course-list-hero h1 span { color: #168653; } .nsc-course-list-hero p { max-width: 710px; margin: 21px 0 0; color: #607087; font-size: 16px; line-height: 1.75; } /* ========================================================= COURSE LIST SECTION ========================================================= */ .nsc-course-list-section { padding: 72px 0 90px; background: #f6faf8; } /* ========================================================= SECTION HEADING ========================================================= */ .nsc-course-list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 35px; } .nsc-course-list-heading > div:first-child > span { display: block; margin-bottom: 8px; color: #168653; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .13em; } .nsc-course-list-heading h2 { margin: 0; color: #14213d; font-size: 34px; line-height: 1.15; letter-spacing: -.03em; font-weight: 800; } /* ========================================================= COURSE COUNT ========================================================= */ .nsc-course-count { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px; box-sizing: border-box; color: #168653; background: #e8f5ee; border: 1px solid #d1e9dc; border-radius: 50px; font-size: 12px; line-height: 1; font-weight: 800; white-space: nowrap; } /* ========================================================= COURSE GRID ========================================================= */ .nsc-course-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; } /* ========================================================= COURSE CARD ========================================================= */ .nsc-course-card { display: flex; flex-direction: column; min-width: 0; background: #ffffff; border: 1px solid #e0ebe5; border-radius: 19px; overflow: hidden; box-shadow: 0 8px 28px rgba(22, 48, 39, .06); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease; animation: nscCourseCardIn .65s ease both; } .nsc-course-card:nth-child(1) { animation-delay: .05s; } .nsc-course-card:nth-child(2) { animation-delay: .12s; } .nsc-course-card:nth-child(3) { animation-delay: .19s; } .nsc-course-card:nth-child(4) { animation-delay: .26s; } .nsc-course-card:nth-child(5) { animation-delay: .33s; } .nsc-course-card:nth-child(6) { animation-delay: .40s; } .nsc-course-card:hover { transform: translateY(-7px); border-color: #b8ddca; box-shadow: 0 22px 48px rgba(22, 48, 39, .12); } /* ========================================================= CARD IMAGE ========================================================= */ .nsc-course-card-image { position: relative; display: block; width: 100%; height: 215px; overflow: hidden; background: #dfece5; text-decoration: none !important; } .nsc-course-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .8, .2, 1); } .nsc-course-card:hover .nsc-course-card-image img { transform: scale(1.06); } /* ========================================================= IMAGE ARROW ========================================================= */ .nsc-course-image-arrow { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: rgba(15, 45, 31, .78); backdrop-filter: blur(6px); border-radius: 50%; font-size: 12px; transition: transform .25s ease, background .25s ease; } .nsc-course-card:hover .nsc-course-image-arrow { background: #168653; transform: translateY(-2px) rotate(7deg); } /* ========================================================= IMAGE PLACEHOLDER ========================================================= */ .nsc-course-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #168653; background: linear-gradient( 135deg, #e5f3eb, #d5e9de ); font-size: 48px; } /* ========================================================= CARD BODY ========================================================= */ .nsc-course-card-body { display: flex; flex-direction: column; flex: 1; padding: 25px 24px 23px; } .nsc-course-card-category { display: block; margin-bottom: 8px; color: #168653; font-size: 9px; line-height: 1.2; font-weight: 800; letter-spacing: .13em; } /* ========================================================= CARD TITLE ========================================================= */ .nsc-course-card-body h3 { margin: 0 0 12px; color: #14213d; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 800; } .nsc-course-card-body h3 a { color: #14213d !important; text-decoration: none !important; transition: color .2s ease; } .nsc-course-card:hover .nsc-course-card-body h3 a { color: #168653 !important; } /* ========================================================= DESCRIPTION ========================================================= */ .nsc-course-card-body > p { margin: 0 0 18px; color: #68788d; font-size: 13px; line-height: 1.65; } /* ========================================================= COURSE META ========================================================= */ .nsc-course-meta { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: auto; padding: 14px 0; border-top: 1px solid #edf2ef; border-bottom: 1px solid #edf2ef; } .nsc-course-meta span { display: inline-flex; align-items: center; gap: 6px; color: #66778b; font-size: 11px; line-height: 1.3; font-weight: 600; } .nsc-course-meta i { color: #168653; font-size: 11px; } /* ========================================================= VIEW COURSE BUTTON ========================================================= */ .nsc-course-view-button { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 12px 15px; color: #168653 !important; background: #edf8f2; border-radius: 8px; font-size: 12px; line-height: 1.2; font-weight: 800; text-decoration: none !important; transition: color .25s ease, background .25s ease; } .nsc-course-view-button i { transition: transform .25s ease; } .nsc-course-view-button:hover { color: #ffffff !important; background: #168653; } .nsc-course-view-button:hover i { transform: translateX(5px); } /* ========================================================= EMPTY STATE ========================================================= */ .nsc-course-empty { max-width: 600px; margin: 20px auto; padding: 60px 30px; text-align: center; background: #ffffff; border: 1px solid #e0ebe5; border-radius: 18px; box-shadow: 0 8px 25px rgba(22,48,39,.04); } .nsc-course-empty > i { display: block; margin-bottom: 20px; color: #168653; font-size: 40px; } .nsc-course-empty h2 { margin: 0 0 10px; color: #14213d; font-size: 25px; line-height: 1.25; } .nsc-course-empty p { margin: 0; color: #68788d; font-size: 14px; line-height: 1.6; } /* ========================================================= CTA ========================================================= */ .nsc-course-list-cta { padding: 0 0 80px; background: #f6faf8; } .nsc-course-list-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 38px; background: linear-gradient( 105deg, #e9f7ef, #f8fcfa ); border: 1px solid #d2e9dc; border-radius: 20px; box-shadow: 0 8px 25px rgba(22,48,39,.04); } .nsc-course-list-cta-inner > div:first-child { flex: 1; } .nsc-course-list-cta-inner span { display: block; margin-bottom: 6px; color: #168653; font-size: 9px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; } .nsc-course-list-cta-inner h2 { margin: 0 0 5px; color: #14213d; font-size: 23px; line-height: 1.25; font-weight: 800; } .nsc-course-list-cta-inner p { margin: 0; color: #66778b; font-size: 13px; line-height: 1.5; } .nsc-course-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 145px; padding: 14px 20px; color: #ffffff !important; background: #168653; border-radius: 8px; font-size: 12px; line-height: 1.2; font-weight: 800; text-decoration: none !important; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } .nsc-course-cta-button:hover { color: #ffffff !important; background: #116c43; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,134,83,.18); } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes nscCourseHeroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes nscCourseCardIn { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) { .nsc-course-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .nsc-course-list-page .nsc-courses-container { padding-left: 17px; padding-right: 17px; } .nsc-course-list-hero { padding: 40px 0 55px; } .nsc-course-list-hero h1 { font-size: 42px; } .nsc-course-list-hero p { margin-top: 18px; font-size: 14px; line-height: 1.65; } .nsc-back-link { margin-bottom: 27px; } .nsc-course-list-section { padding: 52px 0 65px; } .nsc-course-list-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 27px; } .nsc-course-list-heading h2 { font-size: 29px; } .nsc-course-list-grid { grid-template-columns: 1fr; gap: 20px; } .nsc-course-card-image { height: 225px; } .nsc-course-card-body { padding: 23px 21px 21px; } .nsc-course-list-cta { padding-bottom: 55px; } .nsc-course-list-cta-inner { align-items: flex-start; flex-direction: column; padding: 26px 23px; gap: 20px; } .nsc-course-cta-button { width: 100%; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 400px) { .nsc-course-list-hero h1 { font-size: 36px; } .nsc-course-card-image { height: 200px; } .nsc-course-card-body { padding-left: 20px; padding-right: 20px; } } /* ========================================================= SCROLL TO TOP — PURE CIRCLE ========================================================= */ #nst-scroll-top.nst-scroll-top { position: fixed; left: 20px; bottom: 20px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 0; border-radius: 50% !important; background: #168653; color: #ffffff; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); cursor: pointer; appearance: none; -webkit-appearance: none; z-index: 99999; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } /* Remove any theme pseudo-elements */ #nst-scroll-top.nst-scroll-top::before, #nst-scroll-top.nst-scroll-top::after { display: none !important; content: none !important; } /* SVG */ #nst-scroll-top .nst-scroll-top-icon { display: block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; stroke: currentColor !important; fill: none !important; opacity: 1 !important; visibility: visible !important; } /* Hover */ #nst-scroll-top.nst-scroll-top:hover { background: #116c43; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); } /* Click */ #nst-scroll-top.nst-scroll-top:active { transform: translateY(-1px); } /* Keyboard focus */ #nst-scroll-top.nst-scroll-top:focus { outline: 3px solid rgba(22, 134, 83, .25); outline-offset: 3px; } /* Mobile */ @media (max-width: 640px) { #nst-scroll-top.nst-scroll-top { left: 16px; bottom: 16px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; } #nst-scroll-top .nst-scroll-top-icon { width: 18px !important; height: 18px !important; } } /* ========================================================= TRAINER CODE OF CONDUCT ========================================================= */ .nst-tcc-page { background: #f6faf8; color: #14294d; } /* --------------------------------------------------------- CONTAINER --------------------------------------------------------- */ .nst-tcc-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; } /* --------------------------------------------------------- HERO --------------------------------------------------------- */ .nst-tcc-hero { position: relative; overflow: hidden; padding: 90px 0 85px; background: radial-gradient(circle at 85% 20%, rgba(39, 190, 116, 0.16), transparent 28%), radial-gradient(circle at 10% 90%, rgba(45, 119, 229, 0.08), transparent 25%), linear-gradient(135deg, #f5fbf8 0%, #ffffff 60%, #eef8f3 100%); } .nst-tcc-hero::before { content: ""; position: absolute; width: 360px; height: 360px; border: 1px solid rgba(25, 145, 88, 0.10); border-radius: 50%; right: -120px; top: -160px; } .nst-tcc-hero::after { content: ""; position: absolute; width: 180px; height: 180px; background: rgba(30, 157, 94, 0.06); border-radius: 50%; left: -80px; bottom: -100px; } .nst-tcc-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #15945a; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .nst-tcc-eyebrow::after { content: ""; width: 42px; height: 2px; background: #15945a; } .nst-tcc-hero h1 { max-width: 850px; margin: 0 0 18px; color: #14294d; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -1.5px; } .nst-tcc-hero p { max-width: 700px; margin: 0; color: #62738e; font-size: 18px; line-height: 1.7; } /* --------------------------------------------------------- MAIN --------------------------------------------------------- */ .nst-tcc-main { padding: 75px 0 100px; } /* --------------------------------------------------------- INTRO --------------------------------------------------------- */ .nst-tcc-intro { display: grid; grid-template-columns: 76px 1fr; gap: 28px; align-items: start; margin-bottom: 45px; } .nst-tcc-icon { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: #e5f6ed; border-radius: 22px; } .nst-tcc-icon svg { width: 38px; height: 38px; fill: none; stroke: #15945a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nst-tcc-intro h2 { margin: 0 0 12px; color: #14294d; font-size: 30px; line-height: 1.2; } .nst-tcc-intro p { max-width: 850px; margin: 0; color: #5e6e87; font-size: 17px; line-height: 1.75; } /* --------------------------------------------------------- CARDS --------------------------------------------------------- */ .nst-tcc-card { margin-bottom: 28px; padding: 38px 42px; background: #ffffff; border: 1px solid #e1ebe6; border-radius: 24px; box-shadow: 0 15px 45px rgba(20, 41, 77, 0.055); transition: transform .3s ease, box-shadow .3s ease; } .nst-tcc-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(20, 41, 77, 0.09); } /* --------------------------------------------------------- SECTION HEADING --------------------------------------------------------- */ .nst-tcc-section-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; } .nst-tcc-section-heading > span { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #15945a; color: #ffffff; border-radius: 14px; font-size: 14px; font-weight: 800; } .nst-tcc-section-heading h2 { margin: 0; color: #14294d; font-size: 27px; line-height: 1.2; } .nst-tcc-section-heading p { margin: 5px 0 0; color: #8090a7; font-size: 14px; } /* --------------------------------------------------------- NUMBERED LIST --------------------------------------------------------- */ .nst-tcc-list { margin: 0; padding: 0; list-style: none; counter-reset: tcc-counter; } .nst-tcc-list li { position: relative; display: grid; grid-template-columns: 42px 180px 1fr; gap: 18px; padding: 19px 0; border-top: 1px solid #edf1ef; counter-increment: tcc-counter; } .nst-tcc-list li::before { content: counter(tcc-counter); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #f0f8f4; color: #15945a; border-radius: 50%; font-size: 13px; font-weight: 800; } .nst-tcc-list strong { color: #19365c; font-size: 15px; line-height: 1.5; } .nst-tcc-list p { margin: 0; color: #65758d; font-size: 15px; line-height: 1.7; } /* --------------------------------------------------------- DRESS CODE --------------------------------------------------------- */ .nst-tcc-dress-list li { grid-template-columns: 42px 1fr; } .nst-tcc-dress-list li strong { align-self: center; } /* --------------------------------------------------------- INFORMATION BOX --------------------------------------------------------- */ .nst-tcc-info-box { display: grid; grid-template-columns: 60px 1fr; gap: 22px; align-items: start; margin: 35px 0; padding: 30px 34px; background: linear-gradient( 135deg, #eaf8f1, #f7fcfa ); border: 1px solid #d7eee2; border-radius: 22px; } .nst-tcc-info-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 16px; } .nst-tcc-info-icon svg { width: 28px; height: 28px; fill: none; stroke: #15945a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nst-tcc-info-box p { margin: 0; color: #536680; font-size: 15px; line-height: 1.8; } /* --------------------------------------------------------- SIMPLE CARDS --------------------------------------------------------- */ .nst-tcc-simple-card p { margin: 0; color: #5d6e87; font-size: 16px; line-height: 1.8; } /* --------------------------------------------------------- FINAL SECTION --------------------------------------------------------- */ .nst-tcc-final { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 25px; align-items: start; margin-top: 35px; padding: 42px; overflow: hidden; background: linear-gradient( 135deg, #14294d 0%, #173b61 100% ); border-radius: 26px; box-shadow: 0 20px 50px rgba(20, 41, 77, 0.16); } .nst-tcc-final::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -150px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; } .nst-tcc-final-icon { position: relative; z-index: 1; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; } .nst-tcc-final-icon svg { width: 38px; height: 38px; fill: none; stroke: #65d59d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nst-tcc-final > div:last-child { position: relative; z-index: 1; } .nst-tcc-final > div:last-child > span { display: block; margin-bottom: 7px; color: #65d59d; font-size: 13px; font-weight: 800; letter-spacing: 1px; } .nst-tcc-final h2 { margin: 0 0 14px; color: #ffffff; font-size: 28px; } .nst-tcc-final p { max-width: 850px; margin: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.8; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 767px) { .nst-tcc-container { width: min(100% - 28px, 1120px); } .nst-tcc-hero { padding: 60px 0 55px; } .nst-tcc-hero h1 { font-size: 40px; letter-spacing: -1px; } .nst-tcc-hero p { font-size: 16px; } .nst-tcc-main { padding: 50px 0 70px; } .nst-tcc-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 35px; } .nst-tcc-icon { width: 62px; height: 62px; border-radius: 18px; } .nst-tcc-intro h2 { font-size: 25px; } .nst-tcc-intro p { font-size: 15px; } .nst-tcc-card { padding: 26px 20px; border-radius: 19px; } .nst-tcc-section-heading { gap: 14px; margin-bottom: 22px; } .nst-tcc-section-heading > span { width: 42px; height: 42px; border-radius: 12px; } .nst-tcc-section-heading h2 { font-size: 22px; } .nst-tcc-section-heading p { font-size: 13px; } .nst-tcc-list li, .nst-tcc-dress-list li { grid-template-columns: 34px 1fr; gap: 12px; } .nst-tcc-list li::before { width: 30px; height: 30px; font-size: 12px; } .nst-tcc-list strong { font-size: 14px; } .nst-tcc-list p { grid-column: 2; font-size: 14px; margin-top: -4px; } .nst-tcc-info-box { grid-template-columns: 1fr; padding: 25px 20px; gap: 16px; border-radius: 19px; } .nst-tcc-info-icon { width: 52px; height: 52px; } .nst-tcc-info-box p { font-size: 14px; } .nst-tcc-final { grid-template-columns: 1fr; padding: 30px 22px; gap: 18px; border-radius: 21px; } .nst-tcc-final-icon { width: 62px; height: 62px; border-radius: 18px; } .nst-tcc-final h2 { font-size: 24px; } .nst-tcc-final p { font-size: 14px; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .nst-tcc-card { transition: none; } .nst-tcc-card:hover { transform: none; } } /* ========================================================= NOVA STELLAR - FLOATING SOCIAL MEDIA ========================================================= */ .nst-floating-social { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(20, 41, 77, 0.08); border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 41, 77, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Individual buttons */ .nst-floating-social-link { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #f7faf9; text-decoration: none; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } /* Icons */ .nst-floating-social-link svg { width: 20px; height: 20px; display: block; } /* Facebook */ .nst-social-facebook svg { fill: #1877F2; } /* Instagram */ .nst-social-instagram svg { overflow: visible; } /* TikTok */ .nst-social-tiktok svg { overflow: visible; } /* LinkedIn */ .nst-social-linkedin svg { fill: #0A66C2; } /* Hover */ .nst-floating-social-link:hover { transform: translateX(-4px) scale(1.08); background: #ffffff; box-shadow: 0 6px 18px rgba(20, 41, 77, 0.16); } /* Individual subtle hover backgrounds */ .nst-social-facebook:hover { background: #eef5ff; } .nst-social-instagram:hover { background: #fff1f7; } .nst-social-tiktok:hover { background: #f2ffff; } .nst-social-linkedin:hover { background: #eef7ff; } /* Keyboard accessibility */ .nst-floating-social-link:focus-visible { outline: 2px solid #1565C0; outline-offset: 2px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 921px) { .nst-floating-social { display: none !important; } } /* ========================================================= FOOTER SOCIAL ICONS Completely isolated from floating social icons ========================================================= */ .nst-footer-social { display: flex; align-items: center; gap: 10px; margin-top: 20px; } /* White rounded icon box */ .nst-footer-social-item { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 11px; text-decoration: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; } /* SVG sizing */ .nst-footer-social-item svg { width: 20px !important; height: 20px !important; display: block; flex-shrink: 0; } /* ========================================================= FACEBOOK ========================================================= */ .nst-footer-facebook svg { fill: #1877F2 !important; } .nst-footer-facebook:hover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(24, 119, 242, 0.30); } /* ========================================================= INSTAGRAM ========================================================= */ .nst-footer-instagram svg { overflow: visible; } .nst-footer-instagram:hover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(221, 42, 123, 0.28); } /* ========================================================= TIKTOK ========================================================= */ .nst-footer-tiktok svg { overflow: visible; } .nst-footer-tiktok:hover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(37, 244, 238, 0.24); } /* ========================================================= LINKEDIN ========================================================= */ .nst-footer-linkedin svg { fill: #0A66C2 !important; } .nst-footer-linkedin:hover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(10, 102, 194, 0.30); } /* ========================================================= FOCUS ========================================================= */ .nst-footer-social-item:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 921px) { .nst-footer-social { gap: 9px; } .nst-footer-social-item { width: 38px; height: 38px; border-radius: 10px; } .nst-footer-social-item svg { width: 19px !important; height: 19px !important; } } /* ============================================================ NOVA STELLAR ABOUT / VALUES HERO NEW RESPONSIVE RIGHT VISUAL ============================================================ */ /* ============================================================ RIGHT VISUAL ============================================================ */ .nsv-about-visual { width: 100%; position: relative; min-width: 0; } /* ============================================================ TOP VISUAL ============================================================ */ .nsv-about-top { position: relative; display: grid; grid-template-columns: 43% 57%; align-items: start; min-height: 395px; width: 100%; } /* ============================================================ INSTRUCTOR IMAGE ============================================================ */ .nsv-about-instructor { grid-column: 2; position: relative; width: 100%; height: 390px; border-radius: 30px; overflow: hidden; background: #e5eee9; box-shadow: 0 12px 30px rgba(20, 55, 48, 0.08); z-index: 2; } /* Soft outer border */ .nsv-about-instructor::before { content: ""; position: absolute; inset: -10px; border: 10px solid rgba(221, 235, 228, 0.72); border-radius: 40px; z-index: 3; pointer-events: none; } .nsv-about-instructor img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 30px; } /* ============================================================ PEOPLE FIRST CARD ============================================================ */ .nsv-about-people { position: absolute; top: 30px; left: 0; width: 47%; min-height: 335px; padding: 38px 35px; background: linear-gradient( 145deg, #28a76e 0%, #138b57 100% ); border-radius: 28px; color: #ffffff; box-shadow: 0 15px 32px rgba(19, 139, 87, 0.18); z-index: 5; } .nsv-about-people-icon { position: relative; width: 70px; height: 70px; margin-bottom: 22px; } .nsv-about-people-icon .fa-user { position: absolute; top: 0; left: 15px; font-size: 42px; color: #ffffff; } .nsv-about-people-icon .fa-heart { position: absolute; right: 0; bottom: 0; font-size: 32px; color: #ffffff; } .nsv-about-people h3 { margin: 0 0 16px; color: #ffffff; font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -0.8px; } .nsv-about-people p { margin: 0; color: #ffffff; font-size: 19px; line-height: 1.45; } /* ============================================================ WATCH VIDEO ============================================================ */ .nsv-about-watch { position: absolute; left: 31%; bottom: -62px; width: 125px; height: 125px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #102c4d; text-decoration: none !important; box-shadow: 0 12px 28px rgba(16, 44, 77, 0.28); z-index: 10; transition: transform .3s ease, box-shadow .3s ease; } .nsv-about-watch:hover { transform: scale(1.06); box-shadow: 0 16px 35px rgba(16, 44, 77, 0.35); } .nsv-about-watch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .nsv-about-watch text { fill: #ffffff; font-size: 9.5px; font-weight: 600; letter-spacing: 3px; } .nsv-about-watch-play { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #15945d; color: #ffffff; font-size: 19px; padding-left: 3px; box-shadow: 0 5px 13px rgba(0, 0, 0, .18); } .nsv-about-watch-play i { color: #ffffff; } /* ============================================================ LOWER AREA ============================================================ */ .nsv-about-lower { display: grid; grid-template-columns: 43% 57%; gap: 18px; margin-top: 35px; align-items: stretch; } /* ============================================================ OUR PROMISE ============================================================ */ .nsv-about-promise { min-height: 390px; padding: 34px; display: flex; align-items: center; justify-content: space-between; background: #ffffff; border-radius: 28px; box-shadow: 0 12px 30px rgba(20, 55, 48, 0.09); position: relative; overflow: hidden; } .nsv-about-promise::after { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; bottom: -45px; border-radius: 50%; background: rgba(26, 153, 96, 0.06); } .nsv-about-promise h3 { margin: 0 0 14px; color: #168b59; font-size: 27px; line-height: 1.15; font-weight: 700; } .nsv-about-promise p { margin: 0; color: #172b49; font-size: 18px; line-height: 1.5; } .nsv-about-promise-icon { width: 70px; min-width: 70px; display: flex; align-items: center; justify-content: center; } .nsv-about-promise-icon i { color: #ccebdc; font-size: 55px; } /* ============================================================ VALUE CARDS CONTAINER ============================================================ */ .nsv-about-values { display: flex; flex-direction: column; gap: 15px; min-width: 0; } /* ============================================================ INDIVIDUAL VALUE CARD ============================================================ */ .nsv-about-value-card { flex: 1; min-height: 120px; display: flex; align-items: center; padding: 20px 24px; background: #102c4d; border-radius: 25px; box-sizing: border-box; box-shadow: 0 10px 24px rgba(16, 44, 77, 0.15); transition: transform .25s ease, box-shadow .25s ease; } .nsv-about-value-card:hover { transform: translateX(-5px); box-shadow: 0 15px 30px rgba(16, 44, 77, 0.23); } /* ============================================================ VALUE ICON ============================================================ */ .nsv-about-value-icon { width: 68px; min-width: 68px; display: flex; align-items: center; justify-content: center; margin-right: 18px; } .nsv-about-value-icon i { color: #39bd68; font-size: 42px; line-height: 1; } /* ============================================================ VALUE TEXT ============================================================ */ .nsv-about-value-content { min-width: 0; } .nsv-about-value-content h3 { margin: 0 0 6px; color: #ffffff; font-size: 23px; line-height: 1.15; font-weight: 700; } .nsv-about-value-content p { margin: 0; color: #ffffff; font-size: 15px; line-height: 1.4; } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1100px) { .nsv-about-top { grid-template-columns: 41% 59%; } .nsv-about-lower { grid-template-columns: 41% 59%; } .nsv-about-people { width: 48%; padding: 32px 27px; } .nsv-about-people h3 { font-size: 31px; } .nsv-about-people p { font-size: 17px; } .nsv-about-promise { padding: 28px; } .nsv-about-value-card { padding: 18px 20px; } .nsv-about-value-content h3 { font-size: 20px; } } /* ============================================================ TABLET / MOBILE IMPORTANT: Everything becomes normal flow. NO ABSOLUTE OVERLAPPING. ============================================================ */ @media (max-width: 921px) { .nsv-about-visual { display: block; width: 100%; padding-top: 25px; } /* ----------------------------------------- TOP ----------------------------------------- */ .nsv-about-top { display: flex; flex-direction: column; min-height: auto; gap: 18px; width: 100%; } /* Instructor first */ .nsv-about-instructor { order: 1; position: relative; width: 82%; height: 360px; margin-left: auto; border-radius: 26px; } .nsv-about-instructor img { border-radius: 26px; } /* People card */ .nsv-about-people { order: 2; position: relative; top: auto; left: auto; width: 72%; min-height: 230px; margin-top: -75px; padding: 28px 26px; border-radius: 24px; } .nsv-about-people h3 { font-size: 29px; } .nsv-about-people p { font-size: 16px; } .nsv-about-people-icon { transform: scale(.82); transform-origin: left top; margin-bottom: 10px; } /* Watch */ .nsv-about-watch { order: 3; position: relative; left: auto; bottom: auto; width: 105px; height: 105px; margin: -52px 0 5px 38%; flex-shrink: 0; } .nsv-about-watch-play { width: 48px; height: 48px; font-size: 17px; } .nsv-about-watch text { font-size: 9px; letter-spacing: 2.5px; } /* ----------------------------------------- LOWER ----------------------------------------- */ .nsv-about-lower { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; } /* Promise */ .nsv-about-promise { width: 100%; min-height: 155px; padding: 26px; order: 1; border-radius: 24px; } .nsv-about-promise h3 { font-size: 24px; } .nsv-about-promise p { font-size: 16px; } /* Value cards */ .nsv-about-values { width: 100%; order: 2; gap: 13px; } .nsv-about-value-card { width: 100%; min-height: 105px; flex: none; padding: 20px; border-radius: 22px; } .nsv-about-value-content h3 { font-size: 20px; } .nsv-about-value-content p { font-size: 14px; } .nsv-about-value-icon { width: 58px; min-width: 58px; margin-right: 14px; } .nsv-about-value-icon i { font-size: 36px; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media (max-width: 600px) { .nsv-about-visual { padding-top: 15px; } .nsv-about-instructor { width: 86%; height: 310px; border-radius: 23px; } .nsv-about-instructor img { border-radius: 23px; } .nsv-about-people { width: 76%; min-height: 215px; margin-top: -60px; padding: 24px 22px; border-radius: 22px; } .nsv-about-people h3 { font-size: 26px; margin-bottom: 10px; } .nsv-about-people p { font-size: 15px; } .nsv-about-watch { width: 92px; height: 92px; margin-top: -45px; margin-left: 42%; } .nsv-about-watch-play { width: 43px; height: 43px; font-size: 15px; } .nsv-about-promise { min-height: 135px; padding: 22px; border-radius: 21px; } .nsv-about-promise h3 { font-size: 22px; } .nsv-about-promise p { font-size: 14px; } .nsv-about-promise-icon { width: 55px; min-width: 55px; } .nsv-about-promise-icon i { font-size: 43px; } .nsv-about-value-card { min-height: 100px; padding: 18px; border-radius: 20px; } .nsv-about-value-icon { width: 52px; min-width: 52px; margin-right: 12px; } .nsv-about-value-icon i { font-size: 32px; } .nsv-about-value-content h3 { font-size: 18px; margin-bottom: 5px; } .nsv-about-value-content p { font-size: 13px; } } /* ========================================================= MOBILE FIX — SHOW COMPLETE ABOUT RIGHT VISUAL Add this AFTER all existing nsv-about CSS ========================================================= */ @media (max-width: 921px) { /* Allow the complete right section to expand */ .nsv-value-hero-right.nsv-about-visual { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; display: block !important; } /* Make the parent grid expand with the content */ .nsv-value-hero-grid { height: auto !important; min-height: 0 !important; overflow: visible !important; align-items: start !important; } /* Top area must also expand naturally */ .nsv-about-top { height: auto !important; min-height: 0 !important; overflow: visible !important; } /* Lower section MUST remain visible */ .nsv-about-lower { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; margin-top: 20px !important; } /* Our Promise */ .nsv-about-promise { display: flex !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 150px !important; max-height: none !important; overflow: visible !important; flex-shrink: 0 !important; } /* Three blue cards container */ .nsv-about-values { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; gap: 13px !important; flex-shrink: 0 !important; } /* Every individual blue card */ .nsv-about-value-card { display: flex !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 105px !important; max-height: none !important; flex: 0 0 auto !important; overflow: visible !important; box-sizing: border-box !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 600px) { .nsv-value-hero-right.nsv-about-visual { height: auto !important; min-height: 0 !important; overflow: visible !important; } .nsv-about-lower { margin-top: 20px !important; height: auto !important; } .nsv-about-promise { min-height: 135px !important; height: auto !important; } .nsv-about-values { gap: 12px !important; height: auto !important; } .nsv-about-value-card { min-height: 100px !important; height: auto !important; } } /* ========================================================= NOVA STELLAR — SINGLE COURSE PAGE ========================================================= */ .nst-single-course-page{ --single-navy:#14284b; --single-navy-dark:#0b1d3b; --single-green:#178b57; --single-green-dark:#107448; --single-green-light:#e8f6ef; --single-gold:#d8ad1d; --single-text:#14284b; --single-muted:#65758b; --single-bg:#f2f6fa; --single-white:#ffffff; font-family:inherit; color:var(--single-text); overflow:hidden; } .nst-single-container{ width:min(1120px, calc(100% - 40px)); margin:0 auto; } /* ========================================================= HERO ========================================================= */ .nst-single-hero{ position:relative; background: radial-gradient(circle at 85% 25%, rgba(35,145,91,.15), transparent 24%), linear-gradient(135deg, #10254a 0%, #162f5a 55%, #0c2144 100%); color:#fff; padding:68px 0 76px; overflow:hidden; } .nst-single-hero::before{ content:""; position:absolute; width:430px; height:430px; border:1px solid rgba(71,196,128,.18); border-radius:50%; right:-180px; top:-220px; } .nst-single-hero::after{ content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(255,255,255,.06); border-radius:50%; left:-180px; bottom:-220px; } .nst-single-hero-bg{ position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(91,207,143,.28) 1px, transparent 1px); background-size:18px 18px; mask-image:linear-gradient(to left, rgba(0,0,0,.4), transparent 45%); opacity:.45; } .nst-single-hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr); align-items:center; gap:58px; } .nst-single-hero-content{ position:relative; z-index:3; } .nst-single-category{ display:flex; align-items:center; gap:10px; margin-bottom:20px; color:#55d38d; font-size:13px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; } .nst-single-category span{ display:block; width:34px; height:3px; background:#55d38d; border-radius:10px; } .nst-single-title{ margin:0; max-width:650px; color:#fff; font-size:clamp(38px, 4.2vw, 62px); line-height:1.06; letter-spacing:-1.8px; font-weight:800; } .nst-single-hero-line{ width:70px; height:4px; margin:28px 0 30px; background:var(--single-green); border-radius:10px; } .nst-single-hero-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 24px; border-radius:8px; background:var(--single-gold); color:#10233f; font-size:15px; font-weight:800; text-decoration:none; transition:all .25s ease; box-shadow:0 12px 30px rgba(0,0,0,.18); } .nst-single-hero-btn svg{ width:19px; height:19px; transition:transform .25s ease; } .nst-single-hero-btn:hover{ transform:translateY(-3px); background:#e5bc2e; color:#10233f; box-shadow:0 16px 34px rgba(0,0,0,.24); } .nst-single-hero-btn:hover svg{ transform:translateX(4px); } /* ========================================================= HERO IMAGE — ALWAYS 16:9 ========================================================= */ .nst-single-hero-media{ position:relative; width:100%; } .nst-single-image-frame{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:20px; background:#fff; border:2px solid rgba(72,205,137,.75); box-shadow: 0 25px 60px rgba(0,0,0,.28), 0 0 0 8px rgba(255,255,255,.04); } .nst-single-hero-image{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s ease; } .nst-single-image-frame:hover .nst-single-hero-image{ transform:scale(1.025); } .nst-single-image-glow{ position:absolute; inset:0; pointer-events:none; background:linear-gradient( 135deg, rgba(66,201,129,.08), transparent 35%, transparent 70%, rgba(13,42,78,.12) ); } /* ========================================================= CONTENT SECTION ========================================================= */ .nst-single-content-section{ background:var(--single-bg); padding:78px 0 90px; } .nst-single-content-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 310px; gap:60px; align-items:start; } .nst-single-main-content{ min-width:0; } .nst-single-content-block{ margin-bottom:62px; } .nst-single-content-block:last-child{ margin-bottom:0; } .nst-single-section-label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:10px; color:var(--single-green); font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; } .nst-single-section-label::after{ content:""; width:28px; height:2px; background:var(--single-green); } .nst-single-content-block h2{ margin:0 0 20px; color:var(--single-navy); font-size:32px; line-height:1.15; font-weight:800; letter-spacing:-.5px; } .nst-single-prose{ color:#26384f; font-size:16px; line-height:1.8; } .nst-single-prose p{ margin:0 0 18px; } .nst-single-prose p:last-child{ margin-bottom:0; } .nst-single-prose h2, .nst-single-prose h3{ color:var(--single-navy); } /* ========================================================= FEATURE / SYLLABUS LIST ========================================================= */ .nst-single-feature-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin:0; padding:0; list-style:none; } .nst-single-feature-list li{ display:flex; align-items:flex-start; gap:12px; padding:17px 0; border-bottom:1px solid #dce4eb; color:#26384f; font-size:15px; line-height:1.55; } .nst-single-check{ flex:0 0 25px; width:25px; height:25px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--single-green-light); color:var(--single-green); } .nst-single-check svg{ width:14px; height:14px; } .nst-single-benefits-list li{ background:rgba(255,255,255,.45); padding:17px 14px; border-radius:8px; margin-bottom:7px; border-bottom:0; } /* ========================================================= SIDEBAR ========================================================= */ .nst-single-sidebar{ position:relative; } .nst-single-details-card{ position:sticky; top:110px; background:#fff; border-radius:18px; overflow:hidden; border:1px solid #e1e8ef; box-shadow:0 15px 40px rgba(17,39,69,.09); } .nst-single-details-top{ padding:26px 25px 22px; background:linear-gradient(145deg,#fff,#f8fbfd); border-bottom:1px solid #e5ebf0; } .nst-single-details-kicker{ display:block; margin-bottom:7px; color:var(--single-green); font-size:10px; font-weight:800; letter-spacing:1.3px; } .nst-single-details-top h3{ margin:0; color:var(--single-navy); font-size:24px; line-height:1.2; } .nst-single-details-list{ padding:8px 25px; } .nst-single-detail{ display:flex; align-items:flex-start; gap:13px; padding:18px 0; border-bottom:1px solid #e7edf1; } .nst-single-detail:last-child{ border-bottom:0; } .nst-single-detail-icon{ flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--single-green-light); color:var(--single-green); } .nst-single-detail-icon svg{ width:19px; height:19px; } .nst-single-detail div:last-child{ min-width:0; } .nst-single-detail span{ display:block; margin-bottom:4px; color:#738196; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; } .nst-single-detail strong{ display:block; color:var(--single-navy); font-size:14px; line-height:1.55; font-weight:700; } .nst-single-sidebar-actions{ padding:20px 25px 25px; background:#f8fafb; } .nst-single-sidebar-book{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:50px; border-radius:8px; background:var(--single-green); color:#fff; text-decoration:none; font-size:14px; font-weight:800; transition:all .25s ease; } .nst-single-sidebar-book svg{ width:18px; height:18px; transition:transform .25s ease; } .nst-single-sidebar-book:hover{ background:var(--single-green-dark); color:#fff; transform:translateY(-2px); } .nst-single-sidebar-book:hover svg{ transform:translateX(4px); } .nst-single-sidebar-call{ display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin-top:10px; border:1.5px solid var(--single-navy); border-radius:8px; color:var(--single-navy); background:#fff; text-decoration:none; font-size:14px; font-weight:800; transition:all .25s ease; } .nst-single-sidebar-call:hover{ background:var(--single-navy); color:#fff; } /* ========================================================= BOTTOM CTA ========================================================= */ .nst-single-bottom-cta{ background: radial-gradient(circle at 15% 50%,rgba(51,176,108,.15),transparent 25%), linear-gradient(135deg,#102449,#172f58); color:#fff; padding:55px 0; } .nst-single-bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; } .nst-single-bottom-inner > div span{ display:block; margin-bottom:7px; color:#55d38d; font-size:11px; font-weight:800; letter-spacing:1.4px; } .nst-single-bottom-inner h2{ margin:0; color:#fff; font-size:32px; line-height:1.2; } .nst-single-bottom-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 25px; flex:0 0 auto; border-radius:8px; background:var(--single-gold); color:#10233f; text-decoration:none; font-size:14px; font-weight:800; transition:all .25s ease; } .nst-single-bottom-btn svg{ width:18px; transition:transform .25s ease; } .nst-single-bottom-btn:hover{ background:#e5bc2e; color:#10233f; transform:translateY(-2px); } .nst-single-bottom-btn:hover svg{ transform:translateX(4px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px){ .nst-single-hero{ padding:55px 0 60px; } .nst-single-hero-grid{ grid-template-columns:1fr; gap:38px; } .nst-single-hero-content{ max-width:760px; } .nst-single-title{ font-size:clamp(38px,6vw,54px); } .nst-single-hero-media{ max-width:760px; } .nst-single-content-grid{ grid-template-columns:minmax(0,1fr) 290px; gap:35px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px){ .nst-single-container{ width:min(100% - 28px, 600px); } .nst-single-hero{ padding:42px 0 45px; } .nst-single-hero-grid{ gap:30px; } .nst-single-category{ margin-bottom:14px; font-size:11px; letter-spacing:1px; } .nst-single-category span{ width:25px; height:2px; } .nst-single-title{ font-size:36px; line-height:1.08; letter-spacing:-1px; } .nst-single-hero-line{ margin:21px 0 24px; } .nst-single-hero-btn{ width:100%; min-height:50px; } .nst-single-image-frame{ border-radius:14px; border-width:1.5px; box-shadow:0 15px 35px rgba(0,0,0,.2); } .nst-single-content-section{ padding:50px 0 60px; } .nst-single-content-grid{ display:flex; flex-direction:column; gap:42px; } .nst-single-main-content{ width:100%; } .nst-single-sidebar{ width:100%; } .nst-single-details-card{ position:relative; top:auto; } .nst-single-content-block{ margin-bottom:45px; } .nst-single-content-block h2{ font-size:27px; margin-bottom:16px; } .nst-single-prose{ font-size:15px; line-height:1.7; } .nst-single-feature-list{ grid-template-columns:1fr; } .nst-single-feature-list li{ font-size:14px; } .nst-single-benefits-list li{ margin-bottom:6px; } .nst-single-details-top{ padding:22px 20px 19px; } .nst-single-details-list{ padding:6px 20px; } .nst-single-sidebar-actions{ padding:18px 20px 22px; } .nst-single-bottom-cta{ padding:42px 0; } .nst-single-bottom-inner{ flex-direction:column; align-items:stretch; text-align:center; gap:23px; } .nst-single-bottom-inner h2{ font-size:27px; } .nst-single-bottom-btn{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px){ .nst-single-title{ font-size:31px; } .nst-single-hero{ padding:34px 0 38px; } .nst-single-content-section{ padding-top:42px; } .nst-single-detail{ gap:10px; } .nst-single-detail-icon{ flex-basis:31px; width:31px; height:31px; } .nst-single-detail strong{ font-size:13px; } } /* ========================================================= NOVA STELLAR TRAINING SINGLE BLOG ARTICLE ========================================================= */ .nst-single-blog-page{ --nst-single-navy:#14284b; --nst-single-navy-dark:#0d2144; --nst-single-green:#178b57; --nst-single-green-light:#e8f6ef; --nst-single-gold:#d8ad1d; --nst-single-bg:#f3f7fa; --nst-single-text:#26384f; --nst-single-muted:#718095; } /* ========================================================= CONTAINER ========================================================= */ .nst-single-blog-container{ width:min(1000px,calc(100% - 40px)); margin:0 auto; } /* ========================================================= HERO ========================================================= */ .nst-single-blog-hero{ position:relative; overflow:hidden; padding:75px 0 58px; background: radial-gradient( circle at 80% 20%, rgba(40,166,103,.18), transparent 28% ), linear-gradient( 135deg, #0e2447 0%, #18325d 100% ); color:#fff; text-align:center; } .nst-single-blog-hero::before{ content:""; position:absolute; width:430px; height:430px; right:-200px; top:-250px; border:1px solid rgba(88,211,142,.16); border-radius:50%; pointer-events:none; } .nst-single-blog-hero::after{ content:""; position:absolute; width:280px; height:280px; left:-180px; bottom:-200px; border:1px solid rgba(255,255,255,.07); border-radius:50%; pointer-events:none; } /* ========================================================= CATEGORY ========================================================= */ .nst-single-blog-category{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; color:#58d38e; font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; } .nst-single-blog-category span{ display:block; width:25px; height:2px; border-radius:5px; background:#58d38e; } /* ========================================================= TITLE ========================================================= */ .nst-single-blog-title{ position:relative; z-index:2; max-width:860px; margin:0 auto; color:#fff; font-size:clamp(38px,5vw,62px); font-weight:800; line-height:1.08; letter-spacing:-1.7px; } /* ========================================================= META ========================================================= */ .nst-single-blog-meta{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:24px; color:rgba(255,255,255,.68); font-size:12px; } .nst-single-blog-dot{ width:4px; height:4px; border-radius:50%; background:#58d38e; } /* ========================================================= FEATURED IMAGE ========================================================= */ .nst-single-blog-image-section{ padding:45px 0 0; background:var(--nst-single-bg); } .nst-single-blog-image{ width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:20px; background:#e3ece8; box-shadow:0 20px 55px rgba(20,40,75,.13); } .nst-single-blog-image img{ display:block; width:100%; height:100%; object-fit:cover; } /* ========================================================= CONTENT SECTION ========================================================= */ .nst-single-blog-content-section{ padding:55px 0 75px; background:var(--nst-single-bg); } .nst-single-blog-layout{ display:grid; grid-template-columns:55px minmax(0,760px); justify-content:center; gap:30px; } /* ========================================================= SIDE SHARE ========================================================= */ .nst-single-blog-share{ position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; align-items:center; gap:9px; } .nst-single-blog-share > span{ margin-bottom:5px; color:#8a96a5; font-size:9px; font-weight:800; letter-spacing:1.1px; writing-mode:vertical-rl; } .nst-single-blog-share a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid #dfe7ed; border-radius:50%; background:#fff; text-decoration:none; transition:all .22s ease; } .nst-single-blog-share svg{ width:17px; height:17px; } .nst-side-share-facebook{ color:#1877f2; } .nst-side-share-facebook:hover{ background:#1877f2; border-color:#1877f2; color:#fff; transform:translateY(-2px); } .nst-side-share-linkedin{ color:#0a66c2; } .nst-side-share-linkedin:hover{ background:#0a66c2; border-color:#0a66c2; color:#fff; transform:translateY(-2px); } .nst-side-share-whatsapp{ color:#25d366; } .nst-side-share-whatsapp:hover{ background:#25d366; border-color:#25d366; color:#fff; transform:translateY(-2px); } /* ========================================================= ARTICLE TYPOGRAPHY ========================================================= */ .nst-single-blog-prose{ min-width:0; color:var(--nst-single-text); font-size:17px; line-height:1.85; } .nst-single-blog-prose p{ margin:0 0 23px; } .nst-single-blog-prose h2{ margin:45px 0 16px; color:var(--nst-single-navy); font-size:31px; line-height:1.2; font-weight:800; } .nst-single-blog-prose h3{ margin:35px 0 14px; color:var(--nst-single-navy); font-size:24px; line-height:1.25; font-weight:800; } .nst-single-blog-prose h4{ margin:28px 0 12px; color:var(--nst-single-navy); font-size:20px; font-weight:800; } .nst-single-blog-prose ul, .nst-single-blog-prose ol{ margin:0 0 25px; padding-left:25px; } .nst-single-blog-prose li{ margin-bottom:9px; } .nst-single-blog-prose strong{ color:var(--nst-single-navy); } .nst-single-blog-prose a{ color:var(--nst-single-green); font-weight:600; } .nst-single-blog-prose a:hover{ color:#0d6940; } .nst-single-blog-prose img{ max-width:100%; height:auto; border-radius:12px; } .nst-single-blog-prose blockquote{ margin:32px 0; padding:25px 28px; border-left:4px solid var(--nst-single-green); border-radius:0 12px 12px 0; background:var(--nst-single-green-light); color:var(--nst-single-navy); font-size:19px; line-height:1.6; font-weight:600; } .nst-single-blog-prose table{ width:100%; border-collapse:collapse; margin:30px 0; background:#fff; } .nst-single-blog-prose th, .nst-single-blog-prose td{ padding:12px 15px; border:1px solid #dfe6eb; text-align:left; } .nst-single-blog-prose th{ background:#edf4f1; color:var(--nst-single-navy); } /* ========================================================= ARTICLE END ========================================================= */ .nst-single-blog-end{ margin-top:55px; } .nst-single-blog-end-line{ width:100%; height:1px; background:#dbe4eb; margin-bottom:18px; } .nst-single-blog-end-meta{ display:flex; align-items:center; justify-content:space-between; gap:15px; color:#8492a3; font-size:11px; font-weight:700; } /* ========================================================= BOTTOM SHARE BAR ========================================================= */ .nst-blog-bottom-share{ display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:42px; padding:24px 27px; background:#fff; border:1px solid #dfe7ed; border-radius:16px; box-shadow:0 8px 26px rgba(20,40,75,.055); } .nst-blog-bottom-share-title{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; } .nst-blog-bottom-share-title span{ color:#8592a2; font-size:11px; font-weight:600; } .nst-blog-bottom-share-title strong{ color:var(--nst-single-navy); font-size:17px; font-weight:800; } /* ========================================================= SHARE ICONS ========================================================= */ .nst-blog-bottom-share-icons{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; } .nst-blog-bottom-share-icons a, .nst-blog-bottom-share-icons button{ width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid #dfe7ed; border-radius:50%; background:#f7f9fb; cursor:pointer; text-decoration:none; transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; } .nst-blog-bottom-share-icons svg{ display:block; width:19px; height:19px; } /* Facebook */ .nst-share-facebook{ color:#1877f2; } .nst-share-facebook:hover{ background:#1877f2 !important; border-color:#1877f2 !important; color:#fff !important; transform:translateY(-3px); box-shadow:0 7px 15px rgba(24,119,242,.2); } /* Instagram */ .nst-share-instagram{ color:#dd2a7b; } .nst-share-instagram:hover{ background:#fff !important; border-color:#dd2a7b !important; transform:translateY(-3px); box-shadow:0 7px 15px rgba(221,42,123,.15); } /* X */ .nst-share-x{ color:#111; } .nst-share-x:hover{ background:#111 !important; border-color:#111 !important; color:#fff !important; transform:translateY(-3px); } /* LinkedIn */ .nst-share-linkedin{ color:#0a66c2; } .nst-share-linkedin:hover{ background:#0a66c2 !important; border-color:#0a66c2 !important; color:#fff !important; transform:translateY(-3px); box-shadow:0 7px 15px rgba(10,102,194,.2); } /* WhatsApp */ .nst-share-whatsapp{ color:#25d366; } .nst-share-whatsapp:hover{ background:#25d366 !important; border-color:#25d366 !important; color:#fff !important; transform:translateY(-3px); box-shadow:0 7px 15px rgba(37,211,102,.2); } /* Copy */ .nst-share-copy{ color:var(--nst-single-navy); } .nst-share-copy:hover, .nst-share-copy.is-copied{ background:var(--nst-single-green) !important; border-color:var(--nst-single-green) !important; color:#fff !important; transform:translateY(-3px); } /* ========================================================= RELATED ARTICLES ========================================================= */ .nst-single-blog-related{ padding:75px 0; background:#fff; } .nst-single-blog-related-heading{ margin-bottom:27px; } .nst-single-blog-related-heading span{ color:var(--nst-single-green); font-size:10px; font-weight:800; letter-spacing:1.3px; } .nst-single-blog-related-heading h2{ margin:6px 0 0; color:var(--nst-single-navy); font-size:32px; line-height:1.2; font-weight:800; } .nst-single-blog-related-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .nst-single-blog-related-card{ overflow:hidden; border:1px solid #e0e7ed; border-radius:15px; background:#fff; transition:transform .25s ease,box-shadow .25s ease; } .nst-single-blog-related-card:hover{ transform:translateY(-6px); box-shadow:0 15px 35px rgba(20,40,75,.1); } .nst-single-blog-related-image{ display:block; height:190px; overflow:hidden; background:#e6efea; } .nst-single-blog-related-image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .nst-single-blog-related-card:hover .nst-single-blog-related-image img{ transform:scale(1.05); } .nst-single-blog-related-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--nst-single-green); font-size:30px; font-weight:900; letter-spacing:2px; } .nst-single-blog-related-content{ padding:20px; } .nst-single-blog-related-content > span{ color:var(--nst-single-green); font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } .nst-single-blog-related-content h3{ margin:8px 0 12px; font-size:18px; line-height:1.35; } .nst-single-blog-related-content h3 a{ color:var(--nst-single-navy); text-decoration:none; } .nst-single-blog-related-content h3 a:hover{ color:var(--nst-single-green); } .nst-single-blog-related-date{ color:#8492a3; font-size:11px; } /* ========================================================= FINAL CTA ========================================================= */ .nst-single-blog-cta{ padding:52px 0; background: radial-gradient( circle at 80% 50%, rgba(40,166,103,.14), transparent 25% ), linear-gradient( 135deg, #0e2447, #18325d ); color:#fff; } .nst-single-blog-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; } .nst-single-blog-cta-inner span{ color:#58d38e; font-size:10px; font-weight:800; letter-spacing:1.3px; } .nst-single-blog-cta-inner h2{ margin:7px 0 0; color:#fff; font-size:30px; line-height:1.2; } .nst-single-blog-cta-inner > a{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:0 23px; border-radius:7px; background:var(--nst-single-gold); color:#10233f; font-size:13px; font-weight:800; text-decoration:none; transition:all .22s ease; } .nst-single-blog-cta-inner > a svg{ width:18px; } .nst-single-blog-cta-inner > a:hover{ background:#e6be2d; color:#10233f; transform:translateY(-2px); } /* ========================================================= NO RELATED POSTS ========================================================= */ .nst-blog-no-related{ color:var(--nst-single-muted); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1000px){ .nst-single-blog-layout{ grid-template-columns:50px minmax(0,760px); gap:20px; } .nst-single-blog-related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .nst-single-blog-container{ width:calc(100% - 28px); } /* Hero */ .nst-single-blog-hero{ padding:52px 0 43px; } .nst-single-blog-title{ font-size:36px; line-height:1.1; letter-spacing:-.8px; } .nst-single-blog-meta{ font-size:11px; margin-top:19px; } /* Featured image */ .nst-single-blog-image-section{ padding:25px 0 0; } .nst-single-blog-image{ border-radius:13px; box-shadow:0 12px 35px rgba(20,40,75,.1); } /* Content */ .nst-single-blog-content-section{ padding:40px 0 55px; } .nst-single-blog-layout{ display:block; } /* Mobile share */ .nst-single-blog-share{ position:static; flex-direction:row; justify-content:flex-start; margin-bottom:27px; } .nst-single-blog-share > span{ writing-mode:initial; margin:0 4px 0 0; } .nst-single-blog-share a{ width:36px; height:36px; } /* Article */ .nst-single-blog-prose{ font-size:15px; line-height:1.78; } .nst-single-blog-prose h2{ margin-top:35px; font-size:27px; } .nst-single-blog-prose h3{ font-size:22px; } .nst-single-blog-prose blockquote{ padding:20px; font-size:17px; } /* End meta */ .nst-single-blog-end-meta{ flex-direction:column; align-items:flex-start; gap:7px; } /* Bottom share */ .nst-blog-bottom-share{ margin-top:35px; padding:22px 17px; flex-direction:column; align-items:stretch; gap:18px; text-align:center; } .nst-blog-bottom-share-title{ align-items:center; } .nst-blog-bottom-share-title strong{ font-size:16px; } .nst-blog-bottom-share-icons{ justify-content:center; gap:8px; } .nst-blog-bottom-share-icons a, .nst-blog-bottom-share-icons button{ width:40px; height:40px; } /* Related */ .nst-single-blog-related{ padding:55px 0; } .nst-single-blog-related-heading h2{ font-size:28px; } .nst-single-blog-related-grid{ grid-template-columns:1fr; gap:18px; } .nst-single-blog-related-image{ height:auto; aspect-ratio:16 / 10; } /* CTA */ .nst-single-blog-cta{ padding:42px 0; } .nst-single-blog-cta-inner{ flex-direction:column; align-items:stretch; text-align:center; } .nst-single-blog-cta-inner > a{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px){ .nst-single-blog-title{ font-size:31px; } .nst-single-blog-category{ font-size:10px; } .nst-single-blog-bottom-share-icons{ gap:6px; } } /* ========================================================== NOVA STELLAR TRAINING BLOG / POSTS PAGE home.php ========================================================== */ /* ========================================================== CONTAINER ========================================================== */ .nst-blog-page-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; } /* ========================================================== BLOG HERO ========================================================== */ .nst-blog-page-hero { position: relative; overflow: hidden; background: radial-gradient( circle at 88% 20%, rgba(27, 145, 87, 0.13), transparent 34% ), linear-gradient( 135deg, #f4faf7 0%, #ffffff 52%, #edf8f3 100% ); padding: 62px 0 58px; } .nst-blog-page-hero::before { content: ""; position: absolute; width: 430px; height: 430px; right: -180px; top: -250px; border: 1px solid rgba(21, 101, 192, 0.08); border-radius: 50%; pointer-events: none; } .nst-blog-page-hero::after { content: ""; position: absolute; width: 280px; height: 280px; left: -170px; bottom: -190px; border: 1px solid rgba(27, 145, 87, 0.10); border-radius: 50%; pointer-events: none; } .nst-blog-page-hero-content { position: relative; z-index: 2; max-width: 760px; } .nst-blog-page-eyebrow { display: inline-block; margin-bottom: 10px; color: #178a55; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: 1.7px; text-transform: uppercase; } .nst-blog-page-hero h1 { margin: 0; color: #10264b; font-size: clamp(42px, 5vw, 66px); line-height: 1.03; letter-spacing: -2px; font-weight: 800; } .nst-blog-page-hero h1 span { color: #178a55; } .nst-blog-page-hero p { max-width: 650px; margin: 20px 0 0; color: #647790; font-size: 17px; line-height: 1.7; } /* ========================================================== BLOG CONTENT SECTION ========================================================== */ .nst-blog-page-section { background: #f5f9f7; padding: 58px 0 90px; } /* ========================================================== BLOG SECTION HEADING ========================================================== */ .nst-blog-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; } .nst-blog-page-heading .nst-blog-page-eyebrow { margin-bottom: 7px; } .nst-blog-page-heading h2 { margin: 0; color: #10264b; font-size: 38px; line-height: 1.1; letter-spacing: -1px; font-weight: 800; } .nst-blog-page-count { flex-shrink: 0; padding: 9px 16px; border: 1px solid #d7e9df; border-radius: 30px; background: #edf8f3; color: #178a55; font-size: 12px; font-weight: 800; line-height: 1.2; } /* ========================================================== BLOG GRID ========================================================== */ .nst-blog-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; } /* ========================================================== BLOG CARD ========================================================== */ .nst-blog-page-card { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; background: #ffffff; border: 1px solid #e0ebe6; border-radius: 18px; box-shadow: 0 8px 28px rgba(16, 38, 75, 0.055); transition: transform 0.28s ease, box-shadow 0.28s ease; } .nst-blog-page-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(16, 38, 75, 0.11); } /* ========================================================== FEATURED IMAGE SOURCE IMAGE: 1920 × 460 ========================================================== */ .nst-blog-page-image { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; /* * Taller card presentation while * preserving the complete artwork. */ height: 170px; overflow: hidden; background: linear-gradient( 135deg, #eef7f2 0%, #f8fbfa 50%, #e9f4ef 100% ); border-bottom: 1px solid #e3eee8; text-decoration: none; } /* * IMPORTANT: * * "contain" keeps the entire 1920 × 460 image visible. * It prevents the sides from being cropped. */ .nst-blog-page-thumb { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain !important; object-position: center center !important; transition: transform 0.45s ease; } /* Slight hover movement */ .nst-blog-page-card:hover .nst-blog-page-thumb { transform: scale(1.02); } /* ========================================================== IMAGE PLACEHOLDER ========================================================== */ .nst-blog-page-image-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient( circle at center, rgba(23, 138, 85, 0.18), transparent 58% ), #e7f2ec; } .nst-blog-page-image-placeholder span { color: #178a55; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } /* ========================================================== CARD BODY ========================================================== */ .nst-blog-page-card-body { display: flex; flex-direction: column; flex: 1; padding: 21px 22px 22px; } /* ========================================================== CATEGORY ========================================================== */ .nst-blog-page-category { display: inline-block; margin-bottom: 6px; color: #178a55; font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: 1.2px; text-transform: uppercase; } /* ========================================================== DATE ========================================================== */ .nst-blog-page-date { margin-bottom: 9px; color: #8b9aab; font-size: 11px; font-weight: 600; line-height: 1.4; } /* ========================================================== CARD TITLE ========================================================== */ .nst-blog-page-card h3 { min-height: 52px; margin: 0 0 10px; font-size: 20px; line-height: 1.3; letter-spacing: -0.3px; font-weight: 800; } .nst-blog-page-card h3 a { color: #10264b; text-decoration: none; transition: color 0.2s ease; } .nst-blog-page-card h3 a:hover { color: #178a55; } /* ========================================================== EXCERPT ========================================================== */ .nst-blog-page-card p { margin: 0 0 18px; color: #687c96; font-size: 13.5px; line-height: 1.65; } /* ========================================================== READ ARTICLE BUTTON ========================================================== */ .nst-blog-page-read-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; margin-top: auto; padding: 11px 14px; border-radius: 8px; background: #edf8f3; color: #178a55; font-size: 12px; font-weight: 800; line-height: 1.3; text-decoration: none; transition: background 0.25s ease, color 0.25s ease; } .nst-blog-page-read-more strong { font-size: 18px; line-height: 1; transition: transform 0.25s ease; } .nst-blog-page-read-more:hover { background: #178a55; color: #ffffff; } .nst-blog-page-read-more:hover strong { transform: translateX(4px); } /* ========================================================== PAGINATION ========================================================== */ .nst-blog-page-pagination { margin-top: 50px; text-align: center; } .nst-blog-page-pagination ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .nst-blog-page-pagination li { margin: 0; padding: 0; list-style: none; } .nst-blog-page-pagination a, .nst-blog-page-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 13px; box-sizing: border-box; border: 1px solid #dce8e2; border-radius: 8px; background: #ffffff; color: #10264b; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .nst-blog-page-pagination .current { border-color: #178a55; background: #178a55; color: #ffffff; } .nst-blog-page-pagination a:hover { border-color: #178a55; color: #178a55; } /* ========================================================== BLOG CTA ========================================================== */ .nst-blog-page-cta { background: #10264b; padding: 62px 0; } .nst-blog-page-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .nst-blog-page-cta h2 { margin: 0; color: #ffffff; font-size: 38px; line-height: 1.15; letter-spacing: -0.8px; font-weight: 800; } .nst-blog-page-cta h2 span { color: #e5b82f; } .nst-blog-page-cta .nst-blog-page-eyebrow { color: #55c98b; } .nst-blog-page-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; flex-shrink: 0; padding: 14px 24px; border-radius: 9px; background: #e5b82f; color: #10264b; font-size: 13px; font-weight: 800; line-height: 1.3; text-decoration: none; transition: transform 0.25s ease, background 0.25s ease; } .nst-blog-page-cta-button:hover { transform: translateY(-2px); background: #f0c846; color: #10264b; } .nst-blog-page-cta-button span { font-size: 19px; line-height: 1; } /* ========================================================== EMPTY BLOG STATE ========================================================== */ .nst-blog-page-empty { grid-column: 1 / -1; padding: 70px 30px; border-radius: 18px; background: #ffffff; text-align: center; } .nst-blog-page-empty h3 { margin: 0 0 8px; color: #10264b; font-size: 24px; } .nst-blog-page-empty p { margin: 0; color: #687c96; font-size: 14px; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1100px) { .nst-blog-page-container { width: min(940px, calc(100% - 40px)); } .nst-blog-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nst-blog-page-hero h1 { font-size: 56px; } } /* ========================================================== SMALL TABLET ========================================================== */ @media (max-width: 800px) { .nst-blog-page-container { width: calc(100% - 36px); } .nst-blog-page-hero { padding: 54px 0 52px; } .nst-blog-page-hero h1 { font-size: 48px; letter-spacing: -1.5px; } .nst-blog-page-section { padding: 50px 0 75px; } .nst-blog-page-heading { align-items: flex-start; flex-direction: column; gap: 14px; } .nst-blog-page-heading h2 { font-size: 34px; } .nst-blog-page-cta-inner { align-items: flex-start; flex-direction: column; gap: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 680px) { .nst-blog-page-container { width: calc(100% - 30px); } /* ------------------------------ HERO ------------------------------ */ .nst-blog-page-hero { padding: 48px 0 46px; } .nst-blog-page-hero::before { width: 280px; height: 280px; right: -160px; top: -150px; } .nst-blog-page-hero::after { width: 180px; height: 180px; left: -110px; bottom: -120px; } .nst-blog-page-eyebrow { font-size: 10px; letter-spacing: 1.4px; } .nst-blog-page-hero h1 { font-size: 40px; line-height: 1.05; letter-spacing: -1.2px; } .nst-blog-page-hero p { margin-top: 16px; font-size: 15px; line-height: 1.65; } /* ------------------------------ BLOG SECTION ------------------------------ */ .nst-blog-page-section { padding: 48px 0 65px; } .nst-blog-page-heading { margin-bottom: 24px; } .nst-blog-page-heading h2 { font-size: 30px; letter-spacing: -0.6px; } .nst-blog-page-count { padding: 8px 14px; font-size: 11px; } /* ------------------------------ ONE COLUMN ------------------------------ */ .nst-blog-page-grid { grid-template-columns: 1fr; gap: 22px; } /* ------------------------------ MOBILE IMAGE ------------------------------ */ .nst-blog-page-image { height: 150px; } .nst-blog-page-card-body { padding: 19px 19px 20px; } .nst-blog-page-card h3 { min-height: auto; font-size: 20px; line-height: 1.3; } .nst-blog-page-card p { font-size: 13.5px; line-height: 1.6; } /* ------------------------------ CTA ------------------------------ */ .nst-blog-page-cta { padding: 50px 0; } .nst-blog-page-cta-inner { gap: 23px; } .nst-blog-page-cta h2 { font-size: 30px; line-height: 1.18; } .nst-blog-page-cta-button { width: 100%; box-sizing: border-box; } /* ------------------------------ PAGINATION ------------------------------ */ .nst-blog-page-pagination { margin-top: 38px; } .nst-blog-page-pagination a, .nst-blog-page-pagination span { min-width: 38px; min-height: 38px; padding: 0 10px; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 400px) { .nst-blog-page-container { width: calc(100% - 26px); } .nst-blog-page-hero { padding: 42px 0 40px; } .nst-blog-page-hero h1 { font-size: 35px; letter-spacing: -1px; } .nst-blog-page-hero p { font-size: 14px; } .nst-blog-page-heading h2 { font-size: 28px; } .nst-blog-page-image { height: 135px; } .nst-blog-page-card-body { padding: 18px; } .nst-blog-page-cta h2 { font-size: 27px; } } /* ========================================================== NOVA STELLAR TRAINING POPULAR COURSES — NEW DESIGN ========================================================== */ /* ========================================================== SECTION ========================================================== */ .nst-popular-courses { position: relative; width: 100%; padding: 48px 0 52px; background: #ffffff; overflow: hidden; } /* * Very subtle background decoration */ .nst-popular-courses::before { content: ""; position: absolute; width: 360px; height: 360px; right: -220px; top: -180px; border-radius: 50%; background: radial-gradient( circle, rgba(23, 138, 85, 0.055), transparent 68% ); pointer-events: none; } /* ========================================================== CONTAINER ========================================================== */ .nst-popular-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 2; } /* ========================================================== SECTION HEADING ========================================================== */ .nst-popular-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 24px; } .nst-popular-eyebrow { display: block; margin-bottom: 6px; color: #178a55; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 1.6px; text-transform: uppercase; } .nst-popular-heading h2 { margin: 0; color: #10264b; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.8px; } /* ========================================================== VIEW ALL ========================================================== */ .nst-popular-view-all { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 9px 15px; border: 1px solid #d8e9e0; border-radius: 30px; background: #f1f9f5; color: #178a55; font-size: 11px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease; } .nst-popular-view-all span { font-size: 16px; line-height: 1; } .nst-popular-view-all:hover { background: #178a55; border-color: #178a55; color: #ffffff; } /* ========================================================== GRID ========================================================== */ .nst-popular-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; } /* ========================================================== CARD ========================================================== */ .nst-popular-card { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; background: #ffffff; border: 1px solid #e2ebe7; border-radius: 15px; box-shadow: 0 7px 24px rgba(16, 38, 75, 0.065); transition: transform .28s ease, box-shadow .28s ease; transition-delay: var(--nst-card-delay); } .nst-popular-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(16, 38, 75, 0.11); } /* ========================================================== IMAGE ========================================================== */ .nst-popular-image { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #edf5f1; text-decoration: none; } /* * Real image instead of background-image. * * This gives us reliable cropping and positioning. */ .nst-popular-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: cover !important; object-position: center center !important; transition: transform .45s ease; } .nst-popular-card:hover .nst-popular-image img { transform: scale(1.035); } /* ========================================================== IMAGE ARROW ========================================================== */ .nst-popular-image-arrow { position: absolute; top: 11px; right: 11px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(16, 38, 75, 0.88); color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); transition: background .25s ease, transform .25s ease; } .nst-popular-card:hover .nst-popular-image-arrow { background: #178a55; transform: rotate(-5deg); } /* ========================================================== PLACEHOLDER ========================================================== */ .nst-popular-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient( circle, rgba(23, 138, 85, .15), transparent 60% ), #edf7f2; } .nst-popular-placeholder span { color: #178a55; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } /* ========================================================== CARD BODY ========================================================== */ .nst-popular-card-body { display: flex; flex-direction: column; flex: 1; padding: 17px 18px 18px; } /* ========================================================== CATEGORY ========================================================== */ .nst-popular-category { display: block; margin-bottom: 6px; color: #178a55; font-size: 9px; font-weight: 800; line-height: 1.2; letter-spacing: 1.1px; text-transform: uppercase; } /* ========================================================== TITLE ========================================================== */ .nst-popular-card h3 { margin: 0 0 8px; min-height: 46px; font-size: 17px; line-height: 1.28; letter-spacing: -.25px; font-weight: 800; } .nst-popular-card h3 a { color: #10264b; text-decoration: none; transition: color .2s ease; } .nst-popular-card h3 a:hover { color: #178a55; } /* ========================================================== DESCRIPTION ========================================================== */ .nst-popular-card p { margin: 0 0 16px; color: #667b94; font-size: 12.5px; line-height: 1.55; } /* ========================================================== BUTTON ========================================================== */ .nst-popular-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; margin-top: auto; padding: 10px 13px; border-radius: 7px; background: #edf8f3; color: #178a55; font-size: 11px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: background .25s ease, color .25s ease; } .nst-popular-button strong { font-size: 16px; line-height: 1; transition: transform .25s ease; } .nst-popular-button:hover { background: #178a55; color: #ffffff; } .nst-popular-button:hover strong { transform: translateX(4px); } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1050px) { .nst-popular-container { width: min(920px, calc(100% - 40px)); } .nst-popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .nst-popular-card h3 { font-size: 18px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 680px) { .nst-popular-courses { padding: 38px 0 42px; } .nst-popular-container { width: calc(100% - 30px); } .nst-popular-heading { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 21px; } .nst-popular-heading h2 { font-size: 29px; } .nst-popular-view-all { padding: 8px 13px; } .nst-popular-grid { grid-template-columns: 1fr; gap: 18px; } .nst-popular-image { aspect-ratio: 16 / 9; } .nst-popular-card-body { padding: 17px 18px 18px; } .nst-popular-card h3 { min-height: auto; font-size: 19px; } .nst-popular-card p { font-size: 13px; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 400px) { .nst-popular-container { width: calc(100% - 26px); } .nst-popular-heading h2 { font-size: 27px; } .nst-popular-card-body { padding: 16px; } } /* ========================================================= NOVA STELLAR TRAINING CONTACT PAGE ========================================================= */ .nst-contact-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .nst-contact-hero { position: relative; overflow: hidden; background: radial-gradient( circle at 85% 30%, rgba(24, 150, 91, 0.14), transparent 34% ), linear-gradient( 135deg, #f8fcfb 0%, #eef8f4 100% ); padding: 82px 0 88px; } .nst-contact-hero::before { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(24, 150, 91, 0.12); border-radius: 50%; right: -130px; top: -210px; } .nst-contact-hero::after { content: ""; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(24, 150, 91, 0.10); border-radius: 50%; left: -130px; bottom: -160px; } .nst-contact-hero .nst-contact-container { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 270px; } .nst-contact-hero-content { max-width: 690px; } .nst-contact-eyebrow { display: inline-block; margin-bottom: 15px; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #178653; } .nst-contact-hero h1 { margin: 0; color: #10294d; font-size: clamp(42px, 5vw, 68px); line-height: 1.03; letter-spacing: -0.045em; font-weight: 800; } .nst-contact-hero h1 span { color: #168753; } .nst-contact-hero p { max-width: 650px; margin: 24px 0 0; color: #64758f; font-size: 17px; line-height: 1.75; } /* ========================================================= HERO DECORATION ========================================================= */ .nst-contact-hero-decoration { position: relative; width: 300px; height: 260px; flex-shrink: 0; } .nst-contact-orbit { position: absolute; border: 1px solid rgba(24, 150, 91, 0.16); border-radius: 50%; } .nst-contact-orbit-one { width: 250px; height: 250px; right: 0; top: 5px; } .nst-contact-orbit-two { width: 175px; height: 175px; right: 38px; top: 43px; } .nst-contact-hero-icon { position: absolute; right: 92px; top: 78px; width: 105px; height: 105px; display: flex; align-items: center; justify-content: center; border-radius: 30px; background: #ffffff; color: #168753; font-size: 42px; box-shadow: 0 20px 55px rgba(16, 41, 77, 0.13); } /* ========================================================= MAIN SECTION ========================================================= */ .nst-contact-section { padding: 82px 0 100px; background: #ffffff; } .nst-contact-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr); gap: 34px; align-items: start; } /* ========================================================= FORM CARD ========================================================= */ .nst-contact-form-card { padding: 42px; background: #ffffff; border: 1px solid #e5ebf0; border-radius: 24px; box-shadow: 0 18px 55px rgba(16, 41, 77, 0.07); } .nst-contact-form-heading { margin-bottom: 30px; } .nst-contact-form-heading h2 { margin: 0 0 10px; color: #10294d; font-size: 32px; line-height: 1.15; letter-spacing: -0.025em; } .nst-contact-form-heading p { max-width: 620px; margin: 0; color: #718198; font-size: 15px; line-height: 1.7; } /* ========================================================= FORM ROW ========================================================= */ .nst-contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .nst-contact-field { margin-bottom: 21px; } .nst-contact-field label { display: block; margin-bottom: 8px; color: #182f50; font-size: 13px; font-weight: 700; } .nst-contact-field label span { color: #168753; } /* ========================================================= INPUTS ========================================================= */ .nst-contact-input-wrap, .nst-contact-textarea-wrap { position: relative; } .nst-contact-input-wrap > i, .nst-contact-textarea-wrap > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; color: #7d91a9; font-size: 14px; pointer-events: none; } .nst-contact-textarea-wrap > i { top: 20px; transform: none; } .nst-contact-form input, .nst-contact-form select, .nst-contact-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #dfe7ed; border-radius: 12px; background: #f9fbfc; color: #1c3353; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .nst-contact-form input, .nst-contact-form select { height: 52px; padding: 0 16px 0 45px; } .nst-contact-form textarea { min-height: 150px; padding: 16px 16px 16px 45px; resize: vertical; line-height: 1.6; } .nst-contact-form input::placeholder, .nst-contact-form textarea::placeholder { color: #a2afbd; } .nst-contact-form input:focus, .nst-contact-form select:focus, .nst-contact-form textarea:focus { border-color: #168753; background: #ffffff; box-shadow: 0 0 0 4px rgba(22, 135, 83, 0.08); } /* ========================================================= SUBMIT BUTTON ========================================================= */ .nst-contact-submit { width: 100%; min-height: 56px; margin-top: 5px; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 0; border-radius: 13px; background: #168753; color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 750; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .nst-contact-submit:hover { background: #117447; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22, 135, 83, 0.20); } .nst-contact-submit i { transition: transform 0.2s ease; } .nst-contact-submit:hover i { transform: translateX(4px); } .nst-contact-form-note { margin: 13px 0 0; text-align: center; color: #91a0b1; font-size: 11px; line-height: 1.5; } /* ========================================================= ALERTS ========================================================= */ .nst-contact-alert { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 25px; padding: 17px 18px; border-radius: 13px; } .nst-contact-alert-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .nst-contact-alert strong { display: block; margin-bottom: 3px; font-size: 14px; } .nst-contact-alert p { margin: 0; font-size: 13px; line-height: 1.5; } .nst-contact-success { background: #edf9f3; border: 1px solid #cdebdc; color: #176d47; } .nst-contact-success .nst-contact-alert-icon { background: #168753; color: #ffffff; } .nst-contact-error { background: #fff5f4; border: 1px solid #f2d4d1; color: #9b3b35; } .nst-contact-error .nst-contact-alert-icon { background: #c95148; color: #ffffff; } /* ========================================================= SIDEBAR ========================================================= */ .nst-contact-sidebar { display: flex; flex-direction: column; gap: 20px; } .nst-contact-info-card { padding: 34px; border-radius: 24px; background: radial-gradient( circle at 100% 0%, rgba(22, 135, 83, 0.13), transparent 34% ), #f4faf7; border: 1px solid #dceee5; } .nst-contact-info-card h2 { margin: 0 0 11px; color: #10294d; font-size: 27px; line-height: 1.2; letter-spacing: -0.025em; } .nst-contact-info-intro { margin: 0 0 26px; color: #687b92; font-size: 14px; line-height: 1.7; } /* ========================================================= CONTACT DETAILS ========================================================= */ .nst-contact-detail { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid #dceae3; text-decoration: none !important; } .nst-contact-detail-icon { width: 43px; height: 43px; flex: 0 0 43px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #ffffff; color: #168753; box-shadow: 0 5px 15px rgba(16, 41, 77, 0.06); } .nst-contact-detail span:last-child { min-width: 0; } .nst-contact-detail small { display: block; margin-bottom: 3px; color: #8292a4; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .nst-contact-detail strong { display: block; color: #193452; font-size: 14px; overflow-wrap: anywhere; } .nst-contact-detail:hover strong { color: #168753; } /* ========================================================= OFFICE HOURS ========================================================= */ .nst-contact-hours { display: flex; gap: 14px; margin-top: 15px; padding: 19px 0 0; border-top: 1px solid #dceae3; } .nst-contact-hours-icon { width: 43px; height: 43px; flex: 0 0 43px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #ffffff; color: #168753; } .nst-contact-hours strong { display: block; margin-bottom: 9px; color: #193452; font-size: 14px; } .nst-contact-hours p { margin: 0 0 8px; color: #718298; font-size: 13px; line-height: 1.5; } /* ========================================================= WEEKEND NOTE ========================================================= */ .nst-contact-weekend { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 13px 14px; border-radius: 11px; background: rgba(22, 135, 83, 0.08); color: #287353; font-size: 12px; line-height: 1.5; } .nst-contact-weekend i { flex-shrink: 0; } /* ========================================================= HELP CARD ========================================================= */ .nst-contact-help-card { display: flex; gap: 16px; padding: 25px; border-radius: 20px; background: #10294d; color: #ffffff; } .nst-contact-help-icon { width: 47px; height: 47px; flex: 0 0 47px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(255, 255, 255, 0.10); color: #7be0ad; font-size: 20px; } .nst-contact-help-card span { display: block; margin-bottom: 7px; color: #7be0ad; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; } .nst-contact-help-card h3 { margin: 0 0 7px; color: #ffffff; font-size: 17px; line-height: 1.35; } .nst-contact-help-card p { margin: 0; color: #b9c7d8; font-size: 12px; line-height: 1.6; } /* ========================================================= HONEYPOT ========================================================= */ .nst-contact-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .nst-contact-hero { padding: 65px 0; } .nst-contact-hero-decoration { display: none; } .nst-contact-layout { grid-template-columns: 1fr; } .nst-contact-sidebar { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .nst-contact-container { width: min(100% - 30px, 600px); } .nst-contact-hero { padding: 52px 0 58px; } .nst-contact-hero h1 { font-size: 42px; } .nst-contact-hero p { font-size: 15px; line-height: 1.65; } .nst-contact-section { padding: 55px 0 70px; } .nst-contact-form-card { padding: 27px 20px; border-radius: 18px; } .nst-contact-form-row { grid-template-columns: 1fr; gap: 0; } .nst-contact-form-heading h2 { font-size: 27px; } .nst-contact-sidebar { grid-template-columns: 1fr; } .nst-contact-info-card { padding: 27px 22px; } } @media (max-width: 480px) { .nst-contact-container { width: calc(100% - 24px); } .nst-contact-hero h1 { font-size: 36px; } .nst-contact-hero p { margin-top: 18px; font-size: 14px; } .nst-contact-form-card { padding: 23px 17px; } .nst-contact-form input, .nst-contact-form select { height: 50px; } .nst-contact-form textarea { min-height: 135px; } .nst-contact-help-card { padding: 21px; } } /* ========================================================= CONTACT SUCCESS SCREEN ========================================================= */ .nst-contact-success-screen { min-height: 430px; padding: 35px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .nst-success-icon { width: 78px; height: 78px; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #168753; color: #ffffff; font-size: 30px; box-shadow: 0 15px 35px rgba(22, 135, 83, 0.22); } .nst-contact-success-screen .nst-contact-eyebrow { margin-bottom: 12px; } .nst-contact-success-screen h2 { margin: 0 0 14px; color: #10294d; font-size: 32px; line-height: 1.2; letter-spacing: -0.025em; } .nst-contact-success-screen > p { max-width: 520px; margin: 4px auto; color: #718198; font-size: 15px; line-height: 1.7; } .nst-success-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 25px; padding: 12px 18px; border-radius: 10px; background: #f0f8f4; color: #287353; font-size: 13px; font-weight: 600; } .nst-success-note i { color: #168753; } @media (max-width: 600px) { .nst-contact-success-screen { min-height: 380px; padding: 25px 10px; } .nst-success-icon { width: 68px; height: 68px; font-size: 25px; } .nst-contact-success-screen h2 { font-size: 27px; } } /* ===================================================== BACK TO CATEGORY ===================================================== */ .nst-single-back-category { display: inline-block; margin-bottom: 16px; color: #16804F !important; font-size: 12px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .nst-single-back-category:hover { color: #D4AF37 !important; transform: translateX(-2px); } /* ========================================================= COURSE PREVIOUS / NEXT NAVIGATION ========================================================= */ .nst-course-switcher { width: 100%; padding: 22px 0 28px; background: #ffffff; } .nst-course-switcher .nst-course-container { width: min(1160px, calc(100% - 44px)); margin: 0 auto; } /* ========================================================= TOP COURSE COUNT ========================================================= */ .nst-course-switcher-head { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px; } .nst-course-switcher-count { display: flex; align-items: baseline; gap: 5px; color: #68756f; font-size: 11px; font-weight: 600; line-height: 1.2; } .nst-course-switcher-count > span:first-child { color: #142B4F; font-size: 14px; font-weight: 800; } .nst-course-switcher-count strong { color: #142B4F; font-size: 14px; font-weight: 800; } .nst-course-switcher-count span:last-child { margin-left: 2px; } /* ========================================================= PREVIOUS / NEXT BAR ========================================================= */ .nst-course-switcher-bar { display: grid; grid-template-columns: 1fr 38px 1fr; align-items: stretch; overflow: hidden; border: 1px solid #e2e8e5; border-radius: 10px; background: #ffffff; box-shadow: 0 4px 14px rgba(20,43,79,0.05); } /* ========================================================= PREVIOUS / NEXT LINK ========================================================= */ .nst-course-switch { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 11px 16px; background: #ffffff; color: #142B4F; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .nst-course-switch:hover { background: #f6faf8; } /* ========================================================= PREVIOUS ========================================================= */ .nst-course-switch-prev { justify-content: flex-start; } /* ========================================================= NEXT ========================================================= */ .nst-course-switch-next { justify-content: flex-end; text-align: right; } /* ========================================================= ARROW CIRCLE ========================================================= */ .nst-course-switch-arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #f0f7f3; color: #16804F; font-size: 17px; font-weight: 700; line-height: 1; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .nst-course-switch:hover .nst-course-switch-arrow { background: #16804F; color: #ffffff; } .nst-course-switch-prev:hover .nst-course-switch-arrow { transform: translateX(-2px); } .nst-course-switch-next:hover .nst-course-switch-arrow { transform: translateX(2px); } /* ========================================================= COURSE INFORMATION ========================================================= */ .nst-course-switch-info { display: block; min-width: 0; } .nst-course-switch-info small { display: block; margin-bottom: 4px; color: #16804F; font-size: 8px; font-weight: 800; letter-spacing: 0.13em; line-height: 1.2; } .nst-course-switch-info strong { display: block; max-width: 420px; overflow: hidden; color: #142B4F; font-size: 13px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= CENTER DIVIDER ========================================================= */ .nst-course-switch-center { display: flex; align-items: center; justify-content: center; gap: 4px; background: #fafcfb; border-left: 1px solid #e2e8e5; border-right: 1px solid #e2e8e5; } .nst-course-switch-center span { width: 4px; height: 4px; border-radius: 50%; background: #b8c5bf; } /* ========================================================= DISABLED PREVIOUS / NEXT ========================================================= */ .nst-course-switch-disabled { opacity: 0.48; cursor: default; } .nst-course-switch-disabled:hover { background: #ffffff; } .nst-course-switch-disabled:hover .nst-course-switch-arrow { background: #f0f7f3; color: #16804F; transform: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px) { .nst-course-switcher { padding: 20px 0 25px; } .nst-course-switcher .nst-course-container { width: calc(100% - 32px); } .nst-course-switcher-bar { grid-template-columns: 1fr 30px 1fr; } .nst-course-switch { min-height: 62px; padding: 9px 12px; gap: 9px; } .nst-course-switch-arrow { flex-basis: 28px; width: 28px; height: 28px; font-size: 15px; } .nst-course-switch-info strong { max-width: 280px; font-size: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .nst-course-switcher { padding: 17px 0 22px; } .nst-course-switcher .nst-course-container { width: calc(100% - 24px); } /* COURSE COUNT */ .nst-course-switcher-head { margin-bottom: 9px; } .nst-course-switcher-count { font-size: 10px; } .nst-course-switcher-count > span:first-child, .nst-course-switcher-count strong { font-size: 13px; } /* STACK PREVIOUS / NEXT */ .nst-course-switcher-bar { display: grid; grid-template-columns: 1fr; border-radius: 9px; } /* HIDE CENTER */ .nst-course-switch-center { display: none; } /* BOTH ITEMS */ .nst-course-switch { min-height: 58px; padding: 9px 11px; gap: 9px; } /* DIVIDER */ .nst-course-switch-prev { border-bottom: 1px solid #e2e8e5; } /* NEXT */ .nst-course-switch-next { justify-content: flex-start; text-align: left; } /* ARROW */ .nst-course-switch-arrow { flex-basis: 27px; width: 27px; height: 27px; font-size: 14px; } /* TEXT */ .nst-course-switch-info small { margin-bottom: 3px; font-size: 7px; } .nst-course-switch-info strong { max-width: calc(100vw - 100px); font-size: 11px; white-space: nowrap; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .nst-course-switcher .nst-course-container { width: calc(100% - 18px); } .nst-course-switch { min-height: 55px; padding: 8px 9px; } .nst-course-switch-info strong { max-width: calc(100vw - 90px); font-size: 10px; } .nst-course-switch-info small { font-size: 6px; } .nst-course-switch-arrow { width: 25px; height: 25px; flex-basis: 25px; } }