/* Custom CSS for Farntet (formerly MSA Consultants) */
/* Logo styling */
.header__logo-link {
position: relative;
display: inline-flex;
align-items: center;
}
.header__logo {
width: 60px;
height: auto;
position: relative;
z-index: 1;
transition: opacity 0.3s ease;
}
.header__logo-hover {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: auto;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
}
.header__text-logo {
width: 120px;
height: auto;
margin-left: 10px;
}
/* SVG animation styles */
.cls-1 {
opacity: 0.5;
fill: #fff;
stroke: #fff;
stroke-width: 0.5;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}
.cls-2 {
fill: #fff;
stroke: #fff;
stroke-width: 0.5;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}
/* Hover effect */
.header__logo-link:hover .cls-1 {
animation: dash 2s linear infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1000;
}
}
/* Main color scheme */
:root {
--main-bg-color: #101014;
--accent-color: #ffffff;
--text-color: #ffffff;
--overlay-color: rgba(16, 16, 20, 0.7);
}
/* Global styles */
body {
background-color: var(--main-bg-color);
color: var(--text-color);
}
/* Hero section styling */
.s-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
}
.s-hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.s-hero__container {
position: relative;
z-index: 1;
}
/* Service boxes styling */
.s-hero-item {
background: var(--overlay-color);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 20px;
transition: transform 0.3s ease;
}
.s-hero-item:hover {
transform: translateY(-10px);
}
/* Footer styling */
.footer {
background-color: var(--main-bg-color);
padding: 50px 0;
}
.footer__logo {
max-width: 100px;
margin-bottom: 20px;
}
.footer__links {
margin: 20px 0;
}
.footer__line {
border-color: rgba(255, 255, 255, 0.1);
margin: 20px 0;
}
/* Custom animations for Divi */
.fade-in {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.slide-up {
animation: slideUp 1s ease-in-out;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Divi-specific overrides */
#main-header {
background-color: var(--main-bg-color) !important;
}
.et_pb_section {
background-color: var(--main-bg-color) !important;
}
.et_pb_fullwidth_header {
padding: 0 !important;
}
/* Dark mode text */
h1, h2, h3, h4, h5, h6, p, li, a {
color: var(--text-color) !important;
}
/* Button styling */
.et_pb_button {
border-radius: 0 !important;
border: 1px solid var(--accent-color) !important;
color: var(--accent-color) !important;
transition: all 0.3s ease !important;
}
.et_pb_button:hover {
background-color: var(--accent-color) !important;
color: var(--main-bg-color) !important;
}
/* Video background */
.et_pb_section_video_bg {
opacity: 0.7;
}
/* Glass morphism effect for Divi modules */
.glass-effect {
background-color: rgba(16, 16, 20, 0.7) !important;
backdrop-filter: blur(10px) !important;
border-radius: 10px !important;
}
