body{
    font-family:"Ubuntu";
    font-weight:700;
}
.container-fluid{
    padding: 2.5% 10%;
    padding-top: 8%;
    padding-bottom: 8%;
}

h1{
    font-family:"Montserrat";
    font-size:3.5rem;
    font-weight:900;
    line-height:1.5;
}
h2{
    font-family:"Montserrat";
    font-size:2.8rem;
    font-weight:700;
    line-height:1.5;
}
h3{
    font-family:"Ubuntu";
    font-weight:bold;
    font-size:2.5rem;
}
h4{
    font-family:"Montserrat";
    font-weight:700;
    font-size:1.5rem;
}
h5{
    font-family:"Montserrat";
    font-weight:500;
    font-size:1.3rem;
    line-height:1.7;
}
p{
    color:#8f8f8f;
}

li{
    font-family:"Ubuntu";
    font-weight:300;
    font-size:1.2rem;
    line-height:1.7;
    
}
/* Title Section */
#about{
    background-color:#222831;
    color:#fff
}
/* Navigation Bar */
.navbar{
    padding:0 0 4.5rem
    
}

.navbar-brand{
    font-family:"Ubuntu";
    font-size:2.5rem;
    font-weight:bold;
}

.nav-item{
    padding: 0 18px;
}

.nav-link{
    font-family:"Montserrat";
    font-size:1.2rem;
    font-weight:300;
}

.title-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Title Image */
.title-image{
    width:33%;
    padding-bottom:5% ;
}
.title-desc{
    text-align: center;
}

/* Skills Section */
#services{
    padding:6% 10%;
    background-color: white;

}
.skill-box{
    text-align:center;
    padding:3%;
}

.skill-title{
    text-align:center;
    margin-bottom:2%;
}

.tech-box{
    text-align:left;
    padding:2%;
}

.icon{
    color: #00ADB5;
    margin-bottom:0.5rem;
}
.icon:hover{
    color:#222831;
}

/* Projects Section */
#projects{
    text-align:center;
    background-color:#393E46;
    color: #fff;
}
.projects-title{
    text-align:center;
    padding-top:6%;
}
.project-image{
    width:10%;
    border-radius:100%;
    margin:20px;
}

.carousel-item{
    /* padding:2% 10%; */
    padding-bottom:3%;
}

.lead{
    text-align: left;
}

.project-title{
    text-align: center;
}
/* Technical Skills Section */
#tech-skills{
    padding:100px;
    text-align:center;
}
.tech-rows{
    padding:5% 5%;
}
.tech-icon{
    color: #00ADB5;
}
.tech-padding{
    padding-bottom:2%;
}


/* Footer Section */
#footer{
    background-color:#393E46;
    padding:3% 15%;
    text-align:center;
    color: #fff;
}
.social-icon{
    margin:30px 10px;
}
.social-link{
    color:white;
}
.social-link:hover{
    color:#00ADB5;
}

/* Media Query to change css based on screen size */
@media (max-width:1028px){
    #title{
        text-align:center;
    }
    .title-image{
        transform: rotate(0deg);
        margin-left:0%
    }
}

/* Code snipped design */
pre code {
    font-family:"JetBrains Mono";
    font-size: 0.813;
    background-color: #1d1e22;
    border: 1px solid #999;
    display: block;
    padding: 20px;
    color:white;
  }


  .icon-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds spacing between the icon and the text */
}

.project-title {
    margin-bottom: 1rem;
}

img.rounded-lg-3 {
    max-width: 75%;
    height: auto;
    object-fit: cover;
}




.decoration-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensures it stays behind the content */
    background: repeating-linear-gradient(
        55deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.03) 10px,
        transparent 20px,
        transparent 200px
    );
}

.title-image-container,
.title-desc {
    position: relative;
    z-index: 1; /* Ensures content stays above the decoration lines */
}


.menu-toggle {
    position: fixed;
    top: 30px;
    left: 60px;
    background-color: rgba(255, 255, 255, 0.1); /* Light/transparent background */
    border: 1px solid #4fc6e0; /* Border matching the icon color */
    border-radius: 20%; /* Makes the button circular */
    color: #4fc6e0;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
    padding-left: 13px;
    padding-right: 13px; 
    padding-top: 10px; 
    padding-bottom: 10px;  
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Optional: adds a blur effect to the background */
}

.menu-toggle:hover {
    background-color: rgba(79, 198, 224, 0.1); /* Lighter background on hover */
    transform: scale(1.1); /* Slight scale effect on hover */
}

/* Side Panel */
.side-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: rgba(34, 40, 49, 0.95);
    z-index: 1000;
    transition: all 0.3s ease;
}

.side-panel.active {
    left: 0;
}

.side-panel-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.close-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.side-panel-nav {
    list-style: none;
    padding: 0;
    text-align: center;
}

.panel-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    margin: 1rem 0;
    display: block;
    transition: color 0.3s ease;
}

.panel-link:hover {
    color: #00ADB5;
}


.carousel-item {
    height: auto; /* Adjust this value to your desired fixed height */
    margin-bottom: 5%;
    padding: 20px 0;

}

.carousel-item .container {
    height: 100%;
}

.carousel-item .row {
    height: 100%;
}

.carousel-item img {
    height: 700px; /* Slightly smaller than the container to maintain padding */
    object-fit: contain ; /* This ensures images cover the area without distortion */
    width: 100%;
}

/* Ensure the content container maintains height */
.carousel-item .container .row {
    min-height: 450px; /* Slightly smaller than carousel-item height */
    background-color: #222831; /* Match your site's background color */
}

/* Media Query for mobile devices */
@media (max-width: 768px) {
    .carousel-item {
        height: auto;
        padding: 10px 0;
    }
    
    .carousel-item img {
        max-height: 250px;
        width: 100%;
    }
    
    .carousel-item .container .row {
        min-height: auto;
        padding: 15px;
    }

    .project-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .lead {
        font-size: 1rem;
    }
}
.expanded-image {
    width: 90% !important; /* Or your desired height */
    object-fit: contain;
}



#footer {
    padding: 40px 20px;
    text-align: center;
    background-color: #222831;
    color: #fff;
}

#footer h3 {
    margin-bottom: 1rem;
    color: #fff;
}

.footer-desc {
    color: #aaa;
    margin-bottom: 2rem;
}

.contact-info {
    margin: 2rem 0;
}

.contact-info p {
    color: #fff;
    margin: 0.5rem 0;
}

.contact-info i {
    margin-right: 10px;
    color: #4fc6e0;
}

.social-links {
    margin: 2rem 0;
}

.social-link {
    color: #fff;
    margin: 0 15px;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: #4fc6e0;
}

.copyright {
    margin-top: 2rem;
    color: #aaa;
    font-size: 0.9em;
}