@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@media only screen and (max-width: 768px) {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: clip;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    
}

/* Navbar */
.img-logo {
    height: 80px;
    object-fit: contain;

} 
.nav-link {
    color: rgba(173, 181, 189, 1);
    font-weight: 500;
}
.nav-link:hover{
    color: red;
    background-color: rgba(173, 181, 189, 1);
    border-radius: 6px;
    box-shadow: 5px 5px 10px rgba(255, 0, 0, 1);
}
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
 }

.custom-toggler.navbar-toggler {
  border-color: rgba(255, 0, 0, 1);
}
/* Hero */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/bg-img.jpg) center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    background-attachment: fixed;

}
@media only screen and (min-width: 768px){
.hero h1 {
    letter-spacing: 4px;
    border-right: 5px solid;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: 
    typing 2s steps(18), cursor .4s step-end infinite alternate;
}
@keyframes cursor {
    50% {border-color: transparent}
}
@keyframes typing {
    from {width: 0}
}
}
@media only screen and (max-width: 425px){
    .hero .content {
        text-align: center;
    }
}
.hero span,
.btn,
.about span {
    color: rgba(255, 0, 0, 1);
}
.btn {
    border: solid 1px rgba(255, 0, 0, 1);
    transition: .3s;
}
.btn:hover {
    letter-spacing: 2px;
    background-color: rgba(255, 0, 0, 1);
    color: rgba(248, 249, 250, 1);
}
/* Services */
.services,
.footer {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/bg-img.jpg) center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.services i {
    color: rgba(255, 0, 0, 1);
}
.services .card {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}
.services h5 {
    letter-spacing: 2px;
}