body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #192841; /* Dark Grey */
    font-size: 0.875em; /* Font size for each experience */
}

html {
      scroll-behavior: smooth;
      }

h1 {
    text-align: center;
    margin: 20px 0;
    color: #CCCCCC
	}

h2 {
    font-size: 2.5em; /* Larger font size for the heading */
	}

.intro-duction{
    height: 100vh;
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.read-intro {
    text-align: center;
    padding: 10px;
    color: #CCCCCC;
    margin-top: 0px; /* Adjust this value to move the section lower */
    max-width: 1200px;
    
	}

/*------------------------------Write up section Starts here ------------------------------*/

.card-container {
	height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 0; /* Ensure no extra padding on the container */
    height: 100vh; /* Full height of the viewport */
    align-items: center; /* Center vertically */
	flex-direction: column;
	}

.fnt-text{
	white-space: nowrap; /* Prevent text from wrapping */
    font-size: 48px; /* Adjust font size as needed */
    color: white; /* Set text color for visibility */
    font-weight: bold; /* Make the font bold */
    letter-spacing: 10px; /* Add space between letters (adjust as needed) */
    display: block;
    position: absolute;
	top: 120%;
    }

.card-fortiles {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
    gap: 20px; /* Space between the cards */
    margin: 20px ; /* Add margin for spacing */
    
	}

.card {
    position: relative;
    display: flex;
    overflow: hidden;
    background-color: #7e5e60;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    margin: 10px; /* Set vertical margin to 30px and horizontal margin to 15px */
    flex-basis: calc(40% - 20px); /* Use flex-basis for the initial size */
    max-width: 496px; /* Set max-width */
    max-height: 184px; /* Set max-height */
    padding: 15px;
    justify-content: center; /* Center the cards horizontally */
    align-items: center; /* Align cards at the top */
    flex-grow: 0; /* Prevent growing */
    flex-shrink: 1; /* Allow shrinking */
    }
    
.card::before {
    content: "";
    display: block;
    padding-top: 50%; /* For a 2:1 aspect ratio, use 50% */
}

.card-image {
	flex: 0 0 40%;
    object-fit: cover; /* Cover the area while maintaining aspect ratio */
	background-color: black; /* Different background color for the image area */
	position: relative;
	overflow: hidden;
	}

.card-image img {
	position: absolute;
	overflow: hidden;
	object-fit: cover;
    width: 40%;
    height: 82%;
    border-radius: 8px;
    }

.card-content {
	position: relative;
    padding: 20px;
    flex: 0 0 60%;
    z-index: 2;
    background-color: rgba(0,0,0,0.2);
   /* background: linear-gradient(to left, rgba(126, 94, 96, 1) 0%, rgba(126, 94, 96, 0) 100%); */
    color: darkgrey;
    border-radius: 8px;
	height: 100%;
	overflow-y: auto; /* Allow scrolling if content exceeds */
	}

.card-head{
	font-size: 24px;
	}

.card a{
	text-decoration: none; /* Remove underline */
	}

/*------------------------------News styling starts here--------------------------------------*/

.latest-news {
    height: 100vh; /* Full height of the viewport */
    padding: 20px;
    color: #FFFFFF; /* White text color */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
    }

.latest-news h2 {

    margin-bottom: 20px; /* Space below the heading */
}

.latest-news ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    max-width: 1200px;
}

.latest-news li {
    margin-bottom: 10px; /* Space between list items */
    display: flex; /* Use flexbox to align items */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
     max-width: 1200px;
}

.latest-news a {
    text-decoration: none; /* Remove underline from links */
    color: #FFFFFF; /* Keep text color the same */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

.latest-news a:hover {
    text-decoration: none; /* No underline on hover for news links */
}

.read-more {
    margin-left: 10px; /* Space between news text and "Read more" link */
    font-size: 0.9em; /* Slightly smaller font size for "Read more" */
    color: #007BFF; /* Link color for "Read more" */
}

.read-more:hover {
    color: #0056b3; /* Darker color on hover for "Read more" */
    text-decoration: underline; /* Underline on hover for "Read more" */
}

.all-news-link {
    margin-top: 20px; /* Space above the all news link */
    color: #007BFF; /* Link color */
}

.all-news-link:hover {
    color: #0056b3; /* Darker color on hover for "See all past and current news" */
    text-decoration: underline; /* Underline on hover for "See all past and current news" */
}

.content {
    flex: 1; /* This will take up the remaining space */
}


/*-------------------About me styling starts here----------------------------------*/

.about-me {
    height: 100vh; /* Full height of the viewport */
    padding: 20px;
    color: #FFFFFF; /* White text color */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
}

.about-me h2 {
    margin-bottom: 20px; /* Space below the heading */
}

.about-me p {
    max-width: 1200px; /* Limit the width of the text */
    margin: 0 auto; /* Center the text block */
}

/* -----------------------------Xperience styling starts here----------------------------------  */

.experience-container {
    position: relative;
    height: 100vh; /* Full height of the viewport */
    overflow: hidden;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-direction: column;
    display: flex; /* Use Flexbox */
}

.experience {
    width: 100%; /* Full width of the container */
    max-width: 1200px; /* Optional: Limit the width for better readability */
    padding: 20px;
    color: #FFFFFF; /* White text color */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
    transition: transform 0.5s ease;
}

.bold-text {
    color: #FF5733; /* Change to your desired color for bold text */
}

.experience-title {
    color: #4CAF50; /* Change to your desired color for "My Experience" */
}

.experience h2 {
    margin-bottom: 20px; /* Space below the heading */
}

.experience ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
}

.experience li {
    margin: 10px 0; /* Space between experiences */
}

.download-button {
    background-color: transparent; /* Transparent background */
    border: 2px solid #FFFFFF; /* White border */
    color: #FFFFFF; /* White text color */
    padding: 10px 20px; /* Padding for the button */
    font-size: 1em; /* Font size for the button */
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, color 0.3s; /* Transition effects */
    margin-top: 20px;
}

.download-button:hover {
    background-color: #FFFFFF; /* Change background on hover */
    color: #000000; /* Change text color on hover */
}

.pre-button, .nex-button {
	position: relative;
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 20px;
    font-size: 14px;
    transition: background-color 0.3s;
    margin-top: 20px; /* Add some space above the buttons */
}

.pre-button, nex-button :hover {
    background-color: #0056b3; /* Darker shade on hover */
}


/* ---------------------------Skills styling starts here------------------------------------  */
 
.skills {
    height: 85vh; /* Full height of the viewport */
    padding: 20px;
    color: #FFFFFF; /* White text color */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
    position: relative;
}

.skills h2 {
    margin-bottom: 20px; /* Space below the heading */
}

.slides {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(2, auto); /* Max 2 rows */
    gap: 10px; /* Space between items */
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
}

.slide {
    font-size: 1.2em; /* Font size for each skill */
    margin: 0; /* Remove margin for list items */
}

.prev, .next {
    display: none; /* Hide buttons in desktop view */
}
/* ----------------------------Contact-me styling starts here----------------------------------- */
.contact-me {
    height: 85vh; /* Full height of the viewport */
    padding: 20px;
  /*  background-color: #282F37; /* Dark Grey background */
    color: #FFFFFF; /* White text color */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

.contact-content {
    display: flex; /* Use flexbox for layout */
    width: 100%; /* Full width */
    max-width: 1200px; /* Limit the maximum width */
}

.form-container {
    flex: 1; /* Allow the form to take available space */
    max-width: 400px; /* Limit the width of the form */
    margin-right: 160px; /* Increased space between form and dummy text */
    position: relative;
}

.dummy-text {
    flex: 1; /* Allow the dummy text to take available space */
    max-width: 600px; /* Limit the width of the dummy text */
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    align-items: flex-start; /* Align items to the start (left) */
    margin-top: 40px; /* Increased margin to create more space above */
}

.contact-me h2 {
    margin-bottom: 20px; /* Space below the heading */
}

.form-group {
    margin-bottom: 15px; /* Space between form fields */
}

label {
    display: block; /* Make labels block elements */
    margin-bottom: 5px; /* Space below labels */
}

input, textarea {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside input fields */
    border: 1px solid #ccc; /* Border for input fields */
    border-radius: 5px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background for input fields */
    color: #333; /* Dark text color for input fields */
}

.con-button {
    margin-top: 10px; /* Add space above the button */
    padding: 10px 20px; /* Padding for the button */
    background-color: #007BFF; /* Button color */
    color: #FFFFFF; /* White text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    display: block; /* Ensure it behaves like a block element */
    width: 100%; /* Optional: make it full width */
}

.con-button:hover {
    background-color: #0056b3; /* Darker button color on hover */
	}

/* this is end of contact me area */


/* Animation for sliding up */
.slide-up {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly below */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transition for smooth effect */
}

.slide-up.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to original position */
}

@media (min-width: 769px) {
    .hamburger {
        display: block; /* Show on desktop */
        position: fixed; /* Fix position */
        bottom: -100px; /* Move it out of view */
        right: 20px; /* Position from the right */
    }

    .cross-button {
        display: none; /* Keep cross button hidden on desktop */
    }
}