or container */
.hero-section-background {
/* Base Color: Very light, sophisticated off-white/gray */
background-color: #f4f6fa;
/* Radial Gradient: Subtle, soft blue glow that emanates from the bottom-left */
background-image:
radial-gradient(
circle at 10% 90%, /* Positions the light source in the bottom-left corner */
#f4f6fa 0%, /* Extremely light, almost white blue core */
#f4f6fa 30%, /* Very pale blue/gray */
#f4f6fa 80% /* Fades back to the light base color */
);
/* Optional: Subtle inset shadow for depth, preventing a flat look */
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
/* Ensures dark text (for light background) has good contrast */
color: #333333; /* Dark gray or black text for readability */
padding: 120px 0;
}
#reference-customers {margin:10px;}
/*
.bw {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: filter 0.3s ease-in-out;
}
.bw:hover {
filter: none;
-webkit-filter: grayscale(0);
}
*/
.bg-white {background-color:white;}
/* Custom Accent Colors */
:root {
/* These colors define the distinct gradient stops */
--thincast-gradient-start: #0070c0; /* A vibrant medium blue */
--thincast-gradient-end: #0a4073; /* A deep, darker blue */
--thincast-accent-btn: #007bff; /* Standard blue for primary buttons */
--thincast-text-light: #e0e0e0; /* Lighter text for dark backgrounds */
}
/* Hero Section Styling */
.hero-section {
position: relative;
overflow: hidden;
color: #fff;
border-radius: 20px;
margin-top:1em;
background-color:#e6ebf4 !important;
}
@media screen and (max-width: 840px) {
.hero-section {
border-radius: 0px;
margin:0px;
}
}
/* Styling for content within the Hero */
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
color:#202124 !important;
}
.hero-subtitle {
font-size: 1.3rem;
line-height: 1.5;
color: var(--thincast-text-light);
max-width: 550px;
color:black !important;
}
/* Custom button styles to match the image
.uk-button-primary-custom {
background-color: #FF7A00 !important;
color: white;
font-weight: 500;
text-transform: none;
border-radius: 500px;
}
.uk-button-primary-custom:hover {
color:white;
background-color: #D46700 !important;
}
*/
.uk-button-default-custom {
color: black;
border: 1px solid rgba(0, 0, 0, 0.5);
font-weight: 500;
text-transform: none;
border-radius: 500px;
}
.uk-button-default-custom:hover {
color: black !important;
border: 1px solid rgba(0, 0, 0, 0.5);
}
/* Style for the image card */
.hero-image-card {
position: relative;
background-color: rgba(255,255,255,.1);
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
padding:8px;
perspective: 100px;
}
.hero-image-card img {
border-radius: 8px;
max-width: 100%;
height: auto;
}
.html5-badge {
position: absolute;
top: 30px;
right: 30px;
background-color: var(--thincast-accent-btn);
color: #fff;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
/* Key Differentiators Section */
.uk-section-differentiators {
background-color: #f8faff; /* Light background for this section */
padding-top: 80px;
padding-bottom: 80px;
}
.differentiator-card {
background-color: #fff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.differentiator-icon {
background-color: #e0f2fe; /* Very light blue circle for icons */
border-radius: 50%;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto; /* Center and add space below */
}
.differentiator-icon .uk-icon {
color: var(--thincast-primary); /* Primary blue for the icon itself */
}
.differentiator-card h3 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--thincast-text-dark);
}
.differentiator-card p {
font-size: 0.95rem;
color: #555;
}
/* Custom shadow for cards (reused from earlier) */
.uk-card-shadow-custom {
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: box-shadow 0.3s ease;
}
.uk-card-shadow-custom:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.uk-tab>.uk-active>a {
color: #222;
border-color: #1e87f0;
}
.uk-tab-right>*>a {
justify-content: left;
border-left: 2px solid transparent;
border-bottom: none;
}