* {
    margin: 0;
    padding: 0;
    text-decoration: none;

}

/*--------------HEader_nav start ---------------*/
header {
    background: url(https://dsign-media.com/wp-content/uploads/2017/10/slider_016.jpg ) center ;
background-size: cover;
    height: 100vh;
    position: relative;

    transition: 0.9s ease;
    background-attachment: fixed;
}

header .header_fon {
    background-color: #181717f6;
    opacity: 0.8;
    width: 100%;
    height: 100vh;
    padding-top: 10px;
}

header .header_nav .paaad {
    padding: 0 !important;
    margin: 0 !important;
}

header .header_nav {
/*     background-color: #0a0a0a;
    opacity: 0.8; */
/*     box-shadow: 1px 1px 8px gray; */
    position: fixed;
    top: 5px;
    z-index:4 important;
    width: 100%;
    font-family: 'Dancing Script', cursive;



}

header .header_nav .navbar .navbar-brand {
    font-size: 33px;
    font-weight: 500;
    color: #fff;

}



header .header_nav .navbar .navbar-brand span {
    color: red;
}

header .header_nav .navbar .collapse {
    margin-left: 30%;
    padding: 0;
}

header .header_nav .navbar .collapse ul li a:hover {
    color: red;
}

header .header_nav .navbar .collapse ul li a {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin-left: 30px;
    margin-top: 5px;

}

/*--------------HEader_nav end---------------*/

/*--------------HEader_text start ---------------*/
header .header_text .banner-text {
    margin-top: 20%;
}




header .header_text .banner-text h3 {
    font-size: 30px;
    font-weight: 600;
    font-family: 'Dancing Script', cursive;
    color: #fff;
}

header .header_text .banner-text h1 {
    font-size: 70px;
    font-weight: 700;
    font-family: 'Dancing Script', cursive;
    color: #fff;

    transition: all 3s ease;
    margin: 0;
}

header .header_text .banner-text p {
    font-size: 30px;
    font-weight: 500;

    color: #fff;

}

header .header_text .banner-text .typing {
   color: red;


}

header .header_text .banner-text p .adver {
    opacity: 0;

    transition: all 3s ease;

    color: #fff;

    animation: anim 5s infinite ease;

}

header .header_text .bottom .fa {
    font-size: 40px;
    color: red;
    margin-top: 70px;
    padding: 0 10px 5px 10px;
    background: linear-gradient(40deg, #3a0707, red);
    border-radius: 50%;
    transition: background 0.8s ease;
}

header .header_text .bottom .fa:hover {
    background: linear-gradient(-40deg, #3a0707, red);
    color: black;
}

@keyframes anim {
    to {
        opacity: 0;
        color: #fff;
    }

    from {
        opacity: 1;
        color: red;
        transform: translate(0);

    }
}


header .header_text .banner-text p:hover .coder {
    opacity: 1;
    transform: translate(0);
    color: red;
}

header .header_text .banner-text p:hover .adver {
    opacity: 1;
    transform: translate(0);
    color: red;
}

/*--------header  media responsive-------*/
/*XL LG 992-1300*/
@media (max-width:1200px) {
    header .header_nav .navbar .collapse {
        margin-left: 20%;
    }

    header .header_nav .navbar .collapse ul li a {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        margin-left: 20px;
        margin-top: 5px;

    }
}

/* MD 768-992*/
@media (max-width:992px) {
    header .header_nav {
        width: 100%;

    }

    header .navbar .collapse ul li a:hover {
        color: red;
    }

    header .navbar .collapse ul li a {
        color: #fff !important;
        font-size: 15px !important;
        font-weight: bold;
        line-height:7px;
        margin:0;
    }

    header .header_text .md-none {
        display: none;
    }
}

/*SM 567-768*/


/* exSM 0-567*/
@media (max-width:576px) {
    header .header_nav {
        width: 100%;
    }
    header .navbar .collapse{
        margin-left:0;
    }
     header .navbar .collapse ul li a {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: bold;
        line-height:15px;
         font-size:13px;
         margin:0;
         padding:0;
    }

    header .header_nav .navbar .navbar-brand {
        font-size: 20px;
    }

    header .header_nav .navbar .navbar-toggler-icon {
        font-size: 10px;
        background-color: red;
        padding: 10px;
        border-radius: 15px;
    }

    header .header_text .banner-text h3 {
        font-size: 17px;
    }

    header .header_text .bottom .fa {
        display: none;
    }


    header .header_text .banner-text h1 {
        font-size: 35px;
        font-weight: bold;
    }

    header .header_text .banner-text p {
        font-size: 15px;
    }

    header .header_text .banner-text {
        margin-top: 25%;
    }

    header {
        height: 100vh !important;
   background-size:cover;
    }

    header .header_fon {
        height: 300px;
    }

    header .header_text .md-none {
        display: none;
    }
section .about .img {
    width: 100px !important;
    height:100px !important;
    overflow: hidden;
    border-radius: 50% !important;
    box-shadow: 1px 1px 6px gray;
    position: relative;
margin-left:100px;
}
section .about .img img {
    width: 100% !important;
    height:100% !important;
        border-radius: 50% !important;
}

}



/*-------------------HEader_nav end------- ---------------*/

/*-------------------section start------- ---------------*/
section .about {
    padding: 30px 0 40px 0;
    transition: 0.9s ease;
}

section .about .afisha {
    text-align: center;
    font-weight: 700;
    color: rgb(83, 81, 81);
    font-size: 25px;
    margin: 30px 0 50px 0;
    position: relative;
}

section .about .afisha::after {
    content: 'About me';
    width: 10%;
    font-size: 14px;
    color: red;
    height: 4px;
    background: red;

    border-radius: 30px;
    position: absolute;
    transform: translate(-113px, 30px);

}

section .about .img {
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 1px 1px 6px gray;
    position: relative;
}

section .about .img h2 {
    position: absolute;
    transform: translateY(0) translateX(57%);
    color: red;
    transition: 1.5s ease;
}

section .about .img:hover h2 {
    position: absolute;
    transform: translateY(-150px) translateX(57%);
    color: red;

}

section .about .img:hover ul {
    position: absolute;
    transform: translateY(-110px) translateX(65%);
    color: red;
    transition: 2s ease;

}

section .about .img ul {
    display: flex;
    transform: translateX(65%) translateY(0);
}

section .about .img ul li {
    list-style: none;
}

section .about .img ul li a .fa {
    padding: 10px 10px;
    font-size: 30px;
    margin: 0 20px 0 0;
    border-radius: 40px;
    color: red;
    transition: 0.8s ease;

}

section .about .img ul li a .fa:hover {
    transform: scale(1.3);
}



section .about .img img {
    width: 100%;
    transition: 2s ease;

}

/*-----------about right-------------*/
section .about .text {
    padding: 20px 0 20px 20px;
}

section .about .text h2 {
    font-size: 28px;
    font-weight: 500;
    color: rgb(83, 81, 81);
}

section .about .text h2 .coder {
    font-size: 24px;
    color: red;
    animation: animat 4s infinite ease;
}

section .about .text h2 .adv {
    font-size: 24px;
    color: red;
    animation: animat 5s infinite ease;
}

@keyframes animat {
    0% {
        color: gray;
    }

    50% {
        color: red;
    }

    70% {
        color: crimson;
    }

    100% {
        color: gray;
    }
}

section .about .text p {
    font-weight: 400;
    margin: 15px 0 30px 0;
}

section .about .text .dow {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    padding: 7px 20px;
    background: red;
    border: 2px solid red;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 20px;
    transition: 0.6s ease;
}

section .about .text .dow:hover {
    background: none;
    color: red;
    font-weight: 600;
}

/*-----------section media responsive--------------*/
/* MD 768-992*/
@media (max-width:992px) {
    section .about .img {
        width: 100%;
        height: 300px;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 1px 1px 6px gray;
    }

    section .about {
        padding: 30px 0 20px 0;
    }
}

/* SM  0-576*/
@media (max-width:576px) {
    section .about .afisha {
        text-align: center;
        font-weight: 700;
        color: rgb(83, 81, 81);
        font-size: 18px;
        margin: 30px 0 50px 0;
        position: relative;
    }

    section .about .afisha::after {
        content: 'About me';
        width: 50%;
        font-size: 10px;
        color: red;


        height: 2px;
        background: red;

        border-radius: 30px;
        position: absolute;
        transform: translate(-120px, 30px);
        align-items: center;

    }

    section .about {
        padding: 20px 0 15px 0;
    }

    section .about .img {
        width: 100%;
        height: 200px;
    }

    section .about .text h2 {
        font-size: 20px;
    }

    section .about .text h2 .coder {
        font-size: 17px;
    }

    section .about .text h2 .adv {
        font-size: 17px;
    }

    section .about .text p {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        margin: 8px 0 15px 0;
    }

    section .about .text .dow {
        font-size: 10px;
        margin-left: 30%;
    }

    section .about .img h2 {
        font-size: 15px;
    }

    section .about .img:hover h2 {
        transform: translateY(-80px) translateX(75%);
    }

    section .about .img:hover ul {
        transform: translateY(-60px) translateX(37%);
    }

    section .about .img ul {
        display: flex;
        transform: translateX(37%) translateY(0);
    }

    section .about .img ul li {
        list-style: none;
    }

    section .about .img ul li a .fa {
        font-size: 14px;
        margin: 0 10px 0 0;
    }
}

/*-----------------------SECTION end-------------------------*/




/*-----------------------SECTION 2 START-------------------------*/

section .tajriba {
    padding: 30px 0 50px 0;
    transition: 0.9s ease;
}

section .tajriba h2 {

    text-align: center;
    font-weight: 700;
    color: rgb(83, 81, 81);
    font-size: 25px;
    margin: 30px 0 70px 0;
    position: relative;
}

section .tajriba h2::after {
    content: 'Creative me';
    font-size: 13px;
    margin-bottom: 10px;
    color: red;
    width: 10%;
    height: 4px;
    background: red;
    border-radius: 30px;
    position: absolute;
    transform: translate(-113px, 30px);


}
section .tajriba .multic-img img{
    width: 100%;
    height: 100%;
}
section .tajriba .multic-img{
    width: 70%;
    height: 300px;
    margin: auto;
}
section .tajriba .text h3 {
    font-size: 25px;
    font-weight: 500;
    color: rgb(83, 81, 81);

}

section .tajriba .text .dow {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    padding: 5px 25px;
    background: red;
    border: 2px solid red;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 20px;
    transition: 0.6s ease;
}

section .tajriba .text .dow:hover {
    background: none;
    color: red;
    font-weight: 600;
}

section .tajriba .diagramma .info {
    margin: 20px 0;
}

section .tajriba .diagramma .info .chart span {
    font-size: 20px;
    font-weight: 400;
    color: rgb(83, 81, 81);
}

section .tajriba .diagramma .info .chart .foiz {
    margin-left: 82%;
}

section .tajriba .diagramma .info .chart .foiz2 {
    margin-left: 85%;
}

section .tajriba .diagramma .info .chart .foiz3 {
    margin-left: 71%;
}

section .tajriba .diagramma .info .info-chart {
    width: 100%;
    height: 6px;
    background: lightgray;
    border-radius: 20px;
    position: relative;

}

section .tajriba .diagramma .info .info-chart::after {
    content: '';
    width: 80%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    border-radius: 25px;
    position: absolute;

}

section .tajriba .diagramma .info .css::after {
    content: '';
    width: 60%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    border-radius: 25px;
    position: absolute;

}

section .tajriba .diagramma .info .boot::after {
    content: '';
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    border-radius: 25px;
    position: absolute;

}

/*-----------------------SECTION  end-------------------------*/




/*-----------------------SECTION 2 START-------------------------*/

/*--------section 2 responsive-----------*/
/*SM 0-576*/
@media (max-width:576px) {
    section .tajriba, .xizmat, .about{
        padding-bottom: 20px;
    }
    section .tajriba h2 {

        text-align: center;
        font-weight: 700;
        color: rgb(83, 81, 81);
        font-size: 18px;
        margin: 10px 0 40px 0;
        position: relative;
    }

    section .tajriba h2::after {
        content: 'Creative me';
        font-size: 10px;
        margin-bottom: 10px;
        color: red;
        width: 50%;
        height: 2px;
        background: red;
        border-radius: 30px;
        position: absolute;
        transform: translate(-120px, 30px);


    }
    section .tajriba .multic-img img{
        width: 100%;
        height: 100%;
    }
    section .tajriba .multic-img{
        width: 100%;
        height: 150px;
        margin: auto;
    }

    section .tajriba .diagramma .info .chart span {
        font-size: 15px;
        font-weight: 400;
        color: rgb(83, 81, 81);
    }

    section .tajriba .diagramma {
        margin-left: 20px;
    }

    section .tajriba .diagramma .info .chart .foiz {
        margin-left: 80%;
    }

    section .tajriba .diagramma .info .chart .foiz2 {
        margin-left: 80%;
    }

    section .tajriba .diagramma .info .chart .foiz3 {
        margin-left: 65%;
    }

    section .tajriba .diagramma .info {
        width: 80%;
        justify-content: center;
        margin-left: 5%;

    }

    section .tajriba .text h3 {
        font-size: 20px;
    }

    section .tajriba .text p {
        font-size: 15px;
        line-height: 18px;
    }



    section .tajriba .text {
        margin-left: 20px;
    }

    section .tajriba .text .dow {
        font-size: 14px;

        padding: 5px 20px;

    }

}

/*-----------------------------SECTION 2 end-------------------*/

/* --------------------------------------------------------------------------------------- */

/*-----------------------------SECTION proect start-------------------*/
section .proects {
    padding: 40px 0;
}

section .proects h2 {

    text-align: center;
    font-weight: 700;
    color: rgb(83, 81, 81);
    font-size: 25px;
    margin: 30px 0 70px 0;
    position: relative;
}

section .proects h2::after {
    content: 'Proect me';
    font-size: 13px;
    margin-bottom: 10px;
    color: red;
    width: 13%;
    height: 4px;
    background: red;
    border-radius: 30px;
    position: absolute;
    transform: translate(-140px, 30px);
}

section .proects img {

    width: 100%;
    height: 100%;
    z-index:-100 !important;

}

section .proects .proect {
    text-align: center;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 1px 1px 5px gray;
}

section .proects .proect .foncha {
    transition: 0.8s ease;
}

section .proects .proect:hover .foncha {
    width: 100%;
    height: 100%;
    background: #161616c9;
    opacity: 0.8;
    text-align: center;
    padding-top: 80px;
    position: absolute;
    transform: translateY(-200px);
}

section .proects .proect:hover a {
    opacity: 1;

}

section .proects .proect a {


    padding: 10px 20px;
    background: red;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    transition: 0.8s ease;
    opacity: 0;
}

section .proects .proect a:hover {
    border: 2px solid red;
    background: none;
}

section .proects .proect-name h3 {
    text-align: center;
    font-size: 18px;
    color: rgb(59, 59, 59);
    margin: 15px 0;
}

section .proects .proect-name p {
    text-align: center;
    font-size: 15px;
    color: rgb(112, 111, 111);

}

/* Responsive section proeect */
/* ex sm0576 */
@media (max-width:576px) {
    section .proects .proect {
        text-align: center;
        width: 70%;
        height: 140px;
        background-size: cover;
        background: url(../img/e760bf47656103.5880cb8c4e1ef.jpg) center center no-repeat;
        position: relative;
        margin: auto;
    }

    section .proects .proect:hover .foncha {
        transform: translateY(-140px);
    }

    section .proects .proect a {
        padding: 4px 10px;
    }

    section .proects h2 {
        font-size: 18px;
        margin-bottom: 40px;
    }

    section .proects h2::after {
        font-size: 10px;
        margin-bottom: 10px;
        width: 50%;
        height: 2px;
        transform: translate(-120px, 30px);
    }

    section .proects .proect-name h3 {
        text-align: center;
        font-size: 15px;
        color: rgb(59, 59, 59);
        margin: 10px 0;
    }

    section .proects .proect-name p {
        text-align: center;
        font-size: 12px;
        color: rgb(112, 111, 111);

    }
}

/*-----------------------------SECTION proect start-------------------*/




/*-----------------------------SECTION 3 START-------------------*/

section .xizmat {

    padding: 40px 0 60px 0;
}

section .xizmat h2 {

    text-align: center;
    font-weight: 700;
    color: rgb(83, 81, 81);
    font-size: 25px;
    margin: 10px 0 20px 0;
    position: relative;
}

section .xizmat h2::after {
    content: 'Services';
    font-size: 13px;
    margin-bottom: 10px;
    color: red;
    width: 8%;
    height: 4px;
    background: red;
    border-radius: 30px;
    position: absolute;
    transform: translate(-87px, 30px);

}

section .xizmat .card-icon {
    padding: 20px 10px;
    background: #333333;
    border-radius: 5px;
    transition: 0.9s ease;
    margin-top: 60px;
}

section .xizmat .card-icon:hover {
    background: red;
}

section .xizmat .card-icon:hover .fa {
    color: #fff;
}

section .xizmat .card-icon .fa {
    font-size: 70px;
    color: red;
    margin: 10px 0 20px 0;
}

section .xizmat .card-icon h4 {
    color: #fff;
}

section .xizmat .card-icon p {
    color: #fff;
}

/*-----------------section 3 responsive------------------*/



/*-----------------section 3 responsive------------------*/
/* SM 0-576 */
@media (max-width:576px) {
    section .proects {
        padding: 0 0 0 0;
    }
    section .xizmat{
        padding: 20px 0 15px 0;
    }
    section .xizmat .card-icon .fa {
        font-size: 40px;

    }

    section .xizmat h2 {

        text-align: center;
        font-weight: 700;
        color: rgb(83, 81, 81);
        font-size: 18px;
        margin: 10px 0 10px 0;
        position: relative;
    }

    section .xizmat h2::after {
        content: 'Services';
        font-size: 10px;
        margin-bottom: 10px;
        color: red;
        width: 50%;
        height: 2px;
        background: red;
        border-radius: 30px;
        position: absolute;
        transform: translate(-116px, 30px);

    }
    section .xizmat .card-icon{
        width: 70%;
        height: 140px;
        margin: auto;
        margin-top: 30px;
        padding: 10px 0;
        box-sizing: border-box;
    }
    section .xizmat .card-icon h4 {
        font-size: 14px;
        margin-bottom:5px;
    }

    section .xizmat .card-icon p {
        font-size: 10px;
        line-height: 10px;
    }


}

/*-----------------------SECTION 3 END-------------------------*/


/*-----------------------FOOTER START-------------------------*/
footer form {
    padding: 30px 0 50px 0;
}

footer form h2 {

    text-align: center;
    font-weight: 700;
    color: #333333;
    font-size: 25px;
    margin: 10px 0 20px 0;
    position: relative;
    margin-bottom: 70px;
}

footer form h2::after {
    content: 'Contact';
    font-size: 13px;
    margin-bottom: 10px;
    color: red;
    width: 6%;
    height: 4px;
    background: red;
    border-radius: 30px;
    position: absolute;
    transform: translate(-69px, 30px);

}

footer form .aloqa .text h3 {
    font-size: 25px;
    font-weight: 400;
    color: #333333;
}

footer form .aloqa .text p {
    font-size: 15px;
    font-weight: 600;
}

footer form .aloqa .name {
    margin: 15px 0;
}

footer form .aloqa .name .fa {
    font-size: 30px;
    color: red;
    margin-right: 20px;
}

footer form .aloqa .name h5 {
    font-size: 18px;
    margin: 0;
}

footer form .aloqa .name a {
    font-size: 15px;
    margin: 0;
    color: #333333;
    text-decoration: none;
}

/*----------------footer form right----------------*/

footer .messa {
    font-size: 20px;
    font-weight: 400;
    color: #333333;
}

footer .form {
    margin-top: 10px;
}

footer form .form input {
    width: 100%;
    padding: 10px 0;
    margin: 15px 0;
}


footer form .form .input-message input {
    padding-bottom: 50px;
}

footer form .form button {
    background: red;
    border: 2px solid red;
    color: #fff;
    font-size: 17px;
    padding: 5px 30px;
    border-radius: 7px;
    transition: 0.6s ease;
}

footer form .form button:hover {
    background: none;
    color: red;
}

footer .footer_end {
    padding: 20px 0 10px 0;
    background: #333333;
    text-align: center;
    font-size: 17px;
    align-items: center;
}

footer .footer_end span {
    color: red;
    font-size: 16;
    font-style: italic;
}

/*------------footer responsive---------------*/
/*SM 0-576*/
@media (max-width:576px) {

    footer form h2 {

        text-align: center;
        font-weight: 700;
        color: #333333;
        font-size: 25px;
        margin: 10px 0 20px 0;
        position: relative;
        margin-bottom: 70px;
    }

    footer form h2::after {
        content: 'Contact';
        font-size: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: red;
        width: 50%;
        height: 2px;
        background: red;
        border-radius: 30px;
        position: absolute;
        transform: translate(-120px, 30px);

    }

    footer form h2 {

        text-align: center;
        font-weight: 700;
        color: #333333;
        font-size: 25px;
        margin: 10px 0 20px 0;
        position: relative;
        margin-bottom: 40px;
    }

    footer form .aloqa .text h3 {
        font-size: 20px;
        font-weight: 400;
        color: #333333;
    }

    footer form .aloqa .text p {
        font-size: 13px;
        font-weight: 600;
        line-height: 17px;
    }

    footer form .aloqa .name {
        margin: 15px 0;
    }

    footer form .aloqa .name .fa {
        font-size: 27px;
        color: red;
        margin-right: 20px;
    }

    footer form .aloqa .name h5 {
        font-size: 18px;
        margin: 0;
    }

    footer form .form input {
        width: 100%;
        padding: 3px 0;
        margin: 10px 0;
    }

    footer form .form .input-message input {
        padding-bottom: 20px;
    }

    footer .footer_end {
        padding: 5px 0 3px 0;
        background: #333333;
        text-align: center;
        font-size: 13px;
        align-items: center;
    }

    footer .footer_end p {
        margin: 0;
    }

    footer .footer_end span {
       
        font-size: 12px;
        font-weight: 200;
        font-style: italic;
    }
}

/*-----------------------FOOTER START-------------------------*/