* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        html, body {
            scroll-behavior: smooth;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }
        
        body {
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        
        .container {
            width: 100%;
            max-width: 1920px;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        /* Header styles */
        header {
            background-color: #fff;
            padding: 15px 40px;
            border-bottom: 1px solid #e6e6e6;
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 50px;
            margin-right: 15px;
        }
        
        .logo span {
            font-size: 28px;
            font-weight: bold;
            color: #010509;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            font-size: 16px;
            transition: max-height 0.3s ease;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            font-size: 28px;
            text-decoration: none;
            color: #333;
            font-weight: bolder;
            transition: color 0.3s ease;
        }
        
        .nav-links a:hover {
            color: #0066cc;
        }

        /* Menu button */
        #menu-btn {
            display: none;
            font-size: 32px;
            cursor: pointer;
            color: #333;
            user-select: none;
        }

       

       
        @media (max-width: 720px) {
            header {
                padding: 15px 20px;
            }

         .nav-links {
                
                position: fixed; 
                top: 70px;
                left: 0;
                height: 70vh;
                width: 70vw;
                background: white;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                display: none; 
                z-index: 9999;
            
            }
            .nav-links.active {
                display: flex; 
                size: 40%;
            }
            .nav-links li {
                margin: 20px 0;
                text-align: center;
            }
            #menu-btn { 
                display: block; 
            }

        
             

        }

        @media (max-width: 480px) {

           
            
            .nav-links a {
                font-size: 24px; 
            }
            .hero-content h1 {
                font-size: 24px;
            }
            .cta-button, .cta-button-1 {
                font-size: 18px; 
                padding: 10px 20px; 
            }

            
        }

        @media (max-width: 768px) {
            .hero img {
                width: 100%;
                margin-top: 50px;
                height: 50% ;
            }

           


            .testimonial-header{
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .feature{
                align-items: center;
            }

            h1{
                margin-left: -60px;
            }

            .buttons{

                margin-left: -100px;
                
            }
            .hero-content {
                left: 20px;
                top: 30%;
                max-width: 80vw;
            }
            .buttons {
                left: 20px;
                top: 60%;
                max-width: 80vw;
            }
            .footer-copy {
            font-size: 14px;
            color: #ffffff;
            text-align: left;
            margin-top: 20px;
        }



        }

        /* Hero section */
        .hero {
            position: relative;
            height: 800px;
            overflow: hidden;
            padding: 1%;
        }
        
        .hero img {
            width: 90%;
            
            margin: 20px;
            border-radius: 10px;
            max-width: 100%;
            height: 800 px;
        }
        
        .hero-content {
            position: absolute;
            top: 40%;
            left: 40px;
            transform: translateY(-50%);
            color: white;
            z-index: 2;
            max-width: 600px;
            padding: 1%;
            margin-left: 50px;
            max-width: 90vw;
        }

        .buttons {
            position: absolute;
            top: 70%;
            left: 40%;
            max-width: 90vw;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: 600;
            line-height: 1.2;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
        
        .cta-button {
            display: inline-block;
            background-color: #0066cc;
            color: white;
            padding: 12px 30px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bolder;
            font-size: 22px;
            margin-top: 25px;
            width: 280px;
            transition: background-color 0.3s ease;
            text-align: center;
        }

        .cta-button-1 {
            display: inline-block;
            background-color: #ededed;
            color: rgb(0, 0, 0);
            padding: 12px 30px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bolder;
            font-size: 22px;
            width: 280px;
            margin-top: 25px;
            transition: background-color 0.3s ease;
        }
        
        .cta-button:hover {
            background-color: #004e9c;
        }
        
        /* Why Choose section */
        .why-choose {
            padding: 80px 40px;
        }
        
        .why-choose h2 {
            font-size: 36px;
            margin-bottom: 40px;
            font-weight: bolder;
            color: #090909;
        }
        
        .features {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
           
            margin: 0 auto;
        }
        
        .feature {
            flex: 1;
            padding: 0 50px;
            text-align: center;
            margin-left: 0px;
        }
        
        .feature img {
            width: 280px;
            height: 280px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }
        
        .feature:hover img {
            transform: scale(1.1);
        }
        
        .feature h3 {
            font-size: 32px;
            color: #333;
            font-weight: bolder;
        }
        

        /* How it works */
       .how-it-works {
            padding: 80px 40px;
            background-color: #f9f9f9;
        }

        .how-it-works h2 {
            font-size: 36px;
            margin-bottom: 40px;
            font-weight: bolder;
            color: #090909;
            text-align: center;
        }

        /* Testimonial */
        .testimonial-section {
            padding: 40px 20px;
        }

        .testimonial-header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            margin-bottom: 30px;
            max-width: 1200px;
            padding-left: 20px;
        }

        .testimonial-header img {
            width: 300px;
            height: 300px;
        }

        .testimonial-header h1 {
            justify-content: flex-start;
            font-size: 4.5rem;
            font-weight: bold;
            color: #000;
            margin: 0;
        }

        .testimonial-container {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            flex-wrap: wrap;
        }

        .testimonial-card {
            background-color: #f9f9f9;
            border-radius: 15px;
            width: 372px;
            height: 435px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: left;
            overflow: hidden;
        }

        .card-header {
            background-color: #e0e8ff;
            padding: 40px;
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: space-between;
        }

        .card-header img {
            width: 80px;
            height: 80px;
        }

        .card-header .name-title {
            line-height: 1.2;
        }

        .name-title .name {
            font-weight: bolder;
            color: #4728B7;
            font-size: 2rem;
        }

        .name-title .title {
            font-size: 1.4rem;
            color: #333;
            margin-top: 10px;
            font-weight: 550;
        }

        .card-body {
            padding: 20px;
            font-size: 1.25rem;
            font-weight: bolder;
            color: #333;
        }

        .read-more-btn {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .read-more-btn button {
            background-color: #6c63ff;
            color: white;
            padding: 10px 25px;
            border: none;
            border-radius: 25px;
            font-size: 1.5rem;
            cursor: pointer;
            text-align: center;
        }
        .read-more-btn button:hover {
            background-color: #6a5acd;
        }

        /* Media Section */
        .media-section {
            background-image: url('/pictures/backgrond.png');
            background-size: cover;
            background-position: center;
            padding: 40px;
            color: #000;
        }

        .media-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .media-heading {
            font-size: 36px;
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px #000;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center; 
        }
        .media-arrow {
            width: 50px;
            height: 50px;
            margin-left: 10px;
            vertical-align: middle;
        }

        .media-content {
            display: flex;
            flex-wrap: wrap;
            gap: 50px;
        }

        .media-left-card {
            background-color: white;
            border-radius: 15px;
            padding:20px;
            overflow: hidden;
            flex: 1;
            min-width: 300px;
            max-width: 600px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .media-image {
            width: 100%;
            height: auto;
            display: block;
        }

        .media-left-text {
            padding: 15px;
        }

        .media-left-text h3 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .media-left-text p {
            font-size: 14px;
            color: #777;
            text-align: end;
        }

        .media-right-cards {
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 25px;
        }

        .media-right-cards .media-card {
            flex: 1;
            min-width: 300px;
            max-width: 700px;
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: white;
            border-radius: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .media-card {
            background: white;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            align-items: flex-start;
            gap: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .media-card img {
            width: 125px;
            height: 119px;
            object-fit: cover;
            border-radius: 8px;
        }

        .media-card h4 {
            margin: 0 0 5px;
            font-size: 18px;
            font-weight: 600;
        }

        .media-card span {
            font-size: 15px;
            color: #555;
        }

        .footer {
            background-color: #07004d;
            color: white;
            padding: 40px 20px 10px;
            font-family: 'Segoe UI', sans-serif;
            padding: 75px;
            margin-top: 50px;
        }

        .footer-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 40px;
            padding-bottom: 30px;
        }

        .footer-left,
        .footer-right {
            flex: 1 1 45%;
        }

        .footer-left h2{
            align-items: center;
            display: flex;  
            text-align: left;
        }

        .footer-logo {
            width: 100px;
            margin-bottom: 20px;
        }

        .footer-description {
            line-height: 1.6;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .footer-contact p {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 8px 0;
        }

        .footer-right h3 {
            margin-bottom: 20px;
        }

        .footer-right {
            margin-left: 20px;
        }

        .email-form {
            display: flex;
            margin-top: 35px;
            max-width: 400px;
        }

        .email-form input {
            flex: 1;
            padding: 10px 15px;
            border: none;
            border-radius: 20px 0 0 20px;
            outline: none;
        }

        .email-form button {
            background-color: #5671f5;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 0 20px 20px 0;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .email-form button:hover {
            background-color: #4053c7;
        }

        .footer-divider {
            border: 0;
            height: 1px;
            background-color: #333;
            margin: 20px 0;
        }

        .footer-bottom {
            text-align: right ;
        }

        .store-icons {
            margin-bottom: 15px;
        }

        .store-icons img {
            width: 140px;
            margin: 0 10px;
            vertical-align: middle;
        }

        .social-icons {
            margin-bottom: 10px;
            margin-top: 75px;
        }

        .social-icons img {
            width: 24px;
            margin: 0 8px;
            vertical-align: middle;
        }

        .footer-copy {
            font-size: 14px;
            color: #ccc;
            text-align: left;
            margin-top: -27px;
        }


        .policies{
            text-decoration: none; 
            margin-top: 40px;   
        }

        .policies a {
  text-decoration: none; /* removes underline */
  color: inherit;        /* inherits color from parent text */
}


        /* Media Queries
         */





        @media screen and (max-width: 769px) {

            .nav-links{display: none;}

            #menu-btn {
                display: block;
            }

            .nav-links {
                
                position: fixed; 
                top: 70px;
                left: 0;
                height: 70vh;
                width: 40vw;
                background: white;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                display: none; 
                z-index: 9999;
            
            }


             .nav-links.active {
                display: flex; 
                size: 40%;
            }
            .nav-links li {
                margin: 20px 0;
                text-align: center;
            }

            .testimonial-header img{
                width: 200px;
                height: 200px;
            }

            .social-icons{
                text-align: center;
            }

            

            .footer-copy{
                margin-top: 80px;
                text-align: center;
            }

            .footer-divider{
                width: 100%;
                margin-left:0px;
            }

            .store-icons{
                display: flex;
                justify-content: center;
                margin-top: 20px;
            }

            .store-icons img {
                margin-bottom: 20px;
            }

            .footer-right{
                margin-left: 0px;
                text-align: center;
            }

            .email-form {
                margin-left: 120px;
                align-items: center;
            }

            .buttons{
                margin-left: 0px;
                text-align: center;
                position: absolute;
                top: 60%;   
                left: 35%;
                margin-top: 50px;
            }
        }

        @media screen and (max-width: 480px) {

            .nav-links {
                
                position: fixed; 
                top: 70px;
                left: 0;
                height: 70vh;
                width: 50vw;
                background: white;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                display: none; 
                z-index: 9999;
            
            }
            .hero-content h1 {
                font-size: 24px;
            }
            .cta-button, .cta-button-1 {
                font-size: 18px; 
                padding: 10px 20px; 
            }

            .hero img{
                width: 90%;
                margin-top: 50px;
                height: 40% ;
            }
.how-it-works{
    padding: 20px 20px;
}
            .buttons{
                position: absolute;
                top: 50%;   
                left: 20%;
            }

            .testimonial-header h1{
                font-size: 3.5rem;

            }

            .footer-right{
               margin-left: -125px;
                text-align: center;
            }
             .nav-links.active{
            width: 70%;
            height: 70%;
        }

        }

        @media screen and (max-width: 376px) {

            *{
                box-sizing: border-box  ;
                
            }
            .hero img{
                width: 90%;
                margin-top: 50px;
                height: 30% ;
            }

        .hero h1{
            position: absolute;
            left: 20%;
            top: 30%;     /*  change it to 2500 if needed in the img  */
        }

            .buttons{
                position: absolute;
                top: 50%;   
                left:15%;
            }
.why-choose{
    margin-top: -100px;
}

            .feature img{
                width: 90%;
                height: 70%;
            }

            .email-form {
                margin-left: 90px;
                align-items: center;
            }

            .media-content{
                margin-left: -25px;
            }
             .nav-links.active{
            width: 80%;
            height: 70%;
        }
        }

        @media screen and (max-width: 321px) {
            .hero img{
                width: 90%;
                margin-top: 50px;
                height: 25% ;
            }


            .buttons{
                margin-left: -25px;
            
        }

        .why-choose{
            margin-top: -150px;
        }

        .feature img{
            width: 80%;
            height: 50%;

        }

        .testimonial-header img{
            width: 100px;
            height: 100px;
        }

        .testimonial-header h1{
            font-size: 2.5rem;
        }

        .media-content{
            margin-left: -55px;
        }

        .social-icons{
            text-align: center;
            width: 300px ;
            margin-left: -50px;
        }

        .footer-left{
            margin-left: -20px;
        }
        .email-form input{
          padding: 5px 10px;
          margin-left: -25px;
            
        }

        .email-form button{
            padding: 5px 10px;
        }

        .footer-copy{
            width: 200px;
        }

        .nav-links.active{
            width: 80%;
            height: 70%;
        }

    }