html{
    scroll-behavior: smooth;
}
.navbar{
    overflow: hidden;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px white solid;
    z-index: 999;
}
.navbar-brand{
    font-weight: bolder;
    font-size: 2rem;
}
.collapse a{
    margin: 5px;
    font-size: 0.9rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    transition: 0.5s all;
}
.collapse a:hover{
    color: teal !important;
}
/* .logos{
    border-left: 1px solid white;
} */
.logos i{
    color: white;
    transition: 0.5s all;
}
.logos i:hover{
    color: teal;
}
.collapse{
    position: relative;
}
.navbar .collapse::after{
    content: "";
    position: absolute;
    top: -112px;
    right: 0;
    background-color: white;
    width: 1px;
    height: 180px;
}
/*********************************************************************************************/
/*********************************************************************************************/
#home{
    width: 100%;
}
#home .carousel-control-prev{
    position: unset;
    transition: 0.7s all;
}
#home .carousel-control-prev i{
    border: 2px white solid;
    padding: 15px;
    transition: 0.7s all;
}
#home .carousel-control-next{
    position: unset;
}
#home .carousel-control-next i{
    border: 2px white solid;
    padding: 15px;
    transition: 0.7s all;
}
#home .carousel-control-prev i:hover, #home .carousel-control-next i:hover{
    color: black;
    background-color: white;
}
.BorderBoxForArrows{
    position: absolute;
    left: 0px;
    top: 40%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.carousel-caption{
    bottom: 50%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.carousel-caption h1{
    font-size: 6rem;
}
.carousel-item{
    position: relative;
}
.carLayer{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.carousel-control-prev{
    z-index: 2;
}
.carousel-control-next{
    z-index: 2;
}
/********************************************************************************/
/********************************************************************************/
#about{
    border-bottom: 0.2px teal solid;
}
#about p{
    color: teal;
}
.blackedHover{
    transition: 0.5s all;
}
.blackedHover:hover{
    background-color: black;
    color: white;
}
#about .container span{
    color: #09c;
    font-weight: bold;
}
#about .container span::after{
    content: "";
    position: relative;
    top: 0;
    left: 0;
    background-color: white;
    animation: aboutAnimation 7s infinite;
}
.fullwidth{
    width: 100%;
    height: 100%;
}
.bordered{
    border-bottom: 1px solid teal;
    border-top: 1px solid teal;
}
.nav-item{
    color: black;
}
.nav-tabs{
    border: none;
}
.nav-tabs .nav-link {
    border: none;
}
#about nav a:hover{
    color: teal;
}
#about .nav-tabs .nav-item.show .nav-link,#about  .nav-tabs .nav-link.active{
    border-bottom: 1px solid black;
    cursor: default;
}
@keyframes aboutAnimation{
    0%{ content: "|";}
    2%{ content: "W|";}
    4%{ content: "We|";}
    6%{ content: "Web|";}
    8%{ content: "Webs|";}
    10%{ content: "Websi|";}
    12%{ content: "Websit|";}
    14%{ content: "Website|";}
    16%{ content: "Websites|";}
    22%{ content: "Website|";}
    24%{ content: "Websit|";}
    26%{ content: "Websi|";}
    28%{ content: "Webs|";}
    30%{ content: "Web|";}
    32%{ content: "We|";}
    34%{ content: "W|";}
    36%{ content: "|";}
    40%{ content: "S|";}
    42%{ content: "So|";}
    44%{ content: "Sof|";}
    46%{ content: "Soft|";}
    48%{ content: "Softw|";}
    50%{ content: "Softwa|";}
    52%{ content: "Softwar|";}
    54%{ content: "Software|";}
    56%{ content: "Softwares|";}
    60%{ content: "Software|";}
    62%{ content: "Softwar|";}
    64%{ content: "Softwa|";}
    66%{ content: "Softw|";}
    68%{ content: "Soft|";}
    70%{ content: "Sof|";}
    72%{ content: "So|";}
    74%{ content: "S|";}
    76%{ content: "|";}
    80%{ content: "A|";}
    82%{ content: "Ap|";}
    84%{ content: "App|";}
    86%{ content: "Apps|";}
    90%{ content: "App|";}
    92%{ content: "Ap|";}
    94%{ content: "A|";}
    98%{ content: "|";}
    100%{ content: "|";}
}
/********************************************************************************/
/********************************************************************************/
#team .container h1{
    color: black;
    font-size: 3rem;
    position: relative;
    font-weight: bold;
}
.headerShadow{
    position: absolute;
    font-size: 70px;
    bottom: 0px;
    left: 47%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    z-index: 0;
    color: black;
    opacity: 0.3;
}
.teamMember{
    position: relative;
}
.memberLayer{
    background-color: #09c;
    opacity: 0;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.3s all;
}
.teamMember:hover .memberLayer{
    opacity: 0.9;
    top: 0;
}
.topLeft{
    position: absolute;
    top: 7px;
    left: 7px;
}
.topLeft a{
    text-decoration: none;
    color: white;
}
.bottomLeft{
    color: white;
    text-align: start;
    position: absolute;
    bottom: 7px;
    left: 7px;
}
/*************************************************************************/
/*************************************************************************/
#services{
    background-image: url('../images/bg-image-26.jpg');
    background-attachment: fixed;
    position: relative;
}
#services .grayLayer{
    background-color: rgba(0, 0, 0,0.6);
    
    width: 100%;
    height: 100%;
}
#services i{
    color: white;
}
.skills p{
    display: inline;
}
.LeftPart{
    position: relative;
}
.LeftPart h1{
    position: relative;
    top: 0;
    left: 0;
    z-index: 5;
}
.WhiteShadow{
    position: absolute;
    top: -40px;
    left: -7px;
    color: rgb(136, 116, 116);
    font-size: 70px;
    font-weight: bolder;
    z-index: 1;
}
/**/
/**/
#works h1{
    position: relative;
}
#works .nav{
    justify-content: space-around;
}
#works .nav-tabs .nav-item.show .nav-link,#works  .nav-tabs .nav-link.active{
    border: 1px solid #09c;
    font-weight: bold;
    color: #09c;
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}
.eachWork{
    position: relative;
    overflow: hidden;
}
.eachWork img{
    transition: 1s all;
}
.eachWork:hover img{
    transform: scale(1.5);
}
.popUpBox{
    background-color: white;
    text-align: center;
    position: absolute;
    bottom: -50%;
    left: 15px;
    right: 15px;
    transition: 0.5s all;
}
.eachWork:hover .popUpBox{
    bottom: 15px;
}
.eachWork a{
    text-decoration: none;
    color: black;
}
.eachWork p{
    color: teal;
}
/***/
/***/
#pricing{
    background-color: #F7F7F7;
    border-bottom: 1px solid teal;
}
#pricing .container h1{
    position: relative;
}
.dollar{
    position: relative;
}
.dollar h1{
    text-align: left;
    font-size: 3.5rem;
}
.dollar i{
    font-size: 20px;
    position: absolute;
    right: 100%;
    bottom: 100%;
}
.card{
    box-shadow: 0 0 3px teal;
    transition: 0.5s all;
    border: 0px;
    border-radius: 0;
}
.card:hover{
    box-shadow: 0 0 10px teal;
}
.HeadCard {
    margin: 15px;
    display: flex;
    justify-content: space-between;
}
.card .btn-info{
    transition: 0.5s all;
}
.card .btn-info:hover{
    transform: translateY(-2px);
}
.specialCard{
    transform: scale(1.09);
}
label{
    color: #484848;
    margin-bottom: 0;
}
input,textarea{
    width: 70%;
    height: 50px;
    margin-bottom: 20px;
}
textarea{
    height: 150px;
}
input:focus{
    border: 3px solid black;
    box-shadow: 0 0 5px black;
}
textarea:focus{
    border: 3px solid black;
    box-shadow: 0 0 5px black;
}
.dataBlock{
    width: 100%;
}
.borderRight{
    border-right: 1px solid teal;
}
.borderRight:last-child{
    border-right: none;
}
.sponsors{
    text-align: center;
    color: teal;
}
.sponsors img{
    opacity: 0.7;
    width: 190px;
    transition: 0.5s all;
}
.sponsors img:hover{
    opacity: 1;
}
/**/
/**/
#contact{
    background-attachment: fixed;
}
#contact .HeaderContent h1{
    position: relative;
    color: black;
}
#contact .HeaderContent .headerShadow{
    font-size: 60px;
    font-weight: bolder;
    left: -10px;
}
#contact .RightPart{
    padding: 70px 0 0 100px;
}
/* #pricing .carousel{
    background-color: blue;
}
#pricing .carousel-item{
    text-align: center;
    background-color: black;
}
#pricing .carousel-inner{
    background-color: yellow;
} */
#pricing .carousel-data{
    background-color: white;
    box-shadow: 0 0 1px black;
    border-radius: 5px;
    text-align: center;
    position: relative;
    overflow: visible;
    width: 70%;
}
#pricing .carousel-data img{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 42%;
    top: -40px;
    z-index: 3;
}
#pricing .carousel-inner{
    overflow: visible;
}
#pricing .carousel-indicators{
    top: 110%;
}
#pricing .carousel-indicators li{
    width: 10px;
    height: 10px;
    background-color: blue;
    border-radius: 50%;
}
#pricing .carousel-control-next,#pricing .carousel-control-prev {
    position: absolute;
    top: 50%;
    bottom: 50%;
}
#pricing .carousel .carousel-control-prev i,#pricing .carousel .carousel-control-next i{
    color: teal;
}
/****/
/****/
.AboutUsSection{
    background-color: #F7F7F7;
    background-image: url('../images/dotted-map.png');
    background-size: 100% 100%;
}
.AboutUsSection a{
    display: block;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    margin-bottom: 10px;
    transition: 0.5s all;
}
.AboutUsSection a:hover{
    color: #09c;
}
.AboutUsSection .btn-outline-secondary{
    transition: 0.5s all;

}
.AboutUsSection .btn-outline-secondary:hover{
    background-color: #09c;
}
.LastLogos a{
    display: inline;
    font-size: 1.3rem;
    text-decoration: none;
}
.LastLogos .face{
    transition: 0.5s all;
}
.LastLogos .face:hover{
    color: blue;
}
.LastLogos .twitter{
    transition: 0.5s all;
}
.LastLogos .twitter:hover{
    color: #09c;
}
.LastLogos .pin{
    transition: 0.5s all;
}
.LastLogos .pin:hover{
    color: red;
}