* {
    padding: 0;
    margin: 0;
}

/*The scrollbar is hidden on the page.*/
body::-webkit-scrollbar {
    display: none;
}

body {
    background-size: cover;
    background-image: linear-gradient(to right, #080b51, #870057, #d13034, #e09100);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Navbar start */
nav {
    display: flex;
    justify-content: space-between;
    padding: 5px 24px;
    height: 70px;
    align-items: center;
    position: sticky;
    top: 0px;
    box-shadow: 1px 1px 1px 0 #969595;
    background-color: black;
    z-index: 99;
}

.logo-text {
    cursor: pointer;
    font-size: 32px;
    color: white;
}

nav button {
    background-color: #303030;
    color: #fff !important;
    padding: 5px 20px;
    font-family: "Poppins", sans-serif;
    text-decoration: none;
    outline: none;
    border-radius: 20px;
    border: none;
    font-size: 18px;
}

nav button:hover {
    background-color: #8216ee;
    cursor: pointer;
    transform: scale(1.1);
}


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

    .logo-text {
        font-size: 20px;
    }

    nav button {
        background-color: #303030;
        color: #fff !important;
        padding: 5px 20px;
        font-size: 12px;
    }
    
}

/*
    The cards section of the page is displayed as a column with centered items, and has some padding and margins.
    */
.cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5%;
    border-radius: 20px;
    margin: 10px;
    gap: 30px;
}

/*
    Each row of cards is displayed as a row with centered items and some spacing.
    Each card has some padding, opacity, and border radius. It has a transition effect when hovered over.
    */
.cards .cardlist {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.card {
    background-color: white;
    opacity: 70%;
    padding: 20px;
    margin: 10px auto;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.card:hover {
    background-color: #ffee00;
    padding: 25px;
    cursor: pointer;
}

/*
    The images section of each card has some opacity, height, width, padding, and border radius. It has a background color of purple.
    The text section of each card has some opacity.
    The paragraph tag within the text section of each card has a font size of 0.9rem.
    */
.cards .cardlist .card .images {
    opacity: 100%;
    height: auto;
    width: 60px;
    padding: 10px;
    background-color: rgb(178, 178, 178) !important;
    border-radius: 50px;
    margin-bottom: 10px;
}

.cards .cardlist .card .text {
    opacity: 100%;

}

.cards .cardlist .card .text p {
    font-size: 0.9rem;
    padding: 2px;
    margin: 5px auto;
    text-align: left;

}

/*
    Media queries are used to adjust the styling for smaller screens.
    For screens with a width of 840px or less, the font size of the h2 tag within the text section of each card is reduced to 1.2rem, while the font size of the paragraph tag is reduced to 0.8rem.
    */
@media screen and (max-width: 840px) {
    .cards .cardlist .card .text h2 {
        font-size: 1.2rem;
    }

    .cards .cardlist .card .text p {
        font-size: 0.8rem;
    }
}

/*
    For screens with a width of 770px or less, the padding top of the cards section is increased, and each row of cards is displayed as a column with some spacing. The image within each card is also reduced in height and width.
    */
@media screen and (max-width: 770px) {
    .cards {
        padding-top: 9%;
    }

    .cards .cardlist {
        flex-direction: column;
        gap: 20px;
    }

    .cards .cardlist .card .images img {
        margin-top: 5%;
        height: auto;
        width: 45px;
    }
}

/*
    For screens with a width of 500px or less, each card is displayed as a column with centered items, and the text within each card is centered.
    */
@media screen and (max-width: 500px) {
    .cards .cardlist .card {
        flex-direction: column;
        text-align: center;
    }
}

.footer {
    display: flex;
    padding: 2% 6%;
    background-color: black;
}


/* Styling for the text in the footer section */
.footer p {
    font-size: 1.5rem;
    font-family: "Open Sans", sans-serif;
    color: white;
    justify-content: left;
}

/* Media Query for very small screens */
@media screen and (max-width: 500px) {
    .footer {
        padding: 4% 4%;
    }

    .footer p {
        font-size: 3vh;
    }

    .order-md-1 {
        order: 1;
    }

    .order-md-2 {
        order: 2;
    }
}


.social-icon {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
    /* Center the icons horizontally */
}

.social-icon li {
    display: inline-block;
    list-style: none;
}

.social-icon li a {
    border-radius: 50%;
    color: #ffee00;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    size: 500px;
    /* This line is not needed */
    font-size: 2em;
    /* Adjust the icon size as needed */
    margin: 10px;
    /* Adjust the margin as needed */
}

.social-icon li a:hover {
    color: rgb(255, 0, 170);
}