html, body {
      scroll-behavior: smooth;
		    font-family: 'Inter', sans-serif;
    }
	  .text-big{font-size:3.5rem;}
	  h3{font-size: 1.5em; }
	  .navbar{background: #fff; border-bottom: 1px solid #ccc; }

a:link, a:visited, a:active, a:hover{border: none;}
   button{border: none;}
    section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
		
    }
    .navbar-toggler{
      border: none;
    }
    
	  .container{max-width: 72rem;}
	  .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.font-semibold {
    font-weight: 600;
}
.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
	  
    #home {
      background: linear-gradient(to right, #667eea, #764ba2);
      color: white;
    }
    nav a.nav-link {
      cursor: pointer;
    }
	 .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .nav-link:active {
    color:#764ba2; 
}
.flex{display: flex;}
.w-12 {
    width: 3rem;
}
.h-12 {
    height: 3rem;
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
 .nav-item a.active {
  
  color: #764ba2 !important;
    border-bottom: 2px solid #b063ff;
 transition: border-bottom 0.3s ease, color 0.3s ease;
  /* For Safari and older browsers */
  -webkit-transition: border-bottom 0.3s ease, color 0.3s ease;
  -moz-transition: border-bottom 0.3s ease, color 0.3s ease;
  -o-transition: border-bottom 0.3s ease, color 0.3s ease;
}
gap-12 {
    gap: 3rem;
}
/*
	  .featured-projects {
      padding: 60px 0;
      background-color: #F4E0FF;
      text-align: center;
    }
    .featured-projects h2 {
      font-size: 2rem;
      padding-top: 60px;
    }
    .featured-projects p {
      font-size: 1.1rem;
      color: #666;
      margin-bottom: 10px !important;
    }
*/
    .filter-buttons .btn {
      margin: 0 5px 15px;
    }
.filter-buttons .btn :hover{
     background: none;
	border:none;
    }
	  .project-image{width:100%; height: 12rem; object-fit: cover; vertical-align: top;}
    .project-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      margin-bottom: 30px;
      transition: box-shadow 0.3s ease;
      height: 100%;
		overflow: hidden;
		text-align: left;
    }
    .project-card:hover {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }
    .project-title {
      font-size: 1rem;
      font-weight: 600;
      margin: 10px 0;
		padding: 0 20px;
    }
    .project-description {
      font-size: 0.95rem;
      color: #444;
      margin-bottom: 15px;
	  padding: 0 20px;
    }
	  .project-tags{padding: 0 20px;}
    .project-tags span {
      display: inline-block;
      padding: 4px 10px;
      font-size: 0.8rem;
		border-radius: 999px;
      margin: 2px;
    }
.purple-bg{ color: rgb(147 51 234 / var(--tw-text-opacity, 1));
		  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.blue-bg{
	background-color: #dbeafe;
color: #2563eb;
}
.red-bg{    color: #b42121;
    background-color: #ffcfd3;}
 .green-bg{color:#16a34a; background:#dcfce7;}
.orange-bg{    color: #7b5d02;
    background: #ffd9a2;}
    .view-project {
      display: inline-block;
      margin-top: 10px;
		
      color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
      font-weight: 500;
      text-decoration: none;
		padding:0 20px;
    }
    .view-project:hover {
      text-decoration: underline;
    }
	   .featured-projects {
      padding: 60px 0;
      background-color: #f9f9f9;
      text-align: center;
    }
    .featured-projects h2 {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }
    .featured-projects p {
      font-size: 1.1rem;
      color: #666;
      margin-bottom: 40px;
    }
    .filter-buttons .btn {
      margin: 0 5px 15px;
    }
   
	  
	  .skill-category {
      text-align: center;
      margin-bottom: 30px;
    }
    .skill-category h3 {
      margin-bottom: 20px;
    }
    .skill-bar {
      margin-bottom: 15px;
      text-align: left;
    }
    .skill-bar .progress {
      height: 10px;
      background-color: #e9ecef;
		border-radius: 999rem;
    }
    .skill-bar .progress-bar {
      line-height: 10px;
      font-size: 0.6rem;
    }
	  .experience-section {
      background-color: #F4F4F4;
      padding: 60px 20px;
		  height: auto;
    }
    .experience-card {
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 15px;
      margin-bottom: 30px;
		text-align: left;
		line-height: 0.8rem;
    }
    .experience-title {
      font-size: 1rem;
      font-weight: 600;
    }
    .experience-company {
      font-size: 0.9rem;
     color: #9333ea;
      padding-bottom: 12px;
    }
    .experience-duration {
      font-size: 0.95rem;
      color: rgb(75 85 99 / var(--tw-text-opacity, 1))
    }
    .experience-description {
      margin-top: 10px;
      font-size: 1rem;
      color: #333;
      line-height: 1.5;
    }
    .experience-skills span {
      display: inline-block;
      padding: 5px 12px;
      margin: 5px 5px 0 0;
      font-size: 0.85rem;
    }
	  .contact-section {
      background-color: #f8f9fa;
      text-align: center;
      padding: 60px 20px;
    }
    .contact-section h2 {
      font-size: 2.5rem;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .contact-section p {
      font-size: 1.2rem;
      color: #555;
      margin-bottom: 40px;
    }
/*
    .contact-info {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 15px 25px;
      border-radius: 8px;
    }
    .contact-info img {
      width: 28px;
      height: 28px;
      margin-right: 12px;
    }
    .contact-info .email {
      font-size: 1.1rem;
      color: #333;
    }
*/
	  .shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
	  .btn{padding-top:0; padding-bottom: 0;}
	  .btn-white{background: #fff; border-radius: 24px;padding: 0.7rem 2rem;color: rgb(147 51 234 / var(--tw-text-opacity, 1)); font-weight: 600; font-size:0.9rem;}
	  .btn-outline-light{padding: 0.7rem 2rem; font-weight: 600; font-size:0.9rem;border-radius: 24px;}
a.white-border{border: 1px solid #fff;}
	  .max-w-2xl {
    max-width: 42rem;
}
	  
	  .lead{font-size: 1rem; margin: auto;}
	  .count{background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));border-radius:24px; width:20%; font-size: 0.8rem; color:rgb(75 85 99 / var(--tw-text-opacity, 1));line-height: .5rem; padding: 20px;margin-right: 10px;}
	  .purple{color:rgb(147 51 234 / var(--tw-text-opacity, 1));}
	  .font8{font-size: .8rem;}
	  .btn-primary, .btn-active{ color: #fff; border:none;background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));border-radius: 999px;}
	  .btn-outline-secondary{background: none; border:none;}
	  .btn-active:hover, .btn-primary:hover, .btn-outline-secondary:hover{background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));border-radius: 999px; border:none;}
.btn-outline-secondary:active, .btn-outline-secondary:link, .btn-outline-secondary:visited, .btn-outline-secondary:focus, .btn-primary:active, .btn-primary:link, .btn-primary:visited, .btn-primary:focus, .btn-active:active, .btn-active:link, .btn-active:visited, .btn-active:focus{background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));border-radius: 999px;border:none; }
	  .bg-primary{background-color: #9333ea !important;}
	  .bg-info{background-color: #2563eb !important;}
	  .text-white{color: #fff;}
    .bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
	  .bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
	
	  .bg-blue-100 {
    --tw-bg-opacity: 1;
       background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
	  .text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
}

.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1.0em;
    overflow: visible;
    vertical-align: -.125em;
}
    .text-purple-600{
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));}
    .rounded-full {
    border-radius: 9999px;
}

.items-center {
    align-items: center;
}
.w-16 {
    width: 4rem;
	height: 4rem
}
	  .justify-center {
		  display: flex;
    justify-content: center;
}
	  
	@media (max-width: 991.98px) {
  section {
    height: auto;
    padding: 3rem 1rem;
    min-height: 120vh;
  }
  .text-big {
    font-size: 2.2rem;
  }
  .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .filter-links{
    border-radius: none;
  }
  .project-image {
    height: 30rem;
    padding-bottom:20px;
  }
  .count {
    width: 45%;
    margin-bottom: 15px;
  }

}

button:active, button:link, button:hover,  button:focus{border:none; color: #fff;}

/* Stack columns vertically on mobile */
@media (max-width: 767.98px) {
  .navbar-brand {
    font-size: 1.1rem;
  }
    .filter-links{
    border-radius: none;
  }
  .navbar-nav {
    text-align: left;
    background: #fff;
    padding: 1rem 0;
    z-index: 1000;
  }
  .row {
    flex-direction: column;
  }
  .col-md-4, .col-md-7, .col-md-3, .col-3, .col-4 {
    max-width: 100%;
    flex: 0 0 100%;
  }
  .project-card {
    margin-bottom: 20px;
    padding-bottom:20px;
  }
  .project-image {
    height: 15rem;
  }
  .skill-category {
    margin-bottom: 40px;
  }
  .experience-card {
    padding: 10px;
  }
  .contact-info {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
  }
  .w-16 {
    width: 3rem;
    height: 3rem;
  }
}

/* Adjust font sizes and paddings for extra small devices */
@media (max-width: 575.98px) {
  h1, .text-big {
    font-size: 1.5rem;
  }
    .filter-links{
     border-radius: none;
  }
  h2, .display-5 {
    font-size: 1.2rem;
  }
  .lead, .project-description, .experience-description, .contact-section p {
    font-size: 0.95rem;
  }
  .btn, .btn-white, .btn-outline-light {
    font-size: 0.85rem;
    padding: 0.5rem 1.2rem;
  }
  .project-title {
    font-size: 1rem;
    padding: 0 10px;
  }
  .project-tags, .project-description {
    padding: 0 10px;
  }
  .contact-info img {
    width: 22px;
    height: 22px;
    margin-right: 8px;
  }
}