/* Apply Roobert font to the entire page */
html, body {
    font-family: 'Roobert', sans-serif;
}

/* Additional styles for other elements can follow, if necessary */
h1, h2, h3, h4, h5, h6, p, a, li, span, label{
    font-family: 'Roobert', sans-serif;
    color: rgba(255, 255, 255, .75);
}

body{
  background-color: #333333;
}

.custom-navbar-dark {
    background-color: #333333; /* Replace with your desired dark color */
}

.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.background {
    background-image: url('../images/horizontal.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width:100%;
    height:100vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay with 50% opacity */
    z-index: 1;
}

/* Centered overlay content */
.overlay {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out items to push h1 to top and h2 to bottom */
    height: 100%; /* Full height of the parent container */
    text-align: center;
}

/* Heading styles */
h1{
    letter-spacing: .6rem;
    font-size: 6.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .75)
}

h2{
    font-size: 2.5rem;
    font-weight: 1;
    color: rgba(255, 255, 255, .75)
}



/* Image container between h1 and h2 */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30%; /* 40% of the overlay height */
    width: 100%; /* Full width of the overlay */
    margin: 20px 0; /* Add margin to separate image from text */
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Make sure the image fits within the container while maintaining its aspect ratio */
}

.subtitle{
   text-align: center;
}

/* Highlighted text color */
.highlight {
    color: #FFD700; /* Gold color for highlighted text */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
	letter-spacing: .4rem;    
        font-size: 4rem;
    }
    h2 {
        font-size: 1.8rem;
	font-weight: 100;
    }
    .custom-quote{
	font-size: 2.4rem;
        font-weight: 100;
    }
}

@media (min-aspect-ratio: 1/1) {
    .backgrounds {
        background-image: url('../images/horizontal.webp'); /* Image for landscape */
    }
}

/* Style for screens with an aspect ratio less than 1:1 (portrait) */
@media (max-aspect-ratio: 1/1) {
    .background {
        background-image: url('../images/vertical.webp'); /* Image for portrait */
    }
}

.card {
    height: 45vh !important;
}

@media (min-width: 768px) {
    .card {
        height: 100% !important;
    }
}

.card-body {
    display: flex; 
    flex-direction: column; /* Stack elements vertically */
    justify-content: flex-start; /* Keep card-title at the top */
    height: 100%; /* Ensure the card body takes the full height */
}

.card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem; /* Space between the title and list */
}

.card-text {
    font-size: 1rem;
    text-align: left;
    font-family: 'Roobert', sans-serif;
    flex-grow: 1; /* Make the card-text take remaining space */
    color: rgba(255, 255, 255, .75);
    display: flex; /* Make the list a flex container */
    flex-direction: column; /* Stack list items vertically */
    justify-content: center; /* Vertically center the items */
    height: 100%; /* Ensure it takes the full height of its container */
}

/* Hover effect for cards */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Scale up and add shadow on hover */
.card-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.1); /* Subtle shadow effect */
}

/* Ensure the text and background color contrast */
.card-hover h5, .card-hover p {
    font-family: 'Roobert', sans-serif;
    color: rgba(255, 255, 255, .75);
    font-weight: 100;
}

/* Add a custom class for the middle-of-screen effect */
.card-hover.in-view {
    color:red;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.1); /* Same effect as hover */
}

/* Add underline when the card is hovered (desktop) */
.card-hover:hover .card-title {
    text-decoration: underline;
    text-decoration-color: #aa151b;
    text-decoration-thickness: 0.2rem;
    transition: all 0.3s ease;
}

/* Add underline when the card is in view (mobile) */
.card-hover.in-view .card-title {
    text-decoration: underline;
    text-decoration-color: #aa151b;
    text-decoration-thickness: 0.2rem;
    transition: all 0.3s ease;
}

.step-icon {
    max-width: 100%; 
    width: 120px; 
    height: auto;
}

@media (max-width: 768px) {
  .step-icon {
    width: 80px;
    height: 80px;
  }
}


.btn-primary:hover {
    color: #fff;
    background-color: #aa151b;
    border-color: #aa151b;
}

.btn-primary{
    color: #333333;
    background-color: #fed600;
    border-color: #fed600;
}

.btn-secondary {
    color: rgba(255, 255, 255, .75);
    background-color: transparent;
    border-color: transparent;
}