/* General Styles */
@font-face {
    font-family: 'Montserrat';
    src: url('../Fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-display: swap;

}
body {
    font-family: 'Montserrat';
    margin: 0;
    padding: 0;
  }
  .services-mobile {
    display: none;
  }
  .header {
    display: block;
  }
  /* Header Styles */
  .header {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    background-color: #000000e6;
    color: #fff;
  }
  
  .logo {
    font-size: 1.5em;
    font-weight: bold;
  }
  
  .nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin-left:3.7vw ;
    
  }
  
  .nav li {
    margin-left: 2vw;
    position: relative;
  }
  
  .nav a {
    text-decoration: none;
    color: #fff;
    font-size: clamp(14px, 1.6vw, 18px);
    padding: 1vh;
    cursor: pointer;
  }
  .hamburger {
    display: none;
   }
  
  .nav a:hover {
      background-image: linear-gradient(90deg,  black 25%, #663cbd 50%, #936bcc 75%, #ffdee3 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      animation: textColorTransition 2s ease forwards; /* Apply animation */
    }
  
  /* Hover effect to display dropdown for "Services" */
  .services:hover .dropdown, .dropdown:hover {
    display: grid; /* Display dropdown as a grid */
  }
  
  
  .services .dropdown {
    position: absolute;
    top: 10vh; /* Adjust according to header height */
    left: 10%;
    transform: translateX(-19%); /* Center the dropdown */
    background-color: #111;
    padding: 4vh;
    border-radius: 1vw;
    box-shadow: 0px 0.6vw 0.8vh rgba(0, 0, 0, 0.1);
    max-height: 76vh;
    overflow-y: auto;
    display: none; /* Initially hidden */
    width: 82vw; 
    height: auto;
    grid-template-columns: repeat(3, 1fr); /* 3 columns layout */
    grid-gap: 3vw; /* Space between columns */
    padding-top: 6vh;
    z-index: 99;
  }
  
  #a-service {
    display: flex;
    margin-top: -1vh;
  }
  #a-service svg {
    width: 2vw;
    margin-left: 1vw;
    margin-top: 1vh;
  }
  #a-service svg:hover {
    fill: transparent;
    mask-image: linear-gradient(90deg,  black 25%, #663cbd 50%, #936bcc 75%, #ffdee3 100%);;

  }
    /* Add the downward arrow using the ::before pseudo-element */
    .services:hover::before {
      content: '';
      position: absolute;
      top: 1.6em;  /* Position it just above the dropdown */
      left: 2em;  /* Center it relative to the button */
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 40px solid #111;  /* Same color as dropdown background */

    }
    .dropdown h3 {
      margin-top: 0;
      color: #fff;
      font-size: clamp(15px, 1.8vw, 20px);
      font-weight: 600;
      text-align: left;
      margin-left: 1em;
    }
    
  
  .dropdown ul{
    list-style-type: none;
    display: list-item;
    margin-left: 2em;
  }
  #contact {
    border-radius: 1.8vw;
    border: solid 3px;
    border-color: #fff;
  }
  #contact a{
   padding: 3vw 1.3vw;
  }
  #contact:hover {
    background: #fff;
    background-size: 100% 100%;
    animation: textColorTransition 0.8s ease forwards; /* Apply animation */
  }
  /* Keyframes for text color transition */
@keyframes textColorTransition {
  0% {
    background-position: left; /* Start from black */
  }
  50% {
    background-position: center;
  }
  100% {
    background-position: right; /* End with gradient */
  }
}

.dropdown li {
  margin: 1vh 0;
  color: inherit; /* Allow the color to inherit for text */
  text-align: left;
  font-size: clamp(13px, 1.2vw, 16px);
}

.dropdown li a {
  display: inline-block;
  text-decoration: none; /* Ensure no underline */
  font-size: inherit; /* Inherit the font size from li */
  color: inherit; /* Inherit the color */
  padding: 0; /* Reset padding */
  cursor: pointer;
}

.dropdown h3 a {
  font-size: inherit; /* Inherit the font size from h3 */
  color: inherit; /* Inherit the color */
  margin-top: 0;
    color: #fff;
    font-size: 1.05em;
    font-weight: 500;
    text-align: left;
    margin-left: -5px;
    cursor: pointer;
}


.dropdown li a {
  display: inline-block;
}
.dropdown li {
  display: flex;
}
.dropdown li img {
  width: 1.4vw;
  margin-right: 0.2vw;
}
.dropdown li:hover a {
  background-image: linear-gradient(90deg,  black 25%, #663cbd 50%, #936bcc 75%, #ffdee3 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: textColorTransition 0.8s ease forwards; /* Apply animation */
}
#contact {
  border-radius: 1.8vw;
  border: solid 3px;
  border-color: #fff;
}
#contact a{
 padding: 3vw 1.3vw;
}
#contact:hover {
  background: #fff;
  background-size: 100% 100%;
  animation: textColorTransition 0.8s ease forwards; /* Apply animation */
}
.dropdown h3:hover a {
  background-image: linear-gradient(90deg,  black 25%, #663cbd 50%, #936bcc 75%, #ffdee3 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: textColorTransition 0.8s ease forwards; /* Apply animation */
}  
  /* Make the dropdown sections responsive */
  @media (max-width: 768px) {
    .dropdown {
      width: 90vw; /* Make the dropdown slightly larger on mobile */
      grid-template-columns: 1fr; /* Stack everything in one column on smaller screens */
    }
  }
/* Medium to Large Screens */
@media (max-width: 1024px) {
  .header {
      flex-direction: column; /* Stack logo and nav vertically */
      align-items: flex-start; /* Align elements to start */
  }
  .nav ul {
      flex-direction: column; /* Stack nav items vertically */
      margin-left: 0; /* Remove left margin */
      margin-top: 20px;
  }
  .nav li {
      margin: 10px 0; /* Increase vertical spacing */
  }
}

/* Mobile Screens */
@media (max-width: 768px) {
  .header {
      padding: 10px 20px;
  }

  .logo {
      font-size: 1.2em;
  }

  .nav ul {
      flex-direction: column;
      align-items: flex-start;
      padding: 0;
      margin-top: 20px;
  }

  .nav li {
      margin-left: 0;
      margin-top: 10px;
  }

  .nav a {
      font-size: 1.2em;
  }

  .services .dropdown {
      width: 90vw; /* Make the dropdown slightly larger on mobile */
      grid-template-columns: 1fr; /* Stack dropdown items in one column */
  }

  .dropdown li {
      font-size: 1.1rem; /* Slightly larger text for better readability */
  }

  .dropdown h3 {
      font-size: 1.2rem; /* Larger heading font for mobile */
  }
}

/* Very Small Screens */
@media (max-width: 480px) {
  .header {
      padding: 10px 15px;
  }

  .logo {
      font-size: 1em; /* Smaller logo size */
  }

  .nav a {
      font-size: 1em; /* Smaller font size for nav links */
      padding: 8px;
  }

  .dropdown {
      width: 100vw; /* Full-width dropdown on smaller screens */
      grid-template-columns: 1fr; /* Stack items in one column */
  }

  .dropdown li {
      font-size: 1rem; /* Adjust font size */
  }

  .dropdown h3 {
      font-size: 1.1rem; /* Smaller heading size */
  }}
  @media (max-width: 996px) {
    
    .nav {
      display: none; /* Hide navigation on small screens */
      width: 100%;
      position: absolute;
      top: 40px; /* Adjust based on your header height */
      right: 0;
      z-index: 10;
    }
    .hamburger {
      display: block;
      position: absolute;
      right: 0;
      margin-right: 3%;
    }
    .header .nav.active {
      display: block; /* Show navigation when active */
      align-items: flex-start;
    }
    #contact {
      border: none;
    }
    .header .nav ul {
      align-items:right;
      flex-direction: column;
      width: 87%;
      padding: 10px;
      margin-top: 3%;
      background-color: rgba(255, 255, 255, 0.9);
      margin-left: 5%;
      margin-right: 10%;
    }
  
    .header .nav ul li {
      margin: 5px 0;
      text-align: left;
      width: 30%;
      color: #111;
    }
    .header .nav ul li a{
      color: #111;
    }
  }
  /* This block previously read "1.6 em" (space before the unit), which is
     invalid CSS, so the declaration had always been dropped by the parser and
     the nav never used it. Correcting the typo would silently enable a rule
     the site has never actually rendered with - and at 1.6em it overrides the
     clamp above and makes the nav oversized again between 1482 and 1895px.
     The rule is removed rather than revived. */
  /* Make the dropdown sections responsive */
  @media (max-width: 768px) {
    .dropdown {
      width: 90vw; /* Make the dropdown slightly larger on mobile */
      grid-template-columns: 1fr; /* Stack everything in one column on smaller screens */
    }

    .logo img{
      width: 5em;
    }
    .nav {
      display: none; /* Hide navigation on small screens */
      width: 100%;
      position: absolute;
      top: 40px; /* Adjust based on your header height */
      right: 0;
      z-index: 10;
    }
    .hamburger {
      display: block;
      position: absolute;
      right: 0;
    }
    .header .nav.active {
      display: block; /* Show navigation when active */
      align-items: flex-start;
    }
  
    .header .nav ul {
      align-items:right;
      flex-direction: column;
      width: 87%;
      padding: 10px;
      margin-top: 1px;
      background-color: rgba(255, 255, 255, 0.9);
      margin-left: 5%;
      margin-right: 10%;
    }
  
    .header .nav ul li {
      margin: 5px 0;
      text-align: left;
      width: 30%;
      color: #111;
    }
    .header .nav ul li a{
      color: #111;
    }
  }
  /* Services Dropdown hidden on mobile */
  @media (max-width: 768px) {
    .services {
      display: none; /* Hide dropdown on mobile */
    }
    .services-mobile {
      display: block;
    }
  }