body{
    font-family: Montserrat, sans-serif;
}
:root{
--muted-color: #343434;
--secondary-color:#f7f7f7;
}
.carousel-indicators

/**         Navbar               **/
nav{
    background-color: transparent!important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  }

.navbar-brand {
    font-weight: 800;
}
nav.navbar ul li a.nav-link.active::after , .works .nav-pills .nav-link.active::after {
    content: "";
    position: absolute;
    height: 2px;
    bottom: 5px;

    background-color:white;
  }

  

/**        Header             **/
header{
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) 
    ,  url("../images/bg.jpg");
    background-position: center;
    background-size: cover; 
background-attachment: fixed;
}
header p{
    font-weight: 800;
    font-size: 2.25rem; }
    h1{
        font-weight: 200;
 
       
    }
header h1::after{
    content: '';
    animation: typing 5s infinite;
    -webkit-animation: typing 5s infinite;
}
/**^  typing Animation             **/
@keyframes typing {
    /* Designer */
    0%, 5% { content: "D|"; }
    10% { content: "De|"; }
    15% { content: "Desi|"; }
    20% { content: "Desig|"; }
    25% { content: "Designer|"; }
    30% { content: "Design|"; }
    35% { content: "|"; }
    
    /* Developer */
    36% { content: "D|"; }
    41% { content: "De|"; }
    46% { content: "Dev|"; }
    51% { content: "Develo|"; }
    56% { content: "Developer|"; }
    61% { content: "Develo|"; }
    66% { content: "|"; }
    
    /* Larry Danials */
    67% { content: "L|"; }
    72% { content: "La|"; }
    77% { content: "Lar|"; }
    82% { content: "Larry|"; }
    87% { content: "Larry D|"; }
    92% { content: "Larry Danials|"; }
    97% { content: "Larry|"; }
    100% { content: "|"; }
}
.bg-icon{
    width: 36px;
    height: 36px;
    cursor: pointer;
    background-color: rgba(0,0,0,0.5)!important;
}
    /**     About       ***/  
 .about .about-img .inner::after {
        content: "";
        position: absolute;
        width: 70%;
        height: 80%;
        left: 45px;
        bottom: -30px;
        background-image: url(../images/dots.png);
        background-repeat: repeat;
        z-index: -1;
    }
    
    
.about h2 , .services h2 , .contact h2 , .clients h2 , .team h2 , .works h2{
    color: var(--muted-color);
    margin-bottom: 50px;
    font-weight: 900;
}
.about h4{
    font-size : 15px;
}
.about h4 , .about p{
    color: #748182  ;
}
.about p span{
    font-weight: 700;

}
.progress-bar{
    background-color:black !important;
}
.progress-bar .content h4{
    font-size: 12px;
 
}

.download-btn{
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    border-width: 1px !important;
    padding-block: 5px;
}
.download-btn:hover{

    border-color:  black !important;
    background-color:  white !important;
    color: black !important;
}
button.contact-btn {
    padding-block: 5px !important;
    border: 1px solid black;
}
button.contact-btn:hover {
    border-color:  white !important;
    background-color:  black !important;
    color: white !important;
}

.progress {
    box-shadow: rgb(225, 225, 225) -2px 2px 5px 1px inset;
}


    /**      services     ***/
.services{
   background-color:  var(--secondary-color);
}
.services h2 ,  .contact h2 , .clients h2 , .team h2 , .works h2{
    position: relative;
    z-index: 4 ;
    display: flex;
    justify-content: center;
}
 .services h2::after , .contact h2::after , .clients h2::after , .team h2::after , .works h2::after{
  content: "";
  width: 18%;
    height: 30px;
    background-image: url("../images/dots.png");
    background-repeat: repeat;
    position: absolute;
    bottom: -10px;
    
    z-index: -1;
}
.services .row  .inner {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px -8px;
}


.icon {
    background-color: #f7f7f7;
    width: 60px;
    height: 60px;
    font-size: 20px;
    border-radius: 50%;
    transition: all 0.3s ;
    -webkit-transition: all 0.3s ;
    -moz-transition: all 0.3s ;
    -ms-transition: all 0.3s ;
    -o-transition: all 0.3s ;
}
.icon:hover{
    background-color: black;
    color: white;
    }
/**      works section      ***/
.works .nav-pills .nav-link.active{
    background-color: white !important;
    
}
.works .nav-pills .nav-link.active::after{
    background-color: #111;
    width: 65%;
    margin-left: 4px;
}

.works .item .item-layer{
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    opacity: 0;
    z-index: 2;
    transform: translateY(10px);
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition: all 0.5s;
    background: rgba(255, 255, 255, 0.95);

}
.works .item:hover .item-layer{
    opacity: 1 !important;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}
.works h6{
    font-weight: 600;
}
.works i{
    width: 30px;
    height: 30px;
    line-height: 28px;
    border-radius: 50%;
    border: 1px solid #111;
    background: #111;
    color: #eee;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.works i:hover{
  
    border-radius: 50%;
    border: 1px solid #111;
    background:white;
   color: #111;
}

/**      clients  section       ***/
.clients h2{
        margin-bottom: 0;
    }
.clients p{
   max-width: 800px;
}
.clients img{
    width: 80px;
    height: 80px;
}
.carousel {

    margin-top: 30px;
}

.carousel-indicators [data-bs-target] {
    width: 9px !important;
    height: 9px  !important;
    border-radius: 50%  !important;
    -webkit-border-radius: 50%  !important;
    -moz-border-radius: 50%  !important;
    -ms-border-radius: 50%  !important;
    -o-border-radius: 50%  !important;
    background-color: var(--muted-color) !important;
}
.clients .clinent{
    background-color: var(--secondary-color);
}


    /**      clients  footer      ***/
    
.clients-footer .row .inner i {
        font-size: 30px;
    }
.clients-footer .content {
        margin-top: 10px;
    }
.clients-footer .row .inner span {
      font-weight: 900;
      font-size: 30px;
    }
.clients-footer .row .inner p{
        color: #748182;
    }
 /***   Team ssection       ***/
.team-section{
    background-color: var(--secondary-color);
 }
 .img-area .white-layer{
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    text-align: center;
    inset: 5px;
    opacity: 0;
    transition: all 0.5s;
    transform: rotateY(180deg) scale(0.5, 0.5);
    -webkit-transform: rotateY(180deg) scale(0.5, 0.5);
    -moz-transform: rotateY(180deg) scale(0.5, 0.5);
    -ms-transform: rotateY(180deg) scale(0.5, 0.5);
    -o-transform: rotateY(180deg) scale(0.5, 0.5);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.team-inner:hover .white-layer{
    cursor: pointer;
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
    -webkit-transform: rotateY(0deg) scale(1, 1);
    -moz-transform: rotateY(0deg) scale(1, 1);
    -ms-transform: rotateY(0deg) scale(1, 1);
    -o-transform: rotateY(0deg) scale(1, 1);
}
.team-inner img{
    transition: all 0.5s;
}
.team-inner:hover img{
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
}
.team-inner {
    background-color: rgba(52, 52, 52, .8);
}
.team  .white-layer i{
    background-color: rgba(0, 0, 0, 0.827) !important;
}
.team  .white-layer i:hover{
    border: 1px solid black;
    color: black;
    background-color:  white !important;
}


 /***   contact        ***/

 .contact p{
    color:  #748182;
 }
.contact .inner input {
    padding-left: 12px;
    border: none;
    width: 100%;
    height: 40px !important;
    background-color: #f4f4f4 !important;
    border: none !important;
}


  .contact input:focus , .contact textarea:focus{
    outline: none !important;
  }
textarea {
    border: none !important;
    min-height: 120px;
    background-color: #f4f4f4 !important;
    border: none;
}
.contact button{
    background-color: black ;
    color: white;
    padding-inline: 24px;
    transition:all 0.3s ;
    -webkit-transition:all 0.3s ;
    -moz-transition:all 0.3s ;
    -ms-transition:all 0.3s ;
    -o-transition:all 0.3s ;
}
.contact button:hover{
background-color: white;
border: 1px solid #1c1c1c !important;
color: #1c1c1c;

}

 /***  footer       ***/
footer{
    background-color: #1c1c1c;;
}
footer p{
    color: #748182;;
}