h1,h2,h3,h4,h5,h6{
    font-family: "Montserrat", serif;
}
body{
    font-family: "Poppins", serif;
}



/* #home.nav-fixed {
        width: 100%;
        position: fixed;
        transition: 0.3s ease-in-out;
    }
    
     .nav-active { 
        background-color:#fff;
        color: black;
        box-shadow: 5px -1px 12px -5px grey;
    } */
     






/* #navbarSupportedContent a{
    color: white;
} */
/* test change color nav  */

/* .my-nav{
    
    background-color: rgba(255, 255, 255, 0.25); 
    transition: all 10s;
    
    
       
}
#home:hover  .my-nav{
    background-color: rgba(255, 255, 255, 0.25);
    
    position:absolute;
    top: 0%;
    left: 0%;
   
   
} */

/* end test */

/* start home */
#home{
    background:linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(../imgs/bg.jpg);
    background-size: cover;
}


.home-anim h1::after{
    content: '';
    animation: words infinite  10s .2s   ease-in-out;
}

@keyframes words{
    0%{content: "Larry Daniels|"; }
    /* 15%{content: "Larry|";} */
    30%{content: "|";}
    
    /* 40%{content: "Devel |";} */
   
    50%{content: "Developer|";}
   
    /* 60%{content: "Devel|";} */
    /* 65%{content: "De|";} */
    70%{content: "|";}
    /* 75%{content: "De|";} */
   
    85%{content: "Designer|";}
    /* 95%{content: "De|";} */
   
   
    100%{content: "|"; }
}

/* end home */

.img-front img{
    transform: translate(3%, -3%); 

}
.about-img {
    
    
    background-image: url(../imgs/dots.png);
    transform: translate(-5%, 5%);
 
    
    
}

.my-btn{
    transition: all .5s ;
}

.my-btn:hover{
    background-color: white;
    color: black;
}

.card-btn .btn-serv {
    
    transition: all .5s;
    background-color: rgba(128, 128, 128, .2);
}
.card-btn:hover  .btn-serv{
    
    
    color: white;
    background-color:black;
    
    
    
}








.card-car img{
    width: 100px;
    height: 100px;
}

.port-img .layer-port {
    background-color:rgba(255, 255, 255,.7);
    width: 95%;
    height: 95%;
    inset: 2% ;
    transform:  scale(0,0) ;
    transition: all 0.3s 0.3s ease-out;
    .icon-up{
        margin-top: 40%;
        transition: all 0.5s 0.4s ease-out;
    }
    
    
}

.port-img:hover .layer-port{
    transform:  scale(1) ;
    .icon-up{
        margin-top: 0%;
    }
}



.our-team-card .card .layer{
    background-color:rgba(255, 255, 255,.7);
    width: 95%;
    height: 95%;
    inset: 2% ;
    transform: scale(0,0) rotatey(180deg) ;
    
    transition: all .5s;
}


.our-team-card .card:hover .layer{
    transform: scale(1,1) rotatey(0deg) ;
    
}

.carousel-indicators [data-bs-target]{
    background-color: grey;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}