@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    font-family: "Poppins", serif;
    /* border: .1rem solid white; */
}

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

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

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

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

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

.txt-gray{
    color: var(--gray-clr);
}
li{
    list-style: none;
}

a{
    text-decoration: none;
}
img{
    max-width: 100%;
    height: auto;
}

                          /* NAv bar  */
.navbar-logo{
    width: 8.5rem;
}

.mybtn{
    border: .1rem solid var(--green-clr) !important;
    padding: .5rem .6rem;
 }

 .mybtn:hover{
    background-color: 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: 2.2rem;
}

                                       /* hero secton  */


 .image-container{
    width: 25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border-top: 1rem solid white;
    border-bottom: 1rem solid white;
    background-image: url('/profile.png');
    background-position: center;
    background-size: 115%;
    box-shadow:
     0 0 1rem white,
    inset 0 0 1rem white,
     0 0 2rem var(--green-clr),
   inset 0 0 2rem var(--green-clr),
   0 0 7rem var(--green-clr),
   inset 0 0 2rem var(--green-clr); 

}

.hero-section{
   min-height: 88vh;
}

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

}

p{
    font-size: .95rem;
}

.para{
    max-width:500px;
}

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


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

    .image-container{
        width: 18rem;
    }

    .hero-section{
        min-height: 75vh;
    }
    
    .about-me{
        width: 23rem !important;
    }
    form{
       width: 20rem !important;
    }
}


                   /* section 2  */
.about-me{
    width: 35rem;
    margin: 0 auto;
}

.section-container{
    padding-block: 4rem;
}

.glow{
    position: relative;
}
.glow::before{
    content: '';
    background: var(--green-clr);
    position: absolute;
    inset: 4rem;
    border-radius: 50%;
    z-index: -1;
    filter: blur(70px);
}
                           /* Card  */

.card{
    background-color: #343a40;
}

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

.hover-card:hover *{
    color: black !important;
}

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

.my-card:hover{
    transform: scale(1.1);
}


               /* slider  */

.swiper-slide {
  color: white; 
  background-color: #343a40
}

.profile{
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    text-align: center;
    margin-top: -1px;
    margin-left: -11px;
    overflow: hidden;
}

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

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

.blog-card{
    width: 22rem;
}

.tittle-blog{
    font-size: 1.1rem;
}


                       /* section form  */

form{
    width: 33rem;
}

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

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

}

#floatingTextarea{
    resize: none;
    height: 20vh;
}

                    /* footer  */

.line{
    background-color: rgb(22, 225, 225 , 0.127);
    height: .1rem;
    width: 100%;
}