body {
    background-color: #d7d7d7;
    color: black;
    background-image: linear-gradient(to bottom,rgba(220, 155, 70, 0.8),rgb(122, 148, 173));
    color: rgb(72, 37, 136);
    margin-top: 0px;
    margin-left: 0px;
    box-sizing: border-box;

}

.navbar {
    
    background-color: #333;
    overflow: hidden;
    justify-content: space-between;
    padding: 0%;
}
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

#section1,#section4,#section2,#section3 {
    padding: 20px;
    /* margin: auto; */
    max-width: 1200px;
    margin:0 auto;
    
}

.profile-container {
    display: flex;
    align-items: center; /* Aligns image and text vertically centered */
    justify-content: space-between; /* Space between image and text */
    flex-wrap: wrap; /* Allows wrap if space is small */
}

.me img {
    width: 150px; /* Adjust size of image */
    height: auto;
    border-radius: 50%; /* Makes image circular */
    margin-right: 0px; /* Space between image and text */
}

.profile-text {
    max-width: 50%; /* Ensures text takes up rest of the space */
}

.profile-text h1 {
    text-align: left; /* Aligns text to the left */
}

.profile-text h3 {
    text-align: left;
}

.profile-text p {
    text-align: left;
}


.me{
    display: flex;
    margin-left:auto;
    margin: right 0;
    width: 30%;
    
}
h1,h2,h3{
    text-align: center;
    align-items: center;

}
.Portfolio {
    display:flex;           /* Use flexbox for layout */
    justify-content: space-between; /* Space out the cards evenly */
    flex-wrap: wrap;        /* Allow wrapping on smaller screens */
    max-width: 1200px;      /* Max width for the container */
    margin: 0 auto;    
    justify-content: center;     /* Center the container */
    align-items: center;
}
#section1 {
    align-items: right;
    text-align: left;
}

.card {
    /* display: flex; */
    background-color: white; /* Card background color */
    border: 1px solid #ccc;  /* Border color */
    border-radius: 8px;      /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    padding: 20px;           /* Padding inside each card */
    width: 33%;              /* Set width for each card */
    box-sizing: border-box;  /* Include padding and border in the total width */
    margin: auto;     /* Space below each card */
    transition: transform 0.3s; /* Smooth hover effect */
}

.card:hover {
    transform: translateY(-5px); /* Lift the card on hover */
}

img {
    width: 100%;         
    height: 300px;            
        border-radius: 5px;      
}

button {
    width: 100%;
    padding: 10px 30px;      /* Button padding */
    background-color: #007BFF; /* Button background color */
    color: white;             /* Button text color */
    border: none;             /* Remove default border */
    border-radius: 5px;      /* Rounded corners */
    cursor: pointer;          /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition */
    /* align-items: center */
    margin: auto;
}

button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
.skill-container{
    display: flex;
    flex-wrap: wrap;  
    align-items: center;
    padding: auto;
    margin: auto;
}
.skill-box{
    display: inline-block;
    border:1px solid;
    text-align: center;
    padding: 20px;
    margin:auto;
    justify-content:

}
.Education{
    text-align: center;
}
/* ul{
    width: 100%;
    display: block;
    list-style-type: square;
    align-items: center;
    padding:auto; 

    margin: auto;


} */
 .container{
    width: auto;
    align-items: center;
    display: block;
    margin: auto;
    padding: auto
    ;
 }
ul {
    width: 100%;               /* Make ul take full width */
    list-style-type: square;    /* Change bullet points to square */
    padding: 0;                /* Remove default padding */
    margin: 0 auto;            /* Center the ul horizontally */
    text-align: center;        /* Center the content inside the ul */
}

li {
    display: inline-block;     /* Display list items in a row */
    margin: 10px;              /* Add space around list items */
    padding: 5px 15px;         /* Padding inside list items */
    background-color: #e0f7fa; /* Background color for list items */
    border-radius: 5px;        /* Rounded corners */
}
.Contact{
    
    text-align: center;
}
footer{
    text-align: center;
}