body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    /* background: linear-gradient(to top, grey 55%, #fff 55%), linear-gradient(to bottom, #fff 45%, grey 45%); */
    background-image: url(./assest/third1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}



.introductionsec {
    height: 96vh;
    color: fff;

}

.introductionsec h1 {
    font-size: 6rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    /* background: linear-gradient(to top, white, white);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
  text-fill-color: transparent; */

}

.introductionsec small {
    font-size: 3rem;
}

.introductionsec p {
    font-size: 5rex;
}

/* The styling of my nav bar */

nav {
    display: flex;
    justify-content: space-between;
    background-color: #efefef;
}

nav a {
    text-decoration: none;
    color: #000;
}

nav .techmulan {
    font-family: cursive;
    font-size: 2rem;
}

nav .links {
    gap: 20px;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    transition: text-decoration 0.3s ease;



}


nav .links:hover {
    text-decoration: line-through;



}



.scrollnav a {
    text-decoration: none;
    color: #000;
}

/* The styling of my main section */

main .text {
    background-color: #fff;

}





.navbar.sticky-top {
    transition: background-color 0.3s ease;
}


.navbar.sticky-top {
    background-color: #efefef;


}

.navbar.sticky-top .nav-item a {
    color: #000;
}

.navbar.sticky-top .techmulan {
    color: #000;
}




main .text h1 {
    color: #000;
    
    font-family: cursive;
    text-align: right;
}


main .text {
    display: block;
    color: #030303;
    background-color: #efefef;
}

main .text p {
    font-size: 4rex;
    
    font-weight: 490;

}

main .morebutton {

    text-align: center;
}

main .morebutton button {
    padding: 10px 40px;
    border: 1px solid black;

}

main .morebutton button:hover {
    border: 1px solid grey;
    background-color: #ababab;
    transition: background-color 0.3s ease;

}

main .morebutton button a:hover {

    color: fff;
}

/* The styling of my articles section */

main .articles {
    background-color: #efefef;
}

.articlesheading h1 {
    font-weight: 700;
    font-size: 3rem;
}

.articlesheading p {
    font-size: 4rex;
}

/* The styling of my cards */

.cards {
    display: flex;
    justify-content: space-evenly;
}

figcaption a {
    text-decoration: none;
    color: black;
}

.cards .carddiv {
    border: 1px solid white;
}

.cards .carddiv:hover {
    box-shadow: 5px 10px #888888;
    border: 1px solid black;
}

/* This is the styling of my footer*/


footer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

footer a {
    text-decoration: none;
    color: black;
    margin: 10px;
}

footer div button {
    border: 1px solid black;
    background-color: white;
    padding: 10px 20px;
}


@media screen and (max-width: 768px) {
    .introductionsec {
        text-align: left;
        height: 85vh;
    }

    .introductionsec h1 {
        font-size: 3rem;

    }

    .introductionsec small {
        font-size: 1.5rem;

    }

    .introductionsec p {
        font-size: 2rex;

    }

    nav {
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 5%;
        
    }

    nav .links {
        flex-direction: row;
        gap: 20px;
    }

    .cards {
        display: block;
        justify-content: center;
        /* text-align: center; */

    }

    .carddiv {
        width: 300px;

        margin-left: auto;
        margin-right: auto;

    }




    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2rem;
        background-color: #f8f8f8;
    }

    main .text p {
        font-size: 2rex;
        text-align: center;
        font-weight: 400;
        
    
    

    }

    main .text h1 {
        text-align: center;
    }

    .articlesheading p {
        font-size: 3rex;
        text-align: left;
        


    }

    .articlesheading h1 {
        text-align: center;
    }
}