/* All Selector using for default margin,padding: 0px; */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: sans-serif;
}
html {
    scroll-behavior: smooth;
}

body {
    transition: all 0.5s;
}
/* Root Color Start */
:root {
  --color-primary: #fc5c65;
  --color-secondary: #FFFFFF;
  --color-thard: #000000;
  --color-fourth: #2980b9;
  --animation_color: conic-gradient(red, green, blue, red);
  --color-btn: #2f3640;
  --color-count: #ccc;
  --table-txt-color: #777;
  --color-bg: #1a1a1a;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-html: #E44D25;
  --css-logo-color: rgb(116, 192, 252);
  --js-logo-color: rgb(255, 212, 59);
  --git-logo-color: #f05539;
  --bootstarp-logo-color: #7618f7;
  --color-transparent: transparent;
  --color-footer: #202325;
}
/* Root Color End */

/* Nav Section CSS Start */
header{
    background-color: var(--color-secondary);
    position: sticky;
    top: 0px;
    left: 0px;
    box-shadow: 0px 0px 5px var(--color-bg);
    z-index: 10000;
}
.nav_items{
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: center;
    /* color: #FFF; */
    width: 100;
}
nav div{
    display: flex;
    justify-content: space-evenly;
    padding: 15px 0px 15px 0px;
    /* background-color: #596275; */
}
/* .nav_items ul{} */
.nav_items li{
    padding-left: 20px;
}
.nav_items li a{
    text-decoration: none;
    /* color: #d1d8e0; */
    color: var(--color-thard);
    /* font-size: ; */
    /* font-family: cursive; */
    font-size: 15px;
    font-weight: 600;
    transition: all 0.5s;
}
.nav_logo + section{
    display: flex;
}
.nav_logo a{
    text-decoration: none;
    color: var(--color-primary);
    /* color: black; */
    font-family: cursive;
    font-size: 25px;
}
.nav_button a[href="#login"]{
    /* color: #d1d8e0; */
    color: var(--color-thard);
    padding: 10px 40px 10px 40px;
    cursor: pointer;
    font-size: 14px;
    /* font-family: sans-serif; */
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--color-thard);
    border-radius: 24px 0px 24px 0px;
    /* outline: none; */
    transition: all 0.5s;
    background-color: var(--color-secondary);
    /* margin-top: 1px; */
    display: inline-block;
}
.nav_button a[href="#login"]:hover{
    border-radius: 0px 24px 0px 24px;
    color: var(--color-primary);
    background-color: var(--color-secondary);
    /* letter-spacing: 1px; */
}
.nav_items li a:hover{
    color: var(--color-primary);
    letter-spacing: 1px;
}
/* Nav Section CSS End */

/* Main Section CSS Start */
main section{
    height: 92vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.main_left_content{
    width: 400px;
    /* background-color: #fc5c65; */
}
.main_left_content .main_inside_contect :first-child{
    text-transform: uppercase;
    font-size: 18px;
}
.main_left_content .main_inside_contect h2{
    font-size: 50px;
    margin: 8px 0px 8px 0px;
}
.main_left_content div p + h2 + p{
    font-size: 18px;
    /* font-weight: 500; */
    line-height: 22px;
    /* font-style: italic; */
}
.main_btn_section{
    margin-top: 35px;
}
.main_btn_section a{
    text-decoration: none;
    color: var(--color-thard);
    margin-right: 10px;
    font-size: 15px;
    padding: 15px 20px 15px 20px;
    border: 1px solid var(--color-thard);
    border-radius: 5px;
    /* font-weight: 500; */
    transition: all 0.5s;
}
.main_btn_section :first-child{
    background-color: var(--color-btn);
    color: var(--color-secondary);
}
.main_btn_section :first-child:hover{
    background-color: var(--color-secondary);
    box-shadow: 5px 10px 5px var(--color-shadow);
    color: var(--color-btn);
    margin-top: 5px;
}
.main_btn_section a + a:hover{
    background-color: var(--color-btn);
    box-shadow: 5px 10px 5px var(--color-shadow);
    color: var(--color-secondary);
}
.main_right_content{
    width: 400px;
    /* background-color: #fc5c65; */
}
.img_parent img[alt="developerrayhan"]{
    border-radius: 100%;
    border: 6px solid var(--animation_color);
    animation: img_border_animation 3s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) infinite;
    /* animation-timing-function: ease-in-out; */
}
.img_parent{
    position: relative;
    text-align: center;
}
/* Main Section CSS End */

/* About Section CSS Staart */
.about_section{
    display: flex;
    justify-content: space-between;
}
/* About Section CSS End */

/* Go To Top Button CSS Start */
a.top_btn i{
    margin-top: 10px;
    border: 1px solid var(--color-transparent);
    font-size: 28px;
    background-color: var(--color-primary);
    padding: 10px 10px 10px 10px;
    position: sticky;
    left: 97.5%;
    top: 94%;
    transition: all 0.5s;
    /* bottom: 0px; */
    /* display: inline-block; */
    /* background-color: var(--color-primary); */
}
a.top_btn i:hover{
    background-color: var(--color-transparent);
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary);
    transform: translateY(-8px);
}
/* Go To Top Button CSS End */

/* Project Section CSS Start */
.project_section{
    /* text-align: center; */
    max-width: 61.3%;
    /* background-color: #2980b9; */
    margin: auto;
}
.project_section span{
    text-transform: uppercase;
    font-size: 17px;
    color: var(--color-secondary);
    margin-top: 100px;
    display: inline-block;
    font-weight: 600;
}
.project_section span + h2{
    font-size: 36px;
	margin: 8px 0px 8px 0px;
    color: var(--color-secondary);
    /* display: inline-block; */
    /* background-image: url(./image/undefined_Imgur.gif); */
}
.project_table{
    margin-top: 65px;
    display: flex;
    justify-content: space-between;
}
.table{
    height: 205px;
    width: 47.5%;
    transition: all 0.5s;
}
section[style="background-color: var(--color-bg); margin-top: 3px; padding-bottom: 105px;"]:hover .project_section .project_table .table{
    box-shadow: 5px 10px 5px var(--color-shadow);
}
.table:hover{
    box-shadow: -5px -10px 5px var(--color-shadow) !important;
}
.table_items{
    margin-left: 20px;
}
.table .table_items :first-child.count_number_in_table{
    margin: 20px 0px 15px 0px;
    display: inline-block;
    color: var(--color-count);
}
.table_items h3{
    font-size: 28px;
    margin-bottom: 9px;
    color: var(--color-count);
    background-image: url(./image/undefined_Imgur.gif);
    display: inline-block;
}
.table_items p {
    font-size: 15px;
    margin-bottom: 15px;
    color: var(--table-txt-color);
    font-weight: 600;
}
.name_of_useing span{
    margin: 8px 12px 0px 0px !important;
    font-size: 14px;
    background-color: var(--table-txt-color);
    text-transform: capitalize;
    padding: 3px 8px 3px 8px;
    border-radius: 20px;   
}
.name_of_useing a{
    text-decoration: none;
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: var(--color-bg);
    font-size: 17px;
    font-weight: 600;
    padding: 10px 10px 10px 10px;
    position: relative;
    z-index: 1;
    transition: all 0.5s;
    overflow: hidden;
    /* display: inline-block; */
    float: right;
    margin-right: 13px;
    margin-top: -3px;
}
.name_of_useing a::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 0%;
    background-color: var(--color-bg);
	z-index: -1;
    transition: all 0.3s;
}
.name_of_useing a::after{
	content: "";
	position: absolute;
	bottom: 0px;
	right: 0px;
	height: 100%;
	width: 0%;
	background-color: var(--color-bg);
	z-index: -1;
	transition: all 0.3s;
}
.name_of_useing a:hover{
    color: var(--color-secondary);
    transform: translateY(-5px);
}
.name_of_useing a:hover::before{
    width: 50%;
}
.name_of_useing a:hover::after{
    width: 50%;
}
/* Projects Section CSS End */

/* Skills Section CSS Start */
.skills_section{
    margin-top: 150px;
}
.skills_txt span{
    text-transform: uppercase;
    font-size: 17px;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 600;
}
.skills_txt h2{
    font-size: 28px;
}
.skills_table{
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}
.s_table{
    border: 1px solid var(--table-txt-color);
    height: 160px;
    width: 350px;
    border-radius: 8px;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px var(--color-bg);
    position: relative;
    z-index: 1;
}
.s_table::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 0%;
    background-color: var(--color-bg);
    border-radius: 8px;
    transition: all 0.5s;
    z-index: -1;
}
.s_table:hover::before{
    width: 100%;
}
.s_table:hover{
    transform: translateY(-10px);
    color: var(--color-secondary);
}
.s_item i{
    font-size: 40px;
    margin-top: 10px;
    /* margin-left: -8px; */
}
.s_item{
    margin-top: 7px;
}
.s_item h2{
    margin-bottom: 2px;
    margin-top: 10px;
    font-size: 21px;
}
.s_item p {
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 500;
    color: var(--table-txt-color);
}
.progress_bar i{
    font-size: 18px;
    margin-top: -5px;
}
.skills{
    max-width: 61.3%;
    margin: auto;
}
/* Skills Section CSS End */

/* Log-in/From Section CSS Start */
.from_parent{
    background-color: rgba(255, 255, 255, 0.156);
    width: 550px;
    height: 450px;
    position: relative;
    margin-top: 15%;
    border-radius: 20px;
    border: 1px solid var(--color-count);
}
section[style="margin-top: 250px;"]{
    /* background-image: url(./image/log_in_bg.jpg); */
    height: 100vh;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;

}
section[style="margin-top: 250px;"] div[class="login_section"]{
    display: flex;
    justify-content: center;
}
form{
    position: absolute;
    top: 40%;
    left: 27%;
}
.from_item{ 
    width: 100%;
    font-size: 20px;
    padding: 5px 0px 5px 5px;
    outline: none;
    margin-bottom: 15px;
    border: 1px solid var(--color-secondary);
    transition: all 0.5s;
}
.from_item::placeholder{
    font-size: 18px;
    color: #36353556;
}
.from_item:focus{
    background-color: var(--color-transparent);
    outline: none;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}
.from_parent input[type="submit"]{
    padding: 6px 35px 4px 35px;
    font-size: 20px;
    width: 100%;
    cursor: pointer;
    transition: all 0.5s;
    border: 1px solid var(--color-secondary);
}
.from_parent input[type="submit"]:hover{
    background-color: var(--color-transparent);
    outline: none;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}
.from_txt h2{
    text-align: center;
    margin-top: 40px;
    color: var(--color-secondary);
}
/* Log-in/From Section CSS End */

/* Footer Section CSS Start */
.footer_parent{
    background-color: var(--color-footer);
    height: 290px;
    width: 100%;
}
.main_footer{
    display: flex;
    justify-content: space-between;
}
.div_1,.div_2,.div_3,.div_4{
    margin-top: 50px;
}
.div_1 h2,.div_2 h2,.div_3 h2,.div_4 h2{
    color: var(--color-secondary);
    font-size: 20px;
    margin-bottom: 15px;
}
.div_1 i{
    font-size: 18px;
    margin-top: 12px;
    margin-right: 10px;
}
.div_1 span{
    color: var(--color-secondary);
}
.div_1 a,.div_2 a,.div_3 a,.div_4 a{
    text-decoration: none;
    color: var(--color-secondary);
    transition: all 0.5s;
}
.div_1 a:hover{
    color: var(--color-primary);
    /* letter-spacing: 0.5px; */
}
.div_3 a:hover{
    color: var(--color-primary);
    /* letter-spacing: 0.5px; */
}
.div_2 a,.div_3 a,.div_4 a{
    display: inline-block;
    margin-bottom: 10px;
}
.div_2 a:hover{
    color: var(--color-primary);
    /* letter-spacing: 0.5px; */
}
.div_4 a:hover{
    color: var(--color-primary);
    /* letter-spacing: 0.5px; */
}
.social{
    margin-top: 15px;
}
.social a i{
    font-size: 25px;
    margin-right: 25px;
    transition: all 0.5s;
}
.social a i:hover{
    color: var(--color-primary) !important;
}
.footer_parent_1{
    background-color: var(--color-footer);
    height: 70px;
    width: 100%;
    border-top: 1px solid var(--color-btn);
}
.main_sub{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.left_div p{
  color: var(--color-secondary);
  margin-top: 6px;
}
.left_div p a{
    text-decoration: none;
    color: var(--color-secondary);
    transition: all 0.3s;
}
.left_div p a:hover{
    color: var(--color-primary) !important;
}
.valo_lagche_na_ar img{
    cursor: pointer;
}
/* Footer Section CSS End */

/* All Animation CSS Start */
@keyframes img_border_animation{
    from {
        width: 250px;

    }
    to {
        width: 350px;
    }
}
@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}
/* All Animation CSS End */

/* Responsive CSS Start */
@media screen and (max-width: 1706px) {
    .name_of_useing span + span +span + span{
        display: none;
    }
    .s_table {
        height: 160px;
    	width: 300px;
    }
    .skills_table{
        margin-top: 25px;
    }
    a.top_btn i {
	    left: 96.5%;
	    top: 92%;
    }
}
@media screen and (max-width: 1538px) {
    .s_table {
        height: 160px;
    	width: 280px;
    }
    .skills_table{
        margin-top: 40px;
    }
}
@media screen and (max-width: 1442px) {
    .name_of_useing a {
    	/* float: left; */
    	margin-right: 13px;
	    margin-top: 9%;
    }
    .table {
	    height: 280px;
    }
}
/* Responsive CSS End  */