* {
    /* border: 1px solid white; */
}


body {
    background-color: black;
}

:root {
    --green-clr: #DFFE02;
    --gray-clr: #898989;
    --dark-blue-clr: #171c22;
}

.bg-green {
    background: var(--green-clr);
}


.bg-dark-blue {
    background: var(--dark-blue-clr);
}


.bg-gray {
    background: var(--gray-clr);
}


.txt-green {
    color: var(--green-clr);
}


.txt-gry {
    color: var(--gray-clr);
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

/* ============== navbar start ============ */

.logo1 {
    color: #DFFE02;
}


.logo2 {
    color: #f7f3f3;
}


.mybtn {
    border: .2rem solid var(--green-clr) !important;
    padding: .4rem 1.6rem;
}

.mybtn:hover {
    background: transparent;
    color: var(--green-clr) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 2rem;
}

.nav-link {
    color: white;
}

.navbar {
    --bs-navbar-padding-y: 0rem;
    /* color:#fff; */
}

.navlist li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    position: relative;
}


.navlist li a::after {
    content: "";
    position: absolute;
    background: #fff;
    width: 100%;
    height: .1rem;
    left: 0;
    bottom: -5px;
    transform: scaleX(0);
    transition: transform .5s;
    transform-origin: bottom right;
}

.navlist li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;

}



/* ============ navbar end ========== */

/* ========== start hero section =========== */

.hero-section {
    min-height: 100vh;
    /* background-color: aqua; */
}

h1 {
    font-size: 4rem;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: bold;
}

p {
    font-size: .97rem;
}

.para {
    max-width: 500px;
}

.image-container {
    /* background: gold; */
    width: 28rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border-top: 1rem solid white;
    border-bottom: 1rem solid white;
    background-image: url(image/sohinee1.jpg);
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 1rem white,
        inset 0 0 1rem white,
        0 0 2rem #FFA726,
        inset 0 0 2rem #b55ac5,
        0 0 7rem #bb02ef,
        inset 0 0 4rem #FFE082;
}

.main-txt {
    letter-spacing: .2rem;
    font-size: .8rem;
}

@media screen and (max-width:700px) {
    h1 {
        font-size: 2.8rem;
    }

    .image-container {
        width: 20rem;
    }

    .hero-section {
        min-height: 72vh;
    }
    
    .portfolio{
        min-width: 15rem;
    }
    .text {
        font-size: 80px;
    }

    .image-container1 {
        width: 17rem;
    }

    .circle1 {
        width: 4rem;
    }

    .circle2 {
        width: 1.5rem;
    }

    .code {
        font-size: 0.60rem;
    }

    /* form{
       width: 25rem;
    } */
}

/* <!-- ========== end hero section ========== --> */

/* ============== start about section =========== */

.text {
    font-size: 60px;
    font-weight: bolder;
    text-shadow: 0 0 0.4rem var(--green-clr);
    letter-spacing: 0.4rem;

}

.image-container1 {
    /* background: gold; */
    width: 24rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.1rem solid white;
    /* border-bottom:1rem solid white ; */
    background-image: url(image/sohinee1.jpg);
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 1rem rgb(218, 106, 236);
}

.circle1 {
    background: #DFFE02;
    width: 6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    /* display: flex; */
}

.circle2 {
    background: #DFFE02;
    width: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;

}


@media screen and (max-width:700px) {
    .text {
        font-size: 80px;
    }

    .image-container1 {
        width: 17rem;
    }

    .circle1 {
        width: 4rem;
    }

    .circle2 {
        width: 1.5rem;
    }

    .code {
        font-size: 0.60rem;
    }

}

.code {
    /* font-size: 1.3rem; */
}

.icons {
    color: #fff;
    margin-top: 20px;
    font-size: 23px;
    /* border: 1px solid white; */
    flex-direction: row;
    gap: 1.5rem;
    display: flex;
}

.icons .face:hover {
    cursor: pointer;
    background: linear-gradient(#a3d8fa, #074de4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icons .insta:hover {
    cursor: pointer;
    background: linear-gradient(#e60663, #f1a61b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icons .linke:hover {
    cursor: pointer;
    background: linear-gradient(#a5dbf4, #0955f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icons .whats:hover {
    cursor: pointer;
    background: linear-gradient(#a5f6b4, #34f11b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icons .twi:hover {
    cursor: pointer;
    background: linear-gradient(#88d3f6, #0955f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
     }

     .icons .git:hover {
        cursor: pointer;
        background: linear-gradient(#d8e5ec, #000000);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
         }

.section-container {
    /* background-color: #a3d8fa; */
    padding-bottom: 4rem;
}

.mybtns {
    border: .2rem solid var(--green-clr) !important;
    color: var(--green-clr) !important;
    padding: .4rem 1.6rem;
}

.mybtns:hover {
    background: var(--green-clr) !important;
    color: black !important;
}
/* <!-- ========== end about section ========= --> */

/* ========== start skills section ========= */


/* ========== end skills section ========= */


/* <!-- ============== start Services section ============= --> */


/* @media screen and (max-width:700px) {
    text{
        font-size: 2px;
    }
} */
.text{
    font-size: 60px;
    font-weight: bolder;
    text-shadow: 0 0 0.4rem var(--green-clr);
    letter-spacing: 0.4rem;

}

.glow{
    position:relative
}

.glow::before{
    content: "";
    background: var(--green-clr);
    position: absolute;
    inset: 4rem;
    left: 0;
    border-radius: 50%;
    z-index: -1;
    filter: blur(70px);
}


.hover-card:hover{
    background: var(--green-clr);
}

.hover-card:hover *{
    color: #171c22 !important;
}

/* <!-- ============== end Services section ============= --> */

/* =============== start portfolio section =============== */

.text1{
    font-size: 54px;
    font-weight: bolder;
    text-shadow: 0 0 0.4rem var(--green-clr);
    letter-spacing: 0.4rem;
}

.mycard{
    width: 21rem;
    transition: transform .5s ease-in-out;
}

.mycard:hover{
    transform: scale(1.2);
}

.glows{
    position:relative
}

.glows::before{
    content: "";
    background: var(--green-clr);
    position: absolute;
    inset: 6rem;
    left: 0;
    border-radius: 50%;
    z-index: -1;
    filter: blur(60px);
}

/* =============== end portfolio section =============== */

/* =============== start testimonial section =============== */

.texts{
    font-size: 40px;
    font-weight: bolder;
    text-shadow: 0 0 0.4rem var(--green-clr);
    letter-spacing: 0.4rem;

}

.profile{
    /* background: white; */
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.profile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prev, .next{
    font-size: 1.2rem;
    padding: .5rem .6rem;
    border-radius: 50%;
}

/* <!-- =============== end testimonial section =============== --> */

/* <!-- =============== start contact section =============== --> */

.form-control{
    border: .1rem solid var(--gray-clr);
}

.form-control:focus{
    box-shadow: none;
    border: .1rem solid var(--gray-clr);
}

/* <!-- =============== end contact section =============== --> */

/* <!-- ========== footer section =========== --> */

/* <!-- ========= start social media section =========== --> */

.line{
    background: white;
    height: .1rem;
    width: 100%;
}

/* <!-- ========= end social media section =========== --> */