:root{
    --main-color: #0078FF;
}
html{
    scroll-behavior: smooth;
}
.home{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(../images/hero-bg.jpg);
    background-size: cover;
    background-position: center center;
}
@media screen and (min-width: 444px) and (max-width: 500px) {
    h1{
        width: 80%;
        margin: auto;
    }
}
.heading h2{
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    color: #1e1e1e;
}
.heading p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #4e4e4e;
}
.heading .line{
    width: 50px;
    height: 5px;
    background-color: var(--main-color);
    margin: auto;
}
.fw-600{
    font-weight: 600;
}
.hero-heading{
    line-height: 86px;
}
.hero-sub{
    line-height: 60px;
}
.hero-sub::after{
    content: "";
    animation-name: Typing;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes Typing {
    0% {content:'D|';}
    1% {content:'De|';}
    2% {content:'Des|';}
    3% {content:'Desi|';}
    4% {content:'Desig|';}
    5% {content:'Design|';}
    6% {content:'Designe|';}
    7% {content:'Designer|';}
    8% {content:'Designer|';}
    9% {content:'Designer|';}
    10% {content:'Designer|';}
    15% {content:'Designer|';}
    16% {content:'Designe|';}
    17% {content:'Design|';}
    18% {content:'Desig|';}
    19% {content:'Desi|';}
    20% {content:'Des|';}
    21% {content:'De|';}
    22% {content:'Dev|';}
    23% {content:'Deve|';}
    24% {content:'Devel|';}
    25% {content:'Develo|';}
    26% {content:'Develop|';}
    27% {content:'Develope|';}
    28% {content:'Developer|';}
    29% {content:'Developer|';}
    30% {content:'Developer|';}
    31% {content:'Developer|';}
    32% {content:'Developer|';}
    33% {content:'Develope|';}
    34% {content:'Develop|';}
    35% {content:'Develo|';}
    36% {content:'Devel|';}
    37% {content:'Deve|';}
    38% {content:'Dev|';}
    39% {content:'De|';}
    40% {content:'D|';}
    41% {content:'|';}
    42% {content:'|';}
    43% {content:'F|';}
    44% {content:'Fr|';}
    45% {content:'Fre|';}
    46% {content:'Free|';}
    47% {content:'Freel|';}
    48% {content:'Freela|';}
    49% {content:'Freelan|';}
    50% {content:'Freelanc|';}
    51% {content:'Freelance|';}
    52% {content:'Freelancer|';}
    53% {content:'Freelancer|';}
    54% {content:'Freelancer|';}
    55% {content:'Freelancer|';}
    60% {content:'Freelancer|';}
    61% {content:'Freelance|';}
    62% {content:'Freelanc|';}
    63% {content:'Freelan|';}
    64% {content:'Freela|';}
    65% {content:'Freel|';}
    66% {content:'Free|';}
    67% {content:'Fre|';}
    68% {content:'Fr|';}
    69% {content:'F|';}
    70% {content:'|';}
    71% {content:'|';}
    72% {content:'P|';}
    73% {content:'Ph|';}
    74% {content:'Pho|';}
    75% {content:'Photo|';}
    76% {content:'Photog|';}
    77% {content:'Photogr|';}
    78% {content:'Photogra|';}
    79% {content:'Photograp|';}
    80% {content:'Photograph|';}
    81% {content:'Photographe|';}
    82% {content:'Photographer|';}
    83% {content:'Photographer|';}
    84% {content:'Photographer|';}
    85% {content:'Photographer|';}
    86% {content:'Photographer|';}
    87% {content:'Photographe|';}
    88% {content:'Photograph|';}
    89% {content:'Photograp|';}
    90% {content:'Photogra|';}
    91% {content:'Photogr|';}
    92% {content:'Photog|';}
    93% {content:'Photo|';}
    94% {content:'Phot|';}
    95% {content:'Pho|';}
    96% {content:'Ph|';}
    97% {content:'P|';}
    98% {content:'|';}
    99% {content:'|';}
    100% {content:'|';}
}
.bg-nav{
    background-color: #040404;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
@media screen and (min-width: 992px) {
    .navbar .nav-item .active::after{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background-color: white;
        top: 100%;
        left: 10px;
    }
    .navbar .nav-item a::after{
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        background-color: white;
        top: 100%;
        left: 10px;
        transition: all 0.5s;
    }
    .navbar .nav-item:hover a::after{
        width: 60%;
    }
}
.bg-gray{
    background-color: #F5F5F5;
}
.h-color{
    color: #1e1e1e;
}
.bg-card{
    background-color: transparent;
}
.bg-progress{
    background-color: #CDE1F8;
}
.prog-h{
    height: 0.8rem;
}
.underline::after{
    content: "";
    position: absolute;
    width: 100px;
    height: 3px;
    background-color: var(--main-color);
    bottom: -10px;
    left: 0;
}
.card-shadow{
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2);
}
.services .card:hover i{
    background-color: var(--main-color);
    border-color: #CDE1F8;
}
.services .card i{
    transition: all 0.5s;
}
.p-color{
    color: #4e4e4e;
}
.bg-counter{
    background-image: linear-gradient(rgba(13, 110, 253, 0.8),rgba(13, 110, 253, 0.8)), url(../images/counters-bg.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.icon-w{
    width: 80px;
}
.icon-border{
    border: 10px solid;
    border-radius: 50%;
}
.primary-color{
    border-color: var(--main-color);
}
.bg-img{
    background-image: linear-gradient(rgba(13, 110, 253, 0.8),rgba(13, 110, 253, 0.8)), url(../images/overlay-bg.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.portfolio .card-text{
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
}
.portfolio .card-img-top:hover{
    transform: scale(1.3);
    cursor: pointer;
}
.portfolio .card .card-img-top{
    transition: all 0.8s;
}
.carousel-indicators .carousel-button{
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.circle-img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.blog .card-title a,
.blog .card-footer a{
    color: #040404;
    transition: all 0.5s;
}
.blog .card-title a:hover,
.blog .card-footer a:hover{
    color: var(--main-color);
}
.blog .small-card{
    top: -16px;
    left: 15px;
    right: 15px;
}
.blog .card-content h6{
    font-size: 11px;
}
.links-style{
    border: 3px solid;
    border-radius: 50%;
    border-color: var(--main-color);
    color: #1e1e1e;
}
.contact .social-links li a i:hover{
    background-color: var(--main-color);
    color: white;
    border-color: #CDE1F8;
}
.contact .social-links li a i{
    transition: all 0.5s;
}
.bg-footer{
    background-color: #0062D3;
}