body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#header-bg {
    background: url('../assets/dajanex-header-bg.jpg') no-repeat center center;
    background-size: 1800px auto;
    display: flex;
    height: 65vh;

}

.sub-header {
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* required for horizontal centering inside flex */
    min-height: 35vh;
    padding: 20px;
}

/* Responsive fix for smaller screens */
@media (max-width: 768px) {
    #header-bg {
        height: 45vh;
        background-size: cover;
        /* Ensures it scales better on mobile */
    }

    .sub-header {
        min-height: 55vh;
        padding: 30px 15px;
    }
}

.sub-header .btn {
    display: inline-block !important;
    width: auto !important;
    margin-top: 20px;
    border-radius: 30px;
    font-weight: bold;
}

@media screen and (min-width: 1800px) {
    #header-bg {
        background-size: 100% auto;
    }
}

.dajanex-logo {
    max-width: 700px;
    width: 80%;
}

#why-dajanex {
    background: url('../assets/why-dajani-bg.jpg') no-repeat center center;
    background-size: cover;
    text-align: center;
    padding: 60px 20px;
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.why-box {
    background-color: rgba(255, 255, 255, 0.85);
    /* semi-transparent white */
    border-radius: 50px;
    padding: 40px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: inline-block;
    max-width: 800px;
}


/* Background for Section */
#features {
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
}

/* Feature Icon Styling */
.feature-icon {
    width: 80px;
    height: 80px;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    transition: all 0.3s ease-in-out;
}

/* Feature Card Hover Effect */
.feature-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover Effects */
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.feature-card:hover .feature-icon {
    background: #007bff;
    color: #fff;
}

/* Pricing Card Styling */
.pricing-card {
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Add hover effects for better interaction */
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Featured plan standout effect */
.featured-plan {
    border: 2px solid #ffc107;
    background-color: #fff9e6;
}

/* Adjust font sizes for better mobile readability */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
    }

    .pricing-card .btn {
        font-size: 0.9rem;
    }
}

/* Muted Feature (Unavailable) */
.text-muted i {
    color: #d6d6d6 !important;
}

/* Button Full Width */
.btn {
    padding: 12px;
    font-size: 1rem;
}

/* Centered Envelope Icon */
.feature {
    width: 80px;
    height: 80px;
}

/* Form Styling */
.form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}

/* Button Hover Effect */
.btn-lg:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}

/* Success/Error Message */
.text-success,
.text-danger {
    font-size: 1rem;
    font-weight: bold;
}

.custom-btn {
    padding: 10px 10px !important;
    /* Reduces vertical padding */
    font-size: 0.85rem !important;
    /* Slightly smaller font */
    line-height: 1 !important;
    /* Reduces button height */
    border-radius: 6px !important;
    /* Softens button edges */
}

.transparent-bg {
    background: rgba(255, 255, 255, 0.5);
    /* Black with 50% transparency */
    padding: 20px;
    border-radius: 10px;
    /* Optional: Adds rounded corners */
    display: inline-block;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    /* Light transparency */
    backdrop-filter: blur(10px);
    /* Frosted glass effect */
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Soft border */
}


.animated {
    animation: fadeIn 1.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.carousel-indicators [data-bs-target] {
    background-color: #212529;
    border: 1px solid #fff;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.carousel-indicators .active {
    background-color: #000;
}

/* Default: vertically centered for mobile */
#featureCarousel3 .carousel-control-prev,
#featureCarousel3 .carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
}

/* On larger screens: move controls lower */
@media (min-width: 768px) {

    #featureCarousel3 .carousel-control-prev,
    #featureCarousel3 .carousel-control-next {
        top: 85%;
        /* move down */
        transform: translateY(-50%);
    }
}

/* Optional: make the controls smaller on mobile */
@media (max-width: 767px) {

    #featureCarousel3 .carousel-control-prev-icon,
    #featureCarousel3 .carousel-control-next-icon {
        width: 2rem;
        height: 2rem;
    }
}

.bg-blue-dajanex {
    --bs-bg-opacity: 1;
    background-color: #04133E !important;
}

.bg-dajanex-green {
    --bs-bg-opacity: 1;
    background-color: #9ACB42 !important;
}

.btn-outline-green{
    --bs-btn-border-color: #9ACB42 !important;
    border-width: 2px;
}