* {
    margin: 0;
    padding: 1px;
}

body {
    background-color: rgb(11 8 18);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    text-decoration: none;
}
a{
    text-decoration: none;

}

#app {
    overflow: hidden;
}

#app canvas {
    position: fixed;
    opacity: 50%;
    z-index: -5;
    top: 0;

}

.repo-card {
    margin-top: 10%;
    padding-left: 30%;
    width: 400px;
    height: 100px;
}


#navbarNav {
    justify-content: end;
    gap: 20px;

}

.bg-body-tertiary {
    --bs-bg-opacity: 1;
    background-color: transparent !important;
}

.nav-link,
.navbar-brand {
    color: white;

}

.navbar-brand:hover {
    color: cyan;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: cyan;
}

#navbarNav a:hover {
    color: cyan;
}

.hero-box {
    display: flex;
    margin: 1rem auto;
    justify-content: space-around;
    flex-wrap: wrap-reverse;
}

.txt-left {
    color: white;
    width: 45rem;
    display: flex;
    flex-direction: column;
    /* margin: auto; */
}



#dev {
    /* padding: 10px 0 0 10px; */
    font-family: "Montserrat", sans-serif;
    text-align: justify;
    padding-right: 15px;
    font-size: 1rem;
}

.txt-left h1 {
    font-size: 2.5rem;
    /* padding-top: 10px; */
}


#insta {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#insta:hover {
    -webkit-text-fill-color: cyan;
}

.social-media svg,
img {
    width: 45px;
    height: 45px;
    padding: 0;

}

.social-media img:hover,
svg:hover {
    fill: cyan;
    filter: brightness(0) saturate(100%) invert(92%) sepia(83%) saturate(3563%) hue-rotate(106deg) brightness(100%) contrast(105%);
    transition: transform 0.5s ease-in-out;
    transform: scaleY(1.2);
}

.txt-left .social-media:hover {
    transform: scale(1.1);
    transition: transform 0.6s ease-in-out;
    /* transition-duration: 2s; */

}

.txt-left .social-media {
    padding-top: 10px;
}

.txt-left .social-media {
    display: flex;
    column-gap: 16px;
    flex-wrap: wrap;
    transition: all ease 0.5s;
}

.txt-left .social-media i {
    font-size: 37px;
    cursor: pointer;
    transition: all ease 0.5s;

}

.txt-left .social-media i:hover {
    color: cyan;
    override-colors: cyan;
    overflow: visible;
    transition: transform 0.5s ease-in-out;
    transform: scaleY(1.2);

}

.txt-left button {
    /* font-size: 0.9rem; */
    padding: 15px;
    width: 12rem;


    border-radius: 20px;
    border: none;
    display: flex;
    margin-top: 3%;
    background-color: cyan;

    transition: all ease 0.5s;
}

.txt-left button:hover {
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 255, 255, 0.12) 10px -12px 30px, rgba(0, 255, 200, 0.12) 0px 4px 6px, rgba(8, 231, 213, 0.17) 0px 18px 13px, rgba(2, 247, 185, 0.09) 0px 3px 5px;
    cursor: pointer;


}

.hero-box button a {
    text-decoration: none;
    color: black;
}

.hero-box .img-right {
    width: 350px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-box .img-right img {
    border-radius: 50%;
    width: 500px;
    height: 450px;
    cursor: pointer;
    border: none;
    transition: all ease 0.5s;
    /* box-shadow: rgba(0, 269, 219, 0.25) 0px -21px 139px, rgba(0, 255, 255, 0.12) 0px -12px 30px, rgba(0, 255, 200, 0.12) 0px 4px 6px, rgba(8, 231, 213, 0.17) 0px 31px 15px, rgba(2, 247, 185, -0.91) 0px -3px 18px; */
}

.hero-box .img-right img:hover {

    box-shadow: rgba(0, 102, 255, 0.12) 0px -21px 139px, rgba(0, 255, 255, 0.12) 0px -12px 30px, rgba(0, 102, 255, 0.12) 0px 4px 6px, rgba(8, 231, 213, 0.17) 0px 31px 15px, rgba(2, 247, 185, -0.91) 0px -3px 18px;
    transform: scale(1.1);
    border: none;
    transition: transform 0.5s ease-in-out;
}


/* linkedin */
#tabs {
    display: flex;
    margin: 1rem auto;
    margin-bottom: 2.1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.youtubebox img {
    margin-top: 0.7rem;
    width: 13rem;
    height: 13rem;
}

.batch-linkedin {
    margin: -19px 0px;
}

#connect {
    border: 1px solid white;
    color: white;
    text-align: center;
    font-size: 50px;
    transition: transform 2s ease-in-out;
}

/* projects */

.intro {
    padding: 22px 0px;
}

.intro-header h1 {
    padding: 20px 10px;
    font-weight: 550;
    font-size: 28px;
    color: white;
}

.intro-container {
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    padding: 0 50px;
    margin: 1rem auto;
    justify-content: center;
    align-items: start;
    column-gap: 40px;

}

.intro-container-content {
    width: 300px;
    /* width: 25%; */
    /* border:2px solid; */
    padding-bottom: 20px;
}

.intro-image img {

    width: 77%;
    height: 18rem;
    border-radius: 50px;
    transition: all ease 0.9s;
    overflow: hidden;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.intro-image img:hover {
    transform: scale(1.09);
    transition: transform 0.9s all ease;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.intro-content-section h2 {
  
    color: white;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s ease;
    font-size: 23px;
}

.intro-content-section h2:hover,
.contact_items h3:hover {
    color: cyan;
}

.intro-content-section p {
    color: white;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-size: 17px;
    font-weight: 300;
    text-align: center;
}

.contact-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 1rem auto;
    padding: 1rem;
    width: 80%;
    row-gap: 10px;
}

.contact_items {
    background-color: #fdf49700;
    width: 100%;
    border: 1px solid #ffff;
    margin: 15px;

    padding: 10px 20px;
    border-radius: 15px;
    transition: all ease 0.9s;
}

.contact_items:hover {

    color: cyan;
    transition: all ease 0.5s;
     /* transition: transform 0.9s all ease; */
    transform: scale(1.1);

}

.contact_items a img {
    background-color: #fff;
    padding: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}

.contact_items a {
    text-decoration: none;
    display: flex;
    color: #fff;
   
    align-items: center;
    justify-content: space-around;
   
}

.contact_items h3 {
    color: white;
    margin-top: 10px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    text-align: center;
    transition: 0.2s ease;
    font-size: 23px;
}