/* CSS RESET & NORMALIZATION */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
background: #F9F8F6;
color: #254365;
}
input, button, textarea, select {
font: inherit;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: none;
}
img {
max-width: 100%;
display: block;
border: 0;
}
/* FONT FACES (Google Fonts import required in ) */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
background: #F9F8F6;
color: #254365;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
color: #315A7D;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}
h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}
h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 12px;
}
p, ul, li {
font-size: 1rem;
color: #315A7D;
}
p {
margin: 0 0 14px 0;
}
.strong, strong {
font-weight: 700;
}
.subheadline, .cta-subheadline {
color: #595751;
font-size: 1.1rem;
margin-bottom: 16px;
line-height: 1.6;
}
.cta-subheadline {
color: #254365;
font-size: 1.2rem;
}
/* SECTION & CONTAINER LAYOUTS */
.container {
width: 100%;
max-width: 1100px;
padding: 0 16px;
margin: 0 auto;
}
.section {
margin-bottom: 60px;
padding: 40px 20px;
border-radius: 24px;
background: #FFF;
box-shadow: 0 2px 16px rgba(246,179,24,0.05);
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.text-section {
gap: 10px;
}
.text-image-section {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
/* CARDS & FLEXBOX LAYOUTS */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
margin-bottom: 20px;
position: relative;
border-radius: 20px;
background: #fff;
box-shadow: 0 4px 18px rgba(49,90,125,0.09);
transition: box-shadow 0.2s;
padding: 24px;
}
.card:hover {
box-shadow: 0 8px 32px rgba(246,179,24,0.15);
}
.content-grid, .blog-list, .service-cards, .feature-grid, .testimonials {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.service-cards {
flex-wrap: wrap;
gap: 24px;
}
.service-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 16px rgba(49,90,125,0.08);
padding: 24px 24px 16px 24px;
margin-bottom: 20px;
min-width: 260px;
flex: 1 1 280px;
display: flex;
flex-direction: column;
gap: 16px;
transition: box-shadow 0.2s, transform 0.2s;
}
.service-card:hover {
box-shadow: 0 8px 28px rgba(246,179,24,0.18);
transform: translateY(-4px) scale(1.015);
}
.blog-list {
gap: 24px;
width: 100%;
}
.blog-post-summary {
flex: 1 1 320px;
background: #FFF;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(49,90,125,0.07);
padding: 24px 18px 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow 0.2s, transform 0.2s;
}
.blog-post-summary:hover {
box-shadow: 0 6px 16px rgba(246,179,24,0.15);
transform: translateY(-2px) scale(1.01);
}
.feature-grid {
flex-wrap: wrap;
gap: 24px;
margin-bottom: 10px;
}
.feature-grid li {
background: #FFF8E5;
border-radius: 18px;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 14px;
font-size: 1rem;
box-shadow: 0 2px 8px rgba(246,179,24,0.08);
}
.feature-list li {
margin-bottom: 12px;
font-size: 1rem;
color: #315A7D;
display: flex;
align-items: flex-start;
gap: 9px;
}
.package-includes-list {
margin-top: 8px;
margin-bottom: 0;
padding-left: 18px;
color: #254365;
}
.package-includes-list li {
list-style: disc;
margin-bottom: 4px;
font-size: 0.97rem;
}
.team-list, .workshop-details-list, .contact-details {
margin-top: 10px;
margin-bottom: 2px;
}
.team-list li,
.workshop-details-list li,
.contact-details li {
margin-bottom: 7px;
display: flex;
align-items: center;
gap: 10px;
color: #315A7D;
font-size: 1rem;
}
.user-showcases-listing {
margin-top: 24px;
}
.user-showcases-listing h3 {
margin-bottom: 10px;
}
.user-showcases-listing ul {
margin-left: 16px;
}
.user-showcases-listing li {
list-style: disc;
color: #254365;
margin-bottom: 7px;
}
.community-benefits {
margin-top: 12px;
background: #FFF8E5;
border-radius: 15px;
padding: 18px 20px;
color: #315A7D;
}
/* TESTIMONIALS */
.testimonials {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.testimonial-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(49,90,125,0.07);
color: #254365;
margin-bottom: 20px;
flex: 1 1 280px;
min-width: 260px;
transition: box-shadow 0.2s, transform 0.2s;
}
.testimonial-card:hover {
box-shadow: 0 8px 32px rgba(246,179,24,0.15);
transform: translateY(-2px) scale(1.01);
}
.testimonial-card p {
font-size: 1.15rem;
font-style: italic;
color: #315A7D;
margin-bottom: 6px;
}
.testimonial-card span {
font-size: 1rem;
color: #757575;
}
/* HEADER & NAVIGATION */
header {
width: 100%;
background: #FFF;
box-shadow: 0 2px 14px rgba(49,90,125,0.09);
}
.main-nav {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 0 16px 0;
justify-content: flex-start;
}
.main-nav a {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 1rem;
color: #315A7D;
padding: 6px 15px;
border-radius: 14px;
transition: background 0.14s, color 0.13s;
font-weight: 500;
position: relative;
}
.main-nav a.cta-nav {
color: #FFF;
background: #F6B318;
box-shadow: 0 2px 8px rgba(246,179,24,0.16);
font-weight: 700;
border-radius: 22px;
margin-left: 16px;
transition: background 0.14s, color 0.13s;
}
.main-nav a.cta-nav:hover,
.main-nav a.cta-nav:focus {
background: #ed9613;
color: #FFF;
}
.main-nav a:hover, .main-nav a:focus {
background: #FFF5DE;
color: #F6B318;
}
header img {
height: 42px;
width: auto;
margin-right: 16px;
border-radius: 10px;
}
/* MOBILE MENU STYLES */
.mobile-menu-toggle {
display: none;
font-size: 2rem;
background: none;
border: none;
color: #F6B318;
margin-left: auto;
cursor: pointer;
z-index: 1502;
transition: background 0.13s;
border-radius: 8px;
padding: 8px 14px;
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {
background: #FFF5DE;
}
.mobile-menu {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background: #fff;
box-shadow: 0 16px 48px rgba(49,90,125,0.19);
z-index: 2100;
transform: translateX(-100vw);
transition: transform 0.36s cubic-bezier(.5,1.6,.8,1), box-shadow 0.2s;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0;
}
.mobile-menu.open {
transform: translateX(0);
box-shadow: 0 4px 22px rgba(46,36,11,0.19);
}
.mobile-menu-close {
align-self: flex-end;
font-size: 2.4rem;
background: none;
border: none;
color: #F6B318;
margin: 18px 22px 6px 0;
cursor: pointer;
transition: background 0.13s;
border-radius: 8px;
padding: 4px 12px;
z-index: 2200;
}
.mobile-menu-close:focus,
.mobile-menu-close:hover {
background: #FFF5DE;
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
margin-top: 30px;
padding-left: 28px;
}
.mobile-nav a {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 1.08rem;
color: #315A7D;
padding: 12px 0px 12px 0px;
border-radius: 16px;
transition: background 0.14s, color 0.15s;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
background: #FFF5DE;
color: #F6B318;
}
@media (max-width: 1020px) {
.main-nav {
gap: 8px;
padding-left: 10px;
}
}
@media (max-width: 900px) {
.main-nav {
gap: 7px;
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 820px) {
.container {
max-width: 98vw;
padding-left: 0; padding-right: 0;
}
.main-nav a {
font-size: 0.98rem;
padding: 5px 7px;
}
.main-nav a.cta-nav {
margin-left: 6px;
font-size: 1rem;
}
}
@media (max-width: 768px) {
.main-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
}
.section {
margin-bottom: 38px;
padding: 28px 8px;
}
.container {
max-width: 100vw;
padding-left: 0;
padding-right: 0;
}
.content-wrapper, .text-section {
gap: 18px;
padding-left: 10px;
padding-right: 10px;
}
.feature-grid, .service-cards, .content-grid, .testimonials, .blog-list {
flex-direction: column;
align-items: stretch;
gap: 18px;
}
.service-card, .testimonial-card, .card {
min-width: unset;
width: 100%;
padding: 18px 10px 13px 13px;
}
.blog-post-summary {
min-width: unset;
width: 100%;
padding: 18px 8px 11px 10px;
}
.card-container {
flex-direction: column;
gap: 18px;
}
.text-image-section {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
}
/* BUTTONS & CTA */
.cta-main, .cta-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 34px;
border-radius: 32px;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 1.11rem;
font-weight: 700;
border: none;
cursor: pointer;
transition: background 0.2s, box-shadow 0.15s, color 0.17s, transform 0.16s;
margin-top: 8px;
margin-right: 12px;
box-shadow: 0 2px 12px rgba(49,90,125,0.08);
letter-spacing: 0.01em;
}
.cta-main {
background: #F6B318;
color: #fff;
}
.cta-main:hover, .cta-main:focus {
background: #ed9613;
color: #fff;
transform: translateY(-2px) scale(1.03);
box-shadow: 0 4px 24px rgba(246,179,24,0.12);
}
.cta-secondary {
background: #fff5de;
color: #F6B318;
border: 2px solid #F6B318;
margin-left: 0;
}
.cta-secondary:hover, .cta-secondary:focus {
background: #F6B318;
color: #FFF;
border-color: #ed9613;
transform: translateY(-1px) scale(1.02);
}
/* LINKS */
a {
transition: color 0.13s, background 0.11s;
}
a:focus {
outline: 2px solid #F6B318;
}
/* FOOTER */
footer {
margin-top: 50px;
background: #315A7D;
color: #FFF;
border-radius: 27px 27px 0 0;
box-shadow: 0 -2px 36px rgba(49,90,125,0.07);
padding: 26px 0 18px 0;
}
.footer-logo {
height: 48px;
margin-bottom: 18px;
}
.footer-menu {
display: flex;
gap: 18px;
margin-bottom: 18px;
}
.footer-menu a {
color: #FFF8E5;
border-radius: 12px;
padding: 5px 13px;
font-size: 1rem;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
.footer-menu a:hover, .footer-menu a:focus {
background: #F6B318;
color: #254365;
}
.footer-contact ul {
display: flex;
flex-direction: column;
gap: 9px;
font-size: 1rem;
list-style: none;
margin: 0;
margin-bottom: 8px;
}
.footer-contact li {
color: #FFF8E5;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.98rem;
}
footer img {
height: 24px;
margin-right: 8px;
}
.copyright {
margin-top: 20px;
font-size: 0.98rem;
color: #FFF8E5;
}
@media (max-width: 820px) {
.footer-menu {
flex-direction: column;
gap: 8px;
}
.footer-logo {
margin-bottom: 10px;
}
}
@media (max-width: 600px) {
footer {
padding: 22px 0 12px 0;
border-radius: 16px 16px 0 0;
}
.footer-menu {
flex-direction: column;
gap: 8px;
margin-bottom: 11px;
}
.footer-contact ul {
gap: 5px;
}
}
/* COOKIE CONSENT BANNER */
.cookie-banner {
position: fixed;
left: 16px; right: 16px; bottom: 16px;
z-index: 5000;
background: #FFF8E5;
border-radius: 22px;
box-shadow: 0 6px 24px rgba(49,90,125,0.13);
padding: 18px 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
animation: cookieAppear 0.38s cubic-bezier(.55,1.8,.43,1) both;
}
@keyframes cookieAppear {
from { opacity: 0; transform: translateY(48px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cookie-banner p {
color: #315A7D;
font-size: 1rem;
margin-bottom: 0;
}
.cookie-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.cookie-btn {
padding: 9px 26px;
font-size: 1rem;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
border-radius: 16px;
border: none;
cursor: pointer;
margin-right: 5px;
font-weight: 600;
transition: background 0.18s, color 0.14s, box-shadow 0.19s, transform 0.13s;
}
.cookie-btn.accept {
background: #F6B318;
color: #FFF;
}
.cookie-btn.accept:hover,
.cookie-btn.accept:focus {
background: #ed9613;
box-shadow: 0 2px 16px rgba(246,179,24,0.20);
}
.cookie-btn.reject {
background: #fff;
color: #F6B318;
border: 2px solid #F6B318;
}
.cookie-btn.reject:hover,
.cookie-btn.reject:focus {
background: #F6B318;
color: #fff;
border-color: #ed9613;
}
.cookie-btn.settings {
background: #FFF;
color: #315A7D;
border: 2px solid #B8C3CF;
}
.cookie-btn.settings:hover,
.cookie-btn.settings:focus {
background: #315A7D;
color: #FFF;
border-color: #315A7D;
}
/* COOKIE MODAL */
.cookie-modal-overlay {
position: fixed;
z-index: 9999;
top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(49,90,125, 0.16);
display: flex;
align-items: flex-end;
justify-content: center;
animation: fadeinModal 0.27s both;
}
@keyframes fadeinModal { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal {
background: #FFF8E5;
border-radius: 25px 25px 4px 4px;
box-shadow: 0 8px 32px rgba(49,90,125,0.12);
padding: 34px 30px 24px 30px;
min-width: 330px;
max-width: 92vw;
margin-bottom: 60px;
position: relative;
animation: modalUp 0.35s cubic-bezier(.52,1.5,.44,1.01) both;
}
@keyframes modalUp {
from { opacity: 0; transform: translateY(70px) scale(.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cookie-modal h2 {
font-size: 1.3rem;
color: #315A7D;
margin-bottom: 14px;
}
.cookie-category {
display: flex;
align-items: center;
gap: 13px;
background: #fff;
border-radius: 12px;
padding: 13px 11px;
box-shadow: 0 1px 6px rgba(49,90,125,0.04);
margin-bottom: 9px;
}
.cookie-cat-label {
font-family: 'Montserrat';
font-weight: 600;
color: #315A7D;
}
.cookie-cat-toggle {
margin-left: auto;
}
.toggle-switch {
display: inline-block;
width: 38px;
height: 20px;
position: relative;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0;
right: 0; bottom: 0;
background:#ddd;
border-radius: 20px;
transition: background 0.23s;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 16px; width: 16px;
left: 2px; bottom: 2px;
background: #F6B318;
border-radius: 50%;
transition: transform 0.25s, background 0.15s;
}
.toggle-switch input:checked + .toggle-slider {
background: #FFE4A3;
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(18px);
background: #F6B318;
}
.cookie-modal .cookie-btn {
margin-top: 24px;
}
.cookie-modal .cookie-btn.settings {
margin-left: 12px;
}
.cookie-modal .cookie-btn.reject,
.cookie-modal .cookie-btn.accept {
margin-right: 8px;
}
@media (max-width: 510px) {
.cookie-modal {
padding: 17px 5vw 15px 5vw;
min-width: unset;
}
.cookie-banner {
left: 2vw; right:2vw; bottom: 7px;
padding: 12px 6vw;
border-radius: 10vw;
font-size: 0.98rem;
}
}
/* Accessibilty improvements */
:focus {
outline: 2px solid #F6B318;
outline-offset: 3px;
}
/* Visual hierarchy & spacing */
.main-nav a,
.footer-menu a,
.cta-main,
.cta-secondary,
.cookie-btn {
transition: background 0.14s, color 0.13s, box-shadow 0.16s, transform 0.14s;
}
.content-wrapper > *:not(:last-child) {
margin-bottom: 0;
}
/* Util: Hide visually but keep accessible */
.visually-hidden {
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
border:0 !important;
}