/* Fade-in animation for sections (no movement, only opacity) */
.fade-section {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
}
.fade-section.visible {
  opacity: 1;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Poppins', sans-serif;
    background-color: #000;
    background-repeat: no-repeat;
      background-size: cover;
    background-position: center center;
    height: 100vh;
    width: 100%;
    position: relative; /* Ensures the content is placed on top of the background */
      margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.background {
  /* Desktop fullscreen spacing lock for Software cards (Chrome/Safari/Edge) */
  @media screen and (min-width: 1200px) {
    .tools-showcase .tools-grid {
      grid-template-columns: repeat(3, 240px) !important;
      column-gap: 64px !important;
      row-gap: 40px !important;
      justify-content: center !important;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
  }
  background-size: cover;
  background-position: center;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  
}
.index{
  margin: 0;
    background-color: #000;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100vh;
    width: 100%;
    position: relative; /* Ensures the content is placed on top of the background */
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  background-color: #000;
  background-repeat: no-repeat;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.background-image {
  width: 100%;
  height: 100vh; /* Adjust height as needed */
  background-image: url('icon-assets/shana-hero-page.png'); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 0; /* Ensure it starts right below the nav */
}

/* Adjust for tablets and smaller screens */
@media (max-width: 1024px) {
  .background-image {
    background-image: url('icon-assets/shana-hero-page.png'); /* Use hero image on tablet */
    background-size: cover;
    background-position: center;
  }
}

/* Adjust for mobile phones */
@media (max-width: 768px) {
  .background-image {
    background-image: url('icon-assets/shana-hero-page.png'); /* Use hero image on mobile */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media (max-width: 768px) {
  .accordian input[type="checkbox"]:checked + label + .content {
    max-height: none !important;
    height: auto;
    overflow: visible;
    padding-bottom: 24px;
  }
}

/* Adjust for very small phones */
@media (max-width: 480px) {
  .background-image {
    background-image: url('icon-assets/shana-hero-page.png'); /* Use hero image on small phones */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.hero-text img {
  width: 100%; /* Ensures the image scales with its container */
  height: auto; /* Maintains the aspect ratio */
  display: block; /* Removes any extra spacing below the image */
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  z-index: 2;
  text-align: left;
  width: calc(50% - 80px);
  max-width: 700px;
}

.hero-text h1 {
  font-size: 5rem;
  font-weight: 700;
  margin-bottom: 40px;
  color: #fff;
  text-align: left;
}

.hero-text h1 span {
  color: #FF3D1B;
}

.hero-subtitle {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 35px;
  text-align: left;
}

.hero-description {
  font-size: 1.2rem;
  color: #ccc;
  margin-bottom: 80px;
  text-align: left;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.btn-download,
.btn-portfolio {
  padding: 1rem 2.2rem;
  font-size: 1.05rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 61, 27, 0.6);
  box-shadow: 0 10px 28px rgba(255, 61, 27, 0.28);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  display: inline-block;
}

.btn-download {
  color: #ffffff;
  background: linear-gradient(90deg, #ff3d1b, #FF3D1B);
}

.btn-download:hover {
  transform: translateY(-4px);
  color: #ffffff;
  background: linear-gradient(90deg, #FF3D1B, #FF3D1B);
  border-color: rgba(255, 61, 27, 0.92);
  box-shadow: 0 14px 34px rgba(255, 61, 27, 0.36), 0 0 24px rgba(255, 61, 27, 0.2);
}

.btn-portfolio {
  color: #ffd7cc;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.22), rgba(255, 61, 27, 0.18));
  border-color: rgba(255, 61, 27, 0.85);
  box-shadow: 0 10px 24px rgba(255, 61, 27, 0.2);
}

.btn-portfolio:hover {
  transform: translateY(-4px);
  color: #ffffff;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.38), rgba(255, 122, 58, 0.34));
  border-color: rgba(255, 61, 27, 0.92);
  box-shadow: 0 14px 32px rgba(255, 61, 27, 0.3), 0 0 20px rgba(255, 61, 27, 0.16);
}

.btn-portfolio span {
  margin-left: 8px;
}

/* Layout wrapper for scroll animation, profile image, and accordion */
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100vh; /* starts after background image section */
}

/* Extend the height of the "Certifications and Softwares" tab dynamically */
.accordian input[type="checkbox"]:checked#fourth + label + .content {
  max-height: none; /* Allow the content to expand fully */
  padding: 20px; /* Keep consistent padding */
  transition: max-height 0.5s ease, padding 0.5s ease;
  overflow: visible; /* Ensure no content is hidden */
}

/* Responsive reordering on smaller screens */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .scroll-animation {
    order: 1;
  }

  .profile-img {
    order: 2;
  }

  .accordion-wrapper {
    order: 3;
  }
}

@media (max-width: 768px) {
  .portfolio {
    top: 0; /* Keep the portfolio content positioned on the background */
  }
}


/*#background{
    background-image:url(icon-assets/hero-background.png);
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    z-index: -1;

}*/

/* ----------------THIS IS THE MAIN PAGE TITLE-----------------  */
.portfolio {
  text-align: center;
    position: relative; /* Keeps portfolio on the same layer as the background */
    z-index: 1; /* Ensures it appears above the background, but still part of the same section */
    /*margin: 0px auto;*/
    /*width: 100%;*/
  }
  
  .portfolio-image {
    max-width: 100%;
    height: auto;
    /*height: auto;*/
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.80);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 24px rgba(255, 61, 27, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
    box-sizing: border-box;
    z-index: 1000;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    animation: fadeSlideIn 0.8s ease-out forwards;
    font-family:  'Poppins', sans-serif;
  }

  .logo-img {
    height: 60px; /* Set a fixed height for the logo */
    width: auto; /* Maintain aspect ratio */
    max-height: 60px; /* Prevent the logo from expanding too much */
}
@media (max-width: 768px) {
  .logo-img {
    height: 50px;
}
}
  .nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  
  .nav-links a {
    position: relative;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    margin-left: 30px;
    transition: color 0.3s ease;
  }
  
  .icon-img {
    height: 100%;
    transition: filter 0.3s ease;
  }

  .nav-links a:hover img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(1223%) hue-rotate(307deg) brightness(96%) contrast(89%);
  }
  .nav-links a:hover {
    color: #FF3D1B;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #FF3D1B;
    transform: translateX(-50%);
    transition: width 0.3s ease;
  }
  
  .nav-links a:hover::after {
    width: 100%;
  }

  @keyframes fadeSlideIn {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 600px) {
    .navbar {
      padding: 0 20px;
    }
    .nav-links {
      gap: 20px;
    }
  }
  @media (min-width: 1024px) {
  /*.box {
    bottom: 80px; 
    transform: translateX(-50%) scale(0.7); 
  }*/
  
    #profile {
    margin-top: 50px; /* Move the profile down slightly */
  }
    .accordion-wrapper {
    margin-top: 90px; /* Move the accordion wrapper down slightly */
  }
    .profile-accordion-container {
    padding-top: 90px; /* Add padding to move the entire container down */
  }
    .mouse {
    width: 80px; /* Adjust width for consistency */
    height: 140px; /* Adjust height for consistency */
    border-radius: 50px;
    position: relative;
  }
    .mouse::before {
    top: 25%; /* Adjust the position of the inner animation */
  }
}

/*.mouse {
  width: 100px; 
  height: 170px; 
  border: 2px solid #faacac;
  border-radius: 50px;
  position: relative;
  box-sizing: border-box; 
}*/

/* Adjust the inner animation */
/*.mouse::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid #faacac;
  border-radius: 50%;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%); 
  animation: anim1 2s linear infinite;
}*/

/*@keyframes anim1 {
  0%, 100% {
    top: 30%;
  }
  50% {
    top: 20%;
  }
}*/
@-webkit-keyframes anim1 {
  0%, 100% {
    top: 30%;
  }
  50% {
    top: 20%;
  }
}
@media (min-width: 1024px) {
  .box {
    bottom: px; /* Adjust this value to move the mouse element further down */
  }
}
/* Chrome-specific fix */
@supports (-webkit-appearance: none) and (not (-ms-ime-align: auto)) {
  .mouse-wrapper {
    transform: translateX(-50%) scale(0.7); /* Match Safari's scale */
    -webkit-transform: translateX(-50%) scale(0.7); /* Ensure consistency in Chrome */
  }

  .mouse {
    width: 100px; /* Explicit width */
    height: 170px; /* Explicit height */
  }
}

  .mouse {
    width: 100px !important; /* Ensure consistent width */
    height: 170px !important; /* Ensure consistent height */
  }

.box {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.parent-container {
  position: relative; /* Ensure the child element is positioned relative to this */
}

body.index .box {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  -webkit-transform: translateX(-50%) scale(0.7);
}

body.index .mouse {
  width: 100px;
  height: 170px;
  border-radius: 50px;
  position: relative;
}
  .box .mouse {
    width: 100px;
    height: 170px;
    border-radius: 50px;
    position: relative;
  }
  :root {
    --mouse-scale: 0.4;
  }
  :root {
    scroll-padding-top: 100px; /* Adjust this value to match the height of your navbar */
  }
  .box .mouse::before{
    content: '';
    position: absolute;
    width:0;
    height:0;
    border-radius:50%;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: anim1 2s linear infinite;
  }

/* Explicitly reset styles for .mouse-wrapper and .mouse */
/*.mouse-wrapper {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%) scale(1)!important; 
  -webkit-transform: translateX(-50%) scale(1)!important; 
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}*/

  h1{
    font-size:25px;
    color: #fff;
    margin-top: 15px;
  }
  .box .mouse span{
    position:absolute;
    width:40px;
    height:40px;
    transform: rotate(-45deg) scale(.7) translate(-50%, -50%);
    margin-top:50%;
    left:50%;
    top: calc(var(--i) * 15px);
    animation: anim2 2s linear infinite;
  }
  @keyframes anim1{
    0%, 100%{
        top:30%;
    }
    50%{
        top: 20%;
    }
  }
  @keyframes anim2{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.3;
    }
  }
/* Ensure scaling consistency across all screen sizes */
/*@media (min-width: 1024px) {
  .mouse-wrapper {
    transform: translateX(-50%) scale(0.6); 
        bottom: 1px; 
  }
}
@media (max-width: 768px) {
  .mouse-wrapper {
    transform: translateX(-50%) scale(0.5);
  }
}
@media (max-width: 480px) {
  .mouse-wrapper {
    transform: translateX(-50%) scale(0.4); 
  }
}*/
  .box .mouse span:nth-child(2){
    animation-delay: 0.2s;
  }
  .box .mouse span:nth-child(3){
    animation-delay: 0.4s;
  }
  .accordian li{
    list-style:none;
    width:100%;
    margin: 20px 0;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
  }
  .accordian li label{
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    cursor:pointer;
    transition: color 0.3s ease;
  }

  .accordian li label:hover{
    color: #FF3D1B;
  }
  @media (max-width: 768px) {
    .accordion-wrapper {
        transform: scale(0.9); /* Scale down to 90% */
        max-width: 100%; /* Allow full width */
        padding: 10px; /* Add padding around the accordion */
    }
}

@media (max-width: 480px) {
    .accordion-wrapper {
        transform: scale(0.8); /* Scale down to 80% */
        max-width: 100%; /* Allow full width */
        padding: 15px; /* Add more padding for very small screens */
    }
}
  label::before{
    content:'+';
    margin-right: 10px;
    font-size: 24px;
    font-weight: 600;
  }
  .accordian input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .accordian .content {
    color: #555;
    
    /*padding-top: 50px; /* Adjust this value as needed */
    /*padding-bottom: 20px; /* Keep consistent padding for bottom */
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Space between items */
    box-sizing: border-box; /* Ensure padding doesn't add extra width */
        background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded corners */
       padding: 0 20px; /* Add padding for spacing */
}
/* Default state for the "About Me" text (accordion closed) */
.accordian input[type="checkbox"]#first:not(:checked) + label + .content p {
    margin-top: 10px; /* Push the text down when closed */
    opacity: 0; /* Hide the text */
    transition: margin-top 0.5s ease, opacity 0.5s ease;
}
/* Open state for accordion content */
.accordian input[type="checkbox"]:checked + label + .content {
    max-height: 500px; /* Adjust based on your content height */
    padding: 20px; /* Add consistent padding when open */
}

.accordian input[type="checkbox"]:checked + label + .content{
    max-height: 500px;
    padding:20px;
}
.accordian input[type="checkbox"]:checked + label::before{
    content: "-";
}
/*.accordion-wrapper {
    position: absolute;
    top: 0px; 
    right: 30px;
    transform: scale(0.8);
    transform-origin: top left;
    z-index: 5; 
    transform: scale(1.0);
    max-width: 600px;
    margin: 0 auto;*/
/*.accordion-container {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    padding: 0 10px;
    box-sizing: border-box;
  }*/
  @media (max-width: 600px) {
  .accordian {
    margin: 40px auto;
    width: 100%;
  }
}
#background-color{
    background-color: #000;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    position: fixed; 
    top: 0;
    z-index: -2;

}

.software{
    position: absolute;
    transform: scale(0.5);


}
.gallery {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 0; /* Remove gap to avoid unnecessary spacing */
    padding: 0; /* Remove padding to ensure proper alignment */
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    flex-wrap: nowrap;
    max-width: 100%;
}
.gallery div{
    width:50%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap:20px;
    padding:10px;
    flex: none;
}
.gallery div img{
    width: 100%;
    filter: grayscale(100%);
    transition: transform 0.5s;
}
.gallery::-webkit-scrollbar{
    display: none;
}
.gallery-wrap {
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 20px; /* Add padding inside the box */
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 5;
    width: 90%;
    overflow: visible;
    margin-top: 40px; /* Add space above the gallery */

    background-color: #000; /* Black background for the box */
    border-radius: 15px; /* Rounded corners */
}
.gallery div img:hover{
    filter: grayscale(0);
    cursor: pointer;
    transform: scale(1.1);
}
.gallery img {
  max-width: 100%; /* Ensure images scale properly */
  height: auto; /* Maintain aspect ratio */
}
  .gallery img {
    transition: transform 0.3s, filter 0.3s;
  }
  .gallery-slide {
    display: flex;
    gap: 20px;
    align-items: center;
    flex: 0 0 auto;
    width: 50px;
    transition: transform 0.3s ease-in-out; /* Smooth transition for gallery images */
  }
  .gallery-link {
    position: relative;
    display: inline-block;
  }
  .gallery-link img {
    width: 250px;
    height: auto;
    border-radius: 10px;
  }
  .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .gallery-link:hover .hover-text {
    opacity: 1;
    background: rgba(234, 234, 234, 0.6);
    padding: 10px 20px;
    border-radius: 10px;
  }
  /*#back8tn, #next8tn {
    width: 40px;
    height: 40px;
    cursor: pointer;
  }*/
  .gallery-slide img {
    width: 250px;
    height: auto;
    border-radius: 10px;
    transition: filter 0.3s ease, transform 0.3s ease;
}
.gallery-slide img:hover {
  transform: scale(1.1) !important;
  filter: brightness(0) saturate(100%) invert(49%) sepia(83%) saturate(2968%) hue-rotate(348deg) brightness(103%) contrast(101%) !important;
  transition: transform 0.3s ease, filter 0.3s ease;
}
@media (min-width: 1024px) {
  .gallery-heading {
      margin-top: 90px; /* Move it further down for wide screens */
  }
}
@media (min-width: 1024px) {
  .gallery-wrap {
    margin-top: 90px; /* Equal margin at the top */
    margin-bottom: 90px; /* Equal margin at the bottom */
    transform: scale(0.9); /* Scale down slightly */
    width: 80%; /* Adjust width for a compact look */
    left: 0; /* Reset left alignment */
    transform: none; /* Remove translateX */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
  }
}
@media (max-width: 768px) {
  .gallery-wrap {
    padding: 0 5px; /* Add side padding to prevent the gallery from touching the edges */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
     margin-top: 120px; /* Increase the space above the gallery */
  }
}
  .gallery-heading {
    margin-top: 90px; /* Add space above the heading */
    margin-bottom: 20px; /* Add space below the heading */
  }
    .gallery-subheading {
    margin-bottom: 90px; /* Add space below the subheading */
  }
@media (max-width: 768px) {
  .gallery-subheading {
    margin: 0 auto; /* Center the text horizontally */
    padding: 0 20px; /* Add even left and right spacing */
    text-align: center; /* Ensure the text is centered */
    box-sizing: border-box; /* Include padding in the element's width */
  }
}
  .gallery div {
    grid-template-columns: 1fr; /* Display one column per row */
    gap: 10px; /* Reduce the gap between images */
  }

.gallery {
  padding: 0 20px; /* Add padding to the gallery to match the arrows */
}
.gallery-slide img {
    transition: filter 0.3s ease, transform 0.3s ease;
}
.gallery img:hover {
  transform: scale(1.1); /* Slight zoom effect */
  filter: brightness(0) saturate(100%) invert(49%) sepia(83%) saturate(2968%) hue-rotate(348deg) brightness(103%) contrast(101%); /* Orange filter */
  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for hover effect */
}

/*#back8tn, #next8tn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }*/
  #back8tn, #next8tn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px; /* Current size of arrows */
    height: auto; /* Maintain aspect ratio */
    padding: 10px; /* Space around the arrows */
    z-index: 10; /* Ensure arrows are above gallery content */
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
  }
@media (max-width: 768px) {
  #back8tn {
    left: 20px; /* Add margin from the left edge */
  }

  #next8tn {
    right: 20px; /* Add margin from the right edge */
  }

  #back8tn, #next8tn {
    width: 40px; /* Reduce the size of the arrows */
    height: auto; /* Maintain aspect ratio */
    padding: 5px; /* Add padding around the arrows */
  }
}
#back8tn:hover, #next8tn:hover {
  transform: translateY(-50%) scale(1.1); /* Scale up the arrow on hover */
  filter: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(1223%) hue-rotate(307deg) brightness(96%) contrast(89%); /* Apply pink filter */
}
#back8tn:hover::after, #next8tn:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #F4AAB9; /* Pink underline */
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.gallery-slide img:hover::after {
  content: none;
}

#back8tn {
  left: -40px; /* Moves the "Back" arrow to the left side */
}

#next8tn {
  right: -40px; /* Moves the "Next" arrow to the right side */
}

/* Ensure full image is displayed in accordion content */
.accordian .content img {
    max-width: 100%; /* Ensure the image scales properly */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra spacing below the image */
    margin: 0 auto; /* Center the image horizontally */
    padding-bottom: 10px; /* Add space below the image */
}
  /*#profile {
    width: 2200px;
    max-width: 90%;
    margin-right: 50px;
    padding: 0;
    position: relative;
    top: 750px;
  }/*
  
  /*#profile img {
    width: 300px;
    height: auto;
  }/*


  /*#profile {
    margin: 200px auto 50px ; 
  }

  .profile-accordion-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 100px 20px 50px;
  max-width: 1200px;
  margin: 0 auto;
}

#profile img {
  width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.accordion-wrapper {
  flex: 1 1 500px;
  max-width: 600px;
}

/* Accordion styles (reuse your existing ones, or paste the full accordion CSS here if needed) */

/* Mobile responsiveness */

  /*#profile img {
    width: 80%;
    max-width: 300px;
  }/*

  .accordion-wrapper {
    width: 100%;
  }
}
  .profile-accordion-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 100px 20px 50px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* PROFILE IMAGE */
#profile {
  flex: 1 1 300px; /* Allow the profile to resize */
  max-width: 350px; /* Limit the maximum width */
  text-align: center; /* Center the profile image */
}

#profile img {
  width: 100%; /* Make the image responsive */
  height: auto;
  border-radius: 20px;
}

/* ACCORDION */
.accordion-wrapper {
  flex: 1 1 100%; /* Allow it to take full width */
  max-width: 700px; /* Limit the maximum width */
  margin-top: 40px; /* Add space above the accordion */
  margin-bottom: 40px; /* Add space below the accordion */
  box-sizing: border-box; /* Ensure padding doesn't add extra width */
}

.accordian {
  width: 100%; /* Ensure it takes the full width of its container */
  max-width: 600px; /* Limit the maximum width */
  margin: 0 auto; /* Center the accordion */
  padding: 0; /* Remove any extra padding */
  box-sizing: border-box; /* Prevent overflow caused by padding */
}

/* MOBILE LAYOUT */
@media (max-width: 768px) {
  .profile-accordion-container {
    flex-direction: column;
    align-items: center;
  }

  #profile,
  .accordion-wrapper {
    max-width: 100%; /* Allow full width on smaller screens */
    text-align: center; /* Center the content */
  }

  #profile img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 300px;
  }
}
@media (max-width: 768px) {
  #back8tn, #next8tn {
    display: none; /* Hide the arrows */
  }
}
.profile-accordion-container {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping on larger screens */
  justify-content: center; /* Center content horizontally */
  align-items: flex-start; /* Align items from the top */
  gap: 20px; /* Space between the profile and accordion */
  padding: 80px 20px 50px;
  max-width: 1200px; /* Limit the container width */
  margin: 0 auto; /* Center the container horizontally */
  transform: none;
}
@media (max-width: 768px) {
  #profile img {
    position: relative;       /* Reset on small screens if needed */
    top: 0;
    left: 0;
    width: 100%;
    max-width: 300px;
  }
}
.contact {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 61, 27, 0.18), rgba(255, 61, 27, 0) 36%),
    radial-gradient(circle at 86% 82%, rgba(255, 61, 27, 0.12), rgba(255, 61, 27, 0) 40%),
    linear-gradient(180deg, rgba(18, 12, 12, 0.97), rgba(6, 6, 7, 0.99));
  text-align: center;
  display: flex; /* Use flexbox for centering */
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Center elements vertically */
  align-items: center; /* Center elements horizontally */
  gap: 2rem; /* Add spacing between elements */
  padding: 60px 80px; /* Add consistent padding */
  margin-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0), rgba(255, 61, 27, 0.85), rgba(255, 61, 27, 0));
  pointer-events: none;
}

/* About Section Styles */
.about-section {
  position: relative;
  background:
    radial-gradient(circle at 8% 20%, rgba(255, 61, 27, 0.16), rgba(255, 61, 27, 0) 38%),
    radial-gradient(circle at 92% 78%, rgba(255, 61, 27, 0.10), rgba(255, 61, 27, 0) 42%),
    linear-gradient(180deg, rgba(18, 12, 12, 0.98), rgba(6, 6, 7, 1));
  padding: 72px 80px 56px;
  margin: 160px 0;
  overflow: hidden;
}

.about-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0), rgba(255, 61, 27, 0.85), rgba(255, 61, 27, 0));
  pointer-events: none;
}

.about-container {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 2vw, 28px);
}

.about-text-wrap {
  max-width: none;
  margin: 0;
  text-align: left;
  justify-self: start;
}

.about-image {
  width: min(100%, 430px);
  max-width: 430px;
  justify-self: end;
  align-self: start;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.about-image::before {
  content: "";
  position: absolute;
  inset: 24px 18px 82px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255, 61, 27, 0.36) 0%, rgba(255, 61, 27, 0.26) 34%, rgba(255, 61, 27, 0) 72%);
  filter: blur(32px);
  opacity: 0.96;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.about-image-frame {
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-image img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  display: block;
  border-radius: 0;
  object-fit: contain;
  object-position: center top;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.about-image:hover,
.about-container:has(.about-button:hover) .about-image,
.about-container:has(.about-button:focus-visible) .about-image {
  transform: translateY(-8px) scale(1.04);
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.15), rgba(255, 61, 27, 0.15)), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border-color: rgba(255, 61, 27, 0.42);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38), 0 0 44px rgba(255, 61, 27, 0.32), 0 0 18px rgba(255, 61, 27, 0.26);
}

@keyframes aboutImageGlowPulse {
  0%,
  100% {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38), 0 0 40px rgba(255, 61, 27, 0.28), 0 0 14px rgba(255, 61, 27, 0.2);
  }
  50% {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38), 0 0 56px rgba(255, 61, 27, 0.42), 0 0 22px rgba(255, 61, 27, 0.32);
  }
}

@keyframes aboutImageHaloPulse {
  0%,
  100% {
    transform: scale(1.06);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.about-container:has(.about-button:hover) .about-image,
.about-container:has(.about-button:focus-visible) .about-image {
  animation: aboutImageGlowPulse 1.8s ease-in-out infinite;
}

.about-image:hover::before,
.about-container:has(.about-button:hover) .about-image::before,
.about-container:has(.about-button:focus-visible) .about-image::before {
  transform: scale(1.08);
  opacity: 1;
}

.about-container:has(.about-button:hover) .about-image::before,
.about-container:has(.about-button:focus-visible) .about-image::before {
  animation: aboutImageHaloPulse 1.8s ease-in-out infinite;
}

.about-image:hover img,
.about-container:has(.about-button:hover) .about-image img,
.about-container:has(.about-button:focus-visible) .about-image img {
  filter: saturate(1.04);
}

.about-image-caption {
  padding: 18px 6px 6px;
}

.about-caption-name {
  color: #FF3D1B;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}

.about-caption-title {
  color: #FF3D1B;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  opacity: 0.85;
}

.about-intro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FF3D1B;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.about-intro::before {
  content: "";
  width: 26px;
  height: 2px;
  background-color: #FF3D1B;
  display: inline-block;
}

.about-title {
  font-size: clamp(2.9rem, 4.9vw, 4.8rem);
  color: #fff;
  line-height: 1.02;
  margin-bottom: 22px;
  font-weight: 700;
  max-width: 12.5ch;
}

.about-copy {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 14px;
  line-height: 1.6;
  max-width: 56ch;
}

@media (max-width: 1200px) {
  .about-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
  }

  .about-image {
    width: min(100%, 390px);
    max-width: 390px;
  }
}

.about-button {
  display: inline-block;
  margin-top: 18px;
  padding: 1rem 2.2rem;
  font-size: 1.05rem;
  color: #ffd7cc;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.22), rgba(255, 61, 27, 0.18));
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 61, 27, 0.85);
  box-shadow: 0 10px 24px rgba(255, 61, 27, 0.2);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  font-family: 'Poppins', sans-serif;
}

.about-button:hover {
  transform: translateY(-4px);
  color: #ffffff;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.38), rgba(255, 122, 58, 0.34));
  border-color: rgba(255, 61, 27, 0.92);
  box-shadow: 0 14px 32px rgba(255, 61, 27, 0.3), 0 0 20px rgba(255, 61, 27, 0.16);
}

@media (max-width: 768px) {
  .about-section {
    padding: 48px 20px 40px;
    margin-bottom: 40px;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-image {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    order: -1;
    justify-self: center;
  }

  .profile-accordion-container {
    transform: none;
    padding: 56px 20px 40px;
  }

  .about-intro {
    margin-bottom: 16px;
  }

  .about-title {
    font-size: 2.95rem;
    max-width: 100%;
  }

  .about-copy {
    font-size: 1.08rem;
  }
}
.contact p.success {
  color: white;
  font-size: 2rem; /* Increase font size for the paragraph */
  margin-top: 1rem; /* Add spacing above the paragraph */
  line-height: 1.5; /* Improve readability */
}
.contact h2 {
  color: white;
  font-size: 4rem;
  margin-bottom: 3rem;
}
.contact form {
  width: min(900px, 100%);
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact .input-box {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.contact .input-box input,
.contact textarea {
  flex: 1 1 48%;
  padding: 1.5rem;
  font-size: 1.6rem;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 61, 27, 0.38);
  color: #000;
  background-color: white;
  width: 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 22px rgba(255, 61, 27, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.contact .input-box input:focus,
.contact textarea:focus {
  outline: none;
  border-color: rgba(255, 61, 27, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 61, 27, 0.4), 0 10px 26px rgba(255, 61, 27, 0.16);
}
.contact form .btn{
  margin-top: 2rem;
}


.footer {
  background-color: black;
  padding: 40px 80px; /* Add consistent padding */
  margin-top: 40px; /* Add space above the footer */
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.footer .socail{
  text-align: center;
  padding-bottom: 25px;
  color: gray;
}

.footer .socail a{
  font-size:25px;
  color: #F4AAB9;
  border: 2px soldid var(#F4AAB9);
  width:42px;
  height:42px;
  line-height: 42px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin: 0 10px;
  transition: 0.3s ease-in-out;
}

.contact textarea {
  resize: none;
  width: 100%;
  flex: 1 1 100%;
}


.footer .socail a:hover img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(1223%) hue-rotate(307deg) brightness(96%) contrast(89%);
  transform: scale(1.2)translateY(-10px);
}



.footer .socail a:hover {
  transform: translateY(-5px);
}




.footer .socail a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #F4AAB9;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.footer .socail a:hover::after {
  width: 100%;
}

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.copyright{
  color: #fff;
}
.contact .btn {
  display: inline-block;
  padding: 1rem 2.2rem;
  font-size: 1.05rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffd7cc;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.22), rgba(255, 61, 27, 0.18));
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 61, 27, 0.85);
  box-shadow: 0 10px 24px rgba(255, 61, 27, 0.2);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
}
.contact .btn::after {
  display: none;
}
.contact .btn:hover {
  transform: translateY(-4px);
  color: #ffffff;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.38), rgba(255, 122, 58, 0.34));
  border-color: rgba(255, 61, 27, 0.92);
  box-shadow: 0 14px 32px rgba(255, 61, 27, 0.3), 0 0 20px rgba(255, 61, 27, 0.16);
}
.contact .btn:hover::after {
  display: none;
}
.success{
  color:#fff;
}
.contact-heading  {
  font-family: 'Poppins', sans-serif;
  color: #FF3D1B !important;
  font-size: 4rem; /* Adjust size as needed */
  text-align: center;
  margin-bottom: 3rem;
}

.contact-heading span {
  color: #ffffff !important;
}

.heading,
.gallery-heading  {
  font-family: 'Poppins', sans-serif;
  color: white;
  font-size: 4rem; /* Adjust size as needed */
  text-align: center;
  margin-bottom: 3rem;
}


.gallery-heading span {
  color: #f4aab9;
}


.hover-effect {
  transition: transform 0.3s ease;
}
.hover-effect:hover {
  transform: scale(1.1);
}
.nav-menu {
  display: flex;
  gap: 20px;
  align-items: center;
}
.navbar a:hover img,
.logo a:hover img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(73%) saturate(1667%) hue-rotate(352deg) brightness(98%) contrast(88%);
}

/* Add underline animation to nav text links and logo */
.navbar .nav-menu a,
.logo a {
  position: relative;
  text-decoration: none;
}

.navbar .nav-menu a::after,
.logo a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #FF3D1B;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.navbar .nav-menu a:hover::after,
.logo a:hover::after {
  width: 100%;
}
html {
  scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* Prevent Safari from resizing text */
  -webkit-font-smoothing: antialiased; /* Improve font rendering in Safari */
}
.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: #fff;
}

/* Responsive nav menu */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    position: fixed;
    left: -100%;
    top: 72px;
    gap: 0;
    flex-direction: column;
    background-color: #000000;
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .nav-links.active {
    left: 0;
  }

  .nav-links a {
    margin: 16px 0;
  }

  .nav-links a:hover,
  .nav-links a:active,
  .nav-links a:focus-visible {
    color: #FF3D1B;
  }

  .nav-links a:hover::after,
  .nav-links a:active::after,
  .nav-links a:focus-visible::after {
    width: 100%;
    background-color: #FF3D1B;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    background-color: #FF3D1B;
    filter: none;
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    background-color: #FF3D1B;
    filter: none;
    transform: translateY(-8px) rotate(-45deg);
  }
}
.hamburger:hover .bar {
  filter: brightness(0) saturate(100%) invert(35%) sepia(73%) saturate(1667%) hue-rotate(352deg) brightness(98%) contrast(88%);
}

.hamburger {
  position: relative;
}

.hamburger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #FF3D1B;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.hamburger:hover::after {
  width: 100%;
}

.hamburger.active::after {
  width: 100%;
  background-color: #FF3D1B;
}
.accordion {
  margin: 40px auto;

  
  width: 90%;
  max-width: 1000px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

.accordion h2 {
  text-align: center;
  padding: 15px;
  font-size: 22px;
  color: #333;
}
@media (max-width: 768px) {
  .profile-img {
    width: 120px;  /* Adjust size for smaller screens */
    height: 120px;
  }
}
.back-home-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  background-color: #f4aab9;
  text-decoration: none;
  border-radius: 25px; /* Rounded corners */
  transition: all 0.3s ease;
  position: relative;
}
.back-home-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #ffffff; /* White underline */
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.back-home-btn:hover {
  background-color: #ffffff; /* Change background color on hover */
  color: #f4aab9; /* Change text color on hover */
}

.back-home-btn:hover::after {
  width: 100%; /* Expand underline on hover */
}
/* Adjust the "Softwares" section inside the accordion */
.software-skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns for wide screens */
  gap: 40px; /* Increase spacing between items */
  justify-content: center; /* Center the grid items */
  align-items: center; /* Align items vertically */
  width: 100%; /* Ensure it spans the container */
  max-width: 600px; /* Limit the width */
  margin: 0 auto; /* Center the entire section */
  padding: 20px; /* Add padding around the section */
}
.skill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.skill p {
  margin: 0 0 5px;
    padding: 0;
  color:#000;
  transition: color 0.3s ease, transform 0.3s ease;
}
.skill-bar {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.skill-fill {
  height: 100%;
  background-color: #000000;
  width: 0;
  border-radius: 5px;
  transition: width 2s ease; /* Smooth animation */
}


@keyframes fill-animation {
  to {
    width: var(--level);
  }
}
/* Padding for the certifications section */
.certifications {
  text-align: center;
  padding: 20px; /* Add consistent padding around the certifications section */
   margin-bottom: 20px; /* Add space below the certifications section */
}
/* Extend the height of the "Certifications and Softwares" tab */
#acordian input[type="checkbox"]:checked#fourth + label + .content {
    max-height: 1200px; /* Adjust this value to fit the content */
    padding: 20px; /* Keep consistent padding */
    transition: max-height 0.5s ease, padding 0.5s ease;
    overflow: visible; /* Ensure no content is hidden */
}

/* Hover effect for certification images */
.certifications img {
  max-width: 90%; /* Ensure the image scales properly within the margins */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra spacing below the image */
  margin: 0 auto; /* Center the image horizontally */
  transition: transform 0.3s ease; /* Smooth transition for hover effect */
}
.certifications img:hover {
  transform: scale(1.1); /* Slight zoom effect on hover */
}
/* Style for the "Softwares" heading */
.softwares-heading,
.certifications h3 {
  font-family: Arial, sans-serif; /* Replace with the actual font family */
  font-weight: bold; /* Thin font weight */
  color: #000; /* Black text color */
  transition: color 0.3s ease, transform 0.3s ease;
}
/* Style for the "Softwares" heading */
.softwares-heading {
  font-size: 24px; /* Keep the font size consistent */
  font-weight: bold;
  color: #000; /* Black text color */
  text-align: center;
  margin-bottom: 40px; /* Add spacing below the heading */
   margin-top: 40px; /* Adjust spacing above "Certifications" */
}
/* Style for the "Certifications" heading */
.certifications h3 {
  font-size: 24px; /* Match the font size of "Softwares" */
  font-weight: bold;
  color: #000; /* Black text color */
  text-align: center;
  margin-bottom: 40px; /* Add spacing below the heading */
  margin-top: 40px; /* Add spacing above the heading */
}

/* Style for the skills container without extra box shadow */
.skills-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background-color: #fff; /* White background */
    border-radius: 10px; /* Keep rounded corners */
}
/* Style for each column */
.skills-column {
    flex: 1;
    min-width: 150px;
    text-align: center;
}

/* Style for headings */
.skills-column h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #000;
  transition: color 0.3s ease, transform 0.3s ease;
}
/* Style for skill tags */
.skill-tag {
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 8px 12px;
    margin: 5px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
}
/* Hover effect for skill tags */
.skill-tag:hover {
  background-color: #fff;
  color: #FF3D1B;
  transform: scale(1.05);
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .skills-container {
        flex-direction: column;
        align-items: center;
    }

    .skills-column {
        width: 100%;
    }

    .skills-column h3 {
        font-size: 18px;
    }

    .skill-tag {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* General styles for the timeline container */
.timeline-container {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Add consistent space between columns */
    padding: 20px;
    background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Prevent content from overflowing */
}

/* Timeline column styles */
.timeline-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensure even spacing between items */
    gap: 30px; /* Consistent gap between timeline items */
    min-height: 100%; /* Ensure both columns stretch evenly */
}

/* Heading turns orange when hovering over items in the column */
.timeline-column:hover h3 {
    color: #FF3D1B;
}

/* Headings for each column */
.timeline-column h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #000; /* Default black color */
    text-align: center;
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for headings */
.timeline-column h3:hover {
    color: #FF3D1B; /* Turn orange on hover */
    transform: scale(1.05); /* Slightly enlarge the text */
}

/* Timeline item styles */
.timeline-item {
    display: flex;
    align-items: center; /* Align dots and content vertically */
    gap: 20px; /* Add space between the dot and content */
    position: relative;
}

/* Hover effect for timeline item */
.timeline-item:hover .timeline-dot {
    background-color: #FF3D1B; /* Turn orange on hover */
}

/* Hover effect for timeline dots */
.timeline-dot {
  width: 16px; /* Default size */
  height: 16px;
  background-color: #000; /* Default black color */
  border-radius: 50%; /* Make it a perfect circle */
  position: relative;
  z-index: 1; /* Ensure dots are above the background */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for timeline dots */
.timeline-dot:hover {
    background-color: #fff !important; /* Turn white on hover */
    transform: scale(1.2); /* Slightly enlarge the dot */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}
/* Remove bold styling for "Remote Work - Part Time" */
.normal-text {
    font-weight: normal; /* Set font weight to normal */
        color: #555; /* Match the light gray color of "Hybrid - Part Time" */
}
/* Remove the line for the last dot */
.timeline-item:last-child .timeline-dot::after {
    display: none;
}

/* Timeline content styles */
.timeline-content {
    background-color: #fff;
    padding: 15px; /* Adjust padding as needed */
    border-radius: 8px;
    border: 0.5px solid #FF3D1B; /* Thin orange stroke */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
    text-align: center; /* Center-align the text */
    flex: 1; /* Ensure content takes up remaining space */
}

/* Make specific text bold */
.timeline-content p:first-child,
.timeline-content p:nth-child(2) {
    font-weight:normal; /* Make the first and second lines (e.g., school names) bold */
        color: #555; /* Match the color of "Hybrid - Part Time" */
}

/* Make specific text bold */
.timeline-content p:first-child {
    font-weight: bold; /* Make the first line (e.g., school names) bold */
}

/* Hover effect for timeline content */
.timeline-content:hover {
    transform: scale(1.05);
    background-color: rgba(255, 61, 27, 0.1); /* Orange with 10% opacity */
}
/* Adjust spacing for timeline content */
.timeline-content p {
    margin: 5px 0;
    font-size: 14px;
    
}
/* Adjust the timeline boxes for smaller screens */
@media (max-width: 768px) {
    .timeline-container {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center-align the content */
        gap: 20px; /* Add spacing between items */
        padding: 20px; /* Add padding around the container */
    }

    .timeline-column {
        width: 100%; /* Allow columns to take full width */
        text-align: center; /* Center-align the text */
    }

    .timeline-item {
        flex-direction: column; /* Stack dot and content vertically */
        align-items: center;
         width: 100%; /* Ensure the item spans the full width */
    }

    .timeline-dot {
        margin: 0 auto 10px auto; /* Add spacing below the dot */
    }
     .timeline-dot::after {
        display: none; /* Remove connecting lines for smaller screens */
    }

        .timeline-dot {
        width: 12px; /* Slightly smaller for small screens */
        height: 12px;
    }

    .timeline-dot:hover {
        background-color: #fff; /* Same hover effect */
        transform: scale(1.1); /* Slightly smaller scale on hover */
    }
}
    .timeline-content {
        width: 95%; /* Make the content cover almost the full width */
        transform: scale(1.1); /* Scale up the boxes slightly */
        text-align: center; /* Center-align the text */
        padding: 15px; /* Add padding for better readability */
    }
/* Change the label icon when the accordion is open */
.accordian input[type="checkbox"]:checked + label::before {
    content: "-"; /* Change the "+" to "-" */
}
/* Default label icon */
.accordian label::before {
    content: "+";
    margin-right: 10px;
    font-size: 24px;
    font-weight: bold;
}
/* Ensure full image is displayed in the "Education and Work Experience" section */
#second:checked + label + .content img {
    max-width: 100%; /* Ensure the image scales properly */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra spacing below the image */
    margin: 0 auto; /* Center the image horizontally */
    padding-bottom: 10px; /* Add space below the image */
}

/* Extend the height of the "Education and Work Experience" tab dynamically */
#second:checked + label + .content {
    max-height: none; /* Allow the content to expand fully */
    padding: 20px; /* Keep consistent padding */
    transition: max-height 0.5s ease, padding 0.5s ease;
    overflow: visible; /* Ensure no content is hidden */
}
/* Timeline container styles for wide screens */
@media (min-width: 1024px) {
  #first:checked + label + .content,
  #fourth:checked + label + .content,
  #design-skills-tab:checked + label + .content {
    box-shadow: 0 0 30px rgba(255, 61, 27, 0.35); /* Orange outer glow */
  }

    .timeline-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Align both columns at the top */
        gap: 40px; /* Add consistent space between columns */
        padding: 20px;
        background-color: #fff; /* White background */
        border-radius: 10px; /* Rounded corners */
        overflow: hidden; /* Prevent content from overflowing */
        box-shadow: 0 0 30px rgba(255, 61, 27, 0.35); /* Orange outer glow */
    }


    .timeline-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 30px; /* Ensure consistent spacing between timeline items */
    }
}

/* Hover effect for "Softwares" and "Certifications" headings */
.softwares-heading:hover,
.certifications h3:hover {
  color: #FF3D1B; /* Turn orange on hover */
  transform: scale(1.05); /* Slightly enlarge the text */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}
/* Hover effect for software names */
.skill p:hover {
  color: #FF3D1B; /* Turn orange on hover */
  transform: scale(1.05); /* Slightly enlarge the text */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}
/* Style for certification items */
.certification-item {
  text-align: center;
  margin-bottom: 20px; /* Add spacing between items */
}
.certification-item img {
  max-width: 100px; /* Adjust size as needed */
  height: auto;
  display: block;
  margin: 0 auto; /* Center the image */
}

.certification-item p {
  font-family: 'Poppins', sans-serif; /* Same font as Adobe Illustrator */
  font-weight: bold;
  color: #000; /* Default black color */
  margin-top: 10px; /* Add spacing above the text */
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}
/* Hover effect for certification text */
.certification-item p:hover {
  color: #FF3D1B; /* Turn orange on hover */
  transform: scale(1.05); /* Slightly enlarge the text */
}

/* Center the certifications and software sections */
.certifications,
.software-skills {
    max-width: 800px; /* Set a fixed width for wide screens */
    margin: 0 auto; /* Center the content horizontally */
    text-align: center; /* Center-align the text */
}



/* Adjust for smaller screens */
@media (max-width: 768px) {
    .certifications,
    .software-skills {
        max-width: 95%; /* Allow full width for small screens */
    }
}
@media (max-width: 768px) {
  .software-skills {
    grid-template-columns: 1fr; /* Single column for small screens */
    gap: 20px; /* Reduce spacing between items */
    padding: 10px; /* Reduce padding for smaller screens */
  }
}
@media (min-width: 1024px) {
  .software-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 2 columns */
    grid-template-rows: repeat(3, auto); /* 3 rows */
    gap: 40px;
    justify-content: center;
    align-items: start;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
  }
  .skill {
    width: 100%;
  }
}

/* Center the "Certifications and Softwares" container in the accordion tab */
@media (min-width: 1024px) {
  #fourth:checked + label + .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto; /* Center horizontally */
    max-width: 800px; /* Adjust width as needed */
  }
}
/* Hover effect for "Design Skills and Soft Skills" heading */
.skills-column h3:hover {
  color: #FF3D1B; /* Turn orange on hover */
  transform: scale(1.05); /* Slightly enlarge the text */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}
/* Hover effect and font family for accordion list items */
.accordian li label {
    font-family: 'Poppins', sans-serif; /* Apply the same font family */
    font-size: 18px; /* Adjust font size as needed */
    font-weight: bold; /* Make the text bold */
    color: #000; /* Default black color */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
    cursor: pointer; /* Change cursor to pointer */
    transform-origin: center; /* Ensure scaling happens from the center */
}

.accordian li label:hover {
    color: #FF3D1B; /* Turn orange on hover */
    transform: scale(1.03); /* Slightly enlarge the text */
    transform-origin: center; /* Ensure scaling happens inward */
}

/* Make the text inside "About Me" black */
.accordian input[type="checkbox"]#first:checked + label + .content p {
    color: #000; /* Set text color to black */
}
.gallery-subheading {
    color: #f4aab9; /* Pink color */
    font-family: 'Poppins', sans-serif; /* Match the font */
    font-size: 1.6rem; /* Adjust font size */
    text-align: center; /* Center the text */
    margin-bottom: 2rem; /* Same margin spacing as the heading */
}
@media (max-width: 768px) {
  #profile {
    margin-top: 90px; /* Add space above the profile */

  }

  .box {
    margin-bottom: 20px; /* Ensure consistent spacing below the mouse animation */
  }

  .accordion-wrapper {
    margin-top: -80px; /* Reduce the gap above the accordion */
  }

  .profile-accordion-container {
    gap: 90px; /* Ensure even spacing between elements */
    padding: 10px; /* Adjust padding for smaller screens */
  }
}

@media (max-width: 768px) {
  .contact-heading {
    margin-top: 90px; /* Add space above the Contact Me heading */
        margin-bottom: 5px; /* Match spacing below the heading */
  }

 .contact-subheading {
    margin-top: 0; /* Keep no extra space above the subheading */
    margin-bottom: 60px; /* Reduce space below the subheading */
    color: #f4aab9; /* Pink color */
    font-family: 'Poppins', sans-serif; /* Match the font */
    font-size: 1.6rem; /* Adjust font size */
    text-align: center; /* Center the text */
  }
}


@media (max-width: 768px) {
  .contact {
    height: auto; /* Allow the section to adjust dynamically */
    padding: 40px 20px; /* Adjust padding for smaller screens */
    justify-content: space-between; /* Ensure even spacing between elements */
  }

  .contact-header-group {
    margin: 0 auto; /* Center the group */
    gap: 6px; /* Reduce the gap for smaller screens */
  }
}

@media (max-width: 768px) {
  #profile {
    margin-top: 120px; /* Increase the margin to move the profile lower */
  }
}



@media (min-width: 1024px) {
  .contact {
    height: auto; /* Allow the section to adjust dynamically */
    padding: 60px 40px; /* Adjust padding for wide screens */
    justify-content: space-between; /* Ensure even spacing between elements */
  }
  .contact-header-group {
    margin: 0 auto; /* Center the group */
    gap: 10px; /* Adjust the gap for wide screens */
  }

  #profile {
    margin-top: 150px; /* Adjust the margin to move the profile lower */
  }

  .profile-accordion-container {
    gap: 100px; /* Ensure even spacing between elements */
    padding: 20px; /* Adjust padding for wide screens */
  }

@media (min-width: 1024px) {
  .accordion-wrapper {
    margin-top: 150px; /* Add space above the accordion to bring it down */
  }
}


@media (max-width: 768px) {
  .contact,
  .gallery-wrap,
  .accordion-wrapper,
  .profile-accordion-container {
    padding: 0 20px; /* Add side paddings to prevent content from touching the edges */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
  }

  .contact .input-box input,
  .contact textarea,
  .contact.contact-revamp .input-box input,
  .contact.contact-revamp textarea {
    padding: 1rem; /* Adjust padding for better spacing */
    font-size: 0.75rem;
  }
}
}

@media (max-width: 600px) {
  .footer .socail {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .footer .socail a {
    flex: 1 1 0;
    min-width: 0;
    max-width: 40px;
    width: 8vw;
    height: 8vw;
    font-size: 6vw;
    padding: 0;
    margin: 0 2px;
  }
}

.experience-tools-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 160px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 61, 27, 0.08), rgba(255, 61, 27, 0) 45%),
    linear-gradient(180deg, #141111 0%, #0b0a0b 100%);
  overflow: hidden;
}

.expertise-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  width: 100%;
  max-width: 100%;
  margin: 0 0 160px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 18% 72%, rgba(255, 61, 27, 0.14), rgba(255, 61, 27, 0) 32%),
    linear-gradient(180deg, #131011 0%, #090809 100%);
  overflow: hidden;
}

.experience-tools-panel {
  min-width: 0;
  padding: 44px 48px 52px;
  position: relative;
}

.expertise-panel {
  min-width: 0;
  padding: 44px 48px 52px;
  position: relative;
}

.expertise-skills-panel {
  display: flex;
  flex-direction: column;
}

.expertise-panel + .expertise-panel {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.tools-showcase {
  display: flex;
  flex-direction: column;
}

.expertise-skills-panel::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 70%;
  height: 68%;
  background: radial-gradient(circle, rgba(255, 61, 27, 0.14) 0%, rgba(255, 61, 27, 0) 70%);
  pointer-events: none;
}

.experience-tools-panel + .experience-tools-panel {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.experience-showcase::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 72%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 61, 27, 0.18) 0%, rgba(255, 61, 27, 0) 68%);
  pointer-events: none;
}

.experience-tools-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #FF3D1B;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 26px;
}

.experience-tools-line {
  width: 22px;
  height: 2px;
  background-color: #FF3D1B;
  display: block;
}

.experience-tools-title {
  color: #fff;
  font-size: clamp(2.2rem, 2.9vw, 3.3rem);
  line-height: 1.06;
  margin-bottom: 18px;
  transition: transform 0.25s ease;
}

.experience-tools-title:hover {
  transform: scale(1.02);
}

.experience-showcase .experience-tools-title {
  max-width: 11ch;
}

.experience-tools-copy {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 34ch;
  margin-bottom: 34px;
}

.experience-rail {
  position: relative;
  display: grid;
  gap: 26px;
  padding-left: 22px;
}

.experience-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
}

.experience-rail-item {
  position: relative;
  padding-left: 18px;
  padding-bottom: 4px;
  transition: transform 0.25s ease;
  transform-origin: left center;
}

.experience-rail-item:hover {
  transform: scale(1.04);
}

.experience-rail-item[open] {
  transform: scale(1.02);
}

.experience-rail-summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}

.experience-rail-summary::-webkit-details-marker {
  display: none;
}

.experience-rail-heading {
  display: grid;
  gap: 4px;
}

.experience-rail-arrow {
  width: 13px;
  height: 13px;
  margin-top: 9px;
  flex: 0 0 auto;
  border-right: 2px solid #FF3D1B;
  border-bottom: 2px solid #FF3D1B;
  transform: rotate(-45deg);
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.9;
}

.experience-rail-item[open] .experience-rail-arrow {
  transform: rotate(45deg);
}

.experience-rail-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF3D1B;
  box-shadow: 0 0 0 6px rgba(255, 61, 27, 0.12);
}

.experience-rail-role {
  color: #FF3D1B;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 8px;
}

.experience-rail-company {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.06rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.experience-rail-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
  line-height: 1.5;
  display: block;
}

.experience-rail-details {
  margin-left: 27px;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.experience-rail-details ul {
  margin: 0;
  padding-left: 18px;
}

.experience-rail-details li {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.97rem;
  line-height: 1.6;
}

.experience-rail-details li + li {
  margin-top: 8px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  flex: 1;
  align-content: stretch;
  grid-auto-rows: 1fr;
}

@media (min-width: 1200px) {
  .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 250px));
    gap: 56px;
    justify-content: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

.tool-card {
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.2), rgba(24, 18, 22, 0.94));
  border: 1px solid rgba(255, 61, 27, 0.24);
  border-radius: 14px;
  padding: 10px 8px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.25s ease, background 0.25s ease;
}

.tool-card:hover {
  transform: translateY(-8px) scale(1.04);
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.15), rgba(255, 61, 27, 0.15)), linear-gradient(180deg, rgba(255, 61, 27, 0.2), rgba(24, 18, 22, 0.94));
}

.tool-icon-wrap {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  overflow: hidden;
}

.tool-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
  transform: scale(1.12);
  transform-origin: center;
}

.tool-card h3 {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.18;
  font-weight: 600;
}

.expertise-skill-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
  align-items: start;
}

.expertise-skill-card {
  border: 1px solid rgba(255, 61, 27, 0.18);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.12), rgba(17, 13, 15, 0.92));
  padding: 28px 28px 30px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, background 0.25s ease;
}

.expertise-skill-card:hover {
  transform: translateY(-8px) scale(1.04);
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.15), rgba(255, 61, 27, 0.15)), linear-gradient(180deg, rgba(255, 61, 27, 0.2), rgba(24, 18, 22, 0.94));
}

.expertise-skill-card h3 {
  color: #fff;
  font-size: 1.65rem;
  margin-bottom: 22px;
}

.expertise-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.expertise-tag {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.06rem;
  line-height: 1.25;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.expertise-tag:hover {
  transform: translateY(-8px) scale(1.04);
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.15), rgba(255, 61, 27, 0.15)), linear-gradient(180deg, rgba(255, 61, 27, 0.2), rgba(24, 18, 22, 0.94));
  border-color: rgba(255, 61, 27, 0.24);
}

.expertise-certifications {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.expertise-certification-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 24px 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.12), rgba(17, 13, 15, 0.92));
  border: 1px solid rgba(255, 61, 27, 0.18);
  transition: transform 0.25s ease, background 0.25s ease;
}

.expertise-certification-card:hover {
  transform: translateY(-8px) scale(1.04);
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.15), rgba(255, 61, 27, 0.15)), linear-gradient(180deg, rgba(255, 61, 27, 0.2), rgba(24, 18, 22, 0.94));
}

.expertise-certification-card img {
  width: 96px;
  height: auto;
  margin-bottom: 16px;
}

.expertise-certification-card p {
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: 8px;
}

.expertise-certification-card span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.94rem;
}

/* Safety: hide any old software-percent block if stale markup is still present */
.expertise-software-list,
.expertise-software-item,
.expertise-software-top,
.expertise-software-bar {
  display: none !important;
}

@media (max-width: 900px) {
  .experience-tools-section {
    grid-template-columns: 1fr;
    min-height: auto;
    width: 100%;
    margin: 110px 0;
  }

  .experience-tools-panel + .experience-tools-panel {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .expertise-section {
    grid-template-columns: 1fr;
    margin: -20px 0 110px;
  }

  .expertise-panel + .expertise-panel {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .expertise-skill-groups,
  .expertise-certifications {
    grid-template-columns: 1fr;
  }

  .expertise-skill-groups {
    grid-template-rows: none;
    flex: initial;
  }
}

@media (max-width: 640px) {
  .experience-tools-panel {
    padding: 32px 24px 36px;
  }

  .expertise-panel {
    padding: 32px 24px 36px;
  }

  .experience-tools-section {
    width: 100%;
    margin: 60px 0;
  }

  .expertise-section {
    width: 100%;
    margin: 0 0 60px;
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

  .tool-icon-wrap {
    width: 86px;
    height: 86px;
  }

  .tool-icon {
    width: 58px;
    height: 58px;
  }

  .experience-rail-role {
    font-size: 1.35rem;
  }

  .experience-rail-summary {
    gap: 12px;
  }

  .experience-rail-details {
    margin-left: 22px;
    padding: 14px 16px;
  }

  .expertise-skill-card {
    padding: 22px 20px 24px;
  }
}

/* ---------- Gallery Refresh ---------- */
.gallery-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 160px 0;
  padding: 54px 80px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 61, 27, 0.2), rgba(255, 61, 27, 0) 38%),
    radial-gradient(circle at 88% 74%, rgba(255, 61, 27, 0.14), rgba(255, 61, 27, 0) 42%),
    linear-gradient(180deg, rgba(24, 12, 12, 0.97), rgba(10, 8, 10, 0.98));
  overflow: hidden;
}

.gallery-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0), rgba(255, 61, 27, 0.82), rgba(255, 61, 27, 0));
  pointer-events: none;
}

.gallery-section::after {
  content: "";
  position: absolute;
  inset: auto -12% -34% auto;
  width: 56%;
  height: 56%;
  background: radial-gradient(circle, rgba(255, 61, 27, 0.16) 0%, rgba(255, 61, 27, 0) 72%);
  pointer-events: none;
}

.gallery-heading {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 12px 36px rgba(255, 61, 27, 0.2);
}

.gallery-heading span {
  color: #ffffff;
}

.gallery-subheading {
  margin-bottom: 34px;
  color: #ccc;
  font-size: clamp(1.08rem, 1.75vw, 1.52rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.gallery-wrap {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 0;
  padding: 32px 80px;
  border-radius: 30px;
  overflow: visible;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 61, 27, 0.24), rgba(255, 61, 27, 0) 38%),
    linear-gradient(180deg, rgba(28, 14, 12, 0.92), rgba(9, 8, 10, 0.86));
  border: 1.5px solid rgba(255, 61, 27, 0.18);
  box-shadow: none;
}

.gallery {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px 2px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
  user-select: none;
}

.gallery.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.gallery::-webkit-scrollbar {
  display: block;
  width: 0;
  height: 8px;
}

.gallery::-webkit-scrollbar:vertical {
  display: none;
}

.gallery::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}

.gallery::-webkit-scrollbar-thumb {
  background: #FF3D1B;
  border-radius: 99px;
}

.gallery-slide {
  width: auto;
  flex: 0 0 clamp(250px, 30vw, 360px);
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  scroll-snap-align: center;
}

.gallery-link {
  --logo-scale: 1;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.2), rgba(24, 18, 22, 0.94));
  border: 1px solid rgba(255, 61, 27, 0.24);
  transition: transform 0.25s ease, background 0.25s ease;
}

.gallery-link[href="clarista.html"] {
  --logo-scale: 0.78;
}

.gallery-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 61, 27, 0);
  transition: background 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.gallery-link:hover::after {
  background: rgba(255, 61, 27, 0);
}

.gallery-link img,
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--logo-scale));
  -webkit-user-drag: none;
  user-select: none;
  border-radius: 14px;
  border: 0;
  filter: none;
  box-shadow: none;
  transition: transform 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
}

.gallery-link:hover {
  transform: translateY(-8px) scale(1.04);
  background: linear-gradient(180deg, rgba(255, 61, 27, 0.15), rgba(255, 61, 27, 0.15)), linear-gradient(180deg, rgba(255, 61, 27, 0.2), rgba(24, 18, 22, 0.94));
}

.gallery-link:hover img,
.gallery-slide img:hover {
  transform: scale(var(--logo-scale));
  filter: none !important;
  box-shadow: none;
}

.gallery-link[href="clarista.html"]:hover img {
  transform: scale(0.9);
}

#back8tn,
#next8tn {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.23);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  z-index: 20;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#back8tn {
  left: 12px;
}

#next8tn {
  right: 12px;
}

#back8tn:hover,
#next8tn:hover {
  transform: translateY(-50%) scale(1.08);
  filter: none;
  border-color: rgba(255, 61, 27, 0.66);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 61, 27, 0.32);
}

@media (max-width: 768px) {
  .gallery-section {
    width: 100%;
    margin: 80px 0;
    padding: 40px 20px 8px;
  }

  .gallery-heading {
    margin-top: 0;
    margin-bottom: 12px;
  }

  .gallery-subheading {
    margin-bottom: 24px;
    font-size: 1.08rem;
  }

  .gallery-wrap {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    margin: 0;
  }

  .gallery {
    gap: 18px;
  }

  .gallery-slide {
    flex-basis: clamp(220px, 74vw, 320px);
  }

  #back8tn,
  #next8tn {
    width: 44px;
    height: 44px;
    padding: 8px;
  }

  #back8tn {
    left: 8px;
  }

  #next8tn {
    right: 8px;
  }
}

/* ---------- Contact Revamp ---------- */
.contact.contact-revamp {
  width: 100%;
  max-width: 100%;
  margin: 120px 0 0;
  padding: 84px 80px 74px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 61, 27, 0.2), rgba(255, 61, 27, 0) 36%),
    radial-gradient(circle at 86% 78%, rgba(255, 61, 27, 0.13), rgba(255, 61, 27, 0) 42%),
    linear-gradient(180deg, rgba(16, 12, 12, 0.98), rgba(6, 6, 7, 1));
}

.contact.contact-revamp .contact-layout {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}

.contact.contact-revamp .contact-form {
  order: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: 26px;
  border: 1px solid rgba(255, 61, 27, 0.22);
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 61, 27, 0.14), rgba(255, 61, 27, 0) 44%),
    linear-gradient(180deg, rgba(30, 14, 12, 0.9), rgba(11, 9, 10, 0.88));
}

.contact.contact-revamp .contact-header-group {
  order: 1;
  margin: 0;
  text-align: left;
  align-self: start;
  justify-self: start;
  display: grid;
  gap: 14px;
  max-width: 34ch;
  padding-top: clamp(22px, 2.8vw, 34px);
}

.contact.contact-revamp .contact-intro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FF3D1B;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
}

.contact.contact-revamp .contact-intro::before {
  content: "";
  width: 26px;
  height: 2px;
  background-color: #FF3D1B;
  display: inline-block;
}

.contact.contact-revamp .contact-heading {
  margin: 0 !important;
  padding: 0;
  color: #ffffff !important;
  text-align: left;
  margin-left: 0 !important;
  padding-left: 0;
  font-size: clamp(2.4rem, 3.5vw, 3.7rem);
  line-height: 1;
  white-space: nowrap;
}

.contact.contact-revamp .contact-subheading {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.05vw, 1.06rem);
  line-height: 1.55;
}

.contact.contact-revamp .contact-direct-links {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.contact.contact-revamp .contact-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
  line-height: 1.4;
  transition: color 0.2s ease, transform 0.2s ease;
}

.contact.contact-revamp .contact-direct-link:hover {
  color: #FF3D1B;
  transform: translateX(2px);
}

.contact.contact-revamp .contact-direct-link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  transition: filter 0.2s ease;
}

.contact.contact-revamp .contact-direct-link:hover img,
.contact.contact-revamp .contact-direct-link:focus-visible img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(73%) saturate(1667%) hue-rotate(352deg) brightness(98%) contrast(88%);
}

/* Prevent legacy global contact heading/subheading rules from reintroducing uneven spacing */
.contact.contact-revamp .contact-header-group {
  margin: 0 !important;
  gap: 14px !important;
}

.contact.contact-revamp .contact-heading,
.contact.contact-revamp .contact-subheading {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.contact.contact-revamp .contact-intro,
.contact.contact-revamp .contact-heading,
.contact.contact-revamp .contact-subheading {
  text-align: left;
}

@media (max-width: 768px) {
  .about-section {
    padding: 48px 20px 40px;
    margin: 60px 0;
  }

  .experience-tools-section {
    margin: 60px 0;
  }

  .experience-tools-panel {
    padding: 32px 20px 36px;
  }

  .expertise-section {
    margin: 0 0 60px;
  }

  .expertise-panel {
    padding: 32px 20px 36px;
  }

  .gallery-section {
    margin: 60px 0;
    padding: 40px 20px 8px;
  }

  .gallery-heading {
    margin-top: 0;
    margin-bottom: 12px;
  }

  .gallery-subheading {
    margin-bottom: 24px;
  }

  .gallery-wrap {
    padding: 20px;
    margin: 0 0 20px 0;
  }

  .contact.contact-revamp {
    margin: 40px 0 0;
    padding: 54px 20px 50px;
  }

  .site-footer {
    margin: 60px 0 0;
    padding: 40px 20px 30px;
  }

  .contact.contact-revamp .contact-header-group {
    margin: 0 !important;
    gap: 14px !important;
  }

  .contact.contact-revamp .contact-heading,
  .contact.contact-revamp .contact-subheading {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left;
  }

  .contact.contact-revamp .contact-direct-link {
    font-size: 0.95rem;
  }
}

.contact.contact-revamp .input-group,
.contact.contact-revamp .input-group-2 {
  width: 100%;
}

.contact.contact-revamp .contact .input-box,
.contact.contact-revamp .input-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact.contact-revamp .input-group-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.contact.contact-revamp .contact .input-box input,
.contact.contact-revamp .contact textarea,
.contact.contact-revamp .input-box input,
.contact.contact-revamp textarea {
  width: 100%;
  flex: initial;
  font-size: 1.08rem;
  border: 1.5px solid rgba(255, 61, 27, 0.42);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 22px rgba(255, 61, 27, 0.1);
}

.contact.contact-revamp .contact .input-box input::placeholder,
.contact.contact-revamp .contact textarea::placeholder,
.contact.contact-revamp .input-box input::placeholder,
.contact.contact-revamp textarea::placeholder {
  font-size: 1.08rem;
}

.contact.contact-revamp textarea {
  min-height: 240px;
}

@media (max-width: 900px) {
  .contact.contact-revamp {
    padding: 56px 20px 64px;
    margin: 80px 0 0;
  }

  .contact.contact-revamp .contact-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .contact.contact-revamp .contact-header-group {
    order: 1;
    text-align: left;
    max-width: none;
    padding-top: 0;
  }

  .contact.contact-revamp .contact-form {
    order: 2;
  }

  .contact.contact-revamp .contact .input-box,
  .contact.contact-revamp .input-box {
    grid-template-columns: 1fr;
  }

  .contact.contact-revamp .contact-form {
    padding: 20px;
    border-radius: 18px;
  }

  .contact.contact-revamp textarea {
    min-height: 210px;
  }

  .contact.contact-revamp .contact .input-box input,
  .contact.contact-revamp .contact textarea,
  .contact.contact-revamp .input-box input,
  .contact.contact-revamp textarea,
  .contact.contact-revamp .contact .input-box input::placeholder,
  .contact.contact-revamp .contact textarea::placeholder,
  .contact.contact-revamp .input-box input::placeholder,
  .contact.contact-revamp textarea::placeholder {
    font-size: 1rem;
  }
}

.site-footer {
  width: 100%;
  margin: 160px 0 0;
  padding: 54px 80px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  background:
    radial-gradient(circle at 20% -20%, rgba(255, 61, 27, 0.18), rgba(255, 61, 27, 0) 54%),
    linear-gradient(180deg, rgba(11, 9, 10, 0.98), rgba(6, 6, 7, 1));
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0), rgba(255, 61, 27, 0.78), rgba(255, 61, 27, 0));
  pointer-events: none;
}

.site-footer-inner {
  width: min(1220px, 100%);
  margin: 0 auto;
  padding: 24px 22px 18px;
  border: 1px solid rgba(255, 61, 27, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 61, 27, 0.1), rgba(255, 61, 27, 0) 48%),
    linear-gradient(180deg, rgba(18, 12, 12, 0.86), rgba(10, 9, 10, 0.82));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-align: center;
}

.site-footer-inner:hover {
  transform: translateY(-8px) scale(1.04);
  border-color: rgba(255, 61, 27, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 61, 27, 0.15), rgba(255, 61, 27, 0.15)),
    radial-gradient(circle at 10% 10%, rgba(255, 61, 27, 0.1), rgba(255, 61, 27, 0) 48%),
    linear-gradient(180deg, rgba(18, 12, 12, 0.86), rgba(10, 9, 10, 0.82));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42), 0 0 24px rgba(255, 61, 27, 0.18);
}

.site-footer-top {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(0, 1.85fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  text-align: left;
  padding-bottom: 16px;
}

.site-footer-brand {
  max-width: 34ch;
}

.site-footer-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.015em;
}

.site-footer-copy {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.98rem;
  line-height: 1.6;
}

.site-footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.site-footer-col {
  display: grid;
  align-content: start;
  gap: 10px;
}

.site-footer-col h4 {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.site-footer-col a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.96rem;
  line-height: 1.35;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.site-footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-footer-contact-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  transition: filter 0.2s ease;
}

.site-footer-contact-link:hover img,
.site-footer-contact-link:focus-visible img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(73%) saturate(1667%) hue-rotate(352deg) brightness(98%) contrast(88%);
}

.site-footer-col a:hover {
  color: #FF3D1B;
  border-color: rgba(255, 61, 27, 0.5);
  transform: translateX(2px);
}

.site-footer-copyright {
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.84rem;
  text-align: left;
}

@media (max-width: 900px) {
  .site-footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .site-footer-copyright {
    text-align: center;
  }
}

@media (max-width: 560px) {
  .site-footer-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- Professional Layout + Darker Orange Cleanup ---------- */
:root {
  --accent-orange-dark: #FF3D1B;
  --accent-orange-deep: #FF3D1B;
  --accent-orange-soft: rgba(255, 61, 27, 0.26);
  --accent-orange-glow: rgba(255, 61, 27, 0.16);
  --section-inline-padding: clamp(20px, 6vw, 86px);
}

.about-section,
.experience-tools-section,
.expertise-section,
.gallery-section,
.contact.contact-revamp,
.site-footer {
  margin: 0;
  position: relative;
  border-top: 0;
}

.about-section::before,
.experience-tools-section::before,
.expertise-section::before,
.gallery-section::before,
.contact.contact-revamp::before,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0), rgba(255, 61, 27, 0.92), rgba(255, 61, 27, 0));
  box-shadow: 0 0 14px rgba(255, 61, 27, 0.28);
  pointer-events: none;
}

.about-section {
  padding: 72px var(--section-inline-padding) 64px;
}

.about-container {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.experience-tools-panel,
.expertise-panel {
  padding: 52px var(--section-inline-padding) 56px;
}

.gallery-section {
  padding: 56px var(--section-inline-padding) 18px;
}

.gallery-wrap {
  width: min(1280px, 100%);
  margin: 0 auto 56px;
}

.site-footer {
  padding-left: var(--section-inline-padding);
  padding-right: var(--section-inline-padding);
}

.experience-tools-kicker,
.experience-rail-role,
.site-footer-col a:hover,
.about-intro {
  color: var(--accent-orange-dark);
}

.gallery-heading {
  color: #ffffff;
}

.experience-tools-line,
.about-intro::before,
.experience-rail-item::before {
  background-color: var(--accent-orange-dark);
}

.experience-rail-item::before {
  box-shadow: 0 0 0 6px var(--accent-orange-glow);
}

.btn-download {
  background: linear-gradient(90deg, var(--accent-orange-deep), var(--accent-orange-dark));
}

.btn-download:hover {
  background: linear-gradient(90deg, #FF3D1B, #FF3D1B);
  border-color: rgba(255, 61, 27, 0.9);
  box-shadow: 0 14px 34px rgba(255, 61, 27, 0.34), 0 0 24px rgba(255, 61, 27, 0.2);
}

.btn-portfolio,
.about-button,
.contact .btn {
  border-color: rgba(255, 61, 27, 0.85);
  box-shadow: 0 10px 24px rgba(255, 61, 27, 0.2);
}

.btn-portfolio,
.about-button {
  color: #f0b8a3;
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.25), rgba(255, 61, 27, 0.2));
}

.btn-portfolio:hover,
.about-button:hover,
.contact .btn:hover {
  background: linear-gradient(90deg, rgba(255, 61, 27, 0.42), rgba(255, 61, 27, 0.34));
  border-color: rgba(255, 61, 27, 0.92);
  box-shadow: 0 14px 32px rgba(255, 61, 27, 0.32), 0 0 20px rgba(255, 61, 27, 0.16);
}

.contact.contact-revamp .contact-form,
.gallery-link,
.tool-card,
.expertise-skill-card,
.expertise-certification-card,
.site-footer-inner {
  border-color: rgba(255, 61, 27, 0.24);
}

.site-footer-col a:hover {
  border-color: rgba(255, 61, 27, 0.52);
}

@media (max-width: 900px) {
  .about-section {
    padding: 56px 20px 48px;
  }

  .experience-tools-panel,
  .expertise-panel {
    padding: 38px 20px 42px;
  }

  .gallery-section {
    padding: 44px 20px 10px;
  }

  .gallery-wrap {
    margin-bottom: 40px;
  }

  .contact.contact-revamp {
    padding: 56px 20px 64px;
  }
}

@media (max-width: 768px) {
  .navbar {
    height: 72px;
    padding: 12px 20px;
  }

  .background-image {
    height: 88vh;
  }

  .hero-text {
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    top: 52%;
  }

  .hero-text h1 {
    font-size: clamp(2.4rem, 9vw, 3.2rem);
    margin-bottom: 18px;
    line-height: 1.02;
  }

  .hero-subtitle {
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    margin-bottom: 14px;
  }

  .hero-description {
    font-size: 0.98rem;
    line-height: 1.45;
    margin-bottom: 26px;
    max-width: 34ch;
  }

  .hero-buttons {
    gap: 12px;
  }

  .btn-download,
  .btn-portfolio,
  .about-button,
  .contact .btn {
    padding: 0.82rem 1.28rem;
    font-size: 0.9rem;
  }

  .about-section,
  .experience-tools-section,
  .expertise-section,
  .gallery-section,
  .contact.contact-revamp,
  .site-footer {
    margin: 0;
  }

  .about-section {
    padding: 48px 20px 42px;
  }

  .experience-tools-section,
  .expertise-section,
  .gallery-section,
  .contact.contact-revamp,
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .gallery-wrap {
    width: 100%;
    margin: 0 auto 32px;
  }

  .site-footer-inner {
    padding: 20px 16px 16px;
  }

  .site-footer-top,
  .site-footer-copyright,
  .site-footer-col {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .background-image {
    height: 84vh;
  }

  .hero-text {
    left: 16px;
    right: 16px;
  }

  .hero-text h1 {
    font-size: clamp(2rem, 10.5vw, 2.7rem);
  }

  .about-section,
  .experience-tools-section,
  .expertise-section,
  .gallery-section,
  .contact.contact-revamp,
  .site-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .experience-tools-panel,
  .expertise-panel {
    padding: 32px 16px 34px;
  }

  .gallery-wrap {
    padding: 16px 12px 18px;
  }

  .contact.contact-revamp {
    padding-top: 48px;
    padding-bottom: 52px;
  }
}

@media (max-width: 768px) {
  html,
  body {
    scroll-padding-top: 82px;
  }

  .navbar {
    background-color: rgba(0, 0, 0, 0.80);
    box-shadow: 0 14px 24px rgba(255, 61, 27, 0.5);
    z-index: 1200;
  }

  .logo-img {
    height: 50px;
  }

  .nav-links {
    top: 72px;
    padding: 10px 0 16px;
    background: rgba(7, 7, 8, 0.98);
    border-top: 1px solid rgba(255, 61, 27, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links a {
    font-size: 1.05rem;
    padding: 10px 0;
    margin: 0;
  }

  .hero-text {
    top: 54%;
  }

  .hero-buttons {
    width: 100%;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-text-wrap {
    order: 1;
  }

  .about-image {
    order: 2;
    max-width: 320px;
    margin: 0 auto;
  }

  .about-title,
  .experience-tools-title,
  .gallery-heading,
  .contact.contact-revamp .contact-heading {
    letter-spacing: -0.01em;
    line-height: 1.06;
  }

  .experience-tools-section,
  .expertise-section,
  .gallery-section,
  .contact.contact-revamp,
  .site-footer {
    overflow: clip;
  }

  .expertise-section {
    background: linear-gradient(180deg, #131011 0%, #090809 100%);
  }

  .expertise-skills-panel::after,
  .experience-showcase::after,
  .gallery-section::after {
    display: none;
  }

  .contact.contact-revamp .contact-header-group {
    gap: 10px;
  }

  .contact.contact-revamp .contact-subheading {
    font-size: 0.98rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .hero-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 260px;
  }

  .btn-download,
  .btn-portfolio {
    text-align: center;
  }

  .hero-description {
    max-width: 30ch;
  }

  .about-title {
    font-size: clamp(2.3rem, 12vw, 3rem);
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .tool-card h3 {
    font-size: 0.94rem;
  }

  .contact.contact-revamp .contact-form {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .hero-text {
    left: 40px;
    right: 40px;
    width: auto;
    max-width: 560px;
  }

  .hero-subtitle,
  .hero-description {
    max-width: 30ch;
  }

  .about-section,
  .gallery-section,
  .contact.contact-revamp,
  .site-footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 480px) {
  .hero-text {
    left: 16px;
    right: 16px;
  }

  .about-section,
  .gallery-section,
  .contact.contact-revamp,
  .site-footer {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 768px) {
  .hero,
  .background-image {
    height: 100dvh;
    min-height: 100dvh;
  }

  .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-image: url('icon-assets/shana-hero-page.png');
    background-size: cover;
    background-position: 68% center;
    background-repeat: no-repeat;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(4, 4, 5, 0.9) 0%, rgba(4, 4, 5, 0.72) 34%, rgba(4, 4, 5, 0.28) 58%, rgba(4, 4, 5, 0.05) 78%),
      linear-gradient(180deg, rgba(4, 4, 5, 0.2) 0%, rgba(4, 4, 5, 0.04) 44%, rgba(4, 4, 5, 0.32) 100%);
    z-index: 0;
  }

  .hero::after {
    content: "";
    position: absolute;
    left: -14%;
    bottom: 10%;
    width: 62%;
    height: 34%;
    background: radial-gradient(circle, rgba(255, 61, 27, 0.24) 0%, rgba(255, 61, 27, 0) 72%);
    pointer-events: none;
    z-index: 0;
  }

  .background-image {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-text {
    top: 56%;
    max-width: 320px;
    z-index: 2;
  }

  .hero-text h1 {
    font-size: clamp(2.15rem, 8vw, 3.05rem);
    line-height: 0.96;
    margin-bottom: 22px;
    max-width: 9ch;
    text-wrap: balance;
  }

  .hero-text h1 span {
    display: block;
    margin-top: 6px;
  }

  .hero-subtitle {
    font-size: 1.02rem;
    line-height: 1.2;
    margin-bottom: 18px;
    max-width: 18ch;
  }

  .hero-description {
    font-size: 0.98rem;
    line-height: 1.42;
    margin-bottom: 28px;
    max-width: 22ch;
    color: rgba(255, 255, 255, 0.82);
  }

  .hero-buttons {
    max-width: 370px;
  }
}

@media (max-width: 480px) {
  .hero {
    background-position: 72% center;
  }

  .hero-text {
    top: 58%;
    max-width: 288px;
  }

  .hero-text h1 {
    font-size: clamp(1.95rem, 9.8vw, 2.65rem);
    max-width: 8.5ch;
  }

  .hero-subtitle {
    max-width: 16ch;
  }

  .hero-description {
    max-width: 20ch;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding-top: 20px;
    padding-bottom: 24px;
  }

  .site-footer-inner {
    border-radius: 14px;
    padding: 18px 16px 14px;
  }

  .site-footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 12px;
  }

  .site-footer-brand {
    max-width: none;
  }

  .site-footer-title {
    font-size: 2rem;
    line-height: 1.05;
  }

  .site-footer-copy {
    font-size: 1rem;
    line-height: 1.55;
  }

  .site-footer-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .site-footer-col {
    gap: 6px;
  }

  .site-footer-col h4 {
    margin-top: 2px;
    font-size: 0.84rem;
    letter-spacing: 0.14em;
  }

  .site-footer-col a {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: 1.08rem;
    line-height: 1.3;
  }

  .site-footer-copyright {
    text-align: center;
    font-size: 0.95rem;
    padding-top: 14px;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .site-footer-inner {
    padding: 16px 14px 12px;
  }

  .site-footer-title {
    font-size: 1.95rem;
  }

  .site-footer-col a {
    font-size: 1.02rem;
    padding: 7px 0;
  }

  .site-footer-copyright {
    font-size: 0.88rem;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding-top: 40px;
    padding-bottom: 6px;
  }

  .gallery-heading {
    font-size: clamp(2rem, 9vw, 3rem);
    margin-bottom: 10px;
  }

  .gallery-subheading {
    font-size: 1.18rem;
    line-height: 1.42;
    margin-bottom: 20px;
    max-width: 24ch;
    margin-left: auto;
    margin-right: auto;
  }

  .gallery-wrap {
    padding: 16px 14px 18px;
    border-radius: 20px;
    margin-bottom: 16px;
  }

  .gallery {
    gap: 14px;
    padding: 8px 6px 14px;
    scroll-snap-type: x mandatory;
  }

  .gallery-slide {
    flex: 0 0 80%;
    max-width: 320px;
    min-width: 230px;
  }

  .gallery-link {
    border-radius: 12px;
  }

  .gallery-link img,
  .gallery-slide img {
    border-radius: 12px;
  }

  #back8tn,
  #next8tn {
    display: none;
  }

  .gallery::-webkit-scrollbar {
    height: 6px;
  }

  .gallery::-webkit-scrollbar-thumb {
    background: #FF3D1B;
  }
}

@media (max-width: 480px) {
  .gallery-subheading {
    font-size: 1.06rem;
    max-width: 22ch;
  }

  .gallery-wrap {
    padding: 14px 10px 16px;
  }

  .gallery {
    gap: 12px;
    padding: 8px 4px 12px;
  }

  .gallery-slide {
    flex-basis: 86%;
    min-width: 218px;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 768px) {
  body.index .hero {
    background-size: auto 100%;
    background-position: 64% center;
  }

  body.index .hero-text {
    top: 57%;
    left: 40px;
    right: 40px;
    max-width: 270px;
  }

  body.index .hero-text h1 {
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1;
    margin-bottom: 16px;
    max-width: 8.8ch;
  }

  body.index .hero-subtitle {
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 12px;
    max-width: 17ch;
  }

  body.index .hero-description {
    font-size: 0.98rem;
    line-height: 1.45;
    margin-bottom: 20px;
    max-width: 22ch;
  }

  body.index .hero-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: min(280px, 100%);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
  }

  body.index .btn-download,
  body.index .btn-portfolio {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
  }
}

/* ---------- Lumora Project Page ---------- */
body.lumora,
body.smileyfizz,
body.bergen {
  background-color: #000;
  --lumora-nav-height: 80px;
  --lumora-panel-height: calc(100vh - var(--lumora-nav-height));
  --lumora-panel-height-dynamic: calc(100dvh - var(--lumora-nav-height));
}

.portfolio-project {
  width: 100vw;
  max-width: 100vw;
  margin: 80px 0 0;
  display: grid;
  gap: 0;
}

.project-hero {
  position: relative;
  background: #000;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  width: 100vw;
  max-width: 100vw;
  height: var(--lumora-panel-height);
  height: var(--lumora-panel-height-dynamic);
  height: var(--lumora-panel-height-dynamic, 100svh);
  min-height: var(--lumora-panel-height);
}

.project-hero img {
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-hero-copy {
  position: absolute;
  left: clamp(16px, 3vw, 42px);
  right: clamp(16px, 3vw, 42px);
  top: clamp(16px, 3vw, 34px);
  z-index: 2;
  padding: 0;
  pointer-events: none;
}

.project-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 56%);
  pointer-events: none;
}

.project-title {
  font-size: clamp(2rem, 5vw, 3.3rem);
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.project-summary {
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.6;
  color: #f0f0f0;
  max-width: 56ch;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.project-gallery {
  display: grid;
  width: 100vw;
  max-width: 100vw;
  gap: 0;
}

.project-gallery-item {
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 100vw;
  max-width: 100vw;
  height: var(--lumora-panel-height);
  height: var(--lumora-panel-height-dynamic);
  height: var(--lumora-panel-height-dynamic, 100svh);
  min-height: var(--lumora-panel-height);
  margin: 0;
  padding: 0;
}

.project-gallery-item img {
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  transition: transform 0.35s ease;
}

.project-gallery-item:hover img {
  transform: none;
}

.project-gallery-banner {
  border-color: transparent;
}

@media (max-width: 900px) {
  .portfolio-project {
    width: 100%;
    margin-top: 80px;
    gap: 0;
  }

  .project-hero-copy {
    left: 16px;
    right: 16px;
    top: 16px;
  }

  .project-gallery {
    gap: 0;
  }

  .project-gallery-item {
    border-radius: 0;
  }
}

/* ---------- Project Zero-Gap Lock ---------- */
body.lumora,
body.smileyfizz,
body.bergen {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body.lumora .portfolio-project,
body.smileyfizz .portfolio-project,
body.bergen .portfolio-project,
body.lumora .project-hero,
body.smileyfizz .project-hero,
body.bergen .project-hero,
body.lumora .project-gallery,
body.smileyfizz .project-gallery,
body.bergen .project-gallery,
body.lumora .project-gallery-item,
body.smileyfizz .project-gallery-item,
body.bergen .project-gallery-item {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.lumora .project-gallery,
body.smileyfizz .project-gallery,
body.bergen .project-gallery {
  line-height: 0 !important;
  font-size: 0 !important;
}

body.lumora .project-hero,
body.smileyfizz .project-hero,
body.bergen .project-hero,
body.lumora .project-gallery-item,
body.smileyfizz .project-gallery-item,
body.bergen .project-gallery-item {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100dvh - 80px) !important;
  min-height: calc(100vh - 80px) !important;
  overflow: hidden !important;
}

body.lumora .project-hero img,
body.smileyfizz .project-hero img,
body.bergen .project-hero img,
body.lumora .project-gallery-item img,
body.smileyfizz .project-gallery-item img,
body.bergen .project-gallery-item img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ---------- Lumora Full-Width Image Layout ---------- */
body.lumora .portfolio-project,
body.lumora .project-hero,
body.lumora .project-gallery,
body.lumora .project-gallery-item {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

body.lumora .project-hero,
body.lumora .project-gallery-item {
  height: auto !important;
  min-height: 0 !important;
}

body.lumora .project-hero img,
body.lumora .project-gallery-item img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: cover !important;
}