html,
        body {
            height: 100%;
            font-family: 'Plus Jakarta Sans';
            margin: 0;
        }

        #carouselExample,
        #carouselExample .carousel-inner,
        #carouselExample .carousel-item {
            height: calc(100vh - 50px);
        }

        #carouselExample .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #carouselExample .carousel-item {
            position: relative;
        }

        #carouselExample .carousel-caption {
            bottom: auto;
            font-weight: bold;
            top: 50%;
            transform: translateY(-50%);
            text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
            color: #F7F7F7;
        }

        #carouselExample .carousel-caption h1,
        #carouselExample .carousel-caption p,
        #carouselExample .carousel-caption label {
            color: #fff;
        }

        #carouselExample .carousel-caption .form-control {
            background: rgba(0, 0, 0, .25);
            border-color: rgba(255, 255, 255, .7);
            color: #fff;
        }

        #carouselExample .carousel-caption .form-control::placeholder {
            color: rgba(255, 255, 255, .9);
        }

/* text font in button -> lowercase*/

/*.carousel-caption .btn {*/
/*    text-transform: none;*/
/*}*/


.font-title {
    font-family: 'Ranchers', serif;
    font-style: italic;
    font-weight: bold;
    color: #902525;
    font-size: 100px;
}

.section-background {
    background:#FCF4EE;

}

.feature-icon{
  font-size: 70px;   /* makes the icon ~70px */
  line-height: 1;
  width: 150px;       /* fixes layout width */
  height: 150px;
  object-fit: contain;      /* consistent box */
  flex-shrink: 0;
  color: #902525;   /* don't let it squish */
}

.feature-card {
    min-height: 30rem;
    display: flex;
    flex-direction: column;
    background: #FEEBD8;
    color: #902525;
}
.feature-card .card-body{ margin-top: auto; padding-top: 0; }

/* Add scroll indicator at bottom */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
    cursor: pointer;
}

.scroll-down-indicator p {
    font-family: 'Ranchers', serif;
    font-style: italic;
    font-weight: bold;
    font-size: 24px;  /* Bigger text */
    margin-bottom: 5px;  /* Less space between text and arrow */
}

.scroll-down-indicator i {
    font-size: 30px;  /* Bigger arrow */
    line-height: 1;  /* Tighter line height */
}

/* Mobile responsive for font-title */
@media (max-width: 768px) {
    .font-title {
        font-size: 50px; /* Half the desktop size */
    }
}

@media (max-width: 480px) {
    .font-title {
        font-size: 35px; /* Even smaller for very small screens */
    }
}