body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

.full-height {
    height: 15vh; /* Adjust height as needed */
    padding-top: 10px; /* Adjust padding to reduce white space */
}
.bg-primary {
    background-color: #ffffff !important;
}
.bg-secondary {
    background-color: #f4f4f4 !important;
}
.bg-footer {
    background-color: #000000 !important;
    height: 7vh;
}
.navigation {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.image-section {
    padding: 50px 0;
}
img {
    max-width: 100%;
    height: auto;
}
.typewriter {
    display: inline-block;
    border-right: 2px solid; /* The typewriter cursor */
    padding: 5px;
    margin: 0;
    font-size: 36px; /* Adjust font size to fit better */
    white-space: nowrap;
    font-weight: 400;
    min-height: 50px; /* Adjust to fit better */
}


/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 768px) {
    .typewriter {
        font-size: 24px; /* Adjust font size for smaller screens */
        min-height: 40px; /* Adjust height for smaller screens */
    }
    .responsive-image {
        width: 600px;  /* Fixed width for larger screens */
        max-width: 100%;  /* Ensure it doesn't overflow on smaller screens */
        min-width: 250px;  /* Minimum width to maintain visibility on smaller screens */
    }
    .responsive-title {
        font-size: clamp(1.2rem, 2vw + .5rem, 2.5rem);
    }
    
    .responsive-text {
        font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
    }
}



/* Media query for very small screens (e.g., very small mobile devices) */
@media (max-width: 480px) {
    .typewriter {
        font-size: 18px; /* Further adjust font size for very small screens */
        min-height: 30px; /* Further adjust height for very small screens */
    }
}

.video-section {
    margin-top: 20px; /* Add margin to separate sections */
    height: 50vh; /* Reduce the height of the video section */
}
.video-section video {
    height: 100%; /* Make the video fit the container height */
    width: 100%; /* Ensure it maintains its width */
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
}

.responsive-title {
    font-size: clamp(1.2rem, 2vw + .5rem, 2.5rem);
}

.responsive-text {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.3rem);
}


.responsive-image {
    width: 600px;  /* Fixed width for larger screens */
    max-width: 100%;  /* Ensure it doesn't overflow on smaller screens */
    min-width: 250px;  /* Minimum width to maintain visibility on smaller screens */
}



.ai-transformational-tools {
    background-color: #f8f9fa;
}

.section-title {
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: bold;
}

.section-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    color: #6c757d;
}

.tool-item {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    position: relative; /* Needed for .stretched-link to work */
}

.tool-item:hover {
    transform: translateY(-10px);
}

.tool-title {
    font-size: clamp(1.25rem, 1.5vw, 1.75rem);
    font-weight: bold;
}

.tool-description {
    font-size: clamp(0.875rem, 1vw, 1rem);
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.tool-item-link {
    text-decoration: none;
    color: inherit;
}

.stretched-link::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
}


.modal-header {
    background-color: #f8f9fa;
    border-bottom: none;
}
.modal-header h5 {
    font-weight: bold;
    color: #343a40;
}

.form-label {
    font-weight: bold;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.form-icon {
    margin-right: 10px;
}