@media (min-width: 992px) 
{
    .lg-vh-75 
    {
        height: 75vh;
    }
}
body, .static-footer
{
  background: linear-gradient(135deg, #FDFCFB 0%, #D4E4EF 100%);
  margin: 0;
  background-attachment: fixed;
}
footer p
{
  color: black;
}
nav
{
  background: linear-gradient(135deg, #FDFCFB 0%, #D4E4EF 100%);
}
a.nav-link
{
  color: #06131d !important;
}
.section
{
  background: linear-gradient(180deg,#ffffff 0%,#f1f0f0 80%, #e6e4e4 100%);
  border-radius: 15px; 
  box-shadow: 15px 15px 15px rgba(97, 100, 100, 0.1); 
  border: 1px solid rgba(212, 228, 239, 0.5); 
}
.section-head
{
  color: #212121;
}
.project-item, .contact-form, .resume-doc
{
  background: linear-gradient(90deg, #f4fafc 0%,#f2f9fc 70%, #e6f5ff 100%);
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.09);
}
.resume-doc div p
{
  color: black;
}
.resume-doc h4
{
  color: #1f718a;
}
.skills
{
  background: linear-gradient(90deg, #f4fafc 0%,#e6f9ff 70%, #ceecff 100%);
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.09);
}
.skill
{
  background-color: #F0F4F8;
  border-color: #D1D9E0;
  color: #455A64;
}
p
{
  color: #424242;
}
.project-btns 
{
  display: flex;
  position: relative;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 99px;
  width: 300px; /* Fixed width helps the math */
  overflow: hidden;
}
.project-btns label 
{
  flex: 1;
  margin-right: -1px;
  margin-left: -1px;
}

.project-btns label:last-child 
{
  margin-right: 0;
  margin-left: 0;
}

form label, .project-btns label
{
  flex: 1;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  z-index: 2; /* Keeps text above the glider */
  transition: color 0.3s ease;
}

/* Hide the actual radio buttons */
input[type="radio"] 
{
  display: none;
}

/* The Sliding Background */
.glider
{
  position: absolute;
  height: 100%;
  width: 33.33%; /* 1/3rd of the parent */
  background-color: #4db8ff;
  left: 0;
  top: 0;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 1;
}

/* Logic for sliding the glider */
#web:checked ~ .glider { transform: translateX(0); }
#mobile:checked ~ .glider { transform: translateX(100%); }
#desktop:checked ~ .glider { transform: translateX(200%); }

/* Optional: Change text color when active */
#web:checked ~ label[for="web"],
#mobile:checked ~ label[for="mobile"],
#desktop:checked ~ label[for="desktop"] 
{
  color: white;
  font-weight: bold;
  background-color: #4db8ff;
}

.project-btns label:hover
{
    background-color: #4db8ff;
    color: white;
    font-weight: bold;
}

.appImage
{
  width: 75px;
  height: 75px;
}

footer 
{
    position: fixed; 
    bottom: 0; 
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
::-webkit-scrollbar 
{
    display: none;
    -ms-overflow-style: none;  
    scrollbar-width: none; 
  }
  .section:hover
  {
    scrollbar-width: thin;
  }
  /* Position the image container (needed to position the left and right arrows) */
.gallery 
{
  position: relative;
}

/* Hide the images by default */
.mySlides 
{
  display: none;
  border: 1px solid black;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next 
{
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none !important;
}

/* Position the "next button" to the right */
.next 
{
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover 
{
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext 
{
  color: #000000;
  font-size: 12px;
  padding: 3px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container 
{
  text-align: center;
  background: linear-gradient(90deg, #f4fafc 0%,#f2f9fc 70%, #e6f5ff 100%);
  padding: 2px 16px;
  padding-top: 15px;
  border: 1px solid black;
  border-top: none;
}

.row:after 
{
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column 
{
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo 
{
  opacity: 0.3;
  border: 1px solid black;
  margin-top: 20px;
}

.active,
.demo:hover 
{
  opacity: 1;
  border-color: #187896;
  border-width: 3px;
}