@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@200;300;400;500;600;700&display=swap');

 .logo {
     fill: white;
 }

 :root {
     --bg-black-900: #e5e5f5;
     --bg-black-100: #fdf9ff;
     --bg-black-50: #e8dfec;
     --text-black-900: #302e4d;
     --text-black-700: #504e70;
     --bg-image: url(none);


 }

 body.dark {
     --bg-black-900: #000000;
     --bg-black-100: #000000;
     --bg-black-50: #0ccdf8;
     --text-black-900: #e4e0e0;
     --text-black-700: #ffffff;
     background: var(--bg-black-900);

 }

 body {
     line-height: 1.5;
     font-size: 16px;
     font-family: 'Poppins', sans-serif;
     background: var(--bg-black-900);
 }

 * {
     margin: 0;
     padding: 0;
     outline: none;
     text-decoration: none;
     box-sizing: border-box;
     cursor: url(../images/cursor.png), auto;
 }

 ::before,
 ::after {
     box-sizing: border-box;
 }

 ul {
     list-style: none;
 }

 /* animated squares */

 .circles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .circles li {
     position: absolute;
     display: block;
     list-style: none;
     width: 20px;
     height: 20px;
     background-color: var(--skin-color);
     animation: animate 30s linear infinite;
     bottom: -150px;

 }

 .circles li:nth-child(1) {
     left: 25%;
     width: 80px;
     height: 80px;
     animation-delay: 0s;
 }


 .circles li:nth-child(2) {
     left: 10%;
     width: 20px;
     height: 20px;
     animation-delay: 2s;
     animation-duration: 12s;
 }

 .circles li:nth-child(3) {
     left: 70%;
     width: 20px;
     height: 20px;
     animation-delay: 4s;
 }

 .circles li:nth-child(4) {
     left: 40%;
     width: 60px;
     height: 60px;
     animation-delay: 0s;
     animation-duration: 18s;
 }

 .circles li:nth-child(5) {
     left: 65%;
     width: 20px;
     height: 20px;
     animation-delay: 0s;
 }

 .circles li:nth-child(6) {
     left: 75%;
     width: 110px;
     height: 110px;
     animation-delay: 3s;
 }

 .circles li:nth-child(7) {
     left: 35%;
     width: 150px;
     height: 150px;
     animation-delay: 7s;
 }

 .circles li:nth-child(8) {
     left: 50%;
     width: 25px;
     height: 25px;
     animation-delay: 15s;
     animation-duration: 45s;
 }

 .circles li:nth-child(9) {
     left: 20%;
     width: 15px;
     height: 15px;
     animation-delay: 2s;
     animation-duration: 35s;
 }

 .circles li:nth-child(10) {
     left: 85%;
     width: 150px;
     height: 150px;
     animation-delay: 0s;
     animation-duration: 11s;
 }



 @keyframes animate {

     0% {
         transform: translateY(0) rotate(0deg);
         opacity: 1;
         border-radius: 0;
     }

     100% {
         transform: translateY(-1000px) rotate(720deg);
         opacity: 0;
         border-radius: 50%;
     }

 }

 .section {
     /* background: var(--bg-black-900);
    background-image: var(--bg-image); */
     min-height: 100vh;
     display: block;
     padding: 0 30px;
     opacity: 1;
     position: relative;
     /* top: 0; */
     /* right: 0; */
     /* bottom: 0; */
     /* z-index: 0; */
     overflow-y: auto;
     overflow-x: hidden;
     left: -0px;
     right: 0px;
     transition: all 0.3s ease;
 }

 .section.back-section {
     z-index: 1;
 }

 .section.active {
     z-index: 2;
     opacity: 1;
     animation: slideSection 1s ease;
 }

 @keyframes slideSection {
     0% {
         transform: translateX(100%);
     }

     100% {
         transform: translateX(0%);
     }
 }

 .hidden {
     display: none !important;
 }

 .padd-15 {
     padding-left: 15px;
     padding-right: 15px;
 }

 .container {
     max-width: 1100px;
     width: 100%;
     margin: auto;
 }

 .section .container {
     padding-top: 60px;
     padding-bottom: 70px;
 }

 .section-title {
     flex: 0 0 100%;
     max-width: 100%;
     margin-bottom: 60px;
 }

 .section-title h2 {
     font-size: 38px;
     color: var(--text-black-900);
     font-weight: 700;
     position: relative;
 }

 .section-title h2::before {
     content: '';
     height: 4px;
     width: 50px;
     background-color: var(--skin-color);
     position: absolute;
     top: 100%;
     left: 0;
 }

 .section-title h2::after {
     content: '';
     height: 4px;
     width: 25px;
     background-color: var(--skin-color);
     position: absolute;
     top: 100%;
     left: 0;
     margin-top: 8px;
 }

 .row {
     display: flex;
     flex-wrap: wrap;
     margin-left: -15px;
     margin-right: -15px;
     position: relative;
 }

 /* .btn
{
    font-size: 16px;
    font-weight: 500;
    padding: 12px 35px;
    color: white;
    border-radius: 40px;
    display: inline-block;
    white-space: nowrap;
    border: none;
    transition: all 0.3s ease;
    background: var(--skin-color);
    
   
} */

 .btn {
     height: 50px;
     width: 150px;
     position: absolute;
     transform: translate(-50%, -50%);
     /* top: 10%; */
     margin-top: 20px;
     left: 8%;
     border-radius: 5px;
     overflow: hidden;
 }

 .btn:before {
     content: "";
     height: 100%;
     width: 150%;
     position: absolute;
     /* background: conic-gradient(#fd004c,
             #fe9000,
             #fff020,
             #3edf4b,
             #3363ff,
             #b102b7,
             #fd004c); */
     left: -25%;
     top: -25%;
     animation: spin 1.5s infinite linear;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(-360deg);
     }
 }

 .btn:after {
     content: "Hire me";
     position: absolute;
     background-color: var(--skin-color);
     height: 93%;
     width: 93%;
     top: 3.5%;
     left: 3.5%;
     border-radius: 5px;
     font-family: 'Poppins', sans-serif;
     color: #ffffff;
     font-size: 12px;
     letter-spacing: 1px;
     display: grid;
     place-items: center;

 }

 #send_msg{
    margin-left: 55px;
    
 }

 #send_msg::after {
    /* margin:auto; */
     content: "Send Message";
 }

 #resume {
     width: 100px;
     left: 6%;
     margin-left: 45px;

 }

 #resume::after {
     content: "Resume";
 }

 #hire {
     width: 120px;
     margin-top: 3px;
     left: 10%;
     margin-left: 45px;
 }

 /* .btn:hover
{
    transform: scale(1.05);
} */
 .shadow-dark {
     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 }

 /* aside */
 .aside {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 10;
     height: 10%;
     display: flex;
     justify-content: space-around;
     background-color: var(--bg-black-100);
     
 }

 .aside .navhead .nav {
     /* border: 1px solid red;  */
     background-color: white;
     color: #000000;
     width: 70%;
     margin: auto;
 }

 .aside ul {
     display: flex;
     justify-content: space-around;
     align-items: center;
 }

 .aside .logo {
     margin: 10px;
     font-size: 20px;
     text-transform: capitalize;
 }

 .aside .logo a {
     color: var(--text-black-900);
     font-weight: 500;
     padding: 10px 10px;
     font-size: 30px;
     letter-spacing: 5px;
     position: relative;
 }

 .aside .logo a span {
     font-family: 'Clicker Script', cursive;
     font-size: 30px;
 }

 .aside .logo a::before {
     content: '';
     position: absolute;
     width: 20px;
     height: 10px;
     border-bottom: 2px solid var(--skin-color);
     border-left: 2px solid var(--skin-color);
     bottom: 0;
     left: 0;
 }

 .aside .logo a::after {
     content: '';
     position: absolute;
     width: 20px;
     height: 10px;
     border-top: 2px solid var(--skin-color);
     border-right: 2px solid var(--skin-color);
     top: 0;
     right: 0;
 }

 .aside .navhead .nav li a {
     font-size: 16px;
     font-weight: 600;
     border-bottom: 1px solid var(--bg-black-50);
     color: var(--text-black-900);
     padding: 5px 15px;
 }

 .aside .navhead .nav li a.active {
     color: var(--skin-color);
 }

 .aside .navhead .nav li a i {
     margin-right: 15px;
 }

 /* home */
 .home {
     min-height: 100vh;
     display: flex;
     color: var(--text-black-900);
 }

 .home .home-info {
     flex: 0 0 60%;
     max-width: 60%;
 }

 h3.hello {
     font-size: 28px;
     margin: 15px 0;
 }

 h3.hello span {
     /* font-family: 'Poppins', sans-serif; */
     font-family: cursive;
     font-size: 36px;
     font-weight: 700;
     color: var(--skin-color);
 }

 h3.my-profession {
     font-size: 30px;
     margin: 15px 0;
 }

 .typing {
     color: var(--skin-color);
 }

 .home-info p {
     margin-bottom: 70px;
     font-size: 20px;
     color: var(--text-black-700);
     font-family: 'Poppins', sans-serif;

 }

 /* .home-blob{
    width:200px;
    fill :var(--text-black-900);
} */
 .home .home-img {
     flex: 0 0 40%;
     max-width: 40%;
     text-align: center;
     position: relative;
     /* width:170px; */
 }

 .home .home-img img {
     transition: 0.3s ease;
 }

 .home .home-img:hover img {
     transform: scale(1.14);
 }

 .home-img::after {
     content: '';
     position: absolute;
     height: 50px;
     width: 50px;
     border-bottom: 10px solid var(--skin-color);
     border-right: 10px solid var(--skin-color);
     right: 20px;
     bottom: -40px;
 }

 .home-img::before {
     content: '';
     position: absolute;
     height: 50px;
     width: 50px;
     border-top: 10px solid var(--skin-color);
     border-left: 10px solid var(--skin-color);
     left: -20px;
     top: -40px;
 }

 .home .home-img img {
     margin: auto;
     height: 400px;
     background-color: var(--skin-color);
     border-radius: 550px;
     /* -webkit-mask-repeat: no-repeat; */
     /* -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00Ni4yLC03NC4yQzU5LjEsLTYzLjUsNjguNCwtNDkuNSw3NC44LC0zNC41QzgxLjEsLTE5LjUsODQuNSwtMy40LDgzLjEsMTIuNUM4MS42LDI4LjQsNzUuMyw0NC4xLDY0LjMsNTQuNEM1My4zLDY0LjgsMzcuNiw2OS43LDIyLDczLjhDNi40LDc3LjgsLTkuMSw4MSwtMjMuMyw3Ny42Qy0zNy41LDc0LjMsLTUwLjMsNjQuNSwtNjAuNSw1Mi41Qy03MC43LDQwLjYsLTc4LjQsMjYuNSwtODIuMywxMC44Qy04Ni4yLC00LjksLTg2LjQsLTIyLjIsLTc5LjIsLTM1LjRDLTcyLC00OC41LC01Ny40LC01Ny41LC00Mi45LC02Ny42Qy0yOC41LC03Ny42LC0xNC4zLC04OC44LDEuMiwtOTAuNkMxNi42LC05Mi40LDMzLjIsLTg1LDQ2LjIsLTc0LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIgLz4KPC9zdmc+Cg==); */
     /* -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00Ny42LC03NC41QzYxLjQsLTY1LjIsNzIuMSwtNTEuNSw3OS44LC0zNkM4Ny41LC0yMC42LDkyLjIsLTMuMyw4OS40LDEyLjZDODYuNywyOC40LDc2LjUsNDMsNjQuNyw1NS41QzUzLDY4LDM5LjYsNzguNiwyNCw4NC42QzguMyw5MC41LC05LjUsOTEuOSwtMjYuNCw4Ny45Qy00My4zLDgzLjgsLTU5LjIsNzQuNSwtNzAuNCw2MS4yQy04MS42LDQ3LjksLTg4LjEsMzAuOCwtODkuOCwxMy40Qy05MS41LC0zLjksLTg4LjUsLTIxLjUsLTgxLC0zNi42Qy03My41LC01MS43LC02MS41LC02NC40LC00Ny4zLC03My41Qy0zMywtODIuNSwtMTYuNSwtODgsMC4yLC04OC4zQzE2LjksLTg4LjYsMzMuOCwtODMuNyw0Ny42LC03NC41WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwIDEwMCkiIC8+Cjwvc3ZnPgo=); */
 }

 .home__icon_cont {
     display: flex;
     flex-direction: row;

 }

 .home__icon_cont i {
     color: var(--skin-color);
     font-size: 28px;
     margin-top: 10px;
     margin-bottom: 15px;
     margin-right: 10px;
 }

 /* About */
 .about .about-content {
     flex: 0 0 100%;
     max-width: 100%;
 }

 .about .about-content .about-text {
     flex: 0 0 100%;
     max-width: 100%;
 }

 .about .about-content .about-text h3 {
     font-size: 24px;
     margin-bottom: 15px;
     font-weight: 700;
     color: var(--text-black-900);
 }

 .about .about-content .about-text h3 span {
     color: var(--skin-color);
 }

 .about .about-content .about-text p {
     font-size: 16px;
     line-height: 25px;
     color: var(--text-black-700);
 }

 .about .about-content .personal-info {
     flex: 0 0 60%;
     max-width: 60%;
     margin-top: 40px;
 }

 .about .about-content .personal-info .info-item {
     flex: 0 0 50%;
     max-width: 50%;
 }

 .about .about-content .personal-info .info-item p {
     font-weight: 600;
     padding: 10px 0;
     font-size: 14px;
     color: var(--text-black-900);
     border-bottom: 1px solid var(--bg-black-50);
 }

 .introdu {
     margin-bottom: 10px;
     font-family: 'Poppins', sans-serif;
 }

 .about .about-content .personal-info .info-item p span {
     font-weight: 400;
     color: var(--text-black-700);
     margin-left: 4px;
     display: inline-block;
 }

 .about .about-content .personal-info .info-item p a {
     font-weight: 400;
     color: var(--text-black-700);
     margin-left: 4px;
     display: inline-block;
 }

 .about .about-content .personal-info .buttons {
     margin-top: 30px;
 }

 .about .about-content .personal-info .buttons .btn {
     margin-top: 10px;
 }

 .about .about-content .skills {
     flex: 0 0 40%;
     max-width: 40%;
     margin-top: 40px;
 }

 .about .about-content .skills .skill-item {
     flex: 0 0 100%;
     max-width: 100%;
 }

 .about .about-content .skills .skill-item h5 {
     line-height: 40px;
     font-weight: 600;
     font-size: 16px;
     color: var(--text-black-900);
     text-transform: capitalize;
 }

 .about .about-content .skills .skill-item .progress {
     background-color: var(--bg-black-50);
     height: 7px;
     border-radius: 4px;
     width: 100%;
     position: relative;
 }

 .about .about-content .skills .skill-item {
     margin-bottom: 25px;
 }

 .about .about-content .skills .skill-item .progress .progress-in {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     border-radius: 4px;
     background-color: var(--skin-color);
 }

 .about .about-content .skills .skill-item .skill-percent {
     position: absolute;
     right: 0;
     color: var(--text-black-900);
     top: -40px;
     font-weight: 400;
     line-height: 40px;
 }

 .about .about-content .education,
 .about .about-content .experience {
     flex: 0 0 50%;
     max-width: 50%;
     margin-top: 30px;
 }

 .about .about-content h3.title {
     font-size: 24px;
     margin-bottom: 30px;
     font-weight: 700;
     color: var(--text-black-900);
 }

 .about_me {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 2px dotted var(--text-black-700);
     color: var(--text-black-700);
     width: 100%;
 }

 .about_me>div {
     width: 60%;
 }

 #about-img {
     height: 250px;
     width: 250px;
     transform: translate(-30%, -8%);
     border-top-right-radius: 40%;
     border-bottom-left-radius: 40%;
     overflow: hidden;

 }

 #about-img:before {
     content: "";
     height: 100%;
     width: 150%;
     position: absolute;
     background: conic-gradient(var(--skin-color) 20deg,
             transparent 150deg);
     left: -25%;
     top: -5%;
     animation: spin 1.5s infinite linear;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(-360deg);
     }
 }

 #about-img:after {
     content: "";
     position: absolute;
     /* background-image: url("https://github.com/AnshulKumarYadav/AnshulKumarYadav/raw/main/assets/WhatsApp%20Image%202022-07-22%20at%209.22.30%20AM.jpeg"); */
     background-size: cover;
     background-repeat: no-repeat;
     height: 93%;
     width: 93%;
     top: 3.5%;
     left: 3.5%;
     border-top-right-radius: 40%;
     border-bottom-left-radius: 40%;

 }

 .row h4 {
     color: var(--text-black-700);
 }

 .margtop {
     margin-top: 30px;
 }

 .EDUCATION {
     padding: 2rem;
     padding-bottom: 50px;
     margin: 0 auto;
     max-width: 600px;
     scroll-behavior: smooth;
 }

 .timeline {
     position: relative;
     min-height: 150px;

 }

 .line {
     position: absolute;
     z-index: 2;
     left: calc(50% - 1px);
     width: 2px;
     top: -50px;
     bottom: -20px;
     background-color: var(--skin-color);
     display: none;
 }

 .line:before,
 .line:after {
     position: absolute;
     display: block;
     content: '';
     height: 1rem;
     width: 1rem;
     border-radius: 50%;
     background-color: var(--skin-color);
     left: 50%;
     transform: translateX(-50%);
 }

 .line:after {
     bottom: 0;
 }

 .section2 {
     display: flex;
     opacity: 0;
     transform: translateX(-100%);
     transition: 600ms ease;
     position: relative;
     z-index: 0;
     margin: 50px 0;
     padding: 1rem;
     border-radius: 1rem;
     align-items: center;
     min-height: 300px;

 }

 .section2:nth-child(odd) {
     flex-direction: row-reverse;
     transform: translateX(100%);
 }

 .bead {
     position: absolute;
     display: block;
     height: 1rem;
     width: 1rem;
     border-radius: 50%;
     background-color: var(--skin-color);
     left: 50%;
     top: 20%;
     transform: translateX(-50%);

 }

 .edu_cont {
     width: calc(55% - 2rem);
     padding: 15px;
     border-radius: 10px;
     border: 1px solid var(--bg-black-50);
 }

 .edu_cont:hover {
    
     box-shadow: 0 0 12px var(--text-black-700);
 }

 .show-me:nth-child(n) {
     transform: none;
     opacity: 1;
 }

 .course_,
 .institute,
 .duration {
     color: var(--text-black-900);
 }



 /* service */
 .service .container {
     padding-bottom: 40px;
 }

 .service .service-item {
     margin-bottom: 30px;
     flex: 0 0 33.33%;
     max-width: 33.33%;
     cursor: pointer;
 }

 .service .service-item .service-item-inner {
     background-color: transparent;
     border: 1px solid var(--bg-black-50);
     border-radius: 10px;
     padding: 30px 15px;
     text-align: center;
     transition: all 0.5s ease;
 }

 .service .service-item .service-item-inner:hover {
     box-shadow: 0 0 12px var(--text-black-700);
 }

 .service .service-item .service-item-inner .icon {
     height: 60px;
     width: 60px;
     border-radius: 50%;
     display: block;
     margin: 0 auto 30px;
     text-align: center;
     transition: all 0.3s ease;
 }

 .service .service-item .service-item-inner .icon .fa {
     font-size: 40px;
     line-height: 60px;
     color: var(--skin-color);
     transition: all 0.3s ease;
 }

 .service .service-item .service-item-inner:hover .icon {
     background: var(--skin-color);
 }

 .service .service-item .service-item-inner:hover .icon .fa {
     font-size: 25px;
     color: #ffffff;
 }

 .service .service-item .service-item-inner h4 {
     font-size: 18px;
     margin-bottom: 15px;
     color: var(--text-black-900);
     font-weight: 700;
     text-transform: capitalize;
 }

 .service .service-item .service-item-inner p {
     font-size: 16px;
     color: var(--text-black-700);
     line-height: 25px;
 }

 /* portfolio */
 .portfolio .container {
     padding-bottom: 40px;
 }

 .portfolio .portfolio-heading {
     flex: 0 0 100%;
     max-width: 100%;
     margin-bottom: 40px;
 }

 .portfolio .portfolio-heading h2 {
     color: var(--text-black-900);
     font-weight: 500;
 }

 .portfolio .portfolio-item {
     flex: 0 0 33.33%;
     max-width: 33.33%;
     margin-bottom: 30px;
 }

 .portfolio .portfolio-item-inner {
     border: 6px solid var(--bg-black-100);
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer;
     height: 520px;
     text-align: center;
     padding: 10px;
 }

 .portfolio .portfolio-item-inner:hover {
     box-shadow: 0 0 12px var(--text-black-700);
     transition: 0.5s ease;
 }

 .portfolio .portfolio-item-inner .portfolio-img>img {
     width: 100%;
     height: 170px;
     display: block;
 }

 /* contact */
 .contact-title {
     color: var(--skin-color);
     text-align: center;
     font-size: 25px;
     margin-bottom: 20px;
 }

 .contact-sub-title {
     color: var(--text-black-900);
     text-align: center;
     font-size: 15px;
     margin-bottom: 60px;
 }

 .contact .contact-info-item {
     flex: 0 0 20%;
     max-width: 25%;
     text-align: center;
     margin-bottom: 60px;
 }

 .contact .contact-info-item .icon {
     display: inline-block;
     color: var(--skin-color);
     font-size: 25px;
 }

 .contact .contact-info-item .icon .fa {
     font-size: 25px;
     color: var(--skin-color);
 }

 .contact .contact-info-item h4 {
     font-size: 16px;
     font-weight: 700;
     color: var(--text-black-900);
     text-transform: capitalize;
     margin: 15px 0 5px;
 }

 .contact .contact-info-item p {
     font-size: 14px;
     line-height: 25px;
     color: var(--text-black-700);
     font-weight: 400;
 }

 .contact .contact-form {
     flex: 0 0 100%;
     max-width: 100%;
 }

 .contact .contact-form .col-6 {
     flex: 0 0 50%;
     max-width: 50%;
 }

 .contact .contact-form .col-12 {
     flex: 0 0 100%;
     max-width: 100%;
 }

 .contact .contact-form .form-item {
     margin-bottom: 30px;
 }

 .contact .contact-form .form-item .form-control {
     width: 90%;
     height: 50px;
     border-radius: 25px;
     background: var(--bg-black-100);
     border: 1px solid var(--bg-black-50);
     padding: 10px 25px;
     font-size: 16px;
     color: var(--text-black-700);
     transition: all 0.3s ease;
     /* border: 2px solid yellow; */
 }

 .contact .contact-form .form-item .form-control:focus {
     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 }

 .contact .contact-form .form-item textarea.form-control {
     height: 140px;
 }

 .techs {
     font-size: 14px;
     color: var(--text-black-900);
 }

 .project_tech_box {
     text-align: left;
     font-size: 14px;
     color: var(--text-black-900);
 }

 .TechStacks__text {
     color: var(--skin-color);
 }

 .project-name {

     font-size: 16px;
     font-weight: 400;
     margin: 10px 0;
     color: var(--text-black-900);
     text-align: justify;

 }

 .project__about {
     height: 140px;
     overflow: hidden;
     font-size: 14px;

 }

 .techcen {
     text-align: center;
 }

 .navigate_ar {
     display: flex;
     justify-content: space-between;
     padding: 5px 10%;
     /* display: inline-block; */

 }

 .navigate_ar>a {
     color: var(--text-black-900);
     padding: 5px 10px;
     border-radius: 50%;
     font-size: 1.4rem;
     transition: 0.5s ease;
 }

 .navigate_ar>a:hover {
     background-color: var(--skin-color);
     color: var(--bg-black-100);
 }

 .contact .contact-form .btn {
     height: 50px;
     padding: 0 50px;
 }

 @media (max-width:1199px) {
     .section .container {
         padding-top: 70px;
     }

     .section {
         left: 0;
     }

     .about .about-content .personal-info .info-item p span {
         display: block;
         margin-left: 0;
     }
 }

 @media (max-width:991px) {

     .contact .contact-info-item,
     .portfolio .portfolio-item,
     .service .service-item {
         flex: 0 0 50%;
         max-width: 50%;
     }

     .home .home-info {
         flex: 0 0 100%;
         max-width: 100%;
     }

     .home .home-img {
         /* display: none; */
         margin: auto;
         margin-top: 50px;
     }

     .home-img::before {
         border-top: none;
         border-left: none;
     }

     .home-img::after {
         border-bottom: none;
         border-right: none;
     }

     #heroimgrevv {
         display: flex;
         flex-direction: column-reverse;
     }

     #about-img {
         display: none;
     }

     .about_me>div:nth-child(1) {
         width: 100%;
         font-size: 12px;
     }
 }

 @media (max-width:767px) {

     .contact .contact-form .col-6,
     .contact .contact-info-item,
     .portfolio .portfolio-item,
     .service .service-item,
     .about .about-content .experience,
     .about .about-content .education,
     .about .about-content .skills,
     .about .about-content .personal-info {
         flex: 0 0 100%;
         max-width: 100%;
     }

     .eduupdate {
         flex-direction: column;
     }

     .EDUCATION .edu_cont {
         margin-top: 10px;
     }

     .home .home-img {
         flex: 0 0 100%;
         max-width: 100%;
         text-align: center;
         position: relative;

     }

 }



 .msg-pop-up {
     background-color: #37b182;
     font-weight: 700;
     font-size: 16px;
     width: 20%;
     padding: 1.5%;
     position: fixed;
     right: 2%;
     top: 2%;
     z-index: 100;
     border-radius: 5px;
     text-align: center;
     color: #fff;
     display: none;
     box-shadow: 5px 5px 5px rgba(48, 46, 77, 0.15);
 }

 .failed-msgpop {
     background-color: #ec1839;
     font-weight: 700;
     font-size: 16px;
     width: 20%;
     padding: 1.5%;
     position: fixed;
     right: 2%;
     top: 2%;
     z-index: 100;
     border-radius: 5px;
     text-align: center;
     color: #fff;
     display: none;
 }


 @media (max-width:557px) {

     .edu_cont {
         width: 45%;
     }

     .edu_cont h4 {
         font-size: 13px;
         font-weight: bold;
     }

     .edu_cont p {
         font-size: 9px;
     }

     .about___info {
         display: flex;
         width: 100%;
         flex-direction: column;

     }

     .adjus {
         display: flex;
         align-items: center;
         width: 100%;
         overflow: hidden;


     }

     .about .about-content .personal-info .info-item {
         flex: 0 0 100%;
         max-width: 100%;
     }

     .about .about-content .personal-info .info-item p {
         font-weight: 600;
         padding: 10px 0;
         font-size: 14px;
         color: var(--text-black-900);
         border-bottom: 1px solid var(--bg-black-50);
     }
 }

 @media (max-width:565px) {

     h3.hello span {
         font-size: 32px;
     }
 }


 .skills_Filter_Box {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
 }

 .skill_filter_btn {
     color: var(--text-black-900);
     font-weight: 600;
     padding: 6px 12px;
     margin-bottom: 1rem;
     background-color: var(--bg-black-100);
     border: none;
     border-radius: 5px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
     cursor: pointer;
     font-size: 15px;
     transition: 0.8s ease;
 }

 .active_tech_skills {
     background-color: var(--skin-color);
     color: var(--bg-black-900);
 }

 .project_filter_btn {
     color: var(--text-black-900);
     font-weight: 600;
     padding: 6px 12px;
     margin-bottom: 1rem;
     background-color: var(--bg-black-100);
     border: none;
     border-radius: 5px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
     cursor: pointer;
     font-size: 15px;
     transition: 0.8s ease;
 }

 .projects_Filter_Box {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
 }

 .active_tech_project {
     background-color: var(--skin-color);
     color: var(--bg-black-900);
 }

 /* title : 38px
content : 28px
subheading : 32px */


 /* scrollbar design */
 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-track {
     background-color: var(--bg-black-100);
 }

 ::-webkit-scrollbar-thumb {
     background-color: var(--skin-color);
     border-radius: 5px;
 }


 /* #git-calender{
    display: flex;
    margin: auto;
    border: 1px solid black;
    width: 90%;
 } */
 .git-container {
    margin-top: 50px;
}
.calendar {
    cursor: pointer;
}
.git {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    gap: 30px;
}
.git img {
    width: 40%;
    margin: auto;
    cursor: pointer;
}

 .heading {
    text-align: center;
}
.heading h2 {
    font-size: var(--h2-font);
    font-weight: 500;
    margin: 7px 0px 20px;
    line-height: 1.1;
}
.heading h3 {
    color: var(--main-clr);
    font-size: 20px;
    font-weight: 500;
}
.heading p {
    font-size: var(--p-font);
    color: var(--second-clr);
    line-height: 28px;
}

@media (max-width: 900px) {
    .portfolio-content {
        grid-template-columns: repeat(1, 1fr);
    }
    .col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .col img {
        height: 100%;
    }
    .skill-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .tech img {
        width: 80px;
        height: 80px;
    }
    .items {
        grid-template-columns: repeat(2, 1fr);
    }
    .cta-box {
        grid-template-columns: repeat(2, 1fr);
    }
    .git img {
        width: 50%;
        margin: auto;
    }
}
@media (max-width: 767px) {
    :root {
        --big-font: 3.2rem;
        --h2-font: 2.1rem;
        --p-font: 1.1rem;
    }
    .git img {
        width: 60%;
        margin: auto;
    }
}
@media (max-width: 600px) {
    .home {
        grid-template-columns: repeat(1, 1fr);
    }
    .home-img {
        display: flex;
        justify-content: center;
        margin: auto;
    }
    .home-img img {
        width: 55%;
    }
    .col {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .col img {
        height: 100%;
    }
    .about-content {
        grid-template-columns: repeat(1, 1fr);
    }
    .about-img {
        display: flex;
        justify-content: center;
    }
    .about-img img {
        width: 95%;
    }
    .skill-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .tech img {
        width: 100px;
        height: 100px;
    }
    .items {
        grid-template-columns: repeat(1, 1fr);
    }
    .cta-box {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 400px) {
    :root {
        --big-font: 2.4rem;
        --h2-font: 1.7rem;
        --p-font: 1rem;
    }
    .tech img {
        width: 40px;
        height: 40px;
    }
    .tech h3 {
        font-size: 16px;
    }
    .git img {
        width: 100%;
        margin: auto;
    }
    form {
        width: 320px;
    }
}