.bodyweb {
    /* bg2 */
    /* width: 100%;
    overflow: hidden; */
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(7,38,146,1) 71%, rgba(4,82,245,1) 100%);
}

.animate_body {
    position: absolute;
    width: 100%;
    height: 3px;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #002b9d, #34ffea);
    animation: animateLan1 2s linear infinite;
}

/*  Logo */
.container .logo {
    border-radius: 50%;
    color: aliceblue;
    border: rgba(4,82,245,1) solid 1px;
    font-size: 39px;
    /* padding: 20px; */
    padding: 5px 20px;
    box-shadow:3px 3px 10px rgb(119, 118, 118);
    margin: 20px;
}

/*  about informaiton */
.about_animation_name {
    /* color: white; */
    padding: 30px 0;
}
.about_animation_name p {
    font-weight: 700;
    font-size: 30px;
    color: rgb(70, 143, 244);
    animation: move4;
    animation-duration: 2s;
    animation-iteration-count: calc();
}
.about_animation_name p span {
    font-size: 35px;
    font-weight: 700;
    color: rgb(70, 252, 176);
    /* animation: move2;
    animation-duration: 2s;
    animation-iteration-count: calc(); */
}

.nav_links {
    position: relative;
}

.collapse .nav_links::before {
    content: "";
    /* position: relative; */
    position: absolute;
    height: 1px;
    width: 0;
    left: 8px;
    bottom: 5px;    
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    transition: all 0.6s;
}

.collapse .nav_links:hover::before { 
    /* content: ""; */
    /* position: absolute; */
    /* height: 3px; */
    width: 50%;
    /* height: 3px; */

}

/* style intro */
.cursor_ani {
    /* height: 100%; */
    height: 10px;
    width: 2px;
    background-color: #4fc3dc;
    color: #4fc3dc;
}
/* style intro */

/* style icon social */
.icon_social .social_item svg {
    width: 30px;
    height: 30px;
}


/* style icon social */

/* style dots animation */

.container_dots_ani .dot {
    /* transform: translateY(300px); */
    z-index: 1;
    /* position: absolute; */
    width: 15px;
    height: 15px;
    background-color: #4fc3dc;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px #4fc3dc, 0 0 100px #4fc3dc;
    animation: animationDots 12s linear infinite;
    animation-duration: calc(60s / var(--i));
}



@keyframes animationDots {
0% {
    transform: translateY(0) scale(0);
}
100% {
    transform: translateY(-399px) scale(0.3);
}
}
/* style dots animation */


/*  style set_language */

.div_set_language {
    /* position: relative; */
    /* margin-top: 20px; */
}

.set_language {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 5px;
    /* width: 80px; */
    z-index: 10;
    text-decoration: none;
    color: #34ffea;
    background-color: #001632;
    font-size: 20px;
    padding: 20px 50px;
    font-weight: 700;
    box-shadow: 0 20px 50px rgba(255 255 255 / 5%);
    transition: all 0.5s;
}

.set_language:hover {
    /* border: #34ffea solid 2px; */
    /* border-radius: 8px; */
    /* background-color: #043370; */
    box-shadow: 1px 5px 10px rgba(0, 255, 128, 0.3), 0px 0px 0px 5px rgba(0, 255, 128, 0.2);
}

.set_language::before {
    z-index: 20;
    position: absolute;
    content: "";
    width: 50%;
    top: 2px;
    left: 2px;
    bottom: 2px;
    background-color: rgb(142, 255, 240 / 10%);
}

.set_language p {
    margin: 0;
}

.set_lan_style img {
    /* width: 30px; */
    height: 30px;
    border-radius: 3px;
}

.set_lan_style p {
    font-size: 16px;
    font-weight: 700;
}


.set_language span:nth-child(1){
    /* display: block; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #002b9d, #34ffea);
    animation: animateLan1 2s linear infinite;
}
@keyframes animateLan1 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.container_languages p {
    color: rgb(70, 252, 176);
    font-size: 18px;
    font-weight: 600;
    /* margin-bottom: 0px; */
}

.show {
    transition: all 0.5s;
}

.drop_menu {
    /* background-color: rgb(10, 10, 126); */
    background-color: #040d50;
    border: #040d50;

}

.drop_menu .drop_items {
    /* margin-left: 10px; */
    padding-left: 5px;
    text-decoration: none;
    color: aliceblue;
    position: relative;
}

.drop_menu .drop_items:hover {
    opacity: 0.6;
    /* transform: matrix3d(-3px); */
}

/*      Skill */
.container .nav-tabs .nav-item {
    font-size: 20px;
    font-weight: 700;
}

.container .nav-tabs .nav-item .active {
    color: rgb(210, 228, 245);
}

.container .nav-tabs .nav-item .nav-link:hover {
    border: none;
    color: rgb(210, 228, 245);
}

.container .nav-tabs .nav-item .nav-link:active {
    border: none;
}

.container .nav-tabs .nav-item .nav-link:focus {
    border: none;
}

.container .nav-tabs .nav-item .nav-link:focus-visible {
    border: none;
}

.container .nav-tabs {
    border: none;
}

.container .nav-tabs .active{
    border: none;
    background-color: transparent;
    
}

.style_border {
    border-radius: 12px;
}

.item_skill {
    animation: move3;
    animation-duration: 1s;
    animation-iteration-count: calc();
    padding: 12px;
    margin: 5px 0;
}

.item_skill:hover {
    /* background-color: #040d50; */
    background-color: #5c84e3;
    border-radius: 15px;
    color: rgb(233, 237, 241);
    transition: all 0.6s;
}

.content_skill {
    margin-top: 5px;
}

.content_skill span{
    font-size: 20px;
    font-weight: 600;
    color: rgb(227, 237, 247);
}


/*  Transition drop_items */

/* .drop_menu .drop_items::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 0;
    left: 5px;
    bottom: -2px;    
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);

}

.drop_menu .drop_items:hover::before {
    width: 69%;
    transition: all 0.8s;

} */


/*  infor items */
.infor .infor_items {
    /* min-height: 100px; */
    height: 120px;
    border-radius: 10px;
    box-shadow: 3px 3px 8px rgb(142, 142, 147);
    transition: all 0.6s;
}

.infor .infor_items:hover {
    transform: translateY(-5px);
    box-shadow: 6px 6px 10px rgb(142, 142, 147);
}

.infor .infor_item1 {
    background-color: #073ab3;

}

.infor .infor_item2 {
    background-color: #073ab3;

}

.infor .infor_item3 {
    background-color: #073ab3;

}

.infor .infor_items a {
    text-decoration: none;
    /* font-size: 25px; */
    padding: 10px 15px;
    color: rgb(192, 200, 241);

    
}

.infor .infor_items span {
    font-size: 25px;
    /* padding: 10px 15px; */
}

/*      slider */
.list .item img {
    height: 80px;
    padding: 0 8px;
}

.slider {
    overflow: hidden;
    /* position: relative; 
    transition: opacity 0.5s ease; */
    /* opacity: 0.5; */
    opacity: 0.9;
    position: relative;
}

.slider .list .item img{
    border-radius: 15px;
}

.slider::before {
    content: "";
    position: absolute;
    /* background: rgb(11,39,86); */
    /* background: linear-gradient(90deg, rgba(11,39,86,1) 0%, rgba(11,39,86,1) 74%, rgba(38,70,123,1) 100%); */
    /* background: linear-gradient(to right,  rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); */
    background: linear-gradient(to right,  rgba(134, 134, 232, 0.3) 0%,rgba(37, 8, 8, 0) 100%);
    top: 0;
    left: 0;
    height: 80px;
    width: 22px;
    z-index: 2;
    /* opacity: 0.3; */
}
.slider::after {
    content: "";
    position: absolute;
    /* background: rgb(11,39,86); */
    /* background: linear-gradient(90deg, rgba(11,39,86,1) 0%, rgba(11,39,86,1) 74%, rgba(38,70,123,1) 100%); */
    /* background: linear-gradient(to right,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); */
    background: linear-gradient(to right,  rgba(83, 83, 236, 0.3) 0%,rgba(218, 214, 214, 0) 100%);
    /* background: linear-gradient(to right,  rgba(255,255,255,0.5) 0%,rgba(74, 98, 233, 0) 100%); */
    top: 0;
    right: 0;
    height: 80px;
    width: 50px;
    transform: rotateZ(180deg);
    z-index: 2;
    /* opacity: 0.3; */
}

.list {
    /* overflow: hidden; */
    animation: slide 120s infinite linear;
}

/*      back to top */
#backToTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    bottom: 15px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #05113e; /* Set a background color */
    color: rgb(217, 223, 243); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 15px; /* Rounded corners */
    transition: 0.5s all;
    /* box-shadow: #e2e7f4 1px 1px 8px; */
}

#backToTop svg {
    width: 25px;
}   
  
#backToTop:hover {
    color: white;
    box-shadow: #5c84e3 2px 2px 5px;
    background-color: #000000; /* Add a dark-grey background on hover */
}


/* .list {
    white-space: nowrap;
} */

/* slider */



/*      animation
Keyframes 
    items
*/
@keyframes move1 {
    from {
        transform: translateX(-200px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }

}

@keyframes move2 {
    from {
        transform: translateX(200px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }

}

@keyframes move3 {
    from {
        opacity: 0.5;
        scale: 0.5;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes move4 {
    from {
        transform: translateY(100px);
        opacity: 0.3;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }

}

@keyframes slide {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateX(calc(-100% * 2.5));
    }
}

.infor .item_col1 {
    animation: move1;
    /* transition: all 1s; */
    animation-duration: 2s;
    animation-iteration-count: calc();

}

.infor .item_col2 {
    animation: move2;
    /* transition: all 1s; */
    animation-duration: 2s;
    animation-iteration-count: calc();

}




/*  footer */
.contai_footer .footer_lists li {
    /* text-decoration: none; */
    color: aliceblue;
    list-style: none;

}

.contai_footer .footer_lists li a {
    text-decoration: none;

}

.des_by span {
    color: rgb(187, 220, 248);

}