/* Hero Section */
       /* Hero Section */
        .hero {
             background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(142, 68, 173, 0.9));
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* Removed background image from CSS */
            position: relative; /* Added for absolute positioning of the image */
            color: white;
            padding: 6rem 0;
            overflow: hidden; /* Ensures image doesn't spill out */
        }

        /* New style for the hero background image */
        .hero-background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0; /* Puts the image behind the content */
            filter: brightness(0.5); /* Darken the image for text readability */
        }


        .hero-content {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 4rem;
            align-items: center;
        }

        .hero-text h1 {
            font-size: 3rem;
            font-weight: 900;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            line-height: 1.1;
        }

        .hero-text p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.95;
            line-height: 1.6;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            border: none;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-live {
            background: #e74c3c;
            color: white;
        }

        .btn-video {
            background: #f39c12;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .app-downloads {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }


.app-icon{
     display: flex;
            align-items: center;
}
.app-icon img {
            width: 150px;
            height: 50px;
           
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .app-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: rgba(0,0,0,0.8);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-size: 0.8rem;
            transition: background 0.3s ease;
        }

        .app-btn:hover {
            background: rgba(0,0,0,0.9);
        }
        .phone-mockup {
            position: relative;
            background: #111;
            border-radius: 40px;
            padding: 12px;
            height: 580px;
            width: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3), 
                        inset 0 2px 0 rgba(255,255,255,0.1),
                        inset 0 0 10px rgba(0,0,0,0.2);
            border: 1px solid #444;
            overflow: hidden;
        }

        /* Power button */
        .phone-mockup::before {
            content: '';
            position: absolute;
            right: -2px;
            top: 100px;
            width: 3px;
            height: 40px;
            background: #222;
            border-radius: 3px 0 0 3px;
            box-shadow: inset -1px 0 2px rgba(0,0,0,0.5);
        }

        /* Volume buttons */
        .phone-mockup::after {
            content: '';
            position: absolute;
            left: -2px;
            top: 80px;
            width: 3px;
            height: 70px;
            background: #222;
            border-radius: 0 3px 3px 0;
            box-shadow: inset 1px 0 2px rgba(0,0,0,0.5);
        }

        .phone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 1.2rem;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
        }

        /* Notch for camera */
        .phone-screen::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 150px;
            height: 28px;
            background: #111;
            border-radius: 0 0 15px 15px;
            z-index: 10;
        }

        /* Camera lens */
        .phone-screen::after {
            content: '';
            position: absolute;
            top: 10px;
            right: calc(50% - 35px);
            width: 10px;
            height: 10px;
            background: #333;
            border-radius: 50%;
            box-shadow: inset 0 0 2px #000, 
                        inset 0 0 0 2px rgba(255,255,255,0.2);
            z-index: 11;
        }

        .mockup-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 32px;
        }
@media (max-width: 480px) {
    .hero{
        padding: 2rem;
    }
    .hero-text h1{
font-size: 1.5rem;
    }
    .hero-text p{
        font-size: 1rem
    }

    .phone-mockup{
        display: none;
    }
    .hero-content{

        display: flex;
    }
    .hero-buttons{
        display: inline-flex;
        
      
    }
    .app-downloads{
        display: inline-flex;
      
    }
 

}