.header {
    padding-block: 25px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    transition: padding var(--transition);

  }
  
  .header.active {.navbar {
      display: none;
      flex-direction: column;
      gap: 10px;
      background-color: var(--header-background);
      position: absolute;
      top: 60px;
      right: 0;
      width: 150px;
      padding: 10px 0;
      justify-content: center;
      align-items: center;
    }
  
  
  
    .navbar a {
      padding: 10px 20px;
      color: var(--text-color);
    }
  
    .header img {
      max-width: 150px;
    }
  
    .navbar a:hover {
      color: var(--main-color);
    }
  
    #menu-icon {
      display: block;
      font-size: 30px;
      color: #fff;
    }
  
    .navbar.show {
      display: flex;
    }
  
    .slide-down {
      display: flex;
      animation: slideDown 0.5s forwards;
    }
  
    .slide-up {
      animation: slideUp 0.5s forwards;
    }
  
    @keyframes slideDown {
      from {
        max-height: 0;
        opacity: 0;
      }
  
      to {
        max-height: 200px;
        opacity: 1;
      }
    }
  
    @keyframes slideUp {
      from {
        max-height: 200px;
        opacity: 1;
      }
  
      to {
        max-height: 0;
        opacity: 0;
      }
    }
    background: var(--cultured);
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.1);
    padding-block: 20px;
  }
  
  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header .logo { width: 120px; }
  
  .logo img { width: 100%; }
  
  .navbar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 100%;
    max-width: 250px;
    height: 100%;
    background: var(--mantis);
    padding: 80px 20px;
    transition: 0.15s ease-in;
    z-index: 3;
  }
  
  .navbar.active {
    left: 0;
    transition: 0.25s ease-out;
  }
  
 
  .navbar .logo {
    width: 160px;
    margin-bottom: 30px;
    
    margin-inline: auto;
  }
  
  .navbar-list { margin-bottom: 15px; }
  .navbar-link {
    color: var(--rich-black-fogra-29);
    font-weight: var(--fw-500);
    padding-block: 15px;
    font-family: var(--dm-sans);
  }
  
  .overlay {
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.7);
    pointer-events: none;
    opacity: 0;
    transition: 0.15s ease-out;
    z-index: 3;
  }
  
  .overlay.active {
    pointer-events: all;
    opacity: 1;
  }
  .info{
    background-image:url(client\ background.jpg);
  }
  .text{
    font-size: 150px;
  }
  .text1{
    font-size: 80px;
  }
  .hero {
    background: var(--gradient);
    padding: 150px 0 var(--section-padding);

    
  }
  
  .hero-banner { margin-bottom: 30px; }
  
  .hero-banner img { width: 100%; }
  
  .hero-title { margin-bottom: 20px; }
  
  .hero .section-text { margin-bottom: 45px; }
 
  
  .h1,
  .h2,
  .h3 {
    font-family: var(--ff-poppins);
    color: var(--rich-black-fogra-29);
  }
  
  .h1 {
    font-size: var(--fs-1);
    line-height: 1.4;
    font-weight: var(--fw-700);
  }
  
  .h2 {
    font-size: var(--fs-1);
    line-height: 1.6;
}
  
.h3 {
  color: var(--onyx);
  font-size: var(--fs-3);
  line-height: 1.3;
}

.section-text,
.card-text,
.card-subtitle {
  font-family: var(--ff-rubik);
  color: var(--sonic-silver);
  font-size: var(--fs-5);
  line-height: 1.8;
}

.vector-line { display: none; }

.main-home{
  width: 100%; 
  height:100vh;
  background-image:url(client\ background.jpg);

  background-position:center;
  background-size:cover;
  display:grid;
  grid-template-columns: repeat(1,1fr);
  align-items:center;
  
  }
  
.main-text h1{
  color:white;
  font-size:100px;
  text-transform: capitalize;
  font-weight:600;
  margin: 6px 0 10px;
  position: absolute;
  padding:10px;
  bottom: 10%;

}

.main-btn{
  
color:wheat;
  font-size:26px;
  font-weight:500;
  text-transform:capitalize;
  border: 2px solid white;
  padding: 12px 25px;
  transition: all .42s ease;
  position: absolute;
  padding:10px;
  bottom: 3%;

  
}
.main-btn:hover{
  background-color:#24344D;
  color:white;
}
@media only screen and (max-width:414px){
  .text{
     visibility:collapse;
  }
  .phonetext{
     visibility:visible;
  }
}