/* General Styling */
body, html {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
/* Clip horizontal overflow on the root only — keeping it off leaves the
viewport as the scroll container so the sticky navbar works. */
html { overflow-x: hidden; }
.navbar {
transition: background-color 0.3s ease;
}
.navbar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.25) 100%);
z-index: 2;
}
.navbar {
position: relative;
/* height: 500px; */
background-color: #000;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 20% 30%, #d2a679, transparent 25%),
radial-gradient(circle at 80% 30%, #e5d5c5, transparent 40%),
radial-gradient(circle at 50% 50%, #d5d5c5, transparent 25%),
radial-gradient(circle at 20% 70%, #8e7c68, transparent 40%),
radial-gradient(circle at 80% 70%, #b59b83, transparent 25%),
radial-gradient(circle at 25% 75%, #e6e1b2, transparent 40%),
radial-gradient(circle at 75% 25%, #f0e4d7, transparent 25%),
radial-gradient(circle at 50% 50%, #635647, transparent 40%);
background-size: 200% 200%;
animation: navGradientShift 30s ease infinite;
}
.navbar::after {
content: '';
position: absolute;
bottom: 0; /* Place at the bottom */
left: 0;
width: 100%;
height: 2px; /* Border thickness */
background-color: #8e7c68; /* Border color (choose a color from your palette) */
z-index: 3; /* Ensure it sits above the gradient backgrounds */
}
@keyframes navGradientShift {
0% { background-position: 0% 0%; }
25% { background-position: 100% 0%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
}
.navbar.scrolled {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.nav-link {
color: rgba(0, 0, 0, 0.802) !important;
font-weight: 700;
width: 100%;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-item {
width: 100%;
}
.nav-item:hover {
width: 100%;
}
.nav-link:hover {
background-color: #ff6f61;
color: rgb(0, 0, 0) !important;
display: inline-block;
}
/* Video container for responsive scaling */
.hero {
position: relative;
width: 100%;
height: 50vw;
max-height: 700px; /* Max height for large screens */
min-height: 250px; /* Min height for mobile screens */
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.25) 100%);
z-index: 2;
}
#bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Keep aspect ratio, prevent cropping */
}
.hero-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 3;
}
/* For mobile devices, make sure the height is restricted */
@media (max-width: 576px) {
.hero {
height: 250px;
}
}
.hero-title {
font-size: 4rem;
font-weight: bold;
}
.hero-subtitle {
font-size: 1.5rem;
margin-top: 1rem;
}
/* Carousel Styling */
#services {
background-color: #f9f9f9;
}
/* Make sure the service-tile looks good inside the carousel */
.service-tile {
position: relative;
background-size: cover;
background-position: center;
height: 300px; /* Adjust the height to fit within the carousel */
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s ease;
}
.service-tile:hover {
transform: scale(1.1);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 0px 20px 0px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.number {
font-size: 4rem;
font-weight: bold;
color: #ff6f61;
margin-bottom: 10px;
}
.title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.description {
font-size: 1rem;
margin-bottom: 15px;
}
.read-more {
color: white;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.read-more:hover {
color: #ff6f61;
}
/* Responsive Behavior */
@media (max-width: 768px) {
.service-tile {
height: 250px; /* Smaller height for mobile */
}
.number {
font-size: 3rem;
}
.title {
font-size: 1.25rem;
}
}
.links-container {
background-color: #e9e9e9d1;
border-radius: 10px;
box-shadow: 0px 0px 5px black;
padding: 10px;
margin: 10px;
transition: 0.25s ease-in-out;
backdrop-filter: blur(1px) !important;
z-index: 5 !important;
}
.links-container:hover {
transform: scale(1.1) translateX(-5%) translateY(5%);
background-color: #ffffffdb;
}
.logo-container {
background-color: #e9e9e9d1;
border-radius: 10px;
box-shadow: 0px 0px 5px black;
padding: 15px;
margin: 15px;
transition: 0.25s ease-in-out;
backdrop-filter: blur(1px) !important;
z-index: 5 !important;
}
.logo-container:hover {
transform: scale(1.1) translateX(5%) translateY(5%);
background-color: #ffffffdb;
}
.logo-square {
width: 80px; /* Adjust size of the square logo */
height: auto;
margin-right: 10px; /* Space between logos */
mix-blend-mode: multiply !important;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.55));
}
.logo-thumb {
height: auto !important;
max-height: 70px !important;
width: auto;
mix-blend-mode: multiply !important;
/* filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.55)); */
}
.dark-shadow-100 {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.399);
}
.hover-grow-sm {
scale: 1.0;
cursor: pointer;
transition: 0.25s ease-in-out;
}
.hover-grow-sm:hover {
scale: 1.0;
transform: scale(1.1);
}
.text-white {
color: #ecececf0;
text-shadow: 0px 0px 2px black;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@500&family=Helvetica:wght@400&display=swap');
.font-lato {
font-family: 'Lato', sans-serif !important;
}
.font-helvetica {
font-family: 'Helvetica Neue', sans-serif !important;
}
.font-montserrat {
font-family: 'Montserrat', sans-serif !important;
}
.monda-400 {
font-family: "Monda", sans-serif;
font-optical-sizing: auto;
font-weight: 400 !important;
font-style: normal;
}
.monda-500 {
font-family: "Monda", sans-serif;
font-optical-sizing: auto;
font-weight: 500 !important;
font-style: normal;
}
.monda-600 {
font-family: "Monda", sans-serif;
font-optical-sizing: auto;
font-weight: 600 !important;
font-style: normal;
}
.monda-700 {
font-family: "Monda", sans-serif;
font-optical-sizing: auto;
font-weight: 700 !important;
font-style: normal;
}
.text-black {
color: rgba(0, 0, 0, 0.817) !important;
}
.meet-the-team-btn {
background-color: #fff;
color: black;
width: 500px;
padding: 15px;
border-radius: 10px;
cursor: pointer;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-weight: 700 !important;
border: 2px solid black;
transition: transform 0.5s ease, background-color 0.5s ease;
}
.meet-the-team-btn:hover {
background-color: #000;
border: 2px solid white;
color: white !important;
transform: scale(1.1);
}