/*Large screens*/
@media (min-width: 993px) {
    body{
        font-size: 100% ;
    }
    header{
        height: 15vh;
    }
    header .logo img {
        height: 5vh;
    }
    
  
    header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0% 5%;
    }
    header main{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        font-size: 3vh;
        border-bottom: 2px solid grey;
        padding: 0;
    }
    header .connect ul{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
    }
    header nav{
        width: 100%;
    }
    header nav .nav-elements{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-weight: 500;
    }
    header nav .nav-elements .nav-search .box{
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        background-color: #fff;
        border-radius: 26px;
        padding: 2% 4%;
        margin: 2% 0%;
    }
  
    header nav .nav-elements .nav-search .box input{
        width: 100%;
        border-radius: 26px;
        padding: 3% 0%;
        border: none;
        font-size: 1.2rem;
    }
    header .nav-links{
        width: 50%;
    }
    header .nav-links ul{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        font-size: 1.2rem;
    }
    header .nav-links ul li a:hover{
        text-decoration-line: underline;
    }
    header nav .nav-elements .nav-buttons .login button{
        background-color: var(--secondary);
        color: var(--tertiary-color);
        border: none;
        border-radius: 12px;
        cursor: pointer;
        width: 10rem;
        font-weight: 500;
        font-size: 1.2rem;
        height: 3rem;
    }
    header nav .nav-elements .nav-buttons .login button a{
        color: var(--tertiary-color);
    }
    header nav .nav-elements .nav-buttons .menu{
        display:none;
    }

    input{
        font-size:100%;
        margin: 0% 0%;
    }
   
    

    /*Hero section*/
    .hero-section{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin:2% 3% ;
    }
   
    .hero-image img{
        width: 85%;
    }
    .hero-section .hero-info{
        display:grid;
        grid-template-columns: auto;
        grid-gap: 8%;
    }
    .hero-info-text{
        display: flex;
        flex-direction: column;
    }
    .hero-info-text h1{
        margin-bottom: 8%;
        font-size: 250%;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
    }
    .hero-info-text h3{
        margin-bottom: 5%;
        font-size: 120%;
        font-family: Arial, Helvetica, sans-serif;
    }
    .hero-info-button{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 5%;
    }
    .hero-info-button button:nth-child(2){
        margin-left: 10%;
    }
    .hero-info-button button{
        background-color: var(--tertiary-color);
        border: none;
        border-radius: 12px;
        cursor: pointer;
        width: 10rem;
        font-weight: 500;
        font-size: 1.2rem;
        height: 3rem;
    }
    /**/
    /*Hero info cards*/
    .hero-info .hero-cards{
       display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2%;
        text-align: center;
        justify-content: space-between;
        padding: 5%;
    }
    .hero-info .hero-cards .hero-card{
        border-radius: 8px;
    }
    .hero-info .hero-cards .hero-card img{
        width: 60%;
    }
        /*Hero section*/
    .hero-info .hero-cards .hero-card:hover{
        background-color: var(--primary);
    }

    /*Marquee*/
    .daily-stocks{

    }



    /*How it works*/
    .how-title{
        padding: 4%;
    }
    .how{
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        text-align: center;
        margin: 0% 10%;
        
    }
    .how .how-image{
        text-align: center;
    }
    
    .how .how-image img{
        height: auto;
        width: 50%;
    }
    .how-steps{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align:center;
        align-items: center;
    }
    .how-steps .how-cards{
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        text-align: left;
    }
   
    .how-steps .how-cards .how-card-image img{
        height:auto;
        width: 60%;
    }
    .how-steps .how-cards .how-card-text{
        text-align: left;
        font-size: 100% !important;
    }

    /*Testimonials*/
    .testimonials-card{
        text-align: center;
    }
    .testimonials-cards{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2%;
    }
    .testimonials .testimonials-cards .testimonials-card-image img{
        height: 80%;
        width: 80%;
    }

     /*Our Feed*/

     .our-feed .our-feed-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2%;
        padding: 4%;
    }
    .our-feed .our-feed-cards .our-feed-card{
        margin: 5% 0%;
        background: cover;
    }
    .our-feed .our-feed-cards .our-feed-card img{
        height: 40vh;
        width: 100%;
    }
    .our-feed .our-feed-cards .our-feed-card .our-feed-card-text p{
        text-align: left;
        margin: 2% 0%;
    }


    /*Subscribe*/
    .subscribe-form input{
        padding: 1.2%;
    }
     /*Subscribe*/
   .subscribe-form button{
    background-color: var(--tertiary-color);
    color: var(--primary);
    padding: 1.2%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 400;
    width: 95%;
    margin: 1%;
    }


    /*Contacts us*/
    .contact-info .contact-us-form input{
        padding: 1.4%;
    }

    /*location*/
    .location-cards{
        text-align: left;
        text-align: center;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2%;
    }

    /*Footer*/
    footer .links{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2%;
        text-align: center;
     }


}