/* banner */


 /* Reset and Base Styles */
       

        /* Banner Section */
        .banner-section {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background-image 1s ease-in-out;
            
            /* Default background - Replace with your astrology images */
            background-image: url('https://images.unsplash.com/photo-1532968961962-8a0cb3a2d4f5?w=1920');
        }

        /* Dark Overlay for Better Text Readability */
        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(25, 20, 60, 0.7), rgba(50, 30, 80, 0.6));
            z-index: 1;
        }

        /* Banner Content */
        .banner-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #ffffff;
            max-width: 900px;
            padding: 20px;
            animation: fadeInUp 1s ease-out;
        }

        /* Banner Title */
        .banner-title {
            font-size: 8rem;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
            letter-spacing: 2px;
            color: #ffd700;
        }

        /* Banner Subtitle */
        .banner-subtitle {
            font-size: 2rem !important;
            margin-bottom: 40px;
            margin-left: 130px;
            text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
            line-height: 3;
            color: #e0e0e0;
        }

        /* Buttons Container */
.banner-buttons {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Primary Button */
.btn-primary {
    padding: 20px 60px; /* increased padding */
    font-size: 1.5rem;  /* larger font */
    font-weight: bold;
    color: #19143c;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border: none;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.6);
    background: linear-gradient(135deg, #ffed4e, #ffd700);
}

/* Secondary Button */
.btn-secondary {
    padding: 20px 60px; /* increased padding */
    font-size: 1.3rem;  /* larger font */
    font-weight: bold;
    color: #ffffff;
    background: transparent;
    border: 3px solid #ffd700;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #ffd700;
    color: #19143c;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.4);
}

        /* Fade In Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .banner-title {
                font-size: 2.5rem;
            }
            
            .banner-subtitle {
                font-size: 1.2rem;
            }
            
            .banner-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-primary,
            .btn-secondary {
                width: 80%;
                max-width: 300px;
            }
        }

        @media (max-width: 480px) {
            .banner-title {
                font-size: 2rem;
            }
            
            .banner-subtitle {
                font-size: 1rem;
            }
            
            .banner-section {
                min-height: 500px;
            }
        }


/* banner  end*/