:root {
--background: #68b0d8;
--foreground: #004d77;
--primary-blue: #004d77;
--primary-blue-hover: #003355;
--secondary-blue: #5f9bbd;
--accent-yellow: #ffdc6c;
--accent-yellow-hover: #eebb45;
--white: #ffffff;
--text-dark: #1e293b;
--text-muted: #e0f0f9; --border-radius: 24px;
--border-radius-sm: 16px;
}
body {
background: var(--background);
color: var(--text-dark);
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--foreground);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
} .header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
background-color: var(--primary-blue);
position: fixed; top: 0;
left: 0;
width: 100vw;
z-index: 9999;
box-shadow: 0 4px 20px rgba(0, 77, 119, 0.2);
} body {
padding-top: 90px;
}
.logo {
display: flex;
align-items: center;
}
.logoImageContainer {
display: flex;
align-items: center;
height: 48px;
}
.logoImage {
height: 100%;
width: auto;
object-fit: contain;
}
.nav {
display: flex;
gap: 2rem;
align-items: center;
}
.navLink {
color: var(--white);
font-weight: 500;
transition: opacity 0.2s ease;
font-size: 1rem;
}
.navLink:hover {
opacity: 0.8;
}
.headerButtons {
display: flex;
gap: 1rem;
align-items: center;
}
.supportBtn {
background-color: var(--accent-yellow);
color: var(--primary-blue);
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 700;
transition: background-color 0.2s ease, transform 0.1s ease;
display: inline-block;
}
.supportBtn:hover {
background-color: var(--accent-yellow-hover);
transform: translateY(-2px);
}
.contactBtn {
background-color: transparent;
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 600;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s ease, border-color 0.2s ease;
display: inline-block;
}
.contactBtn:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--white);
}  .footer {
background-color: var(--primary-blue);
color: var(--white);
padding: 4rem 2rem 2rem;
margin-top: auto;
}
.footer .container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer .column h3 {
font-size: 1.25rem;
margin-bottom: 1.5rem;
color: var(--accent-yellow);
font-weight: 700;
}
.linkList {
display: flex;
flex-direction: column;
gap: 1rem;
}
.linkItem {
color: var(--white);
opacity: 0.9;
transition: opacity 0.2s ease, color 0.2s ease;
font-size: 0.95rem;
}
.linkItem:hover {
opacity: 1;
color: var(--accent-yellow);
}
.contactInfo {
margin-bottom: 1.5rem;
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.9;
}
.socials {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.socialLink {
color: var(--white);
text-decoration: underline;
font-size: 0.9rem;
}
.socialLink:hover {
color: var(--accent-yellow);
}
.bottomBar {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.85rem;
opacity: 0.7;
}
.footer .contactBtn {
background-color: var(--accent-yellow);
color: var(--text-dark);
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 600;
display: inline-block;
margin-top: 1rem;
transition: background-color 0.2s ease;
}
.footer .contactBtn:hover {
background-color: var(--accent-yellow-hover);
} .storeBtn {
display: inline-flex;
align-items: center;
justify-content: center; gap: 0.75rem;
background-color: var(--primary-blue);
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius-sm);
transition: transform 0.2s ease, background-color 0.2s ease;
min-width: 200px;
text-decoration: none;
}
.storeBtn:hover {
transform: translateY(-2px);
background-color: #112a40;
}
.storeBtn .icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.storeBtn .icon svg {
height: 100%;
width: auto;
max-width: 100%;
display: block;
}
.storeBtn .textContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.storeBtn .smallText {
font-size: 0.7rem;
line-height: 1.1;
margin-bottom: 2px;
}
.storeBtn .storeName {
font-size: 1.125rem;
line-height: 1.1;
font-weight: 700;
} .hp-main {
display: flex;
flex-direction: column;
gap: 6rem;
padding-bottom: 6rem;
}
.sectionWrapper {
padding: 0 2rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.sectionTitle,
.sectionTitleWhite,
.sectionTitleCenterWhite {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.sectionTitle {
color: var(--primary-blue);
}
.sectionTitleWhite,
.sectionTitleCenterWhite {
color: var(--white);
}
.sectionTitleCenterWhite {
text-align: center;
}
.sectionText,
.sectionTextWhite {
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 2rem;
}
.sectionText {
color: var(--text-dark);
}
.sectionTextWhite {
color: var(--text-muted);
}
.primaryLinkBtn {
background-color: var(--primary-blue);
color: var(--white);
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-weight: 700;
transition: background-color 0.2s ease, transform 0.1s ease;
display: inline-flex;
justify-content: center;
}
.primaryLinkBtn:hover {
background-color: var(--primary-blue-hover);
transform: translateY(-2px);
}
.accentLinkBtn {
background-color: var(--accent-yellow);
color: var(--primary-blue);
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-weight: 700;
transition: background-color 0.2s ease, transform 0.1s ease;
display: inline-flex;
justify-content: center;
}
.accentLinkBtn:hover {
background-color: var(--accent-yellow-hover);
transform: translateY(-2px);
}
.lightCard {
background-color: var(--white);
padding: 4rem;
border-radius: var(--border-radius);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}
.darkCard {
background-color: var(--primary-blue);
padding: 4rem;
border-radius: var(--border-radius);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.hero {
background: var(--background);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.heroContainer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
}
.heroContent {
flex: 1;
max-width: 600px;
}
.heroTitle {
font-size: 4.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
color: var(--white);
text-transform: uppercase;
}
.heroTitleAccent {
color: var(--accent-yellow);
}
.heroSubtitle {
font-size: 1.25rem;
color: var(--white);
margin-bottom: 3rem;
line-height: 1.6;
opacity: 0.9;
}
.heroButtons {
display: flex;
justify-content: flex-start;
gap: 1.5rem;
flex-wrap: wrap;
}
.heroImageWrapper {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.heroImage {
max-width: 100%;
height: auto;
max-height: 750px;
object-fit: contain;
filter: drop-shadow(0 20px 40px rgba(0, 77, 119, 0.3));
}
.founderGrid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: center;
}
.founderImageWrapper {
width: 100%;
display: flex;
justify-content: center;
}
.founderImage {
max-width: 100%;
border-radius: var(--border-radius);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
object-fit: cover;
aspect-ratio: 3/4;
}
.problem {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.problemCard {
background-color: var(--white);
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.problemCard .sectionText {
margin-bottom: 0;
}
.stepsGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 4rem;
}
.stepCard {
background-color: var(--white);
padding: 2.5rem 2rem;
border-radius: var(--border-radius);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease;
}
.stepCard:hover {
transform: translateY(-5px);
}
.stepNumber {
width: 60px;
height: 60px;
background-color: var(--primary-blue);
color: var(--accent-yellow);
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: 1.5rem;
}
.stepTitle {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--primary-blue);
}
.stepDesc {
color: var(--text-dark);
line-height: 1.6;
}  .about-main {
display: flex;
flex-direction: column;
gap: 2rem; padding: 4rem 2rem 6rem;
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.about-pageTitle {
font-size: 3rem;
font-weight: 800;
color: var(--foreground);
text-align: center;
margin-bottom: 2rem;
}
.about-section {
background-color: var(--white);
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: 0 4px 20px rgba(28, 61, 90, 0.05);
}
.about-sectionTitle {
font-size: 2rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.about-sectionTitle::before {
content: '';
display: block;
width: 8px;
height: 32px;
background-color: var(--accent-yellow);
border-radius: 4px;
}
.about-text {
font-size: 1.125rem;
line-height: 1.7;
color: var(--text-dark);
}
.directionsGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.directionCard {
background-color: var(--background);
padding: 2rem;
border-radius: var(--border-radius-sm);
border-top: 4px solid var(--primary-blue);
}
.directionTitle {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--foreground);
}
.highlightBox {
background-color: rgba(250, 211, 91, 0.15);
padding: 1.5rem;
border-radius: var(--border-radius-sm);
border-left: 4px solid var(--accent-yellow);
margin-top: 2rem;
}
.legalGrid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.legalItem {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding-bottom: 1rem;
}
.legalItem:last-child {
border-bottom: none;
padding-bottom: 0;
}
.legalLabel {
font-weight: 600;
color: var(--secondary-blue);
min-width: 120px;
}
.legalValue {
font-weight: 500;
color: var(--text-dark);
flex: 1;
}
@media (max-width: 768px) {
.about-section {
padding: 2rem;
}
} .contact-main {
display: flex;
flex-direction: column;
padding: 4rem 2rem 6rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.contact-pageTitle {
font-size: 3rem;
font-weight: 800;
color: var(--foreground);
text-align: center;
margin-bottom: 2rem; }
.contentWrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.infoColumn {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.infoBlock {
background-color: var(--white);
padding: 2rem;
border-radius: var(--border-radius-sm);
box-shadow: 0 4px 20px rgba(28, 61, 90, 0.05);
}
.infoTitle {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1rem;
}
.infoText {
color: var(--text-dark);
line-height: 1.6;
}
.infoText a {
color: var(--primary-blue);
font-weight: 600;
text-decoration: underline;
}
.infoText a:hover {
color: var(--primary-blue-hover);
}
.contact-socials {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.contact-socialLink {
display: inline-block;
background-color: var(--background);
color: var(--primary-blue);
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 600;
transition: background-color 0.2s ease;
}
.contact-socialLink:hover {
background-color: var(--primary-blue);
color: var(--white);
}
.formColumn {
background-color: var(--white);
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: 0 10px 40px rgba(28, 61, 90, 0.08);
}
.formTitle {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--foreground);
} .blog-main {
padding: 6rem 2rem;
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.pageHeader {
text-align: center;
margin-bottom: 4rem;
}
.blog-pageTitle {
font-size: 3rem;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 1rem;
}
.pageDesc {
font-size: 1.25rem;
color: var(--text-dark);
}
.postsList {
display: flex;
flex-direction: column;
gap: 2rem;
}
.postCard {
background: white;
padding: 2.5rem;
border-radius: var(--border-radius);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
gap: 1rem;
}
.postCard:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.postDate {
font-size: 0.875rem;
color: var(--secondary-blue);
}
.postTitle {
font-size: 1.75rem;
color: var(--primary-blue);
font-weight: 700;
}
.postExcerpt {
color: var(--text-dark);
line-height: 1.6;
}
.readMore {
color: var(--accent-yellow-hover);
font-weight: bold;
margin-top: 1rem;
display: inline-block;
}
.article {
background: white;
padding: 4rem;
border-radius: var(--border-radius);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin-top: 2rem;
overflow: hidden;
}
.articleHeader {
margin-bottom: 3rem;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 2rem;
}
.articleTitle {
font-size: 2.5rem;
color: var(--primary-blue);
margin-bottom: 1.5rem;
font-weight: 800;
}
.articleImage {
width: 100%;
max-height: 500px;
object-fit: cover;
border-radius: var(--border-radius);
margin-bottom: 2rem;
}
.articleContent {
font-size: 1.125rem;
color: var(--text-dark);
line-height: 1.8;
}
.articleContent p {
margin-bottom: 1.5rem;
}
.articleContent h2 {
color: var(--primary-blue);
font-size: 1.75rem;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.articleContent h3 {
color: var(--primary-blue);
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.articleContent ul,
.articleContent ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.articleContent li {
margin-bottom: 0.5rem;
}
.backLink {
display: inline-flex;
align-items: center;
color: var(--primary-blue);
text-decoration: none;
font-weight: 600;
margin-bottom: 2rem;
transition: opacity 0.2s;
}
.backLink:hover {
opacity: 0.8;
} @media (max-width: 768px) {
.blog-main {
padding: 3rem 1rem;
}
.article {
padding: 2rem 1.25rem;
}
.articleTitle {
font-size: 1.75rem;
}
.articleImage {
border-radius: var(--border-radius-sm);
margin-left: -1.25rem;
margin-right: -1.25rem;
width: calc(100% + 2.5rem);
max-width: none;
}
.articleContent {
font-size: 1rem;
}
.articleContent img {
max-width: 100%;
height: auto;
}
}
.emptyState {
text-align: center;
padding: 4rem;
background: white;
border-radius: var(--border-radius);
color: var(--text-muted);
} .pp-main {
padding: 4rem 2rem 6rem;
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.pp-pageTitle {
font-size: 3rem;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 2rem; }
.pp-content {
background-color: var(--white);
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: 0 4px 20px rgba(0, 77, 119, 0.05);
}
.pp-text {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-dark);
margin-bottom: 1.5rem;
}
.pp-heading {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-blue);
margin-top: 2rem;
margin-bottom: 1rem;
} .burgerBtn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
z-index: 200;
}
.burgerLine {
display: block;
width: 24px;
height: 2px;
background-color: var(--white);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.burgerBtn--active .burgerLine:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.burgerBtn--active .burgerLine:nth-child(2) {
opacity: 0;
}
.burgerBtn--active .burgerLine:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 900px) {
.burgerBtn {
display: flex;
}
.nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--primary-blue);
flex-direction: column;
padding: 1.5rem 2rem 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
gap: 0;
z-index: 150;
}
.nav--open {
display: flex;
}
.nav .navLink {
padding: 1rem 0;
font-size: 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
}
.nav .navLink:last-child {
border-bottom: none;
}
}
@media (max-width: 600px) {
.header .contactBtn {
display: none;
}
.headerButtons {
flex: 1;
justify-content: center;
}
.burgerBtn {
position: absolute;
right: 1rem;
}
} @media (max-width: 992px) {
.heroContainer {
flex-direction: column;
text-align: center;
}
.heroContent {
max-width: 100%;
}
.heroButtons {
justify-content: center;
}
.heroImage {
max-height: 400px;
margin-top: 2rem;
}
.founderGrid {
grid-template-columns: 1fr;
gap: 2rem;
}
.problem {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 768px) {
.hero {
padding: 2rem 0 3rem;
}
.heroTitle {
font-size: 3rem;
}
.heroSubtitle {
font-size: 1.05rem;
margin-bottom: 2rem;
}
.heroImageWrapper {
justify-content: center;
}
.heroImage {
max-height: none;
max-width: 90%;
}
.heroButtons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.storeBtn {
min-width: 220px;
}
.stepsGrid {
grid-template-columns: 1fr;
}
.hp-main .lightCard,
.hp-main .darkCard {
padding: 2.5rem 1.5rem;
}
.hp-main {
gap: 3rem;
padding-bottom: 3rem;
}
.sectionTitle,
.sectionTitleWhite,
.sectionTitleCenterWhite {
font-size: 1.75rem;
}
.sectionText,
.sectionTextWhite {
font-size: 1rem;
} .founderGrid {
display: flex;
flex-direction: column;
}
.founderContent {
display: contents;
}
.founderContent .sectionTitleWhite {
order: 1;
}
.founderImageWrapper {
order: 2;
max-width: 280px;
margin: 0 auto;
}
.founderContent .sectionTextWhite {
order: 3;
}
.founderImage {
aspect-ratio: 1/1;
border-radius: 50%;
max-width: 200px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.heroTitle {
font-size: 2.5rem;
}
.sectionWrapper {
padding: 0 1rem;
}
.hp-main .lightCard,
.hp-main .darkCard {
padding: 2rem 1.25rem;
}
} @media (max-width: 900px) {
.contentWrapper {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.formColumn {
padding: 2rem;
}
.contact-pageTitle {
font-size: 2rem;
margin-bottom: 2rem;
}
} .faq-main {
padding: 4rem 2rem 6rem;
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.faq-pageTitle {
font-size: 3rem;
font-weight: 800;
color: var(--foreground);
text-align: center;
margin-bottom: 3rem;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.faq-item {
background-color: rgba(0, 77, 119, 0.75); border-radius: 20px; overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 0.5rem; border: none;
}
.faq-item:hover {
background-color: rgba(0, 77, 119, 0.85); }
.faq-item.active {
background-color: rgba(0, 77, 119, 0.75);
box-shadow: none;
transform: none;
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.25rem; background: transparent;
border: none;
border-bottom: 1px solid transparent; cursor: pointer;
font-family: inherit;
font-size: 1rem; font-weight: 700;
color: var(--white); text-align: left;
gap: 1.5rem;
transition: all 0.3s ease;
}
.faq-item.active .faq-question {
background-color: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: var(--white);
}
.faq-chevron {
width: 18px; height: 18px;
flex-shrink: 0;
color: var(--white); transition: transform 0.3s ease;
}
.faq-item.active .faq-chevron {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 1.25rem; }
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0.75rem 1.25rem; }
.faq-answer p {
font-size: 1rem;
line-height: 1.7;
color: var(--white); }
.faq-footer-block {
text-align: center;
margin-top: 4rem;
background-color: var(--primary-blue);
padding: 3rem;
border-radius: var(--border-radius);
}
.faq-footer-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--white);
margin-bottom: 1rem;
}
.faq-footer-text {
font-size: 1.05rem;
color: var(--text-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.faq-pageTitle {
font-size: 2rem;
}
.faq-question {
font-size: 0.95rem;
padding: 1rem 1.25rem;
}
.faq-footer-block {
padding: 2rem 1.5rem;
}
} @media (max-width: 768px) {
.footer .contactBtn {
display: block;
text-align: center;
width: 100%;
}
.footer .column {
text-align: center;
}
.footer .socials {
justify-content: center;
}
} @media (max-width: 1024px) {
.heroTitle {
font-size: 3.5rem;
}
}
@media (max-width: 768px) {
.heroTitle {
font-size: 2.75rem;
}
.sectionTitle,
.sectionTitleWhite,
.sectionTitleCenterWhite,
.about-pageTitle,
.contact-pageTitle,
.blog-pageTitle,
.faq-pageTitle,
.pp-pageTitle,
.articleTitle {
.about-pageTitle,
.contact-pageTitle,
.blog-pageTitle,
.faq-pageTitle,
.pp-pageTitle,
.articleTitle {
font-size: 2rem;
text-align: center;
margin-bottom: 1.5rem !important; }
.about-main,
.faq-main,
.blog-main,
.pp-main,
.contact-main {
padding: 1.5rem 1.5rem !important; }
.infoBlock, 
.formColumn,
.about-section,
.faq-item,
.article,
.pp-content {
padding: 1.5rem;
}
.lightCard, .darkCard {
padding: 2rem;
}
.heroContainer {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.heroButtons {
justify-content: center;
}
.heroImageWrapper {
justify-content: center;
}
}
@media (max-width: 480px) {
.heroSection {
padding: 3rem 0.25rem 5rem;
}
.heroTitle {
font-size: 22vw; max-width: none;
width: 100%;
line-height: 0.9;
letter-spacing: -0.05em;
text-transform: uppercase;
display: block;
}
.heroTitle br {
display: block;
content: "";
margin-top: 0;
}
.sectionTitle,
.sectionTitleWhite,
.sectionTitleCenterWhite,
.about-pageTitle,
.contact-pageTitle,
.blog-pageTitle,
.faq-pageTitle,
.pp-pageTitle,
.articleTitle {
font-size: clamp(1.2rem, 7vw, 1.75rem); word-wrap: break-word; hyphens: auto;
text-align: center;
margin-bottom: 1.25rem !important; }
.about-main,
.faq-main,
.blog-main,
.contact-main,
.pp-main {
padding: 1.25rem 1rem !important; gap: 0.75rem !important; }
.infoBlock, 
.formColumn,
.about-section,
.article,
.pp-content {
padding: 1rem;
}
.infoColumn {
gap: 0.75rem !important; }
.contentWrapper,
.directionsGrid,
.faq-list {
gap: 0.75rem !important; display: flex;
flex-direction: column; width: 100%;
box-sizing: border-box;
} }