html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
@media (min-width: 640px) {
html {
scroll-padding-top: 96px;
}
}
@media (min-width: 768px) {
html {
scroll-padding-top: 100px;
}
} .hero-scroll-indicator {
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: opacity 0.3s ease;
}
@media (min-height: 768px) {
.hero-scroll-indicator {
bottom: 2.25rem;
}
} @media (max-height: 660px) {
.hero-scroll-indicator {
opacity: 0;
pointer-events: none;
}
} .timeline-dot-pulse {
position: absolute;
}
.timeline-dot-pulse::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(34, 35, 36, 0.45);
transform: translate(-50%, -50%) scale(1);
animation: timelineRipple 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
pointer-events: none;
z-index: -1;
}
@keyframes timelineRipple {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
70%, 100% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
}
}
body {
background-color: #F7F6F3;
}
.bg-F7F6F3 {
background-color: #F7F6F3;
} .container {
width: 100%;
max-width: 1440px; padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
} @media (max-width: 640px) {
.container {
padding-left: 16px;
padding-right: 16px;
}
} #site-header {
background-color: #000000;
}
@media (min-width: 1024px) {
#site-header {
background-color: rgba(0, 0, 0, 0.4);
}
}
#site-header.scrolled {
background-color: #000000;
} #menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
opacity: 0;
}
#menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} #mobile-menu::-webkit-scrollbar {
width: 4px;
}
#mobile-menu::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
#mobile-menu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
} .font-heading {
font-family: "Abhaya Libre", serif;
font-weight: 800;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.7s ease both;
}
.animate-fade-in-up-delay-1 {
animation-delay: 0.15s;
}
.animate-fade-in-up-delay-2 {
animation-delay: 0.30s;
}
.animate-fade-in-up-delay-3 {
animation-delay: 0.45s;
} .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible,
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 700;
transition: 0.35s all;
border-width: 2px;
border-style: solid;
}
.btn svg {
width: 18px;
min-width: 18px;
height: auto;
}
.btn.btn-primary {
background: #fff;
border-color: #fff;
color: #222324;
}
.btn.btn-primary:hover {
background: #222324;
color: #fff;
border-color: #222324;
}
.btn.btn-primary-outline {
color: #fff;
border-color: #fff;
background: transparent;
}
.btn.btn-primary-outline:hover {
color: #222324;
border-color: #fff;
background: #fff;
}
.btn.btn-secondary {
background: #222324;
border-color: #222324;
color: #fff;
}
.btn.btn-secondary:hover {
background: #000;
color: #fff;
border-color: #000;
}
.btn.btn-secondary-outline {
color: #222324;
border-color: #222324;
background: transparent;
}
.btn.btn-secondary-outline:hover {
color: #fff;
border-color: #222324;
background: #222324;
} .scrollbar-none::-webkit-scrollbar {
display: none;
}
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
}
#process-slider-container.dragging {
scroll-snap-type: none !important;
user-select: none !important;
cursor: grabbing !important;
} a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
} @media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.parallax-bg {
transform: none !important;
transition: none !important;
}
.animate-fade-in-up,
.animate-fade-in-up-delay-1,
.animate-fade-in-up-delay-2,
.animate-fade-in-up-delay-3 {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.animate-bounce {
animation: none !important;
}
} .nav-link-active {
position: relative;
}
.nav-link-active::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 2px;
background-color: #ffffff;
} footer a[href="about.html"] {
text-decoration: none;
} section.bg-black a:focus-visible,
section[class*="bg-black"] a:focus-visible {
outline-color: #ffffff;
} .section-divider {
width: 48px;
height: 1px;
background-color: rgba(34, 35, 36, 0.2);
} .space-y-0>.grid+.grid {
margin-top: 0;
} #testimonial-track {
display: flex;
}
#testimonial-track .testimonial-slide {
flex-shrink: 0;
width: 100%;
}
@media (min-width: 768px) {
#testimonial-track .testimonial-slide {
width: 50%;
}
}
@media (min-width: 1024px) {
#testimonial-track .testimonial-slide {
width: 33.333333%;
}
}
#testimonial-viewport {
overflow: hidden;
} @keyframes logoMarquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.logo-marquee-track {
display: flex;
width: max-content;
animation: logoMarquee 20s linear infinite;
}
.logo-marquee-track:hover {
animation-play-state: paused;
} .wpcf7-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.majestic-input {
width: 100% !important;
background-color: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 0.5rem !important;
padding: 0.875rem 1rem !important;
font-size: 0.875rem !important;
color: #ffffff !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
box-sizing: border-box !important;
}
.majestic-input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
.majestic-input:focus {
outline: none !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
select.majestic-input {
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 1.25rem !important;
padding-right: 2.5rem !important;
cursor: pointer !important;
}
select.majestic-input option {
background-color: #141B26 !important;
color: #ffffff !important;
} .wpcf7-radio {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.75rem !important;
}
.wpcf7-radio .wpcf7-list-item {
margin: 0 !important;
display: inline-block !important;
} .wpcf7-radio .wpcf7-list-item label {
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.625rem 1.25rem !important;
border-radius: 0.5rem !important;
background-color: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
color: #ffffff !important;
transition: all 0.2s ease !important;
user-select: none !important;
}
.wpcf7-radio .wpcf7-list-item label:hover {
border-color: rgba(255, 255, 255, 0.4) !important;
} .wpcf7-radio .wpcf7-list-item input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 0.875rem !important;
height: 0.875rem !important;
min-width: 0.875rem !important;
border-radius: 50% !important;
border: 1px solid currentColor !important;
background-color: transparent !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: border-color 0.2s ease !important;
} .wpcf7-radio .wpcf7-list-item input[type="radio"]::after {
content: "" !important;
display: block !important;
width: 0.5rem !important;
height: 0.5rem !important;
border-radius: 50% !important;
background-color: #000000 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) scale(0) !important;
transition: transform 0.15s ease !important;
}
.wpcf7-radio .wpcf7-list-item input[type="radio"]:checked::after {
transform: translate(-50%, -50%) scale(1) !important;
background-color: #000000 !important;
} .wpcf7-radio .wpcf7-list-item label:has(input[type="radio"]:checked) {
background-color: #ffffff !important;
color: #141B26 !important;
border-color: #ffffff !important;
font-weight: 600 !important;
}
.wpcf7-radio .wpcf7-list-item input[type="radio"]:checked {
border-color: #141B26 !important;
color: #141B26 !important;
} .wpcf7-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
padding: 0.875rem 2rem !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
background: #ffffff !important;
color: #141B26 !important;
border: 2px solid #ffffff !important;
border-radius: 0.5rem !important;
cursor: pointer !important;
transition: all 0.35s ease !important;
}
.wpcf7-submit:hover {
background: #222324 !important;
color: #ffffff !important;
border-color: #222324 !important;
}
.wpcf7-not-valid-tip {
color: #ef4444 !important;
font-size: 0.75rem !important;
margin-top: 0.25rem !important;
} .cf7-referral-box {
background-color: #000000 !important;
}
#other-budget-field,
#other-approval-field,
#other-hear-field,
#friend-referral-fields {
display: block;
}
#other-budget-field.hidden,
#other-approval-field.hidden,
#other-hear-field.hidden,
#friend-referral-fields.hidden {
display: none !important;
}
.wpcf7-response-output {
border-radius: 0.5rem !important;
font-size: 0.875rem !important;
padding: 0.75rem 1rem !important;
margin-top: 1rem !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
background-color: #000000 !important;
}