/* nav styles */


        * {
            padding: 0%;
            margin: 0%;
            list-style: none;
            text-decoration: none;
            color: black;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        .nav-logo {
            width: 30%;

        }

        .nav-logo img {
            max-width: 50%;

        }

        .nav {
            background-color: rgb(245, 249, 250);
            display: flex;
            width: 100%;
            /* justify-content: space-between; */
        }

        .nav-links {
            width: 30%;
            padding-top: 8%;
            margin-left: -40%;
        }

        .nav-links ul {
            display: flex;
            column-gap: 3vw;
            font-weight: 500;
        }

        .nav-btn {
            width: 33%;
            display: flex;
            justify-content: flex-end;
            column-gap: 1vw;
            padding-top: 3vh;
        }

        .nav-btn button {
            height: 35px;
            width: 75px;
        }

        .nav-btn-1 {
            background-color: rgb(255, 255, 255);
            color: black;
            border: 1px solid grey;
            border-radius: 15px;
        }

        .nav-btn-1:hover {
            background-color: rgb(42, 142, 157);
            color: white;
            border-radius: 15px;
            border: none;
            cursor: pointer;
        }

        .nav-btn-2 {
            background-color: rgb(42, 142, 157);
            color: white;
            border-radius: 15px;
            border: none;
        }

        .nav-btn-2:hover {
            background-color: rgb(255, 255, 255);
            color: black;
            border: 1px solid grey;
            border-radius: 15px;
            cursor: pointer;
        }

        /* ------------------------------------------------ */
        .whole-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin: 0 5% 0 5%;
        }

        /* --------------------Landing Pages Styles---------------------- */

        .container-item-1 {
            display: flex;
            gap: 10%;
            /* height: 900px; */
            background-color: F5F9FA;
        }

        .landing-container {
            display: flex;
            margin-top: 5%;
            gap: 1%;
            line-height: 1.2;
            flex-direction: column;
        }

        .landing-container-content p span {
            font-weight: bolder;

        }


        .hero-content {
            font-size: 320%;
            font-weight: 400;
            /* line-height: 1; */
        }

        .hero-content-2 {
            color: rgba(0, 0, 0, 0.514);
            margin-top: 8%;
        }

        .landing-container-images {
            display: flex;
            gap: 10px;
            margin: 4% 0 0 -6%;
        }

        .landing-side-image {
            margin-top: 5%;
        }

        .landing-container {
            margin-left: 5%;
        }

        /* ---landing page email button--- */
        .email-container {
            display: flex;
            align-items: center;
            border: 1px solid #ccccccad;
            border-radius: 13px;
            width: 86%;
            margin-top: 6%;
            padding: 5px;
            background-color: white;
        }

        .email-input {
            border: none;
            padding: 10px 15px;
            font-size: 16px;
            outline: none;
        }

        .land-email-btn {
            background-color: #20b2aa;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .land-email-btn:hover {
            background-color: #1a928c;
        }

        .arrow-icon {
            font-size: 18px;
        }

        /* ----------------------Furure Payment Section------------------ */

        .future-payment {
            max-width: 80%;
            background-color: rgb(255, 255, 255);
            margin: auto;
            margin-top: 5%;
            padding: 5%;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
        }

        .future-payment h5 {
            color: #1a928c;
        }

        .future-payment-head {
            display: flex;
            flex-wrap: wrap;
            gap: 15%;
            background-color: rgb(255, 255, 255);
        }

        .future-payment-head h1 {
            max-width: 43%;
            margin-top: 10px;
        }

        .future-payment-head p {
            max-width: 40%;
            padding-top: 2%;
            line-height: 1.3;
            color: gray;
        }

        .future-payment-content {
            padding-top: 5%;
            max-width: 100%;
            background-color: rgb(255, 255, 255);
            display: flex;
            gap: 3%;
            flex-wrap: wrap;
            line-height: 1.5;
        }

        .content1,
        .content2,
        .content3 {

            max-width: 30%;
            display: flex;
            flex-direction: column;
            /* line-height: 1.5; */
            /* gap: 5px; */
        }

        .content1 p,
        .content2 p,
        .content3 p {
            color: gray;
        }

        .content1 p,
        .content1 h3,
        .content2 p,
        .content2 h3,
        .content3 p,
        .content3 h3 {
            padding-top: 1vh;
        }

        /* -------------------Finpay Section---------------------- */

        .container-item-3 {
            display: flex;
            padding-top: 7%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10%;
        }

        .card-content-1 {
            padding: 40px;
            background-color: #F5F9FA;
            color: black;
            box-shadow: 1px 2px 3px white;
            line-height: 1.4;
            border-radius: 23px;
            font-weight: 600;
        }

        .card-content {
            display: flex;
            gap: 9%;
            margin-top: 5%;
        }

        .Finpay-content p {
            color: gray;
            text-align: center;
        }

        .finpay-half {
            padding: 40px;
            max-width: 80%;
            margin: auto;
            margin-top: 5.5%;
            background-color: #F5F9FA;
            color: black;
            box-shadow: 1px 2px 3px white;
            line-height: 1.4;
            border-radius: 23px;
            /* font-weight: 600; */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ------------------------Steps Section--------------- */

        .steps {
            background-color: #023347;
            max-width: 100%;
            padding: 9%;
            margin: auto;
            display: flex;
            flex-direction: column;
        }

        .step2 {
            max-width: 60%;
            padding-bottom: 4%;
            font-size: large;
        }

        .step3 {
            display: flex;
            gap: 25px;
        }

        .st1,
        .st2,
        .st3 {
            width: 29%;
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            background-color: aliceblue;
            background-color: #0B3A4F;
            gap: 15px;
            padding: 15px;
        }


        /* ------------Try it now card section----------- */

        .Try-it-btn-1 {
            background-color: #20b2aa;
            color: white;
            border: none;
            border-radius: 15px;
            padding: 20px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .Try-it-btn-2 {
            color: white;
            background-color: transparent;
            border-radius: 15px;
            padding: 16px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            border: 1px solid;

        }

        .Try-it-btn-1:hover,
        .Try-it-btn-2:hover {
            background-color: #1a928c;
        }


        /* -------------footer----------------- */

        footer {
            display: flex;
            line-height: 2;
            gap: 10%;
        }

        .social-links {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .social-links-a {
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: center;

        }


        .social-links a {
            color: #333;
            font-size: 24px;
            display: flex;
            flex-direction: row;
            transition: color 0.3s ease;
        }

        .social-links a i:hover {
            color: #0077B5;
        }

        .social-links a i:nth-child(2):hover {
            color: #E4405F;
        }

        .social-links a i:nth-child(3):hover {
            color: #1DA1F2;
        }

        .footer-li li {
            color: rgba(0, 0, 0, 0.493);
        }

        /* ------------------------our Missions---------------------- */

        .our-mission {
            width: 80%;
            display: flex;
            flex-direction: column;
            text-align: center;
            margin: auto;

            justify-content: center;
            align-items: center;
        }

        .missions {
            margin: auto;
            justify-content: center;
            align-items: center;

        }

        .our-mission {
            padding: 50px;

        }

        .no1 {
            display: flex;
            flex-direction: column;

        }

        .no1 p {
            margin-top: 0%;
            width: 103%;

        }

        .mi2 {
            max-width: 64%;
            font-size: 30px;
            padding-bottom: 5%;

        }

        .mii {
            max-width: 40%;
            padding-top: 30px;
            padding-bottom: 40px;
            line-height: 1.5;
            padding-top: 10px;

        }

        .mi3 {
            width: 52%;
            margin: auto;
            display: flex;
            flex-direction: row;
            gap: 7vw;
        }

        .plan-cards {
            padding-left: 10%;
            padding-right: 10%;
            padding-bottom: 3% ;
        }

        .plan-card {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            justify-content: space-around;
            gap: 20px;
        }

        .card1 {
            width: 40%;
            color: #000000;
            background-color: #6c6e6e;
            border-radius: 5px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 25vh;
        }

        .card2 {
            width: 40%;
            color: white;
            background-color: #2A8E9E;
            border-radius: 5px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 25vh;
        }

        .cc1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        @media (max-width:1100px){
            

            .whole-container {
                max-width: 900px;
                padding-right: 10px;
                overflow-x: hidden;
                
            }
        }




        @media (max-width: 768px) {
            .landing-container{
                width: 100vw;
            }
            .whole-container {
                max-width: 500px;
                padding: 10px;
                
                
            }
            .mi2 {
                min-width: 100%;

            }
            .our-mission {
                width: 124%;
            margin-left: -10%;
            }
            footer{
                flex-direction: column;
                text-align: center;
            }
            .container-item-1{
                flex-direction: column;

            }

        }

        @media (max-width: 425px) {
            .container-item {
                max-width: 350px;
                padding: 10px;
            }
        }

        @media (max-width: 375px) {
            .container-item {
                max-width: 90%;
            }
        }

        @media (max-width: 320px) {
            .container-item {
                max-width: 85%;
            }


        }