.home{     background-image: linear-gradient(rgb(0,0,0,0.6),rgb(0,0,0,0.6)),url(../imgs/bg.jpg);
    background-size: cover;
    background-position:  center;
    
    background-attachment: fixed;
  }
  nav  .nav-link.active::after {
    width: 100%;
}

  .service-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    transition: background-color 0.3s ease;
  }
  
  .service-item:hover {
    background-color: #f8f9fa;
  }
  
  .service-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    text-align: center;
    line-height: 50px;
    transition: background-color 0.3s ease;
  }
  
  .service-item:hover .service-icon {
    background-color: #fff;
    color: #000;
  }
  .iconn {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #000;
    text-align: center;
    line-height: 50px;
    transition: background-color 0.3s ease;
  }

 .item:hover .iconn {
    background-color: #000;
    color: #fff;
  }
    /* Custom CSS for portfolio items */
    .portfolio-item {
      position: relative;
      overflow: hidden;
      margin-bottom: 1rem;
    }

    /* Enlarge image on hover */
  .portfolio-item img {
      transition: transform 0.3s ease;
    }

  .portfolio-item:hover img {
      transform: scale(1.1);
    }

    /* White screen style */
  .portfolio-item.white-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white;
      opacity: 0;
      transform: scale(0);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Rotate animation */
   @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Show white screen and rotate on hover */
  .portfolio-item:hover.white-screen {
      opacity: 1;
      transform: scale(1);
      animation: rotate 2s infinite linear;
    }
    .max ul a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      background-color: black;
      bottom: -5px;
      left: 6%;
      transition: 0.6s;
  }
  
  .max ul a:active:after {
      width: 75%;
  }
  
  .max   ul a {
      position: relative;
      transition: all;
  }
  .max ul a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      background-color: black;
      bottom: -5px;
      left: 6%;
      transition: 0.6s;
  }
  
  .nav2  .max ul a:hover::after {
      width: 75%;
  }
  
  .nav2  .max   ul a {
      position: relative;
      transition: all;
  }
  
  .back_ground_1 {
      background-image: url(/imgs/bg.jpg);
      background-size: cover;
      min-height: 100vh;
      position: relative;
      text-align: center;
      background-position: center;
      z-index: 1;
  }
  
  .lear {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000;
      opacity: 0.65;
      z-index: 2;
  }
  
  .text_1 {
      z-index: 55;
      color: white;
  }
  
  .animation span::after {
      content: "|";
      animation-name: type-writer;
      animation-duration: 5s;
      animation-iteration-count: infinite;
  
  
  }
  
  @keyframes type-writer {
      0% {
          content: "|";
      }
  
      3% {
          contain: "D|";
      }
  
      5% {
          contain: "De|";
      }
  
      7% {
          contain: "Dev|";
      }
  
      9% {
          content: "Deve|";
      }
  
      11% {
          contain: "Devel|";
      }
  
      13% {
          content: "Develo|";
      }
  
      15% {
          content: "Develop|";
      }
  
      17% {
          content: "Develope|";
      }
  
      19% {
          content: "Developer|";
      }
  
      21% {
          content: "Develope|";
      }
  
      23% {
          content: "Develop|";
      }
  
      25% {
          content: "Develo|";
      }
  
      27% {
          content: "Devel|";
      }
  
      29% {
          content: "Deve|";
      }
  
      31% {
          contain: "Dev|";
      }
  
      33% {
          content: "De|";
      }
  
      35% {
          content: "D|";
      }
  
      37% {
          content: "|";
      }
  
      39% {
          content: "D|";
      }
  
      41% {
          content: "De|";
      }
  
      43% {
          content: "Des|";
      }
  
      45% {
          content: "Desi|";
      }
  
      47% {
          content: "Desig|";
      }
  
      49% {
          content: "Design|";
      }
  
      51% {
          content: "Designe|";
      }
  
      53% {
          content: "Designer|";
      }
  
      56% {
          content: "Designe|";
      }
  
      58% {
          content: "Design|";
      }
  
      61% {
          content: "Desig|";
      }
  
      63% {
          content: "Desi|";
      }
  
      65% {
          content: "Des|";
      }
  
      67% {
          content: "De|";
      }
  
      69% {
          content: "D|";
      }
  
      71% {
          content: "|";
      }
  
      73% {
          content: "L|";
      }
  
      74% {
          content: "La|";
      }
  
      75% {
          content: "Lar|";
      }
  
      76% {
          content: "Larr|";
      }
  
      77% {
          content: "Larry|";
      }
  
      78% {
          content: "Larry D|";
      }
  
      79% {
          content: "Larry Da|";
      }
  
      80% {
          content: "Larry Dan|";
      }
  
      81% {
          content: "Larry Dani|";
      }
  
      82% {
          content: "Larry Danie|";
      }
  
      83% {
          content: "Larry Daniel|";
      }
  
      84% {
          content: "Larry Daniels|";
      }
  
      85% {}
  }
  .ii {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.521);
    border-radius: 50%;
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 24px;
    transition: .6s all;
}
.icon {
    z-index: 5555;
    width: 500px;
    text-align: center;
    display: flex;
    justify-content: center;
    padding-top: 30px;
}



.progress-stacked {
    background: rgba(0, 0, 0, 0.108);
    height: 30px;
}

.progress {
    height: 30px;
}

.rounded_1 {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.button1 {
    padding: 10px 35px;
    background-color: black;
    border: 1px solid #1c1c1c;
    border-radius: 5px;
    font-size: 13px;
    transition: all 0.4s;
    color: white;

}

.button1:hover {
    background-color: white;
    color: black;
}

.button2 {
    padding: 10px 35px;
    background-color: white;
    border: 1px solid #1c1c1c;
    border-radius: 5px;
    font-size: 13px;
    transition: all 0.4s;
    color: black;

}

.button2:hover {
    background-color: black;
    color: white;
}



.Services-1 {
    background-color: #f7f7f7;

}

.Services-1 h3 {
    text-align: center;
    position: relative;
    display: inline-block;
    z-index: 10;
}

.Services h3::after {
    content: "";
    width: 100%;
    height: 30px;
    background-image: url(../imgs/imgs/dots.png);
    background-repeat: repeat;
    position: absolute;
    bottom: -10px;
    left: 0;
    z-index: -1;
    align-items: center;
}

.b_r2 {
    width: 70px;
    height: 70px;
    background-color: #f4f4f4;
    border-radius: 50%;
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.9s;
}

.Services .container {
    width: 80%;
}


.cared:hover .b_r2 {
    background-color: #000;
    color: white;
}

.work h3 {
    text-align: center;
    position: relative;
    display: inline-block;
    z-index: 10;
}



.work h3::after {
    content: "";
    width: 100%;
    height: 30px;
    background-image: url(../imgs/imgs/dots.png);
    background-repeat: repeat;
    position: absolute;
    bottom: -10px;
    left: 0;
    z-index: -1;
    align-items: center;
}

.work .items:hover .lear1 {
    top: 50%;
}

.work .items .lear1 {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.work .nav-tabs .nav-link {
    color: #000;

}
.nav-tabs .nav-link{
    border-radius: 0;
    border: 0;
}

.nav-tabs{
    border-bottom: 0;
}




.container{
    width: 90%;
}

.lear1 {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background:white;
    opacity: 0;
    z-index: 2444;
    transition: all 0.6s;
}
.imges:hover .lear1{
    opacity: 0.9;
}


.b_r3{
    width:30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px;
    overflow: hidden;
}

.b_r3:hover{
    background-color: white;
    color: #000;
}
/* Clients */
.Clients{
    background-color: #f4f4f4;

}

.Clients h3 {
    text-align: center;
    position: relative;
    display: inline-block;
    z-index: 10;
}

/* .work{
    background-color: #f7f7f7;
} */

.cp{
    cursor: pointer;
}

.Clients h3::after {
    content: "";
    width: 100%;
    height: 30px;
    background-image: url(../imgs/imgs/dots.png);
    background-repeat: repeat;
    position: absolute;
    bottom: -10px;
    left: 0;
    z-index: -1;
    align-items: center;
}
.m-w{
    max-width:100px ;
}
.w-500{
    width: 800px;
}
.carousel-indicators [data-bs-target] {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #0000007b;

}

.Clients span{
    font-weight: 50;
}

/*sumry  */
.sumry .container{
    width: 70%;
}
/* Team */
.Team {
    background-color: #f4f4f4;
}
.Team  h3 {
    text-align: center;
    position: relative;
    display: inline-block;
    z-index: 10;
}

.Team  h3::after {
    content: "";
    width: 100%;
    height: 30px;
    background-image: url(../imgs/imgs/dots.png);
    background-repeat: repeat;
    position: absolute;
    bottom: -10px;
    left: 0;
    z-index: -1;
    align-items: center;
}

.cared3{
    position: relative;
    display: block;
}

.lear2 {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background:white;
    opacity: 0;
    z-index: 2;
    transition: all 0.6s;
    cursor: pointer;

}
.care:hover .ineer .lear2 {
    opacity: 0.9;
    transform: rotatey(180deg)
}
.contact-section {
    padding: 80px 0;
  }
  
  .contact-form-container {
    margin-top: 50px;
  }
  
  .info.item {
    margin-bottom: 30px;
  }
  
  .info.item.icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: #ccc;
    color: #fff;
    transition: background-color 0.3s;
  }
  
  .info.item.icon:hover {
    background-color: #000;
  }
  
  .form.form-group {
    margin-bottom: 20px;
  }
  
  .form.buton {
    display: block;
    width: 150px;
    padding: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .form.buton:hover {
    background-color: white;
  }
  .bodyy {
    background-color:white;
    padding-top: 85px;
}

h1 {
    font-family: 'Poppins', sans-serif, 'arial';
    font-weight: 600;
    font-size: 72px;
    color: white;
    text-align: center;
}

h4 {
    font-family: 'Roboto', sans-serif, 'arial';
    font-weight: 400;
    font-size: 20px;
    color: #9b9b9b;
    line-height: 1.5;
}

/* ///// inputs /////*/

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
    font-size: 0.75em;
    color: #999;
    top: -5px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
}

.styled-input {
    float: left;
    width: 293px;
    margin: 1rem 0;
    position: relative;
    border-radius: 4px;
}

@media only screen and (max-width: 768px){
   .styled-input {
        width:100%;
    }
}

.styled-input label {
    color: #999;
    padding: 1.3rem 30px 1rem 30px;
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

.styled-input.wide { 
    width: 650px;
    max-width: 100%;
}

input,
textarea {
    padding: 30px;
    border: 0;
    width: 100%;
    font-size: 1rem;
    background-color: #2d2d2d;
    color: white;
    border-radius: 4px;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 15em;
}

.input-container {
    width: 650px;
    max-width: 100%;
    margin: 20px auto 25px auto;
}

.submit-bt {
    float: right;
    padding: 7px 35px;
    border-radius: 60px;
    background-color: #4b8cfb;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
              0 2px 10px 0 rgba(0,0,0,0.07);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.submit-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
              0 1px 1px 0 rgba(0,0,0,0.09);
}

@media (max-width: 768px) {
   .submit-btn {
        width:100%;
        float: none;
        text-align:center;
    }
}

input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}
.gg {background-color: #999;}
.contact .contact-icon{
    width: 50px;
    height: 50px;
    background-color: #F4F4F4;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    transition: all 1s;
}
.contact .three-divs:hover .contact-icon{
    background-color: #000;
    color: white;
}
.contact .in input,textarea{
    border: none;
    outline: none;
    background-color: #F4F4F4;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
}
footer{
    text-align: center;
    background-color: #1C1C1C;
    color: white;
    padding: 20px;
}