html{
    scroll-behavior: smooth;
}
:root{
    --main-color:#1C1C1C;
    --backgroundColor:#F7F7F7;
}

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

p{
    font-family: 'Poppins', sans-serif;
}


nav li a{
    color: var(--main-color) !important;
}

/* this nav section */
nav ul li a{
    position: relative;
    padding: 0;
    transition: 0.5s;
}


.navbar-expand-lg .navbar-nav .nav-link.active{
    width: fit-content;
}
.navbar-expand-lg .navbar-nav .nav-link.active::before{
    content: "";
    position: absolute;
    height: 2px;
    width: 90%;
    background-color: #fff;
    top: 100%;
    animation-name: link-animation;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0;
}


@keyframes link-animation {
    0%{
        width: 0;
    }
    10%{ width: calc(8%*1);
    }
    20%{ width: calc(8%*2);
    }
    30%{ width: calc(8%*3);
    }
    40%{ width: calc(8%*4);
    }
    50%{ width: calc(8%*5);
    }
    60%{ width: calc(8%*6);
    }
    60%{ width: calc(8%*7);
    }
    70%{ width: calc(8%*8);
    }
    80%{ width: calc(8%*9);
    }
    90%{ width: calc(8%*10);
    }
    100%{ width: calc(8%*10);
    }

}
.nav-link{
    padding: 0px;
}

.daniels-nav-scrolled  {
    background-color: #FFF;
}

.daniels-nav-scrolled .white-link{
    color: var(--main-color) !important;
}
.daniels-nav-scrolled .nav-link.active::before{
    background-color: var(--main-color) !important;
}


.navbar{
    transition: 0.5s;
}

@media screen and (max-width:992px) {
    .navbar-nav {
        align-items: center;
        background-color: #fff;
    }
    .nav-link{
        color: var(--main-color) !important;
    }
    .navbar-expand-lg .navbar-nav .nav-link.active::before{
        background-color: var(--main-color);
    }
}
/* this home section */
.home{
    background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(../imgs/bg.jpg);
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
}
.home-paragraph{
    font-size: 65px;
}

header ul li{
    background-color: #020a1085;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* this about section */
.back-img{
    background-image: url(../imgs/dots.png);
    background-repeat: repeat;
    width: 70%;
    height: 70%;
    position: absolute;
    top: 26.5%;
    left: 5%;
    z-index: -1;
}

.tube1,.tube2,.tube3{
    background-color: #F7F7F7;
    width: 100%;
    height: 28px;
    margin-top: 25px;
    border-radius: 10px;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15) inset;
}

.tube-inner{
    background-color: var(--main-color);
    height: 100%;
    border-radius: 10px;
    font-size: 14px;
}
.tube-inner1{
    width: 95%;
}
.tube-inner2{
    width: 80%;

}
.tube-inner3{
    width: 90%;

}

.about-btn1{
    background-color: var(--main-color);
    transition: 0.5s;
}
.about-btn2{
    border: 1px solid var(--main-color);
    transition: 0.5s;

}

.about-btn1:hover{
    background-color: #fff;
    border: 1px solid var(--main-color);
    color: var(--main-color) !important;
}

.about-btn2:hover{
    background-color: var(--main-color);
    border: 1px solid #fff;
    color: #fff ;
}

header p::after{
    content: "";
    font-weight: 300;
    animation-name:typing ;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}

@keyframes typing {
    0%{content: "Larry Daniels|";}
    2%{content: "Larry Daniels|";}
    4%{content: "Larry Daniels|";}
    6%{content: "Larry Daniel|";}
    8%{content: "Larry Danie|";}
    10%{content: "Larry Dani|";}
    12%{content: "Larry Dan|";}
    14%{content: "Larry Da|";}
    16%{content: "Larry D|";}
    18%{content: "Larry |";}
    20%{content: "Larry|";}
    22%{content: "Larr|";}
    24%{content: "Lar|";}
    26%{content: "La|";}
    28%{content: "L|";}
    30%{content: "|";}
    32%{content: "|";}
    34%{content: "|";}
    36%{content: "|";}
    38% {content: "D|";}
    40% {content: "De|";}
    42% {content: "Dev|";}
    44% {content: "Deve|";}
    46% {content: "Devel|";}
    48% {content: "Develo|";}
    50% {content: "Develop|";}
    52% {content: "Develope|";}
    54% {content: "Developer|";}
    56% {content: "Developer|";}
    58% {content: "Developer|";}
    60% {content: "Develope|";}
    62% {content: "Develop|";}
    64% {content: "Develo|";}
    65% {content: "Devel|";}
    68% {content: "Deve|";}
    70% {content: "Dev|";}
    73% {content: "De|";}
    76% {content: "Des|";}
    79% {content: "Desi|";}
    82% {content: "Desig|";}
    85% {content: "Design|";}
    89% {content: "Designe|";}
    92% {content: "Designer|";}
    95% {content: "Designer|";}
    98% {content: "Designer|";}
    100% {content: "Designer|";}
}

@media screen and (max-width:667px) {
    header p{
        font-size: 35px !important;
    }
    header p::after{
        font-size: 35px;
    }
}
/* this is services section  */
#services{
    background-color: #F7F7F7;
}

.title h2{
    font-size: 45px ; 
    font-weight: 900;
    width: fit-content;
}
.title h2::before{
    content: "";
    position: absolute;
    background-image: url(../imgs/dots.png);
    background-repeat: repeat-x;
    top: 100%;
    width: 100%;
    height: 100%;
}

.services-icon{
    width: 70px;
    height: 70px;
    background-color: #f4f4f4;
}
.services-card .services-icon{
    transition: 0.5s;
}
.services-card:hover .services-icon{
    background-color: var(--main-color);
}

.services-card:hover .services-icon i{
    transition: 0.5s;
}

.services-card:hover .services-icon i{
    color: #fff;
}

/* this is Portfolio section */
.work-layer{
    transition: 0.5s;

}

.work-product .work-layer{
    background-color: #ffffffe5;
    top: 0;
    transform: scale(1);
    opacity: 0;
}
.work-product:hover .work-layer{
    background-color: #ffffffe5;
    top: 0;
    transform: scale(0.97);
    opacity: 1;
}

.product-title{
    top: 35%;
    height: fit-content;
    transition: 0.5s;
    opacity: 0;

}
.work-product:hover .product-title{
    transform: translateY(40%);
    opacity: 1;

}

.product-icon{
    top: 58%;
    height: fit-content;
    transition: 0.5s;
    opacity: 0;
}

.product-icon a{
    color: #fff;
    font-size: 14px;
}

.work-product:hover .product-icon{
    transform: translateY(-70%);
    opacity: 1;

}

.product-icon ul li{
    width: 30px;
    height: 30px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.product-icon ul li:hover{
    background-color: #fff;
    border: 1px solid var(--main-color);
}
.product-icon ul li a{
    transition: 0.5s;
}
.product-icon ul li:hover a{
    color: var(--main-color);
}

.works .nav-pills .nav-link.active{
    background-color: transparent !important;
    color: var(--main-color);
    border-bottom: 2px solid black;
    border-radius: 0;
    font-weight: bold;
}
.works .nav-pills .nav-link{
    color: var(--main-color);
    font-weight: bold;

}

/* this is clients section */

.clients-img{
    width: 100px;
    height: 100px;
}

#clients{
    background-color: var(--backgroundColor);
}

.carousel-indicators .active{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #869791;
}
.carousel-indicators{
    bottom: -60px;
}
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #869791;
}
.clients-data {
    max-width: 975px;
}

/* this is section Our Team. */

#team{
    background-color:var(--backgroundColor) ;
}

.team-layer{
    top: 5px;
    bottom: 122px;
    left: 5px;
    right: 5px;
    background-color: #fffffff1;
    transform: rotateY(180deg) scale(0.5);
    opacity: 0;
    transition: 0.5s;
}
.team-card:hover .team-layer{
    opacity: 1;
    transform: rotateY(360deg) scale(1);
}

.team-layer ul li{
    width: 40px;
    height: 40px;
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 0.5s;
}
.team-layer ul li:hover{
    background-color: #fff;
    border: 1px solid var(--main-color);
}
.team-layer ul li a{
    color: #fff;
    transition: 0.3s;
}
.team-layer ul li:hover a{
    color: var(--main-color);
}

.team-name{
    background-color: #5B5B5B;
}

.teamImg-scale img {
    transition: 0.5s;
}
.teamImg-scale:hover img{
    transform: scale(1.1);
}


/* this section Contact Us. */
.contact-icon{
    width: 63px;
    height: 63px;
    background-color: #F4F4F4;
}

.contact-data .contact-icon ,i{
    transition: 0.5s;
}
.contact-data:hover .contact-icon {
    background-color: var(--main-color);
}
.contact-data:hover .contact-icon i{
    color: #fff;
}
.contact-info input{
    width: 49%;
    background-color: #F4F4F4;

}
.text-info{
    background-color: #F4F4F4;
}

.form-btn{
    background-color: var(--main-color);
    color: #fff;
    transition: 0.5s;
}
.form-btn:hover{
    background-color: #fff;
    color: var(--main-color) !important;;
    border: 1px solid var(--main-color);
}

@media screen and (max-width:667px) {
    .contact-info{
        display: flex;
        flex-direction: column;
    }
    .contact-info input{
        width: 100%;
        margin-top: 15px;
    }

}
.form-control{
    border: none;
}
.form-control:focus {
    color: #212529;
    background-color: var(--backgroundColor);
    border-color: transparent;
    outline: none;
    box-shadow: 0 0 0 0 transparent;
}

/* this footer */
footer{
    background-color: var(--main-color);
}