/* Reset default browser styles */
* {
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
    background-color: #02050a;
    color: #ffffff;
    line-height: 1.6;
}


/* Header Menu Section */


/* Header styling */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
}

/* Navbar container */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo styling */
.logo {
    height: 50px;
    width: auto;
    border-radius: 50%;
    box-shadow: 0px 8px 14px rgba(28, 28, 28, 0.847);
}

/* Navigation styling */
nav {
    flex-grow: 1;
}

/* Menu items container */
.navbar ul {
    display: flex;
    list-style: none;
    justify-content: flex-end;
}

/* Individual menu items */
.navbar ul li {
    position: relative;
    margin-left: 20px;
}

/* Menu links */
.navbar ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-size: 18px;
    transition: background 0.3s;
}

/* Hover effect for menu items */
.navbar ul li a:hover {
    background-color: #575757;
    border-radius: 4px;
    box-shadow: 0px 8px 14px rgba(28, 28, 28, 0.847);
}


/* Intro Section */

.Intro-container {
    display: flex;
    width: 90%;
    max-width: 1100px;
    background-image: url("images/backgroundimg/back2.png");
    
    background-size: 100% 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 5px rgba(49, 189, 218, 0.5);
    position: relative; /* Added for better positioning of the triangle */

    font-family: 'Arial', sans-serif;
    color: #fff;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-left: 70px;
    height: 500px;
    margin-bottom: 30px;
    
}

.Intro-content {
    flex: 1;
    padding: 40px;
}

.Intro-content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.Intro-content p {
    font-size: 1.2em;
    margin-bottom: 40px;
    text-align: justify;
}

.CV-button {
    display: flex;
    gap: 20px;
}

.CV-btn {
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: #20c997;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.CV-btn img {
    height: 20px;
    width: 20px;
    margin-right: 5px;
    filter: invert(100%);
}



.CV-btn:hover {
    background-color: #219150;
}



.Intro-image {
    flex: 1;
    position: relative; /* Added for positioning the clipping */
}

.Intro-image img {
    width: 60%;
    height: 30%;
    object-fit: cover;
    clip-path: polygon(100% 1, 100% 100%, 1 100%);
    padding: 20px;
    border-radius: 50%;
    margin-left: 100px;
    opacity: 0;
    transform: scale(0.8);
    animation: fadeInScale 3s forwards;
    border: 4px solid rgb(13, 248, 189);
    box-shadow: 3px 6px 12px rgba(7, 227, 187, 0.598);
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}







/* Engineer , Developer , Designer */


.text-animation {
    display: inline; /* Changed to inline */
    font-size: 1em;
    height: 1.5em;
    overflow: hidden;
    position: relative;
    color: #20c997;
    padding-left: 10px; /* Adjusted for spacing */
    width: 200px;
}
.text-animation span {
    position: absolute;
    color: #20c997;
    width: 100%;
    opacity: 0;
    animation: changeText 6s linear infinite 0s;
    text-align: center;
}
.text-animation span:nth-child(1) {
    animation-delay: 0s;
}
.text-animation span:nth-child(2) {
    animation-delay: 2s;
}
.text-animation span:nth-child(3) {
    animation-delay: 4s;
}

@keyframes changeText {
    0% { opacity: 0; }
    10% { opacity: 1; }
    30% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}




/* About */


.About-container {
    width: 90%;
    max-width: 1100px;
    background-image: url("images/backgroundimg/back2.png");
    
    background-size: 100% 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 5px rgba(49, 189, 218, 0.5);
    position: relative; /* Added for better positioning of the triangle */

    font-family: 'Arial', sans-serif;
    color: #fff;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-left: 70px;
    height: 600px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    
}

.About-content {
    flex: 1;
    padding: 40px;
}

.About-content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.About-content p {
    font-size: 1.2em;
    margin-bottom: 40px;
    text-align: justify;
}




/* skills */




/* About me animation */

.wave {
    display: inline-block;
    color: #20c997;
}
.wave span {
    display: inline-block;
    animation: wave 1.5s ease-in-out infinite;
}
.wave span:nth-child(odd) {
    animation-delay: 0.2s;
}
@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}



/* See more button */
.transparent-button {
    background-color: transparent;
    border: 2px solid rgb(0, 200, 255);
    color: rgb(0, 200, 255);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    display: block;
    margin: 20px auto;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0 2px 10px 0 rgb(0, 200, 255);
    text-decoration: none;
}

.transparent-button:hover {
    background-color: rgba(52, 51, 51, 0.932);
}

/* Project */
.Project-container {
    width: 90%;
    max-width: 1100px;
    background-image: url("images/backgroundimg/back2.png");
    background-size: 100% 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 5px rgba(49, 189, 218, 0.5);
    position: relative;
    font-family: 'Arial', sans-serif;
    color: #fff;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-left: 70px;
    height: auto;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.Project-content {
    padding: 40px;
}

.Project-content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Project box */
.carousel-container {
    position: relative;
    width: 93%;
    max-width: 1000px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.carousel {
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-left: 90px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    height: 100vh;
}

.carousel-item a {
    text-decoration: none;
}

.carousel-item {
    width: 300px;
    box-sizing: border-box;
    padding: 10px;
    height: 350px;
    margin: 50px 10px;
    text-align: center;
    font-size: 20px;
    border-radius: 10px;
    background-color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid rgb(0, 191, 255);
}

.carousel-item:nth-child(odd) {
    background: linear-gradient(to right, rgb(30, 30, 30), rgb(35, 104, 147));
}

.carousel-item:nth-child(even) {
    background: linear-gradient(to right, rgb(30, 30, 30), rgb(168, 76, 175));
}

.carousel-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.5);
    border: 5px solid rgb(0, 191, 255);
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 10px;
    z-index: 1000;
}

.left-arrow {
    left: 30px;
}

.right-arrow {
    right: 30px;
}

.carousel-item img {
    width: 220px;
    height: 140px;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid black;
}

.carousel-item p {
    font-size: 12px;
    text-align: justify;
}

.Project-button {
    background-color: transparent;
    border: 2px solid rgb(231, 237, 239);
    color: rgb(235, 242, 244);
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    display: block;
    margin: auto;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 2px 10px 0 rgb(242, 245, 245);
    margin-top: 3px;
}

.Project-button:hover {
    background-color: rgba(119, 117, 116, 0.874);
}



/* Contact box */

/* Contact Container */
.contact-container {
    width: 90%;
    max-width: 1100px;
    background-image: url("images/backgroundimg/back2.png");
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 5px rgba(49, 189, 218, 0.5);
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px;
    align-items: center;
    justify-content: center;
    height: auto;
    margin-left: 70px;
}

/* Contact Content */
.contact-content {
    padding: 20px;
}

.contact-content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #fff;
}

/* Contact Form and Details */
.contact-all {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}

.contact-form {
    width: 45%;
    margin-bottom: 10px;
    margin-left: 30px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    border: 3px solid;
    border-image: linear-gradient(to right, darkblue, darkorchid) 1;
    padding: 20px;
    background-color: #1c1b1b;
}

.contact-form label {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.85em; /* Reduced size */
}

.contact-form input {
    margin-bottom: 10px;
    padding: 8px; /* Reduced padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.85em; /* Reduced size */
    width: 200px;
    box-shadow: 0 2px 4px 0 rgba(199, 63, 230, 0.963), 0 3px 10px 0 rgba(149, 79, 224, 0.918);
}

.contact-form select{
    margin-bottom: 10px;
    padding: 8px; /* Reduced padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.85em; /* Reduced size */
    width: 200px;
    box-shadow: 0 2px 4px 0 rgba(199, 63, 230, 0.963), 0 3px 10px 0 rgba(149, 79, 224, 0.918);

}

.contact-form textarea {
    margin-bottom: 10px;
    padding: 8px; /* Reduced padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.85em; /* Reduced size */
    width: 428px;
    box-shadow: 0 2px 4px 0 rgba(199, 63, 230, 0.963), 0 3px 10px 0 rgba(149, 79, 224, 0.918);
}

.one{
    display: flex;
    justify-content: space-between;
}

.send-button {
    background-color: rgb(0, 200, 255);
    border: none;
    color: white;
    padding: 8px; /* Reduced padding */
    font-size: 0.85em; /* Reduced size */
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.send-button:hover {
    background-color: rgba(232, 85, 156, 0.932);
}

.contact-details {
    width: 45%;
    color: #fff;
    text-align: center;
    margin-top: 60px;
}

.con-logo p {
    margin-left: 18px;
}

.contact-details a {
    color: #00c8ff;
    text-decoration: none;
    font-size: 12px;
}

.contact-details a:hover {
    text-decoration: underline;
}


.con-logo{
    display: flex;
    margin-left: 92px;
    margin-top: 10px;
}

.con-logo img {
    width: 35px;
    height: 35px;
    margin-bottom: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.con-logo img:hover {
    transform: scale(1.1);
    opacity: 0.8;
}





/* footer */

.footer {
    background-color: #111;
    padding: 20px 0;
    color: #fff;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px 50px;
}

.footer-section {
    flex: 1;
    min-width: 200px;
    margin: 10px;
}

.footer-section h2 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #20c997;
}

.footer-content h1{
    color: #20c997;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #fff;
    text-decoration: none;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

.footer-bottom {
    background-color: #000;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #444;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: #fff;
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.footer-socials {
    margin-top: 10px;
}

.footer-socials a {
    margin: 0 10px;
    text-decoration: none;
}

.social-icon {
    width: 25px;
    height: 25px;
    border: 1px solid rgb(254, 251, 251);
    border-radius: 50%;
}

.footer-socials a:hover .social-icon {
    opacity: 0.7;
}



























.container {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    
}

.nav-buttons{
    justify-content: center;
    align-items: center;
    text-align: center;
}

.edu-button {
    --color: #f3f5f4;
    --hover: hsl(201, 48%, 50%);
    
    background: linear-gradient(to right, rgb(30, 30, 30), rgb(123, 123, 122));
    border: 2px solid var(--color);
    color: var(--color);
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: 10px 20px;
    transition: 0.25s;
    border-radius: 10px;
  }
  
  .edu-button:hover,
  .edu-button:focus {
    border-color: var(--hover);
    color: #fff;
  }
  
  /* Style specifically for the slide button with the edu-button class */
  .edu-button.slide:hover,
  .edu-button.slide:focus {
    box-shadow: inset 10.5em 0 0 0 var(--hover);
  }

  .content-section {
    display: none;
}

.content-section:not(.hidden) {
    display: block;
}


header {
    text-align: center;
    margin-bottom: 20px;
}


#education {
    margin-top: 50px;
}




#content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.card {
    background: linear-gradient(rgb(30, 30, 30), rgb(181, 78, 209), rgb(30, 30, 30));
    padding: 10px;
    border-radius: 10px;
    border: 2px solid white;
    margin-bottom: 15px;
    
    
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}

.card h3, .card h4 {
    margin: 0;
}

.card span {
    display: block;
    margin: 0 0 10px 10px;
}

.card p {
    color: #ccc;
    margin: 0 0 10px 10px;
}

.campus-image {
    width: 203px;
    height: 120px;
    opacity: 0.9;
    border-radius: 10px;
}

.imge {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 5px;
}

.edu-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.edu-box {
    border: 2px solid white;
    border-radius: 10px;
    padding: 5px;
    width: 420px;
    height: 220px;
    background: linear-gradient(to right, rgb(30, 30, 30), rgb(35, 104, 147));
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.edu-box:hover {
    border-color: #fff;
    background: linear-gradient(to right, rgb(35, 104, 147), rgb(30, 30, 30));
    transform: scale(1.02);
}

.edu-head {
    text-align: center;
    margin: 0;
}

.school {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vertical-line {
    border: none;
    border-left: 2px solid rgb(241, 237, 237);
    height: 38px;
    margin: 2px 10px;
}

sup {
    font-size: 12px;
}






.mainAbout-container {
    width: 90%;
    max-width: 1100px;
    background-image: url("images/backgroundimg/back2.png");
    
    background-size: 100% 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 5px rgba(49, 189, 218, 0.5);
    position: relative; /* Added for better positioning of the triangle */

    font-family: 'Arial', sans-serif;
    color: #fff;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-left: 70px;
    height: auto;
    margin-bottom: 30px;
    padding-bottom: 10px;
    
}

.mainAbout-content {
    flex: 1;
    padding: 40px;
}

.mainAbout-content h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    line-height: 1.2;
}

.mainAbout-content p {
    font-size: 1.2em;
    
    text-align: justify;
}






/* Expirence */

#experience {
    margin-top: 50px;
}

.exp {
    margin: 0 30px 20px;
    padding: 15px;
    border: 3px solid;
    border-radius: 5px;
    border-image: linear-gradient(to right, darkblue, darkorchid) 1;
    background-color: #0a0a0a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    text-align: justify;
}

.company {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.company img {
    max-width: 40px;
    max-height: 40px;
    margin-right: 10px;
}

.exp h3 {
    margin: 0;
    font-size: 1.5em;
    color: #fff;
}

.exp h4 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    color: #ccc;
}

.exp span {
    display: block;
    font-size: 0.9em;
    color: #999;
}

.exp p {
    margin-top: 10px;
    font-size: 1em;
    color: #bbb;
    line-height: 1.5;
}

.exp:hover {
    transform: scale(1.02); /* Slightly increase the size of the box */
}

/* Expirence Closed */












/* Skill  */

.skills-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#skills {
    margin-top: 40px;
}

.skill {
    text-align: center;
}

.skill p {
    font-size: 0.8rem;
}

.skill img {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

.circle {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    transition: transform 0.3s;
}

.circle:hover {
    transform: translateY(-10px);
}

.inner-circle {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background-color: #0f1012;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #20c997; /* Green color */
}


/* skill heading */
.text-shadow {
    margin-bottom: 20px;
    line-height: 1.2;
    font-size: 26px; 
    text-align: center;
    animation: textShadow 2s infinite;
}
@keyframes textShadow {
    0%, 100% { text-shadow: 0 0 10px rgb(0, 200, 255); }
    50% { text-shadow: 0 0 30px rgb(0, 200, 255); }
}


/* skill heading */
.text-shadow2 {
    margin-bottom: 40px;
    line-height: 1.2;
    font-size: 26px; 
    text-align: center;
    animation: textShadow 2s infinite;
    margin-top: 100px;
}
@keyframes textShadow2 {
    0%, 100% { text-shadow: 0 0 10px rgb(0, 200, 255); }
    50% { text-shadow: 0 0 30px rgb(0, 200, 255); }
}


.skills-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    width: 100%;
    justify-content: center; /* Center align grid items horizontally */
    margin: 0 auto; /* Center the grid container itself */
}

/* Skill item styling */
.skill-item {
    display: flex;
    flex-direction: column;
    transform: translateY(50px); /* Initial position: shifted down */
    opacity: 0; /* Start as invisible */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition */
    margin-bottom: 10px;
    margin-left: 30px;
    margin-right: 30px;
}

/* When skill item comes into view */
.skill-item.in-view {
    transform: translateY(0); /* Slide up */
    opacity: 1; /* Fade in */
}

/* Progress container styling */
.progress-container {
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 8px;
    width: 100%; /* Adjust width to fit parent */
    max-width: 400px; /* Optional: set max-width for better control */
}

/* Fill of the progress bar */
.progress-fill {
    background-color: #1abc9c;
    height: 100%;
    border-radius: 20px 0 0 20px;
    transition: width 0.20s ease-in-out;
}

/* Skill title and progress label styling */
.skill-title {
    font-size: 14px;
    float: left;
}

.progress-label {
    font-size: 14px;
    float: right;
    border-image: linear-gradient(to right, rgb(90, 214, 236), rgb(209, 139, 252)) 1;
}
/* Skill Closed */





/* Hobbies */
.Hob1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-top: 50px;
    gap: 20px; /* Optional: Adds space between flex items */
}

.Hob-box1, .Hob-box2, .Hob-box3, .Hob-box4, .Hob-box5 {
    position: relative;
    border: 2px solid white;
    border-radius: 10px;
    padding: 5px;
    width: 420px;
    height: 223px;
    background-color: #383737;
    transition: transform 0.3s, border 0.3s; /* Smooth transition for hover effects */
}

.Hob-box1::before, .Hob-box2::before, .Hob-box3::before, .Hob-box4::before, .Hob-box5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    opacity: 0.2; /* Adjust the opacity as needed */
    z-index: 1; /* Ensure the overlay is behind the content */
}

.Hob-box1::before {
    animation-name: skill1;
}

.Hob-box2::before {
    animation-name: skill2;
}

.Hob-box3::before {
    animation-name: skill3;
}

.Hob-box4::before {
    animation-name: skill4;
}

.Hob-box5::before {
    animation-name: skill5;
}

@keyframes skill1 {
    0% { background-image: url('images/hobimage/tavel1.jpg'); }
    25% { background-image: url('images/hobimage/tavel2.jpg'); }
    50% { background-image: url('images/hobimage/tavel3.jpg'); }
    75% { background-image: url('images/hobimage/tavel4.jpg'); }
    100% { background-image: url('images/hobimage/tavel5.jpg'); }
}

@keyframes skill2 {
    0% { background-image: url('images/hobimage/code1.jpg'); }
    25% { background-image: url('images/hobimage/code2.jpg'); }
    50% { background-image: url('images/hobimage/code3.jpg'); }
    75% { background-image: url('images/hobimage/code4.jpg'); }
    100% { background-image: url('images/hobimage/code5.jpg'); }
}

@keyframes skill3 {
    0% { background-image: url('images/hobimage/webs1.jpeg'); }
    25% { background-image: url('images/hobimage/webs2.jpg'); }
    50% { background-image: url('images/hobimage/webs3.jpg'); }
    75% { background-image: url('images/hobimage/webs4.jpg'); }
    100% { background-image: url('images/hobimage/webs5.jpeg'); }
}

@keyframes skill4 {
    0% { background-image: url('images/hobimage/vollyball1.jpeg'); }
    25% { background-image: url('images/hobimage/vollyball2.png'); }
    50% { background-image: url('images/hobimage/vollyball3.jpeg'); }
    75% { background-image: url('images/hobimage/vollyball4.jpg'); }
    100% { background-image: url('images/hobimage/vollyball5.jpg'); }
}

@keyframes skill5 {
    0% { background-image: url('images/hobimage/bgmi1.jpeg'); }
    25% { background-image: url('images/hobimage/bgmi2.jpeg'); }
    50% { background-image: url('images/hobimage/bgmi3.png'); }
    75% { background-image: url('images/hobimage/bgmi4.jpeg'); }
    100% { background-image: url('images/hobimage/bgmi5.jpg'); }
}

.Hob-box1:hover, .Hob-box2:hover, .Hob-box3:hover, .Hob-box4:hover, .Hob-box5:hover {
    border: 3px solid rgb(86, 237, 171);
    transform: scale(1.02);
}

.Hob-box1 .hob-content, .Hob-box2 .hob-content, .Hob-box3 .hob-content, .Hob-box4 .hob-content, .Hob-box5 .hob-content {
    position: relative;
    z-index: 2; /* Ensure the content is above the overlay */
}

.Hob-head {
    text-align: center;
    margin: 0 10px;
    padding: 5px;
}

.hob-list {
    display: flex;
    justify-content: center;
}

.hob-p {
    margin-top: 5px;
    margin-left: 10px;
}

.hob-ul {
    list-style: none;
    margin: 0;
    margin-right: 8px;
    padding: 0;
}




/* achievements */

/* Achievements Section Styles */
#achievements {
    padding: 20px;
    
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.achievement-category {
    margin-bottom: 40px;
}

.achievement-category h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #f0ecec;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 5px;
}

.achievement-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.achievement-item {
    flex: 1 1 30%;
    max-width: 25%;
    text-align: center;
    margin: 10px;
    padding: 10px;
    border: 2px solid;
    background: linear-gradient(to right, darkblue, darkorchid);
    border-image: linear-gradient(to right, darkblue, darkorchid) 1;
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for background and box-shadow */
}

.achievement-item img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.achievement-item p {
    font-size: 1rem;
    color: #f0ecec;
    margin: 5px 0;
}

.achievement-description {
    font-size: 0.9rem;
    color: #f0ecec;
    
    
    
    
    margin-top: 5px;
}

.achievement-item:hover {
    border: 3px solid rgb(241, 241, 245);
    
    box-shadow: 0 4px 8px rgba(221, 192, 87, 0.922);
    color: #fff; /* Change text color to white for better contrast */
}

.ach-ul {
    list-style: none;
    margin: 0;
    margin-right: 8px;
    padding: 0;
    
}


.ach-ul li{
    text-align: center;
}








/* Contact Map container */

.map-container {
    width: 45%;
    margin-right: 40px;
    
}

.map-container h3 {
    margin-bottom: 2px;
    font-size: 22px;
    color: #333;
}

.map-container p {
    margin-bottom: 2px;
    color: #f5f2f2;
}

.contact-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding: 40px 0;
}

.info-card {
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #f05a8e, #784ba0);
    width: 150px;
    border-radius: 10px;
    padding: 5px;
    transition: transform 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0px 4px 15px rgba(152, 73, 226, 0.664);
}

.info-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
    transform: scale(1.1); /* Slight lift effect on hover */
    background: linear-gradient(to right, #e6769d, #a26cd1);
}


.info-card .icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.info-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #f3f5f4;
}

.info-card p {
    font-size: 14px;
    color: #f3f5f4;
}

iframe {
    border: 5px solid;
    border-image: linear-gradient(to right, darkblue, darkorchid) 1;
    box-shadow: 0px 4px 15px rgba(73, 216, 226, 0.664);
}












/* testing-page*/
.testing-page {
    text-align: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
}

.construction-image {
    width: 500px; /* Adjust as needed */
    height: auto;
    margin-bottom: 20px;
}

.testing-page p {
    margin-bottom: 20px;
    
    
}

.testing-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.testing-button:hover {
    background-color: #0056b3;
}


/* 5. Bounce */
.bounce {
    animation: colorChange 2s infinite;
    font-size: 22px;
    
}


@keyframes colorChange {
    0%, 100% { color: rgb(10, 222, 56); }
    50% { color: rgb(253, 38, 38); }
}




/* Project Page */



.Main-carousel {
    display: flex;

    height: 100vh;
    margin-left: 90px;
}

.Main-carousel-container {
    position: relative;
    width: 95%;
    max-width: 1000px;
    
    justify-content: center;
    align-items: center;
    height: 70vh;
}









/* Blog Page */




/* Hero Section */
.hero {
    background: url('hero-bg.jpg') no-repeat center center/cover;
    height: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
}

.hero h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2rem;
}

/* Blog Posts */
.blog-posts {
    padding: 40px 0;
}

.blog-container {
    width: 80%;
    margin: auto;
}

.post {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.post h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #000;
}

.post p {
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.8;
    color: #000;
}

.read-more {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.read-more:hover {
    background-color: #ffdd57;
}



















/* Mobile View */

/* Mobile view adjustments */
@media (max-width: 768px) {
    /* Header Menu Section */
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar ul {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }

    .navbar ul li {
        margin: 0;
    }

    .navbar ul li a {
        padding: 10px;
        text-align: center;
        width: 100%;
        display: block;
        font-size: 16px;
    }

    /* Intro Section */
    .Intro-container {
        width: 100%;
        margin: 20px 0;
        margin-left: 0;
        height: auto;
        padding: 20px;
        box-shadow: 0 0 8px 4px rgba(49, 189, 218, 0.5);
    }

    .Intro-content {
        padding: 20px;
    }

    .Intro-content h1 {
        font-size: 1.8em;
    }

    .Intro-content p {
        font-size: 1em;
        margin-bottom: 20px;
        text-align: left;
    }

    .CV-button {
        flex-direction: column;
        align-items: center;
    }

    .CV-btn {
        font-size: 0.9em;
        padding: 8px 15px;
    }

    .Intro-image {
        display: flex;
        justify-content: center;
    }

    .Intro-image img {
        width: 80%;
        height: auto;
        margin-left: 0;
        border-radius: 50%;
        transform: scale(1);
        animation: fadeInScale 2s forwards;
    }
}

@media (max-width: 480px) {
    .navbar ul li a {
        font-size: 14px;
    }

    .Intro-content h1 {
        font-size: 1.5em;
    }

    .Intro-content p {
        font-size: 0.9em;
    }

    .CV-btn {
        font-size: 0.8em;
        padding: 6px 12px;
    }

    .Intro-image img {
        width: 90%;
    }
}


/* Mobile view adjustments */
@media (max-width: 768px) {
    /* Text animation */
    .text-animation {
        width: 100%;
        font-size: 0.9em; /* Adjusted for smaller screens */
        padding-left: 5px; /* Reduced padding for mobile */
    }

    .text-animation span {
        font-size: 1em; /* Adjust text size for mobile */
    }

    /* About Section */
    .About-container {
        width: 100%;
        margin-left: 0;
        height: auto;
        padding: 20px;
        box-shadow: 0 0 8px 4px rgba(49, 189, 218, 0.5);
    }

    .About-content {
        padding: 20px;
    }

    .About-content h1 {
        font-size: 1.8em;
    }

    .About-content p {
        font-size: 1em;
        margin-bottom: 20px;
        text-align: left;
    }

    /* Skills Animation */
    .wave span {
        font-size: 0.9em; /* Adjust size for mobile */
    }

    /* See more button */
    .transparent-button {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Project Section */
    .Project-container {
        width: 100%;
        margin-left: 0;
        height: auto;
        padding: 20px;
        box-shadow: 0 0 8px 4px rgba(49, 189, 218, 0.5);
    }

    .Project-content {
        padding: 20px;
    }

    .Project-content h1 {
        font-size: 1.8em;
    }

    .carousel-container {
        width: 100%;
        height: auto; /* Adjust height for mobile */
    }

    .carousel {
        margin-left: 0;
        height: auto;
    }

    .carousel-item {
        width: 90%; /* Adjust width for mobile */
        margin: 20px 5%;
        height: auto; /* Adjust height for mobile */
        font-size: 16px;
        border: 2px solid rgb(0, 191, 255);
    }

    .carousel-item img {
        width: 100%;
        height: auto;
    }

    .carousel-item p {
        font-size: 10px;
    }

    .Project-button {
        padding: 6px 12px;
        font-size: 12px;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    /* Text animation */
    .text-animation {
        font-size: 0.8em;
        width: 100%;
    }

    .text-animation span {
        font-size: 0.9em;
    }

    /* About Section */
    .About-content h1 {
        font-size: 1.5em;
    }

    .About-content p {
        font-size: 0.9em;
    }

    /* Skills Animation */
    .wave span {
        font-size: 0.8em;
    }

    /* See more button */
    .transparent-button {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Project Section */
    .Project-content h1 {
        font-size: 1.5em;
    }

    .carousel-item {
        font-size: 14px;
    }

    .Project-button {
        padding: 4px 8px;
        font-size: 10px;
    }
}


/* Mobile view adjustments for Contact and Footer sections */
@media (max-width: 768px) {
    /* Contact Section */
    .contact-container {
        width: 100%;
        margin-left: 0;
        padding: 10px;
        box-shadow: 0 0 8px 4px rgba(49, 189, 218, 0.5);
    }

    .contact-content {
        padding: 10px;
    }

    .contact-content h1 {
        font-size: 1.8em;
    }

    .contact-all {
        flex-direction: column;
    }

    .contact-form {
        width: 100%;
        margin-left: 0;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100%;
        font-size: 0.9em; /* Adjusted for mobile */
    }

    .contact-form textarea {
        width: 100%; /* Adjust width for mobile */
    }

    .send-button {
        width: 100%;
        padding: 10px;
        font-size: 1em;
    }

    .contact-details {
        width: 100%;
        margin-top: 20px;
    }

    .con-logo {
        margin-left: 0;
        justify-content: center;
    }

    .con-logo img {
        width: 30px;
        height: 30px;
    }

    /* Footer Section */
    .footer-content {
        flex-direction: column;
        padding: 10px 20px;
    }

    .footer-section {
        min-width: 100%;
        margin: 10px 0;
    }

    .footer-section h2 {
        font-size: 16px;
    }

    .footer-bottom {
        padding: 10px 20px;
    }

    .footer-bottom p {
        font-size: 14px;
    }

    .footer-socials a {
        margin: 0 5px;
    }

    .social-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    /* Contact Section */
    .contact-content h1 {
        font-size: 1.5em;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 0.8em; /* Further reduced for smaller screens */
    }

    .send-button {
        font-size: 0.9em;
    }

    .contact-details a {
        font-size: 10px;
    }

    .con-logo img {
        width: 25px;
        height: 25px;
    }

    /* Footer Section */
    .footer-section h2 {
        font-size: 14px;
    }

    .footer-bottom p {
        font-size: 12px;
    }

    .social-icon {
        width: 18px;
        height: 18px;
    }
}





/* Container for centered content */
.container {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
}

/* Navigation buttons container */
.nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Education button style */
.edu-button {
    --color: #f3f5f4;
    --hover: hsl(201, 48%, 50%);
    background: linear-gradient(to right, rgb(30, 30, 30), rgb(123, 123, 122));
    border: 2px solid var(--color);
    color: var(--color);
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: 10px 20px;
    transition: 0.25s;
    border-radius: 10px;
}

.edu-button:hover,
.edu-button:focus {
    border-color: var(--hover);
    color: #fff;
}

/* Slide button style */
.edu-button.slide:hover,
.edu-button.slide:focus {
    box-shadow: inset 10.5em 0 0 0 var(--hover);
}

/* Content sections */
.content-section {
    display: none;
}

.content-section:not(.hidden) {
    display: block;
}

/* Header styling */
header {
    text-align: center;
    margin-bottom: 20px;
}

/* Education section styling */
#education {
    margin-top: 50px;
}

/* Content styling */
#content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

/* Card styling */
.card {
    background: linear-gradient(rgb(30, 30, 30), rgb(181, 78, 209), rgb(30, 30, 30));
    padding: 10px;
    border-radius: 10px;
    border: 2px solid white;
    margin-bottom: 15px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}

.card h3,
.card h4 {
    margin: 0;
}

.card span {
    display: block;
    margin: 0 0 10px 10px;
}

.card p {
    color: #ccc;
    margin: 0 0 10px 10px;
}

/* Campus image styling */
.campus-image {
    width: 203px;
    height: 120px;
    opacity: 0.9;
    border-radius: 10px;
}

.imge {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 5px;
}

/* Education details styling */
.edu-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Education box styling */
.edu-box {
    border: 2px solid white;
    border-radius: 10px;
    padding: 5px;
    width: 420px;
    height: 220px;
    background: linear-gradient(to right, rgb(30, 30, 30), rgb(35, 104, 147));
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.edu-box:hover {
    border-color: #fff;
    background: linear-gradient(to right, rgb(35, 104, 147), rgb(30, 30, 30));
    transform: scale(1.02);
}

/* Education heading styling */
.edu-head {
    text-align: center;
    margin: 0;
}

/* School section styling */
.school {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Vertical line styling */
.vertical-line {
    border: none;
    border-left: 2px solid rgb(241, 237, 237);
    height: 38px;
    margin: 2px 10px;
}

/* Superscript styling */
sup {
    font-size: 12px;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .edu-button {
        padding: 8px 16px;
        font-size: 0.85em;
    }

    .card {
        padding: 8px;
    }

    .edu-box {
        width: 100%;
        height: auto;
    }

    .edu-detail {
        flex-direction: column;
        gap: 10px;
    }

    .logo {
        width: 30px;
        height: 30px;
    }

    .campus-image {
        width: 180px;
        height: auto;
    }
}

@media (max-width: 480px) {
    .edu-button {
        padding: 6px 12px;
        font-size: 0.75em;
    }

    .card {
        padding: 6px;
    }

    .edu-box {
        width: 100%;
        height: auto;
    }

    .logo {
        width: 25px;
        height: 25px;
    }

    .campus-image {
        width: 150px;
    }
}




/* Mobile View (up to 768px) */
@media (max-width: 768px) {
    /* Main About Container */
    .mainAbout-container {
        width: 95%;
        margin-left: 0; /* Center align */
        padding: 15px; /* Adjust padding */
        background-size: cover; /* Ensure background covers properly */
    }
    
    .mainAbout-content {
        padding: 20px; /* Adjust padding for mobile */
    }

    .mainAbout-content h1 {
        font-size: 2em; /* Reduce font size for smaller screens */
    }

    .mainAbout-content p {
        font-size: 1em; /* Adjust font size */
    }

    /* Experience Section */
    #experience {
        margin-top: 30px; /* Reduce margin for mobile */
    }

    .exp {
        margin: 15px 10px; /* Adjust margins */
        padding: 10px; /* Adjust padding */
    }

    .company img {
        max-width: 30px; /* Adjust logo size */
        max-height: 30px;
    }

    .exp h3 {
        font-size: 1.3em; /* Adjust font size */
    }

    .exp h4 {
        font-size: 1em; /* Adjust font size */
    }

    .exp p {
        font-size: 0.9em; /* Adjust font size */
    }

    /* Skill Section */
    .skills-container {
        flex-direction: column; /* Stack items vertically */
    }

    .skill {
        text-align: center;
        margin: 10px 0; /* Adjust margins */
    }

    .circle {
        width: 50px; /* Adjust size */
        height: 50px;
    }

    .inner-circle {
        font-size: 0.8rem; /* Adjust font size */
    }

    .skills-wrapper {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .skill-item {
        margin: 10px; /* Adjust margins */
    }

    /* Progress Bar */
    .progress-container {
        max-width: 100%; /* Ensure progress bar fits */
    }

    .progress-label {
        font-size: 12px; /* Adjust font size */
    }
}

/* Tablet View (up to 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Adjustments for tablet view if needed */
    .mainAbout-container {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .mainAbout-content h1 {
        font-size: 2.2em;
    }

    .mainAbout-content p {
        font-size: 1.1em;
    }

    .exp {
        margin: 20px;
        padding: 15px;
    }

    .company img {
        max-width: 35px;
        max-height: 35px;
    }

    .exp h3 {
        font-size: 1.4em;
    }

    .exp h4 {
        font-size: 1.1em;
    }

    .exp p {
        font-size: 1em;
    }

    .skills-container {
        gap: 15px; /* Adjust gap for tablet */
    }
}




/* Mobile View (up to 768px) */
@media (max-width: 768px) {
    /* Hobbies Section */
    .Hob1 {
        flex-direction: column; /* Stack items vertically */
        margin-top: 20px; /* Adjust margin */
    }

    .Hob-box1, .Hob-box2, .Hob-box3, .Hob-box4, .Hob-box5 {
        width: 100%; /* Full width */
        height: auto; /* Auto height for flexibility */
        margin-bottom: 15px; /* Adjust margin */
        padding: 10px; /* Adjust padding */
        box-sizing: border-box; /* Include padding and border in element's total width and height */
    }

    .Hob-box1::before, .Hob-box2::before, .Hob-box3::before, .Hob-box4::before, .Hob-box5::before {
        opacity: 0.3; /* Increase opacity for better visibility */
    }

    .Hob-head {
        font-size: 1.2em; /* Adjust font size */
        padding: 10px; /* Adjust padding */
    }

    .hob-list {
        flex-direction: column; /* Stack list items vertically */
    }

    .hob-p {
        margin-top: 10px; /* Adjust margin */
        margin-left: 0; /* Remove left margin */
    }

    .hob-ul {
        margin-right: 0; /* Remove right margin */
    }

    /* Achievements Section */
    #achievements {
        padding: 10px; /* Adjust padding */
        margin-bottom: 20px; /* Adjust margin */
    }

    .achievement-category h3 {
        font-size: 1.2rem; /* Adjust font size */
    }

    .achievement-items {
        flex-direction: column; /* Stack items vertically */
    }

    .achievement-item {
        flex: 1 1 100%; /* Full width for each item */
        max-width: 100%; /* Full width for each item */
        margin: 5px 0; /* Adjust margin */
        padding: 10px; /* Adjust padding */
    }

    .achievement-item img {
        width: 40px; /* Adjust size */
        height: 40px; /* Adjust size */
    }

    .achievement-item p {
        font-size: 0.9rem; /* Adjust font size */
    }

    .achievement-description {
        font-size: 0.8rem; /* Adjust font size */
    }

    .ach-ul {
        margin-right: 0; /* Remove right margin */
    }

    .ach-ul li {
        font-size: 0.9rem; /* Adjust font size */
    }
}

/* Tablet View (up to 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Hobbies Section */
    .Hob1 {
        flex-wrap: wrap; /* Allow wrapping for tablet view */
        margin-top: 30px; /* Adjust margin */
    }

    .Hob-box1, .Hob-box2, .Hob-box3, .Hob-box4, .Hob-box5 {
        width: 45%; /* Adjust width for tablet view */
        height: auto; /* Auto height */
        margin-bottom: 20px; /* Adjust margin */
        padding: 10px; /* Adjust padding */
    }

    .Hob-head {
        font-size: 1.5em; /* Adjust font size */
    }

    .hob-list {
        flex-direction: row; /* Align items horizontally */
    }

    .hob-p {
        margin-left: 15px; /* Adjust margin */
    }

    /* Achievements Section */
    #achievements {
        padding: 15px; /* Adjust padding */
    }

    .achievement-items {
        flex-wrap: wrap; /* Allow wrapping for tablet view */
    }

    .achievement-item {
        flex: 1 1 45%; /* Adjust width for tablet view */
        max-width: 45%; /* Adjust width */
        margin: 10px; /* Adjust margin */
    }
}





/* Mobile Styles */

/* Contact Map container */
@media (max-width: 768px) {
    .map-container {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .contact-info {
        flex-direction: column;
        align-items: center;
    }

    .info-card {
        width: 100%;
        margin-bottom: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Maintain shadow effect on hover */
        transform: scale(1); /* Remove scale effect on hover for smaller screens */
    }

    .info-card .icon {
        width: 30px;
        height: 30px;
    }

    .info-card h3 {
        font-size: 16px;
    }

    .info-card p {
        font-size: 12px;
    }

    iframe {
        width: 100%;
        border: 3px solid;
    }
}

/* Testing Page */
@media (max-width: 768px) {
    .testing-page {
        padding: 15px;
    }

    .construction-image {
        width: 100%;
    }

    .testing-button {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Main Carousel */
@media (max-width: 768px) {
    .Main-carousel {
        flex-direction: column;
        margin-left: 0;
    }

    .Main-carousel-container {
        width: 100%;
        height: auto;
    }
}

/* Blog Page */
@media (max-width: 768px) {
    .hero {
        height: 200px; /* Adjust height for mobile */
        background-size: cover; /* Ensure background image covers the area */
    }

    .hero h2 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .blog-container {
        width: 95%;
    }

    .post {
        padding: 15px;
    }

    .post h3 {
        font-size: 1.5rem;
    }

    .post p {
        font-size: 0.9rem;
    }

    .read-more {
        font-size: 14px;
        padding: 8px 16px;
    }
}