body {
    font-family: 'Inter', sans-serif;
    /* Using Inter as specified, or Bootstrap's default if not explicitly loaded */
    background-color: #f8f9fa;
    color: #343a40;
}

.navbar {
    background-color: #007bff;
    /* Primary blue for navbar */
}

.navbar-brand,
.nav-link {
    color: #fff3cd !important;
}

.navbar-brand:hover,
.nav-link:hover {
    color: #e2e6ea !important;
}

.logo{
    height:2em;
}

.hero-section {
    /* background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.9)), url('https://placehold.co/1920x600/007bff/ffffff?text=Rapid+Utility+Header') no-repeat center center/cover; */
    background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.9)), url('/images/rapid-utilities-home-page.svg') no-repeat center center/cover;
    color: #f0fc89;
    padding: 100px 0;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.header-section {
    color: #fff;
    padding: 80px 0;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.about{
    background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.9)), url('https://placehold.co/1920x400/007bff/ffffff?text=About+Us') no-repeat center center/cover !important;
}

.services{
    background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.9)), url('https://placehold.co/1920x400/007bff/ffffff?text=Our+Services') no-repeat center center/cover !important;
}

.sales{
    background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.9)), url('https://placehold.co/1920x400/007bff/ffffff?text=Partner+with+Us') no-repeat center center/cover;
}

.contact{
    background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.9)), url('https://placehold.co/1920x400/007bff/ffffff?text=Contact+Us') no-repeat center center/cover !important;
}

section h2{
    color:#06281e;
}

.section-padding {
    padding: 60px 0;
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    background-color: #f8f9fa;
    color: #055160;
}

.card:hover {
    transform: translateY(-5px);
}

.card h3{
    color: #052c65;
}

/* Flip Card Specific Styles */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 250px;
    /* Fixed height for consistent card size */
    perspective: 1000px;
    /* 3D effect */
    border-radius: 10px;
    /* Apply rounded corners to the flip card container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add shadow to the flip card container */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 10px;
    /* Apply rounded corners to the inner card */
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 10px;
    /* Apply rounded corners to front and back faces */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.flip-card-front {
    background-color: #fff;
    color: #343a40;
}

.flip-card-back {
    background-color: #007bff;
    /* Primary blue for back */
    color: white;
    transform: rotateY(180deg);
}

.flip-card-back h4 {
    color: white;
    /* Ensure heading is white on blue background */
}

.flip-card-back a {
    color: #fff;
    /* Link color on back face */
    text-decoration: underline;
}

.flip-card-back a:hover {
    color: #e2e6ea;
}

.footer {
    background-color: #031633;
    /* Dark background for footer */
    color: #e9ecef;
    padding: 40px 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.footer h5{
    color: #f8f9fa;
}

.footer a {
    color: #007bff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 5px;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.rounded-corners {
    border-radius: 10px;
}

.map-container {
    overflow: hidden;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    position: relative;
    height: 0;
    border-radius: 10px;
}

.map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0;
    border-radius: 10px;
}