body {
    font-family: "Poppins", sans-serif;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "3", sans-serif;
}

.nav-item .active {
  border-bottom: 5px solid rgb(0, 0, 0);
  border-radius: 0%;

}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: transparent;
  
}

.hi {
    height: 30px;
}

.start {
    right: 75px;
}

.hover-white {
    background-color: black;
    color: rgb(255, 255, 255);
}

.hover-white:hover {
    background-color: rgb(255, 255, 255);
    color: black;
    transition: all 0.7s;
}

.hover-black:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    transition: all 0.7s;
}

.hover-icon:hover {
    i {
        color: azure;
        background-color: black;
        transition: all 0.7s;
    }
}

.hover-icon i {
    background-color: rgba(128, 128, 128, 0.432)
}

.tr {
    transform: translateY(-20px);
    transition: all 0.7s;
}

.layer-img:hover .tr {
    transform: translateY(0px);
    
}
.layer-img:hover i {
    transform: translateY(0px);
    
}

.icon-hover i:hover {
    background-color: white;
    color: black;

}

.icon-hover i {
    background-color: black;
    color: white;
    transform: translateY(20px);
    transition: all 0.7s;
}

.click {
    transition: all 2s;
}

.layer {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../imgs/bg.jpg);
    background-position: center;
    background-size: cover;

}


.layer-img:hover {
    opacity: 1;
    color: black;
 
}

.layer-img {

    position: absolute;
    inset: 25px;
    background-color: rgb(255, 255, 255);
    transition: all 0.7s;
    opacity: 0;

}

.letter {
    letter-spacing: 3px;
    font-size: 12px;
}


.main {
    font-size: 4rem;
    margin-bottom: 50px;
}

.animation::after {
    content: "";
    width: 200px;
    height: 50px;
    color: white;
    font-size: 4rem;
    animation: example 7s infinite;

}

@keyframes example {
    1% {
        content: "D|";
    }

    4% {
        content: "De|";
    }

    6% {
        content: "Dev|";
    }

    8% {
        content: "Deve|";
    }

    10% {
        content: "Devel|";
    }

    12% {
        content: "Develo|";
    }

    14% {
        content: "Develop|";
    }

    16% {
        content: "Develope|";
    }

    18% {
        content: "Developer|";
    }

    20% {
        content: "Develope|";
    }

    21% {
        content: "Develop|";
    }

    22% {
        content: "Develo|";
    }

    23% {
        content: "Devel|";
    }

    24% {
        content: "Deve|";
    }

    25% {
        content: "Dev|";
    }

    26% {
        content: "De|";
    }

    27% {
        content: "D|";
    }

    28% {
        content: "|";
    }


    30% {
        content: "L|";
    }

    32% {
        content: "La|";
    }

    34% {
        content: "Laa|";
    }

    36% {
        content: "Laar|";
    }

    38% {
        content: "Laary|";
    }

    40% {
        content: "Laary |";
    }

    42% {
        content: "Laary D|";
    }

    44% {
        content: "Laary Da|";
    }

    46% {
        content: "Laary Dan|";
    }

    48% {
        content: "Laary Dani|";
    }

    50% {
        content: "Laary Danie|";
    }

    52% {
        content: "Laary Daniel|";
    }

    54% {
        content: "Laary Daniels|";
    }

    56% {
        content: "Laary Daniels|";
    }

    58% {
        content: "Laary Daniel|";
    }

    60% {
        content: "Laary Danie|";
    }

    62% {
        content: "Laary Dani|";
    }

    64% {
        content: "Laary Dan|";
    }

    66% {
        content: "Laary Da|";
    }

    68% {
        content: "Laary D|";
    }

    70% {
        content: "Laary |";
    }

    72% {
        content: "Laary|";
    }

    74% {
        content: "Laar|";
    }

    76% {
        content: "Laa|";
    }

    78% {
        content: "La|";
    }

    80% {
        content: "L|";
    }

    82% {
        content: "|";
    }

    84% {
        content: "D|";
    }

    86% {
        content: "De|";
    }

    87% {
        content: "Des|";
    }

    88% {
        content: "Desi|";
    }

    89% {
        content: "Desig|";
    }

    90% {
        content: "Design|";
    }

    91% {
        content: "Designe|";
    }

    92% {
        content: "Designer|";
    }

    93% {
        content: "Designe|";
    }

    94% {
        content: "Design|";
    }

    95% {
        content: "Desig|";
    }

    96% {
        content: "Desi|";
    }

    97% {
        content: "Des|";
    }

    98% {
        content: "De|";
    }

    99% {
        content: "D|";
    }

    100% {
        content: "|";
    }


}

.section-1 .img-hero::before {
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    left: 0px;
    bottom: -30px;
    background-image: url(../imgs/dots.png);

    background-repeat: repeat;
    z-index: -1;
}
.section-2 h2::before {
    content: "";
    width: 17%;
    height: 60%;
    position: absolute;
    top: 27px;
    background-image: url(../imgs/dots.png);
    background-repeat: repeat;
    z-index: -1;
}

.section-3 h2::before {
    content: "";
    width: 16%;
    height: 60%;
    position: absolute;
    top: 25px;
    background-image: url(../imgs/dots.png);
    background-repeat: repeat;
    z-index: -1;
}

.section-4 h2::before {
    content: "";
    width: 23%;
    height: 60%;
    position: absolute;
    top: 20px;
    background-image: url(../imgs/dots.png);
    background-repeat: repeat;
    z-index: -1;
}

.section-5 h2::before {
    content: "";
    width: 18%;
    height: 20%;
    position: absolute;
    top: 72px;
    background-image: url(../imgs/dots.png);
    background-repeat: repeat;

    z-index: -1;
}

.section-6 h2::before {
    content: "";
    width: 20%;
    height: 20%;
    position: absolute;
    top: 72px;
    background-image: url(../imgs/dots.png);
    background-repeat: repeat;

    z-index: -1;
}

.width-80 {
    width: 83%;
}

.width-img {
    width: 15%;
    margin-bottom: -10px;
}

.font-small {
    font-size: 15px;
}

.icon {
    i {
        background-color: rgba(0, 0, 0, 0.11);

    }

}

.icon:hover {
    i {
        background-color: rgb(0, 0, 0);
        color: white;
        transition: 0.5s;

    }


}

.button {
    background-color: black;
    color: white;
}

.button:hover {
    background-color: white;
    color: black;
    transition: 0.5s;
}

.fw {
    font-weight: 800;
    letter-spacing: 0.5%;
}
.scal img{
    transition: all 4s;
}
.scal:hover{
    transform: scale(1.1);
    transition: 0.5s;
}

.last:hover img{
  transform: scale(1.2);
  transition: all 1s;
}
.card:hover .layer-img{
    transform: rotateY(360deg);
    opacity: 1;
}
.card .layer-img {
    transform: rotateY(180deg);
transition: all 0.7s;
    opacity: 0;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 110px;
    background-color: rgba(255, 255, 255, 0.856);

}
.card .layer-img a i{
    background-color: black;
    color: white;
}
.card .layer-img a i:hover{
    background-color: rgb(255, 255, 255);
    color: black;
    border: 1px solid black;
}
@media screen and (max-width:900px){
    .width-80{
        width: 100%;
    }
}