.dropdown-menu li {
    position: relative;
    transition: color 1s;
    }
    .dropdown-menu li:hover{
        color: #0d6efd;
    }
    .dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    right: 100%;
    top: -7px;
    }
    .dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
    }
    .dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
    }
header{
    background-image: url(../img/hero-bg.jpg);
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
header h1{
    font-size: 70px;
    font-weight: 600;
}
header p{
   
}
header p::after{
    content: "D|";
    animation-name:typing ;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}
@keyframes typing{
    2%{content: "De|";}
    4%{content: "Dev|";}
    6%{content: "Deve|";}
    8%{content: "Devel|";}
    10%{content: "Develo|";}
    12%{content: "Develop|";}
    14%{content: "Develope|";}
    16%{content: "Developer|";}
    18%{content: "Develope|";}
    20%{content: "Develop|";}
    22%{content: "Develo|";}
    24%{content: "Devel|";}
    26%{content: "Deve|";}
    28%{content: "Dev|";}
    30%{content: "De|";}
    32%{content: "D|";}
    34%{content: "De|";}
    36%{content: "Des|";}
    38%{content: "Desi|";}
    40%{content: "Desig|";}
    42%{content: "Design|";}
    44%{content: "Designe|";}
    46%{content: "Designer|";}
    48%{content: "Designe|";}
    50%{content: "Design|";}
    52%{content: "Desig|";}
    54%{content: "Desi|";}
    56%{content: "Des|";}
    58%{content: "De|";}
    60%{content: "f|";}
    62%{content: "fr|";}
    64%{content: "fre|";}
    66%{content: "frel|";}
    68%{content: "frela|";}
    70%{content: "frelan|";}
    72%{content: "frelanc|";}
    74%{content: "frelance|";}
    76%{content: "frelancer|";}
    80%{content: "frelance|";}
    84%{content: "frelanc|";}
    88%{content: "frelan|";}
    90%{content: "frela|";}
    92%{content: "frel|";}
    94%{content: "fre|";}
    96%{content: "fr|";}
    98%{content: "f|";}
    100%{content: "p|";}
   

}
.header-img{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.5);
}
.line{
    width: 17%;
    height: 4px;
    background-color: #0d6efd;
    
} 
#myAbout .container{
    box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.1);
} 
#myservices .line{
    width: 10%;
    height: 4px;
    background-color: #0d6efd;

}
#myservices .col-lg-4{
    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
}
#myservices .icon{
    width:120px ;
    height: 120px;
    
    border-radius: 50%;
    margin: auto;
    display: flex;
    border: 10px solid #0d6efd;
    transition:  background-color 1s ,border-color 1s;
}
#myservices .col-12 i{
    justify-content: center;
    align-items: center;
    font-size: 40px;
    margin: auto;

}
#myservices .col-lg-4:hover .icon{
    background-color: #0d6efd;
    border-color: #cde1f8;
}

.work{
    background-image: url(../img/counters-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; 
    position: relative;
    height: 300px;
}
.work-layer{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 120, 255,0.7);
    
}
.work .icon1{
    width:60px ;
    height: 60px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    border: 5px solid #cde1f8;
    
}
.work .icon1 i{
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin: auto;

}
.work1{
    background-image: url(../img/counters-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; 
    position: relative;
}
#myWork .icon1{
    border: 3px solid #0d6efd;
    width:40px ;
    height: 40px;
    border-radius: 50%;
    display: flex;
    margin: auto;
}
#myWork .icon1 i{
    color: #0d6efd;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin: auto;
}
#myWork .col-lg-4 .spann{
    color: #0d6efd;
}
#mywork .card{
overflow: hidden;
border-radius: 0%;
box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}
#mywork img{
    transition: transform 1s;
}
#mywork .col-lg-4:hover img{
transform: scale(1.1,1.1);

}
#mywork .work{
    background-image: url(../img/overlay-bg.jpg);
}
.image{
    width: 32px;
    height: 32px;
    margin-right: 4px;
    overflow: hidden;
}
.blog {
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);

}
.blog h5{
    transition: color 1s;
}
.blog h5:hover{
    color: #0d6efd;
}
.blog .testimonial{
    transition: color 1s;
}
.blog .testimonial:hover{
    color: #0d6efd;
}
.title{
    top: -3px;
    right: 120px;
    width: 120px;
    background-color: #0d6efd;
}
#myContact .work{
    background-image: url(../img/overlay-bg.jpg);
}
#myContact button{
   margin-left: 150px;
   transition: background-color 0.4s , border 0.4s;
}
#myContact button:hover{
    background-color: rgb(51, 147, 255);
    border: 5px solid #cde1f8;
}
#myContact .icons{
        width:40px ;
        height: 40px;
        border-radius: 50%;
        display: flex;
        border: 4px solid #0d6efd;
        transition:  background-color 1s ,border-color 1s;
    }
    .groupicon{
        display: flex;
        justify-content: start;
        
    }
    #myContact .icons i{
        justify-content: center;
        align-items: center;
        font-size: 20px;
        margin: auto;
    }
    #myContact .icons:hover {
        background-color: #0d6efd;
        border-color: #cde1f8;
    }
    .work2{
        
            background-image: url(../img/counters-bg.jpg);
            background-position: center center;
            background-size: cover;
            background-attachment: fixed; 
            position: relative;
            height: 750px;
    }
    .contact{
        box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
    }
    footer{
        box-shadow: -10px 0px 0px 0px rgba(0, 0, 0, 0.7);
        box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    }
    .back {
        position: fixed;
        visibility: hidden;
        opacity: 0;
        right: 15px;
        bottom: 15px;
        z-index: 996;
        background: #1c59b5;
        width: 40px;
        height: 40px;
        border-radius: 50px;
        transition: all 0.4s;
    }
    footer .back:hover{
        background-color: #7eb5f3;
    }
    .back.active {
        visibility: visible;
        opacity: 1;}
        
        .carousel-indicators [data-bs-target] {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            text-indent: 0px;}